Skip to content

feat: multi-project dashboard with autosave indicators#79

Open
MrZang101 wants to merge 3 commits intoshrimbly:developfrom
MrZang101:feature/project-dashboard
Open

feat: multi-project dashboard with autosave indicators#79
MrZang101 wants to merge 3 commits intoshrimbly:developfrom
MrZang101:feature/project-dashboard

Conversation

@MrZang101
Copy link

Summary

  • Multi-project dashboard — full-screen overlay replacing the old WelcomeModal/quickstart, showing all saved projects with the ability to open, create, delete, and switch between them
  • Rich project cards — each card shows project name, workflow type badge (Image Gen, Video, 3D, Audio, LLM), node type pills with icons, primary model, node/edge counts, cost, and relative time
  • Dashboard access from anywhere — grid icon in the header + floating "Projects" button on the canvas bottom-left
  • Autosave visual indicators — green dot when auto-save is active, yellow pulsing dot while saving
  • New API route /api/workflow-load to load workflow JSON from disk by path (enables opening projects from the dashboard)
  • Extended WorkflowSaveConfig with createdAt, updatedAt, nodeCount, edgeCount, nodeTypeSummary, primaryModel metadata — all computed automatically on each save

Files changed (8 files, +832 lines)

File Change
src/types/workflow.ts Extended WorkflowSaveConfig with dashboard metadata fields
src/store/utils/localStorage.ts Added deleteSaveConfig, getAllProjectsForDashboard, DashboardProject interface
src/app/api/workflow-load/route.ts New — POST endpoint to load workflow from disk
src/store/workflowStore.ts Added showDashboard, openProject, deleteProject state/actions; enriched save metadata
src/components/dashboard/ProjectCard.tsx New — Rich project card with type badges, node pills, metadata
src/components/dashboard/ProjectDashboard.tsx New — Full dashboard overlay (left sidebar + project list + actions)
src/components/WorkflowCanvas.tsx Replaced WelcomeModal with ProjectDashboard; added floating Projects button
src/components/Header.tsx Added dashboard button in header; autosave status indicators

Test plan

  • Open app — dashboard should appear instead of old quickstart
  • Create a new project via "New Project" button — verify it saves and appears in dashboard
  • Click the grid icon in header — dashboard opens showing the project
  • Click the floating "Projects" button on canvas — same result
  • Create a second project — both appear sorted by recency
  • Click a project card — loads the workflow
  • Delete a project from dashboard — removed from list
  • Reload page — projects persist across sessions
  • Verify green dot appears next to save time (auto-save indicator)
  • Trigger a save — yellow pulsing dot appears briefly
  • Save a project with generate nodes — verify node type pills and model name appear on the card

🤖 Generated with Claude Code

MrZang101 and others added 3 commits February 21, 2026 19:48
Adds a project dashboard overlay that shows all saved projects with the ability
to open, create, delete, and switch between them. Replaces the old WelcomeModal
as the initial view.

- Extend WorkflowSaveConfig with createdAt, updatedAt, nodeCount, edgeCount
- Add deleteSaveConfig and getAllProjectsForDashboard localStorage helpers
- Create /api/workflow-load POST route to load workflow JSON from disk
- Add showDashboard state, openProject, deleteProject to Zustand store
- Create ProjectCard and ProjectDashboard components
- Wire dashboard into WorkflowCanvas (replaces quickstart) and Header (grid icon)

Co-Authored-By: Claude Opus 4.6 <[email protected]>
- Widen dashboard to max-w-5xl with more spacious padding and typography
- Add nodeTypeSummary and primaryModel to WorkflowSaveConfig, computed at save time
- Show node type pills (Generate, Video, LLM, etc.) with icons on project cards
- Derive workflow type badge (Image Gen, Video, 3D, Audio, LLM) from node composition
- Show primary model, edge count, and cost in card meta row
- Add project stats panel (total projects/nodes) in left sidebar
- Highlight New Project button with blue accent color
- Add "Back to project" close button with return arrow icon
- Bigger empty state with icon box and helpful text

Co-Authored-By: Claude Opus 4.6 <[email protected]>
- Show green dot next to save time when auto-save is enabled
- Show yellow pulsing dot while actively saving
- Add floating "Projects" button at bottom-left of canvas for quick
  access to dashboard without going to the header

Co-Authored-By: Claude Opus 4.6 <[email protected]>
@coderabbitai
Copy link

coderabbitai bot commented Feb 21, 2026

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.


Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@shrimbly
Copy link
Owner

Hey @MrZang101 - if you're adding new UI changes, could you please include screenshots of the changes? Just saves me a bit of time

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants