From 52d121269195f0e799d0ab4241e4facc3c7c0596 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Mon, 19 Jan 2026 17:55:22 +0000
Subject: Add right-click context menu for contracts on contracts and board
 pages (#8)

Implement a reusable ContractContextMenu component that provides:
- Mark as Complete/Active/Archive status actions (conditionally shown)
- Go to Supervisor Task link (when supervisor exists)
- Delete action with confirmation

Integrate context menu into:
- ContractList.tsx on the contracts page
- WorkflowBoard on the workflow/board page via PhaseColumn and WorkflowContractCard

Features match ElementContextMenu patterns:
- Fixed positioning with z-50
- Click outside and Escape key close handlers
- Viewport overflow prevention
- Dark theme colors (#0a1628, #0d1b2d, #75aafc, #9bc3ff)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../components/contracts/ContractContextMenu.tsx   | 160 +++++++++++++++++++++
 1 file changed, 160 insertions(+)
 create mode 100644 makima/frontend/src/components/contracts/ContractContextMenu.tsx

(limited to 'makima/frontend/src/components/contracts/ContractContextMenu.tsx')

diff --git a/makima/frontend/src/components/contracts/ContractContextMenu.tsx b/makima/frontend/src/components/contracts/ContractContextMenu.tsx
new file mode 100644
index 0000000..f31beb5
--- /dev/null
+++ b/makima/frontend/src/components/contracts/ContractContextMenu.tsx
@@ -0,0 +1,160 @@
+import { useEffect, useRef } from "react";
+import type { ContractSummary } from "../../lib/api";
+
+interface ContractContextMenuProps {
+  x: number;
+  y: number;
+  contract: ContractSummary;
+  onClose: () => void;
+  onMarkComplete: () => void;
+  onMarkActive: () => void;
+  onArchive: () => void;
+  onDelete: () => void;
+  onGoToSupervisor: () => void;
+}
+
+export function ContractContextMenu({
+  x,
+  y,
+  contract,
+  onClose,
+  onMarkComplete,
+  onMarkActive,
+  onArchive,
+  onDelete,
+  onGoToSupervisor,
+}: ContractContextMenuProps) {
+  const menuRef = useRef<HTMLDivElement>(null);
+
+  // Close on click outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]);
+
+  // Adjust position if menu would overflow viewport
+  useEffect(() => {
+    if (menuRef.current) {
+      const rect = menuRef.current.getBoundingClientRect();
+      const viewportWidth = window.innerWidth;
+      const viewportHeight = window.innerHeight;
+
+      if (rect.right > viewportWidth) {
+        menuRef.current.style.left = `${x - rect.width}px`;
+      }
+      if (rect.bottom > viewportHeight) {
+        menuRef.current.style.top = `${y - rect.height}px`;
+      }
+    }
+  }, [x, y]);
+
+  const menuItemClass =
+    "w-full px-3 py-1.5 text-left text-xs font-mono text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)] flex items-center gap-2";
+  const dividerClass = "border-t border-[rgba(117,170,252,0.2)] my-1";
+
+  const showMarkComplete = contract.status !== "completed";
+  const showMarkActive = contract.status !== "active";
+  const showArchive = contract.status !== "archived";
+  const showGoToSupervisor = !!contract.supervisorTaskId;
+
+  return (
+    <div
+      ref={menuRef}
+      className="fixed z-50 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[180px]"
+      style={{ left: x, top: y }}
+    >
+      {/* Header showing contract name */}
+      <div className="px-3 py-1.5 text-[10px] font-mono text-[#555] uppercase border-b border-[rgba(117,170,252,0.2)] truncate max-w-[200px]">
+        {contract.name}
+      </div>
+
+      {/* Status actions */}
+      {showMarkComplete && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onMarkComplete();
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">✓</span>
+          Mark as Complete
+        </button>
+      )}
+
+      {showMarkActive && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onMarkActive();
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">●</span>
+          Mark as Active
+        </button>
+      )}
+
+      {showArchive && (
+        <button
+          className={menuItemClass}
+          onClick={() => {
+            onArchive();
+            onClose();
+          }}
+        >
+          <span className="text-[#75aafc]">▣</span>
+          Archive
+        </button>
+      )}
+
+      {/* Supervisor link */}
+      {showGoToSupervisor && (
+        <>
+          <div className={dividerClass} />
+          <button
+            className={menuItemClass}
+            onClick={() => {
+              onGoToSupervisor();
+              onClose();
+            }}
+          >
+            <span className="text-[#75aafc]">▶</span>
+            Go to Supervisor Task
+          </button>
+        </>
+      )}
+
+      <div className={dividerClass} />
+
+      {/* Delete action */}
+      <button
+        className={`${menuItemClass} text-red-400 hover:bg-red-400/10`}
+        onClick={() => {
+          onDelete();
+          onClose();
+        }}
+      >
+        <span className="text-red-400">✕</span>
+        Delete
+      </button>
+    </div>
+  );
+}
-- 
cgit v1.2.3