create-nextblock 0.0.1

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

@@ -0,0 +1,362 @@
+// 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 { 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'];
+
+
+interface MediaUploadFormProps {
+  onUploadSuccess?: (newMedia: Media) => void;
+  // If true, the form expects recordMediaUpload to return data instead of redirecting.
+  // And will use onUploadSuccess instead of router.refresh().
+  returnJustData?: boolean;
+  defaultFolder?: string; // Optional pre-populated folder
+}
+
+import { useUploadFolder } from "../UploadFolderContext";
+
+export default function MediaUploadForm({ onUploadSuccess, returnJustData, defaultFolder }: MediaUploadFormProps) {
+  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);
+  const [uploadStatus, setUploadStatus] = useState<"idle" | "uploading" | "success" | "error">("idle");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [isDraggingOver, setIsDraggingOver] = useState(false); // For drag-and-drop visual feedback
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [processingStatus, setProcessingStatus] = useState<"idle" | "processing" | "processed_error">("idle");
+  const { defaultFolder: ctxDefaultFolder } = useUploadFolder();
+  const [folder, setFolder] = useState<string>(defaultFolder || ctxDefaultFolder || "uploads/");
+
+  useEffect(() => {
+    setFolder(defaultFolder || ctxDefaultFolder || "uploads/");
+  }, [defaultFolder, ctxDefaultFolder]);
+
+  const resetFileSelection = () => {
+    setFile(null);
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl);
+    }
+    setPreviewUrl(null);
+    setImageDimensions(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+  };
+
+  const processFile = (selectedFile: File | undefined | null) => {
+    if (previewUrl) {
+      URL.revokeObjectURL(previewUrl); // Clean up previous preview
+      setPreviewUrl(null);
+    }
+    setImageDimensions(null); // Reset dimensions
+
+    if (selectedFile) {
+      setFile(selectedFile);
+      setUploadStatus("idle");
+      setUploadProgress(0);
+      setErrorMessage(null);
+
+      if (selectedFile.type.startsWith("image/")) {
+        const localPreviewUrl = URL.createObjectURL(selectedFile);
+        setPreviewUrl(localPreviewUrl);
+
+        // Get image dimensions
+        const img = new window.Image();
+        img.onload = () => {
+          setImageDimensions({ width: img.naturalWidth, height: img.naturalHeight });
+          URL.revokeObjectURL(img.src); // Clean up object URL used for dimensions
+        };
+        img.onerror = () => {
+          console.error("Error loading image to get dimensions.");
+          setImageDimensions(null);
+          URL.revokeObjectURL(img.src); // Clean up object URL used for dimensions
+        };
+        img.src = URL.createObjectURL(selectedFile); // Create a new object URL for dimension calculation
+      }
+    } else {
+      setFile(null); // Clear file if selection is cancelled or no file
+      // If previewUrl was set, it's already handled by the block at the start of this function
+      // or should be cleared if we are explicitly clearing the file.
+      if (previewUrl) {
+        URL.revokeObjectURL(previewUrl);
+        setPreviewUrl(null);
+      }
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event.target.files?.[0];
+    processFile(selectedFile);
+  };
+
+  const handleDragEnter = (event: React.DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDraggingOver(true);
+  };
+
+  const handleDragOver = (event: React.DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    // You can add more checks here if needed, e.g., event.dataTransfer.types
+    setIsDraggingOver(true); // Ensure it stays true if dragging over children
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    // Check if the mouse is leaving the droppable area for real
+    // and not just moving over a child element.
+    // This can be tricky. A simpler approach is to rely on onDragEnter/onDrop to set it.
+    // For now, let's keep it simple:
+    setIsDraggingOver(false);
+  };
+
+  const handleDrop = (event: React.DragEvent<HTMLLabelElement>) => {
+    event.preventDefault();
+    event.stopPropagation();
+    setIsDraggingOver(false);
+
+    const droppedFiles = event.dataTransfer.files;
+    if (droppedFiles && droppedFiles.length > 0) {
+      // Process the first file, like in handleFileChange
+      const droppedFile = droppedFiles[0];
+      processFile(droppedFile);
+      // If you want to clear the file input after a drop (optional)
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  };
+
+
+
+  const performUpload = async () => {
+    if (!file) {
+      setErrorMessage("Please select a file to upload.");
+      return;
+    }
+    if (isPending || uploadStatus === "uploading" || processingStatus === "processing") {
+      return;
+    }
+
+    setUploadStatus("uploading");
+    setUploadProgress(50); // Indicate start of upload
+    setErrorMessage(null);
+    setProcessingStatus("idle");
+
+    const currentFileForUpload = file;
+
+    startTransition(async () => {
+      try {
+        // 1. Upload file via proxy
+        const formData = new FormData();
+        formData.append('file', currentFileForUpload);
+        if (folder) {
+          formData.append('folder', folder);
+        }
+
+        const proxyResponse = await fetch('/api/upload/proxy', {
+          method: 'POST',
+          body: formData,
+        });
+
+        if (!proxyResponse.ok) {
+          const errorData = await proxyResponse.json();
+          throw new Error(errorData.error || 'Failed to upload file via proxy.');
+        }
+
+        const { objectKey } = await proxyResponse.json();
+        setUploadProgress(100);
+
+        // 2. Record media in Supabase
+        // Derive a default alt/description for images when none provided
+        const deriveAltFromFilename = (name: string) => {
+          const lastDot = name.lastIndexOf('.');
+          const base = lastDot > 0 ? name.substring(0, lastDot) : name;
+          const spaced = base.replace(/[-+_\\]+/g, ' ').replace(/\s+/g, ' ').trim();
+          // Title-case words
+          return spaced.replace(/\b\w+/g, (w) => w.charAt(0).toUpperCase() + w.slice(1));
+        };
+
+        const defaultDescription = currentFileForUpload.type.startsWith('image/')
+          ? deriveAltFromFilename(currentFileForUpload.name)
+          : undefined;
+
+        const mediaDataPayload = {
+          fileName: currentFileForUpload.name,
+          objectKey: objectKey,
+          fileType: currentFileForUpload.type,
+          sizeBytes: currentFileForUpload.size,
+          width: imageDimensions?.width,
+          height: imageDimensions?.height,
+          description: defaultDescription,
+        };
+
+        // 3. Process image variants
+        setProcessingStatus("processing");
+        const processResponse = await fetch('/api/process-image', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            objectKey: objectKey,
+            contentType: currentFileForUpload.type,
+          }),
+        });
+
+        const processData = await processResponse.json();
+
+        if (!processResponse.ok) {
+          console.error("Error processing image:", processData.error || "Failed to process image variants.");
+          setProcessingStatus("processed_error");
+          setErrorMessage(`Original uploaded, but variants failed: ${processData.error || "Unknown error"}`);
+        } else {
+          setProcessingStatus("idle");
+        }
+
+        // 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">
+            <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>
+          <div className="mt-2 flex items-center justify-center w-full">
+            <label
+              htmlFor="media-file-input"
+              className={`flex flex-col items-center justify-center w-full h-40 border-2 border-dashed rounded-lg cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors ${
+                isDraggingOver ? "border-primary bg-primary-foreground/20" : "border-input"
+              }`}
+              onDrop={handleDrop}
+              onDragOver={handleDragOver}
+              onDragEnter={handleDragEnter}
+              onDragLeave={handleDragLeave}
+            >
+              <div className="flex flex-col items-center justify-center pt-5 pb-6 pointer-events-none"> {/* pointer-events-none for children */}
+                <UploadCloud className="w-10 h-10 mb-3 text-muted-foreground" />
+                <p className="mb-2 text-sm text-muted-foreground">
+                  <span className="font-semibold">Click to upload</span> or drag and drop
+                </p>
+                <p className="text-xs text-muted-foreground">SVG, PNG, JPG, GIF, MP4, PDF (MAX. 10MB)</p>
+              </div>
+              <Input id="media-file-input" type="file" className="hidden" onChange={handleFileChange} ref={fileInputRef} />
+            </label>
+          </div>
+          {previewUrl && file && file.type.startsWith("image/") && (
+            <div className="mt-4">
+              <Label>Preview:</Label>
+              <Image src={previewUrl} alt="Preview" width={300} height={192} className="mt-2 rounded-md max-h-48 w-auto object-contain border" />
+            </div>
+          )}
+          {file && <p className="text-sm mt-2 text-muted-foreground">Selected: {file.name} ({(file.size / 1024 / 1024).toFixed(2)} MB)</p>}
+        </div>
+
+        {uploadStatus === "uploading" && (
+          <Progress value={uploadProgress} className="w-full h-2" />
+        )}
+        {uploadStatus === "success" && (
+          <div className="flex items-center text-green-600">
+            <CheckCircle2 className="h-5 w-5 mr-2" />
+            <p>Upload successful!</p>
+          </div>
+        )}
+        {uploadStatus === "error" && errorMessage && (
+          <div className="flex items-center text-red-600">
+            <XCircle className="h-5 w-5 mr-2" />
+            <p>Error: {errorMessage}</p>
+          </div>
+        )}
+        {processingStatus === "processing" && (
+          <p className="text-sm text-blue-600 animate-pulse">Processing image variants...</p>
+        )}
+        {/* Message for when original uploads but variants fail, errorMessage will be set */}
+
+
+        <Button
+          type="button"
+          onClick={performUpload}
+          disabled={isPending || uploadStatus === "uploading" || processingStatus === "processing" || !file}
+          className="w-full sm:w-auto"
+        >
+          {uploadStatus === "uploading" ? `Uploading ${uploadProgress}%...`
+           : processingStatus === "processing" ? "Processing..."
+           : "Upload File"}
+        </Button>
+      </form>
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+// 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
+import type { Database } from "@nextblock-cms/db";
+// DropdownMenu related imports are now handled within MediaGridClient or its sub-components if needed individually.
+
+type Media = Database['public']['Tables']['media']['Row'];
+// If page.tsx itself doesn't directly use DropdownMenu, these can be removed from here.
+// For now, assuming MediaGridClient handles its own dropdowns.
+import MediaUploadForm from "./components/MediaUploadForm";
+// MediaImage and DeleteMediaButtonClient are used by MediaGridClient, not directly here anymore.
+import MediaGridClient from "./components/MediaGridClient"; // Import the new client component
+import FolderNavigator from "./components/FolderNavigator";
+
+async function getMediaItems(folder?: string, folderPrefix?: string, search?: string): Promise<Media[]> {
+  const supabase = createClient();
+  let query = supabase
+    .from("media")
+    .select("*")
+    .order("created_at", { ascending: false });
+
+  if (folder && folder.trim()) {
+    query = query.eq('folder', folder);
+  } else if (folderPrefix && folderPrefix.trim()) {
+    query = query.ilike('folder', `${folderPrefix}%`);
+  }
+
+  if (search && search.trim()) {
+    const term = search.trim();
+    query = query.or(`file_name.ilike.%${term}%,description.ilike.%${term}%`);
+  }
+
+  const { data, error } = await query;
+
+  if (error) {
+    console.error("Error fetching media items:", error);
+    return [];
+  }
+  return data || [];
+}
+
+async function getDistinctFolders(search?: string): Promise<string[]> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("media")
+    .select("folder")
+    .order("folder", { ascending: true });
+  if (error) {
+    console.error("Error fetching folders:", error);
+    return [];
+  }
+  let folders = (data || [])
+    .map((r: any) => r.folder)
+    .filter((f: any) => typeof f === 'string' && f.length > 0);
+  if (search && search.trim()) {
+    const t = search.trim().toLowerCase();
+    folders = folders.filter((f: string) => f.toLowerCase().includes(t));
+  }
+  // Ensure trailing slash for consistency
+  return Array.from(new Set(folders.map((f: string) => (f.endsWith('/') ? f : f + '/'))));
+}
+
+async function getFolderCounts(): Promise<Record<string, number>> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("media")
+    .select("folder");
+  if (error) {
+    console.error("Error fetching folder counts:", error);
+    return {};
+  }
+  const counts: Record<string, number> = {};
+  (data || []).forEach((row: any) => {
+    const f: string | null = row.folder;
+    if (!f || typeof f !== 'string' || f.length === 0) return;
+    const norm = f.endsWith('/') ? f : `${f}/`;
+    // accumulate counts for each prefix in the path
+    const parts = norm.replace(/^\/+/, '').split('/').filter(Boolean);
+    let prefix = '';
+    for (let i = 0; i < parts.length; i++) {
+      prefix += (i === 0 ? '' : '/') + parts[i];
+      const key = `${prefix}/`;
+      counts[key] = (counts[key] || 0) + 1;
+    }
+  });
+  return counts;
+}
+
+const R2_BASE_URL = process.env.NEXT_PUBLIC_R2_BASE_URL || "";
+
+export default async function CmsMediaLibraryPage(props: { searchParams?: Promise<{ folder?: string; folderPrefix?: string; q?: string }> }) {
+  const searchParams = (await props.searchParams) || {};
+  const selectedFolder = searchParams.folder;
+  const selectedFolderPrefix = searchParams.folderPrefix;
+  const searchQuery = searchParams.q;
+  const [mediaItems, folders, folderCounts] = await Promise.all([
+    getMediaItems(selectedFolder, selectedFolderPrefix, searchQuery),
+    getDistinctFolders(searchQuery),
+    getFolderCounts(),
+  ]);
+
+  return (
+    <div className="w-full max-w-screen-2xl mx-auto px-4 overflow-x-hidden space-y-6">
+      <div className="flex justify-between items-center">
+        <h1 className="text-2xl font-semibold">Media Library</h1>
+      </div>
+
+      <MediaUploadForm />
+
+      {/* Compact folder navigator with top tabs and subfolder pills */}
+      <div className="mt-2">
+        <FolderNavigator basePath="/cms/media" folders={folders} selectedFolder={selectedFolder || ''} selectedPrefix={selectedFolderPrefix || ''} counts={folderCounts} searchTerm={searchQuery || ''} />
+      </div>
+
+      {/* The media grid and empty state are now handled by MediaGridClient */}
+      <MediaGridClient initialMediaItems={mediaItems} r2BaseUrl={R2_BASE_URL} />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/navigation/[id]/edit/page.tsx

@@ -0,0 +1,101 @@
+// app/cms/navigation/[id]/edit/page.tsx
+import React from "react";
+import { createClient } from "@nextblock-cms/db/server";
+import NavigationItemForm from "../../components/NavigationItemForm";
+import { updateNavigationItem } from "../../actions";
+import { getLanguages, getNavigationItems, getPages } from "../../utils";
+import type { Database } from "@nextblock-cms/db";
+import { notFound, redirect } from "next/navigation";
+
+type NavigationItem = Database['public']['Tables']['navigation_items']['Row'];
+import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import { ArrowLeft } from "lucide-react";
+import NavigationLanguageSwitcher from "../../components/NavigationLanguageSwitcher";
+
+async function getNavigationItemData(id: number): Promise<NavigationItem | null> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("navigation_items")
+    .select("*") // Ensure translation_group_id is selected
+    .eq("id", id)
+    .single();
+
+  if (error) {
+    console.error("Error fetching navigation item for edit:", error);
+    return null;
+  }
+  return data;
+}
+
+export default async function EditNavigationItemPage(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+  const itemId = parseInt(params.id, 10);
+  if (isNaN(itemId)) {
+    return notFound();
+  }
+
+  // Admin check
+  const supabase = createClient();
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return redirect(`/sign-in?redirect=/cms/navigation/${itemId}/edit`);
+
+  const { data: profile } = await supabase.from('profiles').select('role').eq('id', user.id).single();
+  if (profile?.role !== 'ADMIN') {
+      return <div className="p-6 text-center text-red-500">Access Denied. Admin privileges required.</div>;
+  }
+
+  const [item, allLanguages, allNavItems, allPages] = await Promise.all([
+    getNavigationItemData(itemId),
+    getLanguages(),
+    getNavigationItems(),
+    getPages(),
+  ]);
+
+  if (!item) {
+    return notFound();
+  }
+   if (!item.translation_group_id) {
+    // This case should ideally not happen if all items get a translation_group_id upon creation.
+    // Handle gracefully, perhaps by redirecting or showing an error.
+    console.error(`Navigation item ${item.id} is missing a translation_group_id.`);
+    // For now, let's allow editing but the switcher might not work as expected.
+    // Or, redirect to a page that explains the issue / offers to assign one.
+  }
+
+
+  const updateItemWithId = updateNavigationItem.bind(null, itemId);
+
+  return (
+    <div className="max-w-2xl mx-auto">
+      <div className="mb-6 flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <div className="flex items-center gap-3">
+            <Button variant="outline" size="icon" aria-label="Back to navigation items" asChild>
+                <Link href="/cms/navigation">
+                    <ArrowLeft className="h-4 w-4" />
+                </Link>
+            </Button>
+            <div>
+                <h1 className="text-2xl font-semibold">Edit Navigation Item</h1>
+                <p className="text-sm text-muted-foreground truncate max-w-xs" title={item.label}>{item.label}</p>
+            </div>
+        </div>
+        {item.translation_group_id && allLanguages.length > 0 && (
+          <NavigationLanguageSwitcher
+            currentItem={item}
+            allSiteLanguages={allLanguages}
+          />
+        )}
+      </div>
+      <NavigationItemForm
+        item={item}
+        formAction={updateItemWithId}
+        actionButtonText="Update Item"
+        isEditing={true}
+        languages={allLanguages}
+        parentItems={allNavItems}
+        pages={allPages}
+      />
+    </div>
+  );
+}