From e3e4973c7f22ad2ddd4e08d4e51f6440aaaa3b70 Mon Sep 17 00:00:00 2001
From: killersteps <34531389+killersteps@users.noreply.github.com>
Date: Mon, 3 Aug 2026 14:30:28 +0800
Subject: [PATCH] fix: persist file explorer collapsed state

---
 components/SessionSidebar.tsx    | 13 +++++++++-
 lib/file-explorer-state.test.mjs | 43 ++++++++++++++++++++++++++++++++
 lib/file-explorer-state.ts       | 32 ++++++++++++++++++++++++
 3 files changed, 87 insertions(+), 1 deletion(-)
 create mode 100644 lib/file-explorer-state.test.mjs
 create mode 100644 lib/file-explorer-state.ts

diff --git a/components/SessionSidebar.tsx b/components/SessionSidebar.tsx
index 0514b55e5..6530a170c 100644
--- a/components/SessionSidebar.tsx
+++ b/components/SessionSidebar.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useLayoutEffect, useState, useCallback, useRef, type CSSProperties, type ReactNode } from "react";
 import type { SessionInfo } from "@/lib/types";
+import { loadExplorerOpen, saveExplorerOpen } from "@/lib/file-explorer-state";
 import { useI18n } from "@/hooks/useI18n";
 import { DirectoryPicker } from "./DirectoryPicker";
 import { FileExplorer, type FileExplorerHandle } from "./FileExplorer";
@@ -465,6 +466,12 @@ export function SessionSidebar({ selectedSessionId, onSelectSession, onNewSessio
     loadSessions(isFirst);
   }, [loadSessions, refreshKey]);
 
+  // Browser storage is unavailable during server rendering. Restore the panel
+  // preference after hydration so a collapsed explorer stays collapsed on reload.
+  useEffect(() => {
+    setExplorerOpen(loadExplorerOpen());
+  }, []);
+
   // Persist unread markers so they survive a browser refresh before the user
   // has actually opened the completed session.
   useEffect(() => {
@@ -1558,7 +1565,11 @@ export function SessionSidebar({ selectedSessionId, onSelectSession, onNewSessio
         >
           <div style={{ display: "flex", alignItems: "center", flexShrink: 0 }}>
             <button
-              onClick={() => setExplorerOpen((v) => !v)}
+              onClick={() => setExplorerOpen((open) => {
+                const next = !open;
+                saveExplorerOpen(next);
+                return next;
+              })}
               style={{
                 display: "flex",
                 alignItems: "center",
diff --git a/lib/file-explorer-state.test.mjs b/lib/file-explorer-state.test.mjs
new file mode 100644
index 000000000..6df749eb4
--- /dev/null
+++ b/lib/file-explorer-state.test.mjs
@@ -0,0 +1,43 @@
+import assert from "node:assert/strict";
+import test from "node:test";
+import { createJiti } from "jiti";
+
+const jiti = createJiti(import.meta.url);
+const { loadExplorerOpen, saveExplorerOpen } = await jiti.import("./file-explorer-state.ts");
+
+function createStorage(initial = {}) {
+  const values = new Map(Object.entries(initial));
+  return {
+    values,
+    getItem(key) {
+      return values.get(key) ?? null;
+    },
+    setItem(key, value) {
+      values.set(key, value);
+    },
+  };
+}
+
+test("defaults to an open file explorer", () => {
+  assert.equal(loadExplorerOpen(createStorage()), true);
+});
+
+test("saves and restores the file explorer panel state", () => {
+  const storage = createStorage();
+
+  saveExplorerOpen(false, storage);
+  assert.equal(loadExplorerOpen(storage), false);
+
+  saveExplorerOpen(true, storage);
+  assert.equal(loadExplorerOpen(storage), true);
+});
+
+test("falls back to open when browser storage is unavailable", () => {
+  const unavailable = {
+    getItem() { throw new Error("blocked"); },
+    setItem() { throw new Error("blocked"); },
+  };
+
+  assert.equal(loadExplorerOpen(unavailable), true);
+  assert.doesNotThrow(() => saveExplorerOpen(false, unavailable));
+});
diff --git a/lib/file-explorer-state.ts b/lib/file-explorer-state.ts
new file mode 100644
index 000000000..d480a3431
--- /dev/null
+++ b/lib/file-explorer-state.ts
@@ -0,0 +1,32 @@
+const EXPLORER_OPEN_STORAGE_KEY = "pi-web:file-explorer:open";
+
+interface StorageLike {
+  getItem(key: string): string | null;
+  setItem(key: string, value: string): void;
+}
+
+function getBrowserStorage(): StorageLike | null {
+  if (typeof window === "undefined") return null;
+  return window.localStorage;
+}
+
+export function loadExplorerOpen(storage: StorageLike | null = getBrowserStorage()): boolean {
+  if (!storage) return true;
+  try {
+    return storage.getItem(EXPLORER_OPEN_STORAGE_KEY) !== "false";
+  } catch {
+    return true;
+  }
+}
+
+export function saveExplorerOpen(
+  open: boolean,
+  storage: StorageLike | null = getBrowserStorage(),
+): void {
+  if (!storage) return;
+  try {
+    storage.setItem(EXPLORER_OPEN_STORAGE_KEY, String(open));
+  } catch {
+    // Persistence is best-effort; privacy mode and storage quotas must not break the explorer.
+  }
+}