From 5a61543ad818d2cb426562b59eeba802410a8bf9 Mon Sep 17 00:00:00 2001
From: Puyodead1 <puyodead@proton.me>
Date: Sat, 2 Dec 2023 23:15:26 -0500
Subject: [PATCH] message author username click opens popout

---
 src/components/Avatar.tsx                  |  1 -
 src/components/messaging/MessageAuthor.tsx | 22 ++++++++++++++++++++++
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/components/Avatar.tsx b/src/components/Avatar.tsx
index 05ccd9c..496c1ce 100644
--- a/src/components/Avatar.tsx
+++ b/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;
 
diff --git a/src/components/messaging/MessageAuthor.tsx b/src/components/messaging/MessageAuthor.tsx
index 5955385..f64473f 100644
--- a/src/components/messaging/MessageAuthor.tsx
+++ b/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>