-
+
{data.label}
{data.ip && (
-
+
{data.ip}
)}
@@ -68,7 +82,12 @@ export function BaseNode({ data, selected, icon: typeIcon }: BaseNodeProps) {
title={data.status}
/>
-
+
)
diff --git a/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx b/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
index c2e9de0..3f5a8ea 100644
--- a/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
+++ b/frontend/src/components/canvas/nodes/ProxmoxGroupNode.tsx
@@ -1,34 +1,46 @@
import { Handle, Position, NodeResizer, type NodeProps, type Node } from '@xyflow/react'
import { Layers } from 'lucide-react'
-import type { NodeData, NodeStatus } from '@/types'
+import type { NodeData } from '@/types'
import { resolveNodeColors } from '@/utils/nodeColors'
+import { useThemeStore } from '@/stores/themeStore'
+import { THEMES } from '@/utils/themes'
import { BaseNode } from './BaseNode'
-const STATUS_COLORS: Record
= {
- online: '#39d353',
- offline: '#f85149',
- pending: '#e3b341',
- unknown: '#8b949e',
-}
-
export function ProxmoxGroupNode(props: NodeProps>) {
const { data, selected } = props
- const colors = resolveNodeColors(data)
+
+ const activeTheme = useThemeStore((s) => s.activeTheme)
+ const theme = THEMES[activeTheme]
+ const colors = resolveNodeColors(data, activeTheme)
// Render as a regular node when container mode is disabled
if (data.container_mode === false) {
+ const proxmoxAccent = theme.colors.nodeAccents.proxmox.border
return (
<>
-
-
+
+
)
}
- const statusColor = STATUS_COLORS[data.status]
+ const statusColor = theme.colors.statusColors[data.status]
const isOnline = data.status === 'online'
const glow = colors.border
+ const proxmoxAccent = theme.colors.nodeAccents.proxmox.border
return (
<>
@@ -37,7 +49,7 @@ export function ProxmoxGroupNode(props: NodeProps>) {
minHeight={160}
isVisible={selected}
lineStyle={{ borderColor: glow, opacity: 0.6 }}
- handleStyle={{ borderColor: glow, backgroundColor: '#21262d' }}
+ handleStyle={{ borderColor: glow, backgroundColor: theme.colors.nodeCardBackground }}
/>
{/* Group border */}
@@ -56,38 +68,78 @@ export function ProxmoxGroupNode(props: NodeProps>) {
{/* Header bar */}
-
+
{data.label}
{data.ip && (
- {data.ip}
+
+ {data.ip}
+
)}
{/* Status dot */}
-
+
{/* Inner area — React Flow places children here */}
-
+
-
+
- {/* Cluster handles — left/right for same-cluster links */}
-
-
+ {/* Cluster handles */}
+
+
)
}
diff --git a/frontend/src/components/modals/ThemeModal.tsx b/frontend/src/components/modals/ThemeModal.tsx
new file mode 100644
index 0000000..23f1d6c
--- /dev/null
+++ b/frontend/src/components/modals/ThemeModal.tsx
@@ -0,0 +1,167 @@
+import { useState } from 'react'
+import { toast } from 'sonner'
+import { Check } from 'lucide-react'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import { Button } from '@/components/ui/button'
+import { THEMES, THEME_ORDER, type ThemeId } from '@/utils/themes'
+import { useThemeStore } from '@/stores/themeStore'
+import { useCanvasStore } from '@/stores/canvasStore'
+
+// Node-type accent colors to display as preview swatches
+const PREVIEW_TYPES = ['isp', 'server', 'proxmox', 'switch', 'iot'] as const
+
+interface ThemeCardProps {
+ themeId: ThemeId
+ selected: boolean
+ onClick: () => void
+}
+
+function ThemeCard({ themeId, selected, onClick }: ThemeCardProps) {
+ const preset = THEMES[themeId]
+ const c = preset.colors
+
+ return (
+
+ )
+}
+
+interface ThemeModalProps {
+ open: boolean
+ onClose: () => void
+}
+
+export function ThemeModal({ open, onClose }: ThemeModalProps) {
+ const { activeTheme, setTheme } = useThemeStore()
+ const { markUnsaved } = useCanvasStore()
+
+ // Capture the theme that was active when the modal opened
+ const [originalTheme] = useState
(activeTheme)
+ const [selected, setSelected] = useState(activeTheme)
+
+ const handleSelect = (id: ThemeId) => {
+ setSelected(id)
+ // Live-preview the selected theme on the canvas
+ setTheme(id)
+ }
+
+ const handleApply = () => {
+ setTheme(selected)
+ markUnsaved()
+ onClose()
+ toast.info('Style applied — save your canvas to make it permanent', {
+ duration: 5000,
+ })
+ }
+
+ const handleCancel = () => {
+ // Revert to the original theme
+ setTheme(originalTheme)
+ onClose()
+ }
+
+ return (
+
+ )
+}
diff --git a/frontend/src/components/panels/Sidebar.tsx b/frontend/src/components/panels/Sidebar.tsx
index cc28d41..c2e0098 100644
--- a/frontend/src/components/panels/Sidebar.tsx
+++ b/frontend/src/components/panels/Sidebar.tsx
@@ -1,5 +1,6 @@
import { useState, useCallback, useEffect, useRef } from 'react'
-import { Network, Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, Trash2, RefreshCw, Loader2, Square } from 'lucide-react'
+import { Plus, Save, ScanLine, ChevronLeft, ChevronRight, LayoutDashboard, Clock, EyeOff, Trash2, RefreshCw, Loader2, Square } from 'lucide-react'
+import { Logo } from '@/components/ui/Logo'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { useCanvasStore } from '@/stores/canvasStore'
import { scanApi } from '@/api/client'
@@ -70,13 +71,8 @@ export function Sidebar({ onAddNode, onAddGroupRect, onScan, onSave, onNodeAppro
{/* Logo */}
-
-
-
-
- {!collapsed && (
-
Homelable
- )}
+
+
{/* Views */}
diff --git a/frontend/src/components/panels/Toolbar.tsx b/frontend/src/components/panels/Toolbar.tsx
index eb65f59..ed00d7a 100644
--- a/frontend/src/components/panels/Toolbar.tsx
+++ b/frontend/src/components/panels/Toolbar.tsx
@@ -1,22 +1,28 @@
-import { Save, LayoutDashboard, Download } from 'lucide-react'
+import { Save, LayoutDashboard, Download, Palette } from 'lucide-react'
import { Button } from '@/components/ui/button'
+import { Logo } from '@/components/ui/Logo'
import { useCanvasStore } from '@/stores/canvasStore'
interface ToolbarProps {
onSave: () => void
onAutoLayout: () => void
onExport: () => void
+ onChangeStyle: () => void
}
-export function Toolbar({ onSave, onAutoLayout, onExport }: ToolbarProps) {
+export function Toolbar({ onSave, onAutoLayout, onExport, onChangeStyle }: ToolbarProps) {
const { hasUnsavedChanges } = useCanvasStore()
return (
+
+
diff --git a/frontend/src/components/ui/Logo.tsx b/frontend/src/components/ui/Logo.tsx
new file mode 100644
index 0000000..85a227b
--- /dev/null
+++ b/frontend/src/components/ui/Logo.tsx
@@ -0,0 +1,46 @@
+interface LogoProps {
+ size?: number;
+ showText?: boolean;
+ className?: string;
+}
+
+export function Logo({ size = 32, showText = true, className = '' }: LogoProps) {
+ return (
+
+
+ {showText && (
+
+ Home
+ lable
+
+ )}
+