feat: per-node custom color styling (border, background, icon)

- Add resolveNodeColors() utility merging type defaults with per-node overrides
- Default colors per node type (cyan=isp/router/lxc/ap, green=switch/nas,
  purple=server/vm, orange=proxmox, amber=iot, gray=generic)
- Remove glowColor prop from BaseNode — colors now come from node data
- ProxmoxGroupNode uses resolveNodeColors for group border/header/icon
- NodeModal: Appearance section with 3 color swatches (border, background, icon)
  — click swatch to open native color picker; Reset to defaults button
- custom_colors persisted as JSON in DB (backend model + schemas + migration)
- 7 new unit tests for resolveNodeColors covering all node types + partial overrides
This commit is contained in:
Pouzor
2026-03-07 14:31:05 +01:00
parent 0fe3c6390a
commit 37c963cf96
12 changed files with 174 additions and 32 deletions
+31
View File
@@ -0,0 +1,31 @@
import type { NodeData, NodeType } from '@/types'
export interface NodeColors {
border: string
background: string
icon: string
}
export const NODE_DEFAULT_COLORS: Record<NodeType, NodeColors> = {
isp: { border: '#00d4ff', background: '#21262d', icon: '#00d4ff' },
router: { border: '#00d4ff', background: '#21262d', icon: '#00d4ff' },
switch: { border: '#39d353', background: '#21262d', icon: '#39d353' },
server: { border: '#a855f7', background: '#21262d', icon: '#a855f7' },
proxmox: { border: '#ff6e00', background: '#21262d', icon: '#ff6e00' },
vm: { border: '#a855f7', background: '#21262d', icon: '#a855f7' },
lxc: { border: '#00d4ff', background: '#21262d', icon: '#00d4ff' },
nas: { border: '#39d353', background: '#21262d', icon: '#39d353' },
iot: { border: '#e3b341', background: '#21262d', icon: '#e3b341' },
ap: { border: '#00d4ff', background: '#21262d', icon: '#00d4ff' },
generic: { border: '#8b949e', background: '#21262d', icon: '#8b949e' },
}
export function resolveNodeColors(data: Pick<NodeData, 'type' | 'custom_colors'>): NodeColors {
const defaults = NODE_DEFAULT_COLORS[data.type] ?? NODE_DEFAULT_COLORS.generic
const custom = data.custom_colors
return {
border: custom?.border ?? defaults.border,
background: custom?.background ?? defaults.background,
icon: custom?.icon ?? defaults.icon,
}
}