wip context menus

src/components/MemberList/MemberListItem.tsx

@@ -1,5 +1,7 @@
 import { PresenceUpdateStatus } from "@spacebarchat/spacebar-api-types/v9";
+import { useContext } from "react";
 import styled from "styled-components";
+import { ContextMenuContext } from "../../contexts/ContextMenuContext";
 import { useAppStore } from "../../stores/AppStore";
 import GuildMember from "../../stores/objects/GuildMember";
 import Avatar from "../Avatar";
@@ -62,6 +64,7 @@ interface Props {
 function MemberListItem({ item }: Props) {
 	const app = useAppStore();
 	const presence = app.presences.get(item.user!.id);
+	const contextMenu = useContext(ContextMenuContext);
 
 	return (
 		<Floating
@@ -73,7 +76,11 @@ function MemberListItem({ item }: Props) {
 				member: item,
 			}}
 		>
-			<ListItem key={item.user?.id}>
+			<ListItem
+				key={item.user?.id}
+				ref={contextMenu.setReferenceElement}
+				onContextMenu={(e) => contextMenu.onContextMenu(e, { user: item.user! })}
+			>
 				<Container>
 					<Wrapper offline={presence?.status === PresenceUpdateStatus.Offline}>
 						<AvatarWrapper>

src/components/contextMenus/ContextMenu.tsx

@@ -0,0 +1,66 @@
+// modified from https://github.com/revoltchat/frontend/blob/master/components/app/menus/ContextMenu.tsx
+// changed some styling
+
+import { ComponentProps } from "react";
+import styled from "styled-components";
+import Icon, { IconProps } from "../Icon";
+
+export const ContextMenu = styled.div`
+	display: flex;
+	flex-direction: column;
+	padding: 6px 8px;
+
+	overflow: hidden;
+	border-radius: 4px;
+	background: var(--background-tertiary);
+	color: var(--text);
+
+	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
+`;
+
+export const ContextMenuDivider = styled.div`
+	height: 1px;
+	margin: 4px;
+	background: var(--text);
+`;
+
+export const ContextMenuItem = styled("a")`
+	display: block;
+	padding: 6px 8px;
+	border-radius: 4px;
+	font-size: 14px;
+	margin: 2px 0;
+	cursor: pointer;
+`;
+
+const ButtonBase = styled(ContextMenuItem)<{ destructive?: boolean }>`
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	gap: 8px;
+
+	> span {
+		margin-top: 1px;
+	}
+
+	&:hover {
+		background: ${(props) => (props.destructive ? "var(--danger)" : "var(--primary)")};
+		${(props) => (props.destructive ? `color: var(--text)` : "")}
+	}
+
+	${(props) => (props.destructive ? `fill: var(--danger); color: var(--danger)` : "")}
+`;
+
+type ButtonProps = ComponentProps<typeof ContextMenuItem> & {
+	icon?: IconProps["icon"];
+	destructive?: boolean;
+};
+
+export function ContextMenuButton(props: ButtonProps) {
+	return (
+		<ButtonBase {...props}>
+			<span>{props.children}</span>
+			{props.icon && <Icon icon={props.icon} size="18px" />}
+		</ButtonBase>
+	);
+}

src/components/contextMenus/UserContextMenu.tsx

@@ -0,0 +1,32 @@
+// loosely based on https://github.com/revoltchat/frontend/blob/master/components/app/menus/UserContextMenu.tsx
+
+import User from "../../stores/objects/User";
+import { ContextMenu, ContextMenuButton, ContextMenuDivider } from "./ContextMenu";
+
+interface MenuProps {
+	user: User;
+}
+
+function UserContextMenu({ user }: MenuProps) {
+	/**
+	 * Copy user id to clipboard
+	 */
+	function copyId() {
+		navigator.clipboard.writeText(user.id);
+	}
+
+	return (
+		<ContextMenu>
+			<ContextMenuButton icon="mdiAt" destructive>
+				Mention
+			</ContextMenuButton>
+			<ContextMenuDivider />
+
+			<ContextMenuButton icon="mdiIdentifier" onClick={copyId}>
+				Copy user ID
+			</ContextMenuButton>
+		</ContextMenu>
+	);
+}
+
+export default UserContextMenu;

src/contexts/ContextMenuContext.tsx

@@ -0,0 +1,56 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { FloatingPortal, useFloating } from "@floating-ui/react";
+import React from "react";
+import UserContextMenu from "../components/contextMenus/UserContextMenu";
+import useContextMenu from "../hooks/useContextMenu";
+import User from "../stores/objects/User";
+
+interface MenuProps {
+	user: User;
+}
+
+export type ContextMenuContextType = {
+	setReferenceElement: ReturnType<typeof useFloating>["refs"]["setReference"];
+	onContextMenu: (e: React.MouseEvent, props: MenuProps) => void;
+	close: () => void;
+	open: (user: User) => void;
+};
+
+// @ts-expect-error not specifying a default value here
+export const ContextMenuContext = React.createContext<ContextMenuContextType>();
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const ContextMenuContextProvider: React.FC<any> = ({ children }) => {
+	const contextMenu = useContextMenu("user");
+
+	const open = (user: User) => {
+		contextMenu.open({
+			user,
+		});
+	};
+
+	return (
+		<ContextMenuContext.Provider
+			value={{
+				close: contextMenu.close,
+				open,
+				setReferenceElement: contextMenu.refs.setReference,
+				onContextMenu: contextMenu.onContextMenu,
+			}}
+		>
+			{children}
+			<FloatingPortal>
+				{contextMenu.isOpen && (
+					<div
+						className="ContextMenu"
+						ref={contextMenu.refs.setFloating}
+						style={contextMenu.floatingStyles}
+						{...contextMenu.getFloatingProps()}
+					>
+						<UserContextMenu {...(contextMenu.props as any)} />
+					</div>
+				)}
+			</FloatingPortal>
+		</ContextMenuContext.Provider>
+	);
+};

src/hooks/useContextMenu.tsx

@@ -0,0 +1,92 @@
+import { autoUpdate, flip, offset, shift, useDismiss, useFloating, useInteractions, useRole } from "@floating-ui/react";
+import { useMemo, useState } from "react";
+import User from "../stores/objects/User";
+
+interface MenuProps {
+	user: User;
+}
+
+export default function (type: "user") {
+	const [isOpen, setIsOpen] = useState(false);
+	const [props, setProps] = useState<MenuProps | null>(null);
+
+	const data = useFloating({
+		placement: "right-start",
+		strategy: "fixed",
+		open: isOpen && props !== null,
+		onOpenChange: setIsOpen,
+		whileElementsMounted: autoUpdate,
+		middleware: [
+			offset(5),
+			flip({
+				fallbackPlacements: ["left-start"],
+			}),
+			shift({
+				padding: 8,
+			}),
+		],
+	});
+
+	const context = data.context;
+
+	const role = useRole(context, { role: "menu" });
+	const dismiss = useDismiss(context);
+	//   const listNavigation = useListNavigation(context, {
+	//     listRef: listItemsRef,
+	//     onNavigate: setActiveIndex,
+	//     activeIndex
+	//   });
+	//   const typeahead = useTypeahead(context, {
+	//     enabled: isOpen,
+	//     listRef: listContentRef,
+	//     onMatch: setActiveIndex,
+	//     activeIndex
+	//   });
+
+	const interactions = useInteractions([dismiss, role]);
+
+	const open = (props: MenuProps) => {
+		setProps(props);
+		setIsOpen(true);
+	};
+
+	const close = () => {
+		setIsOpen(false);
+	};
+
+	function onContextMenu(e: React.MouseEvent, props: MenuProps) {
+		e.preventDefault();
+
+		data.refs.setPositionReference({
+			getBoundingClientRect() {
+				return {
+					width: 0,
+					height: 0,
+					x: e.clientX,
+					y: e.clientY,
+					top: e.clientY,
+					right: e.clientX,
+					bottom: e.clientY,
+					left: e.clientX,
+				};
+			},
+		});
+
+		setProps(props);
+		setIsOpen(true);
+	}
+
+	return useMemo(
+		() => ({
+			isOpen,
+			props,
+			setProps,
+			open,
+			close,
+			onContextMenu,
+			...interactions,
+			...data,
+		}),
+		[isOpen, props, setProps, open, close, onContextMenu, interactions, data],
+	);
+}

src/index.tsx

@@ -19,6 +19,7 @@ import { BrowserRouter } from "react-router-dom";
 import { ErrorBoundaryContext } from "react-use-error-boundary";
 import App from "./App";
 import { BannerContextProvider } from "./contexts/BannerContext";
+import { ContextMenuContextProvider } from "./contexts/ContextMenuContext";
 import Theme from "./contexts/Theme";
 import ModalRenderer from "./controllers/modals/ModalRenderer";
 import "./index.css";
@@ -31,8 +32,10 @@ ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
 	<ErrorBoundaryContext>
 		<BrowserRouter>
 			<BannerContextProvider>
-				<App />
-				<ModalRenderer />
+				<ContextMenuContextProvider>
+					<App />
+					<ModalRenderer />
+				</ContextMenuContextProvider>
 			</BannerContextProvider>
 			<Theme />
 		</BrowserRouter>