@rebasepro/studio 0.0.1-canary.eae7889 → 0.1.0

package/src/components/StorageView/StorageView.tsx

@@ -1,9 +1,11 @@
 
-import React, { useState, useEffect, useCallback, useMemo } from "react";
-import { Typography, cls, defaultBorderMixin, Button, IconButton, Tooltip, CircularProgress, ResizablePanels, Chip, Dialog, DialogContent, DialogActions, FileUpload , iconSize } from "@rebasepro/ui";
-import { VideoIcon, Music2Icon, RefreshCwIcon, Trash2Icon, XIcon, PlusIcon, DownloadIcon, UploadCloudIcon, FolderIcon, FileTextIcon, ImageIcon, ArrowLeftIcon, FileIcon, HomeIcon, LayoutGridIcon, ListIcon } from "lucide-react";
-import { useStorageSource, useSnackbarController, ErrorView } from "@rebasepro/core";
+import React, { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { Typography, cls, defaultBorderMixin, Button, IconButton, Tooltip, CircularProgress, ResizablePanels, Chip, Dialog, DialogTitle, DialogContent, DialogActions, FileUpload, iconSize, Checkbox, LoadingButton, TextField } from "@rebasepro/ui";
+import { VideoIcon, Music2Icon, RefreshCwIcon, Trash2Icon, XIcon, PlusIcon, DownloadIcon, UploadCloudIcon, FolderIcon, FolderPlusIcon, FileTextIcon, ImageIcon, ArrowLeftIcon, FileIcon, HomeIcon, LayoutGridIcon, ListIcon, CopyIcon, CheckIcon } from "lucide-react";
+import { useStorageSource, useSnackbarController, ErrorView, useApiConfig } from "@rebasepro/core";
 import type { StorageListResult } from "@rebasepro/types";
+import { useSearchParams } from "react-router-dom";
+import { useDropzone } from "react-dropzone";
 
 // ──────────────────────────────────────────────
 // Types
@@ -110,78 +112,69 @@ function UploadDialog({
 
     return (
         <Dialog open={open} onOpenChange={(o) => !o && handleClose()} maxWidth="md">
-            <DialogContent className="p-0">
-                <div className="p-4 border-b border-surface-accent-200 dark:border-surface-accent-700">
-                    <Typography variant="h6">Upload Files</Typography>
-                    <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark mt-1 block">
-                        to <span className="font-mono text-primary">/{currentPath || "root"}</span>
-                    </Typography>
-                </div>
+            <DialogTitle>
+                Upload Files
+                <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark mt-0.5 block">
+                    to <span className="font-mono text-primary">/{currentPath || "root"}</span>
+                </Typography>
+            </DialogTitle>
+            <DialogContent className="space-y-4">
+                <FileUpload
+                    onFilesAdded={handleFilesAdded}
+                    size="large"
+                    uploadDescription={
+                        <div className="flex flex-col items-center justify-center pointer-events-none">
+                            <UploadCloudIcon className="text-surface-accent-400 mb-2 w-8 h-8"/>
+                            <Typography variant="label">
+                                Drop files here or click to browse
+                            </Typography>
+                            <Typography variant="caption" color="secondary">
+                                Any file type supported
+                            </Typography>
+                        </div>
+                    }
+                />
 
-                <div className="p-4">
-                    {/* Drop Zone */}
-                    <FileUpload
-                        accept={{} as Record<string, string[]>}
-                        onFilesAdded={handleFilesAdded}
-                        size="large"
-                        uploadDescription={
-                            <div className="flex flex-col items-center justify-center pointer-events-none mt-2">
-                                <UploadCloudIcon className="text-surface-accent-400 mb-2 w-8 h-8"/>
-                                <Typography variant="h6" className="font-bold">
-                                    Drop files here or click to browse
-                                </Typography>
-                                <Typography variant="caption" className="text-surface-accent-500 font-medium">
-                                    Any file type supported
-                                </Typography>
-                            </div>
-                        }
-                    />
+                {error && (
+                    <Typography variant="caption" className="text-red-500 block whitespace-pre-line">
+                        {error}
+                    </Typography>
+                )}
 
-                    {error && (
-                        <Typography variant="caption" className="text-red-500 mt-2 block whitespace-pre-line">
-                            {error}
+                {selectedFiles.length > 0 && (
+                    <div className="space-y-2">
+                        <Typography variant="caption" color="secondary">
+                            Selected files ({selectedFiles.length})
                         </Typography>
-                    )}
-
-                    {selectedFiles.length > 0 && (
-                        <div className="mt-4 space-y-2">
-                            <Typography variant="caption" className="text-surface-accent-500">
-                                Selected files ({selectedFiles.length})
-                            </Typography>
-                            <div className="max-h-40 overflow-auto space-y-1">
-                                {selectedFiles.map((file, index) => (
-                                    <div
-                                        key={`${file.name}-${index}`}
-                                        className={cls(
-                                            "flex items-center justify-between p-2 rounded",
-                                            "bg-surface-accent-50 dark:bg-surface-accent-800"
-                                        )}
-                                    >
-                                        <div className="flex-1 min-w-0 mr-2">
-                                            <Typography variant="body2" className="truncate">
-                                                {file.name}
-                                            </Typography>
-                                            <Typography variant="caption" className="text-surface-accent-500">
-                                                {formatFileSize(file.size)}
-                                            </Typography>
-                                        </div>
-                                        <Button
-                                            variant="text"
-                                            size="small"
-                                            onClick={(e) => {
-                                                e.stopPropagation();
-                                                handleRemoveFile(index);
-                                            }}
-                                            disabled={uploading}
-                                        >
-                                            Remove
-                                        </Button>
+                        <div className="max-h-40 overflow-auto space-y-1">
+                            {selectedFiles.map((file, index) => (
+                                <div
+                                    key={`${file.name}-${index}`}
+                                    className="flex items-center justify-between p-2 rounded bg-surface-100 dark:bg-surface-800"
+                                >
+                                    <div className="flex-1 min-w-0 mr-2">
+                                        <Typography variant="body2" className="truncate">
+                                            {file.name}
+                                        </Typography>
+                                        <Typography variant="caption" color="secondary">
+                                            {formatFileSize(file.size)}
+                                        </Typography>
                                     </div>
-                                ))}
-                            </div>
+                                    <IconButton
+                                        size="small"
+                                        onClick={(e) => {
+                                            e.stopPropagation();
+                                            handleRemoveFile(index);
+                                        }}
+                                        disabled={uploading}
+                                    >
+                                        <XIcon size={14}/>
+                                    </IconButton>
+                                </div>
+                            ))}
                         </div>
-                    )}
-                </div>
+                    </div>
+                )}
             </DialogContent>
 
             <DialogActions>
@@ -192,15 +185,9 @@ function UploadDialog({
                     variant="filled"
                     onClick={handleUpload}
                     disabled={selectedFiles.length === 0 || uploading}
+                    startIcon={uploading ? <CircularProgress size="smallest"/> : <UploadCloudIcon size={14}/>}
                 >
-                    {uploading ? (
-                        <>
-                            <CircularProgress size="smallest"/>
-                            Uploading...
-                        </>
-                    ) : (
-                        `Upload ${selectedFiles.length > 0 ? `(${selectedFiles.length})` : ""}`
-                    )}
+                    {uploading ? "Uploading..." : `Upload${selectedFiles.length > 0 ? ` (${selectedFiles.length})` : ""}`}
                 </Button>
             </DialogActions>
         </Dialog>
@@ -227,13 +214,14 @@ function FilePreviewPanel({
     const isAudio = file.contentType?.startsWith("audio/");
     const FileIconComponent = getFileIcon(file.contentType);
     const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [urlCopied, setUrlCopied] = useState(false);
 
     return (
         <>
             <div className={cls(
                 "flex flex-col h-full border-l",
                 defaultBorderMixin,
-                "bg-white dark:bg-surface-950"
+                "bg-white dark:bg-surface-800"
             )}>
                 {/* Header */}
                 <div className={cls("flex items-center justify-between p-3 border-b shrink-0", defaultBorderMixin)}>
@@ -268,7 +256,7 @@ function FilePreviewPanel({
 
                 {/* Preview */}
                 <div className="flex-1 overflow-auto">
-                    <div className="flex flex-col items-center justify-center min-h-[200px] p-4 bg-surface-50 dark:bg-surface-900 border-b border-surface-accent-200 dark:border-surface-accent-700">
+                    <div className={cls("flex flex-col items-center justify-center min-h-[200px] p-4 bg-surface-50 dark:bg-surface-800 border-b", defaultBorderMixin)}>
                         {(() => {
                             const ext = getExtension(file.name)?.toLowerCase() || "";
                             const isImage = file.contentType?.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
@@ -371,17 +359,36 @@ function FilePreviewPanel({
                                     URL
                                 </Typography>
                                 <div
-                                    className="p-2 rounded bg-surface-100 dark:bg-surface-950 cursor-pointer hover:bg-surface-200 dark:hover:bg-surface-700 transition-colors"
+                                    className={cls(
+                                        "flex items-center gap-2 p-2 rounded cursor-pointer transition-colors",
+                                        "bg-surface-100 dark:bg-surface-800 hover:bg-surface-200 dark:hover:bg-surface-700"
+                                    )}
                                     onClick={() => {
-                                        navigator.clipboard.writeText(downloadUrl);
+                                        const fullUrl = downloadUrl.startsWith("http")
+                                            ? downloadUrl
+                                            : `${window.location.origin}${downloadUrl.startsWith("/") ? "" : "/"}${downloadUrl}`;
+                                        navigator.clipboard.writeText(fullUrl).then(() => {
+                                            setUrlCopied(true);
+                                            setTimeout(() => setUrlCopied(false), 2000);
+                                        });
                                     }}
                                 >
-                                    <Typography variant="caption" className="font-mono text-[11px] break-all text-primary">
-                                        {downloadUrl}
-                                    </Typography>
-                                    <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark text-[10px] block mt-1">
-                                        Click to copy
+                                    <Typography variant="caption" className="font-mono text-[11px] truncate flex-1 min-w-0 text-primary">
+                                        {(() => {
+                                            const fullUrl = downloadUrl.startsWith("http")
+                                                ? downloadUrl
+                                                : `${window.location.origin}${downloadUrl.startsWith("/") ? "" : "/"}${downloadUrl}`;
+                                            return fullUrl;
+                                        })()}
                                     </Typography>
+                                    <Tooltip title={urlCopied ? "Copied!" : "Copy URL"}>
+                                        <div className="shrink-0">
+                                            {urlCopied
+                                                ? <CheckIcon size={14} className="text-green-500"/>
+                                                : <CopyIcon size={14} className="text-surface-accent-400"/>
+                                            }
+                                        </div>
+                                    </Tooltip>
                                 </div>
                             </div>
                         )}
@@ -419,79 +426,6 @@ function FilePreviewPanel({
     );
 }
 
-// ──────────────────────────────────────────────
-// Sidebar (folder tree)
-// ──────────────────────────────────────────────
-
-function StorageSidebar({
-    folders,
-    currentPath,
-    onNavigate,
-    loading
-}: {
-    folders: StorageFile[];
-    currentPath: string;
-    onNavigate: (path: string) => void;
-    loading: boolean;
-}) {
-    const segments = breadcrumbSegments(currentPath);
-
-    return (
-        <div className={cls("flex flex-col h-full w-full bg-white dark:bg-surface-950 border-r", defaultBorderMixin)}>
-            <div className={cls("p-3 border-b flex justify-between items-center bg-surface-50 dark:bg-surface-900 shrink-0", defaultBorderMixin)}>
-                <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
-                    Folders
-                </Typography>
-            </div>
-
-            <div className="flex-grow overflow-y-auto no-scrollbar p-1">
-                {/* Folder tree */}
-                <div
-                    className={cls(
-                        "flex items-center p-1.5 cursor-pointer rounded transition-colors",
-                        currentPath === "" || !currentPath
-                            ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light"
-                            : "hover:bg-surface-100 dark:hover:bg-surface-950 text-text-secondary dark:text-text-secondary-dark"
-                    )}
-                    onClick={() => onNavigate("")}
-                >
-                    <HomeIcon size={iconSize.smallest} className="mr-1.5 shrink-0"/>
-                    <Typography variant="body2" className="text-xs truncate">Root</Typography>
-                </div>
-
-                {loading && folders.length === 0 ? (
-                    <div className="flex justify-center p-4">
-                        <CircularProgress size="small"/>
-                    </div>
-                ) : (
-                    <div className="mt-1 space-y-0.5">
-                        {folders.map(folder => {
-                            const isSelected = currentPath === folder.fullPath;
-                            return (
-                                <div
-                                    key={folder.fullPath}
-                                    className={cls(
-                                        "flex items-center p-1.5 cursor-pointer rounded transition-colors group",
-                                        isSelected
-                                            ? "bg-primary/10 text-primary dark:bg-primary/20 dark:text-primary-light"
-                                            : "hover:bg-surface-100 dark:hover:bg-surface-950 text-text-secondary dark:text-text-secondary-dark"
-                                    )}
-                                    onClick={() => onNavigate(folder.fullPath)}
-                                >
-                                    <FolderIcon size={iconSize.smallest} className="mr-1.5 shrink-0 text-amber-500 dark:text-amber-400"/>
-                                    <Typography variant="body2" className="text-xs truncate flex-1 min-w-0">
-                                        {folder.name}
-                                    </Typography>
-                                </div>
-                            );
-                        })}
-                    </div>
-                )}
-            </div>
-        </div>
-    );
-}
-
 // ──────────────────────────────────────────────
 // Main StorageView Export
 // ──────────────────────────────────────────────
@@ -501,7 +435,8 @@ export const StorageView = () => {
     const snackbarController = useSnackbarController();
 
     // Navigation
-    const [currentPath, setCurrentPath] = useState("");
+    const [searchParams, setSearchParams] = useSearchParams();
+    const currentPath = searchParams.get("path") || "";
     const [loading, setLoading] = useState(true);
     const [error, setError] = useState<string | null>(null);
 
@@ -519,30 +454,32 @@ export const StorageView = () => {
     // View mode
     const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
 
-    // Resizable panels
+    // Multi-selection
+    const [selectedPaths, setSelectedPaths] = useState<Set<string>>(new Set());
+    const lastClickedRef = useRef<string | null>(null);
 
-    // Resizable panels
-    const [sidebarSize, setSidebarSize] = useState(() => {
-        try {
-            const saved = localStorage.getItem("rebase_storage_sidebar_size");
-            return saved !== null ? parseFloat(saved) : 18;
-        } catch {
-            return 18;
-        }
-    });
+    // Bulk / folder delete
+    const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
+    const [deleteDialogTarget, setDeleteDialogTarget] = useState<"selection" | StorageFile | null>(null);
+    const [deleting, setDeleting] = useState(false);
+
+    // New folder
+    const [newFolderDialogOpen, setNewFolderDialogOpen] = useState(false);
+    const [newFolderName, setNewFolderName] = useState("");
+    const [creatingFolder, setCreatingFolder] = useState(false);
+    const apiConfig = useApiConfig();
 
+    const storageSourceRef = React.useRef(storageSource);
     useEffect(() => {
-        try {
-            localStorage.setItem("rebase_storage_sidebar_size", sidebarSize.toString());
-        } catch { /* noop */ }
-    }, [sidebarSize]);
+        storageSourceRef.current = storageSource;
+    }, [storageSource]);
 
     // ── Fetch directory contents ──
     const fetchContents = useCallback(async (path: string) => {
         setLoading(true);
         setError(null);
         try {
-            const result: StorageListResult = await storageSource.listObjects(path);
+            const result: StorageListResult = await storageSourceRef.current.listObjects(path);
 
             const folderItems: StorageFile[] = (result.prefixes ?? []).map(ref => ({
                 name: ref.name,
@@ -554,7 +491,7 @@ export const StorageView = () => {
             const fileItems: StorageFile[] = await Promise.all(
                 (result.items ?? []).map(async (ref) => {
                     try {
-                        const downloadConfig = await storageSource.getSignedUrl(ref.fullPath);
+                        const downloadConfig = await storageSourceRef.current.getSignedUrl(ref.fullPath);
                         return {
                             name: ref.name,
                             fullPath: ref.fullPath,
@@ -581,7 +518,7 @@ export const StorageView = () => {
         } finally {
             setLoading(false);
         }
-    }, [storageSource]);
+    }, []);
 
     useEffect(() => {
         fetchContents(currentPath);
@@ -589,10 +526,16 @@ export const StorageView = () => {
 
     // Navigate to path
     const handleNavigate = useCallback((path: string) => {
-        setCurrentPath(path);
+        if (!path) {
+            setSearchParams({});
+        } else {
+            setSearchParams({ path });
+        }
         setSelectedFile(null);
         setSelectedDownloadUrl(null);
-    }, []);
+        setSelectedPaths(new Set());
+        lastClickedRef.current = null;
+    }, [setSearchParams]);
 
     // Navigate up one level
     const handleNavigateUp = useCallback(() => {
@@ -601,26 +544,76 @@ export const StorageView = () => {
         handleNavigate(parts.join("/"));
     }, [currentPath, handleNavigate]);
 
-    // Select a file for preview
-    const handleSelectFile = useCallback(async (file: StorageFile) => {
-        setSelectedFile(file);
-        if (file.downloadUrl) {
-            setSelectedDownloadUrl(file.downloadUrl);
+    // All items (folders + files) in display order, for shift-range select
+    const allItems = useMemo(() => [...folders, ...files], [folders, files]);
+
+    // ── Multi-select click handler ──
+    const handleItemClick = useCallback((item: StorageFile, e: React.MouseEvent) => {
+        const path = item.fullPath;
+        if (e.metaKey || e.ctrlKey) {
+            // Toggle individual item
+            setSelectedPaths(prev => {
+                const next = new Set(prev);
+                if (next.has(path)) next.delete(path);
+                else next.add(path);
+                return next;
+            });
+            lastClickedRef.current = path;
+        } else if (e.shiftKey && lastClickedRef.current) {
+            // Range select
+            const allPaths = allItems.map(i => i.fullPath);
+            const anchorIdx = allPaths.indexOf(lastClickedRef.current);
+            const currentIdx = allPaths.indexOf(path);
+            if (anchorIdx >= 0 && currentIdx >= 0) {
+                const [start, end] = anchorIdx < currentIdx ? [anchorIdx, currentIdx] : [currentIdx, anchorIdx];
+                setSelectedPaths(prev => {
+                    const next = new Set(prev);
+                    for (let i = start; i <= end; i++) next.add(allPaths[i]);
+                    return next;
+                });
+            }
         } else {
-            try {
-                const config = await storageSource.getSignedUrl(file.fullPath);
-                setSelectedDownloadUrl(config.url);
-            } catch {
+            // Exclusive select
+            setSelectedPaths(new Set([path]));
+            lastClickedRef.current = path;
+            // Also open preview if it's a file
+            if (!item.isFolder) {
+                setSelectedFile(item);
+                if (item.downloadUrl) {
+                    setSelectedDownloadUrl(item.downloadUrl);
+                } else {
+                    storageSourceRef.current.getSignedUrl(item.fullPath)
+                        .then(config => setSelectedDownloadUrl(config.url))
+                        .catch(() => setSelectedDownloadUrl(null));
+                }
+            } else {
+                setSelectedFile(null);
                 setSelectedDownloadUrl(null);
             }
         }
-    }, [storageSource]);
+    }, [allItems]);
+
+    // Double-click: open folder or preview file
+    const handleItemDoubleClick = useCallback((item: StorageFile) => {
+        if (item.isFolder) {
+            handleNavigate(item.fullPath);
+        } else {
+            setSelectedFile(item);
+            if (item.downloadUrl) {
+                setSelectedDownloadUrl(item.downloadUrl);
+            } else {
+                storageSourceRef.current.getSignedUrl(item.fullPath)
+                    .then(config => setSelectedDownloadUrl(config.url))
+                    .catch(() => setSelectedDownloadUrl(null));
+            }
+        }
+    }, [handleNavigate]);
 
     // Upload files
     const handleUpload = useCallback(async (uploadFiles: File[]) => {
         for (const file of uploadFiles) {
             const key = currentPath ? `${currentPath}/${file.name}` : file.name;
-            await storageSource.putObject({
+            await storageSourceRef.current.putObject({
                 file,
                 key
             });
@@ -629,23 +622,214 @@ export const StorageView = () => {
             type: "success",
             message: `${uploadFiles.length} file${uploadFiles.length > 1 ? "s" : ""} uploaded successfully`
         });
-        fetchContents(currentPath);
-    }, [storageSource, currentPath, snackbarController, fetchContents]);
+        await fetchContents(currentPath);
+    }, [currentPath, snackbarController, fetchContents]);
+
+    // Create new folder
+    const handleCreateFolder = useCallback(async () => {
+        if (!newFolderName.trim() || !apiConfig?.apiUrl) return;
+
+        // Validate folder name
+        const name = newFolderName.trim();
+        if (name.includes("/") || name.includes("\\")) {
+            snackbarController.open({ type: "error", message: "Folder name cannot contain slashes" });
+            return;
+        }
+
+        // Check if folder already exists
+        const existingFolder = folders.find(f => f.name === name);
+        if (existingFolder) {
+            snackbarController.open({ type: "error", message: `Folder "${name}" already exists` });
+            return;
+        }
 
-    // Delete a file
+        setCreatingFolder(true);
+        try {
+            const folderPath = currentPath ? `default/${currentPath}/${name}` : `default/${name}`;
+            const token = apiConfig.getAuthToken ? await apiConfig.getAuthToken() : null;
+            const response = await fetch(`${apiConfig.apiUrl}/api/storage/folder`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    ...(token ? { "Authorization": `Bearer ${token}` } : {})
+                },
+                body: JSON.stringify({ path: folderPath })
+            });
+
+            if (!response.ok) {
+                const err = await response.json().catch(() => ({ error: "Failed to create folder" }));
+                throw new Error(err.error || "Failed to create folder");
+            }
+
+            snackbarController.open({ type: "success", message: `Folder "${name}" created` });
+            setNewFolderDialogOpen(false);
+            setNewFolderName("");
+            await fetchContents(currentPath);
+        } catch (e) {
+            snackbarController.open({ type: "error", message: e instanceof Error ? e.message : String(e) });
+        } finally {
+            setCreatingFolder(false);
+        }
+    }, [newFolderName, currentPath, apiConfig, snackbarController, fetchContents, folders]);
+
+    // Drag-and-drop on main view
+    const handleDropFiles = useCallback(async (droppedFiles: File[]) => {
+        if (droppedFiles.length === 0) return;
+        try {
+            for (const file of droppedFiles) {
+                const key = currentPath ? `${currentPath}/${file.name}` : file.name;
+                await storageSourceRef.current.putObject({ file, key });
+            }
+            snackbarController.open({
+                type: "success",
+                message: `${droppedFiles.length} file${droppedFiles.length > 1 ? "s" : ""} uploaded successfully`
+            });
+            await fetchContents(currentPath);
+        } catch (e) {
+            snackbarController.open({
+                type: "error",
+                message: e instanceof Error ? e.message : String(e)
+            });
+        }
+    }, [currentPath, snackbarController, fetchContents]);
+
+    const {
+        getRootProps: getDropRootProps,
+        getInputProps: getDropInputProps,
+        isDragActive
+    } = useDropzone({
+        onDrop: handleDropFiles,
+        noClick: true,
+        noKeyboard: true,
+        noDragEventsBubbling: true
+    });
+
+    // ── Recursive folder delete helper ──
+    const deleteFolderRecursive = useCallback(async (prefix: string) => {
+        const result = await storageSourceRef.current.listObjects(prefix);
+        // Delete all files in this level
+        for (const item of result.items ?? []) {
+            await storageSourceRef.current.deleteObject(item.fullPath);
+        }
+        // Recurse into sub-folders
+        for (const sub of result.prefixes ?? []) {
+            await deleteFolderRecursive(sub.fullPath);
+        }
+        // Delete the folder entry itself (needed for local filesystem)
+        try {
+            await storageSourceRef.current.deleteObject(prefix);
+        } catch {
+            // Ignore — S3 folders are virtual and may not exist as objects
+        }
+    }, []);
+
+    // Delete a single file
     const handleDeleteFile = useCallback(async (file: StorageFile) => {
         try {
-            await storageSource.deleteObject(file.fullPath);
-            snackbarController.open({ type: "success",
-message: `"${file.name}" deleted` });
+            if (file.isFolder) {
+                await deleteFolderRecursive(file.fullPath);
+            } else {
+                await storageSourceRef.current.deleteObject(file.fullPath);
+            }
+            snackbarController.open({ type: "success", message: `"${file.name}" deleted` });
             setSelectedFile(null);
             setSelectedDownloadUrl(null);
+            setSelectedPaths(prev => {
+                const next = new Set(prev);
+                next.delete(file.fullPath);
+                return next;
+            });
             fetchContents(currentPath);
         } catch (e) {
-            snackbarController.open({ type: "error",
-message: e instanceof Error ? e.message : String(e) });
+            snackbarController.open({ type: "error", message: e instanceof Error ? e.message : String(e) });
         }
-    }, [storageSource, currentPath, snackbarController, fetchContents]);
+    }, [currentPath, snackbarController, fetchContents, deleteFolderRecursive]);
+
+    // Bulk delete (selected items)
+    const handleBulkDelete = useCallback(async () => {
+        setDeleting(true);
+        try {
+            const items = allItems.filter(i => selectedPaths.has(i.fullPath));
+            for (const item of items) {
+                if (item.isFolder) {
+                    await deleteFolderRecursive(item.fullPath);
+                } else {
+                    await storageSourceRef.current.deleteObject(item.fullPath);
+                }
+            }
+            snackbarController.open({ type: "success", message: `${items.length} item${items.length !== 1 ? "s" : ""} deleted` });
+            setSelectedPaths(new Set());
+            setSelectedFile(null);
+            setSelectedDownloadUrl(null);
+            await fetchContents(currentPath);
+        } catch (e) {
+            snackbarController.open({ type: "error", message: e instanceof Error ? e.message : String(e) });
+        } finally {
+            setDeleting(false);
+            setDeleteDialogOpen(false);
+            setDeleteDialogTarget(null);
+        }
+    }, [allItems, selectedPaths, currentPath, snackbarController, fetchContents, deleteFolderRecursive]);
+
+    // Confirm delete for a single folder
+    const handleConfirmDeleteFolder = useCallback(async () => {
+        if (!deleteDialogTarget || deleteDialogTarget === "selection") return;
+        setDeleting(true);
+        try {
+            await deleteFolderRecursive(deleteDialogTarget.fullPath);
+            snackbarController.open({ type: "success", message: `Folder "${deleteDialogTarget.name}" deleted` });
+            setSelectedPaths(prev => {
+                const next = new Set(prev);
+                next.delete(deleteDialogTarget.fullPath);
+                return next;
+            });
+            await fetchContents(currentPath);
+        } catch (e) {
+            snackbarController.open({ type: "error", message: e instanceof Error ? e.message : String(e) });
+        } finally {
+            setDeleting(false);
+            setDeleteDialogOpen(false);
+            setDeleteDialogTarget(null);
+        }
+    }, [deleteDialogTarget, currentPath, snackbarController, fetchContents, deleteFolderRecursive]);
+
+    // Select all / deselect
+    const handleSelectAll = useCallback(() => {
+        if (selectedPaths.size === allItems.length) {
+            setSelectedPaths(new Set());
+        } else {
+            setSelectedPaths(new Set(allItems.map(i => i.fullPath)));
+        }
+    }, [allItems, selectedPaths]);
+
+    // ── Keyboard shortcuts ──
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            // Don't handle shortcuts when a dialog is open
+            if (deleteDialogOpen || uploadDialogOpen || newFolderDialogOpen) return;
+            // Cmd/Ctrl+A: select all
+            if ((e.metaKey || e.ctrlKey) && e.key === "a") {
+                e.preventDefault();
+                handleSelectAll();
+            }
+            // Escape: deselect
+            if (e.key === "Escape") {
+                setSelectedPaths(new Set());
+                setSelectedFile(null);
+                setSelectedDownloadUrl(null);
+            }
+            // Delete / Backspace: delete selected
+            if ((e.key === "Delete" || e.key === "Backspace") && selectedPaths.size > 0 && !e.metaKey && !e.ctrlKey) {
+                // Don't trigger if user is typing in an input
+                if ((e.target as HTMLElement)?.tagName === "INPUT" || (e.target as HTMLElement)?.tagName === "TEXTAREA") return;
+                e.preventDefault();
+                setDeleteDialogTarget("selection");
+                setDeleteDialogOpen(true);
+            }
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [handleSelectAll, selectedPaths, deleteDialogOpen, uploadDialogOpen, newFolderDialogOpen]);
 
     // Handle refresh
     const handleRefresh = useCallback(() => {
@@ -654,6 +838,7 @@ message: e instanceof Error ? e.message : String(e) });
 
     const segments = breadcrumbSegments(currentPath);
 
+
     // ── Render file grid/list ──
     const renderContents = () => {
         if (loading) {
@@ -677,7 +862,6 @@ message: e instanceof Error ? e.message : String(e) });
             );
         }
 
-        const allItems = [...folders, ...files];
 
         if (allItems.length === 0) {
             return (
@@ -689,10 +873,19 @@ message: e instanceof Error ? e.message : String(e) });
                         <Typography variant="body2">
                             This folder is empty
                         </Typography>
-                        <Button className="mt-3" onClick={() => setUploadDialogOpen(true)}>
-                            <PlusIcon size={iconSize.smallest}/>
-                            Upload files
-                        </Button>
+                        <div className="flex items-center gap-2 mt-3">
+                            <Button variant="text" onClick={() => {
+                                setNewFolderName("");
+                                setNewFolderDialogOpen(true);
+                            }}>
+                                <FolderPlusIcon size={iconSize.smallest}/>
+                                New folder
+                            </Button>
+                            <Button onClick={() => setUploadDialogOpen(true)}>
+                                <PlusIcon size={iconSize.smallest}/>
+                                Upload files
+                            </Button>
+                        </div>
                     </div>
                 </div>
             );
@@ -704,53 +897,105 @@ message: e instanceof Error ? e.message : String(e) });
                     <table className="w-full">
                         <thead>
                             <tr className={cls("border-b text-left text-[10px] uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark", defaultBorderMixin)}>
-                                <th className="px-4 py-2 font-bold">Name</th>
+                                <th className="pl-3 pr-0 py-2 w-8">
+                                    <Checkbox
+                                        size="small"
+                                        checked={allItems.length > 0 && selectedPaths.size === allItems.length}
+                                        indeterminate={selectedPaths.size > 0 && selectedPaths.size < allItems.length}
+                                        onCheckedChange={handleSelectAll}
+                                    />
+                                </th>
+                                <th className="px-2 py-2 font-bold">Name</th>
                                 <th className="px-4 py-2 font-bold w-24">Type</th>
                                 <th className="px-4 py-2 font-bold w-24 text-right">Size</th>
+                                <th className="px-2 py-2 w-10"/>
                             </tr>
                         </thead>
                         <tbody>
-                            {folders.map(folder => (
-                                <tr
-                                    key={folder.fullPath}
-                                    className="hover:bg-surface-100 dark:hover:bg-surface-950 cursor-pointer transition-colors border-b border-surface-100 dark:border-surface-950/50"
-                                    onClick={() => handleNavigate(folder.fullPath)}
-                                >
-                                    <td className="px-4 py-2.5">
-                                        <div className="flex items-center gap-2">
-                                            <FolderIcon size={iconSize.smallest} className="text-amber-500 dark:text-amber-400 shrink-0"/>
-                                            <Typography variant="body2" className="text-[13px] font-medium truncate">
-                                                {folder.name}
+                            {folders.map(folder => {
+                                const isChecked = selectedPaths.has(folder.fullPath);
+                                return (
+                                    <tr
+                                        key={folder.fullPath}
+                                        data-storage-item
+                                        className={cls(
+                                            "cursor-pointer transition-colors border-b group",
+                                            defaultBorderMixin,
+                                            isChecked
+                                                ? "bg-primary/5 dark:bg-primary/10"
+                                                : "hover:bg-surface-100 dark:hover:bg-surface-800"
+                                        )}
+                                        onClick={(e) => handleItemClick(folder, e)}
+                                        onDoubleClick={() => handleItemDoubleClick(folder)}
+                                    >
+                                        <td className="pl-3 pr-0 py-2.5" onClick={(e) => e.stopPropagation()}>
+                                            <Checkbox
+                                                size="small"
+                                                checked={isChecked}
+                                                onCheckedChange={() => {
+                                                    setSelectedPaths(prev => {
+                                                        const next = new Set(prev);
+                                                        if (next.has(folder.fullPath)) next.delete(folder.fullPath);
+                                                        else next.add(folder.fullPath);
+                                                        return next;
+                                                    });
+                                                }}
+                                            />
+                                        </td>
+                                        <td className="px-2 py-2.5">
+                                            <div className="flex items-center gap-2">
+                                                <FolderIcon size={iconSize.smallest} className="text-amber-500 dark:text-amber-400 shrink-0"/>
+                                                <Typography variant="body2" className="text-[13px] font-medium truncate">
+                                                    {folder.name}
+                                                </Typography>
+                                            </div>
+                                        </td>
+                                        <td className="px-4 py-2.5">
+                                            <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark">
+                                                Folder
                                             </Typography>
-                                        </div>
-                                    </td>
-                                    <td className="px-4 py-2.5">
-                                        <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark">
-                                            Folder
-                                        </Typography>
-                                    </td>
-                                    <td className="px-4 py-2.5 text-right">
-                                        <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark">
-                                            —
-                                        </Typography>
-                                    </td>
-                                </tr>
-                            ))}
+                                        </td>
+                                        <td className="px-4 py-2.5 text-right">
+                                            <Typography variant="caption" className="text-text-disabled dark:text-text-disabled-dark">
+                                                —
+                                            </Typography>
+                                        </td>
+                                        <td className="px-2 py-2.5"/>
+                                    </tr>
+                                );
+                            })}
                             {files.map(file => {
                                 const FileIconComp = getFileIcon(file.contentType);
-                                const isSelected = selectedFile?.fullPath === file.fullPath;
+                                const isChecked = selectedPaths.has(file.fullPath);
                                 return (
                                     <tr
                                         key={file.fullPath}
+                                        data-storage-item
                                         className={cls(
-                                            "cursor-pointer transition-colors border-b border-surface-100 dark:border-surface-950/50",
-                                            isSelected
+                                            "cursor-pointer transition-colors border-b group",
+                                            defaultBorderMixin,
+                                            isChecked
                                                 ? "bg-primary/5 dark:bg-primary/10"
-                                                : "hover:bg-surface-100 dark:hover:bg-surface-950"
+                                                : "hover:bg-surface-100 dark:hover:bg-surface-800"
                                         )}
-                                        onClick={() => handleSelectFile(file)}
+                                        onClick={(e) => handleItemClick(file, e)}
+                                        onDoubleClick={() => handleItemDoubleClick(file)}
                                     >
-                                        <td className="px-4 py-2.5">
+                                        <td className="pl-3 pr-0 py-2.5" onClick={(e) => e.stopPropagation()}>
+                                            <Checkbox
+                                                size="small"
+                                                checked={isChecked}
+                                                onCheckedChange={() => {
+                                                    setSelectedPaths(prev => {
+                                                        const next = new Set(prev);
+                                                        if (next.has(file.fullPath)) next.delete(file.fullPath);
+                                                        else next.add(file.fullPath);
+                                                        return next;
+                                                    });
+                                                }}
+                                            />
+                                        </td>
+                                        <td className="px-2 py-2.5">
                                             <div className="flex items-center gap-2">
                                                 <FileIconComp size={iconSize.smallest} className="text-surface-accent-400 shrink-0"/>
                                                 <Typography variant="body2" className="text-[13px] truncate">
@@ -768,6 +1013,15 @@ message: e instanceof Error ? e.message : String(e) });
                                                 {file.size !== undefined ? formatFileSize(file.size) : "—"}
                                             </Typography>
                                         </td>
+                                        <td className="px-2 py-2.5" onClick={(e) => e.stopPropagation()}>
+                                            <IconButton
+                                                size="smallest"
+                                                className="opacity-0 group-hover:opacity-100 transition-opacity"
+                                                onClick={() => handleDeleteFile(file)}
+                                            >
+                                                <Trash2Icon size={14}/>
+                                            </IconButton>
+                                        </td>
                                     </tr>
                                 );
                             })}
@@ -786,24 +1040,31 @@ message: e instanceof Error ? e.message : String(e) });
                         <Typography variant="caption" className="text-[10px] uppercase tracking-wider font-bold text-text-disabled dark:text-text-disabled-dark mb-2 block">
                             Folders
                         </Typography>
-                        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
-                            {folders.map(folder => (
-                                <div
-                                    key={folder.fullPath}
-                                    className={cls(
-                                        "rounded-lg p-3 cursor-pointer transition-all duration-150 border",
-                                        defaultBorderMixin,
-                                        "hover:bg-surface-100 dark:hover:bg-surface-950 hover:shadow-sm",
-                                        "flex items-center gap-2"
-                                    )}
-                                    onClick={() => handleNavigate(folder.fullPath)}
-                                >
-                                    <FolderIcon size={iconSize.smallest} className="text-amber-500 dark:text-amber-400 shrink-0"/>
-                                    <Typography variant="body2" className="text-[13px] font-medium truncate">
-                                        {folder.name}
-                                    </Typography>
-                                </div>
-                            ))}
+                        <div className="grid gap-3 grid-cols-[repeat(auto-fill,minmax(140px,1fr))]">
+                            {folders.map(folder => {
+                                const isChecked = selectedPaths.has(folder.fullPath);
+                                return (
+                                    <div
+                                        key={folder.fullPath}
+                                        data-storage-item
+                                        className={cls(
+                                            "rounded-lg p-3 cursor-pointer border",
+                                            "transition-colors duration-150",
+                                            defaultBorderMixin,
+                                            "hover:bg-surface-100 dark:hover:bg-surface-800 hover:shadow-sm",
+                                            "flex items-center gap-2",
+                                            isChecked && "ring-2 ring-primary bg-primary/5 dark:bg-primary/10"
+                                        )}
+                                        onClick={(e) => handleItemClick(folder, e)}
+                                        onDoubleClick={() => handleItemDoubleClick(folder)}
+                                    >
+                                        <FolderIcon size={iconSize.smallest} className="text-amber-500 dark:text-amber-400 shrink-0"/>
+                                        <Typography variant="body2" className="text-[13px] font-medium truncate">
+                                            {folder.name}
+                                        </Typography>
+                                    </div>
+                                );
+                            })}
                         </div>
                     </div>
                 )}
@@ -814,31 +1075,34 @@ message: e instanceof Error ? e.message : String(e) });
                         <Typography variant="caption" className="text-[10px] uppercase tracking-wider font-bold text-text-disabled dark:text-text-disabled-dark mb-2 block">
                             Files ({files.length})
                         </Typography>
-                        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-3">
+                        <div className="grid gap-3 grid-cols-[repeat(auto-fill,minmax(140px,1fr))]">
                             {files.map(file => {
                                 const FileIconComp = getFileIcon(file.contentType);
                                 const ext = getExtension(file.name)?.toLowerCase() || "";
                                 const isImage = file.contentType?.startsWith("image/") || ["jpg", "jpeg", "png", "gif", "webp", "svg"].includes(ext);
-                                const isSelected = selectedFile?.fullPath === file.fullPath;
+                                const isChecked = selectedPaths.has(file.fullPath);
 
                                 return (
                                     <div
                                         key={file.fullPath}
+                                        data-storage-item
                                         className={cls(
-                                            "rounded-lg overflow-hidden cursor-pointer transition-all duration-150 border group",
+                                            "rounded-lg overflow-hidden cursor-pointer border",
+                                            "transition-shadow duration-150",
                                             defaultBorderMixin,
-                                            "hover:shadow-md hover:-translate-y-0.5",
-                                            isSelected && "ring-2 ring-primary"
+                                            "hover:shadow-md",
+                                            isChecked && "ring-2 ring-primary"
                                         )}
-                                        onClick={() => handleSelectFile(file)}
+                                        onClick={(e) => handleItemClick(file, e)}
+                                        onDoubleClick={() => handleItemDoubleClick(file)}
                                     >
                                         {/* Thumbnail or icon */}
-                                        <div className="aspect-square relative overflow-hidden bg-surface-100 dark:bg-surface-950 flex items-center justify-center">
+                                        <div className="aspect-square relative overflow-hidden bg-surface-100 dark:bg-surface-800 flex items-center justify-center">
                                             {isImage && file.downloadUrl ? (
                                                 <img
                                                     src={file.downloadUrl}
                                                     alt={file.name}
-                                                    className="w-full h-full object-cover transition-transform duration-200 group-hover:scale-105"
+                                                    className="w-full h-full object-cover"
                                                     loading="lazy"
                                                 />
                                             ) : (
@@ -851,12 +1115,6 @@ message: e instanceof Error ? e.message : String(e) });
                                                     {getExtension(file.name)}
                                                 </div>
                                             )}
-
-                                            {/* Hover overlay */}
-                                            <div className={cls(
-                                                "absolute inset-0 bg-black/0 group-hover:bg-black/10",
-                                                "transition-colors duration-200"
-                                            )}/>
                                         </div>
 
                                         {/* Name & size */}
@@ -879,28 +1137,14 @@ message: e instanceof Error ? e.message : String(e) });
     };
 
     return (
-        <div className="flex h-full w-full bg-white dark:bg-surface-950 overflow-hidden text-text-primary dark:text-text-primary-dark">
-            <ResizablePanels
-                orientation="horizontal"
-                panelSizePercent={sidebarSize}
-                onPanelSizeChange={setSidebarSize}
-                minPanelSizePx={180}
-                firstPanel={
-                    <StorageSidebar
-                        folders={folders}
-                        currentPath={currentPath}
-                        onNavigate={handleNavigate}
-                        loading={loading}
-                    />
-                }
-                secondPanel={
-                    <div className="flex h-full w-full">
-                        {/* Main content */}
-                        <div className="flex-grow flex flex-col min-w-0 h-full">
+        <div className="flex h-full w-full bg-white dark:bg-surface-800 overflow-hidden text-text-primary dark:text-text-primary-dark">
+            <div className="flex h-full w-full">
+                {/* Main content */}
+                <div className="flex-grow flex flex-col min-w-0 h-full">
                             {/* Toolbar */}
-                            <div className={cls("flex items-center justify-between pr-2 border-b bg-white dark:bg-surface-950 shrink-0", defaultBorderMixin)}>
+                            <div className={cls("flex items-center justify-between pr-2 border-b bg-white dark:bg-surface-800 shrink-0 h-10", defaultBorderMixin)}>
                                 <div className="flex items-center gap-1.5 flex-grow overflow-hidden px-3 py-2">
-                                    {/* Breadcrumbs */}
+                                    {/* Breadcrumbs — always visible */}
                                     {currentPath && (
                                         <Tooltip title="Go up">
                                             <IconButton size="small" onClick={handleNavigateUp}>
@@ -933,13 +1177,42 @@ message: e instanceof Error ? e.message : String(e) });
 
                                     <div className="flex-1"/>
 
-                                    {/* FileIcon count */}
-                                    {!loading && (
+                                    {/* Selection actions or file count */}
+                                    {selectedPaths.size > 0 ? (
+                                        <div className="flex items-center gap-1.5 shrink-0">
+                                            <Typography variant="body2" className="text-[13px] font-medium whitespace-nowrap">
+                                                {selectedPaths.size} selected
+                                            </Typography>
+                                            <Button
+                                                size="small"
+                                                variant="text"
+                                                onClick={() => {
+                                                    setDeleteDialogTarget("selection");
+                                                    setDeleteDialogOpen(true);
+                                                }}
+                                            >
+                                                <Trash2Icon size={14} className="mr-1"/>
+                                                Delete
+                                            </Button>
+                                            <Button
+                                                size="small"
+                                                variant="text"
+                                                onClick={() => {
+                                                    setSelectedPaths(new Set());
+                                                    setSelectedFile(null);
+                                                    setSelectedDownloadUrl(null);
+                                                }}
+                                            >
+                                                <XIcon size={14} className="mr-1"/>
+                                                Deselect
+                                            </Button>
+                                        </div>
+                                    ) : !loading ? (
                                         <Chip size="small" className="shrink-0 text-[10px]">
                                             {files.length} file{files.length !== 1 ? "s" : ""}
                                             {folders.length > 0 ? `, ${folders.length} folder${folders.length !== 1 ? "s" : ""}` : ""}
                                         </Chip>
-                                    )}
+                                    ) : null}
                                 </div>
 
                                 <div className="flex shrink-0 items-center justify-end gap-1.5 pr-1">
@@ -948,7 +1221,7 @@ message: e instanceof Error ? e.message : String(e) });
                                         <IconButton
                                             size="small"
                                             onClick={() => setViewMode("grid")}
-                                            className={cls(viewMode === "grid" && "bg-surface-100 dark:bg-surface-950")}
+                                            className={cls(viewMode === "grid" && "bg-surface-100 dark:bg-surface-800")}
                                         >
                                             <LayoutGridIcon size={iconSize.smallest}/>
                                         </IconButton>
@@ -957,13 +1230,13 @@ message: e instanceof Error ? e.message : String(e) });
                                         <IconButton
                                             size="small"
                                             onClick={() => setViewMode("list")}
-                                            className={cls(viewMode === "list" && "bg-surface-100 dark:bg-surface-950")}
+                                            className={cls(viewMode === "list" && "bg-surface-100 dark:bg-surface-800")}
                                         >
                                             <ListIcon size={iconSize.smallest}/>
                                         </IconButton>
                                     </Tooltip>
 
-                                    <div className="h-4 w-px bg-surface-200 dark:bg-surface-950 mx-0.5"/>
+                                    <div className={cls("h-4 w-px mx-0.5", defaultBorderMixin, "bg-surface-200 dark:bg-surface-700")}/>
 
                                     <Tooltip title="Refresh">
                                         <IconButton size="small" onClick={handleRefresh} disabled={loading}>
@@ -971,6 +1244,17 @@ message: e instanceof Error ? e.message : String(e) });
                                         </IconButton>
                                     </Tooltip>
 
+                                    <Tooltip title="New folder">
+                                        <IconButton
+                                            size="small"
+                                            onClick={() => {
+                                                setNewFolderName("");
+                                                setNewFolderDialogOpen(true);
+                                            }}
+                                        >
+                                            <FolderPlusIcon size={iconSize.smallest}/>
+                                        </IconButton>
+                                    </Tooltip>
                                     <Button
                                         size="small"
                                         color="primary"
@@ -982,13 +1266,38 @@ message: e instanceof Error ? e.message : String(e) });
                                 </div>
                             </div>
 
-                            {/* FileIcon grid / list */}
-                            <div className="flex-grow flex flex-col overflow-hidden min-h-0">
+                            {/* File grid / list — drop zone */}
+                            <div {...getDropRootProps()}
+                                 className="flex-grow flex flex-col overflow-hidden min-h-0 relative"
+                                 onClick={(e) => {
+                                     const target = e.target as HTMLElement;
+                                     if (!target.closest("[data-storage-item]") && selectedPaths.size > 0) {
+                                         setSelectedPaths(new Set());
+                                         setSelectedFile(null);
+                                         setSelectedDownloadUrl(null);
+                                     }
+                                 }}
+                            >
+                                <input {...getDropInputProps()} />
                                 {renderContents()}
+                                {/* Drag overlay */}
+                                {isDragActive && (
+                                    <div className="absolute inset-0 z-10 flex items-center justify-center bg-primary/5 dark:bg-primary/10 backdrop-blur-[2px]">
+                                        <div className="flex flex-col items-center gap-2 p-6 rounded-xl border-2 border-dashed border-primary bg-white/80 dark:bg-surface-900/80">
+                                            <UploadCloudIcon className="w-10 h-10 text-primary"/>
+                                            <Typography variant="subtitle2" className="text-primary font-semibold">
+                                                Drop files to upload
+                                            </Typography>
+                                            <Typography variant="caption" color="secondary">
+                                                to /{currentPath || "root"}
+                                            </Typography>
+                                        </div>
+                                    </div>
+                                )}
                             </div>
 
                             {/* Status bar */}
-                            <div className={cls("px-4 py-1.5 border-t bg-surface-50 dark:bg-surface-900 flex items-center justify-between shrink-0", defaultBorderMixin)}>
+                            <div className={cls("px-4 py-1.5 border-t bg-surface-50 dark:bg-surface-800 flex items-center justify-between shrink-0", defaultBorderMixin)}>
                                 <div className="flex items-center gap-4 text-[11px]">
                                     <span className="text-text-disabled dark:text-text-disabled-dark font-bold uppercase tracking-tighter">
                                         Path
@@ -997,11 +1306,15 @@ message: e instanceof Error ? e.message : String(e) });
                                         /{currentPath || ""}
                                     </span>
                                 </div>
