create-nextblock 0.12.9 → 0.12.11

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

@@ -9,21 +9,21 @@ import { Spinner, Alert, AlertDescription } from '@nextblock-cms/ui';
 import { Input } from '@nextblock-cms/ui';
 import { Label } from '@nextblock-cms/ui';
 import { Textarea } from '@nextblock-cms/ui';
-import type { Database } from '@nextblock-cms/db';
-import { useAuth } from '../../../../context/AuthContext';
-import { useHotkeys } from '../../../../hooks/use-hotkeys';
-import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
+import type { Database } from '@nextblock-cms/db';
+import { useAuth } from '../../../../context/AuthContext';
+import { useHotkeys } from '../../../../hooks/use-hotkeys';
+import { resolveMediaUrl } from '../../../../lib/media/resolveMediaUrl';
 
 type Media = Database['public']['Tables']['media']['Row'];
 import { FileText } from 'lucide-react';
 
-interface MediaEditFormProps {
-  mediaItem: Media;
-  // The formAction will be updateMediaItem bound with the mediaItem.id
-  formAction: (formData: FormData) => Promise<{ error?: string; success?: boolean; media?: Media } | void>;
-}
-
-export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormProps) {
+interface MediaEditFormProps {
+  mediaItem: Media;
+  // The formAction will be updateMediaItem bound with the mediaItem.id
+  formAction: (formData: FormData) => Promise<{ error?: string; success?: boolean; media?: Media } | void>;
+}
+
+export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormProps) {
   const router = useRouter();
   const searchParams = useSearchParams();
   const [isPending, startTransition] = useTransition();
@@ -75,20 +75,20 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
     return <div>Access Denied. You do not have permission to edit media.</div>;
   }
 
-  const formRef = React.useRef<HTMLFormElement>(null);
-  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
-  const previewUrl = resolveMediaUrl(mediaItem.file_path || mediaItem.object_key);
-
-  return (
-    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
-      <div className="md:col-span-1 space-y-4">
-        <h2 className="text-lg font-semibold">Media Preview</h2>
-        {mediaItem.file_type?.startsWith("image/") && previewUrl ? (
-          <Image
-            src={previewUrl}
-            alt={description || fileName}
-            width={400}
-            height={400}
+  const formRef = React.useRef<HTMLFormElement>(null);
+  useHotkeys('ctrl+s', () => formRef.current?.requestSubmit());
+  const previewUrl = resolveMediaUrl(mediaItem.file_path || mediaItem.object_key);
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
+      <div className="md:col-span-1 space-y-4">
+        <h2 className="text-lg font-semibold">Media Preview</h2>
+        {mediaItem.file_type?.startsWith("image/") && previewUrl ? (
+          <Image
+            src={previewUrl}
+            alt={description || fileName}
+            width={400}
+            height={400}
             className="rounded-lg border object-contain aspect-square w-full max-w-sm mx-auto"
           />
         ) : (
@@ -159,4 +159,4 @@ export default function MediaEditForm({ mediaItem, formAction }: MediaEditFormPr
       </form>
     </div>
   );
-}
+}

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>
   );
 }