diff --git a/client/src/components/rack/RackColumn.tsx b/client/src/components/rack/RackColumn.tsx index 5fac707..2afc79d 100644 --- a/client/src/components/rack/RackColumn.tsx +++ b/client/src/components/rack/RackColumn.tsx @@ -4,7 +4,7 @@ import { CSS } from '@dnd-kit/utilities'; import { Trash2, MapPin, GripVertical } from 'lucide-react'; import { toast } from 'sonner'; import type { Rack } from '../../types'; -import { buildOccupancyMap } from '../../lib/utils'; +import { U_HEIGHT_PX } from '../../lib/constants'; import { ModuleBlock } from './ModuleBlock'; import { RackSlot } from './RackSlot'; import { ConfirmDialog } from '../ui/ConfirmDialog'; @@ -35,9 +35,6 @@ export function RackColumn({ rack, draggingModuleId, hoverSlot }: RackColumnProp opacity: isDragging ? 0.4 : 1, }; - const occupancy = buildOccupancyMap(rack.modules); - const renderedModuleIds = new Set(); - async function handleDelete() { setDeleting(true); try { @@ -86,43 +83,32 @@ export function RackColumn({ rack, draggingModuleId, hoverSlot }: RackColumnProp {/* U-slot body */} -
- {Array.from({ length: rack.totalU }, (_, i) => i + 1).map((u) => { - const moduleId = occupancy.get(u) ?? null; - - if (moduleId) { - const module = rack.modules.find((m) => m.id === moduleId); - if (!module) return null; - - // Only render ModuleBlock at its top U - if (module.uPosition !== u) return null; - if (renderedModuleIds.has(moduleId)) return null; - renderedModuleIds.add(moduleId); - - // If this module is being dragged, show empty ghost slot instead - if (moduleId === draggingModuleId) { - return ( - - ); - } - - return ; - } - - return ( +
+
+ {Array.from({ length: rack.totalU }, (_, i) => i + 1).map((u) => ( - ); - })} + ))} +
+ + {rack.modules + .filter((module) => module.id !== draggingModuleId) + .map((module) => ( +
+ +
+ ))}
{/* Rack footer */}