rack-planner/client/src/components/rack/DevicePalette.tsx

import { useDraggable } from '@dnd-kit/core';
import type { ModuleType } from '../../types';
import {
  MODULE_TYPE_LABELS,
  MODULE_TYPE_COLORS,
  MODULE_U_DEFAULTS,
  MODULE_PORT_DEFAULTS,
} from '../../lib/constants';
import { cn } from '../../lib/utils';

const ALL_TYPES: ModuleType[] = [
  'SWITCH', 'AGGREGATE_SWITCH', 'ROUTER', 'FIREWALL', 'PATCH_PANEL',
  'MODEM', 'SERVER', 'NAS', 'PDU', 'AP', 'BLANK', 'OTHER',
];

function PaletteItem({ type }: { type: ModuleType }) {
  const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
    id: `palette-${type}`,
    data: { type },
  });

  const colors = MODULE_TYPE_COLORS[type];

  return (
    <div
      ref={setNodeRef}
      {...listeners}
      {...attributes}
      className={cn(
        'flex items-center gap-2 px-2 py-1.5 rounded border text-left w-full cursor-grab active:cursor-grabbing transition-all select-none',
        colors.bg,
        colors.border,
        isDragging ? 'opacity-40' : 'hover:brightness-125'
      )}
      aria-label={`Drag ${MODULE_TYPE_LABELS[type]} onto a rack slot`}
    >
      <div className={cn('w-2 h-2 rounded-sm shrink-0 brightness-150', colors.bg)} />
      <div className="min-w-0 flex-1">
        <div className="text-xs font-medium text-white truncate">
          {MODULE_TYPE_LABELS[type]}
        </div>
        <div className="text-[10px] text-slate-400">
          {MODULE_U_DEFAULTS[type]}U · {MODULE_PORT_DEFAULTS[type]} ports
        </div>
      </div>
    </div>
  );
}

export function DevicePalette() {
  return (
    <aside className="w-44 shrink-0 flex flex-col bg-slate-800 border-r border-slate-700 overflow-y-auto">
      <div className="px-3 py-2 border-b border-slate-700">
        <p className="text-xs font-semibold text-slate-400 uppercase tracking-wider">Devices</p>
        <p className="text-[10px] text-slate-600 mt-0.5">Drag onto a slot or click a slot</p>
      </div>
      <div className="flex flex-col gap-1 p-2">
        {ALL_TYPES.map((type) => (
          <PaletteItem key={type} type={type} />
        ))}
      </div>
    </aside>
  );
}