Skip to content

[Feature] Collapsible sidebar with persistent state #586

Description

@brendandebeasi

Summary

The dashboard sidebar is a fixed 220px wide and cannot be collapsed. On smaller displays, or when focused on a single channel/workbench task, that's meaningful horizontal space that can't be reclaimed. Most peer dashboards (VS Code, Linear, Discord) allow this and persist the state.

Current state

  • interface/src/components/Sidebar.tsx:276<aside className="flex w-[220px] shrink-0 flex-col bg-sidebar"> (hardcoded width)
  • No collapse state, no toggle, no localStorage interaction in Sidebar.tsx
  • The per-agent expand/collapse that exists (line 247) is unrelated — it controls the agent sub-nav accordion, not the sidebar itself

Proposed change

  • Toggle button in the sidebar header + keyboard shortcut (⌘\ / Ctrl+\ matches VS Code convention)
  • Two states: expanded (current 220px) and collapsed (icon-only rail, ~48px)
  • Persist via localStorage["spacebot-sidebar-collapsed"]
  • Smooth width transition; main content reflows
  • On viewport <640px, auto-collapse and overlay-on-open instead of pushing content

Open questions

  • Should collapse hide the agent accordion entirely, or show just the agent avatars in the rail (clickable to overlay-expand)?
  • Same shortcut key on macOS vs Windows/Linux, or platform-specific?

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions