summaryrefslogtreecommitdiff
path: root/makima/frontend/src/components/contracts/ContractContextMenu.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'makima/frontend/src/components/contracts/ContractContextMenu.tsx')
-rw-r--r--makima/frontend/src/components/contracts/ContractContextMenu.tsx160
1 files changed, 0 insertions, 160 deletions
diff --git a/makima/frontend/src/components/contracts/ContractContextMenu.tsx b/makima/frontend/src/components/contracts/ContractContextMenu.tsx
deleted file mode 100644
index f31beb5..0000000
--- a/makima/frontend/src/components/contracts/ContractContextMenu.tsx
+++ /dev/null
@@ -1,160 +0,0 @@
-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>
- );
-}