feat(rack): add shift-click context modal for connections with color and edge type configurability

2026-03-22 21:35:10 -05:00
parent 72918bd87a
commit f1c1efd8d3
10 changed files with 277 additions and 17 deletions
@@ -19,6 +19,7 @@ import { DevicePalette } from './DevicePalette';
 import { ConnectionLayer } from './ConnectionLayer';
 import { AddModuleModal } from '../modals/AddModuleModal';
 import { PortConfigModal } from '../modals/PortConfigModal';
+import { ConnectionConfigModal } from '../modals/ConnectionConfigModal';
 import { RackSkeleton } from '../ui/Skeleton';
 import type { ModuleType } from '../../types';
 import { MODULE_TYPE_COLORS, MODULE_TYPE_LABELS } from '../../lib/constants';
@@ -86,7 +87,7 @@ const POINTER_SENSOR_OPTIONS = {
 };

 export function RackPlanner() {
-  const { racks, loading, fetchRacks, moveModule, activeConfigPortId, setActiveConfigPortId } = useRackStore();
+  const { racks, loading, fetchRacks, moveModule, activeConfigPortId, setActiveConfigPortId, activeConfigConnectionId, setActiveConfigConnectionId } = useRackStore();
  const canvasRef = useRef<HTMLDivElement>(null);

  // Drag state
@@ -304,6 +305,14 @@ export function RackPlanner() {
          onClose={() => setActiveConfigPortId(null)}
        />
      )}
+
+      {activeConfigConnectionId && (
+        <ConnectionConfigModal
+          open={!!activeConfigConnectionId}
+          connectionId={activeConfigConnectionId}
+          onClose={() => setActiveConfigConnectionId(null)}
+        />
+      )}
    </DndContext>
  );
 }