channel and use mention context menus

src/components/contextMenus/ChannelContextMenu.tsx

@@ -16,6 +16,13 @@ function ChannelContextMenu({ channel }: MenuProps) {
 		navigator.clipboard.writeText(channel.id);
 	}
 
+	/**
+	 * Copy link to clipboard
+	 */
+	function copyLink() {
+		navigator.clipboard.writeText(`${window.location.origin}/channels/${channel.guildId}/${channel.id}`);
+	}
+
 	/**
 	 * Open invite creation modal
 	 */
@@ -28,7 +35,12 @@ function ChannelContextMenu({ channel }: MenuProps) {
 
 	return (
 		<ContextMenu>
-			<ContextMenuButton onClick={openInviteCreateModal}>Create Invite</ContextMenuButton>
+			<ContextMenuButton icon="mdiAccountPlus" onClick={openInviteCreateModal}>
+				Create Invite
+			</ContextMenuButton>
+			<ContextMenuButton icon="mdiLink" onClick={copyLink}>
+				Copy Link
+			</ContextMenuButton>
 			<ContextMenuDivider />
 			{channel.hasPermission("MANAGE_CHANNELS") && (
 				<>

src/components/contextMenus/ChannelMentionContextMenu.tsx

@@ -0,0 +1,48 @@
+// 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 ChannelMentionContextMenu({ channel }: MenuProps) {
+	/**
+	 * Copy id to clipboard
+	 */
+	function copyId() {
+		navigator.clipboard.writeText(channel.id);
+	}
+
+	/**
+	 * Copy link to clipboard
+	 */
+	function copyLink() {
+		navigator.clipboard.writeText(`${window.location.origin}/channels/${channel.guildId}/${channel.id}`);
+	}
+
+	return (
+		<ContextMenu>
+			<ContextMenuButton icon="mdiLink" onClick={copyLink}>
+				Copy Link
+			</ContextMenuButton>
+			<ContextMenuDivider />
+			<ContextMenuButton
+				icon="mdiIdentifier"
+				iconProps={{
+					style: {
+						filter: "invert(100%)",
+						background: "black",
+						borderRadius: "4px",
+					},
+				}}
+				onClick={copyId}
+			>
+				Copy Channel ID
+			</ContextMenuButton>
+		</ContextMenu>
+	);
+}
+
+export default ChannelMentionContextMenu;

src/components/markdown/Mention.tsx

@@ -1,6 +1,7 @@
 import React, { memo } from "react";
 import { useNavigate } from "react-router-dom";
 import styled from "styled-components";
+import { ContextMenuContext } from "../../contexts/ContextMenuContext";
 import { useAppStore } from "../../stores/AppStore";
 import Channel from "../../stores/objects/Channel";
 import Role from "../../stores/objects/Role";
@@ -30,6 +31,7 @@ interface MentionProps {
 function UserMention({ id }: MentionProps) {
 	const app = useAppStore();
 	const [user, setUser] = React.useState<User | null>(null);
+	const contextMenu = React.useContext(ContextMenuContext);
 
 	React.useEffect(() => {
 		const getUser = async () => {
@@ -41,8 +43,6 @@ function UserMention({ id }: MentionProps) {
 		getUser();
 	}, [id]);
 
-	console.log(user);
-
 	if (!user) return <MentionText>@{id}</MentionText>;
 
 	return (
@@ -54,7 +54,9 @@ function UserMention({ id }: MentionProps) {
 			}}
 		>
 			<FloatingTrigger>
-				<MentionText withHover>@{user.username}</MentionText>
+				<MentionText withHover onContextMenu={(e) => contextMenu.onContextMenu(e, { type: "user", user })}>
+					@{user.username}
+				</MentionText>
 			</FloatingTrigger>
 		</Floating>
 	);
@@ -64,6 +66,7 @@ function ChannelMention({ id }: MentionProps) {
 	const app = useAppStore();
 	const [channel, setChannel] = React.useState<Channel | null>(null);
 	const navigate = useNavigate();
+	const contextMenu = React.useContext(ContextMenuContext);
 
 	const onClick = () => {
 		if (!channel) return;
@@ -79,7 +82,11 @@ function ChannelMention({ id }: MentionProps) {
 	if (!channel) return <MentionText>#{id}</MentionText>;
 
 	return (
-		<MentionText withHover onClick={onClick}>
+		<MentionText
+			withHover
+			onClick={onClick}
+			onContextMenu={(e) => contextMenu.onContextMenu(e, { type: "channelMention", channel })}
+		>
 			#{channel.name}
 		</MentionText>
 	);

src/contexts/ContextMenuContext.tsx

@@ -22,6 +22,10 @@ export type ContextMenuProps =
 			type: "channel";
 			channel: Channel;
 	  }
+	| {
+			type: "channelMention";
+			channel: Channel;
+	  }
 	| {
 			type: "guild";
 			guild: Guild;

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 ChannelMentionContextMenu from "../components/contextMenus/ChannelMentionContextMenu";
 import GuildContextMenu from "../components/contextMenus/GuildContextMenu";
 import MessageContextMenu from "../components/contextMenus/MessageContextMenu";
 import UserContextMenu from "../components/contextMenus/UserContextMenu";
@@ -13,6 +14,7 @@ export const ContextMenuComponents: Components = {
 	user: UserContextMenu,
 	message: MessageContextMenu,
 	channel: ChannelContextMenu,
+	channelMention: ChannelMentionContextMenu,
 	guild: GuildContextMenu,
 };