refactor: enhance navigation functionality in File Manager

Author: itstauq

src-frontend/components/title-bar.tsx

@@ -3,8 +3,6 @@ import { cn } from "@/lib/utils";
 import { useEffect, useRef, useState } from "react";
 import { NotificationBell } from "@/components/notification-bell";
 import { ThemeToggle } from "@/components/theme-toggle";
-import { Button } from "@/components/ui/button";
-import { ChevronLeft, ChevronRight } from "lucide-react";
 
 export default function TitleBar({
   className,
@@ -61,14 +59,6 @@ export default function TitleBar({
     };
   }, []);
 
-  const goBack = () => {
-    window.history.back();
-  };
-
-  const goForward = () => {
-    window.history.forward();
-  };
-
   return (
     <div
       ref={titleBarRef}
@@ -90,11 +80,11 @@ export default function TitleBar({
         >
           <SidebarTrigger />
           <div className="flex items-center gap-1">
-            <Button
+            {/* <Button
               variant="ghost"
               size="sm"
               className="h-8 w-8 p-0"
-              onClick={goBack}
+              onClick={() => window.history.back()}
               aria-label="Go back"
             >
               <ChevronLeft className="h-4 w-4" />
@@ -103,11 +93,11 @@ export default function TitleBar({
               variant="ghost"
               size="sm"
               className="h-8 w-8 p-0"
-              onClick={goForward}
+              onClick={() => window.history.forward()}
               aria-label="Go forward"
             >
               <ChevronRight className="h-4 w-4" />
-            </Button>
+            </Button> */}
           </div>
         </div>
         <div className="flex items-center">{children}</div>

src-frontend/components/workspace/file-toolbar/file-actions.tsx

@@ -17,9 +17,18 @@ import {
   ChevronDown,
   Square,
   CheckSquare,
+  ArrowUp,
+  ChevronLeft,
+  ChevronRight,
 } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import {
   Dialog,
   DialogContent,
@@ -41,6 +50,7 @@ import {
   DropdownMenuSubContent,
 } from "@/components/ui/dropdown-menu";
 import { FileSystemItem } from "@/lib/types";
+import { Separator } from "@/components/ui/separator";
 
 export function FileActions() {
   const {
@@ -59,6 +69,7 @@ export function FileActions() {
     setSortConfig,
     fileSystem,
     currentPath,
+    navigateTo,
     viewMode,
     setViewMode,
     showHiddenFiles,
@@ -204,11 +215,85 @@ export function FileActions() {
     }
   };
 
+  const goBack = () => {
+    window.history.back();
+  };
+
+  const goForward = () => {
+    window.history.forward();
+  };
+
   return (
     <>
       {/* Sync status button */}
       {/* {renderSyncStatusButton()} */}
 
+      {/* Navigation buttons */}
+      <div className="flex items-center gap-1">
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={goBack}
+                aria-label="Go back"
+              >
+                <ChevronLeft className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Go back</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button
+                variant="ghost"
+                size="sm"
+                className="h-8 w-8 p-0"
+                onClick={goForward}
+                aria-label="Go forward"
+              >
+                <ChevronRight className="h-4 w-4" />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Go forward</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div
+              className={`inline-block ${currentPath.length === 0 ? "cursor-not-allowed" : ""}`}
+            >
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={() => navigateTo(currentPath.slice(0, -1))}
+                disabled={currentPath.length === 0}
+                className="flex items-center gap-2"
+              >
+                <ArrowUp className="h-4 w-4" />
+              </Button>
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>
+            <p>{currentPath.length === 0 ? "At workspace root" : "Go up"}</p>
+          </TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      <Separator orientation="vertical" className="h-4" />
+
       {isCompactView ? (
         /* Compact Menu - Single dropdown with all options */
         <div className="ml-1 flex items-center gap-1">