url/homelable
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files
backend/app/db/database.py
+3 -1
View File
@@ -20,9 +20,11 @@ class Base(DeclarativeBase):
async def init_db() -> None:
async with engine.begin() as conn:
await conn.run_sync(Base.metadata.create_all)
# Add container_mode column if not present (existing databases)
# Add columns introduced after initial schema (idempotent)
with suppress(Exception):
await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN container_mode BOOLEAN NOT NULL DEFAULT 0")
with suppress(Exception):
await conn.exec_driver_sql("ALTER TABLE nodes ADD COLUMN custom_colors JSON")
async def get_db():
backend/app/db/models.py
+1
View File
@@ -34,6 +34,7 @@ class Node(Base):
pos_y: Mapped[float] = mapped_column(Float, default=0)
parent_id: Mapped[str | None] = mapped_column(String, ForeignKey("nodes.id"))
container_mode: Mapped[bool] = mapped_column(Boolean, default=False)
custom_colors: Mapped[dict | None] = mapped_column(JSON, nullable=True)
last_seen: Mapped[datetime | None] = mapped_column(DateTime(timezone=True))
response_time_ms: Mapped[int | None] = mapped_column(Integer)
created_at: Mapped[datetime] = mapped_column(DateTime(timezone=True), default=_now)
backend/app/schemas/canvas.py
+1
View File
@@ -21,6 +21,7 @@ class NodeSave(BaseModel):
notes: str | None = None
parent_id: str | None = None
container_mode: bool = False
custom_colors: dict | None = None
pos_x: float = 0
pos_y: float = 0
backend/app/schemas/nodes.py
+2
View File
@@ -20,6 +20,7 @@ class NodeBase(BaseModel):
pos_y: float = 0
parent_id: str | None = None
container_mode: bool = False
custom_colors: dict | None = None
class NodeCreate(NodeBase):
@@ -41,6 +42,7 @@ class NodeUpdate(BaseModel):
pos_x: float | None = None
pos_y: float | None = None
container_mode: bool | None = None
custom_colors: dict | None = None
class NodeResponse(NodeBase):
frontend/src/App.tsx
+1
View File
@@ -52,6 +52,7 @@ export default function App() {
notes: n.data.notes ?? null,
parent_id: n.data.parent_id ?? null,
container_mode: n.data.container_mode ?? false,
custom_colors: n.data.custom_colors ?? null,
pos_x: n.position.x,
pos_y: n.position.y,
}))
frontend/src/components/canvas/nodes/BaseNode.tsx
+8 -7
View File
@@ -1,6 +1,7 @@
import { Handle, Position, type NodeProps, type Node } from '@xyflow/react'
import { type LucideIcon } from 'lucide-react'
import type { NodeData, NodeStatus } from '@/types'
import { resolveNodeColors } from '@/utils/nodeColors'
const STATUS_COLORS: Record<NodeStatus, string> = {
online: '#39d353',
@@ -11,10 +12,10 @@ const STATUS_COLORS: Record<NodeStatus, string> = {
interface BaseNodeProps extends NodeProps<Node<NodeData>> {
icon: LucideIcon
glowColor?: string
}
export function BaseNode({ data, selected, icon: Icon, glowColor = '#00d4ff' }: BaseNodeProps) {
export function BaseNode({ data, selected, icon: Icon }: BaseNodeProps) {
const colors = resolveNodeColors(data)
const statusColor = STATUS_COLORS[data.status]
const isOnline = data.status === 'online'
@@ -22,12 +23,12 @@ export function BaseNode({ data, selected, icon: Icon, glowColor = '#00d4ff' }:
<div
className="relative flex flex-row items-center gap-2.5 px-2.5 py-2 rounded-lg border transition-all duration-200"
style={{
background: '#21262d',
borderColor: selected ? glowColor : '#30363d',
background: colors.background,
borderColor: selected ? colors.border : '#30363d',
boxShadow: isOnline
? `0 0 10px ${glowColor}2e, 0 0 3px ${glowColor}1a`
? `0 0 10px ${colors.border}2e, 0 0 3px ${colors.border}1a`
: selected
? `0 0 8px ${glowColor}44`
? `0 0 8px ${colors.border}44`
: 'none',
opacity: data.status === 'offline' ? 0.55 : 1,
minWidth: 140,
@@ -38,7 +39,7 @@ export function BaseNode({ data, selected, icon: Icon, glowColor = '#00d4ff' }:
{/* Icon */}
<div
className="flex items-center justify-center w-7 h-7 rounded-md shrink-0"
style={{ color: isOnline ? glowColor : '#8b949e', background: '#161b22' }}
style={{ color: isOnline ? colors.icon : '#8b949e', background: '#161b22' }}
>
<Icon size={15} />
</div>
frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
+13 -12
View File
@@ -1,6 +1,7 @@
import { Handle, Position, NodeResizer, type NodeProps, type Node } from '@xyflow/react'
import { Layers } from 'lucide-react'
import type { NodeData, NodeStatus } from '@/types'
import { resolveNodeColors } from '@/utils/nodeColors'
import { BaseNode } from './BaseNode'
const STATUS_COLORS: Record<NodeStatus, string> = {
@@ -10,18 +11,18 @@ const STATUS_COLORS: Record<NodeStatus, string> = {
unknown: '#8b949e',
}
const GLOW = '#ff6e00'
export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
const { data, selected } = props
const colors = resolveNodeColors(data)
// Render as a regular node when container mode is disabled
if (data.container_mode === false) {
return <BaseNode {...props} icon={Layers} glowColor={GLOW} />
return <BaseNode {...props} icon={Layers} />
}
const statusColor = STATUS_COLORS[data.status]
const isOnline = data.status === 'online'
const glow = colors.border
return (
<>
@@ -29,36 +30,36 @@ export function ProxmoxGroupNode(props: NodeProps<Node<NodeData>>) {
minWidth={220}
minHeight={160}
isVisible={selected}
lineStyle={{ borderColor: GLOW, opacity: 0.6 }}
handleStyle={{ borderColor: GLOW, backgroundColor: '#21262d' }}
lineStyle={{ borderColor: glow, opacity: 0.6 }}
handleStyle={{ borderColor: glow, backgroundColor: '#21262d' }}
/>
{/* Group border */}
<div
className="w-full h-full rounded-xl border-2 flex flex-col overflow-hidden"
style={{
borderColor: selected ? GLOW : isOnline ? `${GLOW}66` : '#30363d',
background: isOnline ? `${GLOW}08` : '#0d111766',
borderColor: selected ? glow : isOnline ? `${glow}66` : '#30363d',
background: isOnline ? `${colors.background}cc` : `${colors.background}aa`,
boxShadow: isOnline
? `0 0 20px ${GLOW}1a, inset 0 0 40px ${GLOW}08`
? `0 0 20px ${glow}1a, inset 0 0 40px ${glow}08`
: selected
? `0 0 12px ${GLOW}33`
? `0 0 12px ${glow}33`
: 'none',
}}
>
{/* Header bar */}
<div
className="flex items-center gap-2 px-2.5 py-1.5 shrink-0"
style={{ background: isOnline ? `${GLOW}18` : '#161b2288', borderBottom: `1px solid ${isOnline ? `${GLOW}33` : '#30363d'}` }}
style={{ background: isOnline ? `${glow}18` : '#161b2288', borderBottom: `1px solid ${isOnline ? `${glow}33` : '#30363d'}` }}
>
<div
className="flex items-center justify-center w-5 h-5 rounded-md shrink-0"
style={{ color: isOnline ? GLOW : '#8b949e', background: '#161b22' }}
style={{ color: isOnline ? colors.icon : '#8b949e', background: '#161b22' }}
>
<Layers size={12} />
</div>
<div className="flex flex-col min-w-0 flex-1">
<span className="text-[11px] font-semibold leading-tight truncate" style={{ color: isOnline ? GLOW : '#c9d1d9' }}>
<span className="text-[11px] font-semibold leading-tight truncate" style={{ color: isOnline ? glow : '#c9d1d9' }}>
{data.label}
</span>
{data.ip && (
frontend/src/components/canvas/nodes/index.tsx
+11 -12
View File
@@ -8,15 +8,14 @@ import type { NodeData } from '@/types'
type N = NodeProps<Node<NodeData>>
export const IspNode = (props: N) => <BaseNode {...props} icon={Globe} glowColor="#00d4ff" />
export const RouterNode = (props: N) => <BaseNode {...props} icon={Router} glowColor="#00d4ff" />
export const SwitchNode = (props: N) => <BaseNode {...props} icon={Network} glowColor="#39d353" />
export const ServerNode = (props: N) => <BaseNode {...props} icon={Server} glowColor="#a855f7" />
export const ProxmoxNode = (props: N) => <BaseNode {...props} icon={Layers} glowColor="#ff6e00" />
export const VmNode = (props: N) => <BaseNode {...props} icon={Box} glowColor="#a855f7" />
export const LxcNode = (props: N) => <BaseNode {...props} icon={Container} glowColor="#00d4ff" />
export const NasNode = (props: N) => <BaseNode {...props} icon={HardDrive} glowColor="#39d353" />
export const IotNode = (props: N) => <BaseNode {...props} icon={Cpu} glowColor="#e3b341" />
export const ApNode = (props: N) => <BaseNode {...props} icon={Wifi} glowColor="#00d4ff" />
export const GenericNode = (props: N) => <BaseNode {...props} icon={Circle} glowColor="#8b949e" />
export const IspNode = (props: N) => <BaseNode {...props} icon={Globe} />
export const RouterNode = (props: N) => <BaseNode {...props} icon={Router} />
export const SwitchNode = (props: N) => <BaseNode {...props} icon={Network} />
export const ServerNode = (props: N) => <BaseNode {...props} icon={Server} />
export const ProxmoxNode = (props: N) => <BaseNode {...props} icon={Layers} />
export const VmNode = (props: N) => <BaseNode {...props} icon={Box} />
export const LxcNode = (props: N) => <BaseNode {...props} icon={Container} />
export const NasNode = (props: N) => <BaseNode {...props} icon={HardDrive} />
export const IotNode = (props: N) => <BaseNode {...props} icon={Cpu} />
export const ApNode = (props: N) => <BaseNode {...props} icon={Wifi} />
export const GenericNode = (props: N) => <BaseNode {...props} icon={Circle} />
frontend/src/components/modals/NodeModal.tsx
+47
View File
@@ -1,10 +1,12 @@
import { useState } from 'react'
import { RotateCcw } from 'lucide-react'
import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { NODE_TYPE_LABELS, type NodeData, type NodeType, type CheckMethod } from '@/types'
import { resolveNodeColors } from '@/utils/nodeColors'
const NODE_TYPES = Object.entries(NODE_TYPE_LABELS) as [NodeType, string][]
@@ -19,6 +21,7 @@ const DEFAULT_DATA: Partial<NodeData> = {
check_method: 'ping',
services: [],
container_mode: true,
custom_colors: undefined,
}
interface NodeModalProps {
@@ -177,6 +180,50 @@ export function NodeModal({ open, onClose, onSubmit, initial, title = 'Add Node'
</div>
)}
{/* Appearance */}
<div className="flex flex-col gap-2 col-span-2">
<div className="flex items-center justify-between">
<Label className="text-xs text-muted-foreground">Appearance</Label>
{form.custom_colors && (
<button
type="button"
onClick={() => set('custom_colors', undefined)}
className="flex items-center gap-1 text-[10px] text-muted-foreground/60 hover:text-muted-foreground transition-colors"
>
<RotateCcw size={10} /> Reset to defaults
</button>
)}
</div>
<div className="grid grid-cols-3 gap-2">
{(['border', 'background', 'icon'] as const).map((key) => {
const resolved = resolveNodeColors({ type: form.type ?? 'generic', custom_colors: form.custom_colors })
const currentValue = resolved[key]
const isCustom = !!form.custom_colors?.[key]
return (
<div key={key} className="flex flex-col gap-1 items-center">
<label
className="relative w-full h-7 rounded-md border cursor-pointer overflow-hidden transition-all"
style={{ borderColor: isCustom ? currentValue : '#30363d' }}
title={`${key.charAt(0).toUpperCase() + key.slice(1)}: ${currentValue}`}
>
<input
type="color"
value={currentValue}
onChange={(e) => set('custom_colors', { ...form.custom_colors, [key]: e.target.value })}
className="absolute inset-0 w-full h-full cursor-pointer opacity-0"
/>
<div className="w-full h-full rounded-sm" style={{ background: currentValue }} />
</label>
<span className="text-[9px] text-muted-foreground/60 capitalize">{key}</span>
</div>
)
})}
</div>
{!form.custom_colors && (
<p className="text-[10px] text-muted-foreground/50">Using default colors for {NODE_TYPE_LABELS[form.type ?? 'generic']}. Click a swatch to customize.</p>
)}
</div>
{/* Notes */}
<div className="flex flex-col gap-1.5 col-span-2">
<Label className="text-xs text-muted-foreground">Notes</Label>
frontend/src/types/index.ts
+1
View File
@@ -41,6 +41,7 @@ export interface NodeData extends Record<string, unknown> {
notes?: string
parent_id?: string
container_mode?: boolean
custom_colors?: { border?: string; background?: string; icon?: string }
}
export interface EdgeData extends Record<string, unknown> {
frontend/src/utils/__tests__/nodeColors.test.ts
+55
View File
@@ -0,0 +1,55 @@
import { describe, it, expect } from 'vitest'
import { resolveNodeColors, NODE_DEFAULT_COLORS } from '../nodeColors'
import type { NodeData } from '@/types'
function makeData(overrides: Partial<NodeData> = {}): Pick<NodeData, 'type' | 'custom_colors'> {
return { type: 'server', custom_colors: undefined, ...overrides }
}
describe('resolveNodeColors', () => {
it('returns defaults when no custom_colors set', () => {
const result = resolveNodeColors(makeData({ type: 'server' }))
expect(result).toEqual(NODE_DEFAULT_COLORS.server)
})
it('returns correct defaults for each node type', () => {
const types = Object.keys(NODE_DEFAULT_COLORS) as (keyof typeof NODE_DEFAULT_COLORS)[]
for (const type of types) {
const result = resolveNodeColors(makeData({ type }))
expect(result).toEqual(NODE_DEFAULT_COLORS[type])
}
})
it('overrides all three colors when custom_colors is fully set', () => {
const custom = { border: '#ff0000', background: '#00ff00', icon: '#0000ff' }
const result = resolveNodeColors(makeData({ type: 'server', custom_colors: custom }))
expect(result).toEqual(custom)
})
it('overrides only border when only border is set', () => {
const result = resolveNodeColors(makeData({ type: 'switch', custom_colors: { border: '#ff0000' } }))
expect(result.border).toBe('#ff0000')
expect(result.background).toBe(NODE_DEFAULT_COLORS.switch.background)
expect(result.icon).toBe(NODE_DEFAULT_COLORS.switch.icon)
})
it('overrides only background when only background is set', () => {
const result = resolveNodeColors(makeData({ type: 'router', custom_colors: { background: '#123456' } }))
expect(result.border).toBe(NODE_DEFAULT_COLORS.router.border)
expect(result.background).toBe('#123456')
expect(result.icon).toBe(NODE_DEFAULT_COLORS.router.icon)
})
it('overrides only icon when only icon is set', () => {
const result = resolveNodeColors(makeData({ type: 'proxmox', custom_colors: { icon: '#abcdef' } }))
expect(result.border).toBe(NODE_DEFAULT_COLORS.proxmox.border)
expect(result.background).toBe(NODE_DEFAULT_COLORS.proxmox.background)
expect(result.icon).toBe('#abcdef')
})
it('falls back to generic defaults for unknown type', () => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const result = resolveNodeColors({ type: 'unknown' as any, custom_colors: undefined })
expect(result).toEqual(NODE_DEFAULT_COLORS.generic)
})
})
frontend/src/utils/nodeColors.ts
+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,
}
}