implement message deletion

.vscode/settings.json

@@ -0,0 +1,2 @@
+{
+}

src/components/Avatar.tsx

@@ -35,7 +35,7 @@ function Avatar(props: Props) {
 		<Wrapper
 			size={props.size ?? 32}
 			style={props.style}
-			onContextMenu={(e) => contextMenu.open2(e, [ContextMenus.User(user)])}
+			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/messaging/Message.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react-lite";
 import React, { memo } from "react";
 import { ContextMenuContext } from "../../contexts/ContextMenuContext";
+import { useAppStore } from "../../stores/AppStore";
 import { MessageLike } from "../../stores/objects/Message";
 import { QueuedMessageStatus } from "../../stores/objects/QueuedMessage";
 import ContextMenus from "../../utils/ContextMenus";
@@ -19,8 +20,11 @@ interface Props {
 }
 
 function Message({ message, header }: Props) {
+	const app = useAppStore();
 	const contextMenu = React.useContext(ContextMenuContext);
-	const [contextMenuItems, setContextMenuItems] = React.useState<IContextMenuItem[]>([ContextMenus.Message(message)]);
+	const [contextMenuItems, setContextMenuItems] = React.useState<IContextMenuItem[]>([
+		...ContextMenus.Message(app, message, app.account),
+	]);
 
 	return (
 		<MessageBase header={header} onContextMenu={(e) => contextMenu.open2(e, contextMenuItems)}>

src/components/messaging/MessageAttachment.tsx

@@ -64,7 +64,7 @@ export default function MessageAttachment({ attachment, contextMenuItems, maxWid
 			withPointer={attachment.content_type?.startsWith("image")}
 			key={attachment.id}
 			onContextMenu={(e) =>
-				contextMenu.open2(e, [...(contextMenuItems ?? []), ContextMenus.MessageAttachment(attachment)])
+				contextMenu.open2(e, [...(contextMenuItems ?? []), ...ContextMenus.MessageAttachment(attachment)])
 			}
 			onClick={() => {
 				if (!attachment.content_type?.startsWith("image")) return;

src/components/messaging/MessageAuthor.tsx

@@ -46,7 +46,7 @@ function MessageAuthor({ message }: Props) {
 			style={{
 				color,
 			}}
-			onContextMenu={(e) => contextMenu.open2(e, [ContextMenus.User(message.author)])}
+			onContextMenu={(e) => contextMenu.open2(e, [...ContextMenus.User(message.author)])}
 		>
 			{message.author.username}
 		</Container>

src/stores/GuildMemberStore.ts

@@ -1,6 +1,6 @@
 import type { Snowflake } from "@spacebarchat/spacebar-api-types/globals";
 import type { APIGuildMember } from "@spacebarchat/spacebar-api-types/v9";
-import { action, makeObservable, observable, ObservableMap } from "mobx";
+import { action, computed, makeObservable, observable, ObservableMap } from "mobx";
 import AppStore from "./AppStore";
 import Guild from "./objects/Guild";
 import GuildMember from "./objects/GuildMember";
@@ -64,4 +64,11 @@ export default class GuildMemberStore {
 	get size() {
 		return this.members.size;
 	}
+
+	@computed
+	get me() {
+		const meId = this.app.account?.id;
+		if (!meId) return null;
+		return this.members.get(meId);
+	}
 }

src/stores/objects/Message.ts

@@ -1,22 +1,23 @@
-import type {
-	APIActionRowComponent,
-	APIApplication,
-	APIAttachment,
-	APIChannel,
-	APIChannelMention,
-	APIEmbed,
-	APIMessage,
-	APIMessageActionRowComponent,
-	APIMessageActivity,
-	APIMessageInteraction,
-	APIMessageReference,
-	APIReaction,
-	APIRole,
-	APISticker,
-	APIStickerItem,
-	APIUser,
-	MessageFlags,
-	Snowflake,
+import {
+	Routes,
+	type APIActionRowComponent,
+	type APIApplication,
+	type APIAttachment,
+	type APIChannel,
+	type APIChannelMention,
+	type APIEmbed,
+	type APIMessage,
+	type APIMessageActionRowComponent,
+	type APIMessageActivity,
+	type APIMessageInteraction,
+	type APIMessageReference,
+	type APIReaction,
+	type APIRole,
+	type APISticker,
+	type APIStickerItem,
+	type APIUser,
+	type MessageFlags,
+	type Snowflake,
 } from "@spacebarchat/spacebar-api-types/v9";
 import { action, makeObservable, observable } from "mobx";
 import AppStore from "../AppStore";
@@ -247,4 +248,8 @@ export default class Message extends MessageBase {
 		this.timestamp = new Date(message.timestamp);
 		this.edited_timestamp = message.edited_timestamp ? new Date(message.edited_timestamp) : null;
 	}
+
+	async delete() {
+		await this.app.rest.delete(Routes.channelMessage(this.channel_id, this.id));
+	}
 }

src/stores/objects/MessageBase.ts

@@ -27,7 +27,7 @@ export default class MessageBase {
 	type: MessageType;
 	author: User;
 
-	constructor(private readonly app: AppStore, data: MessageLikeData) {
+	constructor(public readonly app: AppStore, data: MessageLikeData) {
 		this.id = data.id;
 		this.content = data.content;
 		this.timestamp = new Date(data.timestamp);

src/stores/objects/QueuedMessage.ts

@@ -60,4 +60,8 @@ export default class QueuedMessage extends MessageBase {
 		this.error = error;
 		this.status = QueuedMessageStatus.FAILED;
 	}
+
+	delete() {
+		//
+	}
 }

src/utils/ContextMenus.ts

@@ -1,12 +1,15 @@
 import { APIAttachment } from "@spacebarchat/spacebar-api-types/v9";
 import { IContextMenuItem } from "../components/ContextMenuItem";
 import AccountStore from "../stores/AccountStore";
+import AppStore from "../stores/AppStore";
 import { MessageLike } from "../stores/objects/Message";
 import User from "../stores/objects/User";
+import { Permissions } from "./Permissions";
 
 export default {
-	User: (user: User | AccountStore): IContextMenuItem => {
-		return {
+	User: (user: User | AccountStore): IContextMenuItem[] => {
+		return [
+			{
 				label: "Copy User ID",
 				onClick: () => {
 					navigator.clipboard.writeText(user.id);
@@ -14,10 +17,16 @@ export default {
 				iconProps: {
 					icon: "mdiIdentifier",
 				},
-		};
 			},
-	Message: (message: MessageLike): IContextMenuItem => {
-		return {
+		];
+	},
+	Message: (app: AppStore, message: MessageLike, account: AccountStore | null): IContextMenuItem[] => {
+		const channel = app.channels.get(message.channel_id);
+		const permissions = Permissions.getPermission(account?.id, channel?.guild, channel);
+		const canDeleteMessage = permissions.has("MANAGE_MESSAGES") || message.author.id === account?.id;
+
+		const items: IContextMenuItem[] = [
+			{
 				label: "Copy Message ID",
 				onClick: () => {
 					navigator.clipboard.writeText(message.id);
@@ -25,10 +34,32 @@ export default {
 				iconProps: {
 					icon: "mdiIdentifier",
 				},
-		};
 			},
-	MessageAttachment: (attachment: APIAttachment): IContextMenuItem => {
-		return {
+		];
+
+		if (canDeleteMessage) {
+			items.push({
+				label: "Delete Message",
+				onClick: () => {
+					message.delete();
+				},
+				iconProps: {
+					icon: "mdiTrashCanOutline",
+					color: "red",
+				},
+				color: "red",
+				hover: {
+					backgroundColor: "red",
+					color: "white",
+				},
+			});
+		}
+
+		return items;
+	},
+	MessageAttachment: (attachment: APIAttachment): IContextMenuItem[] => {
+		return [
+			{
 				label: "Copy Attachment URL",
 				onClick: () => {
 					navigator.clipboard.writeText(attachment.url);
@@ -36,6 +67,7 @@ export default {
 				iconProps: {
 					icon: "mdiLink",
 				},
-		};
+			},
+		];
 	},
 };

src/utils/REST.ts

@@ -1,7 +1,3 @@
-// import {Globals} from '../constants/Globals';
-// import useLogger from '../hooks/useLogger';
-// import {DomainStore} from '../stores/DomainStore';
-
 import AppStore from "../stores/AppStore";
 import QueuedMessage from "../stores/objects/QueuedMessage";
 import { Globals } from "./Globals";
@@ -190,7 +186,7 @@ export default class REST {
 	): Promise<void> {
 		return new Promise((resolve, reject) => {
 			const url = REST.makeAPIUrl(path, queryParams);
-			// this.logger.debug(`DELETE ${url}`);
+			this.logger.debug(`DELETE ${url}`);
 			return (
 				fetch(url, {
 					method: "DELETE",