@kyro-cms/admin 0.9.0 → 0.9.2

package/src/components/MediaGallery.tsx

@@ -1,8 +1,11 @@
+import { Search, Check, Server } from "./ui/icons";
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import { Spinner } from "./ui/Spinner";
 import { Shimmer } from "./ui/Shimmer";
 import { SlidePanel } from "./ui/SlidePanel";
+import { Modal } from "./ui/Modal";
+import { Pagination } from "./ui/Pagination";
 import { Badge } from "./ui/Badge";
 import { Folder } from "./ui/icons";
 
@@ -38,7 +41,7 @@ import {
   withCacheBust,
   apiUpload,
 } from "../lib/api";
-import { useAuthStore, useUIStore } from "../lib/stores";
+import { useAuthStore, useUIStore, toast } from "../lib/stores";
 
 interface MediaItem {
   id: string;
@@ -57,7 +60,8 @@ interface MediaItem {
   updatedAt?: string;
 }
 
-function getAbsoluteUrl(relativeUrl: string): string {
+function getAbsoluteUrl(relativeUrl: unknown): string {
+  if (typeof relativeUrl !== "string" || !relativeUrl) return "";
   if (typeof window === "undefined") return relativeUrl;
   // Remote URLs and blob URLs are returned as-is
   if (relativeUrl.startsWith("http") || relativeUrl.startsWith("blob:")) {
@@ -115,10 +119,12 @@ function getFileType(mimeType: string): FilterType {
 
 export function MediaGallery({
   onSelect,
-  multiple = false,
+  multiple = true,
+  pickerMode = false,
 }: {
   onSelect?: (items: MediaItem[]) => void;
   multiple?: boolean;
+  pickerMode?: boolean;
 }) {
   const { permissions } = useAuthStore();
   const canUpload = permissions?.media?.create !== false;
@@ -201,15 +207,16 @@ export function MediaGallery({
   }, []);
 
   useEffect(() => {
-    checkStorage();
-  }, [checkStorage]);
+    if (!pickerMode) checkStorage();
+  }, [checkStorage, pickerMode]);
 
   useEffect(() => {
+    if (pickerMode) return;
     if (storageConfigured === false && !storageChecked) {
       setStorageChecked(true);
       setShowStorageConfigModal(true);
     }
-  }, [storageConfigured, storageChecked]);
+  }, [pickerMode, storageConfigured, storageChecked]);
 
   useEffect(() => {
     loadMedia();
@@ -220,6 +227,7 @@ export function MediaGallery({
   }, [loadFolders]);
 
   useEffect(() => {
+    if (pickerMode) return;
     const handlePaste = (e: ClipboardEvent) => {
       const files = e.clipboardData?.files;
       if (files && files.length > 0) {
@@ -228,7 +236,7 @@ export function MediaGallery({
     };
     window.addEventListener("paste", handlePaste);
     return () => window.removeEventListener("paste", handlePaste);
-  }, [currentFolder, storageConfigured]);
+  }, [pickerMode, currentFolder, storageConfigured]);
 
   const handleUpload = async (files: FileList | File[]) => {
     if (!storageConfigured) {
@@ -237,7 +245,8 @@ export function MediaGallery({
     }
 
     setUploading(true);
-    const newProgress = { ...uploadProgress };
+    let successCount = 0;
+    let failCount = 0;
 
     for (let i = 0; i < files.length; i++) {
       const file = files[i];
@@ -252,9 +261,10 @@ export function MediaGallery({
             [file.name]: progress,
           }));
         });
+        successCount++;
       } catch (error) {
         console.error(`Upload failed for ${file.name}:`, error);
-        alert({ title: "Upload Failed", message: `Failed to upload ${file.name}` });
+        failCount++;
       }
     }
 
@@ -262,6 +272,12 @@ export function MediaGallery({
     setUploadProgress({});
     loadMedia();
     loadFolders();
+    if (failCount > 0) {
+      toast.error(`${failCount} file(s) failed to upload`);
+    }
+    if (successCount > 0) {
+      toast.success(`${successCount} file(s) uploaded successfully`);
+    }
   };
 
   const handleBulkDelete = () => {
@@ -276,9 +292,10 @@ export function MediaGallery({
           }
           setSelectedIds(new Set());
           loadMedia();
+          toast.success(`${selectedIds.size} item(s) deleted`);
         } catch (error) {
           console.error("Bulk delete failed:", error);
-          alert({ title: "Error", message: "Failed to delete some items" });
+          toast.error("Failed to delete some items");
         }
       }
     });
@@ -303,6 +320,7 @@ export function MediaGallery({
       setShowNewFolderModal(false);
     } catch (error) {
       console.error("Failed to create folder:", error);
+      toast.error("Failed to create folder");
     }
   };
 
@@ -320,7 +338,7 @@ export function MediaGallery({
           loadMedia();
         } catch (error) {
           console.error("Failed to delete folder:", error);
-          alert({ title: "Error", message: "Failed to delete folder" });
+          toast.error("Failed to delete folder");
         }
       }
     });
@@ -396,6 +414,7 @@ export function MediaGallery({
       }
     } catch (err) {
       console.error("Crop failed:", err);
+      toast.error("Crop failed");
     } finally {
       setUploading(false);
     }
@@ -414,47 +433,32 @@ export function MediaGallery({
   return (
     <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);
-      }}
+      {...(pickerMode ? {} : {
+        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 className={`flex flex-col lg:flex-row lg:items-center justify-between gap-6 border-b border-[var(--kyro-border)] backdrop-blur-md sticky top-0 z-40 ${pickerMode ? "p-2" : "p-6 rounded-xl surface-tile"}`}>
+        {!pickerMode && (
+          <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>
           </div>
-        </div>
+        )}
 
-        <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>
+        <div className={`flex items-center gap-3 flex-wrap lg:flex-nowrap ${pickerMode ? "w-full" : ""}`}>
+          <div className="relative group flex-1 min-w-[200px]">
+            <Search className="w-4 h-4" />
             <input
               type="text"
               placeholder="Search assets..."
@@ -464,117 +468,123 @@ export function MediaGallery({
             />
           </div>
 
-          <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
-            <button
-              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"}`}
-            >
-              <Grid className="w-4 h-4" />
-            </button>
-            <button
-              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"}`}
-            >
-              <FileIcon className="w-4 h-4" />
-            </button>
-          </div>
+          {!pickerMode && (
+            <>
+              <div className="flex bg-[var(--kyro-surface-accent)] p-1 rounded-xl border border-[var(--kyro-border)]">
+                <button
+                  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"}`}
+                >
+                  <Grid className="w-4 h-4" />
+                </button>
+                <button
+                  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"}`}
+                >
+                  <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>
+              {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-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) => (
+        {!pickerMode && (
+          <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
+                      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"}`}
+                    >
+                      <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 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>
                   <button
-                    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"}`}
+                    onClick={() => setShowNewFolderModal(true)}
+                    className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-colors text-[var(--kyro-text-primary)]"
                   >
-                    <span
-                      className={`w-1.5 h-1.5 rounded-full ${filter === t ? "bg-[var(--kyro-primary)]" : "bg-transparent border border-current opacity-30"}`}
-                    />
-                    {t}
+                    <FolderPlus className="w-4 h-4" />
                   </button>
-                ))}
-              </div>
-            </div>
+                </div>
 
-            <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>
-                <button
-                  onClick={() => setShowNewFolderModal(true)}
-                  className="p-1.5 hover:bg-[var(--kyro-surface-accent)] rounded-lg transition-colors text-[var(--kyro-text-primary)]"
-                >
-                  <FolderPlus className="w-4 h-4" />
-                </button>
+                <nav className="space-y-1">
+                  <button
+                    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)]"}`}
+                  >
+                    <FolderInput className="w-4 h-4 opacity-70" />
+                    All Assets
+                  </button>
+                  {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>
-
-              <nav className="space-y-1">
-                <button
-                  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)]"}`}
-                >
-                  <FolderInput className="w-4 h-4 opacity-70" />
-                  All Assets
-                </button>
-                {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>
+        )}
 
         {/* 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">
+          <div className={`flex-1 overflow-y-auto custom-scrollbar ${pickerMode ? "px-2 py-4" : "py-8 px-4"}`}>
             {loading ? (
               <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5">
                 <Shimmer variant="media-card" count={12} />
@@ -591,7 +601,7 @@ export function MediaGallery({
                   Upload your first file or create a folder to organize your
                   media assets.
                 </p>
-                {canUpload && (
+                {!pickerMode && 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"
@@ -648,21 +658,9 @@ export function MediaGallery({
                         <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"}`}
+                            className={`kyro-btn-primary p-1.5 rounded-lg transition-all ${selectedIds.has(item.id) ? "" : "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>
+                            <Check className="w-4 h-4" />
                           </button>
                         </div>
                       </div>
@@ -670,19 +668,7 @@ export function MediaGallery({
 
                     {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>
+                        <Check className="w-4 h-4" />
                       </div>
                     )}
                   </div>
@@ -770,7 +756,7 @@ export function MediaGallery({
                               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"}`}
+                            className={`kyro-btn-primary p-2 rounded-lg transition-all ${selectedIds.has(item.id) ? "" : "text-[var(--kyro-text-secondary)] hover:bg-[var(--kyro-surface-accent)] opacity-0 group-hover:opacity-100"}`}
                           >
                             <Grid className="w-4 h-4" />
                           </button>
@@ -783,35 +769,16 @@ export function MediaGallery({
             )}
           </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
-                  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"
-                >
-                  Previous
-                </button>
-                <button
-                  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"
-                >
-                  Next
-                </button>
-              </div>
-            </div>
-          )}
+          <Pagination
+            page={page}
+            totalPages={totalPages}
+            onPageChange={setPage}
+          />
         </div>
       </div>
 
       {/* Upload Banner */}
-      {uploading && (
+      {!pickerMode && 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">
@@ -882,7 +849,7 @@ export function MediaGallery({
                 Confirm Selection
               </button>
             )}
-            {canDelete && (
+            {!pickerMode && canDelete && (
               <button
                 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"
@@ -974,7 +941,7 @@ export function MediaGallery({
                         navigator.clipboard.writeText(
                           getAbsoluteUrl(panelItem.url),
                         );
-                        alert({ title: "Copied", message: "URL copied to clipboard" });
+                        toast.success("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"
                     >
@@ -1016,109 +983,119 @@ export function MediaGallery({
               </div>
             </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
-                  onClick={() => setShowCrop(true)}
-                  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-4 h-4" />
-                </button>
-              )}
-              {canDelete && (
+            {!pickerMode && (
+              <div className="pt-8 border-t border-[var(--kyro-border)] mt-8 flex gap-3 pb-8">
                 <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" });
-                        }
-                      }
-                    });
+                    const link = document.createElement("a");
+                    link.href = getAbsoluteUrl(panelItem.url);
+                    link.download = panelItem.filename;
+                    link.click();
                   }}
-                  className="p-3 border border-red-100 text-red-500 rounded-xl hover:bg-red-50 transition-all"
+                  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"
                 >
-                  <Trash2 className="w-4 h-4" />
+                  <Download className="w-4 h-4" />
+                  Download
                 </button>
-              )}
-            </div>
+                {panelItem.type === "image" && canUpdate && (
+                  <button
+                    onClick={() => setShowCrop(true)}
+                    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-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);
+                            toast.error("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>
         )}
       </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
-                onClick={() => setShowPreview(false)}
-                className="p-3 bg-white/10 hover:bg-white/20 text-white rounded-2xl transition-all active:scale-90"
-              >
-                <X className="w-6 h-6" />
-              </button>
-            </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>
-              )}
+      {showPreview && panelItem && (
+        <Modal
+          open={showPreview}
+          onClose={() => setShowPreview(false)}
+          title=""
+          size="full"
+          variant="lightbox"
+        >
+          <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>
-          </div>,
-          document.body,
-        )}
+            <button
+              onClick={() => setShowPreview(false)}
+              className="p-3 bg-white/10 hover:bg-white/20 text-white rounded-2xl transition-all active:scale-90"
+            >
+              <X className="w-6 h-6" />
+            </button>
+          </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>
+        </Modal>
+      )}
 
       {/* Crop Modal */}
-      {showCrop &&
-        panelItem &&
-        createPortal(
-          <div className="fixed inset-0 z-[9999] bg-black/95 flex flex-col p-8">
+      {!pickerMode && showCrop && panelItem && (
+        <Modal
+          open={showCrop}
+          onClose={() => setShowCrop(false)}
+          title=""
+          size="full"
+          variant="lightbox"
+        >
+          <div className="flex flex-col h-full p-8">
             <div className="flex items-center justify-between mb-8">
               <h3 className="text-white font-bold text-2xl tracking-tighter">
                 Crop Image
@@ -1152,87 +1129,77 @@ export function MediaGallery({
                 />
               </ReactCrop>
             </div>
-          </div>,
-          document.body,
-        )}
-      <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-bold 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
-                      apiPost("/api/globals/storage-settings", {
-                        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>
+        </Modal>
+      )}
+      {!pickerMode && (
+        <PromptModal
+          open={showNewFolderModal}
+          onClose={() => setShowNewFolderModal(false)}
+          onSubmit={createFolder}
+          title="Create New Folder"
+          placeholder="Folder name"
+        />
+      )}
+      {!pickerMode && (
+        <Modal
+          open={showStorageConfigModal}
+          onClose={() => setShowStorageConfigModal(false)}
+          title="Storage Not Configured"
+          size="md"
+        >
+          <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">
+              <Server className="w-8 h-8 text-[var(--kyro-sidebar-text-active)]" />
             </div>
-          </div>,
-          document.body,
-        )}
-      <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"
-      />
+            <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
+                  apiPost("/api/globals/storage-settings", {
+                    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>
+        </Modal>
+      )}
+      {!pickerMode && (
+        <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>
   );
 }