From 31324aa1549fef0f53fc907d3a78408fbf736f0b Mon Sep 17 00:00:00 2001
From: chihlasm <michael@chihlas.com>
Date: Mon, 13 Apr 2026 03:57:42 +0000
Subject: [PATCH] feat: icon size picker (S/M/L) on device nodes

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../components/network/nodes/DeviceNode.tsx   |  7 ++++-
 .../network/panels/PropertiesPanel.tsx        | 26 ++++++++++++++++++-
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/network/nodes/DeviceNode.tsx b/frontend/src/components/network/nodes/DeviceNode.tsx
index ec756fd7..a1be5308 100644
--- a/frontend/src/components/network/nodes/DeviceNode.tsx
+++ b/frontend/src/components/network/nodes/DeviceNode.tsx
@@ -7,10 +7,14 @@ import { NodeTooltip, NodeTooltipTrigger, NodeTooltipContent } from '../ui/node-
 import { getDeviceRenderConfig } from './deviceRegistry'
 import type { DeviceProperties } from '@/types'
 
+export type IconSize = 'sm' | 'md' | 'lg'
+export const ICON_SIZE_PX: Record<IconSize, number> = { sm: 18, md: 28, lg: 42 }
+
 export interface DeviceNodeData {
   label: string
   deviceType: string
   category?: string
+  iconSize?: IconSize
   properties: DeviceProperties
   [key: string]: unknown
 }
@@ -31,6 +35,7 @@ function DeviceNodeComponent({ data }: NodeProps) {
   const status = (nodeData.properties?.status || 'unknown') as NodeStatus
   const ip = nodeData.properties?.ip
   const props = nodeData.properties || {}
+  const iconPx = ICON_SIZE_PX[nodeData.iconSize ?? 'md']
 
   const hasTooltipContent = props.hostname || props.ip || props.vendor || props.model || props.role || props.notes
 
@@ -40,7 +45,7 @@ function DeviceNodeComponent({ data }: NodeProps) {
         <NodeTooltipTrigger>
           <BaseNode className="min-w-[120px] group">
             <BaseNodeHeader className="flex-col gap-1 items-center py-3 px-4">
-              <Icon size={28} style={{ color }} />
+              <Icon size={iconPx} style={{ color }} />
               <BaseNodeHeaderTitle className="text-center text-xs">
                 {nodeData.label}
               </BaseNodeHeaderTitle>
diff --git a/frontend/src/components/network/panels/PropertiesPanel.tsx b/frontend/src/components/network/panels/PropertiesPanel.tsx
index bdc72c0a..4043328d 100644
--- a/frontend/src/components/network/panels/PropertiesPanel.tsx
+++ b/frontend/src/components/network/panels/PropertiesPanel.tsx
@@ -3,7 +3,7 @@ import { Trash2, Minus, Spline, GitBranch, BringToFront, SendToBack } from 'luci
 import { cn } from '@/lib/utils'
 import type { DeviceProperties, DiagramEdge } from '@/types'
 import type { Node, Edge } from '@xyflow/react'
-import type { DeviceNodeData } from '../nodes/DeviceNode'
+import type { DeviceNodeData, IconSize } from '../nodes/DeviceNode'
 
 interface PropertiesPanelProps {
   selectedNode: Node | null
@@ -272,6 +272,30 @@ export function PropertiesPanel({
           <FieldInput value={nodeData.label} onChange={handleLabelChange} placeholder="Device name" />
         </div>
 
+        {/* Icon size */}
+        <div className="flex flex-col gap-1">
+          <FieldLabel>Icon Size</FieldLabel>
+          <div className="flex gap-1">
+            {(['sm', 'md', 'lg'] as IconSize[]).map(size => {
+              const active = (nodeData.iconSize ?? 'md') === size
+              return (
+                <button
+                  key={size}
+                  onClick={() => onNodeUpdate(selectedNode!.id, { iconSize: size } as Partial<DeviceNodeData>)}
+                  className={cn(
+                    'flex flex-1 items-center justify-center rounded border py-1.5 text-[10px] font-medium uppercase transition-colors',
+                    active
+                      ? 'border-accent bg-accent/10 text-accent'
+                      : 'border-default text-muted-foreground hover:border-hover hover:text-primary',
+                  )}
+                >
+                  {size}
+                </button>
+              )
+            })}
+          </div>
+        </div>
+
         {/* Layering */}
         <div className="flex flex-col gap-1">
           <FieldLabel>Layer</FieldLabel>