message context menu/delete modal

src/components/MemberList/MemberListItem.tsx

@@ -79,7 +79,7 @@ function MemberListItem({ item }: Props) {
 			<ListItem
 				key={item.user?.id}
 				ref={contextMenu.setReferenceElement}
-				onContextMenu={(e) => contextMenu.onContextMenu(e, { user: item.user!, member: item })}
+				onContextMenu={(e) => contextMenu.onContextMenu(e, { type: "user", user: item.user!, member: item })}
 			>
 				<Container>
 					<Wrapper offline={presence?.status === PresenceUpdateStatus.Offline}>

src/components/contextMenus/MessageContextMenu.tsx

@@ -0,0 +1,54 @@
+import { modalController } from "../../controllers/modals";
+import { useAppStore } from "../../stores/AppStore";
+import Message from "../../stores/objects/Message";
+import { ContextMenu, ContextMenuButton, ContextMenuDivider } from "./ContextMenu";
+
+interface MenuProps {
+	message: Message;
+}
+
+function MessageContextMenu({ message }: MenuProps) {
+	const app = useAppStore();
+
+	function copyRaw() {
+		navigator.clipboard.writeText(message.content);
+	}
+
+	async function deleteMessage(e: MouseEvent) {
+		if (e.shiftKey) {
+			await message.delete();
+		} else {
+			modalController.push({
+				type: "delete_message",
+				target: message as Message,
+			});
+		}
+	}
+
+	function copyId() {
+		navigator.clipboard.writeText(message.id);
+	}
+
+	return (
+		<ContextMenu>
+			<ContextMenuButton icon="mdiReply" disabled>
+				Reply
+			</ContextMenuButton>
+			<ContextMenuButton icon="mdiContentCopy" onClick={copyRaw}>
+				Copy Raw Text
+			</ContextMenuButton>
+			<ContextMenuDivider />
+			{message.channel.hasPermission("MANAGE_MESSAGES") && message instanceof Message && (
+				<ContextMenuButton icon="mdiDelete" destructive onClick={deleteMessage}>
+					Delete Message
+				</ContextMenuButton>
+			)}
+			<ContextMenuDivider />
+			<ContextMenuButton icon="mdiIdentifier" onClick={copyId}>
+				Copy ID
+			</ContextMenuButton>
+		</ContextMenu>
+	);
+}
+
+export default MessageContextMenu;

src/components/contextMenus/UserContextMenu.tsx

@@ -77,7 +77,7 @@ function UserContextMenu({ user, member }: MenuProps) {
 				}}
 				onClick={copyId}
 			>
-				Copy user ID
+				Copy ID
 			</ContextMenuButton>
 		</ContextMenu>
 	);

src/components/messaging/Message.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react-lite";
-import { memo } from "react";
+import { memo, useContext } from "react";
+import { ContextMenuContext } from "../../contexts/ContextMenuContext";
 import { useAppStore } from "../../stores/AppStore";
 import { MessageLike } from "../../stores/objects/Message";
 import { QueuedMessageStatus } from "../../stores/objects/QueuedMessage";
@@ -18,6 +19,7 @@ interface Props {
 
 function Message({ message, header }: Props) {
 	const app = useAppStore();
+	const contextMenuContext = useContext(ContextMenuContext);
 
 	const guild = message.guild_id ? app.guilds.get(message.guild_id) : undefined;
 	const isEveryoneMentioned = "mention_everyone" in message && message.mention_everyone;
@@ -43,20 +45,31 @@ function Message({ message, header }: Props) {
 						<MessageDetails message={message} position="top" />
 					</span>
 				)}
-				<MessageContentText
+				<div
-					sending={"status" in message && message.status === QueuedMessageStatus.SENDING}
+					onContextMenu={(e) =>
-					failed={"status" in message && message.status === QueuedMessageStatus.FAILED}
+						contextMenuContext.onContextMenu(e, {
+							type: "message",
+							message: message,
+						})
+					}
 				>
-					{message.content && <Markdown content={message.content} />}
+					<MessageContentText
-				</MessageContentText>
+						sending={"status" in message && message.status === QueuedMessageStatus.SENDING}
+						failed={"status" in message && message.status === QueuedMessageStatus.FAILED}
+					>
+						{message.content && <Markdown content={message.content} />}
+					</MessageContentText>
 
-				{"attachments" in message &&
+					{"attachments" in message &&
-					message.attachments.map((attachment, index) => (
+						message.attachments.map((attachment, index) => (
-						<MessageAttachment key={index} attachment={attachment} />
+							<MessageAttachment key={index} attachment={attachment} />
-					))}
+						))}
-				{"embeds" in message &&
+					{"embeds" in message &&
-					message.embeds?.map((embed, index) => <MessageEmbed key={index} embed={embed} />)}
+						message.embeds?.map((embed, index) => <MessageEmbed key={index} embed={embed} />)}
-				{"files" in message && message.files?.length !== 0 && <AttachmentUploadProgress message={message} />}
+					{"files" in message && message.files?.length !== 0 && (
+						<AttachmentUploadProgress message={message} />
+					)}
+				</div>
 			</MessageContent>
 		</MessageBase>
 	);

