From 03191b3ff2be813f25090f7ae0bda05f6bea283e Mon Sep 17 00:00:00 2001
From: xintaofei <itpkcn@gmail.com>
Date: Thu, 19 Mar 2026 00:43:29 +0800
Subject: [PATCH] =?UTF-8?q?aux-panel=E4=BB=A3=E7=A0=81=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/layout/aux-panel.tsx | 45 +++++++++--------------------
 1 file changed, 13 insertions(+), 32 deletions(-)

diff --git a/src/components/layout/aux-panel.tsx b/src/components/layout/aux-panel.tsx
index 35c5d5c..0f3022e 100644
--- a/src/components/layout/aux-panel.tsx
+++ b/src/components/layout/aux-panel.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import { useCallback, useEffect, useState } from "react"
+import { useCallback, useState } from "react"
 import { FileDiff, Folder, FolderPen, GitCommit } from "lucide-react"
 import { useTranslations } from "next-intl"
 import {
@@ -13,42 +13,23 @@ import { GitChangesTab } from "./aux-panel-git-changes-tab"
 import { GitLogTab } from "./aux-panel-git-log-tab"
 import { SessionFilesTab } from "./aux-panel-session-files-tab"
 
+const LAZY_TABS: AuxPanelTab[] = ["file_tree", "changes", "git_log"]
+
 export function AuxPanel() {
   const t = useTranslations("Folder.auxPanel.tabs")
   const { isOpen, activeTab, setActiveTab } = useAuxPanelContext()
-  const [hasMountedFileTree, setHasMountedFileTree] = useState(
-    activeTab === "file_tree"
-  )
-  const [hasMountedChanges, setHasMountedChanges] = useState(
-    activeTab === "changes"
-  )
-  const [hasMountedGitLog, setHasMountedGitLog] = useState(
-    activeTab === "git_log"
+  const [mountedTabs, setMountedTabs] = useState<Set<AuxPanelTab>>(
+    () => new Set(LAZY_TABS.filter((tab) => tab === activeTab))
   )
 
-  // Sync mount flags when activeTab changes programmatically (e.g. revealInFileTree).
-  /* eslint-disable react-hooks/set-state-in-effect */
-  useEffect(() => {
-    if (!isOpen) return
-    if (activeTab === "file_tree") setHasMountedFileTree(true)
-    else if (activeTab === "changes") setHasMountedChanges(true)
-    else if (activeTab === "git_log") setHasMountedGitLog(true)
-  }, [isOpen, activeTab])
-  /* eslint-enable react-hooks/set-state-in-effect */
+  // Ensure the active tab is mounted (covers both user clicks and programmatic changes)
+  if (isOpen && LAZY_TABS.includes(activeTab) && !mountedTabs.has(activeTab)) {
+    setMountedTabs((prev) => new Set(prev).add(activeTab))
+  }
 
   const handleTabValueChange = useCallback(
     (value: string) => {
-      const nextTab = value as AuxPanelTab
-      setActiveTab(nextTab)
-      if (nextTab === "file_tree") {
-        setHasMountedFileTree(true)
-      }
-      if (nextTab === "changes") {
-        setHasMountedChanges(true)
-      }
-      if (nextTab === "git_log") {
-        setHasMountedGitLog(true)
-      }
+      setActiveTab(value as AuxPanelTab)
     },
     [setActiveTab]
   )
@@ -107,21 +88,21 @@ export function AuxPanel() {
           forceMount
           className="mt-0 flex-1 min-h-0 overflow-hidden"
         >
-          {hasMountedFileTree ? <FileTreeTab /> : null}
+          {mountedTabs.has("file_tree") ? <FileTreeTab /> : null}
         </TabsContent>
         <TabsContent
           value="changes"
           forceMount
           className="mt-0 flex-1 min-h-0 overflow-hidden"
         >
-          {hasMountedChanges ? <GitChangesTab /> : null}
+          {mountedTabs.has("changes") ? <GitChangesTab /> : null}
         </TabsContent>
         <TabsContent
           value="git_log"
           forceMount
           className="mt-0 flex-1 min-h-0 overflow-hidden"
         >
-          {hasMountedGitLog ? <GitLogTab /> : null}
+          {mountedTabs.has("git_log") ? <GitLogTab /> : null}
         </TabsContent>
       </Tabs>
     </aside>