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}