src/components/messaging/MessageAuthor.tsx

@@ -30,7 +30,7 @@ function MessageAuthor({ message }: Props) {
 	const onContextMenu = async (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
 		e.preventDefault();
 		const member = await app.guilds.get(message.guild_id!)?.members.fetch(message.author.id);
-		contextMenu.onContextMenu(e, { user: message.author, member });
+		contextMenu.onContextMenu(e, { type: "user", user: message.author, member });
 	};
 
 	React.useEffect(() => {

src/components/modals/DeleteMessageModal.tsx

@@ -0,0 +1,34 @@
+import { ModalProps, modalController } from "../../controllers/modals";
+import { Modal } from "./ModalComponents";
+
+export function DeleteMessageModal({ target, ...props }: ModalProps<"delete_message">) {
+	return (
+		<Modal
+			{...props}
+			title="Delete Message"
+			description="Are you sure you want to delete this message?"
+			actions={[
+				{
+					onClick: () => {
+						modalController.pop("close");
+					},
+					children: <span>Cancel</span>,
+					palette: "link",
+					size: "small",
+					confirmation: true,
+				},
+				{
+					onClick: async () => {
+						await target.delete();
+						modalController.pop("close");
+					},
+					children: <span>Delete</span>,
+					palette: "danger",
+					size: "small",
+				},
+			]}
+		>
+			<div>message preview</div>
+		</Modal>
+	);
+}

src/components/modals/index.ts

@@ -3,6 +3,7 @@ export * from "./AttachmentPreviewModal";
 export * from "./BanMemberModal";
 export * from "./CreateInviteModal";
 export * from "./CreateServerModal";
+export * from "./DeleteMessageModal";
 export * from "./ErrorModal";
 export * from "./ForgotPasswordModal";
 export * from "./JoinServerModal";

src/contexts/ContextMenuContext.tsx

@@ -1,21 +1,27 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { FloatingPortal, useFloating } from "@floating-ui/react";
 import React from "react";
-import UserContextMenu from "../components/contextMenus/UserContextMenu";
+import useContextMenu, { ContextMenuComponents } from "../hooks/useContextMenu";
-import useContextMenu from "../hooks/useContextMenu";
 import GuildMember from "../stores/objects/GuildMember";
+import { MessageLike } from "../stores/objects/Message";
 import User from "../stores/objects/User";
 
-interface MenuProps {
+export type ContextMenuProps =
-	user: User;
+	| {
-	member?: GuildMember;
+			type: "user";
-}
+			user: User;
+			member?: GuildMember;
+	  }
+	| {
+			type: "message";
+			message: MessageLike;
+	  };
 
 export type ContextMenuContextType = {
 	setReferenceElement: ReturnType<typeof useFloating>["refs"]["setReference"];
-	onContextMenu: (e: React.MouseEvent, props: MenuProps) => void;
+	onContextMenu: (e: React.MouseEvent, props: ContextMenuProps) => void;
 	close: () => void;
-	open: (user: User) => void;
+	open: (props: ContextMenuProps) => void;
 };
 
 // @ts-expect-error not specifying a default value here
@@ -23,14 +29,18 @@ export const ContextMenuContext = React.createContext<ContextMenuContextType>();
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export const ContextMenuContextProvider: React.FC<any> = ({ children }) => {
-	const contextMenu = useContextMenu("user");
+	const contextMenu = useContextMenu();
 
-	const open = (user: User) => {
+	const open = (props: ContextMenuProps) => {
-		contextMenu.open({
+		contextMenu.open(props);
-			user,
-		});
 	};
 
+	const Component = contextMenu.props
+		? ContextMenuComponents[contextMenu.props.type]
+		: () => {
+				return null;
+		  };
+
 	return (
 		<ContextMenuContext.Provider
 			value={{
@@ -49,7 +59,7 @@ export const ContextMenuContextProvider: React.FC<any> = ({ children }) => {
 						style={contextMenu.floatingStyles}
 						{...contextMenu.getFloatingProps()}
 					>
-						<UserContextMenu {...(contextMenu.props as any)} />
+						<Component {...contextMenu.props} />
 					</div>
 				)}
 			</FloatingPortal>

src/controllers/modals/ModalController.tsx

@@ -6,6 +6,7 @@ import {
 	BanMemberModal,
 	CreateInviteModal,
 	CreateServerModal,
+	DeleteMessageModal,
 	ErrorModal,
 	JoinServerModal,
 	KickMemberModal,
@@ -158,7 +159,7 @@ export const modalController = new ModalControllerExtended({
 	join_server: JoinServerModal,
 	// create_bot: CreateBot,
 	// custom_status: CustomStatus,
-	// delete_message: DeleteMessage,
+	delete_message: DeleteMessageModal,
 	error: ErrorModal,
 	// image_viewer: ImageViewer,
 	kick_member: KickMemberModal,

src/controllers/modals/types.ts

@@ -2,6 +2,7 @@
 
 import Channel from "../../stores/objects/Channel";
 import GuildMember from "../../stores/objects/GuildMember";
+import Message from "../../stores/objects/Message";
 
 export type Modal = {
 	key?: string;
@@ -32,6 +33,10 @@ export type Modal = {
 			type: "ban_member";
 			target: GuildMember;
 	  }
+	| {
+			type: "delete_message";
+			target: Message;
+	  }
 );
 
 export type ModalProps<T extends Modal["type"]> = Modal & { type: T } & {

src/hooks/useContextMenu.tsx

@@ -1,16 +1,20 @@
 import { autoUpdate, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
 import { useMemo, useState } from "react";
-import GuildMember from "../stores/objects/GuildMember";
+import MessageContextMenu from "../components/contextMenus/MessageContextMenu";
-import User from "../stores/objects/User";
+import UserContextMenu from "../components/contextMenus/UserContextMenu";
+import { ContextMenuProps } from "../contexts/ContextMenuContext";
 
-interface MenuProps {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
-	user: User;
+type Components = Record<string, React.FC<any>>;
-	member?: GuildMember;
-}
 
-export default function (type: "user") {
+export const ContextMenuComponents: Components = {
+	user: UserContextMenu,
+	message: MessageContextMenu,
+};
+
+export default function () {
 	const [isOpen, setIsOpen] = useState(false);
-	const [props, setProps] = useState<MenuProps | null>(null);
+	const [props, setProps] = useState<ContextMenuProps | null>(null);
 
 	const data = useFloating({
 		placement: "right-start",
@@ -47,7 +51,7 @@ export default function (type: "user") {
 
 	const interactions = useInteractions([dismiss, role]);
 
-	const open = (props: MenuProps) => {
+	const open = (props: ContextMenuProps) => {
 		setProps(props);
 		setIsOpen(true);
 	};
@@ -56,7 +60,7 @@ export default function (type: "user") {
 		setIsOpen(false);
 	};
 
-	function onContextMenu(e: React.MouseEvent, props: MenuProps) {
+	function onContextMenu(e: React.MouseEvent, props: ContextMenuProps) {
 		e.preventDefault();
 
 		data.refs.setPositionReference({

src/stores/ChannelStore.ts

@@ -53,4 +53,8 @@ export default class ChannelStore {
 	sortPosition(channels: Channel[]) {
 		return channels.sort((a, b) => (a.position ?? 0) - (b.position ?? 0));
 	}
+
+	has(id: string) {
+		return this.channels.has(id);
+	}
 }

src/stores/objects/Message.ts

@@ -21,6 +21,7 @@ import {
 } from "@spacebarchat/spacebar-api-types/v9";
 import { action, makeObservable, observable } from "mobx";
 import AppStore from "../AppStore";
+import Channel from "./Channel";
 import MessageBase from "./MessageBase";
 import QueuedMessage, { QueuedMessageData } from "./QueuedMessage";
 
@@ -31,7 +32,8 @@ export default class Message extends MessageBase {
 	/**
 	 * ID of the channel the message was sent in
 	 */
-	channel_id: Snowflake;
+	// channel_id: Snowflake;
+	channel: Channel;
 	/**
 	 * When this message was edited (or null if never)
 	 */
@@ -205,7 +207,8 @@ export default class Message extends MessageBase {
 		super(app, data);
 
 		this.id = data.id;
-		this.channel_id = data.channel_id;
+		// this.channel_id = data.channel_id;
+		this.channel = this.app.channels.get(data.channel_id)!;
 		// this.member = message.member ? new GuildMember(message.member) : undefined;
 		this.content = data.content;
 		this.timestamp = new Date(data.timestamp);
@@ -250,6 +253,6 @@ export default class Message extends MessageBase {
 	}
 
 	async delete() {
-		await this.app.rest.delete(Routes.channelMessage(this.channel_id, this.id));
+		await this.app.rest.delete(Routes.channelMessage(this.channel.id, this.id));
 	}
 }