From be06b7b35087300e42875317a75044d3c6ced21a Mon Sep 17 00:00:00 2001
From: Henrik <henrik092@users.noreply.github.com>
Date: Sun, 29 Mar 2026 18:46:09 +0000
Subject: [PATCH] fix(web): dismiss mobile sidebar sheet after navigation

On mobile, the sidebar renders as a slide-over sheet. After tapping a
thread, creating a new thread, or navigating to settings, the sheet
stays open and must be manually dismissed.

Add a closeMobileSidebar() helper that calls setOpenMobile(false) when
isMobile is true, and invoke it after:
- plain-click thread navigation (handleThreadClick)
- programmatic thread navigation (navigateToThread)
- new thread creation
- settings navigation

Fixes #1258
---
 apps/web/src/components/Sidebar.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/Sidebar.tsx b/apps/web/src/components/Sidebar.tsx
index 100d0e3f47..ffea5ee127 100644
--- a/apps/web/src/components/Sidebar.tsx
+++ b/apps/web/src/components/Sidebar.tsx
@@ -101,6 +101,7 @@ import {
   SidebarMenuSubItem,
   SidebarSeparator,
   SidebarTrigger,
+  useSidebar,
 } from "./ui/sidebar";
 import { useThreadSelectionStore } from "../threadSelectionStore";
 import { isNonEmpty as isNonEmptyString } from "effect/String";
@@ -334,6 +335,11 @@ export default function Sidebar() {
     (store) => store.clearProjectDraftThreadId,
   );
   const navigate = useNavigate();
+  const { isMobile, setOpenMobile } = useSidebar();
+  /** Close the mobile sidebar sheet after any user-initiated navigation. */
+  const closeMobileSidebar = useCallback(() => {
+    if (isMobile) setOpenMobile(false);
+  }, [isMobile, setOpenMobile]);
   const pathname = useLocation({ select: (loc) => loc.pathname });
   const isOnSettings = pathname.startsWith("/settings");
   const appSettings = useSettings();
@@ -835,9 +841,11 @@ export default function Sidebar() {
         to: "/$threadId",
         params: { threadId },
       });
+      closeMobileSidebar();
     },
     [
       clearSelection,
+      closeMobileSidebar,
       navigate,
       rangeSelectTo,
       selectedThreadIds.size,
@@ -856,8 +864,9 @@ export default function Sidebar() {
         to: "/$threadId",
         params: { threadId },
       });
+      closeMobileSidebar();
     },
-    [clearSelection, navigate, selectedThreadIds.size, setSelectionAnchor],
+    [clearSelection, closeMobileSidebar, navigate, selectedThreadIds.size, setSelectionAnchor],
   );
 
   const handleProjectContextMenu = useCallback(
@@ -1519,6 +1528,7 @@ export default function Sidebar() {
                         defaultEnvMode: appSettings.defaultThreadEnvMode,
                       }),
                     });
+                    closeMobileSidebar();
                   }}
                 >
                   <SquarePenIcon className="size-3.5" />
@@ -1976,7 +1986,10 @@ export default function Sidebar() {
                 <SidebarMenuButton
                   size="sm"
                   className="gap-2 px-2 py-1.5 text-muted-foreground/70 hover:bg-accent hover:text-foreground"
-                  onClick={() => void navigate({ to: "/settings" })}
+                  onClick={() => {
+                    void navigate({ to: "/settings" });
+                    closeMobileSidebar();
+                  }}
                 >
                   <SettingsIcon className="size-3.5" />
                   <span className="text-xs">Settings</span>