context menu tweaks

src/components/Avatar.tsx

@@ -1,7 +1,10 @@
 import { observer } from "mobx-react-lite";
+import React from "react";
 import styled from "styled-components";
+import { ContextMenuContext } from "../contexts/ContextMenuContext";
 import { useAppStore } from "../stores/AppStore";
 import User from "../stores/objects/User";
+import ContextMenus from "../utils/ContextMenus";
 import Container from "./Container";
 
 const Wrapper = styled(Container)<{ size: number }>`
@@ -24,15 +27,17 @@ interface Props {
 
 function Avatar(props: Props) {
 	const app = useAppStore();
+	const contextMenu = React.useContext(ContextMenuContext);
+	const user = props.user ?? app.account;
+	if (!user) return null;
 
 	return (
-		<Wrapper size={props.size ?? 32} style={props.style}>
-			<img
-				src={props.user?.avatarUrl ?? app.account?.avatarUrl}
-				width={props.size ?? 32}
-				height={props.size ?? 32}
-				loading="eager"
-			/>
+		<Wrapper
+			size={props.size ?? 32}
+			style={props.style}
+			onContextMenu={(e) => contextMenu.open2(e, [ContextMenus.User(user)])}
+		>
+			<img src={user.avatarUrl} width={props.size ?? 32} height={props.size ?? 32} loading="eager" />
 		</Wrapper>
 	);
 }

src/components/ChannelList/ChannelListItem.tsx

@@ -79,16 +79,7 @@ function ChannelListItem({ channel, isCategory, active }: Props) {
 
 				navigate(`/channels/${channel.guildId}/${channel.id}`);
 			}}
-			onContextMenu={(e) => {
-				e.preventDefault();
-				contextMenu.open({
-					position: {
-						x: e.pageX,
-						y: e.pageY,
-					},
-					items: contextMenuItems,
-				});
-			}}
+			onContextMenu={(e) => contextMenu.open2(e, contextMenuItems)}
 		>
 			<Wrapper isCategory={isCategory} active={active}>
 				{channel.channelIcon && (

src/components/GuildItem.tsx

@@ -95,18 +95,7 @@ function GuildItem({ guild, active }: Props) {
 	};
 
 	return (
-		<GuildSidebarListItem
-			onContextMenu={(e) => {
-				e.preventDefault();
-				contextMenu.open({
-					position: {
-						x: e.pageX,
-						y: e.pageY,
-					},
-					items: contextMenuItems,
-				});
-			}}
-		>
+		<GuildSidebarListItem onContextMenu={(e) => contextMenu.open2(e, contextMenuItems)}>
 			<SidebarPill type={pillType} />
 			<Tooltip title={guild.name} placement="right">
 				<Wrapper

src/components/messaging/Message.tsx

@@ -3,6 +3,7 @@ import React, { memo } from "react";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
 import { MessageLike } from "../../stores/objects/Message";
 import { QueuedMessageStatus } from "../../stores/objects/QueuedMessage";
+import ContextMenus from "../../utils/ContextMenus";
 import Avatar from "../Avatar";
 import { IContextMenuItem } from "../ContextMenuItem";
 import Markdown from "../markdown/MarkdownRenderer";
@@ -19,33 +20,10 @@ interface Props {
 
 function Message({ message, header }: Props) {
 	const contextMenu = React.useContext(ContextMenuContext);
-	const [contextMenuItems, setContextMenuItems] = React.useState<IContextMenuItem[]>([
-		{
-			label: "Copy Message ID",
-			onClick: () => {
-				navigator.clipboard.writeText(message.id);
-			},
-			iconProps: {
-				icon: "mdiIdentifier",
-			},
-		},
-	]);
+	const [contextMenuItems, setContextMenuItems] = React.useState<IContextMenuItem[]>([ContextMenus.Message(message)]);
 
 	return (
-		<MessageBase
-			header={header}
-			onContextMenu={(e) => {
-				e.preventDefault();
-				e.stopPropagation();
-				contextMenu.open({
-					position: {
-						x: e.pageX,
-						y: e.pageY,
-					},
-					items: contextMenuItems,
-				});
-			}}
-		>
+		<MessageBase header={header} onContextMenu={(e) => contextMenu.open2(e, contextMenuItems)}>
 			<MessageInfo>
 				{header ? (
 					<Avatar key={message.author.id} user={message.author} size={40} />

src/components/messaging/MessageAttachment.tsx

@@ -4,6 +4,7 @@ import React from "react";
 import styled from "styled-components";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
 import useLogger from "../../hooks/useLogger";
+import ContextMenus from "../../utils/ContextMenus";
 import { calculateImageRatio, calculateScaledDimensions } from "../../utils/Message";
 import { getFileDetails } from "../../utils/Utils";
 import { IContextMenuItem } from "../ContextMenuItem";
@@ -62,29 +63,9 @@ export default function MessageAttachment({ attachment, contextMenuItems, maxWid
 		<Attachment
 			withPointer={attachment.content_type?.startsWith("image")}
 			key={attachment.id}
-			onContextMenu={(e) => {
-				// prevent propagation to the message container
-				e.stopPropagation();
-				e.preventDefault();
-				contextMenu.open({
-					position: {
-						x: e.pageX,
-						y: e.pageY,
-					},
-					items: [
-						...(contextMenuItems ?? []),
-						{
-							label: "Copy Attachment URL",
-							onClick: () => {
-								navigator.clipboard.writeText(attachment.url);
-							},
-							iconProps: {
-								icon: "mdiLink",
-							},
-						} as IContextMenuItem,
-					],
-				});
-			}}
+			onContextMenu={(e) =>
+				contextMenu.open2(e, [...(contextMenuItems ?? []), ContextMenus.MessageAttachment(attachment)])
+			}
 			onClick={() => {
 				if (!attachment.content_type?.startsWith("image")) return;
 				openModal(AttachmentPreviewModal, { attachment });

src/components/messaging/MessageAuthor.tsx

@@ -1,8 +1,10 @@
 import { observer } from "mobx-react-lite";
 import React from "react";
 import styled from "styled-components";
+import { ContextMenuContext } from "../../contexts/ContextMenuContext";
 import { useAppStore } from "../../stores/AppStore";
 import { MessageLike } from "../../stores/objects/Message";
+import ContextMenus from "../../utils/ContextMenus";
 
 const Container = styled.div`
 	font-size: 16px;
