Sidebar

Every workspace page shares one shell: the sidebar on the left, and a header with the sidebar toggle and a breadcrumb. The sidebar has two modes. In the app it shows the workspace's pages; in settings it shows the settings pages, with a way back.

Structure

App                                  Settings
┌─────────────────────────┐          ┌─────────────────────────┐
│ A  Acme             ▾   │          │ A  Acme             ▾   │  ← WorkspaceSwitcher
│    Pro · Trial          │          │    Pro · Trial          │
├─────────────────────────┤          ├─────────────────────────┤
│ WORKSPACE               │          │ ← Back to Acme          │
│   Home                  │          │ ACCOUNT                 │
│   Documents             │          │   Profile               │
│   Knowledge bases       │  ← NavMain   Security             │  ← SettingsNav
│   Teams                 │          │ ACME                    │
│ CHAT                    │          │   General               │
│   New chat              │          │   Members               │
│   History               │          │   Billing & usage       │
│   Settings              │          │                         │
├─────────────────────────┤          ├─────────────────────────┤
│ AI credit ▓▓▓░░ $2 of $8│  ← CreditMeter                     │
│ JD  Jane Doe        ▴   │          │ JD  Jane Doe        ▴   │  ← NavUser
└─────────────────────────┘          └─────────────────────────┘

AppSidebar picks the mode from the path: anything under /dashboard/workspaces/{id}/settings shows SettingsNav.

Workspace Context

The workspace layout loads the user, their workspaces and the workspace's plan once, and provides them to the sidebar and every page:

<WorkspaceProvider user={user} workspace={workspace} workspaces={workspaces} plan={plan}>
  <SidebarProvider defaultOpen={cookieStore.get("sidebar_state")?.value !== "false"}>
    <AppSidebar />
    <SidebarInset>
      <header>
        <SidebarTrigger />
        <DynamicBreadcrumb />
      </header>
      {children}
    </SidebarInset>
  </SidebarProvider>
</WorkspaceProvider>

const { user, workspace, workspaces, plan, role, canManage, basePath } = useWorkspace();

role is "owner", "admin" or "member"; canManage is true for the owner and admins. The provider also remembers the workspace in a last_workspace cookie, which /dashboard uses to open it next time. The sidebar's open or collapsed state is read from its cookie on the server, so it doesn't jump on load.

Workspace Menu

WorkspaceSwitcher shows the workspace and its plan ("Pro · Trial"). Its menu:

• Settings, Invite & manage members (just Members for members), Billing & usage: billing is per workspace, so it's here and not in the user menu;
• Switch workspace: every workspace, with a check on the current one, and archived ones in their own group;
• Create workspace: a dialog asking for a name, then opens the new workspace.

Credit Meter

CreditMeter shows the AI credit used against the period's credit, from the plan. It turns amber from 80% and red with "Credit used up · Upgrade" at the limit, and opens Billing & usage. It's hidden while the sidebar is collapsed and in settings.

User Menu

NavUser shows your name and email, with:

• Account settings and Password & security;
• Theme: System, Light or Dark;
• Homepage, in a new tab;
• Sign out, which returns to the sign-in page.

Breadcrumb

DynamicBreadcrumb reads the path within the workspace: Acme / Settings / Members, Acme / Chat / Conversation. The first crumb is the workspace's name and links to its home; IDs are named for what they are, never shown raw.

Mobile

Below the md breakpoint the sidebar opens as a sheet from the header's toggle, in both modes.