fix: context menus are now bound by spread

src/components/navigation/items/ButtonItem.tsx

@@ -8,7 +8,7 @@ import { User } from "revolt.js/dist/maps/Users";
 import styles from "./Item.module.scss";
 import classNames from "classnames";
 import { Ref } from "preact";
-import { refContextMenu } from "preact-context-menu";
+import { useTriggerEvents } from "preact-context-menu";
 import { Localizer, Text } from "preact-i18n";
 
 import { isTouchscreenDevice } from "../../../lib/isTouchscreenDevice";
@@ -67,14 +67,12 @@ export const UserButton = observer((props: UserProps) => {
                 typeof channel !== "undefined" ||
                 (user.online && user.status?.presence !== Presence.Invisible)
             }
-            ref={
-                refContextMenu("Menu", {
-                    user: user._id,
-                    channel: channel?._id,
-                    unread: alert,
-                    contextualChannel: context?._id,
-                }) as Ref<HTMLDivElement>
-            }>
+            {...useTriggerEvents("Menu", {
+                user: user._id,
+                channel: channel?._id,
+                unread: alert,
+                contextualChannel: context?._id,
+            })}>
             <UserIcon
                 className={styles.avatar}
                 target={user}
@@ -166,12 +164,10 @@ export const ChannelButton = observer((props: ChannelProps) => {
             data-muted={muted}
             aria-label={channel.name}
             className={classNames(styles.item, { [styles.compact]: compact })}
-            ref={
-                refContextMenu("Menu", {
-                    channel: channel._id,
-                    unread: !!alert,
-                }) as Ref<HTMLDivElement>
-            }>
+            {...useTriggerEvents("Menu", {
+                channel: channel._id,
+                unread: !!alert,
+            })}>
             <ChannelIcon
                 className={styles.avatar}
                 target={channel}

src/components/navigation/left/ServerListSidebar.tsx

@@ -6,7 +6,7 @@ import { RelationshipStatus } from "revolt-api/types/Users";
 import styled, { css } from "styled-components/macro";
 
 import { Ref } from "preact";
-import { refContextMenu } from "preact-context-menu";
+import { useTriggerEvents } from "preact-context-menu";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
 import PaintCounter from "../../../lib/PaintCounter";
@@ -265,9 +265,7 @@ export default observer(() => {
                     <ServerEntry home active={homeActive}>
                         <Swoosh />
                         <div
-                            ref={
-                                refContextMenu("Status") as Ref<HTMLDivElement>
-                            }
+                            {...useTriggerEvents("Status")}
                             onClick={() =>
                                 homeActive && history.push("/settings")
                             }>
@@ -303,12 +301,10 @@ export default observer(() => {
                                 <ServerEntry
                                     home
                                     active={false}
-                                    ref={
-                                        refContextMenu("Menu", {
-                                            channel: x._id,
-                                            unread: true,
-                                        }) as Ref<HTMLDivElement>
-                                    }>
+                                    {...useTriggerEvents("Menu", {
+                                        channel: x._id,
+                                        unread: true,
+                                    })}>
                                     <div>
                                         <Icon
                                             size={42}
@@ -354,12 +350,10 @@ export default observer(() => {
                             to={state.layout.getServerPath(server._id)}>
                             <ServerEntry
                                 active={active}
-                                ref={
-                                    refContextMenu("Menu", {
-                                        server: server._id,
-                                        unread: isUnread,
-                                    }) as Ref<HTMLDivElement>
-                                }>
+                                {...useTriggerEvents("Menu", {
+                                    server: server._id,
+                                    unread: isUnread,
+                                })}>
                                 <Swoosh />
                                 <Tooltip
                                     content={server.name}

src/components/navigation/left/ServerSidebar.tsx

@@ -4,7 +4,7 @@ import { Server } from "revolt.js/dist/maps/Servers";
 import styled, { css } from "styled-components/macro";
 
 import { Ref } from "preact";
-import { refContextMenu } from "preact-context-menu";
+import { useTriggerEvents } from "preact-context-menu";
 import { useEffect } from "preact/hooks";
 
 import ConditionalLink from "../../../lib/ConditionalLink";
@@ -50,10 +50,6 @@ const ServerList = styled.div`
     }
 `;
 
-interface Props {
-    server: Server;
-}
-
 export default observer(() => {
     const client = useClient();
     const state = useApplicationState();
@@ -146,11 +142,9 @@ export default observer(() => {
             <ServerHeader server={server} />
             <ConnectionStatus />
             <ServerList
-                ref={
-                    refContextMenu("Menu", {
-                        server_list: server._id,
-                    }) as Ref<HTMLDivElement>
-                }>
+                {...useTriggerEvents("Menu", {
+                    server_list: server._id,
+                })}>
                 {elements}
             </ServerList>
             <PaintCounter small />