create-nextblock 0.12.9 → 0.12.12

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

@@ -1,36 +1,34 @@
-"use client";
-
-import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import type { Database } from "@nextblock-cms/db";
-import {
-  Dialog,
-  DialogContent,
+"use client";
+
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { Database } from "@nextblock-cms/db";
+import {
+  Dialog,
+  DialogContent,
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-  DialogFooter,
-  DialogClose,
   Button,
   Input,
   Separator,
-} from "@nextblock-cms/ui";
-import { Search, CheckCircle } from "lucide-react";
-import Image from "next/image";
-import MediaUploadForm from "./MediaUploadForm";
-import { resolveMediaUrl } from "../../../../lib/media/resolveMediaUrl";
-
-type Media = Database["public"]["Tables"]["media"]["Row"];
-
-const MEDIA_REQUEST_TIMEOUT_MS = 8000;
-const MEDIA_LIBRARY_LIMIT = 50;
-
-function resolveMediaPreviewPath(media: Media) {
-  return media.file_path || media.object_key || null;
-}
-
-function resolveMediaPreviewSrc(path: string) {
-  return resolveMediaUrl(path);
-}
+} from "@nextblock-cms/ui";
+import { Search, CheckCircle } from "lucide-react";
+import Image from "next/image";
+import MediaUploadForm from "./MediaUploadForm";
+import { resolveMediaUrl } from "../../../../lib/media/resolveMediaUrl";
+
+type Media = Database["public"]["Tables"]["media"]["Row"];
+
+const MEDIA_REQUEST_TIMEOUT_MS = 8000;
+const MEDIA_LIBRARY_LIMIT = 50;
+
+function resolveMediaPreviewPath(media: Media) {
+  return media.file_path || media.object_key || null;
+}
+
+function resolveMediaPreviewSrc(path: string) {
+  return resolveMediaUrl(path);
+}
 
 interface MediaPickerDialogProps {
   triggerLabel?: string;
@@ -62,76 +60,76 @@ export default function MediaPickerDialog({
     if (!isControlled) setInternalOpen(v);
     onOpenChange?.(v);
   };
-  const [searchTerm, setSearchTerm] = useState("");
-  const [isLoading, setIsLoading] = useState(false);
-  const [loadError, setLoadError] = useState<string | null>(null);
-  const [items, setItems] = useState<Media[]>([]);
-  const requestIdRef = useRef(0);
-
-  const fetchLibrary = useCallback(async () => {
-    const requestId = ++requestIdRef.current;
-    setIsLoading(true);
-    setLoadError(null);
-    let timeoutId: ReturnType<typeof setTimeout> | null = null;
-
-    try {
-      const controller = new AbortController();
-      timeoutId = setTimeout(
-        () => controller.abort(new Error("Media library request timed out.")),
-        MEDIA_REQUEST_TIMEOUT_MS
-      );
-
-      const params = new URLSearchParams({
-        limit: MEDIA_LIBRARY_LIMIT.toString(),
-      });
-
-      if (searchTerm.trim()) {
-        params.set("q", searchTerm.trim());
-      }
-
-      const response = await fetch(`/api/media/library?${params.toString()}`, {
-        method: "GET",
-        cache: "no-store",
-        signal: controller.signal,
-      });
-      clearTimeout(timeoutId);
-
-      const payload = (await response.json()) as {
-        items?: Media[];
-        error?: string;
-      };
-
-      if (requestId !== requestIdRef.current) {
-        return;
-      }
-
-      if (!response.ok) {
-        console.error("Error fetching media library:", payload.error);
-        setLoadError(payload.error || "We couldn't load the media library. Please retry.");
-      } else {
-        setItems(payload.items || []);
-      }
-    } catch (error: any) {
-      if (requestId !== requestIdRef.current) {
-        return;
-      }
-
-      console.error("Error fetching media library:", error);
-
-      if (error?.name === "AbortError" || error?.message === "Media library request timed out.") {
-        setLoadError("The media library took too long to respond. Please retry.");
-      } else {
-        setLoadError("We couldn't load the media library. Please retry.");
-      }
-    } finally {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-      if (requestId === requestIdRef.current) {
-        setIsLoading(false);
-      }
-    }
-  }, [searchTerm]);
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadError, setLoadError] = useState<string | null>(null);
+  const [items, setItems] = useState<Media[]>([]);
+  const requestIdRef = useRef(0);
+
+  const fetchLibrary = useCallback(async () => {
+    const requestId = ++requestIdRef.current;
+    setIsLoading(true);
+    setLoadError(null);
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+    try {
+      const controller = new AbortController();
+      timeoutId = setTimeout(
+        () => controller.abort(new Error("Media library request timed out.")),
+        MEDIA_REQUEST_TIMEOUT_MS
+      );
+
+      const params = new URLSearchParams({
+        limit: MEDIA_LIBRARY_LIMIT.toString(),
+      });
+
+      if (searchTerm.trim()) {
+        params.set("q", searchTerm.trim());
+      }
+
+      const response = await fetch(`/api/media/library?${params.toString()}`, {
+        method: "GET",
+        cache: "no-store",
+        signal: controller.signal,
+      });
+      clearTimeout(timeoutId);
+
+      const payload = (await response.json()) as {
+        items?: Media[];
+        error?: string;
+      };
+
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+
+      if (!response.ok) {
+        console.error("Error fetching media library:", payload.error);
+        setLoadError(payload.error || "We couldn't load the media library. Please retry.");
+      } else {
+        setItems(payload.items || []);
+      }
+    } catch (error: any) {
+      if (requestId !== requestIdRef.current) {
+        return;
+      }
+
+      console.error("Error fetching media library:", error);
+
+      if (error?.name === "AbortError" || error?.message === "Media library request timed out.") {
+        setLoadError("The media library took too long to respond. Please retry.");
+      } else {
+        setLoadError("We couldn't load the media library. Please retry.");
+      }
+    } finally {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      if (requestId === requestIdRef.current) {
+        setIsLoading(false);
+      }
+    }
+  }, [searchTerm]);
 
   useEffect(() => {
     if (isOpen) fetchLibrary();
@@ -189,70 +187,63 @@ export default function MediaPickerDialog({
             />
             <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
           </div>
-          {isLoading && filtered.length === 0 ? (
-            <div className="flex-grow flex items-center justify-center">
-              <p>Loading media...</p>
-            </div>
-          ) : loadError && filtered.length === 0 ? (
-            <div className="flex-grow flex flex-col items-center justify-center gap-3 text-center">
-              <p className="max-w-sm text-sm text-muted-foreground">{loadError}</p>
-              <Button type="button" variant="outline" size="sm" onClick={() => void fetchLibrary()}>
-                Retry
-              </Button>
-            </div>
-          ) : filtered.length === 0 ? (
-            <div className="flex-grow flex items-center justify-center">
-              <p>No media found.</p>
+          {isLoading && filtered.length === 0 ? (
+            <div className="flex-grow flex items-center justify-center">
+              <p>Loading media...</p>
+            </div>
+          ) : loadError && filtered.length === 0 ? (
+            <div className="flex-grow flex flex-col items-center justify-center gap-3 text-center">
+              <p className="max-w-sm text-sm text-muted-foreground">{loadError}</p>
+              <Button type="button" variant="outline" size="sm" onClick={() => void fetchLibrary()}>
+                Retry
+              </Button>
+            </div>
+          ) : filtered.length === 0 ? (
+            <div className="flex-grow flex items-center justify-center">
+              <p>No media found.</p>
             </div>
           ) : (
-            <div className="flex flex-wrap gap-3 overflow-y-auto min-h-0 pr-2 pb-2">
-              {filtered.map((media: Media) => {
-                const previewPath = resolveMediaPreviewPath(media);
-                const previewSrc = previewPath ? resolveMediaPreviewSrc(previewPath) : null;
-
-                return (
-                  <button
-                    key={media.id}
-                    type="button"
-                    className="relative aspect-square border rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-primary min-w-0 w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6"
-                    onClick={() => handleSelect(media)}
-                  >
-                    {media.file_type?.startsWith("image/") && previewSrc ? (
-                      <>
-                        <Image
-                          src={previewSrc}
-                          alt={media.description || media.file_name || "Media library image"}
-                          fill
-                          className="absolute inset-0 w-full h-full object-cover"
-                          placeholder={media.blur_data_url ? "blur" : "empty"}
-                          blurDataURL={media.blur_data_url || undefined}
-                          sizes="(max-width: 639px) 33vw, (max-width: 767px) 25vw, (max-width: 1023px) 20vw, 17vw"
-                        />
-                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity flex items-center justify-center">
-                          <CheckCircle className="h-8 w-8 text-white" />
-                        </div>
-                      </>
-                    ) : (
-                      <div className="absolute inset-0 flex items-center justify-center text-xs text-muted-foreground p-1 text-center">
-                        Preview unavailable
-                      </div>
-                    )}
-                    <p className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 truncate text-center">
-                      {media.file_name}
-                    </p>
-                  </button>
-                );
-              })}
-            </div>
-          )}
+            <div className="flex flex-wrap gap-3 overflow-y-auto min-h-0 pr-2 pb-2">
+              {filtered.map((media: Media) => {
+                const previewPath = resolveMediaPreviewPath(media);
+                const previewSrc = previewPath ? resolveMediaPreviewSrc(previewPath) : null;
+
+                return (
+                  <button
+                    key={media.id}
+                    type="button"
+                    className="relative aspect-square border rounded-md overflow-hidden group focus:outline-none focus:ring-2 focus:ring-primary min-w-0 w-1/3 sm:w-1/4 md:w-1/5 lg:w-1/6"
+                    onClick={() => handleSelect(media)}
+                  >
+                    {media.file_type?.startsWith("image/") && previewSrc ? (
+                      <>
+                        <Image
+                          src={previewSrc}
+                          alt={media.description || media.file_name || "Media library image"}
+                          fill
+                          className="absolute inset-0 w-full h-full object-cover"
+                          placeholder={media.blur_data_url ? "blur" : "empty"}
+                          blurDataURL={media.blur_data_url || undefined}
+                          sizes="(max-width: 639px) 33vw, (max-width: 767px) 25vw, (max-width: 1023px) 20vw, 17vw"
+                        />
+                        <div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity flex items-center justify-center">
+                          <CheckCircle className="h-8 w-8 text-white" />
+                        </div>
+                      </>
+                    ) : (
+                      <div className="absolute inset-0 flex items-center justify-center text-xs text-muted-foreground p-1 text-center">
+                        Preview unavailable
+                      </div>
+                    )}
+                    <p className="absolute bottom-0 left-0 right-0 bg-black/50 text-white text-xs p-1 truncate text-center">
+                      {media.file_name}
+                    </p>
+                  </button>
+                );
+              })}
+            </div>
+          )}
         </div>
-        <DialogFooter className="mt-auto pt-4">
-          <DialogClose asChild>
-            <Button type="button" variant="outline">
-              Close
-            </Button>
-          </DialogClose>
-        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

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

@@ -1,18 +1,18 @@
 // app/cms/media/components/MediaUploadForm.tsx
-"use client";
-
-import React, { useState, useRef, useTransition, useEffect } from "react";
-import Image from "next/image";
-import { useRouter } from "next/navigation";
-import { Button } from "@nextblock-cms/ui";
-import { Spinner, Alert, AlertDescription } from "@nextblock-cms/ui";
-import { Input } from "@nextblock-cms/ui";
-import { Label } from "@nextblock-cms/ui";
-import { Progress } from "@nextblock-cms/ui"; // Assuming you have this shadcn/ui component
-import { UploadCloud, XCircle, CheckCircle2 } from "lucide-react";
-import type { Database } from "@nextblock-cms/db"; // Import Media type
-
-type Media = Database['public']['Tables']['media']['Row'];
+"use client";
+
+import React, { useState, useRef, useTransition, useEffect } from "react";
+import Image from "next/image";
+import { useRouter } from "next/navigation";
+import { Button } from "@nextblock-cms/ui";
+import { Spinner, Alert, AlertDescription } from "@nextblock-cms/ui";
+import { Input } from "@nextblock-cms/ui";
+import { Label } from "@nextblock-cms/ui";
+import { Progress } from "@nextblock-cms/ui"; // Assuming you have this shadcn/ui component
+import { UploadCloud, XCircle, CheckCircle2 } from "lucide-react";
+import type { Database } from "@nextblock-cms/db"; // Import Media type
+
+type Media = Database['public']['Tables']['media']['Row'];
 
 
 interface MediaUploadFormProps {
@@ -25,10 +25,10 @@ interface MediaUploadFormProps {
 
 import { useUploadFolder } from "../UploadFolderContext";
 
-export default function MediaUploadForm({ onUploadSuccess, returnJustData, defaultFolder }: MediaUploadFormProps) {
-  const router = useRouter();
-  const [isPending, startTransition] = useTransition();
-  const [file, setFile] = useState<File | null>(null);
+export default function MediaUploadForm({ onUploadSuccess, returnJustData, defaultFolder }: MediaUploadFormProps) {
+  const router = useRouter();
+  const [isPending, startTransition] = useTransition();
+  const [file, setFile] = useState<File | null>(null);
   const [previewUrl, setPreviewUrl] = useState<string | null>(null); // For image preview
   const [imageDimensions, setImageDimensions] = useState<{ width: number; height: number } | null>(null); // For image dimensions
   const [uploadProgress, setUploadProgress] = useState(0);
@@ -228,86 +228,86 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
         }
 
         // 4. Record media in Supabase with variant info
-        const finalMediaPayload = {
-          ...mediaDataPayload,
-          r2OriginalKey: objectKey,
-          r2Variants: processData.processedVariants || [],
-          originalImageDetails: processData.originalImage,
-          blurDataUrl: processData.blurDataURL || null,
-        };
-
-        const recordResponse = await fetch('/api/media/record', {
-          method: 'POST',
-          headers: {
-            'Content-Type': 'application/json',
-          },
-          body: JSON.stringify(finalMediaPayload),
-        });
-
-        const recordResult = await recordResponse.json();
-
-        if (!recordResponse.ok) {
-          throw new Error(recordResult?.error || 'Media record action failed.');
-        }
-
-        const handleSuccess = (newMedia?: Media) => {
-          setUploadStatus("success");
-          if (newMedia) onUploadSuccess?.(newMedia);
-          // Reset form state
-          resetFileSelection();
-          if (processingStatus !== "processed_error") {
-            setProcessingStatus("idle");
-          }
-          if (!returnJustData) {
-            router.refresh();
-          }
-        };
-
-        if (recordResult?.success && recordResult.data) {
-          handleSuccess(recordResult.data);
-        } else {
-          throw new Error(recordResult?.error || "Media record action failed.");
-        }
-
-      } catch (err: unknown) {
-        console.error("Upload process error:", err);
-        setUploadStatus("error");
-        setErrorMessage(err instanceof Error ? err.message : "An unknown error occurred during upload.");
-        setUploadProgress(0);
-      }
-    });
-  };
-
-  const handleFolderKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key !== "Enter") {
-      return;
-    }
-
-    event.preventDefault();
-    event.stopPropagation();
-
-    if (file) {
-      void performUpload();
-    }
-  };
-
-  return (
-    <div className="p-6 border rounded-lg shadow-sm bg-card mb-6">
-      <div role="group" aria-label="Upload new media" className="space-y-4">
-        <div>
-          <Label htmlFor="media-file" className="text-base font-medium">Upload New Media</Label>
-          <div className="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-3">
+        const finalMediaPayload = {
+          ...mediaDataPayload,
+          r2OriginalKey: objectKey,
+          r2Variants: processData.processedVariants || [],
+          originalImageDetails: processData.originalImage,
+          blurDataUrl: processData.blurDataURL || null,
+        };
+
+        const recordResponse = await fetch('/api/media/record', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify(finalMediaPayload),
+        });
+
+        const recordResult = await recordResponse.json();
+
+        if (!recordResponse.ok) {
+          throw new Error(recordResult?.error || 'Media record action failed.');
+        }
+
+        const handleSuccess = (newMedia?: Media) => {
+          setUploadStatus("success");
+          if (newMedia) onUploadSuccess?.(newMedia);
+          // Reset form state
+          resetFileSelection();
+          if (processingStatus !== "processed_error") {
+            setProcessingStatus("idle");
+          }
+          if (!returnJustData) {
+            router.refresh();
+          }
+        };
+
+        if (recordResult?.success && recordResult.data) {
+          handleSuccess(recordResult.data);
+        } else {
+          throw new Error(recordResult?.error || "Media record action failed.");
+        }
+
+      } catch (err: unknown) {
+        console.error("Upload process error:", err);
+        setUploadStatus("error");
+        setErrorMessage(err instanceof Error ? err.message : "An unknown error occurred during upload.");
+        setUploadProgress(0);
+      }
+    });
+  };
+
+  const handleFolderKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key !== "Enter") {
+      return;
+    }
+
+    event.preventDefault();
+    event.stopPropagation();
+
+    if (file) {
+      void performUpload();
+    }
+  };
+
+  return (
+    <div className="p-6 border rounded-lg shadow-sm bg-card mb-6">
+      <div role="group" aria-label="Upload new media" className="space-y-4">
+        <div>
+          <Label htmlFor="media-file" className="text-base font-medium">Upload New Media</Label>
+          <div className="mt-2 grid grid-cols-1 sm:grid-cols-2 gap-3">
             <div>
               <Label htmlFor="media-folder" className="text-sm">Folder (e.g., uploads/images/)</Label>
               <Input
-                id="media-folder"
-                placeholder="uploads/"
-                value={folder}
-                onChange={(e) => setFolder(e.target.value)}
-                onKeyDown={handleFolderKeyDown}
-              />
-            </div>
-          </div>
+                id="media-folder"
+                placeholder="uploads/"
+                value={folder}
+                onChange={(e) => setFolder(e.target.value)}
+                onKeyDown={handleFolderKeyDown}
+              />
+            </div>
+          </div>
           <div className="mt-2 flex items-center justify-center w-full">
             <label
               htmlFor="media-file-input"
@@ -377,9 +377,9 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
              </>
            ) : (
              "Upload File"
-           )}
-        </Button>
-      </div>
-    </div>
-  );
-}
+           )}
+        </Button>
+      </div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/navigation/components/NavigationMenuDnd.tsx

