Add files via upload

2026-03-05 15:19:38 -06:00
parent 9ec74eaeca
commit 05ff3006f4
4 changed files with 293 additions and 60 deletions
--- a/frontend/src/components/UI/ContextMenu.jsx
+++ b/frontend/src/components/UI/ContextMenu.jsx
@@ -0,0 +1,55 @@
+import { useEffect, useRef } from 'react'
+
+export default function ContextMenu({ x, y, items, onClose }) {
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const onMouseDown = (e) => { if (ref.current && !ref.current.contains(e.target)) onClose() }
+    const onKey       = (e) => { if (e.key === 'Escape') onClose() }
+    document.addEventListener('mousedown', onMouseDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onMouseDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [onClose])
+
+  // Keep menu inside viewport
+  const W = 192
+  const H = items.length * 34
+  const adjX = Math.min(x, window.innerWidth  - W - 8)
+  const adjY = Math.min(y, window.innerHeight - H - 8)
+
+  return (
+    <div
+      ref={ref}
+      style={{ left: adjX, top: adjY }}
+      className="fixed z-[200] min-w-[192px] bg-surface-elevated border border-surface-border rounded-xl shadow-2xl py-1.5 overflow-hidden"
+    >
+      {items.map((item, i) =>
+        item.separator ? (
+          <div key={i} className="h-px bg-surface-border my-1 mx-2" />
+        ) : (
+          <button
+            key={i}
+            disabled={item.disabled}
+            onClick={() => { item.action(); onClose() }}
+            className={`w-full flex items-center gap-2.5 px-3 py-2 text-xs text-left transition-colors disabled:opacity-40 disabled:cursor-not-allowed
+              ${item.danger
+                ? 'text-red-400 hover:bg-red-500/10'
+                : item.highlight
+                  ? 'text-gold hover:bg-gold/10'
+                  : 'text-text-primary hover:bg-surface-border/40'
+              }`}
+          >
+            <span className="text-sm w-4 text-center leading-none flex-shrink-0">{item.icon}</span>
+            <span>{item.label}</span>
+            {item.shortcut && (
+              <span className="ml-auto text-text-muted/50 text-[10px]">{item.shortcut}</span>
+            )}
+          </button>
+        )
+      )}
+    </div>
+  )
+}