-                                {selectedFile && (
+                                {selectedPaths.size > 0 ? (
+                                    <div className="text-[11px] text-text-secondary dark:text-text-secondary-dark">
+                                        {selectedPaths.size} item{selectedPaths.size !== 1 ? "s" : ""} selected
+                                    </div>
+                                ) : selectedFile ? (
                                     <div className="text-[11px] text-text-secondary dark:text-text-secondary-dark">
                                         Selected: <span className="font-mono">{selectedFile.name}</span>
                                     </div>
-                                )}
+                                ) : null}
                             </div>
                         </div>
 
@@ -1019,9 +1332,7 @@ message: e instanceof Error ? e.message : String(e) });
                                 />
                             </div>
                         )}
-                    </div>
-                }
-            />
+            </div>
 
             {/* Upload Dialog */}
             <UploadDialog
@@ -1030,6 +1341,110 @@ message: e instanceof Error ? e.message : String(e) });
                 onClose={() => setUploadDialogOpen(false)}
                 onUpload={handleUpload}
             />
+
+            {/* Delete confirmation dialog */}
+            <Dialog
+                open={deleteDialogOpen}
+                onOpenChange={(open) => {
+                    if (!open && !deleting) {
+                        setDeleteDialogOpen(false);
+                        setDeleteDialogTarget(null);
+                    }
+                }}
+            >
+                <DialogContent>
+                    <Typography variant="subtitle1" className="font-semibold mb-2">
+                        {deleteDialogTarget === "selection"
+                            ? `Delete ${selectedPaths.size} item${selectedPaths.size !== 1 ? "s" : ""}?`
+                            : deleteDialogTarget
+                                ? `Delete folder "${deleteDialogTarget.name}"?`
+                                : "Delete?"}
+                    </Typography>
+                    <Typography variant="body2" color="secondary">
+                        {deleteDialogTarget === "selection"
+                            ? "This will permanently delete all selected files and folders, including their contents. This action cannot be undone."
+                            : "This will permanently delete the folder and all of its contents. This action cannot be undone."}
+                    </Typography>
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        variant="text"
+                        onClick={() => {
+                            setDeleteDialogOpen(false);
+                            setDeleteDialogTarget(null);
+                        }}
+                        disabled={deleting}
+                    >
+                        Cancel
+                    </Button>
+                    <LoadingButton
+                        color="error"
+                        loading={deleting}
+                        onClick={deleteDialogTarget === "selection" ? handleBulkDelete : handleConfirmDeleteFolder}
+                    >
+                        <Trash2Icon size={14} className="mr-1"/>
+                        Delete
+                    </LoadingButton>
+                </DialogActions>
+            </Dialog>
+
+            {/* New Folder Dialog */}
+            <Dialog
+                open={newFolderDialogOpen}
+                onOpenChange={(open) => {
+                    if (!open && !creatingFolder) {
+                        setNewFolderDialogOpen(false);
+                        setNewFolderName("");
+                    }
+                }}
+            >
+                <DialogContent>
+                    <Typography variant="subtitle1" className="font-semibold mb-4">
+                        New Folder
+                    </Typography>
+                    <TextField
+                        autoFocus
+                        size="small"
+                        label="Folder name"
+                        value={newFolderName}
+                        onChange={(e) => setNewFolderName(e.target.value)}
+                        onKeyDown={(e) => {
+                            if (e.key === "Enter" && newFolderName.trim()) {
+                                e.preventDefault();
+                                handleCreateFolder();
+                            }
+                        }}
+                        disabled={creatingFolder}
+                        placeholder="Enter folder name"
+                    />
+                    {currentPath && (
+                        <Typography variant="caption" color="secondary" className="mt-2">
+                            Will be created in <span className="font-mono">/{currentPath}/</span>
+                        </Typography>
+                    )}
+                </DialogContent>
+                <DialogActions>
+                    <Button
+                        variant="text"
+                        onClick={() => {
+                            setNewFolderDialogOpen(false);
+                            setNewFolderName("");
+                        }}
+                        disabled={creatingFolder}
+                    >
+                        Cancel
+                    </Button>
+                    <LoadingButton
+                        color="primary"
+                        loading={creatingFolder}
+                        disabled={!newFolderName.trim()}
+                        onClick={handleCreateFolder}
+                    >
+                        <FolderPlusIcon size={14} className="mr-1"/>
+                        Create
+                    </LoadingButton>
+                </DialogActions>
+            </Dialog>
         </div>
     );
 };