message author username click opens popout

src/components/Avatar.tsx

@@ -40,7 +40,6 @@ function Avatar(props: Props) {
 	const openPopout = () => {
 		if (!ref.current) return;
 
-		// get top left corner of avatar
 		const rect = ref.current.getBoundingClientRect();
 		if (!rect) return;
 

src/components/messaging/MessageAuthor.tsx

@@ -2,9 +2,11 @@ import { observer } from "mobx-react-lite";
 import React from "react";
 import styled from "styled-components";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
+import { PopoutContext } from "../../contexts/PopoutContext";
 import { useAppStore } from "../../stores/AppStore";
 import { MessageLike } from "../../stores/objects/Message";
 import ContextMenus from "../../utils/ContextMenus";
+import UserProfilePopout from "../UserProfilePopout";
 
 const Container = styled.div`
 	font-size: 16px;
@@ -24,7 +26,9 @@ interface Props {
 function MessageAuthor({ message }: Props) {
 	const app = useAppStore();
 	const contextMenu = React.useContext(ContextMenuContext);
+	const popoutContext = React.useContext(PopoutContext);
 	const [color, setColor] = React.useState<string | undefined>(undefined);
+	const ref = React.useRef<HTMLDivElement>(null);
 
 	React.useEffect(() => {
 		if ("guild_id" in message && message.guild_id) {
@@ -41,12 +45,30 @@ function MessageAuthor({ message }: Props) {
 		}
 	}, [message]);
 
+	const openPopout = (e: React.MouseEvent) => {
+		e.preventDefault();
+		e.stopPropagation();
+
+		if (!ref.current) return;
+
+		const rect = ref.current.getBoundingClientRect();
+		if (!rect) return;
+
+		popoutContext.open({
+			element: <UserProfilePopout user={message.author} />,
+			position: rect,
+			placement: "right",
+		});
+	};
+
 	return (
 		<Container
+			ref={ref}
 			style={{
 				color,
 			}}
 			onContextMenu={(e) => contextMenu.open2(e, [...ContextMenus.User(message.author)])}
+			onClick={openPopout}
 		>
 			{message.author.username}
 		</Container>