diff options
Diffstat (limited to 'makima/frontend/src/components/contracts/ContractContextMenu.tsx')
| -rw-r--r-- | makima/frontend/src/components/contracts/ContractContextMenu.tsx | 160 |
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> - ); -} |
