Try contextmenu + long press events

package-lock.json

@@ -18,6 +18,7 @@
         "fast-deep-equal": "~3.1.3",
         "idb-keyval": "~6.2.0",
         "just-debounce-it": "~3.2.0",
+        "long-press-event": "~2.4.6",
         "masto": "~5.10.0",
         "mem": "~9.0.2",
         "p-retry": "~5.1.2",
@@ -4664,6 +4665,11 @@
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
       "dev": true
     },
+    "node_modules/long-press-event": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/long-press-event/-/long-press-event-2.4.6.tgz",
+      "integrity": "sha512-59zL3M+uD7Q2DTuxJ2UkbVV3+0D9PrcI7zgem1AXRinH6g8mb7iN9vOKCqiVriW15S4L9OmKOr/d8q9qAaeCGQ=="
+    },
     "node_modules/loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -10335,6 +10341,11 @@
       "integrity": "sha512-HDWXG8isMntAyRF5vZ7xKuEvOhT4AhlRt/3czTSjvGUxjYCBVRQY48ViDHyfYz9VIoBkW4TMGQNapx+l3RUwdA==",
       "dev": true
     },
+    "long-press-event": {
+      "version": "2.4.6",
+      "resolved": "https://registry.npmjs.org/long-press-event/-/long-press-event-2.4.6.tgz",
+      "integrity": "sha512-59zL3M+uD7Q2DTuxJ2UkbVV3+0D9PrcI7zgem1AXRinH6g8mb7iN9vOKCqiVriW15S4L9OmKOr/d8q9qAaeCGQ=="
+    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",

package.json

@@ -20,6 +20,7 @@
     "fast-deep-equal": "~3.1.3",
     "idb-keyval": "~6.2.0",
     "just-debounce-it": "~3.2.0",
+    "long-press-event": "~2.4.6",
     "masto": "~5.10.0",
     "mem": "~9.0.2",
     "p-retry": "~5.1.2",

src/components/status.jsx

@@ -1,6 +1,12 @@
 import './status.css';
 
-import { Menu, MenuDivider, MenuHeader, MenuItem } from '@szhsin/react-menu';
+import {
+  ControlledMenu,
+  Menu,
+  MenuDivider,
+  MenuHeader,
+  MenuItem,
+} from '@szhsin/react-menu';
 import mem from 'mem';
 import pThrottle from 'p-throttle';
 import { memo } from 'preact/compat';
@@ -479,6 +485,26 @@ function Status({
     </>
   );
 
+  const [isContextMenuOpen, setIsContextMenuOpen] = useState(false);
+  const [contextMenuAnchorPoint, setContextMenuAnchorPoint] = useState({
+    x: 0,
+    y: 0,
+  });
+  useEffect(() => {
+    function openContextMenu(e) {
+      e.preventDefault();
+      setContextMenuAnchorPoint({
+        x: e.clientX,
+        y: e.clientY,
+      });
+      setIsContextMenuOpen(true);
+    }
+    statusRef.current.addEventListener('long-press', openContextMenu);
+    return () => {
+      statusRef.current.removeEventListener('long-press', openContextMenu);
+    };
+  }, []);
+
   return (
     <article
       ref={statusRef}
@@ -493,7 +519,30 @@ function Status({
         }[size]
       }`}
       onMouseEnter={debugHover}
+      onContextMenu={(e) => {
+        if (e.metaKey) return;
+        e.preventDefault();
+        setContextMenuAnchorPoint({
+          x: e.clientX,
+          y: e.clientY,
+        });
+        setIsContextMenuOpen(true);
+      }}
     >
+      <ControlledMenu
+        state={isContextMenuOpen ? 'open' : 'closed'}
+        anchorPoint={contextMenuAnchorPoint}
+        direction="right"
+        onClose={() => setIsContextMenuOpen(false)}
+        portal={{
+          target: document.body,
+        }}
+        overflow="auto"
+        boundingBoxPadding="8 8 8 8"
+        unmountOnClose
+      >
+        {StatusMenuItems}
+      </ControlledMenu>
       {size !== 'l' && (
         <div class="status-badge">
           {reblogged && <Icon class="reblog" icon="rocket" size="s" />}