channel context menu

src/components/ChannelList/ChannelListItem.tsx

@@ -1,6 +1,7 @@
-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 Channel from "../../stores/objects/Channel";
 import Icon from "../Icon";
 import Floating from "../floating/Floating";
@@ -42,6 +43,7 @@ interface Props {
 
 function ChannelListItem({ channel, isCategory, active }: Props) {
 	const navigate = useNavigate();
+	const contextMenu = useContext(ContextMenuContext);
 
 	const [hovered, setHovered] = React.useState(false);
 
@@ -55,6 +57,8 @@ function ChannelListItem({ channel, isCategory, active }: Props) {
 
 				navigate(`/channels/${channel.guildId}/${channel.id}`);
 			}}
+			ref={contextMenu.setReferenceElement}
+			onContextMenu={(e) => contextMenu.onContextMenu(e, { type: "channel", channel })}
 		>
 			<Wrapper
 				isCategory={isCategory}

src/components/contextMenus/ChannelContextMenu.tsx

@@ -0,0 +1,47 @@
+// loosely based on https://github.com/revoltchat/frontend/blob/master/components/app/menus/UserContextMenu.tsx
+
+import Channel from "../../stores/objects/Channel";
+import { ContextMenu, ContextMenuButton, ContextMenuDivider } from "./ContextMenu";
+
+interface MenuProps {
+	channel: Channel;
+}
+
+function ChannelContextMenu({ channel }: MenuProps) {
+	/**
+	 * Copy id to clipboard
+	 */
+	function copyId() {
+		navigator.clipboard.writeText(channel.id);
+	}
+
+	return (
+		<ContextMenu>
+			{channel.hasPermission("MANAGE_CHANNELS") && (
+				<>
+					<ContextMenuButton disabled>Edit Channel</ContextMenuButton>
+					<ContextMenuButton disabled destructive>
+						Delete Channel
+					</ContextMenuButton>
+					<ContextMenuDivider />
+				</>
+			)}
+
+			<ContextMenuButton
+				icon="mdiIdentifier"
+				iconProps={{
+					style: {
+						filter: "invert(100%)",
+						background: "black",
+						borderRadius: "4px",
+					},
+				}}
+				onClick={copyId}
+			>
+				Copy Channel ID
+			</ContextMenuButton>
+		</ContextMenu>
+	);
+}
+
+export default ChannelContextMenu;

src/components/contextMenus/UserContextMenu.tsx

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

src/contexts/ContextMenuContext.tsx

@@ -2,6 +2,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 GuildMember from "../stores/objects/GuildMember";
 import { MessageLike } from "../stores/objects/Message";
 import User from "../stores/objects/User";
@@ -15,6 +16,10 @@ export type ContextMenuProps =
 	| {
 			type: "message";
 			message: MessageLike;
+	  }
+	| {
+			type: "channel";
+			channel: Channel;
 	  };
 
 export type ContextMenuContextType = {

src/hooks/useContextMenu.tsx

@@ -1,5 +1,6 @@
 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 MessageContextMenu from "../components/contextMenus/MessageContextMenu";
 import UserContextMenu from "../components/contextMenus/UserContextMenu";
 import { ContextMenuProps } from "../contexts/ContextMenuContext";
@@ -10,6 +11,7 @@ type Components = Record<string, React.FC<any>>;
 export const ContextMenuComponents: Components = {
 	user: UserContextMenu,
 	message: MessageContextMenu,
+	channel: ChannelContextMenu,
 };
 
 export default function () {