@kyro-cms/admin 0.3.1 → 0.3.4

package/src/components/MediaGallery.tsx

@@ -1,9 +1,10 @@
-import React, { useState, useEffect, useCallback, useRef } from "react";
+import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { Spinner } from "./ui/Spinner";
-import { ConfirmModal } from "./ui/Modal";
 import { SlidePanel } from "./ui/SlidePanel";
 import { Badge } from "./ui/Badge";
+import { Folder } from "./ui/icons";
+
 import {
   Trash2,
   Download,
@@ -19,7 +20,7 @@ import {
   Music,
   FileText,
   Archive,
-} from "lucide-react";
+} from "./ui/icons";
 import { PromptModal } from "./ui/PromptModal";
 import ReactCrop, {
   type Crop,
@@ -36,6 +37,7 @@ import {
   withCacheBust,
   apiUpload,
 } from "../lib/api";
+import { useAuthStore, useUIStore } from "../lib/stores";
 
 interface MediaItem {
   id: string;
@@ -98,1339 +100,1022 @@ function getFileType(mimeType: string): FilterType {
   if (
     mimeType.includes("zip") ||
     mimeType.includes("tar") ||
-    mimeType.includes("rar")
+    mimeType.includes("archive")
   )
     return "archive";
   if (
     mimeType.includes("pdf") ||
-    mimeType.includes("document") ||
+    mimeType.includes("doc") ||
     mimeType.includes("text")
   )
     return "document";
   return "other";
 }
 
-function getFileExtension(filename: string | undefined): string {
-  if (!filename) return "FILE";
-  const parts = filename.split(".");
-  if (parts.length > 1) {
-    return parts.pop()!.toUpperCase();
-  }
-  return "FILE";
-}
+export function MediaGallery({
+  onSelect,
+  multiple = false,
+}: {
+  onSelect?: (items: MediaItem[]) => void;
+  multiple?: boolean;
+}) {
+  const { permissions } = useAuthStore();
+  const canUpload = permissions?.media?.create !== false;
+  const canDelete = permissions?.media?.delete !== false;
+  const canUpdate = permissions?.media?.update !== false;
 
-export function MediaGallery() {
   const [items, setItems] = useState<MediaItem[]>([]);
   const [loading, setLoading] = useState(true);
-  const [uploading, setUploading] = useState(false);
-  const [uploadProgress, setUploadProgress] = useState<number>(0);
+  const [folders, setFolders] = useState<string[]>([]);
+  const [currentFolder, setCurrentFolder] = useState<string>("");
+  const [search, setSearch] = useState("");
   const [filter, setFilter] = useState<FilterType>("all");
-  const [searchQuery, setSearchQuery] = useState("");
-  const [selectedItems, setSelectedItems] = useState<Set<string>>(new Set());
-  const [uploadQueue, setUploadQueue] = useState<
-    Array<{
-      name: string;
-      idx: number;
-      progress: number;
-      controller?: AbortController;
-    }>
-  >([]);
-  const [viewMode, setViewMode] = useState<"grid" | "list">("grid");
-  const [lightboxItem, setLightboxItem] = useState<MediaItem | null>(null);
-  const [uploadDragOver, setUploadDragOver] = useState(false);
-  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [view, setView] = useState<"grid" | "list">("grid");
   const [panelItem, setPanelItem] = useState<MediaItem | null>(null);
-  const [panelName, setPanelName] = useState<string>("");
-  const [panelAlt, setPanelAlt] = useState<string>("");
-  const [currentFolder, setCurrentFolder] = useState<string>("");
-  const [availableFolders, setAvailableFolders] = useState<string[]>([]);
-  const [uploadFolder, setUploadFolder] = useState<string>("");
+  const [showPreview, setShowPreview] = useState(false);
+  const [showCrop, setShowCrop] = useState(false);
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<Record<string, number>>(
+    {},
+  );
   const [showNewFolderModal, setShowNewFolderModal] = useState(false);
-  const [showDeleteFolderModal, setShowDeleteFolderModal] = useState(false);
-  const [folderToDelete, setFolderToDelete] = useState<string>("");
-
+  const [storageConfigured, setStorageConfigured] = useState<boolean | null>(
+    null,
+  );
+  const [showStorageConfigModal, setShowStorageConfigModal] = useState(false);
   const [page, setPage] = useState(1);
-  const [hasMore, setHasMore] = useState(true);
-  const [sortBy, setSortBy] = useState("createdAt");
-  const [sortDir, setSortDir] = useState("desc");
-  const observerTarget = useRef<HTMLDivElement>(null);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const limit = 40;
+
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const { confirm, alert } = useUIStore();
+  const [isDragging, setIsDragging] = useState(false);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [crop, setCrop] = useState<Crop>();
-  const [showCrop, setShowCrop] = useState(false);
-  const [copiedId, setCopiedId] = useState<string | null>(null);
-  const [showStorageConfigModal, setShowStorageConfigModal] = useState(false);
-  const [storageConfigured, setStorageConfigured] = useState(true);
-  const [deleteConfirm, setDeleteConfirm] = useState<{
-    open: boolean;
-    count: number;
-    ids?: string[];
-  }>({ open: false, count: 0 });
   const imgRef = useRef<HTMLImageElement>(null);
 
-  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    const { naturalWidth: width, naturalHeight: height } = e.currentTarget;
-    const defaultCrop = centerCrop(
-      makeAspectCrop({ unit: "%", width: 90 }, width / height, width, height),
-      width,
-      height,
-    );
-    setCrop(defaultCrop);
-  };
+  const loadMedia = useCallback(async () => {
+    setLoading(true);
+    try {
+      const params = new URLSearchParams({
+        page: page.toString(),
+        limit: limit.toString(),
+      });
+      if (currentFolder) params.append("folder", currentFolder);
+      if (search) params.append("search", search);
+      if (filter !== "all") params.append("type", filter);
 
-  const openMetadataPanel = (item: MediaItem) => {
-    setPanelItem(item);
-    setPanelName(item.title ?? item.filename);
-    setPanelAlt(item.alt ?? "");
-  };
+      const result = await apiGet(withCacheBust(`/api/media?${params}`));
+      setItems((result.docs || []).map((doc: Record<string, unknown>) => ({
+        ...doc,
+        type: getFileType(doc.mimeType),
+      })));
+      setTotal(result.totalDocs || 0);
+      setTotalPages(result.totalPages || 1);
+    } catch (error) {
+      console.error("Failed to load media:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [page, currentFolder, search, filter]);
 
   const loadFolders = useCallback(async () => {
     try {
-      const data = await apiGet("/api/media/folders");
-      setAvailableFolders((data.folders || []).sort());
-    } catch (e) {
-      console.error("loadFolders error:", e);
+      const result = await apiGet(withCacheBust("/api/media/folders"));
+      setFolders(Array.isArray(result) ? result : result.folders || []);
+    } catch (error) {
+      console.error("Failed to load folders:", error);
     }
   }, []);
 
-  const loadMedia = useCallback(
-    async (reset = false) => {
-      try {
-        if (reset) setLoading(true);
-        const currentPage = reset ? 1 : page;
-        const typeParam = filter !== "all" ? `&type=${filter}` : "";
-        const searchParam = searchQuery
-          ? `&search=${encodeURIComponent(searchQuery)}`
-          : "";
-        const folderParam = currentFolder
-          ? `&folder=${encodeURIComponent(currentFolder)}`
-          : "";
-
-        const result = await apiGet(
-          withCacheBust(
-            `/api/media?limit=30&page=${currentPage}&sortBy=${sortBy}&sortDir=${sortDir}${typeParam}${searchParam}${folderParam}`,
-          ),
-        );
-
-        if (reset) {
-          setItems(result.docs || []);
-        } else {
-          setItems((prev) => {
-            const existingIds = new Set(prev.map((i) => i.id));
-            const newItems = (result.docs || []).filter(
-              (i: any) => !existingIds.has(i.id),
-            );
-            return [...prev, ...newItems];
-          });
-        }
-        setHasMore(result.page < result.totalPages);
-        if (reset) setPage(2);
-        else setPage((p) => p + 1);
-      } catch (error) {
-        console.error("Failed to load media:", error);
-      } finally {
-        if (reset) setLoading(false);
-      }
-    },
-    [page, filter, searchQuery, currentFolder, sortBy, sortDir],
-  );
+  const checkStorage = useCallback(async () => {
+    try {
+      const res = await apiGet("/api/globals/storage-settings");
+      const isConfigured = !!res?.data?.provider;
+      setStorageConfigured(isConfigured);
+    } catch (e) {
+      setStorageConfigured(false);
+    }
+  }, []);
 
   useEffect(() => {
-    // Check if storage settings are configured
-    apiGet("/api/storage-status")
-      .then((status) => {
-        // If not configured, show modal to configure
-        if (!status.configured) {
-          setStorageConfigured(false);
-          setShowStorageConfigModal(true);
-        }
-      })
-      .catch(() => {
-        setStorageConfigured(false);
-        setShowStorageConfigModal(true);
-      });
-  }, []);
+    checkStorage();
+  }, [checkStorage]);
 
   useEffect(() => {
-    loadMedia(true);
-  }, [filter, searchQuery, currentFolder, sortBy, sortDir]);
+    loadMedia();
+  }, [loadMedia]);
 
   useEffect(() => {
     loadFolders();
   }, [loadFolders]);
 
   useEffect(() => {
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && hasMore && !loading) {
-          loadMedia();
-        }
-      },
-      { rootMargin: "200px" },
-    );
-    if (observerTarget.current) observer.observe(observerTarget.current);
-    return () => observer.disconnect();
-  }, [hasMore, loadMedia, loading]);
+    const handlePaste = (e: ClipboardEvent) => {
+      const files = e.clipboardData?.files;
+      if (files && files.length > 0) {
+        handleUpload(files);
+      }
+    };
+    window.addEventListener("paste", handlePaste);
+    return () => window.removeEventListener("paste", handlePaste);
+  }, [currentFolder, storageConfigured]);
 
