fix: context menus are now bound by spread

src/components/common/messaging/Message.tsx

@@ -1,8 +1,7 @@
 import { observer } from "mobx-react-lite";
 import { Message as MessageObject } from "revolt.js/dist/maps/Messages";
 
-import { Ref } from "preact";
-import { refContextMenu } from "preact-context-menu";
+import { useTriggerEvents } from "preact-context-menu";
 import { memo } from "preact/compat";
 import { useEffect, useState } from "preact/hooks";
 
@@ -62,14 +61,12 @@ const Message = observer(
         const head =
             preferHead || (message.reply_ids && message.reply_ids.length > 0);
 
-        // ! TODO: tell fatal to make this type generic
-        // bree: Fatal please...
         const userContext = attachContext
-            ? (refContextMenu("Menu", {
+            ? useTriggerEvents("Menu", {
                   user: message.author_id,
                   contextualChannel: message.channel_id,
                   // eslint-disable-next-line
-              }) as any)
+              })
             : undefined;
 
         const openProfile = () =>
@@ -120,15 +117,13 @@ const Message = observer(
                     sending={typeof queued !== "undefined"}
                     mention={message.mention_ids?.includes(client.user!._id)}
                     failed={typeof queued?.error !== "undefined"}
-                    ref={
-                        attachContext
-                            ? (refContextMenu("Menu", {
-                                  message,
-                                  contextualChannel: message.channel_id,
-                                  queued,
-                              }) as Ref<HTMLDivElement>)
-                            : undefined
-                    }
+                    {...(attachContext
+                        ? useTriggerEvents("Menu", {
+                              message,
+                              contextualChannel: message.channel_id,
+                              queued,
+                          })
+                        : undefined)}
                     onMouseEnter={() => setAnimate(true)}
                     onMouseLeave={() => setAnimate(false)}>
                     <MessageInfo click={typeof head !== "undefined"}>
@@ -138,9 +133,9 @@ const Message = observer(
                                 url={message.generateMasqAvatarURL()}
                                 target={user}
                                 size={36}
-                                innerRef={userContext}
                                 onClick={handleUserClick}
                                 animate={mouseHovering}
+                                {...(userContext as any)}
                                 showServerIdentity
                             />
                         ) : (
@@ -155,8 +150,8 @@ const Message = observer(
                                     className="author"
                                     showServerIdentity
                                     onClick={handleUserClick}
-                                    innerRef={userContext}
                                     masquerade={message.masquerade!}
+                                    {...userContext}
                                 />
                                 <MessageDetail
                                     message={message}

src/components/common/messaging/SystemMessage.tsx

@@ -15,8 +15,7 @@ import { SystemMessage as SystemMessageI } from "revolt-api/types/Channels";
 import { Message } from "revolt.js/dist/maps/Messages";
 import styled from "styled-components/macro";
 
-import { Ref } from "preact";
-import { refContextMenu } from "preact-context-menu";
+import { useTriggerEvents } from "preact-context-menu";
 
 import { TextReact } from "../../../lib/i18n";
 
@@ -139,14 +138,12 @@ export const SystemMessage = observer(
         return (
             <MessageBase
                 highlight={highlight}
-                ref={
-                    attachContext
-                        ? (refContextMenu("Menu", {
-                              message,
-                              contextualChannel: message.channel,
-                          }) as Ref<HTMLDivElement>)
-                        : undefined
-                }>
+                {...(attachContext
+                    ? useTriggerEvents("Menu", {
+                          message,
+                          contextualChannel: message.channel,
+                      })
+                    : undefined)}>
                 {!hideInfo && (
                     <MessageInfo click={false}>
                         <MessageDetail message={message} position="left" />

src/components/common/messaging/attachments/Attachment.tsx

@@ -2,7 +2,7 @@ import { Attachment as AttachmentI } from "revolt-api/types/Autumn";
 
 import styles from "./Attachment.module.scss";
 import classNames from "classnames";
-import { refContextMenu } from "preact-context-menu";
+import { useTriggerEvents } from "preact-context-menu";
 import { useContext, useState } from "preact/hooks";
 
 import { AppContext } from "../../../../context/revoltjs/RevoltClient";
@@ -37,7 +37,7 @@ export default function Attachment({ attachment, hasContent }: Props) {
                 <SizedGrid
                     width={metadata.width}
                     height={metadata.height}
-                    innerRef={refContextMenu("Menu", {
+                    {...useTriggerEvents("Menu", {
                         attachment,
                     })}
                     className={classNames({