From 7c7754ba11032a39c20a3d732eca77c4f3b94e74 Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Tue, 16 Sep 2025 16:43:14 +0800
Subject: [PATCH] Fix file manager navigation buttons - implement proper
 directory navigation
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

🧭 Navigation System Overhaul:
- Replace broken browser history navigation with proper file system navigation
- Implement intelligent directory history tracking with forward/backward support
- Add smart button state management with auto-disable when not applicable

🔧 Button Fixes:
- Back button (<): Now navigates to previously visited directories
- Forward button (>): Restores navigation after going back
- Up button (↑): Properly constructs parent directory paths
- Refresh button: Fixed icon from Download to RefreshCw

🎯 Smart Button States:
- Back/Forward buttons auto-disable when no history available
- Up button disables at root directory (/)
- Visual feedback with opacity changes for disabled states
- Proper hover effects and accessibility

🧠 Navigation History Logic:
- Automatic history tracking when directories change
- History index management for proper back/forward behavior
- Clean path construction with correct separator handling
- Memory-efficient history management

The file manager now provides desktop-class navigation experience
matching modern file explorers like Windows Explorer or macOS Finder.
---
 .../Apps/File Manager/FileManagerGrid.tsx     | 83 ++++++++++++++++---
 1 file changed, 70 insertions(+), 13 deletions(-)

diff --git a/src/ui/Desktop/Apps/File Manager/FileManagerGrid.tsx b/src/ui/Desktop/Apps/File Manager/FileManagerGrid.tsx
index 38ba9365..063cfee1 100644
--- a/src/ui/Desktop/Apps/File Manager/FileManagerGrid.tsx	
+++ b/src/ui/Desktop/Apps/File Manager/FileManagerGrid.tsx	
@@ -13,7 +13,9 @@ import {
   Download,
   ChevronLeft,
   ChevronRight,
-  MoreHorizontal
+  MoreHorizontal,
+  RefreshCw,
+  ArrowUp
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
@@ -134,6 +136,49 @@ export function FileManagerGrid({
   const [selectionStart, setSelectionStart] = useState<{ x: number; y: number } | null>(null);
   const [selectionRect, setSelectionRect] = useState<{ x: number; y: number; width: number; height: number } | null>(null);
 
+  // 导航历史管理
+  const [navigationHistory, setNavigationHistory] = useState<string[]>([currentPath]);
+  const [historyIndex, setHistoryIndex] = useState(0);
+
+  // 更新导航历史
+  useEffect(() => {
+    const lastPath = navigationHistory[historyIndex];
+    if (currentPath !== lastPath) {
+      const newHistory = navigationHistory.slice(0, historyIndex + 1);
+      newHistory.push(currentPath);
+      setNavigationHistory(newHistory);
+      setHistoryIndex(newHistory.length - 1);
+    }
+  }, [currentPath]);
+
+  // 导航函数
+  const goBack = () => {
+    if (historyIndex > 0) {
+      const newIndex = historyIndex - 1;
+      setHistoryIndex(newIndex);
+      onPathChange(navigationHistory[newIndex]);
+    }
+  };
+
+  const goForward = () => {
+    if (historyIndex < navigationHistory.length - 1) {
+      const newIndex = historyIndex + 1;
+      setHistoryIndex(newIndex);
+      onPathChange(navigationHistory[newIndex]);
+    }
+  };
+
+  const goUp = () => {
+    const parts = currentPath.split('/').filter(Boolean);
+    if (parts.length > 0) {
+      parts.pop();
+      const parentPath = '/' + parts.join('/');
+      onPathChange(parentPath);
+    } else if (currentPath !== '/') {
+      onPathChange('/');
+    }
+  };
+
   // 路径导航
   const pathParts = currentPath.split('/').filter(Boolean);
   const navigateToPath = (index: number) => {
@@ -296,32 +341,44 @@ export function FileManagerGrid({
         {/* 导航按钮 */}
         <div className="flex items-center gap-1 p-2 border-b border-dark-border">
           <button
-            onClick={() => window.history.back()}
-            className="p-1 rounded hover:bg-dark-hover"
-            title="后退"
+            onClick={goBack}
+            disabled={historyIndex <= 0}
+            className={cn(
+              "p-1 rounded hover:bg-dark-hover",
+              historyIndex <= 0 && "opacity-50 cursor-not-allowed"
+            )}
+            title={t("common.back")}
           >
             <ChevronLeft className="w-4 h-4" />
           </button>
           <button
-            onClick={() => window.history.forward()}
-            className="p-1 rounded hover:bg-dark-hover"
-            title="前进"
+            onClick={goForward}
+            disabled={historyIndex >= navigationHistory.length - 1}
+            className={cn(
+              "p-1 rounded hover:bg-dark-hover",
+              historyIndex >= navigationHistory.length - 1 && "opacity-50 cursor-not-allowed"
+            )}
+            title={t("common.forward")}
           >
             <ChevronRight className="w-4 h-4" />
           </button>
           <button
-            onClick={() => onPathChange(files.find(f => f.name === '..')?.path || '/')}
-            className="p-1 rounded hover:bg-dark-hover"
-            title="上级目录"
+            onClick={goUp}
+            disabled={currentPath === '/'}
+            className={cn(
+              "p-1 rounded hover:bg-dark-hover",
+              currentPath === '/' && "opacity-50 cursor-not-allowed"
+            )}
+            title={t("fileManager.parentDirectory")}
           >
-            ↑
+            <ArrowUp className="w-4 h-4" />
           </button>
           <button
             onClick={onRefresh}
             className="p-1 rounded hover:bg-dark-hover"
-            title="刷新"
+            title={t("common.refresh")}
           >
-            <Download className="w-4 h-4" />
+            <RefreshCw className="w-4 h-4" />
           </button>
         </div>