guild context menu

src/components/GuildItem.tsx

@@ -1,8 +1,9 @@
 import { CDNRoutes, ChannelType, ImageFormat } from "@spacebarchat/spacebar-api-types/v9";
 import { observer } from "mobx-react-lite";
-import React from "react";
+import React, { useContext } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
+import { ContextMenuContext } from "../contexts/ContextMenuContext";
 import useLogger from "../hooks/useLogger";
 import { useAppStore } from "../stores/AppStore";
 import Guild from "../stores/objects/Guild";
@@ -49,6 +50,7 @@ function GuildItem({ guild, active }: Props) {
 	const logger = useLogger("GuildItem");
 	const app = useAppStore();
 	const navigate = useNavigate();
+	const contextMenu = useContext(ContextMenuContext);
 
 	const [pillType, setPillType] = React.useState<PillType>("none");
 	const [isHovered, setHovered] = React.useState(false);
@@ -69,7 +71,10 @@ function GuildItem({ guild, active }: Props) {
 	};
 
 	return (
-		<GuildSidebarListItem>
+		<GuildSidebarListItem
+			ref={contextMenu.setReferenceElement}
+			onContextMenu={(e) => contextMenu.onContextMenu(e, { type: "guild", guild })}
+		>
 			<SidebarPill type={pillType} />
 			<Floating
 				placement="right"

src/components/contextMenus/GuildContextMenu.tsx

@@ -0,0 +1,59 @@
+// loosely based on https://github.com/revoltchat/frontend/blob/master/components/app/menus/UserContextMenu.tsx
+
+import { modalController } from "../../controllers/modals";
+import { useAppStore } from "../../stores/AppStore";
+import Guild from "../../stores/objects/Guild";
+import { ContextMenu, ContextMenuButton, ContextMenuDivider } from "./ContextMenu";
+
+interface MenuProps {
+	guild: Guild;
+}
+
+function GuildContextMenu({ guild }: MenuProps) {
+	const app = useAppStore();
+	const isNotOwner = guild.ownerId !== app.account!.id;
+	/**
+	 * Copy id to clipboard
+	 */
+	function copyId() {
+		navigator.clipboard.writeText(guild.id);
+	}
+
+	/**
+	 * Leave guild
+	 */
+	function leaveGuild() {
+		modalController.push({
+			type: "leave_server",
+			target: guild,
+		});
+	}
+
+	return (
+		<ContextMenu>
+			{isNotOwner && (
+				<>
+					<ContextMenuButton destructive onClick={leaveGuild}>
+						Leave Guild
+					</ContextMenuButton>
+					<ContextMenuDivider />
+				</>
+			)}
+			<ContextMenuButton
+				icon="mdiIdentifier"
+				iconProps={{
+					style: {
+						filter: "invert(100%)",
+						background: "black",
+						borderRadius: "4px",
+					},
+				}}
+				onClick={copyId}
+			>
+				Copy Guild ID
+			</ContextMenuButton>
+		</ContextMenu>
+	);
+}
+
+export default GuildContextMenu;

src/contexts/ContextMenuContext.tsx

@@ -3,6 +3,7 @@ import { FloatingPortal, useFloating } from "@floating-ui/react";
 import React from "react";
 import useContextMenu, { ContextMenuComponents } from "../hooks/useContextMenu";
 import Channel from "../stores/objects/Channel";
+import Guild from "../stores/objects/Guild";
 import GuildMember from "../stores/objects/GuildMember";
 import { MessageLike } from "../stores/objects/Message";
 import User from "../stores/objects/User";
@@ -20,6 +21,10 @@ export type ContextMenuProps =
 	| {
 			type: "channel";
 			channel: Channel;
+	  }
+	| {
+			type: "guild";
+			guild: Guild;
 	  };
 
 export type ContextMenuContextType = {

src/hooks/useContextMenu.tsx

@@ -1,6 +1,7 @@
 import { autoUpdate, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
 import { useMemo, useState } from "react";
 import ChannelContextMenu from "../components/contextMenus/ChannelContextMenu";
+import GuildContextMenu from "../components/contextMenus/GuildContextMenu";
 import MessageContextMenu from "../components/contextMenus/MessageContextMenu";
 import UserContextMenu from "../components/contextMenus/UserContextMenu";
 import { ContextMenuProps } from "../contexts/ContextMenuContext";
@@ -12,6 +13,7 @@ export const ContextMenuComponents: Components = {
 	user: UserContextMenu,
 	message: MessageContextMenu,
 	channel: ChannelContextMenu,
+	guild: GuildContextMenu,
 };
 
 export default function () {