Show sidebar trigger only when sidebar is collapsed

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>

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={

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}

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>

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) => {

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