@kyro-cms/admin 0.1.5 → 0.1.7

package/src/components/MediaGallery.tsx

@@ -0,0 +1,1569 @@
+import React, { useState, useEffect, useCallback, useRef } 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 {
+  Trash2,
+  Download,
+  Maximize2,
+  X,
+  FileIcon,
+  FolderInput,
+  FolderPlus,
+  Grid,
+  Link,
+  Crop as CropIcon,
+  Film,
+  Music,
+  FileText,
+  Archive,
+} from "lucide-react";
+import { PromptModal } from "./ui/PromptModal";
+import ReactCrop, {
+  type Crop,
+  centerCrop,
+  makeAspectCrop,
+  convertToPixelCrop,
+} from "react-image-crop";
+import "react-image-crop/dist/ReactCrop.css";
+
+interface MediaItem {
+  id: string;
+  title: string;
+  filename: string;
+  originalName?: string;
+  url: string;
+  thumbnailUrl?: string;
+  type: "image" | "video" | "audio" | "document" | "archive" | "other";
+  mimeType: string;
+  fileSize: number;
+  folder?: string;
+  alt?: string;
+  caption?: string;
+  createdAt: string;
+  updatedAt?: string;
+}
+
+function getAbsoluteUrl(relativeUrl: string): string {
+  if (typeof window === "undefined") return relativeUrl;
+  // Remote URLs and blob URLs are returned as-is
+  if (relativeUrl.startsWith("http") || relativeUrl.startsWith("blob:")) {
+    return relativeUrl;
+  }
+  // Remove consecutive slashes for local paths (e.g. //photo... -> /photo...)
+  const sanitized = relativeUrl.replace(/^\/+/, "/");
+  return `${window.location.origin}${sanitized}`;
+}
+
+type FilterType =
+  | "all"
+  | "image"
+  | "video"
+  | "audio"
+  | "document"
+  | "archive"
+  | "other";
+
+function formatFileSize(bytes: number): string {
+  if (bytes === 0) return "0 B";
+  const k = 1024;
+  const sizes = ["B", "KB", "MB", "GB"];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
+}
+
+function formatDate(dateString: string): string {
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  });
+}
+
+function getFileType(mimeType: string): FilterType {
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType.startsWith("video/")) return "video";
+  if (mimeType.startsWith("audio/")) return "audio";
+  if (
+    mimeType.includes("zip") ||
+    mimeType.includes("tar") ||
+    mimeType.includes("rar")
+  )
+    return "archive";
+  if (
+    mimeType.includes("pdf") ||
+    mimeType.includes("document") ||
+    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() {
+  const [items, setItems] = useState<MediaItem[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState<number>(0);
+  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 [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 [showNewFolderModal, setShowNewFolderModal] = useState(false);
+  const [showDeleteFolderModal, setShowDeleteFolderModal] = useState(false);
+  const [folderToDelete, setFolderToDelete] = useState<string>("");
+
+  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 [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 openMetadataPanel = (item: MediaItem) => {
+    setPanelItem(item);
+    setPanelName(item.title ?? item.filename);
+    setPanelAlt(item.alt ?? "");
+  };
+
+  const loadFolders = useCallback(async () => {
+    try {
+      const resp = await fetch("/api/media/folders", {
+        credentials: "include",
+      });
+      const data = await resp.json();
+      setAvailableFolders((data.folders || []).sort());
+    } catch (e) {
+      console.error("loadFolders error:", e);
+    }
+  }, []);
+
+  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 response = await fetch(
+          `/api/media?limit=30&page=${currentPage}&sortBy=${sortBy}&sortDir=${sortDir}${typeParam}${searchParam}${folderParam}&t=${Date.now()}`,
+        );
+        if (!response.ok) throw new Error("Failed to load media");
+        const result = await response.json();
+
+        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],
+  );
+
+  useEffect(() => {
+    // Check if storage settings are configured
+    fetch("/api/storage-status")
+      .then((res) => res.json())
+      .then((status) => {
+        // If not configured, show modal to configure
+        if (!status.configured) {
+          setStorageConfigured(false);
+          setShowStorageConfigModal(true);
+        }
+      })
+      .catch(() => {
+        setStorageConfigured(false);
+        setShowStorageConfigModal(true);
+      });
+  }, []);
+
+  useEffect(() => {
+    loadMedia(true);
+  }, [filter, searchQuery, currentFolder, sortBy, sortDir]);
+
+  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 handleUpload = async (files: FileList) => {
+    setUploading(true);
+    setUploadProgress(0);
+    setUploadQueue([]);
+    const uploaded: MediaItem[] = [];
+    const fileArray = Array.from(files);
+
+    setUploadQueue(
+      fileArray.map((f, idx) => ({
+        name: f.name,
+        idx,
+        progress: 0,
+        controller: undefined,
+      })),
+    );
+
+    for (let i = 0; i < fileArray.length; i++) {
+      const file = fileArray[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);
+
+        const response = await fetch("/api/upload", {
+          method: "POST",
+          body: formData,
+          signal: ac.signal,
+          credentials: "include",
+        });
+        if (!response.ok) continue;
+
+        const result = await response.json();
+        const newItem: MediaItem = {
+          ...result,
+          type: getFileType(result.mimeType || file.type) as MediaItem["type"],
+        };
+        uploaded.push(newItem);
+      } catch (error) {
+        console.error(`Error uploading ${file.name}:`, error);
+      }
+      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 fetch(`/api/media/${id}`, { method: "DELETE" });
+      }
+      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)));
+  };
+
+  const cancelUpload = (idx: number) => {
+    setUploadQueue((prev) => {
+      const target = prev.find((p) => p.idx === idx);
+      if (target && (target as any).controller) {
+        try {
+          (target as any).controller.abort();
+        } catch {}
+      }
+      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 fetch(`/api/media/${id}`, {
+          method: "PATCH",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ folder: targetFolder }),
+        });
+      }
+      setSelectedItems(new Set());
+      loadMedia(true);
+      loadFolders();
+    } catch (e) {
+      console.error("Move error:", e);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const createFolder = async (name: string) => {
+    if (!name) return;
+    try {
+      const resp = await fetch("/api/media/folders", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name, parentPath: currentFolder || "" }),
+        credentials: "include",
+      });
+      if (resp.ok) {
+        const newPath = currentFolder ? `${currentFolder}/${name}` : name;
+        setCurrentFolder(newPath);
+        setUploadFolder(newPath);
+        loadFolders();
+      }
+    } catch (e) {
+      console.error("Failed to create folder:", e);
+    }
+    setShowNewFolderModal(false);
+  };
+
+  const confirmDeleteFolder = (folder: string) => {
+    setFolderToDelete(folder);
+    setShowDeleteFolderModal(true);
+  };
+
+  const deleteFolder = async () => {
+    if (!folderToDelete) return;
+    try {
+      const resp = await fetch(
+        `/api/media/folders?path=${encodeURIComponent(folderToDelete)}`,
+        {
+          method: "DELETE",
+          credentials: "include",
+        },
+      );
+      console.log("[deleteFolder] Response status:", resp.status);
+      const result = await resp.json();
+      console.log("[deleteFolder] Response:", result);
+      if (resp.ok) {
+        // Clear items first, then reload
+        setItems([]);
+        if (currentFolder === folderToDelete) {
+          setCurrentFolder("");
+        }
+        loadFolders();
+        // Force fresh load by resetting page
+        setPage(1);
+        loadMedia(true);
+      }
+    } catch (e) {
+      console.error("Failed to delete folder:", e);
+    }
+    setShowDeleteFolderModal(false);
+    setFolderToDelete("");
+  };
+
+  const savePanelMetadata = async () => {
+    if (!panelItem) return;
+    try {
+      const resp = await fetch(`/api/media/${panelItem.id}`, {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ title: panelName, alt: panelAlt }),
+      });
+      if (resp.ok) {
+        setPanelItem(null);
+        loadMedia(true);
+      }
+    } catch (e) {
+      console.error("Failed to save metadata:", e);
+    }
+  };
+
+  const onCropComplete = async () => {
+    if (!imgRef.current || !crop || !panelItem) return;
+
+    // Convert any percentage crops into standard pixels
+    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;
+
+    // Set actual canvas geometry to the exact pixel width * scale
+    canvas.width = pixelCrop.width * scaleX;
+    canvas.height = pixelCrop.height * scaleY;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    ctx.drawImage(
+      imgRef.current,
+      pixelCrop.x * scaleX,
+      pixelCrop.y * scaleY,
+      pixelCrop.width * scaleX,
+      pixelCrop.height * scaleY,
+      0,
+      0,
+      pixelCrop.width * scaleX,
+      pixelCrop.height * scaleY,
+    );
+
+    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);
+
+        setUploading(true);
+        try {
+          const res = await fetch("/api/upload", {
+            method: "POST",
+            body: formData,
+            credentials: "include",
+          });
+          if (res.ok) {
+            setShowCrop(false);
+            setPanelItem(null);
+            loadMedia(true);
+          }
+        } catch (e) {
+          console.error("Crop save failed", e);
+        } finally {
+          setUploading(false);
+        }
+      },
+      "image/webp",
+      0.9,
+    );
+  };
+
+  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>
+  );
+
+  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
+              </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>
+          <div className="flex items-center gap-3">
+            <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)]"}`}
+            >
+              <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>
+            </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)]"}`}
+            >
+              <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>
+            </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>
+                  <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"
+                  >
+                    <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>
+                  </button>
+                </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}
+                </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"}`}
+                >
+                  {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>
+                </button>
+                <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"
+                >
+                  <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>
+                </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>
+            ))}
+          </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"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M5 13l4 4L19 7"
+                    />
+                  </svg>
+                )}
+              </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
+                    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)}
+                  >
+                    {item.type === "image" &&
+                    (item.thumbnailUrl || item.url) ? (
+                      <img
+                        src={getAbsoluteUrl(item.thumbnailUrl || item.url)}
+                        alt=""
+                        className="w-full h-full object-cover"
+                      />
+                    ) : 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>
+                  <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>
+                <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"
+                >
+                  <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>
+                </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"
+                >
+                  <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>
+                </button>
+              </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" />
+          </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>
+            </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()}
+              >
+                Open in new tab
+              </a>
+              <button type="button"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  navigator.clipboard.writeText(
+                    getAbsoluteUrl(lightboxItem.url),
+                  );
+                  setCopiedId("lightbox");
+                  setTimeout(() => setCopiedId(null), 2000);
+                }}
+                className="px-4 py-2 bg-white/10 text-white rounded-lg font-bold text-sm hover:bg-white/20 transition-colors"
+              >
+                {copiedId === "lightbox" ? "Copied!" : "Copy URL"}
+              </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>
+              <button type="button"
+                onClick={() => setPanelItem(null)}
+                className="p-2 rounded-lg hover:bg-[var(--kyro-surface-accent)]"
+              >
+                <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>
+              </button>
+            </div>
+            <div className="aspect-square bg-[var(--kyro-surface-accent)] rounded-lg mb-6 flex items-center justify-center overflow-hidden">
+              {panelItem.type === "image" ? (
+                <img
+                  src={getAbsoluteUrl(panelItem.thumbnailUrl || panelItem.url)}
+                  alt=""
+                  className="w-full h-full object-contain"
+                />
+              ) : (
+                <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>
+              )}
+            </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>
+              <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="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>
+                <p>
+                  <span className="font-bold">Uploaded:</span>{" "}
+                  {formatDate(panelItem.createdAt)}
+                </p>
+              </div>
+              {panelItem.type === "image" && (
+                <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"
+                >
+                  <CropIcon className="w-3.5 h-3.5" />
+                  Crop Image
+                </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>
+              <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)]"
+              >
+                Cancel
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {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="flex gap-3">
+                <button type="button"
+                  onClick={() => setShowCrop(false)}
+                  className="px-4 py-2 border border-white/20 text-white/80 hover:bg-white/10 rounded-lg font-bold text-sm transition-colors"
+                >
+                  Cancel
+                </button>
+                <button type="button"
+                  disabled={uploading}
+                  onClick={onCropComplete}
+                  className="px-4 py-2 bg-[var(--kyro-sidebar-active)] hover:opacity-90 text-[var(--kyro-sidebar-text-active)] rounded-lg font-bold text-sm transition-colors"
+                >
+                  {uploading ? "Saving..." : "Save Crop"}
+                </button>
+              </div>
+            </div>
+            <div className="flex-1 w-full flex items-center justify-center overflow-auto">
+              <ReactCrop crop={crop} onChange={(c) => setCrop(c)}>
+                <img
+                  ref={imgRef}
+                  src={`/api/media/resize?url=${encodeURIComponent(panelItem.url)}`}
+                  alt="Crop preview"
+                  className="max-h-[70vh] object-contain"
+                  onLoad={onImageLoad}
+                />
+              </ReactCrop>
+            </div>
+          </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)}
+        onSubmit={createFolder}
+        title="Create New Folder"
+        placeholder="Folder name"
+      />
+      {showStorageConfigModal &&
+        createPortal(
+          <div className="fixed inset-0 z-[9999] bg-black/80 flex items-center justify-center p-4">
+            <div className="bg-[var(--kyro-surface)] border border-[var(--kyro-border)] rounded-2xl p-8 max-w-md w-full shadow-2xl">
+              <div className="text-center">
+                <div className="w-16 h-16 mx-auto mb-4 rounded-full bg-[var(--kyro-sidebar-active)] flex items-center justify-center">
+                  <svg
+                    className="w-8 h-8 text-[var(--kyro-sidebar-text-active)]"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2H5a2 2 0 00-2 2v1m2 2a2 2 0 11-4 0 2 2 0 014 0zm2 2h.008v.008H5v-.008z"
+                    />
+                  </svg>
+                </div>
+                <h3 className="text-xl font-black text-[var(--kyro-text-primary)] mb-2">
+                  Storage Not Configured
+                </h3>
+                <p className="text-[var(--kyro-text-secondary)] mb-6 text-sm">
+                  Before uploading media, you need to configure your storage
+                  settings. Choose where files should be stored and how URLs are
+                  generated.
+                </p>
+                <div className="flex gap-3">
+                  <a
+                    href="/settings/storage-settings"
+                    className="flex-1 px-4 py-3 bg-[var(--kyro-sidebar-active)] text-[var(--kyro-sidebar-text-active)] rounded-xl font-bold text-center hover:opacity-90 transition-colors"
+                  >
+                    Configure Storage
+                  </a>
+                  <button type="button"
+                    onClick={() => {
+                      // Set default storage config programmatically
+                      fetch("/api/globals/storage-settings", {
+                        method: "PATCH",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({
+                          provider: "local",
+                          local: {
+                            uploadDir: "./public/uploads",
+                            baseUrl: "/uploads",
+                          },
+                        }),
+                      }).then(() => {
+                        setShowStorageConfigModal(false);
+                        setStorageConfigured(true);
+                        window.location.reload();
+                      });
+                    }}
+                    className="flex-1 px-4 py-3 border border-[var(--kyro-border)] text-[var(--kyro-text-secondary)] rounded-xl font-bold hover:bg-[var(--kyro-surface-accent)] transition-colors"
+                  >
+                    Use Defaults
+                  </button>
+                </div>
+              </div>
+            </div>
+          </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}
+        onChange={(e) => {
+          if (e.target.files) handleUpload(e.target.files);
+        }}
+        multiple
+        className="hidden"
+        accept="image/*,video/*,audio/*,.pdf,.doc,.docx,.txt,.zip,.rar,.tar"
+      />
+    </div>
+  );
+}