Group tabs for workspaces

[saddlepaddle]

Description

Related Issues

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

Screenshots (if applicable)

Additional Notes

Summary by CodeRabbit

Release Notes

New Features

• Projects now display with assigned colors for visual distinction
• Reorder projects by dragging their headers in the workspace tab bar
• Workspaces are now grouped by parent project with color-coded headers
• Collapse/expand workspace groups to manage tab visibility
• Drag-and-drop reordering of workspaces within their project groups

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

This PR introduces per-project workspace grouping and ordering via tabOrder fields, adds project color assignment, creates new workspace group UI components with drag-and-drop reordering, and refactors workspace data querying to return hierarchical grouped structures instead of flat lists.

Changes

Cohort / File(s)	Summary
DB Schema Updates apps/desktop/src/main/lib/db/schemas.ts	Added color: string and tabOrder: number | null fields to Project interface; renamed Workspace order field to tabOrder
Projects Router & Color Utilities apps/desktop/src/lib/trpc/routers/projects/projects.ts, apps/desktop/src/lib/trpc/routers/projects/utils/colors/colors.ts, apps/desktop/src/lib/trpc/routers/projects/utils/colors/index.ts	Implemented reorder procedure for projects, added assignRandomColor() utility to select random Tailwind color, assigned colors and null tabOrder on new project creation
Workspaces Router apps/desktop/src/lib/trpc/routers/workspaces/workspaces.ts	Added getAllGrouped query returning workspaces grouped by project with sorted output; refactored reorder to accept projectId for per-project scope; updated create/delete/getAll to use tabOrder and manage project tabOrder initialization/cleanup
React Query Hooks apps/desktop/src/renderer/react-query/projects/useReorderProjects.ts, apps/desktop/src/renderer/react-query/projects/index.ts, apps/desktop/src/renderer/react-query/workspaces/useReorderWorkspaces.ts	Created useReorderProjects hook; updated useReorderWorkspaces to invalidate getAllGrouped instead of getAll on mutation success
Workspace Group Components apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroup.tsx, apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx	Added WorkspaceGroup component rendering collapsible project groups with workspaces; added WorkspaceGroupHeader with drag-and-drop reordering of project groups via useReorderProjects
Workspace Item & Tab Refactor apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx, apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx	Updated WorkspaceItem to include projectId in drag payload and reorder logic, changed activation from onClick to onMouseDown; refactored WorkspaceTabs to use getAllGrouped, render via WorkspaceGroup, and traverse flattened workspace list for keyboard navigation

Sequence Diagram(s)

sequenceDiagram
    actor User
    participant UI as TopBar/Tabs
    participant Hook as useReorderProjects
    participant Mutation as TRPC projects.reorder
    participant DB as Database
    participant Query as workspaces.getAllGrouped
    
    User->>UI: Drag project group header
    UI->>Hook: reorderProjects.mutate({ fromIndex, toIndex })
    Hook->>Mutation: Execute reorder procedure
    Mutation->>DB: Update tabOrder for affected projects
    DB-->>Mutation: Success
    Mutation-->>Hook: { success: true }
    Hook->>Query: Invalidate getAllGrouped cache
    Query->>DB: Refetch grouped workspaces
    DB-->>Query: Return grouped & sorted data
    Query-->>UI: Update workspace groups
    UI-->>User: Display reordered groups

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Areas requiring extra attention:

• Workspaces router refactoring — dense logic changes across create, delete, getAll, getAllGrouped, and reorder procedures; interaction between project and workspace tabOrder management needs validation
• WorkspaceGroupHeader drag-and-drop — reorder mutation triggered during hover with optimistic index updates; ensure drag semantics and mutation boundaries are correct
• WorkspaceTabs keyboard navigation — refactored hotkey logic now operates over flattened allWorkspaces list derived from grouped data; verify left/right navigation still traverses correctly
• Data consistency — project tabOrder nullification on last workspace deletion and initialization on first workspace creation should be verified against edge cases
• Component state management — WorkspaceGroup collapse state and interaction with onWorkspaceHover callbacks across group boundaries

Possibly related PRs

• PR #112: Direct code overlap in projects/workspaces routers, reorder procedures, and shared schema field additions for ordering/color
• PR #113: Modifies projects router and project creation flow to handle new project initialization patterns
• PR #111: Updates workspace tab UI drag-and-drop behavior in the same TopBar components

Poem

🐰 Projects now group like clover in spring,
With colors assigned and tabOrder to bring,
Drag-drop the groups—watch them shuffle and sway,
Workspaces nested in each project's own way! 🌈✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch group-tabs-for-workspaces

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9392f9c and dbbcc1f.

📒 Files selected for processing (12)

• apps/desktop/src/lib/trpc/routers/projects/projects.ts (3 hunks)
• apps/desktop/src/lib/trpc/routers/projects/utils/colors/colors.ts (1 hunks)
• apps/desktop/src/lib/trpc/routers/projects/utils/colors/index.ts (1 hunks)
• apps/desktop/src/lib/trpc/routers/workspaces/workspaces.ts (4 hunks)
• apps/desktop/src/main/lib/db/schemas.ts (1 hunks)
• apps/desktop/src/renderer/react-query/projects/index.ts (1 hunks)
• apps/desktop/src/renderer/react-query/projects/useReorderProjects.ts (1 hunks)
• apps/desktop/src/renderer/react-query/workspaces/useReorderWorkspaces.ts (2 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroup.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceGroupHeader.tsx (1 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/WorkspaceItem.tsx (4 hunks)
• apps/desktop/src/renderer/screens/main/components/TopBar/WorkspaceTabs/index.tsx (4 hunks)

---

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