Merge 439603db7d into 160660e572

app/ui/app/src/components/layout/layout.tsx

@@ -9,13 +9,14 @@ export function SidebarLayout({
   collapsible?: boolean;
   chatId?: string;
 }>) {
-  const { settings, setSettings } = useSettings();
+  const { settings, isLoading, setSettings } = useSettings();
   const isWindows = navigator.platform.toLowerCase().includes("win");
+  const animate = !isLoading;
 
   return (
     <div className={`flex transition-[width] duration-300 dark:bg-neutral-900`}>
       <div
-        className={`absolute flex mx-2 py-2 z-20 items-center transition-[left] duration-375 text-neutral-500 dark:text-neutral-400 ${settings.sidebarOpen ? (isWindows ? "left-2" : "left-[204px]") : isWindows ? "left-2" : "left-20"}`}
+        className={`absolute flex mx-2 py-2 z-20 items-center ${animate ? "transition-[left] duration-375" : ""} text-neutral-500 dark:text-neutral-400 ${settings.sidebarOpen ? (isWindows ? "left-2" : "left-[204px]") : isWindows ? "left-2" : "left-20"}`}
       >
         <button
           onClick={() => setSettings({ SidebarOpen: !settings.sidebarOpen })}
@@ -57,7 +58,7 @@ export function SidebarLayout({
         </Link>
       </div>
       <div
-        className={`flex flex-col transition-[width] duration-300 max-h-screen ${settings.sidebarOpen ? "w-64" : "w-0"}`}
+        className={`flex flex-col ${animate ? "transition-[width] duration-300" : ""} max-h-screen ${settings.sidebarOpen ? "w-64" : "w-0"}`}
       >
         <div
           onDoubleClick={() => window.doubleClick && window.doubleClick()}

app/ui/app/src/hooks/useSettings.ts

@@ -29,7 +29,7 @@ export function useSettings() {
   const queryClient = useQueryClient();
 
   // Fetch settings with useQuery
-  const { data: settingsData, error } = useQuery({
+  const { data: settingsData, error, isLoading } = useQuery({
     queryKey: ["settings"],
     queryFn: getSettings,
   });
@@ -76,9 +76,10 @@ export function useSettings() {
     () => ({
       settings,
       settingsData: settingsData?.settings,
+      isLoading,
       error,
       setSettings,
     }),
-    [settings, settingsData?.settings, error, setSettings],
+    [settings, settingsData?.settings, isLoading, error, setSettings],
   );
 }

app/ui/app/src/utils/sidebarAnimation.test.ts

@@ -0,0 +1,35 @@
+import { describe, it, expect } from "vitest";
+
+// Reproduces the logic from useSettings to confirm the default sidebarOpen
+// value is false when settings have not yet loaded (settingsData is undefined).
+// The layout uses isLoading to suppress CSS transitions on initial render so
+// that the sidebar does not animate open when settings arrive after mount.
+describe("sidebar animation guard", () => {
+  function deriveSettings(settingsData: { SidebarOpen?: boolean } | undefined) {
+    return {
+      sidebarOpen: settingsData?.SidebarOpen ?? false,
+    };
+  }
+
+  it("defaults sidebarOpen to false while settings are loading", () => {
+    const settings = deriveSettings(undefined);
+    expect(settings.sidebarOpen).toBe(false);
+  });
+
+  it("reflects persisted SidebarOpen=true once settings load", () => {
+    const settings = deriveSettings({ SidebarOpen: true });
+    expect(settings.sidebarOpen).toBe(true);
+  });
+
+  it("animate flag is false while isLoading, suppressing the open animation", () => {
+    const isLoading = true;
+    const animate = !isLoading;
+    expect(animate).toBe(false);
+  });
+
+  it("animate flag is true after settings load, enabling subsequent transitions", () => {
+    const isLoading = false;
+    const animate = !isLoading;
+    expect(animate).toBe(true);
+  });
+});