@kyro-cms/admin 0.8.0 → 0.9.1

package/src/components/MediaGallery.tsx

@@ -38,7 +38,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 +57,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 +116,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 +204,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 +224,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 +233,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 +242,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 +258,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 +269,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 +289,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 +317,7 @@ export function MediaGallery({
       setShowNewFolderModal(false);
     } catch (error) {
       console.error("Failed to create folder:", error);
+      toast.error("Failed to create folder");
     }
   };
 
@@ -320,7 +335,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 +411,7 @@ export function MediaGallery({
       }
     } catch (err) {
       console.error("Crop failed:", err);
+      toast.error("Crop failed");
     } finally {
       setUploading(false);
     }
@@ -414,34 +430,31 @@ 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]">
+        <div className={`flex items-center gap-3 flex-wrap lg:flex-nowrap ${pickerMode ? "w-full" : ""}`}>
+          <div className="relative group flex-1 min-w-[200px]">
             <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"
@@ -464,117 +477,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 +610,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,7 +667,7 @@ 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"
@@ -770,7 +789,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>
@@ -811,7 +830,7 @@ export function MediaGallery({
       </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 +901,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 +993,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,52 +1035,54 @@ 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>
@@ -1115,7 +1136,7 @@ export function MediaGallery({
         )}
 
       {/* Crop Modal */}
-      {showCrop &&
+      {!pickerMode && showCrop &&
         panelItem &&
         createPortal(
           <div className="fixed inset-0 z-[9999] bg-black/95 flex flex-col p-8">
@@ -1155,14 +1176,16 @@ export function MediaGallery({
           </div>,
           document.body,
         )}
-      <PromptModal
-        open={showNewFolderModal}
-        onClose={() => setShowNewFolderModal(false)}
-        onSubmit={createFolder}
-        title="Create New Folder"
-        placeholder="Folder name"
-      />
-      {showStorageConfigModal &&
+      {!pickerMode && (
+        <PromptModal
+          open={showNewFolderModal}
+          onClose={() => setShowNewFolderModal(false)}
+          onSubmit={createFolder}
+          title="Create New Folder"
+          placeholder="Folder name"
+        />
+      )}
+      {!pickerMode && 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">
@@ -1223,16 +1246,18 @@ export function MediaGallery({
           </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"
-      />
+      {!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>
   );
 }