From c781db3313d5357b04789a0dcddf0c2b12c9ed56 Mon Sep 17 00:00:00 2001
From: Val Alexander <bunsthedev@gmail.com>
Date: Thu, 2 Apr 2026 16:27:58 -0500
Subject: [PATCH] Show sidebar trigger when sidebar is collapsed

- Keep the trigger visible on desktop only when the sidebar is closed
- Remove page-level mobile-only trigger hiding for chat, settings, and review shells
---
 apps/web/src/components/ChatHomeEmptyState.tsx         |  7 ++++---
 apps/web/src/components/Sidebar.tsx                    |  2 +-
 apps/web/src/components/chat/ChatHeader.tsx            |  2 +-
 apps/web/src/components/review/ProjectSubpageShell.tsx |  2 +-
 apps/web/src/components/ui/sidebar.tsx                 | 10 ++++++++--
 apps/web/src/routes/_chat.settings.tsx                 |  2 +-
 6 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/apps/web/src/components/ChatHomeEmptyState.tsx b/apps/web/src/components/ChatHomeEmptyState.tsx
index 54ca6b8bb..5a38a583c 100644
--- a/apps/web/src/components/ChatHomeEmptyState.tsx
+++ b/apps/web/src/components/ChatHomeEmptyState.tsx
@@ -23,7 +23,7 @@ import {
   EmptyTitle,
 } from "./ui/empty";
 import { Button } from "./ui/button";
-import { SidebarTrigger } from "./ui/sidebar";
+import { SidebarTrigger, useSidebar } from "./ui/sidebar";
 import { toastManager } from "./ui/toast";
 
 export function ChatHomeEmptyState() {
@@ -36,6 +36,7 @@ export function ChatHomeEmptyState() {
   const threads = useStore((store) => store.threads);
   const { handleNewThread } = useHandleNewThread();
   const [isOpeningProject, setIsOpeningProject] = useState(false);
+  const { open: sidebarOpen, isMobile: sidebarIsMobile } = useSidebar();
 
   const latestProject = useMemo(
     () => sortProjectsForSidebar(projects, threads, appSettings.sidebarProjectSortOrder)[0] ?? null,
@@ -118,8 +119,8 @@ export function ChatHomeEmptyState() {
 
   return (
     <div className="flex min-h-0 min-w-0 flex-1 flex-col bg-background">
-      {!isElectron && (
-        <header className="border-b border-border px-3 py-2 md:hidden">
+      {!isElectron && (sidebarIsMobile || !sidebarOpen) && (
+        <header className="border-b border-border px-3 py-2">
           <div className="flex items-center gap-2">
             <SidebarTrigger className="size-7 shrink-0" />
             <span className="text-sm font-medium text-foreground">Home</span>
diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 759e4e812..dcb4c4d99 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -1729,7 +1729,7 @@ export default function Sidebar() {
 
   const wordmark = (
     <div className="flex items-center gap-2">
-      <SidebarTrigger className="shrink-0 md:hidden" />
+      <SidebarTrigger className="shrink-0" />
       <Tooltip>
         <TooltipTrigger
           render={
diff --git a/apps/web/src/components/chat/ChatHeader.tsx b/apps/web/src/components/chat/ChatHeader.tsx
index c1a4245fc..3fcd2f3af 100644
--- a/apps/web/src/components/chat/ChatHeader.tsx
+++ b/apps/web/src/components/chat/ChatHeader.tsx
@@ -112,7 +112,7 @@ export const ChatHeader = memo(function ChatHeader({
     <div className="flex min-w-0 flex-1 items-center gap-2">
       {/* Left: Identity — thread title + project context */}
       <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden sm:gap-3">
-        <SidebarTrigger className="size-7 shrink-0 md:hidden" />
+        <SidebarTrigger className="size-7 shrink-0" />
         <EditableThreadTitle
           title={activeThreadTitle}
           isEditing={isEditingTitle}
diff --git a/apps/web/src/components/review/ProjectSubpageShell.tsx b/apps/web/src/components/review/ProjectSubpageShell.tsx
index ffa92ddab..55a43b8da 100644
--- a/apps/web/src/components/review/ProjectSubpageShell.tsx
+++ b/apps/web/src/components/review/ProjectSubpageShell.tsx
@@ -50,7 +50,7 @@ export function ProjectSubpageShell({
         {!isElectron ? (
           <header className="border-b border-border px-3 py-2 sm:px-5">
             <div className="flex items-center gap-2">
-              <SidebarTrigger className="size-7 shrink-0 md:hidden" />
+              <SidebarTrigger className="size-7 shrink-0" />
               <Icon className="size-3.5 text-muted-foreground" />
               <span className="text-sm font-medium text-foreground">{title}</span>
             </div>
diff --git a/apps/web/src/components/ui/sidebar.tsx b/apps/web/src/components/ui/sidebar.tsx
index 34a281b78..1c4fa8e06 100644
--- a/apps/web/src/components/ui/sidebar.tsx
+++ b/apps/web/src/components/ui/sidebar.tsx
@@ -352,11 +352,17 @@ function Sidebar({
 }
 
 function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
-  const { toggleSidebar, openMobile } = useSidebar();
+  const { toggleSidebar, open, openMobile, isMobile } = useSidebar();
 
   return (
     <Button
-      className={cn("size-7", className)}
+      className={cn(
+        "size-7",
+        // On desktop, only show the trigger when the sidebar is collapsed;
+        // when expanded the SidebarRail handles toggling.
+        !isMobile && open && "hidden",
+        className,
+      )}
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       onClick={(event) => {
diff --git a/apps/web/src/routes/_chat.settings.tsx b/apps/web/src/routes/_chat.settings.tsx
index 70a06a8cf..bdf983772 100644
--- a/apps/web/src/routes/_chat.settings.tsx
+++ b/apps/web/src/routes/_chat.settings.tsx
@@ -512,7 +512,7 @@ function SettingsRouteView() {
         {!isElectron && (
           <header className="border-b border-border px-3 py-2 sm:px-5">
             <div className="flex items-center gap-2">
-              <SidebarTrigger className="size-7 shrink-0 md:hidden" />
+              <SidebarTrigger className="size-7 shrink-0" />
               <span className="text-sm font-medium text-foreground">Settings</span>
               <div className="ms-auto flex items-center gap-2">
                 <Button