@@ -176,9 +176,9 @@ interface NavigationMenuDndProps {
   initialItems: NavigationItem[];
 }
 
-export default function NavigationMenuDnd({ menuKey, languageCode, initialItems }: NavigationMenuDndProps) {
-  void menuKey;
-  // Prevent SSR/hydration mismatches from dnd-kit by rendering on client only
+export default function NavigationMenuDnd({ menuKey, languageCode, initialItems }: NavigationMenuDndProps) {
+  void menuKey;
+  // Prevent SSR/hydration mismatches from dnd-kit by rendering on client only
   // Keep hooks order stable; move early return after hooks
   const [isMounted, setIsMounted] = useState(false);
   useEffect(() => { setIsMounted(true); }, []);

package/templates/nextblock-template/app/cms/pages/page.tsx

@@ -27,13 +27,13 @@ import {
   DropdownMenuSeparator,
 } from "@nextblock-cms/ui";
 // Server action `deletePage` is used by DeletePageButtonClient
-import type { Database } from "@nextblock-cms/db";
-import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
-
-type Page = Database["public"]["Tables"]["pages"]["Row"];
-import LanguageFilterSelect from "../components/LanguageFilterSelect";
-import DeletePageButtonClient from "./components/DeletePageButtonClient"; // Import the client component
-import { ContentTransferControls } from "../import-export/ContentTransferControls";
+import type { Database } from "@nextblock-cms/db";
+import { getActiveLanguagesServerSide } from "@nextblock-cms/db/server";
+
+type Page = Database["public"]["Tables"]["pages"]["Row"];
+import LanguageFilterSelect from "../components/LanguageFilterSelect";
+import DeletePageButtonClient from "./components/DeletePageButtonClient"; // Import the client component
+import { ContentTransferControls } from "../import-export/ContentTransferControls";
 
 async function getPagesWithDetails(
   filterLanguageId?: number
@@ -96,16 +96,17 @@ export default async function CmsPagesListPage(props: CmsPagesListPageProps) {
   return (
     <div className="w-full">
       <div className="flex justify-between items-center mb-6 flex-wrap gap-4">
-        <h1 className="text-2xl font-semibold">Manage Pages</h1>
-        <div className="flex items-center gap-3">
-          <ContentTransferControls
-            contentType="pages"
-            label="Pages"
-            languageId={filterLangId}
-          />
-          <LanguageFilterSelect
-            allLanguages={allLanguages}
-            currentFilterLangId={filterLangId}
+        <h1 className="text-2xl font-semibold">Manage Pages</h1>
+        <div className="flex items-center gap-3">
+          <ContentTransferControls
+            contentType="pages"
+            label="Pages"
+            languageId={filterLangId}
+            hasContent={pagesWithDetails.length > 0}
+          />
+          <LanguageFilterSelect
+            allLanguages={allLanguages}
+            currentFilterLangId={filterLangId}
             basePath="/cms/pages"
           />
           <Button variant="default" asChild>