fix(web): render empty-state in sidebar when no projects configured - #1549

Greptile Summary

This PR replaces the null early-return in ProjectSidebar when projects.length === 0 with a new ProjectSidebarEmpty component that renders the sidebar chrome (header, + button, ThemeToggle footer) and a one-line explainer, giving fresh-install users a clear call to action. Three new tests cover the empty-state render, modal interaction, and footer toggle.

Confidence Score: 5/5

Safe to merge — the change is narrowly scoped to the zero-projects path, leaves ProjectSidebarInner untouched, and is well-covered by the updated test suite.

The only finding is a P2 style suggestion (missing aria-hidden on a decorative SVG inside a fully labelled button). No logic errors, data issues, or security concerns were identified.

No files require special attention.

Important Files Changed

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["ProjectSidebar (props)"] --> B{projects.length === 0?}
    B -- Yes --> C["ProjectSidebarEmpty"]
    B -- No --> D["ProjectSidebarInner"]
    C --> E["Header: 'Projects' label + '+' button"]
    C --> F["Body: 'No projects yet' text"]
    C --> G["Footer: ThemeToggle"]
    C --> H["AddProjectModal (controlled by addProjectOpen state)"]
    E -->|click '+'| H

_{Reviews (1): Last reviewed commit: "fix(web): render empty-state in sidebar ..." | Re-trigger Greptile}

Test Coverage Report

Changed files have no coverage data (not instrumented or no tests ran).

Review finding

[P1] Empty sidebar never renders on fresh installs

The new ProjectSidebarEmpty path is still unreachable from the main dashboard because the parent only mounts ProjectSidebar when projects.length >= 1. With zero projects, the dashboard skips the sidebar entirely, so users still see no sidebar chrome and no + button. The component-level tests pass because they render ProjectSidebar directly; add/update a dashboard-level test and let the dashboard mount the sidebar for the zero-project case.

Location: packages/web/src/components/Dashboard.tsx:200

P2 Honor collapsed state in empty sidebar

Dashboard now always renders ProjectSidebar and passes collapsed={sidebarCollapsed}, but the zero-project branch drops those props and always renders a full-width .project-sidebar. On a fresh install, clicking the header sidebar toggle applies .dashboard-shell--sidebar-collapsed so the wrapper shrinks to 44px, while the child sidebar remains 224px wide and can overlap the main dashboard instead of collapsing like the populated sidebar path. The empty branch should either render a collapsed variant when props.collapsed is true or avoid enabling the desktop collapse path for the zero-project sidebar.

Respect collapsed state in empty sidebar

Dashboard now always renders the sidebar toggle and passes collapsed={sidebarCollapsed}, including when projects is empty. But this branch discards the prop and always renders the full-width empty sidebar. On a fresh install, clicking the desktop sidebar toggle shrinks only .sidebar-wrapper to 44px while the inner .project-sidebar remains 224px, so the empty-state sidebar protrudes/overlaps the main content instead of collapsing like the populated path. Pass collapsed into the empty component or render a collapsed empty rail for this state.