create-nextblock 0.0.1

package/templates/nextblock-template/app/cms/settings/extra-translations/actions.ts

@@ -0,0 +1,117 @@
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath } from 'next/cache';
+import { z } from 'zod';
+
+const translationSchema = z.object({
+  key: z.string().min(1, 'Key is required.'),
+  en: z.string().min(1, 'English translation is required.'),
+});
+
+export async function createTranslation(prevState: unknown, formData: FormData) {
+  const supabase = createClient();
+  const data = {
+    key: formData.get('key') as string,
+    en: formData.get('en') as string,
+  };
+
+  const validatedFields = translationSchema.safeParse({
+    key: data.key,
+    en: data.en,
+  });
+
+  if (!validatedFields.success) {
+    return {
+      errors: validatedFields.error.flatten().fieldErrors,
+    };
+  }
+
+  const { error } = await supabase.from('translations').insert({
+    key: validatedFields.data.key,
+    translations: { en: validatedFields.data.en },
+  });
+
+  if (error) {
+    return {
+      error: error.message,
+    };
+  }
+
+  revalidatePath('/cms/settings/extra-translations');
+
+  return {
+    success: true,
+  };
+}
+
+export async function getTranslations() {
+  const supabase = createClient();
+  const { data, error } = await supabase.from('translations').select('key, translations, created_at, updated_at').order('key');
+
+  if (error) {
+    console.error('Error fetching translations:', error);
+    return [];
+  }
+
+  return data;
+}
+
+export async function updateTranslation(prevState: unknown, formData: FormData) {
+  const supabase = createClient();
+  const data = Object.fromEntries(formData as any);
+  const key = data.key as string;
+
+  if (!key) {
+    return {
+      error: 'Translation key is required',
+    };
+  }
+
+  // First, fetch the existing translation to get current translations
+  const { data: existingData, error: fetchError } = await supabase
+    .from('translations')
+    .select('translations')
+    .eq('key', key)
+    .single();
+
+  if (fetchError) {
+    return {
+      error: `Failed to fetch existing translation: ${fetchError.message}`,
+    };
+  }
+
+  // Merge new translations with existing ones
+  const existingTranslations = (existingData?.translations as Record<string, string>) || {};
+  const newTranslations: { [key: string]: string } = { ...existingTranslations };
+  
+  for (const [formKey, value] of Object.entries(data)) {
+    if (formKey !== 'key') {
+      newTranslations[formKey] = value as string;
+    }
+  }
+
+  const { data: updateResult, error } = await supabase
+    .from('translations')
+    .update({ translations: newTranslations })
+    .eq('key', key)
+    .select();
+
+  if (error) {
+    return {
+      error: error.message,
+    };
+  }
+
+  if (!updateResult || updateResult.length === 0) {
+    return {
+      error: `Translation with key "${key}" not found or could not be updated`,
+    };
+  }
+
+  revalidatePath('/cms/settings/extra-translations');
+
+  return {
+    success: true,
+  };
+}

package/templates/nextblock-template/app/cms/settings/extra-translations/page.tsx

