fix(web): prevent desktop header overlap when sidebar is collapsed

[Queaxtra]

What Changed

This PR fixes the new sidebar toggle behavior on desktop so header content no longer renders underneath the macOS traffic lights / toggle area when the thread sidebar is collapsed.

It also adds the sidebar toggle interaction itself across web and desktop:

• added a first-class sidebar.toggle keybinding command
• added default mod+b shortcut support
• added an external sidebar toggle button next to thread/header content
• fixed collapsed desktop header spacing for:
  • active thread header
  • no active thread header
  • settings header

The open-sidebar layout was left unchanged.

Why

The new sidebar toggle behavior introduced a desktop layout regression: when the sidebar was collapsed, header text like the active thread title or No active thread could slide underneath the top-left window controls area.

This approach fixes that by reusing the existing sidebar open/collapsed state and applying the same safe-area inset already used by the desktop sidebar header. That keeps the fix small, predictable, and aligned with the current UI system without introducing a new store, IPC surface, or alternate layout path.

UI Changes

Before:

• When the sidebar was collapsed on desktop, the active thread title and some header text could render underneath the macOS traffic lights / toggle area.

After:

• Header content stays clear of the top-left controls area when the sidebar is collapsed.
• Open-sidebar layout remains unchanged.
• The sidebar can be toggled via both the external header button and Command+B / Ctrl+B.

Before/after screenshots included.
Video included for the sidebar toggle interaction.

Checklist

• This PR is small and focused
• I explained what changed and why
• I included before/after screenshots for any UI changes
• I included a video for animation/interaction changes

---

Note

Medium Risk
Moderate UI/input risk: changes global keyboard shortcut handling and Electron header layout, which could introduce shortcut conflicts or regressions in sidebar/drag-region spacing, but no security- or data-sensitive logic is touched.

Overview
Adds a first-class sidebar.toggle command with default mod+b, updating contracts, server defaults, docs, and tests.

Introduces a reusable SidebarToggleButton (tooltip shows the shortcut label) and wires it into chat, index, and settings headers, while fixing the sidebar trigger icon logic to reflect open/closed state on both mobile and desktop.

Fixes an Electron-only layout regression by adjusting header left padding based on sidebar open state so header content doesn’t render under the collapsed-sidebar/traffic-lights area, and hardens terminal state persistence by using a safe localStorage fallback when storage APIs are unavailable.

^{Written by Cursor Bugbot for commit 9dc0252. This will update automatically on new commits. Configure here.}

Note

Fix desktop header overlap by adding sidebar toggle button with keyboard shortcut support

• Adds a new SidebarToggleButton component that wraps the existing trigger in a tooltip showing 'Toggle sidebar' and an optional shortcut label.
• Binds Mod+B to sidebar.toggle in default keybindings and adds global keydown handling in chat routes to trigger the toggle.
• Updates ChatView, ChatHeader, and settings/index route headers to use SidebarToggleButton and adjust padding based on sidebar open state, fixing the overlap when the sidebar is collapsed.
• Removes the old SidebarTrigger from the sidebar header; toggle responsibility now lives in each consuming view.
• Fixes SidebarTrigger icon to correctly reflect open/closed state on both mobile and desktop by deriving isOpen from isMobile ? openMobile : open.

^{Macroscope summarized 9dc0252.}

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. 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.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: d47c89ba-a676-4da2-9faf-00042eefa7cf

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

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[Copilot]

Pull request overview

Adds a first-class sidebar toggle command + UI affordances, and adjusts desktop (Electron) header layout so thread/settings headers don’t slide under the macOS traffic-lights / collapsed-sidebar control area.

Changes:

• Introduces sidebar.toggle as a validated keybinding command with default mod+b and documentation.
• Adds a reusable SidebarToggleButton and wires sidebar toggling into global shortcuts + headers (chat, empty state, settings).
• Updates Electron header padding when the sidebar is collapsed to avoid overlap with the top-left window controls area.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/contracts/src/keybindings.ts	Adds sidebar.toggle to the contract-level allowed command list.
packages/contracts/src/keybindings.test.ts	Extends contract tests to cover parsing/decoding of the new command.
apps/server/src/keybindings.ts	Adds default mod+b binding for sidebar.toggle.
apps/server/src/keybindings.test.ts	Tests compilation of the new default rule.
KEYBINDINGS.md	Documents the new command and includes it in example config.
apps/web/src/keybindings.ts	Adds isSidebarToggleShortcut helper for matching sidebar.toggle.
apps/web/src/keybindings.test.ts	Adds tests for matching + label formatting for sidebar.toggle.
apps/web/src/routes/_chat.tsx	Handles sidebar.toggle in global keydown shortcut resolution.
apps/web/src/components/ui/sidebar.tsx	Updates SidebarTrigger icon state to reflect desktop vs mobile open state.
apps/web/src/components/SidebarToggleButton.tsx	New shared button component (SidebarTrigger + tooltip + shortcut label).
apps/web/src/components/chat/ChatHeader.tsx	Replaces the previous trigger with the new toggle button + tooltip label prop.
apps/web/src/components/ChatView.tsx	Adds toggle button in empty-state and adjusts Electron header padding when collapsed.
apps/web/src/routes/_chat.index.tsx	Adds toggle button and Electron collapsed padding in “No active thread” view.
apps/web/src/routes/_chat.settings.tsx	Adds toggle button and Electron collapsed padding in settings header.
apps/web/src/components/Sidebar.tsx	Removes the in-sidebar mobile trigger near the wordmark.
apps/web/src/terminalStateStore.ts	Makes persisted storage safer by falling back when localStorage is unavailable.
apps/web/src/terminalStateStore.test.ts	Avoids calling localStorage.clear() when it doesn’t exist in the test env.

Comments suppressed due to low confidence (1)

apps/web/src/components/Sidebar.tsx:1599

• SidebarTrigger was removed from the sidebar's own header/wordmark area. On mobile, the sidebar is rendered as a Sheet with showCloseButton={false} and SidebarRail is hidden below sm, so users may no longer have an in-sidebar close control (they can typically only dismiss via backdrop click / Esc). Consider reintroducing a close/toggle button inside the sidebar for the mobile sheet, or enabling the sheet close button, to preserve an explicit and accessible way to close the sidebar.

  const wordmark = (
    <div className="flex items-center gap-2">
      <Tooltip>
        <TooltipTrigger
          render={
            <div className="flex min-w-0 flex-1 items-center gap-1 ml-1 cursor-pointer">
              <T3Wordmark />

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

In the active-thread top bar header, the responsive horizontal padding for the non-Electron (web) layout was reduced from px-3 sm:px-5 to just px-3. This makes the header misalign with the rest of the chat column, which still uses sm:px-5 (e.g. messages wrapper / input bar). Consider restoring the sm:px-5 padding for the non-Electron branch while keeping the Electron-specific pl-[90px]/pl-5 logic.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.}

[juliusmarminge]

before/after pics / video pls

[Queaxtra]

Before;

After;