Merge remote-tracking branch 'origin/makima/soryu-co-soryu---makima--add-right-click-context-m-6bf81c58' into makima/directive-soryu-co-soryu---makima-19fd3e1d-v1772943648

1 files changed, 37 insertions, 2 deletions

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>
   );
 }