opacacms 0.1.0

package/src/admin/ui/views/media-registry-view.tsx

@@ -0,0 +1,1104 @@
+import { useStore } from "@nanostores/react";
+import {
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Download,
+  Eye,
+  File,
+  FileText,
+  FolderPlus,
+  Grid,
+  Image as ImageIcon,
+  LayoutList,
+  Loader2,
+  Plus,
+  Save,
+  Search,
+  Settings2,
+  Trash2,
+  X,
+} from "lucide-react";
+import { useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import type { SerializableCollection, SerializableConfig } from "../../../types";
+import { api } from "../../api-client";
+import {
+  $assets,
+  $bucketColors,
+  $mediaCurrentFolder,
+  $mediaPage,
+  $mediaSearch,
+  $mediaSelectedBucket,
+  $mediaViewMode,
+  type AssetDoc,
+  setBucketColor,
+  setMediaBucket,
+  setMediaFolder,
+  setMediaPage,
+  setMediaSearch,
+} from "../../stores/media";
+import { notify } from "../../stores/ui";
+import {
+  Button,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "../components/ui";
+import { AlertDialog } from "../components/ui/alert-dialog";
+import "../styles/media-registry.scss";
+
+const formatMediaDate = (date: string | number | Date | undefined | null) => {
+  if (!date) return "-";
+  const d = new Date(date);
+  return Number.isNaN(d.getTime()) ? "-" : d.toLocaleDateString();
+};
+
+export interface MediaRegistryViewProps {
+  collection: SerializableCollection;
+  config: SerializableConfig;
+}
+
+// Utility for deterministic bucket colors
+const PRESET_COLORS = [
+  "#7c3aed", // Purple
+  "#047857", // Emerald
+  "#b91c1c", // Red
+  "#0369a1", // Sky
+  "#a21caf", // Fuchsia
+  "#c2410c", // Orange
+  "#eab308", // Yellow
+  "#10b981", // Green
+  "#ec4899", // Pink
+  "#6366f1", // Indigo
+];
+
+const getBucketColor = (bucket: string, customColors: Record<string, string>) => {
+  if (customColors && customColors[bucket]) return customColors[bucket];
+
+  let hash = 0;
+  for (let i = 0; i < bucket.length; i++) {
+    hash = bucket.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  return PRESET_COLORS[Math.abs(hash) % PRESET_COLORS.length];
+};
+
+export function MediaRegistryView({ collection, config }: MediaRegistryViewProps) {
+  const { data, loading } = useStore($assets);
+  const viewMode = useStore($mediaViewMode);
+  const selectedBucket = useStore($mediaSelectedBucket);
+  const currentFolder = useStore($mediaCurrentFolder);
+  const search = useStore($mediaSearch);
+  const page = useStore($mediaPage);
+  const customColors = useStore($bucketColors);
+
+  const [isUploading, setIsUploading] = useState(false);
+  const [selectedAsset, setSelectedAsset] = useState<AssetDoc | null>(null);
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const [newFolderName, setNewFolderName] = useState("");
+  const [isCreateFolderOpen, setIsCreateFolderOpen] = useState(false);
+  const [isBucketSettingsOpen, setIsBucketSettingsOpen] = useState(false);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const buckets = useMemo(() => {
+    const storageKeys = Object.keys(config.storages || {});
+    return [...storageKeys];
+  }, [config.storages]);
+
+  const fetchData = () => {
+    // Now handled by $assets store automatically when dependencies change
+    // but we can call it manually to refresh if needed (e.g. after upload/delete)
+    // Actually, $assets is a fetcher store, so it has .revalidate()
+    $assets.revalidate();
+  };
+
+  const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file) return;
+
+    setIsUploading(true);
+    const formData = new FormData();
+    formData.append("file", file);
+
+    try {
+      const bucket = selectedBucket === "all" ? "default" : selectedBucket;
+      await api.post(`api/__system/assets/upload?bucket=${bucket}&folder=${currentFolder}`, {
+        body: formData,
+      });
+      notify("File uploaded successfully", "success");
+      fetchData();
+    } catch (err) {
+      console.error("Upload failed", err);
+      notify("Upload failed", "error");
+    } finally {
+      setIsUploading(false);
+      if (fileInputRef.current) fileInputRef.current.value = "";
+    }
+  };
+
+  const handleCreateFolder = async () => {
+    if (!newFolderName) return;
+    try {
+      const bucket = selectedBucket === "all" ? "default" : selectedBucket;
+      // We upload a .keep file to "create" the folder in typical object storage
+      const blob = new Blob([""], { type: "text/plain" });
+      const formData = new FormData();
+      const folderPath = currentFolder ? `${currentFolder}/${newFolderName}` : newFolderName;
+      formData.append("file", blob, ".keep");
+
+      await api.post(`api/__system/assets/upload?bucket=${bucket}&folder=${folderPath}`, {
+        body: formData,
+      });
+
+      notify("Folder created", "success");
+      setNewFolderName("");
+      setIsCreateFolderOpen(false);
+      fetchData();
+    } catch (err) {
+      console.error("Failed to create folder", err);
+      notify("Failed to create folder", "error");
+    }
+  };
+
+  const handleUpdateMetadata = async () => {
+    if (!selectedAsset) return;
+    try {
+      await api.patch(`api/${collection.slug}/${selectedAsset.id}`, {
+        json: {
+          filename: selectedAsset.filename,
+          altText: selectedAsset.altText || selectedAsset.alt_text,
+          caption: selectedAsset.caption,
+        },
+      });
+      notify("Metadata updated", "success");
+      fetchData();
+    } catch (err) {
+      console.error("Failed to update metadata", err);
+      notify("Failed to update metadata", "error");
+    }
+  };
+
+  const handleDelete = async (id: string) => {
+    try {
+      await api.delete(`api/${collection.slug}/${id}`);
+      notify("Asset deleted", "success");
+      if (selectedAsset?.id === id) setSelectedAsset(null);
+      fetchData();
+    } catch (err) {
+      console.error("Delete failed", err);
+      notify("Failed to delete asset", "error");
+    }
+  };
+
+  const docs = data?.docs || [];
+  const folders = data?.folders || [];
+
+  const formatSize = (bytes: number) => {
+    if (bytes === 0) return "0 Bytes";
+    const k = 1024;
+    const sizes = ["Bytes", "KB", "MB", "GB"];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / k ** i).toFixed(1)) + " " + sizes[i];
+  };
+
+  const getFileIcon = (mime: string) => {
+    if (!mime) return <File size={viewMode === "grid" ? 48 : 20} className="text-gray-400" />;
+    if (mime.startsWith("image/"))
+      return <ImageIcon size={viewMode === "grid" ? 48 : 20} className="text-blue-400" />;
+    if (mime.startsWith("video/"))
+      return <FileText size={viewMode === "grid" ? 48 : 20} className="text-purple-400" />;
+    if (mime.includes("pdf"))
+      return <FileText size={viewMode === "grid" ? 48 : 20} className="text-red-400" />;
+    return <File size={viewMode === "grid" ? 48 : 20} className="text-gray-400" />;
+  };
+
+  const filteredDocs = docs.filter((doc) => {
+    const originalFilename = doc.originalFilename || doc.original_filename;
+    return (
+      originalFilename?.toLowerCase().includes(search.toLowerCase()) ||
+      doc.filename.toLowerCase().includes(search.toLowerCase())
+    );
+  });
+
+  const filteredFolders = folders.filter((f) =>
+    f.name.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  return (
+    <div className={`opaca-view-container media-registry-view ${loading ? "loading" : ""}`}>
+      <input type="file" ref={fileInputRef} style={{ display: "none" }} onChange={handleUpload} />
+      <div className="opaca-header media-registry-header">
+        <div>
+          <h1 className="opaca-title">Media Library</h1>
+          <p className="opaca-subtitle">Manage your global asset registry across all buckets.</p>
+        </div>
+        <div className="media-registry-header-actions">
+          <Button
+            variant="outline"
+            onClick={() => setIsCreateFolderOpen(true)}
+            disabled={selectedBucket === "all"}
+            title={selectedBucket === "all" ? "Select a specific bucket to create folders" : ""}
+          >
+            <FolderPlus size={16} className="media-registry-icon-mr" />
+            New Folder
+          </Button>
+          <Button
+            variant="default"
+            disabled={isUploading || selectedBucket === "all"}
+            onClick={() => fileInputRef.current?.click()}
+            title={selectedBucket === "all" ? "Select a specific bucket to upload files" : ""}
+          >
+            {isUploading ? (
+              <Loader2 size={16} className="opaca-spin media-registry-icon-mr" />
+            ) : (
+              <Plus size={16} className="media-registry-icon-mr" />
+            )}
+            {isUploading ? "Uploading..." : "Upload New"}
+          </Button>
+        </div>
+      </div>
+
+      <div
+        style={{
+          display: "flex",
+          flex: 1,
+          minHeight: 0,
+          gap: "1.5rem",
+          marginBottom: "1.5rem",
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            minWidth: 0,
+          }}
+        >
+          {/* Breadcrumbs */}
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem",
+              marginBottom: "1rem",
+              color: "var(--opaca-text-dim)",
+              fontSize: "0.875rem",
+            }}
+          >
+            <button
+              type="button"
+              onClick={() => setMediaFolder("")}
+              style={{
+                background: "none",
+                border: "none",
+                color: currentFolder === "" ? "var(--opaca-text)" : "inherit",
+                cursor: "pointer",
+                fontWeight: currentFolder === "" ? 600 : 400,
+              }}
+            >
+              Home
+            </button>
+            {currentFolder
+              .split("/")
+              .filter(Boolean)
+              .map((part, i, arr) => (
+                <div
+                  key={part}
+                  style={{
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "0.5rem",
+                  }}
+                >
+                  <ChevronRight size={14} />
+                  <button
+                    type="button"
+                    onClick={() => setMediaFolder(arr.slice(0, i + 1).join("/"))}
+                    style={{
+                      background: "none",
+                      border: "none",
+                      color: i === arr.length - 1 ? "var(--opaca-text)" : "inherit",
+                      cursor: "pointer",
+                      fontWeight: i === arr.length - 1 ? 600 : 400,
+                    }}
+                  >
+                    {part}
+                  </button>
+                </div>
+              ))}
+          </div>
+
+          <div className="opaca-card media-registry-body">
+            {/* Toolbar */}
+            <div className="media-registry-toolbar">
+              <div className="media-registry-filters">
+                <div className="media-registry-search">
+                  <Search size={16} className="search-icon" />
+                  <Input
+                    type="text"
+                    placeholder="Search assets..."
+                    value={search}
+                    onChange={(e) => setMediaSearch(e.target.value)}
+                  />
+                </div>
+
+                <Select value={selectedBucket} onValueChange={(val: string) => setMediaBucket(val)}>
+                  <SelectTrigger className="media-registry-select-trigger">
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "8px",
+                      }}
+                    >
+                      {selectedBucket !== "all" && (
+                        <div
+                          style={{
+                            width: "8px",
+                            height: "8px",
+                            borderRadius: "50%",
+                            backgroundColor: getBucketColor(selectedBucket, customColors),
+                          }}
+                        />
+                      )}
+                      <SelectValue placeholder="All Buckets" />
+                    </div>
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">
+                      <div
+                        style={{
+                          display: "flex",
+                          alignItems: "center",
+                          gap: "8px",
+                        }}
+                      >
+                        <div
+                          style={{
+                            width: "8px",
+                            height: "8px",
+                            borderRadius: "50%",
+                            border: "1px dashed var(--opaca-text-dim)",
+                          }}
+                        />
+                        All Buckets
+                      </div>
+                    </SelectItem>
+                    <SelectSeparator />
+                    <SelectLabel>Storage Buckets</SelectLabel>
+                    {buckets.map((b) => (
+                      <SelectItem key={b} value={b.toLowerCase()}>
+                        <div
+                          style={{
+                            display: "flex",
+                            alignItems: "center",
+                            gap: "8px",
+                          }}
+                        >
+                          <div
+                            style={{
+                              width: "8px",
+                              height: "8px",
+                              borderRadius: "50%",
+                              backgroundColor: getBucketColor(b, customColors),
+                            }}
+                          />
+                          {b.toUpperCase()}
+                        </div>
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  onClick={() => setIsBucketSettingsOpen(true)}
+                  title="Bucket Settings"
+                >
+                  <Settings2 size={16} />
+                </Button>
+
+                <div className="media-registry-view-toggles">
+                  <button
+                    type="button"
+                    onClick={() => $mediaViewMode.set("grid")}
+                    className={`media-registry-toggle-btn ${viewMode === "grid" ? "active" : ""}`}
+                  >
+                    <Grid size={16} />
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => $mediaViewMode.set("list")}
+                    className={`media-registry-toggle-btn ${viewMode === "list" ? "active" : ""}`}
+                  >
+                    <LayoutList size={16} />
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            {loading && (
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "center",
+                  padding: "4rem",
+                }}
+              >
+                <Loader2
+                  size={32}
+                  className="opaca-spin"
+                  style={{ color: "var(--opaca-accent)" }}
+                />
+              </div>
+            )}
+
+            {!loading && filteredDocs.length === 0 && (
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                  padding: "4rem",
+                  background: "rgba(255,255,255,0.01)",
+                  borderRadius: "12px",
+                  border: "1px dashed var(--opaca-border)",
+                }}
+              >
+                <ImageIcon
+                  size={48}
+                  style={{
+                    color: "var(--opaca-text-dim)",
+                    marginBottom: "1rem",
+                    opacity: 0.3,
+                  }}
+                />
+                <h3 style={{ fontSize: "1.25rem", fontWeight: 600 }}>No assets found</h3>
+                <p style={{ color: "var(--opaca-text-muted)" }}>
+                  Upload some files to get started.
+                </p>
+              </div>
+            )}
+
+            {/* Grid View */}
+            {!loading &&
+              viewMode === "grid" &&
+              (filteredFolders.length > 0 || filteredDocs.length > 0) && (
+                <div className="media-registry-grid">
+                  {/* Folders first */}
+                  {filteredFolders.map((folder) => (
+                    <div
+                      key={`folder-${folder.name}`}
+                      className="media-registry-card"
+                      onClick={() =>
+                        setMediaFolder(
+                          currentFolder ? `${currentFolder}/${folder.name}` : folder.name,
+                        )
+                      }
+                    >
+                      <div className="media-registry-card-thumb" style={{ position: "relative" }}>
+                        <FolderPlus size={54} className="folder-icon" />
+                        {selectedBucket === "all" && (
+                          <div
+                            style={{
+                              position: "absolute",
+                              bottom: "8px",
+                              right: "8px",
+                              display: "flex",
+                              gap: "2px",
+                            }}
+                          >
+                            {folder.buckets.map((b) => (
+                              <div
+                                key={b}
+                                title={b}
+                                style={{
+                                  width: "8px",
+                                  height: "8px",
+                                  borderRadius: "50%",
+                                  backgroundColor: getBucketColor(b, customColors),
+                                }}
+                              />
+                            ))}
+                          </div>
+                        )}
+                      </div>
+                      <div className="media-registry-card-body">
+                        <div className="media-registry-card-title">{folder.name}</div>
+                        <div className="media-registry-card-meta">Folder</div>
+                      </div>
+                    </div>
+                  ))}
+
+                  {/* Assets */}
+                  {filteredDocs.map((doc) => (
+                    <div
+                      key={doc.id}
+                      className={`media-registry-card ${selectedAsset?.id === doc.id ? "active" : ""}`}
+                      onClick={() => setSelectedAsset(doc)}
+                    >
+                      <div className="media-registry-card-thumb" style={{ position: "relative" }}>
+                        {(() => {
+                          const mime = doc.mimeType || doc.mime_type;
+                          return mime?.startsWith("image/") ? (
+                            <img
+                              src={`${config.serverURL || ""}/api/assets/${doc.id}/view`}
+                              alt={doc.originalFilename || doc.original_filename || ""}
+                              onError={(e) => (e.currentTarget.style.display = "none")}
+                            />
+                          ) : (
+                            getFileIcon(mime || "")
+                          );
+                        })()}
+
+                        {selectedBucket === "all" && (
+                          <div
+                            title={`Bucket: ${doc.bucket}`}
+                            style={{
+                              position: "absolute",
+                              top: "8px",
+                              left: "8px",
+                              width: "12px",
+                              height: "12px",
+                              borderRadius: "50%",
+                              backgroundColor: getBucketColor(doc.bucket, customColors),
+                              border: "2px solid rgba(0,0,0,0.5)",
+                              zIndex: 2,
+                            }}
+                          />
+                        )}
+
+                        <div className="media-registry-overlay">
+                          <button
+                            className="media-registry-overlay-btn"
+                            onClick={(e) => {
+                              e.stopPropagation();
+                              setSelectedAsset(doc);
+                              setIsPreviewOpen(true);
+                            }}
+                          >
+                            <Eye size={20} />
+                          </button>
+                        </div>
+                      </div>
+                      <div className="media-registry-card-body">
+                        <div className="media-registry-card-title" title={doc.original_filename}>
+                          {doc.original_filename}
+                        </div>
+                        <div className="media-registry-card-meta">
+                          <span className="meta-type">
+                            {(doc.mimeType || doc.mime_type)?.split("/")[1] || "FILE"}
+                          </span>
+                          <span>{formatSize(doc.filesize)}</span>
+                        </div>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              )}
+
+            {/* List View */}
+            {!loading &&
+              viewMode === "list" &&
+              (filteredFolders.length > 0 || filteredDocs.length > 0) && (
+                <div className="opaca-table-container">
+                  <table className="opaca-table">
+                    <thead>
+                      <tr>
+                        <th style={{ width: "40px" }}></th>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Size</th>
+                        <th>Date</th>
+                        <th style={{ width: "40px" }}></th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {/* Folders first */}
+                      {filteredFolders.map((folder) => (
+                        <tr
+                          key={`folder-${folder.name}`}
+                          onClick={() =>
+                            setMediaFolder(
+                              currentFolder ? `${currentFolder}/${folder.name}` : folder.name,
+                            )
+                          }
+                          style={{ cursor: "pointer" }}
+                        >
+                          <td>
+                            <div
+                              style={{
+                                position: "relative",
+                                display: "inline-block",
+                              }}
+                            >
+                              <FolderPlus size={20} style={{ color: "#eab308" }} />
+                              {selectedBucket === "all" && (
+                                <div
+                                  style={{
+                                    position: "absolute",
+                                    bottom: "-2px",
+                                    right: "-2px",
+                                    display: "flex",
+                                    gap: "1px",
+                                  }}
+                                >
+                                  {folder.buckets.map((b) => (
+                                    <div
+                                      key={b}
+                                      style={{
+                                        width: "6px",
+                                        height: "6px",
+                                        borderRadius: "50%",
+                                        backgroundColor: getBucketColor(b, customColors),
+                                      }}
+                                    />
+                                  ))}
+                                </div>
+                              )}
+                            </div>
+                          </td>
+                          <td style={{ fontWeight: 600 }}>{folder.name}</td>
+                          <td>Folder</td>
+                          <td>-</td>
+                          <td>-</td>
+                          <td></td>
+                        </tr>
+                      ))}
+
+                      {filteredDocs.map((doc) => (
+                        <tr
+                          key={doc.id}
+                          onClick={() => setSelectedAsset(doc)}
+                          style={{
+                            cursor: "pointer",
+                            background:
+                              selectedAsset?.id === doc.id
+                                ? "rgba(var(--opaca-accent-rgb), 0.1)"
+                                : "inherit",
+                          }}
+                        >
+                          <td>
+                            <div
+                              style={{
+                                width: "32px",
+                                height: "32px",
+                                borderRadius: "4px",
+                                background: "var(--opaca-bg-alt)",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                overflow: "hidden",
+                              }}
+                            >
+                              {(() => {
+                                const mime = doc.mimeType || doc.mime_type || "";
+                                return mime.startsWith("image/") ? (
+                                  <img
+                                    src={`${config.serverURL || ""}/api/assets/${doc.id}/view`}
+                                    style={{
+                                      width: "100%",
+                                      height: "100%",
+                                      objectFit: "cover",
+                                    }}
+                                    alt=""
+                                  />
+                                ) : (
+                                  getFileIcon(mime)
+                                );
+                              })()}
+                            </div>
+                          </td>
+                          <td>
+                            <div style={{ fontWeight: 500 }}>{doc.original_filename}</div>
+                            <div
+                              style={{
+                                fontSize: "0.75rem",
+                                color: "var(--opaca-text-dim)",
+                              }}
+                            >
+                              {doc.filename}
+                            </div>
+                          </td>
+                          <td style={{ fontSize: "0.875rem" }}>
+                            {doc.mimeType || doc.mime_type || ""}
+                          </td>
+                          <td style={{ fontSize: "0.875rem" }}>{formatSize(doc.filesize)}</td>
+                          <td
+                            style={{
+                              fontSize: "0.75rem",
+                              color: "var(--opaca-text-muted)",
+                            }}
+                          >
+                            {formatMediaDate(doc.createdAt || doc.created_at)}
+                          </td>
+                          <td>
+                            <button
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                setSelectedAsset(doc);
+                                setIsPreviewOpen(true);
+                              }}
+                              style={{
+                                background: "none",
+                                border: "none",
+                                color: "var(--opaca-text-dim)",
+                                cursor: "pointer",
+                              }}
+                            >
+                              <Eye size={18} />
+                            </button>
+                          </td>
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              )}
+
+            {/* Pagination */}
+            {data && data.totalPages > 1 && (
+              <div className="media-registry-pagination">
+                <div className="info">
+                  Showing {(data.page - 1) * data.limit + 1} to{" "}
+                  {Math.min(data.page * data.limit, data.totalDocs)} of {data.totalDocs}
+                </div>
+                <div className="actions">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={data.page === 1 || loading}
+                    onClick={() => setMediaPage(page - 1)}
+                  >
+                    <ChevronLeft size={16} />
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    disabled={data.page === data.totalPages || loading}
+                    onClick={() => setMediaPage(page + 1)}
+                  >
+                    <ChevronRight size={16} />
+                  </Button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* Asset Details Sheet */}
+      <Sheet
+        open={!!selectedAsset && !isPreviewOpen}
+        onOpenChange={(open) => !open && setSelectedAsset(null)}
+      >
+        <SheetContent onClose={() => setSelectedAsset(null)}>
+          <SheetHeader>
+            <SheetTitle>Asset Details</SheetTitle>
+            <SheetDescription>View and manage asset metadata.</SheetDescription>
+          </SheetHeader>
+
+          {selectedAsset && (
+            <div className="media-sheet-flex">
+              <div className="media-sheet-body opaca-scrollbar-hidden">
+                <div className="media-sheet-preview">
+                  {(() => {
+                    const mime = selectedAsset.mimeType || selectedAsset.mime_type || "";
+                    return mime.startsWith("image/") ? (
+                      <img
+                        src={`${config.serverURL || ""}/api/assets/${selectedAsset.id}/view`}
+                        alt={selectedAsset.filename}
+                      />
+                    ) : (
+                      getFileIcon(mime)
+                    );
+                  })()}
+                  <div className="overlay">
+                    <Button variant="secondary" onClick={() => setIsPreviewOpen(true)}>
+                      <Eye size={16} className="media-registry-icon-mr" />
+                      Preview Full
+                    </Button>
+                  </div>
+                </div>
+
+                <div className="media-sheet-form">
+                  <div className="media-sheet-group">
+                    <Label htmlFor="filename">Display Name</Label>
+                    <Input
+                      id="filename"
+                      value={selectedAsset.filename}
+                      onChange={(e) =>
+                        setSelectedAsset({
+                          ...selectedAsset,
+                          filename: e.target.value,
+                        })
+                      }
+                    />
+                  </div>
+                  <div className="media-sheet-group">
+                    <Label htmlFor="alt_text">Alt Text</Label>
+                    <Input
+                      id="alt_text"
+                      value={selectedAsset.alt_text || ""}
+                      onChange={(e) =>
+                        setSelectedAsset({
+                          ...selectedAsset,
+                          alt_text: e.target.value,
+                        })
+                      }
+                      placeholder="SEO friendly description"
+                    />
+                  </div>
+                  <div className="media-sheet-group">
+                    <Label htmlFor="caption">Caption</Label>
+                    <textarea
+                      id="caption"
+                      value={selectedAsset.caption || ""}
+                      onChange={(e) =>
+                        setSelectedAsset({
+                          ...selectedAsset,
+                          caption: e.target.value,
+                        })
+                      }
+                      className="media-sheet-textarea"
+                      placeholder="Write a short caption..."
+                    />
+                  </div>
+
+                  <div className="media-sheet-meta-box">
+                    <div className="media-sheet-meta-row">
+                      <span className="label">File Size</span>
+                      <span className="value">{formatSize(selectedAsset.filesize)}</span>
+                    </div>
+                    <div className="media-sheet-meta-row">
+                      <span className="label">Internal Key</span>
+                      <span className="value value-mono" title={selectedAsset.key}>
+                        {selectedAsset.key}
+                      </span>
+                    </div>
+                    <div className="media-sheet-meta-row">
+                      <span className="label">Bucket</span>
+                      <span className="value">{selectedAsset.bucket}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {selectedAsset && (
+            <SheetFooter className="media-sheet-actions">
+              <AlertDialog
+                title="Delete Asset"
+                description="Are you sure you want to delete this asset? This action cannot be undone and may break links in your content."
+                onConfirm={() => handleDelete(selectedAsset.id)}
+                variant="destructive"
+                confirmText="Delete Asset"
+              >
+                <Button variant="destructive">
+                  <Trash2 size={16} className="media-registry-icon-mr" />
+                  Delete
+                </Button>
+              </AlertDialog>
+              <Button variant="default" onClick={handleUpdateMetadata}>
+                <Save size={16} className="media-registry-icon-mr" />
+                Save Changes
+              </Button>
+            </SheetFooter>
+          )}
+        </SheetContent>
+      </Sheet>
+
+      {/* CREATE FOLDER DIALOG */}
+      <Dialog open={isCreateFolderOpen} onOpenChange={setIsCreateFolderOpen}>
+        <DialogContent className="opaca-dialog-max-w">
+          <DialogHeader>
+            <DialogTitle>Create New Folder</DialogTitle>
+            <DialogDescription>Organize your assets into folders.</DialogDescription>
+          </DialogHeader>
+          <div className="media-dialog-create-body">
+            <Label htmlFor="newFolderName">Folder Name</Label>
+            <Input
+              id="newFolderName"
+              placeholder="e.g. products"
+              value={newFolderName}
+              onChange={(e) => setNewFolderName(e.target.value)}
+              style={{ marginTop: "0.5rem" }}
+              onKeyDown={(e) => e.key === "Enter" && handleCreateFolder()}
+            />
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setIsCreateFolderOpen(false)}>
+              Cancel
+            </Button>
+            <Button onClick={handleCreateFolder}>Create</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* ASSET PREVIEW FULL SCREEN PORTAL */}
+      {isPreviewOpen &&
+        selectedAsset &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div className="opaca-ui-dialog-portal">
+            <div
+              className="opaca-ui-dialog-overlay"
+              onClick={() => {
+                setIsPreviewOpen(false);
+                setSelectedAsset(null);
+              }}
+            />
+            <div className="opaca-ui-dialog-wrapper">
+              <div className="media-preview-container">
+                <div className="media-preview-header">
+                  <div className="media-preview-title-group">
+                    <div
+                      style={{
+                        display: "flex",
+                        alignItems: "center",
+                        gap: "0.75rem",
+                      }}
+                    >
+                      {selectedBucket === "all" && (
+                        <div
+                          title={`Bucket: ${selectedAsset.bucket}`}
+                          style={{
+                            width: "12px",
+                            height: "12px",
+                            borderRadius: "50%",
+                            backgroundColor: getBucketColor(selectedAsset.bucket, customColors),
+                          }}
+                        />
+                      )}
+                      <h2>{selectedAsset.original_filename}</h2>
+                    </div>
+                    <span className="badge">
+                      {selectedAsset.mimeType || selectedAsset.mime_type || ""}
+                    </span>
+                  </div>
+                  <button
+                    className="media-preview-close-btn"
+                    onClick={() => {
+                      setIsPreviewOpen(false);
+                      setSelectedAsset(null);
+                    }}
+                  >
+                    <X size={24} />
+                  </button>
+                </div>
+
+                <div className="media-preview-body">
+                  {(() => {
+                    const mime = selectedAsset.mimeType || selectedAsset.mime_type || "";
+                    return mime.startsWith("image/") ? (
+                      <img
+                        src={`${config.serverURL || ""}/api/assets/${selectedAsset.id}/view`}
+                        alt={
+                          selectedAsset.altText ||
+                          selectedAsset.alt_text ||
+                          selectedAsset.originalFilename ||
+                          selectedAsset.original_filename ||
+                          ""
+                        }
+                      />
+                    ) : (
+                      <div className="media-preview-no-rich">
+                        <div className="icon-wrapper">{getFileIcon(mime)}</div>
+                        <p>No rich preview available for this file type.</p>
+                        <Button
+                          variant="default"
+                          onClick={() =>
+                            (window.location.href = `${config.serverURL || ""}/api/assets/${selectedAsset.id}/view`)
+                          }
+                        >
+                          <Download size={16} className="media-registry-icon-mr" />
+                          Download Original
+                        </Button>
+                      </div>
+                    );
+                  })()}
+                </div>
+
+                <div className="media-preview-footer">
+                  <div className="media-preview-stat">
+                    <div className="label">Size</div>
+                    <div className="value">{formatSize(selectedAsset.filesize)}</div>
+                  </div>
+                  <div className="media-preview-stat">
+                    <div className="label">Created</div>
+                    <div className="value">
+                      {formatMediaDate(selectedAsset.createdAt || selectedAsset.created_at)}
+                    </div>
+                  </div>
+                  <div className="media-preview-stat">
+                    <div className="label">Bucket</div>
+                    <div className="value">{selectedAsset.bucket}</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>,
+          document.body,
+        )}
+      {/* Bucket Color Settings Dialog */}
+      <Dialog open={isBucketSettingsOpen} onOpenChange={setIsBucketSettingsOpen}>
+        <DialogContent className="media-registry-dialog-sm">
+          <DialogHeader>
+            <DialogTitle>Bucket Colors</DialogTitle>
+          </DialogHeader>
+          <div className="media-bucket-settings">
+            {buckets.map((bucketName) => (
+              <div key={bucketName} className="bucket-setting-row">
+                <span className="bucket-name">{bucketName}</span>
+                <div className="color-presets">
+                  {PRESET_COLORS.map((color) => {
+                    const isActive = getBucketColor(bucketName, customColors) === color;
+                    return (
+                      <button
+                        key={color}
+                        className={`color-bubble ${isActive ? "active" : ""}`}
+                        style={{ backgroundColor: color }}
+                        onClick={() => setBucketColor(bucketName, color)}
+                      >
+                        {isActive && <Check size={12} color="white" />}
+                      </button>
+                    );
+                  })}
+                </div>
+              </div>
+            ))}
+          </div>
+          <DialogFooter>
+            <Button onClick={() => setIsBucketSettingsOpen(false)}>Close</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}