fix(web): sidebar toggle and traffic light clearance for macOS Electron

[mosobande]

Context

The Electron app uses an offcanvas sidebar that can be fully collapsed. When collapsed, the main content area stretches to the window edge. On macOS, the traffic light buttons (close/minimise/maximise) are pinned at ~0–80px from the top-left — directly overlapping the drag-region headers in the main panel.

There were two compounding issues:

1. No sidebar toggle in Electron headers — the non-web headers rendered for the thread index, settings page, and ChatView empty state did not include a SidebarTrigger. Once the sidebar was collapsed there was no way to reopen it from those pages without a keyboard shortcut.

2. Fixed px-5 left padding — the symmetric padding placed header text and buttons directly under the traffic lights when the sidebar was closed.

The regular thread view (ChatHeader) already had SidebarTrigger and the sidebar's own header already used pl-[82px] correctly — the Electron-specific fallback headers were just missed.

Fix

• Add SidebarTrigger to all three Electron drag-region headers
• Use useSidebar() to apply pl-[82px] only when the sidebar is collapsed, falling back to normal padding when open

// Before — no toggle, always 20px left padding
<div className="drag-region ... px-5">
  <span>No active thread</span>
</div>

// After — toggle present, padding clears traffic lights only when needed
<div className={cn("drag-region ... pr-5", sidebarOpen ? "pl-5" : "pl-[82px]")}>
  <SidebarTrigger className="mr-3 size-7 shrink-0" />
  <span>No active thread</span>
</div>

Files Changed

File	Change
apps/web/src/routes/_chat.index.tsx	Add SidebarTrigger + conditional padding
apps/web/src/routes/_chat.settings.tsx	Add SidebarTrigger + conditional padding
apps/web/src/components/ChatView.tsx	Add SidebarTrigger to empty state + conditional padding on both empty state and active thread headers

Testing

In Electron on macOS:

• Collapse sidebar → header text/buttons clear the traffic lights on all affected pages; toggle button is visible
• Click toggle → sidebar reopens from any page
• Open sidebar → normal padding applies, no excessive gap

[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: 331e5d79-8f71-4e93-9355-deed343aaa9c

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
• Post copyable unit tests in a comment

Tip

Try Coding Plans. Let us write the prompt for your AI agent so you can ship faster (with fewer bugs).
Share your feedback on Discord.

---

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.}

[t3dotgg]

Pics please

[t3dotgg]

Closing until you add screenshots.