diff --git a/src/components/ChannelList/ChannelListItem.tsx b/src/components/ChannelList/ChannelListItem.tsx index 78fee98..f17e2ab 100644 --- a/src/components/ChannelList/ChannelListItem.tsx +++ b/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 })} > + {channel.hasPermission("MANAGE_CHANNELS") && ( + <> + Edit Channel + + Delete Channel + + + + )} + + + Copy Channel ID + + + ); +} + +export default ChannelContextMenu; diff --git a/src/components/contextMenus/UserContextMenu.tsx b/src/components/contextMenus/UserContextMenu.tsx index a954063..6c8eea4 100644 --- a/src/components/contextMenus/UserContextMenu.tsx +++ b/src/components/contextMenus/UserContextMenu.tsx @@ -77,7 +77,7 @@ function UserContextMenu({ user, member }: MenuProps) { }} onClick={copyId} > - Copy ID + Copy User ID ); diff --git a/src/contexts/ContextMenuContext.tsx b/src/contexts/ContextMenuContext.tsx index a65c6eb..8145a55 100644 --- a/src/contexts/ContextMenuContext.tsx +++ b/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 = { diff --git a/src/hooks/useContextMenu.tsx b/src/hooks/useContextMenu.tsx index 8d769a2..07357a0 100644 --- a/src/hooks/useContextMenu.tsx +++ b/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>; export const ContextMenuComponents: Components = { user: UserContextMenu, message: MessageContextMenu, + channel: ChannelContextMenu, }; export default function () {