diff options
Diffstat (limited to 'makima/frontend/src/components/directives/DirectiveContextMenu.tsx')
| -rw-r--r-- | makima/frontend/src/components/directives/DirectiveContextMenu.tsx | 251 |
1 files changed, 0 insertions, 251 deletions
diff --git a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx b/makima/frontend/src/components/directives/DirectiveContextMenu.tsx deleted file mode 100644 index eda7e7f..0000000 --- a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx +++ /dev/null @@ -1,251 +0,0 @@ -import { useEffect, useRef } from "react"; -import type { DirectiveSummary } from "../../lib/api"; - -interface DirectiveContextMenuProps { - x: number; - y: number; - directive: DirectiveSummary; - onClose: () => void; - onStart: () => void; - onPause: () => void; - onArchive: () => void; - onDelete: () => void; - onGoToPR: () => void; - /** - * Reset the contract to a fresh empty draft (clears goal + pr_url, status - * back to 'draft'). Past revisions stay as history. Optional so the legacy - * tabular UI doesn't have to wire it up. - */ - onNewDraft?: () => void; - /** Trigger a fresh PR creation from the current contract state. */ - onCreatePR?: () => void; - /** Manually advance the DAG (find newly-ready steps). */ - onAdvance?: () => void; - /** Run the cleanup task to prune merged/stale steps. */ - onCleanup?: () => void; - /** Pick up linked orders (queue them as new steps). */ - onPickUpOrders?: () => void; -} - -export function DirectiveContextMenu({ - x, - y, - directive, - onClose, - onStart, - onPause, - onArchive, - onDelete, - onGoToPR, - onNewDraft, - onCreatePR, - onAdvance, - onCleanup, - onPickUpOrders, -}: DirectiveContextMenuProps) { - 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 showStart = directive.status === "draft" || directive.status === "paused" || directive.status === "idle"; - const showPause = directive.status === "active"; - const showArchive = directive.status !== "archived"; - const showGoToPR = !!directive.prUrl; - // "New draft" appears once the contract is inactive (its iteration has - // shipped) — that's the explicit affordance for starting the next cycle - // on a clean slate while keeping prior revisions as history. - const showNewDraft = !!onNewDraft && directive.status === "inactive"; - - 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 directive title */} - <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]"> - {directive.title} - </div> - - {/* New draft — the canonical action on an inactive (shipped) contract. */} - {showNewDraft && ( - <> - <button - className={menuItemClass} - onClick={() => { - onNewDraft?.(); - onClose(); - }} - > - <span className="text-emerald-300">＋</span> - New draft - </button> - <div className={dividerClass} /> - </> - )} - - {/* Status actions */} - {showStart && ( - <button - className={menuItemClass} - onClick={() => { - onStart(); - onClose(); - }} - > - <span className="text-[#75aafc]">▶</span> - Start - </button> - )} - - {showPause && ( - <button - className={menuItemClass} - onClick={() => { - onPause(); - onClose(); - }} - > - <span className="text-[#75aafc]">❚❚</span> - Pause - </button> - )} - - {showArchive && ( - <button - className={menuItemClass} - onClick={() => { - onArchive(); - onClose(); - }} - > - <span className="text-[#75aafc]">▣</span> - Archive - </button> - )} - - {/* Orchestration actions — Advance / Pick up orders / Cleanup. */} - {(onAdvance || onPickUpOrders || onCleanup) && ( - <div className={dividerClass} /> - )} - {onAdvance && ( - <button - className={menuItemClass} - onClick={() => { - onAdvance(); - onClose(); - }} - > - <span className="text-[#75aafc]">»</span> - Advance DAG - </button> - )} - {onPickUpOrders && ( - <button - className={menuItemClass} - onClick={() => { - onPickUpOrders(); - onClose(); - }} - > - <span className="text-[#c084fc]">◆</span> - Plan orders - </button> - )} - {onCleanup && ( - <button - className={menuItemClass} - onClick={() => { - onCleanup(); - onClose(); - }} - > - <span className="text-[#75aafc]">⎚</span> - Clean up - </button> - )} - - {/* PR actions — Create / Update / Go to PR. */} - {(onCreatePR || showGoToPR) && <div className={dividerClass} />} - {onCreatePR && ( - <button - className={menuItemClass} - onClick={() => { - onCreatePR(); - onClose(); - }} - > - <span className="text-emerald-300">↗</span> - {directive.prUrl ? "Update PR" : "Create PR"} - </button> - )} - {showGoToPR && ( - <button - className={menuItemClass} - onClick={() => { - onGoToPR(); - onClose(); - }} - > - <span className="text-[#75aafc]">↗</span> - Go to PR - </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> - ); -} |