From 90007a8359cf50923d55734bb8d4325307c75461 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Sat, 7 Mar 2026 20:16:29 +0000
Subject: feat: soryu-co/soryu - makima: Add right-click context menu to orders
 page

---
 .../frontend/src/components/orders/OrderList.tsx   | 34 ++++++++++++++++++++++
 1 file changed, 34 insertions(+)

(limited to 'makima/frontend/src/components/orders/OrderList.tsx')

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>
   );
 }
-- 
cgit v1.2.3