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
2026-06-02 15:47:57 +02:00
parent eb7b0c6d38
commit 12d527aad6
15 changed files with 693 additions and 42 deletions
@@ -0,0 +1,131 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { useDesignStore } from '@/stores/designStore'
+import type { Design } from '@/types'
+
+function design(id: string, type: Design['design_type'] = 'network', name = id): Design {
+  return { id, name, design_type: type, created_at: '', updated_at: '' }
+}
+
+describe('designStore', () => {
+  beforeEach(() => {
+    useDesignStore.setState({ designs: [], activeDesignId: null, activeDesignType: null, loaded: false })
+  })
+
+  it('starts empty and not loaded', () => {
+    const s = useDesignStore.getState()
+    expect(s.designs).toEqual([])
+    expect(s.activeDesignId).toBeNull()
+    expect(s.activeDesignType).toBeNull()
+    expect(s.loaded).toBe(false)
+  })
+
+  it('setDesigns selects the first design as active and marks loaded', () => {
+    const a = design('a', 'network')
+    const b = design('b', 'electrical')
+    useDesignStore.getState().setDesigns([a, b])
+    const s = useDesignStore.getState()
+    expect(s.designs).toHaveLength(2)
+    expect(s.activeDesignId).toBe('a')
+    expect(s.activeDesignType).toBe('network')
+    expect(s.loaded).toBe(true)
+  })
+
+  it('setDesigns preserves the active design when it is still present', () => {
+    useDesignStore.getState().setDesigns([design('a'), design('b', 'electrical')])
+    useDesignStore.getState().setActiveDesign('b')
+    // Re-list (e.g. after creating another design) — active id must not jump back to first.
+    useDesignStore.getState().setDesigns([design('a'), design('b', 'electrical'), design('c')])
+    const s = useDesignStore.getState()
+    expect(s.activeDesignId).toBe('b')
+    expect(s.activeDesignType).toBe('electrical')
+  })
+
+  it('setDesigns falls back to first when the active design was removed', () => {
+    useDesignStore.getState().setDesigns([design('a'), design('b', 'electrical')])
+    useDesignStore.getState().setActiveDesign('b')
+    useDesignStore.getState().setDesigns([design('a')]) // 'b' deleted
+    const s = useDesignStore.getState()
+    expect(s.activeDesignId).toBe('a')
+    expect(s.activeDesignType).toBe('network')
+  })
+
+  it('setDesigns with an empty list clears the active selection', () => {
+    useDesignStore.getState().setDesigns([design('a')])
+    useDesignStore.getState().setDesigns([])
+    const s = useDesignStore.getState()
+    expect(s.activeDesignId).toBeNull()
+    expect(s.activeDesignType).toBeNull()
+    expect(s.loaded).toBe(true)
+  })
+
+  it('setActiveDesign updates id and resolves type', () => {
+    useDesignStore.getState().setDesigns([design('a'), design('b', 'electrical')])
+    useDesignStore.getState().setActiveDesign('b')
+    const s = useDesignStore.getState()
+    expect(s.activeDesignId).toBe('b')
+    expect(s.activeDesignType).toBe('electrical')
+  })
+
+  it('setActiveDesign with an unknown id sets a null type', () => {
+    useDesignStore.getState().setDesigns([design('a')])
+    useDesignStore.getState().setActiveDesign('missing')
+    const s = useDesignStore.getState()
+    expect(s.activeDesignId).toBe('missing')
+    expect(s.activeDesignType).toBeNull()
+  })
+
+  it('getActiveDesign returns the active design or null', () => {
+    expect(useDesignStore.getState().getActiveDesign()).toBeNull()
+    const b = design('b', 'electrical')
+    useDesignStore.getState().setDesigns([design('a'), b])
+    useDesignStore.getState().setActiveDesign('b')
+    expect(useDesignStore.getState().getActiveDesign()).toEqual(b)
+  })
+
+  it('addDesign appends and makes the new design active', () => {
+    useDesignStore.getState().setDesigns([design('a')])
+    const b = design('b', 'electrical', 'Power')
+    useDesignStore.getState().addDesign(b)
+    const s = useDesignStore.getState()
+    expect(s.designs.map((d) => d.id)).toEqual(['a', 'b'])
+    expect(s.activeDesignId).toBe('b')
+    expect(s.activeDesignType).toBe('electrical')
+  })
+
+  it('updateDesign patches name and icon in place without touching others', () => {
+    useDesignStore.getState().setDesigns([design('a'), design('b')])
+    useDesignStore.getState().updateDesign('a', { name: 'Renamed', icon: 'server' })
+    const designs = useDesignStore.getState().designs
+    expect(designs.find((d) => d.id === 'a')).toMatchObject({ name: 'Renamed', icon: 'server' })
+    expect(designs.find((d) => d.id === 'b')!.name).toBe('b')
+  })
+
+  it('removeDesign drops a non-active design and keeps the active one', () => {
+    useDesignStore.getState().setDesigns([design('a'), design('b')])
+    useDesignStore.getState().setActiveDesign('a')
+    useDesignStore.getState().removeDesign('b')
+    const s = useDesignStore.getState()
+    expect(s.designs.map((d) => d.id)).toEqual(['a'])
+    expect(s.activeDesignId).toBe('a')
+  })
+
+  it('removeDesign reassigns active to the first remaining when the active is removed', () => {
+    useDesignStore.getState().setDesigns([design('a'), design('b', 'electrical')])
+    useDesignStore.getState().setActiveDesign('a')
+    useDesignStore.getState().removeDesign('a')
+    const s = useDesignStore.getState()
+    expect(s.designs.map((d) => d.id)).toEqual(['b'])
+    expect(s.activeDesignId).toBe('b')
+    expect(s.activeDesignType).toBe('electrical')
+  })
+
+  it('removeDesign clears active when the last design is removed', () => {
+    useDesignStore.getState().setDesigns([design('a')])
+    useDesignStore.getState().setActiveDesign('a')
+    useDesignStore.getState().removeDesign('a')
+    const s = useDesignStore.getState()
+    expect(s.designs).toEqual([])
+    expect(s.activeDesignId).toBeNull()
+    expect(s.activeDesignType).toBeNull()
+  })
+})
@@ -9,6 +9,12 @@ interface DesignState {
  setDesigns: (designs: Design[]) => void
  setActiveDesign: (id: string) => void
  getActiveDesign: () => Design | null
+  /** Append a new design and make it active. */
+  addDesign: (design: Design) => void
+  /** Patch an existing design in place (name/icon edits). */
+  updateDesign: (id: string, patch: Partial<Pick<Design, 'name' | 'icon'>>) => void
+  /** Remove a design; if it was active, fall back to the first remaining one. */
+  removeDesign: (id: string) => void
 }

 export const useDesignStore = create<DesignState>((set, get) => ({
@@ -39,4 +45,28 @@ export const useDesignStore = create<DesignState>((set, get) => ({
    const { designs, activeDesignId } = get()
    return designs.find((d) => d.id === activeDesignId) ?? null
  },
+
+  addDesign: (design) =>
+    set((state) => ({
+      designs: [...state.designs, design],
+      activeDesignId: design.id,
+      activeDesignType: design.design_type,
+    })),
+
+  updateDesign: (id, patch) =>
+    set((state) => ({
+      designs: state.designs.map((d) => (d.id === id ? { ...d, ...patch } : d)),
+    })),
+
+  removeDesign: (id) =>
+    set((state) => {
+      const designs = state.designs.filter((d) => d.id !== id)
+      if (state.activeDesignId !== id) return { designs }
+      const next = designs[0] ?? null
+      return {
+        designs,
+        activeDesignId: next?.id ?? null,
+        activeDesignType: next?.design_type ?? null,
+      }
+    }),
 }))