diff options
Diffstat (limited to 'makima/frontend/src/components')
5 files changed, 457 insertions, 54 deletions
diff --git a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx b/makima/frontend/src/components/directives/DirectiveContextMenu.tsx new file mode 100644 index 0000000..07322e2 --- /dev/null +++ b/makima/frontend/src/components/directives/DirectiveContextMenu.tsx @@ -0,0 +1,160 @@ +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; +} + +export function DirectiveContextMenu({ + x, + y, + directive, + onClose, + onStart, + onPause, + onArchive, + onDelete, + onGoToPR, +}: 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; + + 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> + + {/* 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> + )} + + {/* Go to PR link */} + {showGoToPR && ( + <> + <div className={dividerClass} /> + <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> + ); +} diff --git a/makima/frontend/src/components/directives/DirectiveList.tsx b/makima/frontend/src/components/directives/DirectiveList.tsx index 6a9c486..38a7caa 100644 --- a/makima/frontend/src/components/directives/DirectiveList.tsx +++ b/makima/frontend/src/components/directives/DirectiveList.tsx @@ -1,6 +1,7 @@ -import { useMemo } from "react"; +import { useState, useMemo } from "react"; import type { DirectiveSummary, DirectiveStatus } from "../../lib/api"; import { useSupervisorQuestions } from "../../contexts/SupervisorQuestionsContext"; +import { DirectiveContextMenu } from "./DirectiveContextMenu"; const STATUS_BADGE: Record<DirectiveStatus, { color: string; label: string }> = { draft: { color: "text-[#7788aa] border-[#2a3a5a]", label: "DRAFT" }, @@ -15,10 +16,28 @@ interface DirectiveListProps { selectedId: string | null; onSelect: (id: string) => void; onCreate: () => void; + onStart?: (directive: DirectiveSummary) => void; + onPause?: (directive: DirectiveSummary) => void; + onArchive?: (directive: DirectiveSummary) => void; + onDelete?: (directive: DirectiveSummary) => void; + onGoToPR?: (directive: DirectiveSummary) => void; } -export function DirectiveList({ directives, selectedId, onSelect, onCreate }: DirectiveListProps) { +export function DirectiveList({ directives, selectedId, onSelect, onCreate, onStart, onPause, onArchive, onDelete, onGoToPR }: DirectiveListProps) { const { pendingQuestions } = useSupervisorQuestions(); + const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null); + const [contextMenuDirective, setContextMenuDirective] = useState<DirectiveSummary | null>(null); + + const handleContextMenu = (e: React.MouseEvent, directive: DirectiveSummary) => { + e.preventDefault(); + setContextMenuPosition({ x: e.clientX, y: e.clientY }); + setContextMenuDirective(directive); + }; + + const closeContextMenu = () => { + setContextMenuPosition(null); + setContextMenuDirective(null); + }; const questionsPerDirective = useMemo(() => { const counts = new Map<string, number>(); @@ -61,6 +80,7 @@ export function DirectiveList({ directives, selectedId, onSelect, onCreate }: Di key={d.id} type="button" onClick={() => onSelect(d.id)} + onContextMenu={(e) => handleContextMenu(e, d)} className={`w-full text-left px-3 py-2.5 border-b border-[rgba(117,170,252,0.1)] hover:bg-[rgba(117,170,252,0.05)] transition-colors ${ selectedId === d.id ? "bg-[rgba(117,170,252,0.1)]" : "" }`} @@ -99,6 +119,21 @@ export function DirectiveList({ directives, selectedId, onSelect, onCreate }: Di }) )} </div> + + {/* Context Menu */} + {contextMenuPosition && contextMenuDirective && ( + <DirectiveContextMenu + x={contextMenuPosition.x} + y={contextMenuPosition.y} + directive={contextMenuDirective} + onClose={closeContextMenu} + onStart={() => onStart?.(contextMenuDirective)} + onPause={() => onPause?.(contextMenuDirective)} + onArchive={() => onArchive?.(contextMenuDirective)} + onDelete={() => onDelete?.(contextMenuDirective)} + onGoToPR={() => onGoToPR?.(contextMenuDirective)} + /> + )} </div> ); } diff --git a/makima/frontend/src/components/orders/OrderContextMenu.tsx b/makima/frontend/src/components/orders/OrderContextMenu.tsx new file mode 100644 index 0000000..f73ca4f --- /dev/null +++ b/makima/frontend/src/components/orders/OrderContextMenu.tsx @@ -0,0 +1,184 @@ +import { useEffect, useRef } from "react"; +import type { Order, OrderStatus } from "../../lib/api"; + +interface OrderContextMenuProps { + x: number; + y: number; + order: Order; + onClose: () => void; + onChangeStatus: (status: OrderStatus) => void; + onDelete: () => void; + onGoToDirective: () => void; +} + +export function OrderContextMenu({ + x, + y, + order, + onClose, + onChangeStatus, + onDelete, + onGoToDirective, +}: OrderContextMenuProps) { + 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 showOpen = order.status !== "open"; + const showInProgress = order.status !== "in_progress"; + const showUnderReview = order.status !== "under_review"; + const showDone = order.status !== "done"; + const showArchive = order.status !== "archived"; + const showGoToDirective = !!order.directiveId; + + 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 order 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]"> + {order.title} + </div> + + {/* Status actions */} + {showOpen && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("open"); + onClose(); + }} + > + <span className="text-[#75aafc]">○</span> + Mark as Open + </button> + )} + + {showInProgress && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("in_progress"); + onClose(); + }} + > + <span className="text-[#75aafc]">●</span> + Mark as In Progress + </button> + )} + + {showUnderReview && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("under_review"); + onClose(); + }} + > + <span className="text-[#75aafc]">◉</span> + Mark as Under Review + </button> + )} + + {showDone && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("done"); + onClose(); + }} + > + <span className="text-[#75aafc]">✓</span> + Mark as Done + </button> + )} + + {showArchive && ( + <button + className={menuItemClass} + onClick={() => { + onChangeStatus("archived"); + onClose(); + }} + > + <span className="text-[#75aafc]">▣</span> + Archive + </button> + )} + + {/* Directive link */} + {showGoToDirective && ( + <> + <div className={dividerClass} /> + <button + className={menuItemClass} + onClick={() => { + onGoToDirective(); + onClose(); + }} + > + <span className="text-[#75aafc]">▶</span> + Go to Directive + </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> + ); +} diff --git a/makima/frontend/src/components/orders/OrderDetail.tsx b/makima/frontend/src/components/orders/OrderDetail.tsx index 4267725..ebc8124 100644 --- a/makima/frontend/src/components/orders/OrderDetail.tsx +++ b/makima/frontend/src/components/orders/OrderDetail.tsx @@ -115,8 +115,8 @@ export function OrderDetail({ return ( <div className="flex flex-col h-full overflow-y-auto"> {/* Header */} - <div className="px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.2)]"> - <div className="flex items-center justify-between mb-2"> + <div className="px-4 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)]"> + <div className="flex items-center justify-between mb-1"> {editingTitle ? ( <div className="flex-1 flex items-center gap-2 pr-2"> <input @@ -155,66 +155,56 @@ export function OrderDetail({ {order.title} </h2> )} - <div className="flex items-center gap-2 shrink-0"> - <span - className={`text-[10px] font-mono ${badge.color} border rounded px-2 py-0.5`} - > - {badge.label} - </span> - <button - type="button" - onClick={onRefresh} - className="text-[10px] font-mono text-[#7788aa] hover:text-white" - title="Refresh" - > - [refresh] - </button> - </div> + <button + type="button" + onClick={onRefresh} + className="text-[10px] font-mono text-[#7788aa] hover:text-white shrink-0" + title="Refresh" + > + [refresh] + </button> </div> - {/* Type + Priority inline */} - <div className="flex items-center gap-3 mb-2"> - <span className={`text-[10px] font-mono ${currentType.color}`}> + {/* Metadata badges row */} + <div className="flex flex-wrap items-center gap-1.5"> + <span + className={`text-[10px] font-mono ${badge.color} border rounded px-1.5 py-0.5`} + > + {badge.label} + </span> + <span + className={`text-[10px] font-mono ${currentType.color} border border-current rounded px-1.5 py-0.5`} + > {currentType.label} </span> - <span className="text-[10px] font-mono text-[#2a3a5a]">/</span> - <span className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`}> + <span + className={`text-[10px] font-mono ${currentPriority.color} border rounded px-1.5 py-0.5`} + > {currentPriority.label} </span> - </div> - - {/* Linked entities */} - {order.directiveId && ( - <div className="text-[10px] font-mono text-[#556677] mb-1 truncate"> - Directive: <a href={`/directives/${order.directiveId}`} className="text-[#75aafc] hover:text-white underline"> - {order.directiveName || order.directiveId.slice(0, 8) + "..."} + {order.directiveId && ( + <a + href={`/directives/${order.directiveId}`} + className="text-[10px] font-mono text-[#75aafc] border border-[rgba(117,170,252,0.3)] rounded px-1.5 py-0.5 hover:text-white hover:border-[rgba(117,170,252,0.5)] truncate max-w-[160px]" + title={order.directiveName || order.directiveId} + > + ↗ {order.directiveName || order.directiveId.slice(0, 8) + "..."} </a> - </div> - )} - {order.directiveStepId && ( - <div className="text-[10px] font-mono text-[#556677] mb-1 truncate"> - Step: <span className="text-[#7788aa]">{order.directiveStepId.slice(0, 8)}...</span> - </div> - )} - {order.directiveId && ( - <div className="text-[10px] font-mono text-[#556677] mb-1"> - DOG:{" "} - {order.dogId ? ( - <span className="text-[#75aafc]"> - {dogs.find((d) => d.id === order.dogId)?.name || order.dogId.slice(0, 8) + "..."} - </span> - ) : ( - <span className="text-[#445566] italic">None</span> - )} - </div> - )} - - {/* Controls */} - <div className="flex flex-wrap gap-2 mt-2"> + )} + {order.directiveStepId && ( + <span className="text-[10px] font-mono text-[#7788aa] border border-[#2a3a5a] rounded px-1.5 py-0.5"> + step:{order.directiveStepId.slice(0, 8)} + </span> + )} + {order.directiveId && ( + <span className="text-[10px] font-mono text-[#75aafc] border border-[rgba(117,170,252,0.3)] rounded px-1.5 py-0.5 truncate max-w-[120px]"> + DOG: {order.dogId ? (dogs.find((d) => d.id === order.dogId)?.name || order.dogId.slice(0, 8) + "...") : "None"} + </span> + )} <button type="button" onClick={onDelete} - className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-2 py-1 ml-auto" + className="text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-1.5 py-0.5 ml-auto" > Delete </button> diff --git a/makima/frontend/src/components/orders/OrderList.tsx b/makima/frontend/src/components/orders/OrderList.tsx index 0ebd18d..ec3dcf6 100644 --- a/makima/frontend/src/components/orders/OrderList.tsx +++ b/makima/frontend/src/components/orders/OrderList.tsx @@ -1,5 +1,6 @@ import { useState, useMemo } from "react"; import type { Order, OrderStatus, OrderPriority, OrderType } from "../../lib/api"; +import { OrderContextMenu } from "./OrderContextMenu"; const STATUS_BADGE: Record<OrderStatus, { color: string; label: string }> = { open: { color: "text-[#75aafc] border-[rgba(117,170,252,0.4)]", label: "OPEN" }, @@ -34,6 +35,9 @@ interface OrderListProps { onStatusFilter: (s: OrderStatus | undefined) => void; typeFilter: OrderType | undefined; onTypeFilter: (t: OrderType | undefined) => void; + onChangeStatus?: (order: Order, status: OrderStatus) => void; + onDelete?: (order: Order) => void; + onGoToDirective?: (order: Order) => void; } const STATUS_OPTIONS: (OrderStatus | "all")[] = ["all", "open", "in_progress", "under_review", "done", "archived"]; @@ -48,8 +52,24 @@ export function OrderList({ onStatusFilter, typeFilter, onTypeFilter, + onChangeStatus, + onDelete, + onGoToDirective, }: OrderListProps) { const [search, setSearch] = useState(""); + const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | null>(null); + const [contextMenuOrder, setContextMenuOrder] = useState<Order | null>(null); + + const handleContextMenu = (e: React.MouseEvent, order: Order) => { + e.preventDefault(); + setContextMenuPosition({ x: e.clientX, y: e.clientY }); + setContextMenuOrder(order); + }; + + const closeContextMenu = () => { + setContextMenuPosition(null); + setContextMenuOrder(null); + }; const filtered = useMemo(() => { if (!search.trim()) return orders; @@ -148,6 +168,7 @@ export function OrderList({ key={o.id} type="button" onClick={() => onSelect(o.id)} + onContextMenu={(e) => handleContextMenu(e, o)} className={`w-full text-left px-3 py-2.5 border-b border-[rgba(117,170,252,0.1)] hover:bg-[rgba(117,170,252,0.05)] transition-colors ${ selectedId === o.id ? "bg-[rgba(117,170,252,0.1)]" : "" }`} @@ -190,6 +211,19 @@ export function OrderList({ }) )} </div> + + {/* Context Menu */} + {contextMenuPosition && contextMenuOrder && ( + <OrderContextMenu + x={contextMenuPosition.x} + y={contextMenuPosition.y} + order={contextMenuOrder} + onClose={closeContextMenu} + onChangeStatus={(status) => onChangeStatus?.(contextMenuOrder, status)} + onDelete={() => onDelete?.(contextMenuOrder)} + onGoToDirective={() => onGoToDirective?.(contextMenuOrder)} + /> + )} </div> ); } |