@@ -21,6 +23,7 @@ interface Props {
 
 function MessageAuthor({ message }: Props) {
 	const app = useAppStore();
+	const contextMenu = React.useContext(ContextMenuContext);
 	const [color, setColor] = React.useState<string | undefined>(undefined);
 
 	React.useEffect(() => {
@@ -43,6 +46,7 @@ function MessageAuthor({ message }: Props) {
 			style={{
 				color,
 			}}
+			onContextMenu={(e) => contextMenu.open2(e, [ContextMenus.User(message.author)])}
 		>
 			{message.author.username}
 		</Container>

src/contexts/ContextMenuContext.tsx

@@ -20,8 +20,17 @@ const useValue = () => {
 		setVisible(true);
 	};
 
+	const open2 = (e: React.MouseEvent<HTMLDivElement, MouseEvent>, items: IContextMenuItem[]) => {
+		e.preventDefault();
+		e.stopPropagation();
+		setPosition({ x: e.pageX, y: e.pageY });
+		setItems(items);
+		setVisible(true);
+	};
+
 	return {
 		open,
+		open2,
 		close: () => setVisible(false),
 		visible,
 		position,

src/utils/ContextMenus.ts

@@ -0,0 +1,41 @@
+import { APIAttachment } from "@spacebarchat/spacebar-api-types/v9";
+import { IContextMenuItem } from "../components/ContextMenuItem";
+import AccountStore from "../stores/AccountStore";
+import { MessageLike } from "../stores/objects/Message";
+import User from "../stores/objects/User";
+
+export default {
+	User: (user: User | AccountStore): IContextMenuItem => {
+		return {
+			label: "Copy User ID",
+			onClick: () => {
+				navigator.clipboard.writeText(user.id);
+			},
+			iconProps: {
+				icon: "mdiIdentifier",
+			},
+		};
+	},
+	Message: (message: MessageLike): IContextMenuItem => {
+		return {
+			label: "Copy Message ID",
+			onClick: () => {
+				navigator.clipboard.writeText(message.id);
+			},
+			iconProps: {
+				icon: "mdiIdentifier",
+			},
+		};
+	},
+	MessageAttachment: (attachment: APIAttachment): IContextMenuItem => {
+		return {
+			label: "Copy Attachment URL",
+			onClick: () => {
+				navigator.clipboard.writeText(attachment.url);
+			},
+			iconProps: {
+				icon: "mdiLink",
+			},
+		};
+	},
+};