create-nextblock 0.2.78 → 0.8.0

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

@@ -1,195 +1,264 @@
-"use client";
+"use client";
 
-import React, { useCallback, useEffect, useMemo, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Database } from "@nextblock-cms/db";
-import { createClient as createBrowserClient } from "@nextblock-cms/db";
 import {
   Dialog,
   DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-  DialogClose,
-  Button,
-  Input,
-  Separator,
+  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 R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+const MEDIA_REQUEST_TIMEOUT_MS = 8000;
+const MEDIA_LIBRARY_LIMIT = 50;
 
-interface MediaPickerDialogProps {
-  triggerLabel?: string;
-  triggerVariant?: "default" | "outline" | "secondary" | "destructive" | "ghost";
-  onSelect: (media: Media) => void;
-  accept?: (m: Media) => boolean; // filter, e.g. only images
-  title?: string;
-  open?: boolean; onOpenChange?: (open: boolean) => void; hideTrigger?: boolean;
-  defaultFolder?: string; // optional folder to pre-populate upload
+function resolveMediaPreviewPath(media: Media) {
+  return media.file_path || media.object_key || null;
 }
 
-export default function MediaPickerDialog({
-  triggerLabel = "Select from Library",
-  triggerVariant = "outline",
-  onSelect,
-  accept,
-  title = "Select or Upload Media",
-  open,
-  onOpenChange,
-  hideTrigger,
-  defaultFolder,
-}: MediaPickerDialogProps) {
-  const [internalOpen, setInternalOpen] = useState(false);
-  const isControlled = typeof open === "boolean";
-  const isOpen = isControlled ? (open as boolean) : internalOpen;
-  const setIsOpen = (v: boolean) => {
-    if (!isControlled) setInternalOpen(v);
-    onOpenChange?.(v);
-  };
+function resolveMediaPreviewSrc(path: string) {
+  return resolveMediaUrl(path);
+}
+
+interface MediaPickerDialogProps {
+  triggerLabel?: string;
+  triggerVariant?: "default" | "outline" | "secondary" | "destructive" | "ghost";
+  onSelect?: (media: Media) => void;
+  accept?: (m: Media) => boolean; // filter, e.g. only images
+  title?: string;
+  open?: boolean; onOpenChange?: (open: boolean) => void; hideTrigger?: boolean;
+  defaultFolder?: string; // optional folder to pre-populate upload
+  children?: React.ReactNode;
+}
+
+export default function MediaPickerDialog({
+  triggerLabel = "Select from Library",
+  triggerVariant = "outline",
+  onSelect,
+  accept,
+  title = "Select or Upload Media",
+  open,
+  onOpenChange,
+  hideTrigger,
+  defaultFolder,
+  children,
+}: MediaPickerDialogProps) {
+  const [internalOpen, setInternalOpen] = useState(false);
+  const isControlled = typeof open === "boolean";
+  const isOpen = isControlled ? (open as boolean) : internalOpen;
+  const setIsOpen = (v: boolean) => {
+    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 supabase = useMemo(() => createBrowserClient(), []);
+  const requestIdRef = useRef(0);
 
   const fetchLibrary = useCallback(async () => {
+    const requestId = ++requestIdRef.current;
     setIsLoading(true);
+    setLoadError(null);
+    let timeoutId: ReturnType<typeof setTimeout> | null = null;
+
     try {
-      let query = supabase
-        .from("media")
-        .select("*")
-        .order("created_at", { ascending: false })
-        .limit(50);
-      if (searchTerm) {
-        query = query.ilike("file_name", `%${searchTerm}%`);
+      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 { data, error } = await query;
-      if (error) {
-        console.error("Error fetching media library:", error);
-        setItems([]);
+
+      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(data || []);
+        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 {
-      setIsLoading(false);
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      if (requestId === requestIdRef.current) {
+        setIsLoading(false);
+      }
     }
-  }, [supabase, searchTerm]);
-
-  useEffect(() => {
-    if (isOpen) fetchLibrary();
-  }, [isOpen, fetchLibrary]);
-
-  const filtered = useMemo(() => {
-    return accept ? items.filter(accept) : items;
-  }, [items, accept]);
-
-  const handleSelect = (media: Media) => {
-    onSelect(media);
-    setIsOpen(false);
-  };
-
-  return (
-    <Dialog open={isOpen} onOpenChange={setIsOpen}>
-      {!hideTrigger && (
-        <DialogTrigger asChild>
-          <Button type="button" variant={triggerVariant} size="sm">
-            {triggerLabel}
-          </Button>
-        </DialogTrigger>
-      )}
-      <DialogContent className="sm:max-w-[650px] md:max-w-[800px] lg:max-w-[1000px] max-h-[90vh] flex flex-col">
-        <DialogHeader>
-          <DialogTitle>{title}</DialogTitle>
-        </DialogHeader>
-
-        <div className="p-1">
-          <MediaUploadForm
-            returnJustData={true}
-            defaultFolder={defaultFolder}
-            onUploadSuccess={(newMedia) => {
-              setItems((prev) => [newMedia, ...prev.filter((m) => m.id !== newMedia.id)]);
-              handleSelect(newMedia);
-            }}
-          />
-        </div>
-
-        <Separator className="my-4" />
-
-        <div className="flex flex-col flex-grow overflow-hidden">
-          <h3 className="text-lg font-medium mb-3 text-center">Or Select from Library</h3>
-          <div className="relative mb-2">
-            <Input
-              type="search"
-              placeholder="Search library..."
-              value={searchTerm}
-              onChange={(e) => setSearchTerm(e.target.value)}
-              className="pl-10"
-            />
-            <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
-          </div>
-          {isLoading ? (
+  }, [searchTerm]);
+
+  useEffect(() => {
+    if (isOpen) fetchLibrary();
+  }, [isOpen, fetchLibrary]);
+
+  const filtered = useMemo(() => {
+    return accept ? items.filter(accept) : items;
+  }, [items, accept]);
+
+  const handleSelect = (media: Media) => {
+    if (onSelect) {
+      onSelect(media);
+    }
+    setIsOpen(false);
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      {!hideTrigger && (
+        <DialogTrigger asChild>
+          {children || (
+            <Button type="button" variant={triggerVariant} size="sm">
+              {triggerLabel}
+            </Button>
+          )}
+        </DialogTrigger>
+      )}
+      <DialogContent className="sm:max-w-[650px] md:max-w-[800px] lg:max-w-[1000px] max-h-[90vh] flex flex-col">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+
+        <div className="p-1">
+          <MediaUploadForm
+            returnJustData={true}
+            defaultFolder={defaultFolder}
+            onUploadSuccess={(newMedia) => {
+              setItems((prev) => [newMedia, ...prev.filter((m) => m.id !== newMedia.id)]);
+              handleSelect(newMedia);
+            }}
+          />
+        </div>
+
+        <Separator className="my-4" />
+
+        <div className="flex flex-col flex-grow overflow-hidden">
+          <h3 className="text-lg font-medium mb-3 text-center">Or Select from Library</h3>
+          <div className="relative mb-2">
+            <Input
+              type="search"
+              placeholder="Search library..."
+              value={searchTerm}
+              onChange={(e) => setSearchTerm(e.target.value)}
+              className="pl-10"
+            />
+            <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>
-            </div>
-          ) : (
+            </div>
+          ) : (
             <div className="flex flex-wrap gap-3 overflow-y-auto min-h-0 pr-2 pb-2">
-              {filtered.map((media) => (
-                <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/") && typeof media.width === "number" && typeof media.height === "number" && media.width > 0 && media.height > 0 ? (
-                    <>
-                      <Image
-                        src={`${R2_BASE_URL}/${media.object_key}`}
-                        alt={media.description || media.file_name || "Media library image"}
-                        width={media.width}
-                        height={media.height}
-                        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" />
+              {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>
-                    </>
-                  ) : (
-                    <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>
-              ))}
+                    )}
+                    <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>
-  );
-}
-
-
-
-
-
+        </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 { 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 { recordMediaUpload } from "../actions"; // Server action
-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,9 +25,10 @@ interface MediaUploadFormProps {
 
 import { useUploadFolder } from "../UploadFolderContext";
 
-export default function MediaUploadForm({ onUploadSuccess, returnJustData, defaultFolder }: MediaUploadFormProps) {
-  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);
@@ -227,75 +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 recordResult = await recordMediaUpload(finalMediaPayload, returnJustData);
-
-        const handleSuccess = (newMedia?: Media) => {
-          setUploadStatus("success");
-          if (returnJustData && newMedia) {
-            onUploadSuccess?.(newMedia);
-          }
-          // Reset form state
-          resetFileSelection();
-          if (processingStatus !== "processed_error") {
-            setProcessingStatus("idle");
-          }
-        };
-
-        if (returnJustData) {
-          if (recordResult && 'success' in recordResult && recordResult.success && recordResult.data) {
-            handleSuccess(recordResult.data);
-          } else {
-            throw new Error((recordResult && 'error' in recordResult && recordResult.error) || "Media record action failed.");
-          }
-        } else {
-          handleSuccess();
-        }
-
-      } catch (err: unknown) {
-        const isRedirect = (err instanceof Error && err.message === 'NEXT_REDIRECT') || (typeof (err as any)?.digest === 'string' && (err as any).digest.startsWith('NEXT_REDIRECT'));
-
-        if (isRedirect && !returnJustData) {
-          setUploadStatus("success");
-          resetFileSelection();
-        } else {
-          console.error("Upload process error:", err);
-          setUploadStatus("error");
-          setErrorMessage(err instanceof Error ? err.message : "An unknown error occurred during upload.");
-          setUploadProgress(0);
-        }
-      }
-    });
-  };
-
-  const handleFormSubmit = (event: React.FormEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    performUpload();
-  };
-
-  return (
-    <div className="p-6 border rounded-lg shadow-sm bg-card mb-6">
-      <form onSubmit={handleFormSubmit} 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)}
-              />
-            </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"
@@ -365,9 +377,9 @@ export default function MediaUploadForm({ onUploadSuccess, returnJustData, defau
              </>
            ) : (
              "Upload File"
-           )}
-        </Button>
-      </form>
-    </div>
-  );
-}
+           )}
+        </Button>
+      </div>
+    </div>
+  );
+}

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

@@ -1,4 +1,4 @@
-// app/cms/media/page.tsx
+// app/cms/media/page.tsx
 import React from 'react';
 import { createClient } from "@nextblock-cms/db/server";
 // import Link from "next/link"; // Unused, MediaGridClient handles item links