create-nextblock 0.15.10 → 0.16.2

package/templates/nextblock-template/app/cms/media/components/FolderTree.tsx

@@ -1,122 +1,122 @@
-"use client";
-
-import React, { useMemo, useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { Button } from "@nextblock-cms/ui";
-
-interface FolderTreeProps {
-  folders: string[];
-  basePath: string;
-  selectedFolder?: string; // exact folder filter
-  selectedPrefix?: string; // prefix filter (e.g., pages/)
-}
-
-type Group = {
-  name: string; // top-level segment, e.g., 'pages'
-  count: number; // number of folders under this group
-  children: string[]; // immediate subfolders like 'pages/slug/'
-};
-
-export default function FolderTree({ folders, basePath, selectedFolder, selectedPrefix }: FolderTreeProps) {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-
-  const groups = useMemo<Group[]>(() => {
-    const map = new Map<string, Set<string>>();
-    folders.forEach((f) => {
-      const parts = f.replace(/^\/+/, '').split('/').filter(Boolean);
-      const top = parts[0] || '';
-      const childPrefix = parts.length >= 2 ? `${top}/${parts[1]}/` : `${top}/`;
-      if (!map.has(top)) {
-        map.set(top, new Set<string>());
-      }
-      const childSet = map.get(top);
-      if (childSet) {
-        childSet.add(childPrefix);
-      }
-    });
-    return Array.from(map.entries()).map(([name, children]) => ({
-      name,
-      count: children.size,
-      children: Array.from(children).sort((a, b) => a.localeCompare(b)),
-    })).sort((a, b) => a.name.localeCompare(b.name));
-  }, [folders]);
-
-  const apply = (params: Record<string, string | undefined>) => {
-    const current = new URLSearchParams(Array.from(searchParams.entries()));
-    if (params.folder !== undefined) {
-      if (params.folder) current.set('folder', params.folder); else current.delete('folder');
-    }
-    if (params.folderPrefix !== undefined) {
-      if (params.folderPrefix) current.set('folderPrefix', params.folderPrefix); else current.delete('folderPrefix');
-    }
-    const query = current.toString();
-    router.push(`${basePath}${query ? `?${query}` : ''}`);
-  };
-
-  const isPrefixActive = (prefix: string) => selectedPrefix === prefix && !selectedFolder;
-  const isFolderActive = (folder: string) => selectedFolder === folder;
-
-  const topLevel = groups.map((g) => `${g.name}/`);
-
-  return (
-    <div className="flex flex-col gap-3">
-      <div className="flex flex-wrap gap-2">
-        <Button size="sm" variant={!selectedFolder && !selectedPrefix ? 'default' : 'outline'} onClick={() => apply({ folder: undefined, folderPrefix: undefined })}>All</Button>
-        {topLevel.map((prefix) => (
-          <Button
-            key={prefix}
-            size="sm"
-            variant={isPrefixActive(prefix) ? 'default' : 'outline'}
-            onClick={() => apply({ folder: undefined, folderPrefix: prefix })}
-            title={`${prefix}*`}
-          >
-            {prefix}*
-          </Button>
-        ))}
-      </div>
-
-      {/* Collapsible children (first N by default) */}
-      {groups.map((g) => {
-        const prefix = `${g.name}/`;
-        const open = !!expanded[prefix];
-        const children = g.children;
-        const limit = 10;
-        const visible = open ? children : children.slice(0, limit);
-        return (
-          <div key={g.name} className="border rounded-md p-2">
-            <div className="flex items-center justify-between">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium">{prefix}</span>
-                <span className="text-xs text-muted-foreground">{g.count} subfolder(s)</span>
-              </div>
-              {g.count > limit && (
-                <Button size="sm" variant="outline" onClick={() => setExpanded((e) => ({ ...e, [prefix]: !open }))}>
-                  {open ? 'Show less' : `Show all ${g.count}`}
-                </Button>
-              )}
-            </div>
-            <div className="mt-2 flex flex-wrap gap-2">
-              {visible.map((child) => (
-                <Button
-                  key={child}
-                  size="sm"
-                  variant={isFolderActive(child) ? 'default' : 'outline'}
-                  onClick={() => apply({ folder: child, folderPrefix: undefined })}
-                  title={child}
-                >
-                  {child}
-                </Button>
-              ))}
-              {visible.length === 0 && (
-                <span className="text-xs text-muted-foreground">No subfolders yet</span>
-              )}
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
+"use client";
+
+import React, { useMemo, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
+import { Button } from "@nextblock-cms/ui";
+
+interface FolderTreeProps {
+  folders: string[];
+  basePath: string;
+  selectedFolder?: string; // exact folder filter
+  selectedPrefix?: string; // prefix filter (e.g., pages/)
+}
+
+type Group = {
+  name: string; // top-level segment, e.g., 'pages'
+  count: number; // number of folders under this group
+  children: string[]; // immediate subfolders like 'pages/slug/'
+};
+
+export default function FolderTree({ folders, basePath, selectedFolder, selectedPrefix }: FolderTreeProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [expanded, setExpanded] = useState<Record<string, boolean>>({});
+
+  const groups = useMemo<Group[]>(() => {
+    const map = new Map<string, Set<string>>();
+    folders.forEach((f) => {
+      const parts = f.replace(/^\/+/, '').split('/').filter(Boolean);
+      const top = parts[0] || '';
+      const childPrefix = parts.length >= 2 ? `${top}/${parts[1]}/` : `${top}/`;
+      if (!map.has(top)) {
+        map.set(top, new Set<string>());
+      }
+      const childSet = map.get(top);
+      if (childSet) {
+        childSet.add(childPrefix);
+      }
+    });
+    return Array.from(map.entries()).map(([name, children]) => ({
+      name,
+      count: children.size,
+      children: Array.from(children).sort((a, b) => a.localeCompare(b)),
+    })).sort((a, b) => a.name.localeCompare(b.name));
+  }, [folders]);
+
+  const apply = (params: Record<string, string | undefined>) => {
+    const current = new URLSearchParams(Array.from(searchParams.entries()));
+    if (params.folder !== undefined) {
+      if (params.folder) current.set('folder', params.folder); else current.delete('folder');
+    }
+    if (params.folderPrefix !== undefined) {
+      if (params.folderPrefix) current.set('folderPrefix', params.folderPrefix); else current.delete('folderPrefix');
+    }
+    const query = current.toString();
+    router.push(`${basePath}${query ? `?${query}` : ''}`);
+  };
+
+  const isPrefixActive = (prefix: string) => selectedPrefix === prefix && !selectedFolder;
+  const isFolderActive = (folder: string) => selectedFolder === folder;
+
+  const topLevel = groups.map((g) => `${g.name}/`);
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-wrap gap-2">
+        <Button size="sm" variant={!selectedFolder && !selectedPrefix ? 'default' : 'outline'} onClick={() => apply({ folder: undefined, folderPrefix: undefined })}>All</Button>
+        {topLevel.map((prefix) => (
+          <Button
+            key={prefix}
+            size="sm"
+            variant={isPrefixActive(prefix) ? 'default' : 'outline'}
+            onClick={() => apply({ folder: undefined, folderPrefix: prefix })}
+            title={`${prefix}*`}
+          >
+            {prefix}*
+          </Button>
+        ))}
+      </div>
+
+      {/* Collapsible children (first N by default) */}
+      {groups.map((g) => {
+        const prefix = `${g.name}/`;
+        const open = !!expanded[prefix];
+        const children = g.children;
+        const limit = 10;
+        const visible = open ? children : children.slice(0, limit);
+        return (
+          <div key={g.name} className="border rounded-md p-2">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium">{prefix}</span>
+                <span className="text-xs text-muted-foreground">{g.count} subfolder(s)</span>
+              </div>
+              {g.count > limit && (
+                <Button size="sm" variant="outline" onClick={() => setExpanded((e) => ({ ...e, [prefix]: !open }))}>
+                  {open ? 'Show less' : `Show all ${g.count}`}
+                </Button>
+              )}
+            </div>
+            <div className="mt-2 flex flex-wrap gap-2">
+              {visible.map((child) => (
+                <Button
+                  key={child}
+                  size="sm"
+                  variant={isFolderActive(child) ? 'default' : 'outline'}
+                  onClick={() => apply({ folder: child, folderPrefix: undefined })}
+                  title={child}
+                >
+                  {child}
+                </Button>
+              ))}
+              {visible.length === 0 && (
+                <span className="text-xs text-muted-foreground">No subfolders yet</span>
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+

package/templates/nextblock-template/app/cms/media/components/MediaEditForm.tsx

@@ -15,7 +15,67 @@ import { useHotkeys } from '../../../../hooks/use-hotkeys';
 import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
 
 type Media = Database['public']['Tables']['media']['Row'];
-import { FileText } from 'lucide-react';
+import { FileText, Loader2, Sparkles } from 'lucide-react';
+import { toast } from 'sonner';
+import { useCortexAiActive } from '../../components/CortexAiActiveContext';
+import { buildCortexAiRequestHeaders } from '../../../../lib/cortex-ai/sandbox-headers';
+import {
+  buildAltTextContext,
+  toAbsoluteImageUrl,
+  UNRESOLVABLE_IMAGE_URL_MESSAGE,
+} from '../../../../lib/cortex-ai/alt-text-request';
+// The label the upload pipeline gives the untouched original file among a row's
+// `variants`. It currently lives in the email module because email was the first consumer
+// that needed the non-AVIF original; the constant itself is about the media pipeline, not
+// about email, so importing it here is reuse rather than a layering violation — and it is
+// far better than a second copy of the string drifting away from the pipeline that writes it.
+import { ORIGINAL_UPLOAD_VARIANT_LABEL } from '../../../../lib/email/branding-format';
+
+/** The `variants` JSONB rows the upload pipeline writes (camelCase keys). */
+interface MediaVariantRecord {
+  fileType?: string | null;
+  objectKey?: string | null;
+  variantLabel?: string | null;
+}
+
+/**
+ * Choose which stored rendition of this media row to hand the vision model.
+ *
+ * `media.object_key` points at an AVIF derivative — that is what the pipeline produces and
+ * what the site renders, because AVIF is small. It is the wrong thing to send to a vision
+ * API: the mainstream image-understanding endpoints accept JPEG, PNG, GIF and WebP, and
+ * simply reject AVIF. So the mid-size derivatives (`medium_avif`, `large_avif`), which
+ * would otherwise be the ideal choice on download size, are unusable for this call.
+ *
+ * That leaves the `original_uploaded` variant: the untouched file the operator actually
+ * uploaded, in whatever format their camera or design tool produced. The tradeoff is real
+ * and worth naming — it can be several megabytes where a mid-size AVIF would have been a
+ * few dozen kilobytes, so this call is heavier than it looks. It is accepted here because
+ * a heavy call that works beats a cheap one that returns "unsupported image format", and
+ * because alt text is generated once per asset, by hand, not on a hot path.
+ *
+ * When no original was kept (the seeded default assets have no variants) we fall back to
+ * the preview URL the form already computed, and let the route decide.
+ */
+function pickAltTextSourceObjectKey(media: Media): string | null {
+  // `variants` is typed as the generic `Json`, so the cast goes through `unknown`: the
+  // shape is a runtime contract with the upload pipeline, not something the generated
+  // Supabase types can express, and every field is re-checked below before it is used.
+  const variants = Array.isArray(media.variants)
+    ? (media.variants as unknown as MediaVariantRecord[])
+    : [];
+
+  const original = variants.find(
+    (variant) =>
+      variant &&
+      typeof variant === 'object' &&
+      variant.variantLabel === ORIGINAL_UPLOAD_VARIANT_LABEL &&
+      typeof variant.objectKey === 'string' &&
+      variant.objectKey.length > 0
+  );
+
+  return original?.objectKey ?? null;
+}
 
 interface MediaEditFormProps {
   mediaItem: Media;
@@ -33,6 +93,12 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
   const [description, setDescription] = useState(mediaItem.description || "");
   const [formMessage, setFormMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
 
+  // Cortex AI is premium; hide the affordance entirely when the package is not activated
+  // rather than letting the operator click into a 403.
+  const isCortexAiActive = useCortexAiActive();
+  const [isGeneratingAltText, setIsGeneratingAltText] = useState(false);
+  const [altTextError, setAltTextError] = useState<string | null>(null);
+
   useEffect(() => {
     const successMessage = searchParams.get('success');
     const errorMessage = searchParams.get('error');
@@ -78,6 +144,86 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
   const formRef = React.useRef<HTMLFormElement>(null);
   useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
   const previewUrl = resolveMediaUrl(mediaItem.file_path || mediaItem.object_key);
+  const isImage = Boolean(mediaItem.file_type?.startsWith("image/"));
+
+  /**
+   * Draft this asset's alt text with Cortex AI.
+   *
+   * `media.description` IS the alt text in this schema — there is no `alt_text` column, and
+   * every consumer (the image block, the feature-image renderer, the media picker) already
+   * reads `description` as alt. So the generated string is written into the existing
+   * `description` state and nothing else changes: persistence still runs through the same
+   * `updateMediaItem(mediaId, { description })` submit path as a hand-typed value, and the
+   * operator still has to press Save. Generating is a draft, not a write.
+   *
+   * The URL handed to the route must be absolute http(s), because the route does not
+   * receive image bytes — it receives a URL the AI SDK then downloads server-side.
+   * `resolveMediaUrl()` returns a relative `/${objectKey}` whenever `NEXT_PUBLIC_R2_BASE_URL`
+   * is unset, which is the default for the native Supabase-storage backend, so on a stock
+   * install every asset would fail this call without the origin fix-up below.
+   */
+  const handleGenerateAltText = async () => {
+    if (!isImage || isGeneratingAltText) {
+      return;
+    }
+
+    const sourceObjectKey = pickAltTextSourceObjectKey(mediaItem);
+    const imageUrl = toAbsoluteImageUrl(
+      sourceObjectKey ? resolveMediaUrl(sourceObjectKey) : previewUrl
+    );
+
+    if (!imageUrl) {
+      setAltTextError(UNRESOLVABLE_IMAGE_URL_MESSAGE);
+      return;
+    }
+
+    setAltTextError(null);
+    setIsGeneratingAltText(true);
+
+    try {
+      // The filename is the only context this screen has, and it is often genuinely
+      // informative ("2026-harvest-crew.jpg"); passing it costs nothing and sometimes
+      // rescues a description that would otherwise be generically correct and useless.
+      const context = buildAltTextContext(
+        `Media library asset named “${mediaItem.file_name}”.`
+      );
+
+      const response = await fetch('/api/ai/seo/alt-text', {
+        // The route's body schema is a `z.strictObject` of optionals, so an absent field
+        // must be omitted rather than sent as null — a null would fail validation outright.
+        body: JSON.stringify({
+          ...(context ? { context } : {}),
+          imageUrl,
+        }),
+        headers: buildCortexAiRequestHeaders(),
+        method: 'POST',
+      });
+
+      const payload = (await response.json().catch(() => null)) as Record<string, unknown> | null;
+
+      if (!response.ok || !payload) {
+        const message =
+          payload && typeof payload['error'] === 'string'
+            ? (payload['error'] as string)
+            : 'Cortex AI could not describe this image.';
+        throw new Error(message);
+      }
+
+      const generated = typeof payload['altText'] === 'string' ? payload['altText'].trim() : '';
+      if (!generated) {
+        throw new Error('Cortex AI returned an empty description.');
+      }
+
+      setDescription(generated);
+    } catch (error) {
+      const message =
+        error instanceof Error ? error.message : 'Cortex AI could not describe this image.';
+      setAltTextError(message);
+      toast.error(message);
+    } finally {
+      setIsGeneratingAltText(false);
+    }
+  };
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
@@ -125,7 +271,29 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
         </div>
 
         <div>
-          <Label htmlFor="description">Description (Alt Text for Images)</Label>
+          <div className="flex items-center justify-between gap-2">
+            <Label htmlFor="description">Description (Alt Text for Images)</Label>
+            {/* Only for images, and only on a premium install: a non-activated Cortex AI
+                must never render a button that cannot do anything. */}
+            {isCortexAiActive && isImage && (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                className="h-7 gap-1.5 px-2 text-[11px]"
+                onClick={handleGenerateAltText}
+                disabled={isGeneratingAltText}
+                title="Describe this image with Cortex AI"
+              >
+                {isGeneratingAltText ? (
+                  <Loader2 aria-hidden="true" className="h-3.5 w-3.5 animate-spin" />
+                ) : (
+                  <Sparkles aria-hidden="true" className="h-3.5 w-3.5 text-amber-500" />
+                )}
+                {isGeneratingAltText ? "Generating…" : "Generate with AI"}
+              </Button>
+            )}
+          </div>
           <Textarea
             id="description"
             name="description"
@@ -135,6 +303,13 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
             rows={4}
             placeholder="e.g., A vibrant sunset over a mountain range"
           />
+          {altTextError && <p className="text-xs text-red-500 mt-1">{altTextError}</p>}
+          {isCortexAiActive && isImage && (
+            <p className="text-xs text-muted-foreground mt-1">
+              Generated text lands in this field as a draft — review it, then press
+              “Update Media Info” to save.
+            </p>
+          )}
         </div>
 
         <div className="flex justify-end space-x-3 pt-4">

package/templates/nextblock-template/app/cms/media/components/MediaGridClient.tsx

@@ -17,10 +17,10 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSeparator,
 } from "@nextblock-cms/ui";
-import MediaImage from "./MediaImage";
-import DeleteMediaButtonClient from "./DeleteMediaButtonClient"; // For single item deletion
-import { deleteMultipleMediaItems, moveSingleMediaItem } from "../actions"; // Server actions for bulk ops
-import { resolveMediaUrl } from "../../../../lib/media/resolveMediaUrl";
+import MediaImage from "./MediaImage";
+import DeleteMediaButtonClient from "./DeleteMediaButtonClient"; // For single item deletion
+import { deleteMultipleMediaItems, moveSingleMediaItem } from "../actions"; // Server actions for bulk ops
+import { resolveMediaUrl } from "../../../../lib/media/resolveMediaUrl";
 
 interface MediaGridClientProps {
   initialMediaItems: Media[];
@@ -210,71 +210,71 @@ export default function MediaGridClient({ initialMediaItems, r2BaseUrl }: MediaG
            </p>
          </div>
       ) : (
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 mt-6">
-          {mediaItems.map((item) => {
-            const imageUrl = resolveMediaUrl(item.file_path || item.object_key, r2BaseUrl);
-
-            return (
-              <div
-                key={item.id}
-                className={`group relative border rounded-lg overflow-hidden shadow-sm aspect-square bg-muted/20 transition-all
-                  ${isSelected(item.id) ? "ring-2 ring-primary ring-offset-2" : ""}`}
-              >
-                <div className="absolute top-2 left-2 z-10">
-                  <Checkbox
-                    id={`select-${item.id}`}
-                    checked={isSelected(item.id)}
-                    onCheckedChange={(checked) => {
-                      handleSelectionChange(item.id, item.object_key, !!checked);
-                    }}
-                    aria-label={`Select ${item.file_name}`}
-                    className="bg-white/70 hover:bg-white border-slate-400 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
-                  />
-                </div>
-
-                {item.file_type?.startsWith("image/") && imageUrl ? (
-                  <MediaImage
-                    src={imageUrl}
-                    alt={item.description || item.file_name}
-                    width={item.width || 500} // Default width if null
-                    height={item.height || 500} // Default height if null
-                    blurDataURL={item.blur_data_url || undefined}
-                    className="h-full w-full object-contain transition-transform group-hover:scale-105"
-                  />
-                ) : (
-                  <div className="h-full w-full bg-muted flex flex-col items-center justify-center p-2">
-                    <FileText className="h-12 w-12 text-muted-foreground mb-2" />
-                    <p className="text-xs text-center text-muted-foreground truncate w-full" title={item.file_name}>
-                      {item.file_name}
-                    </p>
-                  </div>
-                )}
-                <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2">
-                  <div className="text-xs text-black truncate pt-1 ps-5" title={item.file_name}>{item.file_name}</div>
-                  <div className="self-end">
-                      <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button variant="secondary" size="icon" className="text-white bg-black/40 hover:bg-black/60 h-7 w-7 rounded-full">
-                            <MoreHorizontal className="h-4 w-4" />
-                          </Button>
-                        </DropdownMenuTrigger>
-                        <DropdownMenuContent align="end">
-                          <DropdownMenuItem asChild>
-                              <Link href={`/cms/media/${item.id}/edit`} className="flex items-center cursor-pointer">
-                                  <Edit3 className="mr-2 h-4 w-4" /> Edit Details
-                              </Link>
-                          </DropdownMenuItem>
-                          <DropdownMenuSeparator />
-                          <DeleteMediaButtonClient mediaItem={item} />
-                        </DropdownMenuContent>
-                      </DropdownMenu>
-                  </div>
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 xl:grid-cols-6 gap-4 mt-6">
+          {mediaItems.map((item) => {
+            const imageUrl = resolveMediaUrl(item.file_path || item.object_key, r2BaseUrl);
+
+            return (
+              <div
+                key={item.id}
+                className={`group relative border rounded-lg overflow-hidden shadow-sm aspect-square bg-muted/20 transition-all
+                  ${isSelected(item.id) ? "ring-2 ring-primary ring-offset-2" : ""}`}
+              >
+                <div className="absolute top-2 left-2 z-10">
+                  <Checkbox
+                    id={`select-${item.id}`}
+                    checked={isSelected(item.id)}
+                    onCheckedChange={(checked) => {
+                      handleSelectionChange(item.id, item.object_key, !!checked);
+                    }}
+                    aria-label={`Select ${item.file_name}`}
+                    className="bg-white/70 hover:bg-white border-slate-400 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+                  />
+                </div>
+
+                {item.file_type?.startsWith("image/") && imageUrl ? (
+                  <MediaImage
+                    src={imageUrl}
+                    alt={item.description || item.file_name}
+                    width={item.width || 500} // Default width if null
+                    height={item.height || 500} // Default height if null
+                    blurDataURL={item.blur_data_url || undefined}
+                    className="h-full w-full object-contain transition-transform group-hover:scale-105"
+                  />
+                ) : (
+                  <div className="h-full w-full bg-muted flex flex-col items-center justify-center p-2">
+                    <FileText className="h-12 w-12 text-muted-foreground mb-2" />
+                    <p className="text-xs text-center text-muted-foreground truncate w-full" title={item.file_name}>
+                      {item.file_name}
+                    </p>
+                  </div>
+                )}
+                <div className="absolute inset-0 bg-gradient-to-t from-black/50 via-black/20 to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-between p-2">
+                  <div className="text-xs text-black truncate pt-1 ps-5" title={item.file_name}>{item.file_name}</div>
+                  <div className="self-end">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button variant="secondary" size="icon" className="text-white bg-black/40 hover:bg-black/60 h-7 w-7 rounded-full">
+                            <MoreHorizontal className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent align="end">
+                          <DropdownMenuItem asChild>
+                              <Link href={`/cms/media/${item.id}/edit`} className="flex items-center cursor-pointer">
+                                  <Edit3 className="mr-2 h-4 w-4" /> Edit Details
+                              </Link>
+                          </DropdownMenuItem>
+                          <DropdownMenuSeparator />
+                          <DeleteMediaButtonClient mediaItem={item} />
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                  </div>
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
     </div>
   );
 }