From 22bf7e04d2aec73aac8cb2df252bc0c01a0cafb3 Mon Sep 17 00:00:00 2001
From: SSU-WEI HUANG <stanley.yellow1@gmail.com>
Date: Thu, 18 Jun 2026 10:16:32 +0800
Subject: [PATCH] fix(web): persist file explorer expanded tree and scroll
 position across navigation (#911)

* fix(web): persist file explorer expanded tree and scroll position across navigation

Expanded folder state and scroll position in the Directories tab were
stored only in local React state, so navigating to a file and back
would reset the tree to the root and scroll to top.

Now both are saved to sessionStorage (keyed by sessionId) on every
change and restored on remount, so the explorer resumes exactly where
the user left off.

Closes #910

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>

* fix(web): key DirectoryTree by sessionId to prevent stale expanded state across sessions

When navigating between sessions, React can reuse the same DirectoryTree
instance. The useState lazy initializer only runs on first mount, so the
tree would hydrate with the wrong session's expanded set and then
overwrite the new session's storage key.

Adding key={sessionId} forces a fresh mount per session.

via [HAPI](https://hapi.run)

Co-Authored-By: HAPI <noreply@hapi.run>

---------

Co-authored-by: HAPI <noreply@hapi.run>
---
 .../components/SessionFiles/DirectoryTree.tsx | 31 +++++++++++++++++--
 web/src/routes/sessions/files.tsx             | 28 +++++++++++++++--
 2 files changed, 55 insertions(+), 4 deletions(-)

diff --git a/web/src/components/SessionFiles/DirectoryTree.tsx b/web/src/components/SessionFiles/DirectoryTree.tsx
index 80b1e532..4f282cb3 100644
--- a/web/src/components/SessionFiles/DirectoryTree.tsx
+++ b/web/src/components/SessionFiles/DirectoryTree.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 import type { ApiClient } from '@/api/client'
 import { FileIcon } from '@/components/FileIcon'
 import { useSessionDirectory } from '@/hooks/queries/useSessionDirectory'
@@ -171,13 +171,40 @@ function DirectoryNode(props: {
     )
 }
 
+const STORAGE_KEY_PREFIX = 'hapi-dir-expanded-'
+
+function readExpanded(sessionId: string): Set<string> {
+    try {
+        const raw = sessionStorage.getItem(STORAGE_KEY_PREFIX + sessionId)
+        if (raw) {
+            const parsed = JSON.parse(raw)
+            if (Array.isArray(parsed)) return new Set(parsed as string[])
+        }
+    } catch {
+        // ignore
+    }
+    return new Set([''])
+}
+
+function writeExpanded(sessionId: string, expanded: Set<string>) {
+    try {
+        sessionStorage.setItem(STORAGE_KEY_PREFIX + sessionId, JSON.stringify([...expanded]))
+    } catch {
+        // ignore
+    }
+}
+
 export function DirectoryTree(props: {
     api: ApiClient | null
     sessionId: string
     rootLabel: string
     onOpenFile: (path: string) => void
 }) {
-    const [expanded, setExpanded] = useState<Set<string>>(() => new Set(['']))
+    const [expanded, setExpanded] = useState<Set<string>>(() => readExpanded(props.sessionId))
+
+    useEffect(() => {
+        writeExpanded(props.sessionId, expanded)
+    }, [props.sessionId, expanded])
 
     const handleToggle = useCallback((path: string) => {
         setExpanded((prev) => {
diff --git a/web/src/routes/sessions/files.tsx b/web/src/routes/sessions/files.tsx
index f8c698d7..a77e05b7 100644
--- a/web/src/routes/sessions/files.tsx
+++ b/web/src/routes/sessions/files.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams, useSearch } from '@tanstack/react-router'
 import type { FileSearchItem, GitFileStatus } from '@/types/api'
 import { FileIcon } from '@/components/FileIcon'
@@ -236,6 +236,8 @@ function FileListSkeleton(props: { label: string; rows?: number }) {
     )
 }
 
+const SCROLL_KEY_PREFIX = 'hapi-dir-scroll-'
+
 export default function FilesPage() {
     const { api } = useAppContext()
     const { t } = useTranslation()
@@ -246,10 +248,31 @@ export default function FilesPage() {
     const search = useSearch({ from: '/sessions/$sessionId/files' })
     const { session } = useSession(api, sessionId)
     const [searchQuery, setSearchQuery] = useState('')
+    const scrollRef = useRef<HTMLDivElement>(null)
 
     const initialTab = search.tab === 'directories' ? 'directories' : 'changes'
     const [activeTab, setActiveTab] = useState<'changes' | 'directories'>(initialTab)
 
+    useEffect(() => {
+        const el = scrollRef.current
+        if (!el) return
+        const key = SCROLL_KEY_PREFIX + sessionId
+        try {
+            const saved = sessionStorage.getItem(key)
+            if (saved !== null) el.scrollTop = Number(saved)
+        } catch {
+            // ignore
+        }
+        return () => {
+            try {
+                sessionStorage.setItem(key, String(el.scrollTop))
+            } catch {
+                // ignore
+            }
+        }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [sessionId])
+
     const {
         status: gitStatus,
         error: gitError,
@@ -411,7 +434,7 @@ export default function FilesPage() {
                 </div>
             ) : null}
 
-            <div className="app-scroll-y flex-1 min-h-0">
+            <div ref={scrollRef} className="app-scroll-y flex-1 min-h-0">
                 <div className="mx-auto w-full max-w-content">
                     {showGitErrorBanner && activeTab === 'changes' ? (
                         <div className="border-b border-[var(--app-divider)] bg-amber-500/10 px-3 py-2 text-xs text-[var(--app-hint)]">
@@ -441,6 +464,7 @@ export default function FilesPage() {
                         )
                     ) : activeTab === 'directories' ? (
                         <DirectoryTree
+                            key={sessionId}
                             api={api}
                             sessionId={sessionId}
                             rootLabel={rootLabel}