feature: implemented moving file from one folder to another.

Author: PreciousOritsedere

app/components/FileItem.tsx

@@ -24,6 +24,7 @@ interface FileItemProps {
   onRename?: (file: FileItemData) => void;
   onPreview?: (file: FileItemData) => void;
   onCopy?: (file: FileItemData) => void;
+  onMove?: (file: FileItemData) => void;
   isSelected?: boolean;
 }
 
@@ -35,6 +36,7 @@ export default function FileItem({
   onRename,
   onPreview,
   onCopy,
+  onMove,
   isSelected = false,
 }: FileItemProps) {
   const [isHovered, setIsHovered] = useState(false);
@@ -131,7 +133,7 @@ export default function FileItem({
             onPreview={onPreview}
             onDownload={(f) => console.log("Download:", f.name)}
             onCopy={onCopy}
-            onMove={(f) => console.log("Move:", f.name)}
+            onMove={onMove}
             onDelete={(f) => console.log("Delete:", f.name)}
           />
         )}
@@ -179,7 +181,7 @@ export default function FileItem({
           onPreview={onPreview}
           onDownload={(f) => console.log("Download:", f.name)}
           onCopy={onCopy}
-          onMove={(f) => console.log("Move:", f.name)}
+          onMove={onMove}
           onDelete={(f) => console.log("Delete:", f.name)}
         />
       )}

app/components/FileItemMenu.tsx

@@ -104,13 +104,18 @@ export default function FileItemMenu({
       className: "text-gray-700 hover:bg-gray-100 border-b border-gray-100",
       iconClassName: "text-gray-500",
     },
-    {
-      label: "Move",
-      icon: ArrowRightCircleIcon,
-      action: onMove,
-      className: "text-gray-700 hover:bg-gray-100 border-b border-gray-100",
-      iconClassName: "text-gray-500",
-    },
+    // Only show Move for files, not folders
+    ...(file.type === "file"
+      ? [
+          {
+            label: "Move",
+            icon: ArrowRightCircleIcon,
+            action: onMove,
+            className: "text-gray-700 hover:bg-gray-100 border-b border-gray-100",
+            iconClassName: "text-gray-500",
+          },
+        ]
+      : []),
     {
       label: "Delete",
       icon: TrashIcon,

app/components/FileList.tsx

@@ -13,6 +13,7 @@ interface FileListProps {
   onFileRename?: (file: FileItemData) => void;
   onFilePreview?: (file: FileItemData) => void;
   onFileCopy?: (file: FileItemData) => void;
+  onFileMove?: (file: FileItemData) => void;
   selectedFileIds: string[];
 }
 
@@ -26,6 +27,7 @@ export default function FileList({
   onFileRename,
   onFilePreview,
   onFileCopy,
+  onFileMove,
   selectedFileIds,
 }: FileListProps) {
   const [view, setView] = useState<"grid" | "list">(() => {
@@ -62,6 +64,7 @@ export default function FileList({
                 onRename={onFileRename}
                 onPreview={onFilePreview}
                 onCopy={onFileCopy}
+                onMove={onFileMove}
                 isSelected={selectedFileIds.includes(file.id)}
               />
             ))}
@@ -78,6 +81,7 @@ export default function FileList({
                 onRename={onFileRename}
                 onPreview={onFilePreview}
                 onCopy={onFileCopy}
+                onMove={onFileMove}
                 isSelected={selectedFileIds.includes(file.id)}
               />
             ))}

app/components/FileManager.tsx

@@ -12,6 +12,7 @@ import PermissionsDialog, { Permission } from "./PermissionsDialog";
 import NewFolderDialog from "./NewFolderDialog";
 import RenameDialog from "./RenameDialog";
 import PreviewModal from "./PreviewModal";
+import MoveDialog from "./MoveDialog";
 import FileUploadHandler from "./FileUploadHandler";
 import { FileItemData } from "./FileItem";
 import LoadingSpinner from "./shared/LoadingSpinner";
@@ -46,6 +47,8 @@ export default function FileManager() {
   const [fileToRename, setFileToRename] = useState<FileItemData | null>(null);
   const [showPreviewModal, setShowPreviewModal] = useState(false);
   const [fileToPreview, setFileToPreview] = useState<FileItemData | null>(null);
+  const [showMoveDialog, setShowMoveDialog] = useState(false);
+  const [fileToMove, setFileToMove] = useState<FileItemData | null>(null);
 
   const [savedUrl, setSavedUrl] = useState<string | null>(() => {
     if (typeof window === "undefined") return null;
@@ -250,6 +253,15 @@ export default function FileManager() {
     setShowPreviewModal(true);
   };
 
+  const handleMove = (file: FileItemData) => {
+    setFileToMove(file);
+    setShowMoveDialog(true);
+  };
+
+  const handleMoved = () => {
+    setRefreshKey((prev) => prev + 1);
+  };
+
   const storageFiles: FileItemData[] = storages.map((storage) => ({
     id: storage.id,
     name: storage.name,
@@ -259,6 +271,24 @@ export default function FileManager() {
 
   const displayFiles = selectedStorageId ? browsedFiles : storageFiles;
 
+  // Get all available folders for move dialog (storages + browsed folders)
+  const availableFolders: FileItemData[] = [
+    ...storageFiles,
+    ...(selectedStorageId ? browsedFiles.filter((f) => f.type === "folder") : []),
+  ];
+
+  // Get current location URL for move dialog
+  const getCurrentLocationUrl = (): string => {
+    if (!selectedStorageId) {
+      return "";
+    }
+    if (currentPath === "/") {
+      const storage = storages.find((s) => s.id === selectedStorageId);
+      return storage?.url || "";
+    }
+    return currentPath;
+  };
+
   const selectedStorage = storages.find((s) => s.id === selectedStorageId);
   const breadcrumbItems = buildBreadcrumbItems(
     selectedStorageId,
@@ -436,6 +466,7 @@ export default function FileManager() {
                   onFileRename={handleRename}
                   onFilePreview={handlePreview}
                   onFileCopy={handleCopy}
+                  onFileMove={handleMove}
                   selectedFileIds={selectedFileIds}
                 />
               </div>
@@ -479,6 +510,17 @@ export default function FileManager() {
           }}
           file={fileToPreview}
         />
+        <MoveDialog
+          isOpen={showMoveDialog}
+          onClose={() => {
+            setShowMoveDialog(false);
+            setFileToMove(null);
+          }}
+          file={fileToMove}
+          availableFolders={availableFolders}
+          currentLocationUrl={getCurrentLocationUrl()}
+          onMoved={handleMoved}
+        />
         <FileUploadHandler
           currentContainerUrl={containerUrlToBrowse}
           onUploadComplete={handleFileUploaded}