Implement project management (CRUD with persistence)

[espetro]

TL;DR

Replace the current single-project limitation with full CRUD project management. Users can create, rename, open, and delete projects with persistent SQLite storage.

User Story

As a user, I want to save my canvas state and load it later, so I don't lose work when I close the browser tab.

Scope

• Project list view (sidebar or dedicated page)
• Create new project
• Open existing project
• Rename project
• Delete project (with confirmation)
• Project switching without losing state
• Auto-save every 2 minutes

Tradeoffs / Optionality

Sidebar vs Dedicated Page

Sidebar (recommended):

• Pros: Always visible, quick switching, feels like Figma/VS Code
• Cons: Takes canvas real estate, needs collapsible design

Dedicated Page:

• Pros: Full project management (thumbnails, search, sorting)
• Cons: Context switch away from canvas, slower workflow

Decision: Start with sidebar for MVP, add dedicated dashboard later.

Auto-Save Strategy

Option A: Timer-based (every 2 min)

• Simple, predictable
• May save mid-generation

Option B: Event-based (after generation completes, on navigation)

• More efficient
• Risk of losing work on crash

Decision: Timer-based with debounce (500ms) and explicit "Save" button for peace of mind.

Technical Considerations

• Database: SQLite + Drizzle ORM (see Implement SQLite database layer with Drizzle ORM #10)
• Schema:

  projects: id, name, createdAt, updatedAt, thumbnailBlob
  designs: id, projectId, position, html, width, height, prompt, createdAt

• State Management: Zustand store with hydration from DB on project switch
• Project = Root Frame: In current architecture, a project is the container for all canvas frames
• Migration: Current localStorage data should be importable as "Untitled Project"

References

• Original spec: docs/prd-v2.md Feature 3 (Projects Management)
• Related: Database implementation (Implement SQLite database layer with Drizzle ORM #10)