feat: manage canvases with custom name and icon

Make designs (canvases) fully user-manageable: create with a chosen name
and icon, rename, change icon, and delete. Replaces the hardcoded
"New Electrical Design" button with a generic "New Canvas" flow.

- Add Design.icon column + migration that backfills legacy rows
  (electrical -> zap, others -> dashboard)
- DesignModal: name input + curated lucide icon picker (create + edit)
- Sidebar switcher gains per-canvas edit/delete; delete guards the last
  canvas and confirms
- designStore: addDesign/updateDesign/removeDesign with active reassignment
- Fix data loss on design switch: abort load when the save fails and keep
  unsaved edits; skip the save-old step when the previous canvas was deleted
- designsApi create/update carry icon; design_type kept for back-compat

Tests: backend design CRUD (icon + cascade + last-canvas guard), designStore
actions, designIcons resolver, DesignModal create/edit/validation.

ha-relevant: yes

frontend/src/utils/__tests__/designIcons.test.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest'
+import { DESIGN_ICONS, DEFAULT_DESIGN_ICON, resolveDesignIcon } from '@/utils/designIcons'
+
+describe('designIcons', () => {
+  it('exposes a non-empty, unique-keyed icon set', () => {
+    expect(DESIGN_ICONS.length).toBeGreaterThan(0)
+    const keys = DESIGN_ICONS.map((e) => e.key)
+    expect(new Set(keys).size).toBe(keys.length)
+  })
+
+  it('default icon key is part of the set', () => {
+    expect(DESIGN_ICONS.some((e) => e.key === DEFAULT_DESIGN_ICON)).toBe(true)
+  })
+
+  it('resolveDesignIcon returns the matching component for a known key', () => {
+    const entry = DESIGN_ICONS.find((e) => e.key === 'zap')!
+    expect(resolveDesignIcon('zap')).toBe(entry.icon)
+  })
+
+  it('resolveDesignIcon falls back to a component for unknown/empty keys', () => {
+    const fallback = resolveDesignIcon(undefined)
+    expect(typeof fallback).toBe('object')
+    expect(resolveDesignIcon('does-not-exist')).toBe(fallback)
+    expect(resolveDesignIcon(null)).toBe(fallback)
+    expect(resolveDesignIcon('')).toBe(fallback)
+  })
+})

frontend/src/utils/designIcons.ts

@@ -0,0 +1,44 @@
+import {
+  LayoutDashboard, Zap, Network, Server, HardDrive, Cpu, Wifi, Router,
+  Database, Cloud, Home, Globe, Lightbulb, Factory, Plug, Boxes,
+} from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+
+export interface DesignIconEntry {
+  key: string
+  label: string
+  icon: LucideIcon
+}
+
+/** Curated icon set offered when creating/editing a canvas design. Keys are
+ *  stable strings persisted on `Design.icon`. */
+export const DESIGN_ICONS: DesignIconEntry[] = [
+  { key: 'dashboard', label: 'Dashboard', icon: LayoutDashboard },
+  { key: 'network', label: 'Network', icon: Network },
+  { key: 'zap', label: 'Electrical', icon: Zap },
+  { key: 'server', label: 'Server', icon: Server },
+  { key: 'harddrive', label: 'Storage', icon: HardDrive },
+  { key: 'cpu', label: 'Compute', icon: Cpu },
+  { key: 'wifi', label: 'Wireless', icon: Wifi },
+  { key: 'router', label: 'Router', icon: Router },
+  { key: 'database', label: 'Database', icon: Database },
+  { key: 'cloud', label: 'Cloud', icon: Cloud },
+  { key: 'home', label: 'Home', icon: Home },
+  { key: 'globe', label: 'Internet', icon: Globe },
+  { key: 'lightbulb', label: 'Lighting', icon: Lightbulb },
+  { key: 'factory', label: 'Industrial', icon: Factory },
+  { key: 'plug', label: 'Power', icon: Plug },
+  { key: 'boxes', label: 'Cluster', icon: Boxes },
+]
+
+export const DEFAULT_DESIGN_ICON = 'dashboard'
+
+const ICON_MAP: Record<string, LucideIcon> = Object.fromEntries(
+  DESIGN_ICONS.map((e) => [e.key, e.icon]),
+)
+
+/** Resolve a persisted design icon key to a lucide component. Unknown/empty
+ *  keys fall back to the dashboard icon so the UI never breaks on legacy data. */
+export function resolveDesignIcon(key?: string | null): LucideIcon {
+  return (key && ICON_MAP[key]) || LayoutDashboard
+}