From fcaece87df078346dfb18c808d3ca9440d13ad3a Mon Sep 17 00:00:00 2001
From: Jesse_Chen <chen.yue@mevixaga.com>
Date: Fri, 17 Jul 2026 17:45:42 +0800
Subject: [PATCH] fix: preserve sidebar subtree across drawer state

---
 frontend/src/components/ui/sidebar.tsx  | 3 +--
 frontend/tests/sidebar-contract.test.ts | 7 ++++++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/sidebar.tsx b/frontend/src/components/ui/sidebar.tsx
index ecdc3988..8a59b9d7 100644
--- a/frontend/src/components/ui/sidebar.tsx
+++ b/frontend/src/components/ui/sidebar.tsx
@@ -178,10 +178,9 @@ export function SidebarProvider({
 export function Sidebar({ id, className, ...props }: ComponentProps<"aside">) {
   const { isMobile, open, openMobile, setOpenMobile } = useSidebar();
   const sidebar = <aside id={id ?? "chat-sidebar"} data-sidebar="sidebar" data-slot="sidebar" data-state={open ? "expanded" : "collapsed"} data-mobile-open={openMobile} className={cn("flex min-h-0 shrink-0 flex-col", className)} {...props} />;
-  if (!isMobile || !openMobile) return sidebar;
   return <>
-    <button type="button" data-sidebar="scrim" data-slot="sidebar-scrim" aria-label="关闭聊天记录" className="sidebar-scrim" onClick={() => setOpenMobile(false)} />
     {sidebar}
+    {isMobile && openMobile ? <button type="button" data-sidebar="scrim" data-slot="sidebar-scrim" aria-label="关闭聊天记录" className="sidebar-scrim" onClick={() => setOpenMobile(false)} /> : null}
   </>;
 }
 
diff --git a/frontend/tests/sidebar-contract.test.ts b/frontend/tests/sidebar-contract.test.ts
index 606b742a..61ad3b22 100644
--- a/frontend/tests/sidebar-contract.test.ts
+++ b/frontend/tests/sidebar-contract.test.ts
@@ -45,7 +45,12 @@ test("provides the mobile drawer closing surface", () => {
   assert.match(sidebar, /data-slot="sidebar-scrim"/);
   assert.match(sidebar, /aria-label="关闭聊天记录"/);
   assert.match(sidebar, /onClick=\{\(\) => setOpenMobile\(false\)\}/);
-  assert.match(sidebar, /if \(!isMobile \|\| !openMobile\) return sidebar;/);
+  assert.match(sidebar, /isMobile && openMobile \? <button/);
+});
+
+test("keeps the sidebar subtree stable while toggling its mobile scrim", () => {
+  const sidebar = readProjectFile("src/components/ui/sidebar.tsx");
+  assert.match(sidebar, /return <>\s*\{sidebar\}\s*\{isMobile && openMobile \? <button/);
 });
 
 test("cancels a stale mobile drawer focus frame", () => {