-  const handleUpload = async (files: FileList) => {
-    setUploading(true);
-    setUploadProgress(0);
-    setUploadQueue([]);
-    const uploaded: MediaItem[] = [];
-    const fileArray = Array.from(files);
+  const handleUpload = async (files: FileList | File[]) => {
+    if (!storageConfigured) {
+      setShowStorageConfigModal(true);
+      return;
+    }
 
-    setUploadQueue(
-      fileArray.map((f, idx) => ({
-        name: f.name,
-        idx,
-        progress: 0,
-        controller: undefined,
-      })),
-    );
+    setUploading(true);
+    const newProgress = { ...uploadProgress };
 
-    for (let i = 0; i < fileArray.length; i++) {
-      const file = fileArray[i];
+    for (let i = 0; i < files.length; i++) {
+      const file = files[i];
       try {
-        const ac = new AbortController();
-        setUploadQueue((prev) =>
-          prev.map((q) => (q.idx === i ? { ...q, controller: ac } : q)),
-        );
         const formData = new FormData();
         formData.append("file", file);
-        if (uploadFolder) formData.append("folder", uploadFolder);
+        if (currentFolder) formData.append("folder", currentFolder);
 
-        const result = await apiUpload("/api/upload", formData);
-        const newItem: MediaItem = {
-          ...result,
-          type: getFileType(result.mimeType || file.type) as MediaItem["type"],
-        };
-        uploaded.push(newItem);
+        await apiUpload("/api/media/upload", formData, (progress: number) => {
+          setUploadProgress((prev) => ({
+            ...prev,
+            [file.name]: progress,
+          }));
+        });
       } catch (error) {
-        console.error(`Error uploading ${file.name}:`, error);
+        console.error(`Upload failed for ${file.name}:`, error);
+        alert({ title: "Upload Failed", message: `Failed to upload ${file.name}` });
       }
-      const pct = Math.round(((i + 1) / fileArray.length) * 100);
-      setUploadProgress(pct);
-      setUploadQueue((prev) =>
-        prev.map((q) => (q.idx === i ? { ...q, progress: 100 } : q)),
-      );
     }
 
-    if (uploaded.length > 0) loadMedia(true);
     setUploading(false);
-    setUploadProgress(0);
-    setUploadQueue([]);
-  };
-
-  const handleDelete = async (id: string) => {
-    setDeleteConfirm({ open: true, count: 1, ids: [id] });
-  };
-
-  const confirmDelete = async () => {
-    const { ids } = deleteConfirm;
-    if (!ids?.length) return;
-    try {
-      for (const id of ids) {
-        await apiDelete(`/api/media/${id}`);
-      }
-      loadMedia(true);
-      setSelectedItems(new Set());
-    } catch {}
-    setDeleteConfirm({ open: false, count: 0 });
-  };
-
-  const handleBulkDelete = async () => {
-    if (selectedItems.size === 0) return;
-    setDeleteConfirm({
-      open: true,
-      count: selectedItems.size,
-      ids: Array.from(selectedItems),
-    });
-  };
-
-  const toggleSelect = (id: string) => {
-    setSelectedItems((prev) => {
-      const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
-      return next;
-    });
-  };
-
-  const selectAll = () => {
-    if (selectedItems.size === items.length) setSelectedItems(new Set());
-    else setSelectedItems(new Set(items.map((item) => item.id)));
+    setUploadProgress({});
+    loadMedia();
+    loadFolders();
   };
 
-  const cancelUpload = (idx: number) => {
-    setUploadQueue((prev) => {
-      const target = prev.find((p) => p.idx === idx);
-      if (target && (target as any).controller) {
+  const handleBulkDelete = () => {
+    confirm({
+      title: "Delete Media",
+      message: `Are you sure you want to delete ${selectedIds.size} item(s)? This cannot be undone.`,
+      variant: "danger",
+      onConfirm: async () => {
         try {
-          (target as any).controller.abort();
-        } catch {}
+          for (const id of Array.from(selectedIds)) {
+            await apiDelete(`/api/media/${id}`);
+          }
+          setSelectedIds(new Set());
+          loadMedia();
+        } catch (error) {
+          console.error("Bulk delete failed:", error);
+          alert({ title: "Error", message: "Failed to delete some items" });
+        }
       }
-      return prev.filter((p) => p.idx !== idx);
     });
   };
 
-  const handleDrop = (e: React.DragEvent) => {
-    e.preventDefault();
-    setUploadDragOver(false);
-    if (e.dataTransfer.files.length > 0) {
-      handleUpload(e.dataTransfer.files);
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    e.preventDefault();
-    setUploadDragOver(true);
-  };
-
-  const handleDragLeave = () => {
-    setUploadDragOver(false);
-  };
-
-  const handleMoveSelected = async (targetFolder: string) => {
-    try {
-      setLoading(true);
-      const ids = Array.from(selectedItems);
-      for (const id of ids) {
-        await apiPatch(`/api/media/${id}`, { folder: targetFolder });
-      }
-      setSelectedItems(new Set());
-      loadMedia(true);
-      loadFolders();
-    } catch (e) {
-      console.error("Move error:", e);
-    } finally {
-      setLoading(false);
+  const handleSelectOne = (id: string, e: React.SyntheticEvent) => {
+    e.stopPropagation();
+    const newSet = new Set(selectedIds);
+    if (newSet.has(id)) {
+      newSet.delete(id);
+    } else {
+      if (!multiple) newSet.clear();
+      newSet.add(id);
     }
+    setSelectedIds(newSet);
   };
 
   const createFolder = async (name: string) => {
-    if (!name) return;
     try {
-      await apiPost("/api/media/folders", {
-        name,
-        parentPath: currentFolder || "",
-      });
-      const newPath = currentFolder ? `${currentFolder}/${name}` : name;
-      setCurrentFolder(newPath);
-      setUploadFolder(newPath);
+      await apiPost("/api/media/folders", { name });
       loadFolders();
-    } catch (e) {
-      console.error("Failed to create folder:", e);
+      setShowNewFolderModal(false);
+    } catch (error) {
+      console.error("Failed to create folder:", error);
     }
-    setShowNewFolderModal(false);
   };
 
-  const confirmDeleteFolder = (folder: string) => {
-    setFolderToDelete(folder);
-    setShowDeleteFolderModal(true);
+  const handleDeleteFolder = (folder: string) => {
+    confirm({
+      title: "Delete Folder",
+      message: `Are you sure you want to delete the folder "${folder}"? All media in this folder will be moved to the root.`,
+      variant: "danger",
+      confirmLabel: "Delete Folder",
+      onConfirm: async () => {
+        try {
+          await apiDelete(`/api/media/folders?path=${encodeURIComponent(folder)}`);
+          if (currentFolder === folder) setCurrentFolder("");
+          loadFolders();
+          loadMedia();
+        } catch (error) {
+          console.error("Failed to delete folder:", error);
+          alert({ title: "Error", message: "Failed to delete folder" });
+        }
+      }
+    });
   };
 
-  const deleteFolder = async () => {
-    if (!folderToDelete) return;
+  const updateMetadata = async (id: string, data: Partial<MediaItem>) => {
     try {
-      const result = await apiDelete(
-        `/api/media/folders?path=${encodeURIComponent(folderToDelete)}`,
-      );
-      console.log("[deleteFolder] Response:", result);
-      // Clear items first, then reload
-      setItems([]);
-      if (currentFolder === folderToDelete) {
-        setCurrentFolder("");
+      const result = await apiPatch(`/api/media/${id}`, data);
+      setItems((prev) => prev.map((item) => (item.id === id ? result.doc : item)));
+      if (panelItem?.id === id) {
+        setPanelItem(result.doc);
       }
-      loadFolders();
-      // Force fresh load by resetting page
-      setPage(1);
-      loadMedia(true);
-    } catch (e) {
-      console.error("Failed to delete folder:", e);
+    } catch (error) {
+      console.error("Failed to update metadata:", error);
     }
-    setShowDeleteFolderModal(false);
-    setFolderToDelete("");
   };
 
-  const savePanelMetadata = async () => {
-    if (!panelItem) return;
-    try {
-      await apiPatch(`/api/media/${panelItem.id}`, {
-        title: panelName,
-        alt: panelAlt,
-      });
-      setPanelItem(null);
-      loadMedia(true);
-    } catch (e) {
-      console.error("Failed to save metadata:", e);
-    }
+  const onImageLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {
+    const { width, height } = e.currentTarget;
+    const initialCrop = centerCrop(
+      makeAspectCrop({ unit: "%", width: 90 }, 1, width, height),
+      width,
+      height,
+    );
+    setCrop(initialCrop);
   };
 
   const onCropComplete = async () => {
-    if (!imgRef.current || !crop || !panelItem) return;
+    if (!crop || !imgRef.current || !panelItem) return;
 
-    // Convert any percentage crops into standard pixels
-    const pixelCrop = convertToPixelCrop(
-      crop,
-      imgRef.current.width,
-      imgRef.current.height,
-    );
+    setUploading(true);
+    try {
+      const pixelCrop = convertToPixelCrop(
+        crop,
+        imgRef.current.width,
+        imgRef.current.height,
+      );
 
-    const canvas = document.createElement("canvas");
-    const scaleX = imgRef.current.naturalWidth / imgRef.current.width;
-    const scaleY = imgRef.current.naturalHeight / imgRef.current.height;
+      const canvas = document.createElement("canvas");
+      const scaleX = imgRef.current.naturalWidth / imgRef.current.width;
+      const scaleY = imgRef.current.naturalHeight / imgRef.current.height;
 
-    // Set actual canvas geometry to the exact pixel width * scale
-    canvas.width = pixelCrop.width * scaleX;
-    canvas.height = pixelCrop.height * scaleY;
+      canvas.width = pixelCrop.width;
+      canvas.height = pixelCrop.height;
+      const ctx = canvas.getContext("2d");
 
-    const ctx = canvas.getContext("2d");
-    if (!ctx) return;
+      if (ctx) {
+        ctx.drawImage(
+          imgRef.current,
+          pixelCrop.x * scaleX,
+          pixelCrop.y * scaleY,
+          pixelCrop.width * scaleX,
+          pixelCrop.height * scaleY,
+          0,
+          0,
+          pixelCrop.width,
+          pixelCrop.height,
+        );
 
-    ctx.drawImage(
-      imgRef.current,
-      pixelCrop.x * scaleX,
-      pixelCrop.y * scaleY,
-      pixelCrop.width * scaleX,
-      pixelCrop.height * scaleY,
-      0,
-      0,
-      pixelCrop.width * scaleX,
-      pixelCrop.height * scaleY,
-    );
+        const blob = await new Promise<Blob | null>((resolve) =>
+          canvas.toBlob(resolve, panelItem.mimeType),
+        );
 
-    canvas.toBlob(
-      async (blob) => {
-        if (!blob) return;
-        const formData = new FormData();
-        const newFile = new File([blob], panelItem.filename, {
-          type: "image/webp",
-        });
-        formData.append("file", newFile);
+        if (blob) {
+          const formData = new FormData();
+          formData.append("file", blob, `cropped-${panelItem.filename}`);
+          if (currentFolder) formData.append("folder", currentFolder);
 
-        setUploading(true);
-        try {
-          const res = await apiUpload("/api/upload", formData);
-          if (res.ok) {
-            setShowCrop(false);
-            setPanelItem(null);
-            loadMedia(true);
-          }
-        } catch (e) {
-          console.error("Crop save failed", e);
-        } finally {
-          setUploading(false);
+          await apiUpload("/api/media", formData);
+          loadMedia();
+          setShowCrop(false);
         }
-      },
-      "image/webp",
-      0.9,
-    );
+      }
+    } catch (err) {
+      console.error("Crop failed:", err);
+    } finally {
+      setUploading(false);
+    }
   };
 
-  const totalSize = items.reduce((acc, item) => acc + (item.fileSize || 0), 0);
-
-  const FilterButton = ({
-    type,
-    label,
-  }: {
-    type: FilterType;
-    label: string;
-  }) => (
-    <button
-      type="button"
-      onClick={() => setFilter(type)}
-      className={`px-4 py-2 text-sm font-bold rounded-lg transition-colors ${
-        filter === type
-          ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]"
-          : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
-      }`}
-    >
-      {label}
-    </button>
-  );
+  const stats = useMemo(() => {
+    return items.reduce(
+      (acc, item) => {
+        acc.totalSize += item.fileSize || 0;
+        return acc;
+      },
+      { totalSize: 0 },
+    );
+  }, [items]);
 
   return (
-    <div className="h-full flex flex-col bg-[var(--kyro-bg)] rounded-xl overflow-hidden relative">
-      {/* Floating Bulk Actions Bar */}
-      {selectedItems.size > 0 && (
-        <div className="absolute bottom-10 left-1/2 -translate-x-1/2 z-[100] animate-in slide-in-from-bottom-10 fade-in duration-500">
-          <div className="surface-tile py-4 px-8 flex items-center gap-8 shadow-2xl border-none ring-1 ring-white/10 backdrop-blur-2xl bg-black/80 text-white rounded-full">
-            <div className="flex items-center gap-4 border-r border-white/10 pr-6 mr-6">
-              <Badge className="bg-[var(--kyro-primary)] text-white">
-                {selectedItems.size}
-              </Badge>
-              <span className="text-xs font-black uppercase tracking-widest opacity-60">
-                Items Selected
+    <div
+      className={`flex flex-col h-full bg-[var(--kyro-bg)] transition-all duration-300 ${isDragging ? "ring-4 ring-[var(--kyro-sidebar-active)] ring-inset" : ""}`}
+      onDragOver={(e) => {
+        e.preventDefault();
+        setIsDragging(true);
+      }}
+      onDragLeave={() => setIsDragging(false)}
+      onDrop={(e) => {
+        e.preventDefault();
+        setIsDragging(false);
+        if (e.dataTransfer.files) handleUpload(e.dataTransfer.files);
+      }}
+    >
+      {/* Top Bar */}
+      <div className="flex flex-col lg:flex-row lg:items-center justify-between p-6 gap-6 border-b border-[var(--kyro-border)] surface-tile backdrop-blur-md sticky top-0 z-40 rounded-xl">
+        <div className="flex items-center gap-4">
+          <div>
+            <h2 className="text-xl font-bold tracking-tighter text-[var(--kyro-text-primary)]">
+              Media Library
+            </h2>
+            <div className="flex items-center gap-3 mt-1">
+              <span className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50">
+                {total} Items · {formatFileSize(stats.totalSize)}
               </span>
             </div>
-
-            <div className="flex items-center gap-4 px-4">
-              <button
-                type="button"
-                onClick={handleBulkDelete}
-                className="p-3 bg-[var(--kyro-danger-bg)] text-[var(--kyro-danger)] hover:bg-[var(--kyro-danger)] hover:text-white rounded-full transition-all"
-                title="Delete Selected"
-              >
-                <Trash2 className="w-5 h-5" />
-              </button>
-              <button
-                type="button"
-                className="p-3 bg-white/10 text-white hover:bg-white/20 rounded-full transition-all"
-                title="Download Collection"
-              >
-                <Download className="w-5 h-5" />
-              </button>
-            </div>
-
-            <button
-              type="button"
-              onClick={() => setSelectedItems(new Set())}
-              className="p-2 hover:bg-white/10 rounded-full transition-all"
-            >
-              <X className="w-4 h-4" />
-            </button>
           </div>
         </div>
-      )}
 
-      <div className="flex-shrink-0 p-8 border-b border-[var(--kyro-border)] bg-[var(--kyro-surface)]">
-        <div className="flex items-center justify-between mb-8">
-          <div>
-            <h1 className="text-2xl font-black text-[var(--kyro-text-primary)]">
-              Media Library
-            </h1>
-            <p className="text-sm text-[var(--kyro-text-secondary)] mt-1">
-              {items.length} files &middot; {formatFileSize(totalSize)} used
-            </p>
+        <div className="flex items-center gap-3 flex-wrap lg:flex-nowrap">
+          <div className="relative group flex-1 min-w-[240px]">
+            <svg
+              className="absolute left-4 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-secondary)] opacity-40 group-focus-within:opacity-100 transition-opacity"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth="2.5"
+                d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+              />
+            </svg>
+            <input
+              type="text"
+              placeholder="Search assets..."
+              value={search}
+              onChange={(e) => setSearch(e.target.value)}
+              className="w-full pl-11 pr-4 py-2.5 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] transition-all text-xs font-bold"
+            />
           </div>
-          <div className="flex items-center gap-3">
+
+          <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
             <button
-              type="button"
-              onClick={() => setViewMode("grid")}
-              className={`p-2 rounded-lg ${viewMode === "grid" ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+              onClick={() => setView("grid")}
+              className={`p-2 rounded-lg transition-all ${view === "grid" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
             >
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6zM14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6zM4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2zM14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"
-                />
-              </svg>
+              <Grid className="w-4 h-4" />
             </button>
             <button
-              type="button"
-              onClick={() => setViewMode("list")}
-              className={`p-2 rounded-lg ${viewMode === "list" ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)]" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"}`}
+              onClick={() => setView("list")}
+              className={`p-2 rounded-lg transition-all ${view === "list" ? "bg-[var(--kyro-surface)] shadow-sm text-[var(--kyro-text-primary)]" : "text-[var(--kyro-text-secondary)] opacity-50 hover:opacity-100"}`}
             >
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 6h16M4 12h16M4 18h16"
-                />
-              </svg>
+              <FileIcon className="w-4 h-4" />
             </button>
           </div>
+
+          {canUpload && (
+            <button
+              onClick={() => fileInputRef.current?.click()}
+              className="flex items-center gap-2 px-6 py-2.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-xs shadow-lg active:scale-95 transition-all"
+            >
+              <Maximize2 className="w-4 h-4" />
+              Upload
+            </button>
+          )}
         </div>
+      </div>
 
-        <div className="flex flex-col sm:flex-row gap-4 mb-4 items-start sm:items-center w-full">
-          <button
-            type="button"
-            onClick={() => fileInputRef.current?.click()}
-            disabled={uploading}
-            className="flex items-center gap-2 px-3 py-1.5 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-full font-bold text-xs hover:opacity-90 transition-colors"
-          >
-            {uploading ? (
-              <Spinner size="sm" />
-            ) : (
-              <svg
-                className="w-4 h-4"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-8l-4-4m0 0L8 8m4-4v12"
-                />
-              </svg>
-            )}
-            Upload
-          </button>
-          {availableFolders.length > 0 && (
-            <div className="flex bg-[var(--kyro-surface-accent)] rounded-full p-1 gap-1 overflow-x-auto items-center">
-              <button
-                type="button"
-                onClick={() => setCurrentFolder("")}
-                className={`flex-shrink-0 px-3 py-1 rounded-full text-xs font-bold transition-colors ${!currentFolder ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-sm" : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)]"}`}
-              >
-                All
-              </button>
-              {availableFolders.map((folder) => (
-                <div key={folder} className="flex items-center group">
-                  <button
-                    type="button"
-                    onClick={() => setCurrentFolder(folder)}
-                    className={`flex-shrink-0 px-3 py-1 rounded-full text-xs font-bold transition-colors ${currentFolder === folder ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-sm" : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface)]"}`}
-                  >
-                    {folder}
-                  </button>
+      <div className="flex flex-1 min-h-0 overflow-hidden">
+        {/* Folders Sidebar */}
+        <div className="w-64 border-r border-[var(--kyro-border)] surface-tile mt-6 overflow-y-auto hidden md:block">
+          <div className="p-6 space-y-6">
+            <div>
+              <span className="text-[10px] font-bold  tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40 block mb-4">
+                Quick Filters
+              </span>
+              <div className="space-y-1">
+                {(
+                  [
+                    "all",
+                    "image",
+                    "video",
+                    "audio",
+                    "document",
+                    "archive",
+                  ] as const
+                ).map((t) => (
                   <button
-                    type="button"
-                    onClick={() => confirmDeleteFolder(folder)}
-                    className="flex-shrink-0 p-1 rounded-full text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)] opacity-0 group-hover:opacity-100 transition-opacity ml-1"
-                    title="Delete folder"
+                    key={t}
+                    onClick={() => setFilter(t)}
+                    className={`w-full flex items-center gap-3 px-4 py-2 rounded-xl text-[11px] font-bold capitalize transition-all ${filter === t ? "text-[var(--kyro-text-primary)] bg-[var(--kyro-surface-accent)]" : "text-[var(--kyro-text-secondary)] hover:text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)]/50"}`}
                   >
-                    <svg
-                      className="w-3 h-3"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M6 18L18 6M6 6l12 12"
-                      />
-                    </svg>
+                    <span
+                      className={`w-1.5 h-1.5 rounded-full ${filter === t ? "bg-[var(--kyro-primary)]" : "bg-transparent border border-current opacity-30"}`}
+                    />
+                    {t}
                   </button>
-                </div>
-              ))}
+                ))}
+              </div>
             </div>
-          )}
-          <button
-            type="button"
-            onClick={() => setShowNewFolderModal(true)}
-            className="flex items-center gap-2 px-3 py-1.5 border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded-full font-bold text-xs hover:bg-[var(--kyro-surface-accent)] transition-colors"
-          >
-            <FolderPlus className="w-4 h-4" />
-            New Folder
-          </button>
-          <select
-            value={uploadFolder}
-            onChange={(e) => setUploadFolder(e.target.value)}
-            className="px-2 py-1.5 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-full text-xs font-bold"
-          >
-            <option value="">Root</option>
-            {availableFolders.map((folder) => (
-              <option key={folder} value={folder}>
-                {folder}
-              </option>
-            ))}
-          </select>
-          <select
-            value={`${sortBy}-${sortDir}`}
-            onChange={(e) => {
-              const [sb, sd] = e.target.value.split("-");
-              setSortBy(sb);
-              setSortDir(sd);
-            }}
-            className="px-2 py-1.5 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-full text-xs font-bold ml-auto"
-          >
-            <option value="createdAt-desc">Newest First</option>
-            <option value="createdAt-asc">Oldest First</option>
-            <option value="size-desc">Largest Size</option>
-            <option value="size-asc">Smallest Size</option>
-            <option value="name-asc">Name (A-Z)</option>
-            <option value="name-desc">Name (Z-A)</option>
-          </select>
-        </div>
-
-        <div className="relative mb-4">
-          <svg
-            className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-[var(--kyro-text-muted)]"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={2}
-              d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
-            />
-          </svg>
-          <input
-            type="text"
-            value={searchQuery}
-            onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Search files..."
-            className="w-full pl-10 pr-4 py-2 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-sm focus:outline-none focus:border-[var(--kyro-border-active)]"
-          />
-        </div>
-
-        <div
-          className={`flex-shrink-0 mx-6 mt-4 p-8 border-2 border-dashed rounded-xl text-center transition-colors ${
-            uploadDragOver
-              ? "border-[var(--kyro-border-active)] bg-[var(--kyro-surface-accent)] bg-opacity-20"
-              : "border-[var(--kyro-border)] hover:border-[var(--kyro-border-active)] hover:bg-[var(--kyro-surface-accent)]"
-          }`}
-          onDrop={handleDrop}
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onClick={() => fileInputRef.current?.click()}
-        >
-          <svg
-            className={`w-12 h-12 mx-auto mb-3 ${
-              uploadDragOver
-                ? "text-[var(--kyro-text-primary)]"
-                : "text-[var(--kyro-text-muted)]"
-            }`}
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1.5}
-              d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-            />
-          </svg>
-          <p className="text-[var(--kyro-text-secondary)] font-medium">
-            {uploadDragOver
-              ? "Drop files here"
-              : "Drag and drop files here, or click Upload"}
-          </p>
-          <p className="text-xs text-[var(--kyro-text-muted)] mt-1">
-            Supports images, videos, audio, documents, and archives
-          </p>
-        </div>
 
-        {(uploading || uploadProgress > 0) && (
-          <div className="w-full mt-4 flex items-center gap-4">
-            <div className="flex-1 h-2 w-full bg-[var(--kyro-surface-accent)] rounded-full overflow-hidden">
-              <div
-                className="h-2 bg-[var(--kyro-sidebar-active)] transition-all duration-200"
-                style={{ width: `${uploadProgress}%` }}
-              />
-            </div>
-            <div className="text-xs text-[var(--kyro-text-secondary)] whitespace-nowrap">
-              {uploadQueue.length > 0 ? (
-                <span>
-                  {uploadQueue.filter((q) => q.progress === 100).length} /{" "}
-                  {uploadQueue.length}
+            <div className="pt-6 border-t border-[var(--kyro-border)]">
+              <div className="flex items-center justify-between mb-4">
+                <span className="text-[10px] font-bold  tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40">
+                  Folders
                 </span>
-              ) : (
-                <span>{uploadProgress}%</span>
-              )}
-            </div>
-            {uploadQueue.length > 1 && (
-              <span className="text-xs text-[var(--kyro-text-muted)]">
-                Uploading {uploadQueue.length} files...
-              </span>
-            )}
-          </div>
-        )}
-
-        <div className="flex items-center gap-2 mt-4">
-          <FilterButton type="all" label="All" />
-          <FilterButton type="image" label="Images" />
-          <FilterButton type="video" label="Videos" />
-          <FilterButton type="audio" label="Audio" />
-          <FilterButton type="document" label="Documents" />
-          <FilterButton type="archive" label="Archives" />
-
-          {selectedItems.size > 0 && (
-            <div className="ml-auto flex items-center gap-3 bg-[var(--kyro-surface-accent)] px-4 py-2 rounded-2xl border border-[var(--kyro-border)] shadow-sm animate-in fade-in slide-in-from-right-4">
-              <span className="text-[10px] font-black uppercase tracking-widest opacity-40 mr-2">
-                {selectedItems.size} Selected
-              </span>
-              <button
-                type="button"
-                onClick={() => setSelectedItems(new Set())}
-                className="text-[10px] font-black uppercase tracking-widest text-[var(--kyro-danger)] hover:underline"
-              >
-                Clear
-              </button>
-            </div>
-          )}
-        </div>
-      </div>
-
-      <div className="flex-1 overflow-y-auto pt-8 pb-32 px-2 bg-[var(--kyro-surface)]">
-        {loading ? (
-          <div className="flex items-center justify-center h-full">
-            <Spinner size="lg" />
-          </div>
-        ) : items.length === 0 ? (
-          <div className="flex flex-col items-center justify-center h-full text-[var(--kyro-text-muted)]">
-            <svg
-              className="w-16 h-16 mb-4 opacity-50"
-              fill="none"
-              stroke="currentColor"
-              viewBox="0 0 24 24"
-            >
-              <path
-                strokeLinecap="round"
-                strokeLinejoin="round"
-                strokeWidth={1.5}
-                d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
-              />
-            </svg>
-            <p className="font-medium">No media files found</p>
-            <p className="text-sm mt-1">Upload some files to get started</p>
-          </div>
-        ) : viewMode === "grid" ? (
-          <div className="columns-2 sm:columns-3 md:columns-4 lg:columns-5 gap-2 space-y-2">
-            {items.map((item, index) => (
-              <div
-                key={index}
-                draggable
-                onDragStart={(e) => {
-                  e.dataTransfer.setData("text/plain", item.id);
-                  e.dataTransfer.effectAllowed = "move";
-                }}
-                className={`group relative rounded-2xl overflow-hidden bg-[var(--kyro-bg-secondary)] border-2 transition-all duration-500 cursor-move shadow-sm hover:shadow-2xl hover:-translate-y-1 mb-6 break-inside-avoid ${selectedItems.has(item.id) ? "border-[var(--kyro-primary)] ring-2 ring-[var(--kyro-primary)]" : "border-transparent hover:border-[var(--kyro-primary)]/20"}`}
-              >
-                <div
-                  className={`${item.type === "image" ? "aspect-auto" : "aspect-square"} flex items-center justify-center cursor-pointer`}
-                  onClick={() => {
-                    openMetadataPanel(item);
-                  }}
-                >
-                  {item.type === "image" && item.thumbnailUrl ? (
-                    <img
-                      src={getAbsoluteUrl(item.thumbnailUrl)}
-                      alt={item.alt || item.title}
-                      className="w-full h-auto object-cover"
-                      loading="lazy"
-                    />
-                  ) : item.type === "image" ? (
-                    <img
-                      src={getAbsoluteUrl(item.url)}
-                      alt={item.alt || item.title}
-                      className="w-full h-auto object-cover"
-                      loading="lazy"
-                    />
-                  ) : (
-                    <div className="w-full h-full flex flex-col items-center justify-center bg-[var(--kyro-surface-accent)] rounded-md text-[var(--kyro-text-muted)] group-hover:text-[var(--kyro-primary)] transition-colors">
-                      {item.type === "video" ? (
-                        <Film className="w-12 h-12 mb-2" />
-                      ) : item.type === "audio" ? (
-                        <Music className="w-12 h-12 mb-2" />
-                      ) : item.type === "document" ? (
-                        <FileText className="w-12 h-12 mb-2" />
-                      ) : item.type === "archive" ? (
-                        <Archive className="w-12 h-12 mb-2" />
-                      ) : (
-                        <FileIcon className="w-12 h-12 mb-2" />
-                      )}
-                      <span className="font-semibold tracking-wider uppercase text-[10px]">
-                        {getFileExtension(item.filename || item.title)}
-                      </span>
-                    </div>
-                  )}
-                </div>
                 <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    toggleSelect(item.id);
-                  }}
-                  className={`absolute top-2 left-2 z-10 w-6 h-6 rounded-md flex items-center justify-center transition-all ${selectedItems.has(item.id) ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]" : "bg-black/50 text-white opacity-0 group-hover:opacity-100"}`}
+                  onClick={() => setShowNewFolderModal(true)}
+                  className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-colors text-[var(--kyro-text-primary)]"
                 >
-                  {selectedItems.has(item.id) && (
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M5 13l4 4L19 7"
-                      />
-                    </svg>
-                  )}
-                </button>
-                <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    openMetadataPanel(item);
-                  }}
-                  className="absolute top-2 right-10 z-10 w-6 h-6 rounded-md bg-[var(--kyro-primary)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-                  title="Edit metadata"
-                >
-                  <svg
-                    className="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
-                    />
-                  </svg>
+                  <FolderPlus className="w-4 h-4" />
                 </button>
+              </div>
+
+              <nav className="space-y-1">
                 <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    handleDelete(item.id);
-                  }}
-                  className="absolute top-2 right-2 z-10 w-6 h-6 rounded-md bg-[var(--kyro-danger)] text-white flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity"
-                  title="Delete"
+                  onClick={() => setCurrentFolder("")}
+                  className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs font-bold transition-all ${currentFolder === "" ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-md" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"}`}
                 >
-                  <svg
-                    className="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M6 18L18 6M6 6l12 12"
-                    />
-                  </svg>
+                  <FolderInput className="w-4 h-4 opacity-70" />
+                  All Assets
                 </button>
-                <div className="absolute bottom-0 left-0 right-0 p-2 bg-gradient-to-t from-black/80 to-transparent opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none">
-                  <p className="text-white text-xs font-medium truncate">
-                    {item.title}
-                  </p>
-                  <p className="text-white/70 text-[10px]">
-                    {formatFileSize(item.fileSize)}
-                  </p>
-                </div>
-              </div>
-            ))}
+                {folders.map((folder) => (
+                  <div key={folder} className="group relative">
+                    <button
+                      onClick={() => setCurrentFolder(folder)}
+                      className={`w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-xs font-bold transition-all ${currentFolder === folder ? "bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] shadow-md" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] hover:text-[var(--kyro-text-primary)]"}`}
+                    >
+                      <div className="w-4 h-4 flex items-center justify-center opacity-70">
+                        <Folder fill={currentFolder === folder ? "currentColor" : "none"} />
+                      </div>
+                      {folder}
+                    </button>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleDeleteFolder(folder);
+                      }}
+                      className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-red-500 opacity-0 group-hover:opacity-100 transition-all hover:bg-red-50 rounded-lg"
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </div>
+                ))}
+              </nav>
+            </div>
           </div>
-        ) : (
-          <div className="space-y-2">
-            <div className="flex items-center gap-4 px-4 py-2 text-xs font-bold text-[var(--kyro-text-muted)] uppercase">
-              <button
-                type="button"
-                onClick={selectAll}
-                className="w-6 h-6 rounded border border-[var(--kyro-border)] flex items-center justify-center hover:bg-[var(--kyro-surface-accent)]"
-              >
-                {selectedItems.size === items.length && items.length > 0 && (
-                  <svg
-                    className="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
+        </div>
+
+        {/* Main Content Area */}
+        <div className="flex-1 flex flex-col min-h-0 bg-[var(--kyro-bg)]">
+          <div className="flex-1 overflow-y-auto py-8 px-4 custom-scrollbar">
+            {loading ? (
+              <div className="flex items-center justify-center h-64">
+                <Spinner />
+              </div>
+            ) : items.length === 0 ? (
+              <div className="flex flex-col items-center justify-center py-32 text-center">
+                <div className="w-24 h-24 rounded-[2rem] bg-[var(--kyro-surface-accent)] flex items-center justify-center mb-8 rotate-12 group-hover:rotate-0 transition-transform duration-500">
+                  <Grid className="w-10 h-10 text-[var(--kyro-text-muted)] opacity-30" />
+                </div>
+                <h3 className="text-xl font-bold text-[var(--kyro-text-primary)] tracking-tight">
+                  No assets found
+                </h3>
+                <p className="text-[var(--kyro-text-secondary)] mt-2 max-w-xs mx-auto text-sm font-medium leading-relaxed">
+                  Upload your first file or create a folder to organize your
+                  media assets.
+                </p>
+                {canUpload && (
+                  <button
+                    onClick={() => fileInputRef.current?.click()}
+                    className="mt-8 px-8 py-3 bg-[var(--kyro-text-primary)] text-[var(--kyro-bg)] rounded-2xl font-bold text-xs hover:scale-105 transition-all shadow-xl"
                   >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={2}
-                      d="M5 13l4 4L19 7"
-                    />
-                  </svg>
+                    Start Uploading
+                  </button>
                 )}
-              </button>
-              <span className="flex-1">Name</span>
-              <span className="w-24 text-right">Type</span>
-              <span className="w-24 text-right">Size</span>
-              <span className="w-32">Date</span>
-              <span className="w-10"></span>
-            </div>
-            {items.map((item) => (
-              <div
-                key={item.id}
-                draggable
-                onDragStart={(e) => {
-                  e.dataTransfer.setData("text/plain", item.id);
-                  e.dataTransfer.effectAllowed = "move";
-                }}
-                className={`flex items-center gap-4 px-4 py-3 rounded-lg transition-colors cursor-pointer ${selectedItems.has(item.id) ? "bg-[var(--kyro-surface-accent)]" : "hover:bg-[var(--kyro-surface-accent)]"}`}
-              >
-                <button
-                  type="button"
-                  onClick={() => toggleSelect(item.id)}
-                  className={`w-6 h-6 rounded border flex items-center justify-center transition-colors ${selectedItems.has(item.id) ? "bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-primary)]" : "border-[var(--kyro-border)] hover:border-[var(--kyro-border-active)]"}`}
-                >
-                  {selectedItems.has(item.id) && (
-                    <svg
-                      className="w-4 h-4"
-                      fill="none"
-                      stroke="currentColor"
-                      viewBox="0 0 24 24"
-                    >
-                      <path
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                        strokeWidth={2}
-                        d="M5 13l4 4L19 7"
-                      />
-                    </svg>
-                  )}
-                </button>
-                <div className="flex-1 flex items-center gap-3 min-w-0">
+              </div>
+            ) : view === "grid" ? (
+              <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6 gap-1">
+                {items.map((item, index) => (
                   <div
-                    className="w-10 h-10 rounded-lg bg-[var(--kyro-surface)] flex items-center justify-center overflow-hidden flex-shrink-0 cursor-pointer"
-                    onClick={() => openMetadataPanel(item)}
+                    key={item.id}
+                    className={`group relative aspect-square rounded-lg overflow-hidden bg-[var(--kyro-surface-accent)] border-2 transition-all duration-300 cursor-pointer ${selectedIds.has(item.id) ? "border-[var(--kyro-primary)]" : "border-transparent hover:border-[var(--kyro-border-strong)] hover:shadow-2xl hover:-translate-y-1"}`}
+                    onClick={() => setPanelItem(item)}
+                    onContextMenu={(e) => {
+                      e.preventDefault();
+                      handleSelectOne(item.id, e);
+                    }}
                   >
-                    {item.type === "image" &&
-                    (item.thumbnailUrl || item.url) ? (
+                    {item.type === "image" ? (
                       <img
-                        src={getAbsoluteUrl(item.thumbnailUrl || item.url)}
-                        alt=""
-                        className="w-full h-full object-cover"
+                        src={item.url}
+                        alt={item.title}
+                        className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-110"
+                        loading="lazy"
                       />
-                    ) : item.type === "video" ? (
-                      <Film className="w-5 h-5 text-[var(--kyro-text-muted)]" />
-                    ) : item.type === "audio" ? (
-                      <Music className="w-5 h-5 text-[var(--kyro-text-muted)]" />
-                    ) : item.type === "document" ? (
-                      <FileText className="w-5 h-5 text-[var(--kyro-text-muted)]" />
-                    ) : item.type === "archive" ? (
-                      <Archive className="w-5 h-5 text-[var(--kyro-text-muted)]" />
                     ) : (
-                      <FileIcon className="w-5 h-5 text-[var(--kyro-text-muted)]" />
+                      <div className="w-full h-full flex flex-col items-center justify-center p-6 gap-4">
+                        <div className="p-4 rounded-2xl bg-[var(--kyro-surface)] shadow-inner text-[var(--kyro-text-secondary)] group-hover:scale-110 transition-transform duration-500">
+                          {item.type === "video" ? (
+                            <Film className="w-8 h-8" />
+                          ) : item.type === "audio" ? (
+                            <Music className="w-8 h-8" />
+                          ) : item.type === "document" ? (
+                            <FileText className="w-8 h-8" />
+                          ) : item.type === "archive" ? (
+                            <Archive className="w-8 h-8" />
+                          ) : (
+                            <FileIcon className="w-8 h-8" />
+                          )}
+                        </div>
+                        <span className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50 text-center px-4 line-clamp-2">
+                          {item.title}
+                        </span>
+                      </div>
+                    )}
+
+                    <div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300 flex flex-col justify-end p-4">
+                      <div className="flex items-center justify-between">
+                        <span className="text-white font-bold text-[10px] truncate max-w-[120px]">
+                          {item.filename}
+                        </span>
+                        <div className="flex gap-1">
+                          <button
+                            onClick={(e) => handleSelectOne(item.id, e)}
+                            className={`p-1.5 rounded-lg transition-all ${selectedIds.has(item.id) ? "bg-[var(--kyro-primary)] text-white" : "bg-white/10 text-white hover:bg-white/20"}`}
+                          >
+                            <svg
+                              className="w-3 h-3"
+                              fill="none"
+                              stroke="currentColor"
+                              viewBox="0 0 24 24"
+                            >
+                              <path
+                                strokeLinecap="round"
+                                strokeLinejoin="round"
+                                strokeWidth="3"
+                                d="M5 13l4 4L19 7"
+                              />
+                            </svg>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+
+                    {selectedIds.has(item.id) && (
+                      <div className="absolute top-3 left-3 w-6 h-6 rounded-lg bg-[var(--kyro-primary)] text-white flex items-center justify-center shadow-lg border-2 border-white/20 animate-in zoom-in duration-300">
+                        <svg
+                          className="w-3 h-3"
+                          fill="none"
+                          stroke="currentColor"
+                          viewBox="0 0 24 24"
+                        >
+                          <path
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            strokeWidth="3"
+                            d="M5 13l4 4L19 7"
+                          />
+                        </svg>
+                      </div>
                     )}
                   </div>
-                  <div
-                    className="min-w-0 flex-1 cursor-pointer"
-                    onClick={() => openMetadataPanel(item)}
-                  >
-                    <p className="font-medium text-[var(--kyro-text-primary)] truncate">
-                      {item.title}
-                    </p>
-                    <p className="text-xs text-[var(--kyro-text-muted)] truncate">
-                      {item.originalName || item.filename}
-                    </p>
-                  </div>
-                </div>
-                <span className="w-24 text-right text-sm text-[var(--kyro-text-secondary)] capitalize">
-                  {item.type}
-                </span>
-                <span className="w-24 text-right text-sm text-[var(--kyro-text-secondary)]">
-                  {formatFileSize(item.fileSize)}
-                </span>
-                <span className="w-32 text-sm text-[var(--kyro-text-muted)]">
-                  {formatDate(item.createdAt)}
-                </span>
+                ))}
+              </div>
+            ) : (
+              <div className="surface-tile overflow-hidden animate-in fade-in duration-500">
+                <table className="w-full text-left">
+                  <thead>
+                    <tr className="text-[10px] font-bold  tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-40 border-b border-[var(--kyro-border)]">
+                      <th className="px-6 py-4 w-12">
+                        <input
+                          type="checkbox"
+                          className="w-4 h-4 rounded border-[var(--kyro-border)] text-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
+                          checked={selectedIds.size === items.length}
+                          onChange={(e) => {
+                            if (e.target.checked)
+                              setSelectedIds(new Set(items.map((i) => i.id)));
+                            else setSelectedIds(new Set());
+                          }}
+                        />
+                      </th>
+                      <th className="px-6 py-4">Asset</th>
+                      <th className="px-6 py-4">Type</th>
+                      <th className="px-6 py-4">Size</th>
+                      <th className="px-6 py-4">Date</th>
+                      <th className="px-6 py-4 text-right">Actions</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-[var(--kyro-border)]">
+                    {items.map((item) => (
+                      <tr
+                        key={item.id}
+                        className={`group hover:bg-[var(--kyro-surface-accent)] transition-colors cursor-pointer ${selectedIds.has(item.id) ? "bg-[var(--kyro-surface-accent)]" : ""}`}
+                        onClick={() => setPanelItem(item)}
+                      >
+                        <td
+                          className="px-6 py-4"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <input
+                            type="checkbox"
+                            checked={selectedIds.has(item.id)}
+                            onChange={(e) => handleSelectOne(item.id, e)}
+                            className="w-4 h-4 rounded border-[var(--kyro-border)] text-[var(--kyro-primary)] focus:ring-[var(--kyro-primary)]"
+                          />
+                        </td>
+                        <td className="px-6 py-4">
+                          <div className="flex items-center gap-4">
+                            <div className="w-12 h-12 rounded-xl bg-[var(--kyro-bg)] overflow-hidden border border-[var(--kyro-border)] flex-shrink-0 flex items-center justify-center">
+                              {item.type === "image" ? (
+                                <img
+                                  src={item.url}
+                                  alt=""
+                                  className="w-full h-full object-cover"
+                                />
+                              ) : (
+                                <FileIcon className="w-5 h-5 text-[var(--kyro-text-secondary)] opacity-50" />
+                              )}
+                            </div>
+                            <div className="flex flex-col min-w-0">
+                              <span className="font-bold text-xs text-[var(--kyro-text-primary)] truncate max-w-[200px]">
+                                {item.title || item.filename}
+                              </span>
+                              <span className="text-[10px] text-[var(--kyro-text-secondary)] opacity-50 truncate">
+                                {item.filename}
+                              </span>
+                            </div>
+                          </div>
+                        </td>
+                        <td className="px-6 py-4">
+                          <Badge variant="outline" className="text-[9px]">
+                            {item.mimeType}
+                          </Badge>
+                        </td>
+                        <td className="px-6 py-4 text-[11px] font-bold text-[var(--kyro-text-secondary)]">
+                          {formatFileSize(item.fileSize)}
+                        </td>
+                        <td className="px-6 py-4 text-[11px] font-bold text-[var(--kyro-text-secondary)]">
+                          {formatDate(item.createdAt)}
+                        </td>
+                        <td className="px-6 py-4 text-right">
+                          <button
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              handleSelectOne(item.id, e);
+                            }}
+                            className={`p-2 rounded-lg transition-all ${selectedIds.has(item.id) ? "bg-[var(--kyro-primary)] text-white" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] opacity-0 group-hover:opacity-100"}`}
+                          >
+                            <Grid className="w-4 h-4" />
+                          </button>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            )}
+          </div>
+
+          {/* Pagination */}
+          {totalPages > 1 && (
+            <div className="p-6 border-t border-[var(--kyro-border)] bg-[var(--kyro-surface)]/50 backdrop-blur-md flex items-center justify-between">
+              <span className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50">
+                Page {page} of {totalPages}
+              </span>
+              <div className="flex gap-2">
                 <button
-                  type="button"
-                  onClick={(e) => {
-                    e.stopPropagation();
-                    openMetadataPanel(item);
-                  }}
-                  className="w-10 h-10 rounded-lg hover:bg-[var(--kyro-primary)]/10 text-[var(--kyro-text-muted)] hover:text-[var(--kyro-primary)] flex items-center justify-center transition-colors"
-                  title="Edit details"
+                  disabled={page === 1}
+                  onClick={() => setPage(page - 1)}
+                  className="px-4 py-2 border border-[var(--kyro-border)] rounded-xl text-xs font-bold text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] disabled:opacity-30 transition-all"
                 >
-                  <svg
-                    className="w-4 h-4"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                      d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"
-                    />
-                  </svg>
+                  Previous
                 </button>
                 <button
-                  type="button"
-                  onClick={() => handleDelete(item.id)}
-                  className="w-10 h-10 rounded-lg hover:bg-[var(--kyro-danger-bg)] text-[var(--kyro-text-muted)] hover:text-[var(--kyro-danger)] flex items-center justify-center transition-colors"
+                  disabled={page === totalPages}
+                  onClick={() => setPage(page + 1)}
+                  className="px-6 py-2 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl text-xs font-bold shadow-lg hover:opacity-90 disabled:opacity-30 transition-all"
                 >
-                  <svg
-                    className="w-5 h-5"
-                    fill="none"
-                    stroke="currentColor"
-                    viewBox="0 0 24 24"
-                  >
-                    <path
-                      strokeLinecap="round"
-                      strokeLinejoin="round"
-                      strokeWidth={1.5}
-                      d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
-                    />
-                  </svg>
+                  Next
                 </button>
               </div>
-            ))}
-          </div>
-        )}
+            </div>
+          )}
+        </div>
+      </div>
 
-        {/* Infinite Scroll Observer Target */}
-        {hasMore && !loading && (
-          <div
-            ref={observerTarget}
-            className="h-20 w-full flex items-center justify-center mt-4"
-          >
-            <Spinner size="sm" />
+      {/* Upload Banner */}
+      {uploading && (
+        <div className="fixed bottom-12 left-1/2 -translate-x-1/2 z-[60] w-full max-w-lg">
+          <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-[2rem] shadow-2xl p-6 ring-1 ring-white/10 animate-in slide-in-from-bottom-12 duration-700">
+            <div className="flex items-center justify-between mb-4">
+              <div className="flex items-center gap-3">
+                <div className="w-8 h-8 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center animate-pulse">
+                  <Spinner />
+                </div>
+                <span className="text-sm font-bold tracking-tight text-[var(--kyro-text-primary)]">
+                  Uploading Files
+                </span>
+              </div>
+              <span className="text-[10px] font-bold  tracking-[0.2em] text-[var(--kyro-text-secondary)] opacity-50">
+                {Object.keys(uploadProgress).length} Total
+              </span>
+            </div>
+            <div className="space-y-4 max-h-[160px] overflow-y-auto pr-2 custom-scrollbar">
+              {Object.entries(uploadProgress).map(([name, progress]) => (
+                <div key={name} className="space-y-2">
+                  <div className="flex justify-between text-[10px] font-bold">
+                    <span className="text-[var(--kyro-text-primary)] truncate max-w-[200px]">
+                      {name}
+                    </span>
+                    <span className="text-[var(--kyro-primary)]">
+                      {progress}%
+                    </span>
+                  </div>
+                  <div className="h-1.5 w-full bg-[var(--kyro-surface-accent)] rounded-full overflow-hidden">
+                    <div
+                      className="h-full bg-[var(--kyro-primary)] transition-all duration-300 rounded-full"
+                      style={{ width: `${progress}%` }}
+                    />
+                  </div>
+                </div>
+              ))}
+            </div>
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
-      {lightboxItem &&
-        createPortal(
-          <div
-            className="fixed inset-0 z-[9999] bg-black/95 flex items-center justify-center p-8 animate-in fade-in duration-200"
-            onClick={() => setLightboxItem(null)}
-          >
-            <button
-              type="button"
-              onClick={() => setLightboxItem(null)}
-              className="absolute top-4 right-4 w-12 h-12 rounded-full bg-white/10 text-white flex items-center justify-center hover:bg-white/20 transition-colors"
-            >
-              <svg
-                className="w-6 h-6"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M6 18L18 6M6 6l12 12"
-                />
-              </svg>
-            </button>
-            <div className="absolute top-4 left-4 text-white">
-              <p className="font-bold text-lg">{lightboxItem.title}</p>
-              <p className="text-sm text-white/60">{lightboxItem.filename}</p>
-              <p className="text-xs text-white/40 mt-1">
-                {formatFileSize(lightboxItem.fileSize)}
-              </p>
+      {/* Selection Footer */}
+      {selectedIds.size > 0 && (
+        <div className="fixed bottom-12 left-1/2 -translate-x-1/2 z-[60] bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-full shadow-2xl px-2 py-2 flex items-center gap-12 animate-in slide-in-from-bottom-12 duration-700 ring-1 ring-white/10 backdrop-blur-xl">
+          <div className="flex items-center gap-5 border-r border-[var(--kyro-border)] pr-12">
+            <div className="w-12 h-12 rounded-full bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] flex items-center justify-center text-lg font-bold shadow-inner">
+              {selectedIds.size}
             </div>
-            <img
-              src={getAbsoluteUrl(lightboxItem.url)}
-              alt={lightboxItem.alt || lightboxItem.title}
-              className="max-w-[90vw] max-h-[85vh] object-contain rounded-lg shadow-2xl"
-              onClick={(e) => e.stopPropagation()}
-            />
-            <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex items-center gap-4">
-              <a
-                href={getAbsoluteUrl(lightboxItem.url)}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="px-4 py-2 bg-white/10 text-white rounded-lg font-bold text-sm hover:bg-white/20 transition-colors"
-                onClick={(e) => e.stopPropagation()}
+            <div>
+              <p className="text-[11px] font-bold  tracking-[0.2em] text-[var(--kyro-text-primary)]">
+                Selected
+              </p>
+              <button
+                onClick={() => setSelectedIds(new Set())}
+                className="text-[10px] font-bold text-[var(--kyro-primary)] hover:underline opacity-80"
               >
-                Open in new tab
-              </a>
+                Clear all
+              </button>
+            </div>
+          </div>
+          <div className="flex items-center gap-4">
+            {onSelect && (
               <button
-                type="button"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  navigator.clipboard.writeText(
-                    getAbsoluteUrl(lightboxItem.url),
-                  );
-                  setCopiedId("lightbox");
-                  setTimeout(() => setCopiedId(null), 2000);
+                onClick={() => {
+                  const selectedItems = items.filter((i) => selectedIds.has(i.id));
+                  onSelect(selectedItems);
                 }}
-                className="px-4 py-2 bg-white/10 text-white rounded-lg font-bold text-sm hover:bg-white/20 transition-colors"
+                className="px-8 py-3 bg-[var(--kyro-text-primary)] text-[var(--kyro-bg)] rounded-full font-bold text-xs hover:scale-105 transition-all shadow-xl"
               >
-                {copiedId === "lightbox" ? "Copied!" : "Copy URL"}
+                Confirm Selection
               </button>
-            </div>
-          </div>,
-          document.body,
-        )}
-
-      {panelItem && (
-        <div className="fixed inset-0 z-50 flex justify-end">
-          <div
-            className="absolute inset-0 bg-black/30"
-            onClick={() => setPanelItem(null)}
-          />
-          <div className="relative w-100 h-full bg-[var(--kyro-surface)] border-l border-[var(--kyro-border)] shadow-xl p-6 flex flex-col">
-            <div className="flex items-center justify-between mb-6">
-              <h2 className="text-lg font-bold text-[var(--kyro-text-primary)]">
-                Media Details
-              </h2>
+            )}
+            {canDelete && (
               <button
-                type="button"
-                onClick={() => setPanelItem(null)}
-                className="p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)]"
+                onClick={handleBulkDelete}
+                className="p-3 bg-red-500/10 text-red-500 hover:bg-red-500 hover:text-white rounded-full transition-all active:scale-90"
               >
-                <svg
-                  className="w-5 h-5 text-[var(--kyro-text-secondary)]"
-                  fill="none"
-                  stroke="currentColor"
-                  viewBox="0 0 24 24"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    strokeWidth={2}
-                    d="M6 18L18 6M6 6l12 12"
-                  />
-                </svg>
+                <Trash2 className="w-5 h-5" />
               </button>
-            </div>
-            <div className="aspect-square bg-[var(--kyro-surface-accent)] rounded-lg mb-6 flex items-center justify-center overflow-hidden">
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Asset Panel */}
+      <SlidePanel
+        open={!!panelItem}
+        onClose={() => setPanelItem(null)}
+        title="Asset Details"
+        subtitle={panelItem?.filename}
+      >
+        {panelItem && (
+          <div className="flex flex-col h-full">
+            <div className="aspect-video w-full rounded-2xl bg-[var(--kyro-bg)] border border-[var(--kyro-border)] overflow-hidden relative group">
               {panelItem.type === "image" ? (
                 <img
-                  src={getAbsoluteUrl(panelItem.thumbnailUrl || panelItem.url)}
+                  src={getAbsoluteUrl(panelItem.url)}
                   alt=""
-                  className="w-full h-full object-contain"
+                  className="w-full h-full object-contain p-4"
+                />
+              ) : panelItem.type === "video" ? (
+                <video
+                  src={getAbsoluteUrl(panelItem.url)}
+                  controls
+                  className="w-full h-full"
                 />
               ) : (
-                <div className="w-full h-full flex flex-col items-center justify-center bg-[var(--kyro-surface-accent)] rounded-md text-[var(--kyro-text-muted)]">
-                  {panelItem.type === "video" ? (
-                    <Film className="w-24 h-24 mb-4 opacity-50" />
-                  ) : panelItem.type === "audio" ? (
-                    <Music className="w-24 h-24 mb-4 opacity-50" />
-                  ) : panelItem.type === "document" ? (
-                    <FileText className="w-24 h-24 mb-4 opacity-50" />
-                  ) : panelItem.type === "archive" ? (
-                    <Archive className="w-24 h-24 mb-4 opacity-50" />
-                  ) : (
-                    <FileIcon className="w-24 h-24 mb-4 opacity-50" />
-                  )}
-                  <span className="text-xl font-bold tracking-wider uppercase text-[var(--kyro-text-secondary)]">
-                    {getFileExtension(panelItem.filename)}
-                  </span>
+                <div className="w-full h-full flex flex-col items-center justify-center p-12 gap-6">
+                  <div className="w-20 h-20 rounded-[2rem] bg-[var(--kyro-surface-accent)] flex items-center justify-center">
+                    <FileIcon className="w-10 h-10 text-[var(--kyro-text-secondary)]" />
+                  </div>
+                  <Badge variant="outline" className="text-xs font-bold">
+                    {panelItem.mimeType}
+                  </Badge>
                 </div>
               )}
-            </div>
-            <div className="space-y-4 flex-1">
-              <div>
-                <label className="block text-sm font-bold text-[var(--kyro-text-secondary)] mb-1">
-                  Display Name
-                </label>
-                <input
-                  type="text"
-                  value={panelName}
-                  onChange={(e) => setPanelName(e.target.value)}
-                  className="w-full px-3 py-2 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-border-active)]"
-                />
+
+              <div className="absolute top-4 right-4 flex gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                <button
+                  onClick={() => setShowPreview(true)}
+                  className="p-2.5 bg-black/50 backdrop-blur-md text-white rounded-xl hover:bg-black/70 transition-all"
+                >
+                  <Maximize2 className="w-4 h-4" />
+                </button>
               </div>
-              <div>
-                <label className="block text-sm font-bold text-[var(--kyro-text-secondary)] mb-1">
-                  Alt Text
-                </label>
-                <input
-                  type="text"
-                  value={panelAlt}
-                  onChange={(e) => setPanelAlt(e.target.value)}
-                  placeholder="Accessibility text..."
-                  className="w-full px-3 py-2 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-sm text-[var(--kyro-text-primary)] focus:outline-none focus:border-[var(--kyro-border-active)]"
-                />
+            </div>
+
+            <div className="mt-8 space-y-8 flex-1">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="p-4 rounded-2xl bg-[var(--kyro-surface-accent)]/50 border border-[var(--kyro-border)]">
+                  <span className="text-[9px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50 block mb-1">
+                    Dimensions
+                  </span>
+                  <span className="text-xs font-bold text-[var(--kyro-text-primary)]">
+                    {panelItem.type === "image" ? "Original Resolution" : "N/A"}
+                  </span>
+                </div>
+                <div className="p-4 rounded-2xl bg-[var(--kyro-surface-accent)]/50 border border-[var(--kyro-border)]">
+                  <span className="text-[9px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50 block mb-1">
+                    File Size
+                  </span>
+                  <span className="text-xs font-bold text-[var(--kyro-text-primary)]">
+                    {formatFileSize(panelItem.fileSize)}
+                  </span>
+                </div>
               </div>
-              <div className="pt-4 border-t border-[var(--kyro-border)] space-y-2 text-xs text-[var(--kyro-text-muted)]">
-                <p>
-                  <span className="font-bold">Filename:</span>{" "}
-                  {panelItem.filename}
-                </p>
-                <p>
-                  <span className="font-bold">Type:</span> {panelItem.mimeType}
-                </p>
-                <p>
-                  <span className="font-bold">Size:</span>{" "}
-                  {formatFileSize(panelItem.fileSize)}
-                </p>
-                <p className="pt-2">
-                  <span className="font-bold">File URL</span>
-                </p>
-                <div className="flex gap-2 items-center">
-                  <input
-                    type="text"
-                    readOnly
-                    value={getAbsoluteUrl(panelItem.url)}
-                    className="flex-1 px-3 py-2 bg-[var(--kyro-bg)] border border-[var(--kyro-border)] rounded-lg text-xs text-[var(--kyro-text-muted)] focus:outline-none truncate"
-                  />
-                  <button
-                    type="button"
-                    onClick={() => {
-                      navigator.clipboard.writeText(
-                        getAbsoluteUrl(panelItem.url),
-                      );
-                      setCopiedId(panelItem.id);
-                      setTimeout(() => setCopiedId(null), 2000);
-                    }}
-                    className={`p-2 border rounded-lg transition-colors shrink-0 ${
-                      copiedId === panelItem.id
-                        ? "border-[var(--kyro-success)] bg-[var(--kyro-success-bg)] text-[var(--kyro-success)]"
-                        : "border-[var(--kyro-border)] hover:bg-[var(--kyro-surface-accent)] text-[var(--kyro-text-secondary)]"
-                    }`}
-                    title={copiedId === panelItem.id ? "Copied!" : "Copy URL"}
-                  >
-                    <Link className="w-4 h-4" />
-                  </button>
-                  <a
-                    href={getAbsoluteUrl(panelItem.url)}
-                    download={panelItem.filename}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="p-2 border border-[var(--kyro-border)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-colors shrink-0"
-                    title="Download"
-                  >
-                    <Download className="w-4 h-4 text-[var(--kyro-text-secondary)]" />
-                  </a>
+
+              <div className="space-y-4">
+                <div>
+                  <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50 block mb-2 px-1">
+                    Public Link
+                  </label>
+                  <div className="flex gap-2">
+                    <input
+                      type="text"
+                      readOnly
+                      value={getAbsoluteUrl(panelItem.url)}
+                      className="flex-1 px-4 py-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-xl text-[10px] font-bold font-mono focus:outline-none"
+                    />
+                    <button
+                      onClick={() => {
+                        navigator.clipboard.writeText(
+                          getAbsoluteUrl(panelItem.url),
+                        );
+                        alert({ title: "Copied", message: "URL copied to clipboard" });
+                      }}
+                      className="p-3 bg-[var(--kyro-surface-accent)] hover:bg-[var(--kyro-border)] border border-[var(--kyro-border)] rounded-xl transition-all"
+                    >
+                      <Link className="w-4 h-4 text-[var(--kyro-text-primary)]" />
+                    </button>
+                  </div>
+                </div>
+
+                <div className="space-y-4">
+                  <div>
+                    <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50 block mb-2 px-1">
+                      Alt Text
+                    </label>
+                    <textarea
+                      value={panelItem.alt || ""}
+                      onChange={(e) =>
+                        updateMetadata(panelItem.id, { alt: e.target.value })
+                      }
+                      className="w-full px-4 py-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-xs font-bold transition-all resize-none min-h-[80px] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+                      placeholder="Describe this asset..."
+                    />
+                  </div>
+                  <div>
+                    <label className="text-[10px] font-bold  tracking-widest text-[var(--kyro-text-secondary)] opacity-50 block mb-2 px-1">
+                      Caption
+                    </label>
+                    <textarea
+                      value={panelItem.caption || ""}
+                      onChange={(e) =>
+                        updateMetadata(panelItem.id, {
+                          caption: e.target.value,
+                        })
+                      }
+                      className="w-full px-4 py-3 bg-[var(--kyro-surface-accent)] border border-[var(--kyro-border)] rounded-lg text-xs font-bold transition-all resize-none min-h-[80px] focus:outline-none focus:ring-2 focus:ring-[var(--kyro-sidebar-active)] focus:border-transparent"
+                      placeholder="Add a caption..."
+                    />
+                  </div>
                 </div>
-                <p>
-                  <span className="font-bold">Uploaded:</span>{" "}
-                  {formatDate(panelItem.createdAt)}
-                </p>
               </div>
-              {panelItem.type === "image" && (
+            </div>
+
+            <div className="pt-8 border-t border-[var(--kyro-border)] mt-8 flex gap-3 pb-8">
+              <button
+                onClick={() => {
+                  const link = document.createElement("a");
+                  link.href = getAbsoluteUrl(panelItem.url);
+                  link.download = panelItem.filename;
+                  link.click();
+                }}
+                className="flex-1 flex items-center justify-center gap-2 px-6 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-xs shadow-lg hover:opacity-90 transition-all"
+              >
+                <Download className="w-4 h-4" />
+                Download
+              </button>
+              {panelItem.type === "image" && canUpdate && (
                 <button
-                  type="button"
                   onClick={() => setShowCrop(true)}
-                  className="flex items-center gap-2 px-3 py-1.5 bg-[var(--kyro-surface-accent)] text-[var(--kyro-primary)] rounded-lg font-bold text-xs hover:opacity-80 transition-colors mt-2 w-full"
+                  className="p-3 border border-[var(--kyro-border)] rounded-xl text-[var(--kyro-text-primary)] hover:bg-[var(--kyro-surface-accent)] transition-all"
                 >
-                  <CropIcon className="w-3.5 h-3.5" />
-                  Crop Image
+                  <CropIcon className="w-4 h-4" />
+                </button>
+              )}
+              {canDelete && (
+                <button
+                  onClick={() => {
+                    confirm({
+                      title: "Delete Asset",
+                      message: `Are you sure you want to delete ${panelItem.filename}? This cannot be undone.`,
+                      variant: "danger",
+                      onConfirm: async () => {
+                        try {
+                          await apiDelete(`/api/media/${panelItem.id}`);
+                          setPanelItem(null);
+                          loadMedia();
+                        } catch (error) {
+                          console.error("Delete failed:", error);
+                          alert({ title: "Error", message: "Failed to delete asset" });
+                        }
+                      }
+                    });
+                  }}
+                  className="p-3 border border-red-100 text-red-500 rounded-xl hover:bg-red-50 transition-all"
+                >
+                  <Trash2 className="w-4 h-4" />
                 </button>
               )}
             </div>
-            <div className="flex gap-3 mt-6">
-              <a
-                href={getAbsoluteUrl(panelItem.url)}
-                download={panelItem.filename}
-                target="_blank"
-                rel="noopener noreferrer"
-                className="p-2 border border-[var(--kyro-border)] rounded-lg hover:bg-[var(--kyro-surface-accent)] transition-colors"
-                title="Download"
-              >
-                <Download className="w-5 h-5 text-[var(--kyro-text-secondary)]" />
-              </a>
-              <button
-                type="button"
-                onClick={savePanelMetadata}
-                className="flex-1 py-2 px-4 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm hover:opacity-90"
-              >
-                Save
-              </button>
+          </div>
+        )}
+      </SlidePanel>
+
+      {/* Preview Modal */}
+      {showPreview &&
+        panelItem &&
+        createPortal(
+          <div className="fixed inset-0 z-[9999] bg-black/95 flex flex-col animate-in fade-in duration-500">
+            <div className="flex items-center justify-between p-6">
+              <div className="flex flex-col">
+                <span className="text-white font-bold text-lg tracking-tight">
+                  {panelItem.filename}
+                </span>
+                <span className="text-white/40 text-[10px] font-bold  tracking-widest mt-1">
+                  {formatFileSize(panelItem.fileSize)} · {panelItem.mimeType}
+                </span>
+              </div>
               <button
-                type="button"
-                onClick={() => setPanelItem(null)}
-                className="py-2 px-4 border border-[var(--kyro-border)] rounded-lg font-bold text-sm text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)]"
+                onClick={() => setShowPreview(false)}
+                className="p-3 bg-white/10 hover:bg-white/20 text-white rounded-2xl transition-all active:scale-90"
               >
-                Cancel
+                <X className="w-6 h-6" />
               </button>
             </div>
-          </div>
-        </div>
-      )}
+            <div className="flex-1 w-full flex items-center justify-center p-12">
+              {panelItem.type === "image" ? (
+                <img
+                  src={getAbsoluteUrl(panelItem.url)}
+                  alt=""
+                  className="max-h-full max-w-full object-contain shadow-2xl rounded-lg animate-in zoom-in-95 duration-500"
+                />
+              ) : panelItem.type === "video" ? (
+                <video
+                  src={getAbsoluteUrl(panelItem.url)}
+                  controls
+                  autoPlay
+                  className="max-h-full max-w-full rounded-lg shadow-2xl"
+                />
+              ) : (
+                <div className="text-white text-center">
+                  <FileIcon className="w-24 h-24 mx-auto mb-6 opacity-20" />
+                  <p className="text-xl font-bold opacity-50">
+                    Preview not available for this file type
+                  </p>
+                </div>
+              )}
+            </div>
+          </div>,
+          document.body,
+        )}
 
+      {/* Crop Modal */}
       {showCrop &&
         panelItem &&
         createPortal(
-          <div className="fixed inset-0 z-[10000] bg-black/95 flex flex-col items-center justify-center p-8">
-            <div className="flex w-full justify-between items-center mb-4 text-white">
-              <h3 className="text-xl font-bold">Crop Image</h3>
+          <div className="fixed inset-0 z-[9999] bg-black/95 flex flex-col p-8">
+            <div className="flex items-center justify-between mb-8">
+              <h3 className="text-white font-bold text-2xl tracking-tighter">
+                Crop Image
+              </h3>
               <div className="flex gap-3">
                 <button
                   type="button"
@@ -1453,7 +1138,7 @@ export function MediaGallery() {
               <ReactCrop crop={crop} onChange={(c) => setCrop(c)}>
                 <img
                   ref={imgRef}
-                  src={`/api/media/resize?url=${encodeURIComponent(panelItem.url)}`}
+                  src={panelItem.url}
                   alt="Crop preview"
                   className="max-h-[70vh] object-contain"
                   onLoad={onImageLoad}
@@ -1463,15 +1148,6 @@ export function MediaGallery() {
           </div>,
           document.body,
         )}
-      <ConfirmModal
-        open={deleteConfirm.open}
-        onClose={() => setDeleteConfirm({ open: false, count: 0 })}
-        onConfirm={confirmDelete}
-        title="Delete Media"
-        message={`Are you sure you want to delete ${deleteConfirm.count} item(s)? This cannot be undone.`}
-        confirmLabel="Delete"
-        variant="danger"
-      />
       <PromptModal
         open={showNewFolderModal}
         onClose={() => setShowNewFolderModal(false)}
@@ -1499,7 +1175,7 @@ export function MediaGallery() {
                     />
                   </svg>
                 </div>
-                <h3 className="text-xl font-black text-[var(--kyro-text-primary)] mb-2">
+                <h3 className="text-xl font-bold text-[var(--kyro-text-primary)] mb-2">
                   Storage Not Configured
                 </h3>
                 <p className="text-[var(--kyro-text-secondary)] mb-6 text-sm">
@@ -1518,7 +1194,7 @@ export function MediaGallery() {
                     type="button"
                     onClick={() => {
                       // Set default storage config programmatically
-                      apiPatch("/api/globals/storage-settings", {
+                      apiPost("/api/globals/storage-settings", {
                         provider: "local",
                         local: {
                           uploadDir: "./public/uploads",
@@ -1540,18 +1216,6 @@ export function MediaGallery() {
           </div>,
           document.body,
         )}
-      <ConfirmModal
-        open={showDeleteFolderModal}
-        onClose={() => {
-          setShowDeleteFolderModal(false);
-          setFolderToDelete("");
-        }}
-        onConfirm={deleteFolder}
-        title="Delete Folder"
-        message={`Are you sure you want to delete the folder "${folderToDelete}"? All media in this folder will be moved to the root.`}
-        confirmLabel="Delete Folder"
-        variant="danger"
-      />
       <input
         type="file"
         ref={fileInputRef}