From 5de001c630d62d08625084e97e68b0aa6ee05f77 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 22 Mar 2026 15:04:53 -0500
Subject: [PATCH] refactor(rack-planner): lift port config modal state to root
 level to avoid rendering issues within transformed modules

---
 client/src/components/rack/ModuleBlock.tsx | 18 ++----------------
 client/src/components/rack/RackPlanner.tsx | 11 ++++++++++-
 client/src/store/useRackStore.ts           |  6 ++++++
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/client/src/components/rack/ModuleBlock.tsx b/client/src/components/rack/ModuleBlock.tsx
index 65d9334..cad419d 100644
--- a/client/src/components/rack/ModuleBlock.tsx
+++ b/client/src/components/rack/ModuleBlock.tsx
@@ -15,11 +15,9 @@ interface ModuleBlockProps {
 }
 
 export function ModuleBlock({ module }: ModuleBlockProps) {
-  const { racks, updateModuleLocal } = useRackStore();
+  const { racks, updateModuleLocal, setActiveConfigPortId } = useRackStore();
   const [hovered, setHovered] = useState(false);
   const [editOpen, setEditOpen] = useState(false);
-  const [portModalOpen, setPortModalOpen] = useState(false);
-  const [selectedPortId, setSelectedPortId] = useState<string | null>(null);
 
   // Resize state
   const [previewUSize, setPreviewUSize] = useState<number | null>(null);
@@ -105,8 +103,7 @@ export function ModuleBlock({ module }: ModuleBlockProps) {
   }
 
   function openPort(portId: string) {
-    setSelectedPortId(portId);
-    setPortModalOpen(true);
+    setActiveConfigPortId(portId);
   }
 
   const { cablingFromPortId, setCablingFromPortId, createConnection } = useRackStore();
@@ -236,17 +233,6 @@ export function ModuleBlock({ module }: ModuleBlockProps) {
       </div>
 
       <ModuleEditPanel module={module} open={editOpen} onClose={() => setEditOpen(false)} />
-
-      {selectedPortId && (
-        <PortConfigModal
-          portId={selectedPortId}
-          open={portModalOpen}
-          onClose={() => {
-            setPortModalOpen(false);
-            setSelectedPortId(null);
-          }}
-        />
-      )}
     </>
   );
 }
diff --git a/client/src/components/rack/RackPlanner.tsx b/client/src/components/rack/RackPlanner.tsx
index 02a1738..f371dbb 100644
--- a/client/src/components/rack/RackPlanner.tsx
+++ b/client/src/components/rack/RackPlanner.tsx
@@ -18,6 +18,7 @@ import { RackColumn } from './RackColumn';
 import { DevicePalette } from './DevicePalette';
 import { ConnectionLayer } from './ConnectionLayer';
 import { AddModuleModal } from '../modals/AddModuleModal';
+import { PortConfigModal } from '../modals/PortConfigModal';
 import { RackSkeleton } from '../ui/Skeleton';
 import type { ModuleType } from '../../types';
 import { MODULE_TYPE_COLORS, MODULE_TYPE_LABELS } from '../../lib/constants';
@@ -85,7 +86,7 @@ const POINTER_SENSOR_OPTIONS = {
 };
 
 export function RackPlanner() {
-  const { racks, loading, fetchRacks, moveModule } = useRackStore();
+  const { racks, loading, fetchRacks, moveModule, activeConfigPortId, setActiveConfigPortId } = useRackStore();
   const canvasRef = useRef<HTMLDivElement>(null);
 
   // Drag state
@@ -295,6 +296,14 @@ export function RackPlanner() {
           initialType={pendingDrop.type}
         />
       )}
+
+      {activeConfigPortId && (
+        <PortConfigModal
+          open={!!activeConfigPortId}
+          portId={activeConfigPortId}
+          onClose={() => setActiveConfigPortId(null)}
+        />
+      )}
     </DndContext>
   );
 }
diff --git a/client/src/store/useRackStore.ts b/client/src/store/useRackStore.ts
index bcce1c4..072503f 100644
--- a/client/src/store/useRackStore.ts
+++ b/client/src/store/useRackStore.ts
@@ -24,6 +24,9 @@ interface RackState {
   setCablingFromPortId: (id: string | null) => void;
   createConnection: (fromPortId: string, toPortId: string) => Promise<void>;
   deleteConnection: (id: string) => Promise<void>;
+  // Port Config Global Modal
+  activeConfigPortId: string | null;
+  setActiveConfigPortId: (id: string | null) => void;
 }
 
 export const useRackStore = create<RackState>((set, get) => ({
@@ -128,4 +131,7 @@ export const useRackStore = create<RackState>((set, get) => ({
     const racks = await apiClient.racks.list();
     set({ racks });
   },
+
+  activeConfigPortId: null,
+  setActiveConfigPortId: (id) => set({ activeConfigPortId: id }),
 }));