opacacms 0.1.0 → 0.1.2

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

@@ -1,1104 +0,0 @@
-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>
-  );
-}