a

src/components/MemberList/MemberListItem.tsx

@@ -1,9 +1,23 @@
+import {
+	FloatingPortal,
+	flip,
+	offset,
+	shift,
+	useClick,
+	useDismiss,
+	useFloating,
+	useInteractions,
+	useRole,
+} from "@floating-ui/react";
 import { PresenceUpdateStatus } from "@spacebarchat/spacebar-api-types/v9";
+import { motion } from "framer-motion";
+import { useState } from "react";
 import styled from "styled-components";
-import useFloating from "../../hooks/useFloating";
 import { useAppStore } from "../../stores/AppStore";
 import GuildMember from "../../stores/objects/GuildMember";
+import User from "../../stores/objects/User";
 import Avatar from "../Avatar";
+import UserProfilePopout from "../floating/UserProfilePopout";
 
 const ListItem = styled.div<{ isCategory?: boolean }>`
 	padding: ${(props) => (props.isCategory ? "16px 8px 0 0" : "1px 8px 0 0")};
@@ -62,17 +76,24 @@ function MemberListItem({ item }: Props) {
 	const app = useAppStore();
 	const presence = app.presences.get(item.guild.id)?.get(item.user!.id);
 
-	const { refs, getReferenceProps } = useFloating({
+	const [open, setOpen] = useState(false);
-		placement: "left-start",
+
-		type: "userPopout",
+	const floating = useFloating({
-		config: {
+		placement: "right-start",
-			user: item.user!,
+		open,
-			member: item,
+		onOpenChange: setOpen,
-		},
+		// whileElementsMounted: autoUpdate,
+		middleware: [offset(5), flip(), shift()],
 	});
 
+	const click = useClick(floating.context);
+	const dismiss = useDismiss(floating.context);
+	const role = useRole(floating.context);
+	const interactions = useInteractions([click, dismiss, role]);
+
 	return (
-		<ListItem key={item.user?.id} ref={refs.setReference} {...getReferenceProps()}>
+		<>
+			<ListItem key={item.user?.id} ref={floating.refs.setReference} {...interactions.getReferenceProps()}>
 				<Container>
 					<Wrapper offline={presence?.status === PresenceUpdateStatus.Offline}>
 						<AvatarWrapper>
@@ -84,6 +105,26 @@ function MemberListItem({ item }: Props) {
 					</Wrapper>
 				</Container>
 			</ListItem>
+
+			{open && (
+				<FloatingPortal>
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.1, easing: [0.87, 0, 0.13, 1] }}
+					>
+						<div
+							ref={floating.refs.setFloating}
+							style={floating.floatingStyles}
+							{...interactions.getFloatingProps()}
+						>
+							<UserProfilePopout user={app.account! as unknown as User} member={item} />
+						</div>
+					</motion.div>
+				</FloatingPortal>
+			)}
+		</>
 	);
 }
 

src/components/UserPanel.tsx

@@ -1,11 +1,24 @@
+import {
+	FloatingPortal,
+	flip,
+	offset,
+	shift,
+	useClick,
+	useDismiss,
+	useFloating,
+	useInteractions,
+	useRole,
+} from "@floating-ui/react";
+import { motion } from "framer-motion";
+import { useState } from "react";
 import styled from "styled-components";
-import useFloating from "../hooks/useFloating";
 import { useAppStore } from "../stores/AppStore";
 import User from "../stores/objects/User";
 import Avatar from "./Avatar";
 import Icon from "./Icon";
 import IconButton from "./IconButton";
 import Tooltip from "./Tooltip";
+import UserProfilePopout from "./floating/UserProfilePopout";
 
 const Section = styled.section`
 	flex: 0 0 auto;
@@ -69,21 +82,28 @@ const ActionsWrapper = styled.div`
 
 function UserPanel() {
 	const app = useAppStore();
+	const [open, setOpen] = useState(false);
 
-	const { refs, getReferenceProps } = useFloating({
+	const floating = useFloating({
-		placement: "right-start",
+		placement: "bottom",
-		type: "userPopout",
+		open,
-		config: {
+		onOpenChange: setOpen,
-			user: app.account as unknown as User,
+		// whileElementsMounted: autoUpdate,
-		},
+		middleware: [offset(5), flip(), shift()],
 	});
 
+	const click = useClick(floating.context);
+	const dismiss = useDismiss(floating.context);
+	const role = useRole(floating.context);
+	const interactions = useInteractions([click, dismiss, role]);
+
 	const openSettingsModal = () => {};
 
 	return (
+		<>
 			<Section>
 				<Container>
-				<AvatarWrapper ref={refs.setReference} {...getReferenceProps()}>
+					<AvatarWrapper ref={floating.refs.setReference} {...interactions.getReferenceProps()}>
 						<Avatar popoutPlacement="top" onClick={null} />
 						<Name>
 							<Username>{app.account?.username}</Username>
@@ -100,6 +120,26 @@ function UserPanel() {
 					</ActionsWrapper>
 				</Container>
 			</Section>
+
+			{open && (
+				<FloatingPortal>
+					<motion.div
+						initial={{ opacity: 0 }}
+						animate={{ opacity: 1 }}
+						exit={{ opacity: 0 }}
+						transition={{ duration: 0.1, easing: [0.87, 0, 0.13, 1] }}
+					>
+						<div
+							ref={floating.refs.setFloating}
+							style={floating.floatingStyles}
+							{...interactions.getFloatingProps()}
+						>
+							<UserProfilePopout user={app.account! as unknown as User} />
+						</div>
+					</motion.div>
+				</FloatingPortal>
+			)}
+		</>
 	);
 }
 

src/controllers/modals/floating/FloatingRenderer.tsx

@@ -2,21 +2,8 @@ import { FloatingPortal } from "@floating-ui/react";
 import { observer } from "mobx-react-lite";
 import { floatingController } from "./FloatingController";
 
-export default observer(() => {
+function FloatingRender() {
-	// useEffect(() => {
-	// 	function keyDown(event: KeyboardEvent) {
-	// 		if (event.key === "Escape") {
-	// 			modalController.pop("close");
-	// 		} else if (event.key === "Enter") {
-	// 			if (event.target instanceof HTMLSelectElement) return;
-	// 			modalController.pop("confirm");
-	// 		}
-	// 	}
-
-	// 	document.addEventListener("keydown", keyDown);
-	// 	return () => document.removeEventListener("keydown", keyDown);
-	// }, []);
-	console.log(floatingController.elements);
-
 	return <FloatingPortal>{floatingController.rendered}</FloatingPortal>;
-});
+}
+
+export default observer(FloatingRender);