@@ -0,0 +1,216 @@
+'use client';
+
+import { useEffect, useState, useTransition } from 'react';
+import { useActionState } from 'react';
+import { getTranslations, createTranslation, updateTranslation } from './actions';
+import { getLanguages } from '@/app/cms/settings/languages/actions';
+import { Button } from '@nextblock-cms/ui';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@nextblock-cms/ui';
+import { SubmitButton } from '@/components/submit-button';
+
+type Translation = Awaited<ReturnType<typeof getTranslations>>[number];
+type Language = NonNullable<Awaited<ReturnType<typeof getLanguages>>['data']>[number];
+
+export default function ExtraTranslationsPage() {
+  const [translations, setTranslations] = useState<Translation[]>([]);
+  const [languages, setLanguages] = useState<Language[]>([]);
+  const [isPending, startTransition] = useTransition();
+
+  const fetchData = () => {
+    startTransition(async () => {
+      const translationsData = await getTranslations();
+      const { data: languagesData } = await getLanguages();
+      setTranslations(translationsData);
+      if (languagesData) {
+        setLanguages(languagesData);
+      }
+    });
+  };
+
+  useEffect(() => {
+    fetchData();
+  }, []);
+
+  if (isPending && translations.length === 0) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div className="p-6">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-bold">Extra Translations</h1>
+        <CreateTranslationForm onSuccess={fetchData} />
+      </div>
+      <TranslationsTable translations={translations} languages={languages} onSuccess={fetchData} />
+    </div>
+  );
+}
+
+function CreateTranslationForm({ onSuccess }: { onSuccess: () => void }) {
+  const [state, formAction] = useActionState(createTranslation, null);
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (state?.success) {
+      setOpen(false);
+      onSuccess();
+    }
+  }, [state, onSuccess]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button>Create New Translation</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Create New Translation</DialogTitle>
+        </DialogHeader>
+        <form action={formAction} className="space-y-4">
+          <div>
+            <Label htmlFor="key">Key</Label>
+            <Input id="key" name="key" placeholder="e.g., sign_in_button" required />
+            {state?.errors?.key && <p className="text-red-500 text-sm mt-1">{state.errors.key[0]}</p>}
+          </div>
+          <div>
+            <Label htmlFor="en">English</Label>
+            <Input id="en" name="en" placeholder="e.g., Sign In" required />
+            {state?.errors?.en && <p className="text-red-500 text-sm mt-1">{state.errors.en[0]}</p>}
+          </div>
+          {state?.error && <p className="text-red-500 text-sm">{state.error}</p>}
+          <DialogFooter>
+            <SubmitButton>Create</SubmitButton>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+type TranslationsTableProps = {
+  translations: Translation[];
+  languages: Language[];
+  onSuccess: () => void;
+};
+
+function TranslationsTable({ translations, languages, onSuccess }: TranslationsTableProps) {
+  return (
+    <div className="border rounded-lg">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>Key</TableHead>
+            {languages.map((lang) => (
+              <TableHead key={lang.code}>{lang.name}</TableHead>
+            ))}
+            <TableHead className="text-right w-[100px]">Actions</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {translations.map((t) => (
+            <EditableTranslationRow key={t.key} translation={t} languages={languages} onSuccess={onSuccess} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+
+type EditableRowProps = {
+  translation: Translation;
+  languages: Language[];
+  onSuccess: () => void;
+};
+
+function EditableTranslationRow({ translation, languages, onSuccess }: EditableRowProps) {
+  const [isDirty, setIsDirty] = useState(false);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [formValues, setFormValues] = useState(() => translation.translations as Record<string, string>);
+
+  useEffect(() => {
+    setFormValues(translation.translations as Record<string, string>);
+    setIsDirty(false);
+    setError(null);
+  }, [translation]);
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsDirty(true);
+    const { name, value } = e.target;
+    setFormValues(prev => ({ ...prev, [name]: value }));
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    if (isSubmitting || !isDirty) {
+      return;
+    }
+
+    setIsSubmitting(true);
+    setError(null);
+    
+    try {
+      const formData = new FormData();
+      formData.append('key', translation.key);
+      for (const [lang, value] of Object.entries(formValues)) {
+        formData.append(lang, value);
+      }
+      
+      const result = await updateTranslation(null, formData);
+      
+      if (result?.success) {
+        setIsDirty(false);
+        onSuccess();
+      } else if (result?.error) {
+        setError(result.error);
+      }
+    } catch (err) {
+      console.error('Submit error:', err);
+      setError('An unexpected error occurred');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <TableRow>
+      <TableCell className="font-medium">{translation.key}</TableCell>
+      {languages.map((lang) => (
+        <TableCell key={lang.code}>
+          <Input
+            name={lang.code}
+            value={formValues[lang.code] || ''}
+            onChange={handleInputChange}
+            className="w-full"
+          />
+        </TableCell>
+      ))}
+      <TableCell className="text-right">
+        <form onSubmit={handleSubmit}>
+          <Button type="submit" disabled={!isDirty || isSubmitting}>
+            {isSubmitting ? 'Saving...' : 'Save'}
+          </Button>
+          {error && <p className="text-red-500 text-xs mt-1">{error}</p>}
+        </form>
+      </TableCell>
+    </TableRow>
+  );
+}

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

@@ -0,0 +1,77 @@
+// app/cms/settings/languages/[id]/edit/page.tsx
+import React from "react";
+import { createClient } from "@nextblock-cms/db/server";
+import LanguageForm from "../../components/LanguageForm";
+import { updateLanguage } from "../../actions";
+import type { Database } from "@nextblock-cms/db";
+import { notFound } from "next/navigation";
+
+type Language = Database['public']['Tables']['languages']['Row'];
+import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import { ArrowLeft } from "lucide-react";
+
+async function getLanguageData(id: number): Promise<Language | null> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("languages")
+    .select("*")
+    .eq("id", id)
+    .single();
+
+  if (error) {
+    console.error("Error fetching language for edit:", error);
+    return null;
+  }
+  return data;
+}
+
+async function getAllLanguages(): Promise<Language[]> {
+    const supabase = createClient();
+    const { data, error } = await supabase.from("languages").select("*");
+    if (error) {
+        console.error("Error fetching all languages for edit page form:", error);
+        return [];
+    }
+    return data || [];
+}
+
+export default async function EditLanguagePage(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params;
+  const languageId = parseInt(params.id, 10);
+  if (isNaN(languageId)) {
+    return notFound();
+  }
+
+  const [language, allLanguages] = await Promise.all([
+      getLanguageData(languageId),
+      getAllLanguages()
+  ]);
+
+
+  if (!language) {
+    return notFound();
+  }
+
+  const updateLanguageWithId = updateLanguage.bind(null, languageId);
+
+  return (
+    <div className="max-w-xl mx-auto">
+      <div className="mb-6 flex items-center gap-3">
+            <Button variant="outline" size="icon" asChild>
+                <Link href="/cms/settings/languages">
+                    <ArrowLeft className="h-4 w-4" />
+                </Link>
+            </Button>
+            <h1 className="text-2xl font-semibold">Edit Language: {language.name}</h1>
+      </div>
+      <LanguageForm
+        language={language}
+        formAction={updateLanguageWithId}
+        actionButtonText="Update Language"
+        isEditing={true}
+        allLanguages={allLanguages}
+      />
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/settings/languages/actions.ts

@@ -0,0 +1,261 @@
+// app/cms/settings/languages/actions.ts
+"use server";
+
+import { createClient } from "@nextblock-cms/db/server";
+import { revalidatePath } from "next/cache";
+import { redirect } from "next/navigation";
+import type { Database } from "@nextblock-cms/db";
+
+type Language = Database["public"]["Tables"]["languages"]["Row"];
+
+// Helper to check admin role
+async function verifyAdmin(supabase: ReturnType<typeof createClient>): Promise<boolean> {
+  const { data: { user } } = await supabase.auth.getUser();
+  if (!user) return false;
+  const { data: profile } = await supabase
+    .from("profiles")
+    .select("role")
+    .eq("id", user.id)
+    .single();
+  return profile?.role === "ADMIN";
+}
+
+export async function getLanguages(): Promise<{ data: Language[] | null; error: string | null; }> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("languages")
+    .select("id, code, name, is_default, is_active, created_at, updated_at")
+    .order("is_default", { ascending: false }) // Default first
+    .order("name", { ascending: true });
+
+  if (error) {
+    console.error("Error fetching languages:", error);
+    return { data: null, error: `Failed to fetch languages: ${error.message}` };
+  }
+  return { data, error: null };
+}
+export async function getActiveLanguagesServerSide(): Promise<Language[]> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("languages")
+    .select("id, code, name, is_default, is_active, created_at, updated_at")
+    .eq("is_active", true) // Assuming there's an is_active column
+    .order("name", { ascending: true });
+
+  if (error) {
+    console.error("Error fetching active languages:", error);
+    throw new Error("Failed to fetch active languages.");
+  }
+  
+  return data || [];
+}
+export async function getLanguageByCode(code: string): Promise<{ data: Language | null; error: string | null; }> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("languages")
+    .select("id, code, name, is_default, is_active, created_at, updated_at")
+    .eq("code", code)
+    .single();
+
+  if (error) {
+    console.error(`Error fetching language by code ${code}:`, error);
+    return { data: null, error: `Failed to fetch language by code ${code}: ${error.message}` };
+  }
+  return { data, error: null };
+}
+
+type UpsertLanguagePayload = {
+  code: string;
+  name: string;
+  is_default: boolean;
+  is_active: boolean;
+};
+
+export async function createLanguage(formData: FormData) {
+  const supabase = createClient();
+
+  if (!(await verifyAdmin(supabase))) {
+    return { error: "Unauthorized: Admin role required." };
+  }
+
+  const rawFormData = {
+    code: formData.get("code") as string,
+    name: formData.get("name") as string,
+    is_default: formData.get("is_default") === "on", // Checkbox value
+    is_active: formData.get("is_active") === "on",
+  };
+
+  if (!rawFormData.code || !rawFormData.name) {
+    return { error: "Missing required fields: code or name." };
+  }
+  if (rawFormData.code.length > 10) { // Basic validation
+      return { error: "Language code is too long (max 10 characters)." };
+  }
+
+
+  const languageData: UpsertLanguagePayload = {
+    ...rawFormData,
+  };
+
+  // If setting this language as default, unset any other default language first
+  if (languageData.is_default) {
+    const { error: unsetError } = await supabase
+      .from("languages")
+      .update({ is_default: false })
+      .eq("is_default", true);
+    if (unsetError) {
+      console.error("Error unsetting previous default language:", unsetError);
+      return { error: `Failed to unset previous default language: ${unsetError.message}` };
+    }
+  } else {
+    // Ensure there's at least one default language if unsetting the current one
+    // This logic is complex if done here. The DB unique index on (is_default) WHERE is_default=true handles one default.
+    // If unchecking the *only* default, the DB might prevent it or it might allow no default.
+    // It's better to handle "setting a new default" as the primary way to change the default.
+  }
+
+
+  const { data, error } = await supabase
+    .from("languages")
+    .insert(languageData)
+    .select()
+    .single();
+
+  if (error) {
+    console.error("Error creating language:", error);
+    if (error.code === '23505') { // Unique violation
+        if (error.message.includes('languages_code_key')) {
+            return { error: `Language code '${languageData.code}' already exists.` };
+        }
+        if (error.message.includes('ensure_single_default_language_idx')) {
+             return { error: `Cannot set this language as default. Another language is already default, or an error occurred unsetting it.` };
+        }
+    }
+    return { error: `Failed to create language: ${error.message}` };
+  }
+
+  revalidatePath("/cms/settings/languages");
+  revalidatePath("/"); // Revalidate home page as language switcher might change
+  if (data?.id) {
+    redirect(`/cms/settings/languages/${data.id}/edit?success=Language created successfully`);
+  } else {
+    redirect(`/cms/settings/languages?success=Language created successfully`);
+  }
+}
+
+export async function updateLanguage(languageId: number, formData: FormData) {
+  const supabase = createClient();
+
+  if (!(await verifyAdmin(supabase))) {
+    return { error: "Unauthorized: Admin role required." };
+  }
+
+  const rawFormData = {
+    code: formData.get("code") as string,
+    name: formData.get("name") as string,
+    is_default: formData.get("is_default") === "on",
+    is_active: formData.get("is_active") === "on",
+  };
+
+  if (!rawFormData.code || !rawFormData.name) {
+    return { error: "Missing required fields: code or name." };
+  }
+   if (rawFormData.code.length > 10) {
+      return { error: "Language code is too long (max 10 characters)." };
+  }
+
+  const languageData: Partial<UpsertLanguagePayload> = {
+    ...rawFormData,
+  };
+
+  // If setting this language as default, unset any other default language first
+  if (languageData.is_default) {
+    const { error: unsetError } = await supabase
+      .from("languages")
+      .update({ is_default: false })
+      .eq("is_default", true)
+      .neq("id", languageId); // Don't unset self if it was already default
+    if (unsetError) {
+      console.error("Error unsetting previous default language:", unsetError);
+      return { error: `Failed to unset previous default language: ${unsetError.message}` };
+    }
+  } else {
+    // Check if we are trying to uncheck the *only* default language.
+    // The DB unique index `ensure_single_default_language_idx` might prevent this if it leads to zero defaults.
+    // It's safer to enforce that one language must always be default through UI logic (e.g., disable unchecking if it's the only default).
+    const { data: currentLang } = await supabase.from("languages").select("is_default").eq("id", languageId).single();
+    if (currentLang?.is_default && !languageData.is_default) {
+        const { count } = await supabase.from("languages").select('*', { count: 'exact', head: true }).eq("is_default", true);
+        if (count === 1) {
+            return { error: "Cannot unset the only default language. Please set another language as default first." };
+        }
+    }
+  }
+
+  const { error } = await supabase
+    .from("languages")
+    .update(languageData)
+    .eq("id", languageId);
+
+  if (error) {
+    console.error("Error updating language:", error);
+     if (error.code === '23505') {
+        if (error.message.includes('languages_code_key')) {
+            return { error: `Language code '${languageData.code}' already exists for another language.` };
+        }
+         if (error.message.includes('ensure_single_default_language_idx')) {
+             return { error: `Database constraint: Only one language can be default.` };
+        }
+    }
+    return { error: `Failed to update language: ${error.message}` };
+  }
+
+  revalidatePath("/cms/settings/languages");
+  revalidatePath("/");
+  redirect(`/cms/settings/languages/${languageId}/edit?success=Language updated successfully`);
+}
+
+export async function deleteLanguage(languageId: number) {
+  const supabase = createClient();
+
+  if (!(await verifyAdmin(supabase))) {
+    return { error: "Unauthorized: Admin role required." };
+  }
+
+  // Critical check: Prevent deleting the default language if it's the only one or default.
+  const { data: langToDelete, error: langFetchError } = await supabase
+    .from("languages")
+    .select("is_default, code")
+    .eq("id", languageId)
+    .single();
+
+  if (langFetchError || !langToDelete) {
+    return { error: "Language not found or error fetching details." };
+  }
+
+  if (langToDelete.is_default) {
+    const { count } = await supabase.from("languages").select('*', { count: 'exact', head: true });
+    if (count === 1) {
+        return { error: "Cannot delete the only language, especially if it's default." };
+    }
+    return { error: "Cannot delete the default language. Set another language as default first." };
+  }
+
+  // WARNING: Deleting a language will cascade delete all associated content
+  // (pages, posts, blocks, navigation_items) due to foreign key constraints with ON DELETE CASCADE.
+  // This is a very destructive operation. A confirmation step in the UI is crucial.
+
+  const { error } = await supabase
+    .from("languages")
+    .delete()
+    .eq("id", languageId);
+
+  if (error) {
+    console.error("Error deleting language:", error);
+    return { error: `Failed to delete language: ${error.message}. Check if content is still linked.` };
+  }
+
+  revalidatePath("/cms/settings/languages");
+  revalidatePath("/");
+  redirect("/cms/settings/languages?success=Language deleted successfully. All associated content has also been removed.");
+}