create-nextblock 0.0.1

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

@@ -0,0 +1,275 @@
+"use client";
+
+import React, { useState, useTransition, useEffect } from "react";
+import type { Database } from "@nextblock-cms/db";
+import { Button } from "@nextblock-cms/ui";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@nextblock-cms/ui";
+import { Progress } from "@nextblock-cms/ui";
+
+type Media = Database['public']['Tables']['media']['Row'];
+import { Checkbox } from "@nextblock-cms/ui";
+import { Trash2, Edit3, MoreHorizontal, FileText, Image as ImageIconLucideHost, AlertCircle } from "lucide-react";
+import Link from "next/link";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  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
+
+interface MediaGridClientProps {
+  initialMediaItems: Media[];
+  r2BaseUrl: string;
+}
+
+interface MessageState {
+  type: "success" | "error";
+  text: string;
+}
+
+export default function MediaGridClient({ initialMediaItems, r2BaseUrl }: MediaGridClientProps) {
+  const [selectedItems, setSelectedItems] = useState<Array<{ id: string; objectKey: string }>>([]);
+  const [mediaItems, setMediaItems] = useState<Media[]>(initialMediaItems);
+  const [message, setMessage] = useState<MessageState | null>(null);
+  const [isPending, startTransition] = useTransition();
+  const [moveDialogOpen, setMoveDialogOpen] = useState(false);
+  const [moveFolder, setMoveFolder] = useState<string>("");
+  const [isMoving, setIsMoving] = useState(false);
+  const [moveProgress, setMoveProgress] = useState(0);
+  const [moveError, setMoveError] = useState<string | null>(null);
+
+  useEffect(() => {
+    setMediaItems(initialMediaItems);
+  }, [initialMediaItems]);
+
+  const handleSelectionChange = (itemId: string, objectKey: string, checked: boolean) => {
+    setSelectedItems((prevSelected) => {
+      if (checked) {
+        return [...prevSelected, { id: itemId, objectKey }];
+      } else {
+        return prevSelected.filter((item) => item.id !== itemId);
+      }
+    });
+  };
+
+  const handleBulkDelete = async () => {
+    if (selectedItems.length === 0) {
+      setMessage({ type: "error", text: "No items selected for deletion." });
+      return;
+    }
+
+    setMessage(null);
+    startTransition(async () => {
+      const result = await deleteMultipleMediaItems(selectedItems);
+      if (result.error) {
+        setMessage({ type: "error", text: result.error });
+      } else if (result.success) {
+        setMessage({ type: "success", text: result.success });
+        // The page should revalidate and fetch new mediaItems.
+        // For immediate UI update, we can filter out deleted items:
+        setMediaItems((prevItems) =>
+          prevItems.filter((item) => !selectedItems.find((selected) => selected.id === item.id))
+        );
+        setSelectedItems([]); // Clear selection
+      }
+    });
+  };
+
+  const beginBulkMove = () => {
+    if (selectedItems.length === 0) {
+      setMessage({ type: "error", text: "No items selected for move." });
+      return;
+    }
+    setMoveFolder("");
+    setMoveDialogOpen(true);
+  };
+
+  const confirmBulkMove = async () => {
+    const dest = moveFolder.trim();
+    if (!dest) {
+      setMoveError("Please enter a destination folder.");
+      return;
+    }
+    setMoveError(null);
+    setIsMoving(true);
+    setMoveProgress(0);
+    try {
+      const total = selectedItems.length;
+      let moved = 0;
+      let hadError = false;
+      for (const item of selectedItems) {
+        const res = await moveSingleMediaItem(item, dest);
+        if ((res as any)?.error) {
+          // Accumulate errors but keep going
+          hadError = true;
+          setMoveError((prev) => (prev ? prev + " | " : "") + (res as any).error);
+        } else {
+          // Update local list
+          setMediaItems((prev) => prev.map((m) => {
+            if (m.id !== item.id) return m;
+            const filename = m.object_key.substring(m.object_key.lastIndexOf('/') + 1);
+            const folder = ensureFolderSlash(dest);
+            return { ...m, object_key: `${folder}${filename}`, folder } as any;
+          }));
+        }
+        moved += 1;
+        setMoveProgress(Math.round((moved / total) * 100));
+      }
+      if (!hadError) setMessage({ type: "success", text: `Moved ${selectedItems.length} item(s).` });
+      setSelectedItems([]);
+      setMoveDialogOpen(false);
+    } finally {
+      setIsMoving(false);
+    }
+  };
+
+  const ensureFolderSlash = (f: string) => (f.endsWith('/') ? f : `${f}/`);
+
+  const isSelected = (itemId: string) => {
+    return selectedItems.some((item) => item.id === itemId);
+  };
+
+  return (
+    <div className="space-y-6">
+      {selectedItems.length > 0 && (
+        <div className="flex flex-col gap-3 p-4 border rounded-lg bg-card">
+          <div className="flex items-center justify-between">
+            <p className="text-sm font-medium">{selectedItems.length} item(s) selected</p>
+            <div className="flex items-center gap-2">
+              <Button onClick={beginBulkMove} disabled={isPending}>
+                Move Selected
+              </Button>
+              <Button
+                variant="destructive"
+                onClick={handleBulkDelete}
+                disabled={isPending}
+              >
+                <Trash2 className="mr-2 h-4 w-4" />
+                {isPending ? "Deleting..." : "Delete Selected"}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <Dialog open={moveDialogOpen} onOpenChange={(open) => { if (!isMoving) setMoveDialogOpen(open); }}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Move {selectedItems.length} item(s)</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-3">
+            <input
+              type="text"
+              value={moveFolder}
+              onChange={(e) => setMoveFolder(e.target.value)}
+              placeholder="Destination folder e.g. uploads/images/"
+              className="w-full border rounded-md px-3 h-9"
+              disabled={isMoving}
+            />
+            {isMoving && (
+              <div className="space-y-2">
+                <Progress value={moveProgress} />
+                <p className="text-xs text-muted-foreground">Moving... {moveProgress}%</p>
+              </div>
+            )}
+            {moveError && <p className="text-sm text-red-600">{moveError}</p>}
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setMoveDialogOpen(false)} disabled={isMoving}>Cancel</Button>
+            <Button onClick={confirmBulkMove} disabled={isMoving || selectedItems.length === 0}>Start Move</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {message && (
+        <div
+          className={`p-4 rounded-md text-sm ${
+            message.type === "success"
+              ? "bg-green-100 border border-green-200 text-green-700"
+              : "bg-red-100 border border-red-200 text-red-700"
+          }`}
+        >
+          <div className="flex items-center">
+            {message.type === 'error' && <AlertCircle className="h-5 w-5 mr-2" />}
+            {message.text}
+          </div>
+        </div>
+      )}
+
+      {mediaItems.length === 0 && selectedItems.length === 0 ? (
+         <div className="text-center py-10 border rounded-lg mt-6">
+           <ImageIconLucideHost className="mx-auto h-12 w-12 text-muted-foreground" />
+           <h3 className="mt-2 text-sm font-medium text-foreground">No media found</h3>
+           <p className="mt-1 text-sm text-muted-foreground">
+             Upload some files to get started.
+           </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) => (
+            <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/") ? (
+                <MediaImage
+                  src={`${r2BaseUrl}/${item.object_key}`}
+                  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>
+  );
+}

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

@@ -0,0 +1,70 @@
+// app/cms/media/components/MediaImage.tsx
+"use client";
+
+import React from 'react'
+import Image from 'next/image'
+import { cn } from '@nextblock-cms/utils'
+
+interface MediaImageProps {
+  src: string
+  alt: string
+  width?: number | null
+  height?: number | null
+  blurDataURL?: string | null
+  className?: string
+  priority?: boolean
+}
+
+const MediaImage: React.FC<MediaImageProps> = ({
+  src,
+  alt,
+  width,
+  height,
+  blurDataURL,
+  className,
+  priority = false,
+}) => {
+  const isValid = src && width && height && width > 0 && height > 0
+
+  if (!isValid) {
+    const placeholderWidth = typeof width === 'number' && width > 0 ? width : 100
+    const placeholderHeight =
+      typeof height === 'number' && height > 0 ? height : 100
+
+    const hasSizeClass = className?.includes('w-') || className?.includes('h-')
+
+    return (
+      <div
+        className={cn(
+          'bg-muted text-muted-foreground flex items-center justify-center',
+          className,
+        )}
+        style={
+          !hasSizeClass
+            ? {
+                width: placeholderWidth,
+                height: placeholderHeight,
+              }
+            : {}
+        }
+      >
+        Invalid Image
+      </div>
+    )
+  }
+
+  return (
+    <Image
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      className={className}
+      placeholder={blurDataURL ? 'blur' : 'empty'}
+      blurDataURL={blurDataURL || undefined}
+      priority={priority}
+    />
+  )
+}
+
+export default MediaImage

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

@@ -0,0 +1,195 @@
+"use client";
+
+import React, { useCallback, useEffect, useMemo, 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,
+} from "@nextblock-cms/ui";
+import { Search, CheckCircle } from "lucide-react";
+import Image from "next/image";
+import MediaUploadForm from "./MediaUploadForm";
+
+type Media = Database["public"]["Tables"]["media"]["Row"];
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+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
+}
+
+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);
+  };
+  const [searchTerm, setSearchTerm] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const [items, setItems] = useState<Media[]>([]);
+  const supabase = useMemo(() => createBrowserClient(), []);
+
+  const fetchLibrary = useCallback(async () => {
+    setIsLoading(true);
+    try {
+      let query = supabase
+        .from("media")
+        .select("*")
+        .order("created_at", { ascending: false })
+        .limit(50);
+      if (searchTerm) {
+        query = query.ilike("file_name", `%${searchTerm}%`);
+      }
+      const { data, error } = await query;
+      if (error) {
+        console.error("Error fetching media library:", error);
+        setItems([]);
+      } else {
+        setItems(data || []);
+      }
+    } finally {
+      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 ? (
+            <div className="flex-grow flex items-center justify-center">
+              <p>Loading media...</p>
+            </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) => (
+                <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" />
+                      </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>
+  );
+}
+
+
+
+
+