create-nextblock 0.0.1

package/templates/nextblock-template/app/cms/settings/languages/components/DeleteLanguageButton.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import { DropdownMenuItem } from "@nextblock-cms/ui";
+import { Trash2, ShieldAlert } from "lucide-react";
+import { deleteLanguage } from "../actions"; // Server action
+import type { Database } from "@nextblock-cms/db";
+import { useTransition, useState } from 'react';
+import { ConfirmationModal } from "@/app/cms/components/ConfirmationModal";
+
+type Language = Database['public']['Tables']['languages']['Row'];
+
+interface DeleteLanguageClientButtonProps {
+  language: Language;
+}
+
+export default function DeleteLanguageClientButton({ language }: DeleteLanguageClientButtonProps) {
+  const [isPending, startTransition] = useTransition();
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // A more robust check for "is_default and is the only default language" should ideally
+  // be handled by the server action or by passing allLanguages to this component.
+  // For UI hint, this is a simplified check. The server action has the final say.
+  const isDefaultLanguage = language.is_default;
+
+  const handleDeleteConfirm = () => {
+    // The server-side `deleteLanguage` action already checks if it's the default
+    // and if it's the only language. This client-side check is for immediate UX.
+    if (isDefaultLanguage) {
+      // The server action has a more robust check for "only default"
+      // For now, a simple alert for any default language.
+       alert("Cannot delete the default language. Please set another language as default first, or ensure this is not the only language.");
+       setIsModalOpen(false);
+       return;
+    }
+
+    startTransition(async () => {
+      const result = await deleteLanguage(language.id); // Call the server action
+      if (result?.error) {
+        alert(`Error: ${result.error}`);
+        // In a real app, use a toast or a more integrated notification system
+      }
+      // Revalidation and redirection are handled by the server action itself.
+      setIsModalOpen(false);
+    });
+  };
+
+  return (
+    <>
+      <DropdownMenuItem
+        className={`hover:!bg-red-50 dark:hover:!bg-red-700/20 ${
+          isDefaultLanguage // Visually hint if it's default, server action has final say on deletability
+            ? "text-muted-foreground cursor-not-allowed hover:!text-muted-foreground"
+            : "text-red-600 hover:!text-red-600 cursor-pointer"
+        }`}
+        onSelect={(e) => e.preventDefault()} // Prevent menu closing immediately
+        onClick={() => !isPending && !isDefaultLanguage && setIsModalOpen(true)}
+        disabled={isPending || isDefaultLanguage} // Disable if pending or if it's the default language
+      >
+        <Trash2 className="mr-2 h-4 w-4" />
+        {isPending ? "Deleting..." : "Delete"}
+        {isDefaultLanguage && (
+          <span title="This is the default language. Deletion might be restricted.">
+            <ShieldAlert className="ml-auto h-4 w-4 text-amber-500" />
+          </span>
+        )}
+      </DropdownMenuItem>
+      <ConfirmationModal
+        isOpen={isModalOpen}
+        onClose={() => setIsModalOpen(false)}
+        onConfirm={handleDeleteConfirm}
+        title="Are you sure?"
+        description="This will permanently delete the language. This action cannot be undone."
+      />
+    </>
+  );
+}

package/templates/nextblock-template/app/cms/settings/languages/components/LanguageForm.tsx

@@ -0,0 +1,167 @@
+// app/cms/settings/languages/components/LanguageForm.tsx
+"use client";
+
+import React, { useState, useTransition, useEffect } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { Button } from '@nextblock-cms/ui';
+import { Input } from '@nextblock-cms/ui';
+import { Label } from '@nextblock-cms/ui';
+import { Checkbox } from '@nextblock-cms/ui'; // Assuming shadcn/ui Checkbox
+import type { Database } from "@nextblock-cms/db";
+
+type Language = Database["public"]["Tables"]["languages"]["Row"];
+import { useAuth } from '@/context/AuthContext';
+
+interface LanguageFormProps {
+  language?: Language | null;
+  formAction: (formData: FormData) => Promise<{ error?: string } | void>;
+  actionButtonText?: string;
+  isEditing?: boolean;
+  allLanguages?: Language[]; // Pass all languages to check for "only default" scenario
+}
+
+export default function LanguageForm({
+  language,
+  formAction,
+  actionButtonText = "Save Language",
+  isEditing = false,
+  allLanguages = []
+}: LanguageFormProps) {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const [isPending, startTransition] = useTransition();
+  const { isAdmin, isLoading: authLoading } = useAuth();
+
+  const [code, setCode] = useState(language?.code || "");
+  const [name, setName] = useState(language?.name || "");
+  const [isDefault, setIsDefault] = useState(language?.is_default || false);
+  const [isActive, setIsActive] = useState(language?.is_active ?? true);
+
+  const [formMessage, setFormMessage] = useState<{ type: 'success' | 'error', text: string } | null>(null);
+
+  useEffect(() => {
+    const successMessage = searchParams.get('success');
+    const errorMessage = searchParams.get('error');
+    if (successMessage) setFormMessage({ type: 'success', text: successMessage });
+    else if (errorMessage) setFormMessage({ type: 'error', text: errorMessage });
+  }, [searchParams]);
+
+  const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setFormMessage(null);
+    const formData = new FormData(event.currentTarget);
+    // Checkbox value needs to be explicitly set if not checked
+    if (!isDefault) {
+        formData.delete('is_default'); // Remove if not checked, action handles "on" or missing
+    } else {
+        formData.set('is_default', 'on');
+    }
+    if (isActive) {
+      formData.set('is_active', 'on');
+    } else {
+      formData.delete('is_active');
+    }
+
+
+    startTransition(async () => {
+      const result = await formAction(formData);
+      if (result?.error) {
+        setFormMessage({ type: 'error', text: result.error });
+      }
+      // Success is handled by redirect with query param in server action
+    });
+  };
+
+  if (authLoading) return <div>Loading...</div>;
+  if (!isAdmin) return <div>Access Denied. Admin role required.</div>;
+
+  const isTheOnlyDefaultLanguage = isEditing && language?.is_default && allLanguages.filter(l => l.is_default).length === 1;
+
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-6">
+      {formMessage && (
+        <div
+          className={`p-3 rounded-md text-sm ${
+            formMessage.type === 'success'
+              ? 'bg-green-100 text-green-700 border border-green-200'
+              : 'bg-red-100 text-red-700 border border-red-200'
+          }`}
+        >
+          {formMessage.text}
+        </div>
+      )}
+      <div>
+        <Label htmlFor="code">Language Code (e.g., en, fr-CA)</Label>
+        <Input
+          id="code"
+          name="code"
+          value={code}
+          onChange={(e) => setCode(e.target.value)}
+          required
+          maxLength={10}
+          className="mt-1"
+          placeholder="en"
+        />
+        <p className="text-xs text-muted-foreground mt-1">Short, unique BCP 47 language tag.</p>
+      </div>
+
+      <div>
+        <Label htmlFor="name">Display Name</Label>
+        <Input
+          id="name"
+          name="name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          required
+          className="mt-1"
+          placeholder="English"
+        />
+      </div>
+
+      <div className="flex items-center space-x-2 pt-2">
+        <Checkbox
+          id="is_default"
+          name="is_default"
+          checked={isDefault}
+          onCheckedChange={(checked) => setIsDefault(checked as boolean)}
+          disabled={isTheOnlyDefaultLanguage && isDefault} // Prevent unchecking the only default
+        />
+        <Label htmlFor="is_default" className="font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70">
+          Set as Default Language
+        </Label>
+      </div>
+       {isTheOnlyDefaultLanguage && isDefault && (
+          <p className="text-xs text-amber-600">This is the only default language. To change, set another language as default.</p>
+      )}
+
+      <div className="flex items-center space-x-2 pt-2">
+        <Checkbox
+          id="is_active"
+          name="is_active"
+          checked={isActive}
+          onCheckedChange={(checked) => setIsActive(checked as boolean)}
+        />
+        <Label htmlFor="is_active" className="font-normal leading-none">
+          Language is Active
+        </Label>
+      </div>
+      <p className="text-xs text-muted-foreground -mt-1">Inactive languages are hidden from public view but still available for content management.</p>
+
+
+      <div className="flex justify-end space-x-3 pt-4">
+        <Button
+          type="button"
+          variant="outline"
+          onClick={() => router.push("/cms/settings/languages")}
+          disabled={isPending}
+        >
+          Cancel
+        </Button>
+        <Button type="submit" disabled={isPending || authLoading}>
+          {isPending ? "Saving..." : actionButtonText}
+        </Button>
+      </div>
+    </form>
+  );
+}

package/templates/nextblock-template/app/cms/settings/languages/new/page.tsx

@@ -0,0 +1,34 @@
+// app/cms/settings/languages/new/page.tsx
+import React from "react";
+import LanguageForm from "../components/LanguageForm";
+import { createLanguage } from "../actions";
+import { createClient } from "@nextblock-cms/db/server"; // To fetch all languages for the form logic
+import type { Database } from "@nextblock-cms/db";
+
+type Language = Database['public']['Tables']['languages']['Row'];
+
+async function getAllLanguages(): Promise<Language[]> {
+    const supabase = createClient();
+    const { data, error } = await supabase.from("languages").select("*");
+    if (error) {
+        console.error("Error fetching languages for new page form:", error);
+        return [];
+    }
+    return data || [];
+}
+
+
+export default async function NewLanguagePage() {
+  const allLanguages = await getAllLanguages();
+  return (
+    <div className="max-w-xl mx-auto">
+      <h1 className="text-2xl font-bold mb-6">Add New Language</h1>
+      <LanguageForm
+        formAction={createLanguage}
+        actionButtonText="Add Language"
+        isEditing={false}
+        allLanguages={allLanguages}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,156 @@
+// app/cms/settings/languages/page.tsx
+import React from 'react';
+import { createClient } from "@nextblock-cms/db/server";
+import Link from "next/link";
+import { Button } from "@nextblock-cms/ui";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@nextblock-cms/ui";
+import { Badge } from "@nextblock-cms/ui";
+import { MoreHorizontal, PlusCircle, Edit3, Languages as LanguagesIcon, ShieldAlert } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+} from "@nextblock-cms/ui";
+import type { Database } from "@nextblock-cms/db";
+import DeleteLanguageClientButton from './components/DeleteLanguageButton';
+
+type Language = Database['public']['Tables']['languages']['Row'];
+
+async function getLanguages(): Promise<Language[]> {
+  const supabase = createClient();
+  const { data, error } = await supabase
+    .from("languages")
+    .select("*")
+    .order("name", { ascending: true });
+
+  if (error) {
+    console.error("Error fetching languages:", error);
+    return [];
+  }
+  return data || [];
+}
+
+export default async function CmsLanguagesListPage() {
+  const languages = await getLanguages();
+  // The following line for searchParams will cause an error during static generation or if window is not defined.
+  // It's better to pass searchParams as props if needed from the page component.
+  // For this specific page, success messages are handled by redirect query params which Next.js makes available in page props.
+  // Let's assume `props.searchParams.success` would be used if passed.
+  // const searchParams = new URLSearchParams(typeof window !== 'undefined' ? window.location.search : '');
+  // const successMessage = searchParams.get('success');
+  const successMessage: string | null = null;
+  // If you need to read searchParams, ensure your page component accepts them:
+  // export default async function CmsLanguagesListPage({ searchParams }: { searchParams?: { success?: string } }) {
+  // successMessage = searchParams?.success ?? null;
+  // }
+
+
+  return (
+    <div className="w-full">
+      <div className="flex justify-between items-center mb-6">
+        <h1 className="text-2xl font-semibold">Manage Languages</h1>
+        <Button variant="default" asChild>
+          <Link href="/cms/settings/languages/new">
+            <PlusCircle className="mr-2 h-4 w-4" /> Add New Language
+          </Link>
+        </Button>
+      </div>
+
+       {successMessage && (
+        <div className="mb-4 p-3 rounded-md text-sm bg-green-100 text-green-700 border border-green-200">
+          {decodeURIComponent(successMessage)}
+        </div>
+      )}
+
+      {languages.length === 0 ? (
+        <div className="text-center py-10 border rounded-lg">
+          <LanguagesIcon className="mx-auto h-12 w-12 text-muted-foreground" />
+          <h3 className="mt-2 text-sm font-medium text-foreground">No languages configured</h3>
+          <p className="mt-1 text-sm text-muted-foreground">
+            Add languages to support multilingual content.
+          </p>
+          <div className="mt-6">
+            <Button asChild>
+              <Link href="/cms/settings/languages/new">
+                <PlusCircle className="mr-2 h-4 w-4" /> Add Language
+              </Link>
+            </Button>
+          </div>
+        </div>
+      ) : (
+        <div className="rounded-lg border overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead className="w-[200px]">Name</TableHead>
+                <TableHead>Code</TableHead>
+                <TableHead>Default</TableHead>
+                <TableHead>Created At</TableHead>
+                <TableHead className="text-right w-[80px]">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {languages.map((lang) => (
+                <TableRow key={lang.id}>
+                  <TableCell className="font-medium">{lang.name}</TableCell>
+                  <TableCell>
+                    <Badge variant="secondary">{lang.code}</Badge>
+                  </TableCell>
+                  <TableCell>
+                    {lang.is_default ? (
+                      <Badge className="bg-blue-500 hover:bg-blue-600 text-white">Default</Badge>
+                    ) : (
+                      <span className="text-xs text-muted-foreground">-</span>
+                    )}
+                  </TableCell>
+                  <TableCell className="text-xs text-muted-foreground">
+                    {lang.created_at ? new Date(lang.created_at).toLocaleDateString() : '-'}
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <DropdownMenu>
+                      <DropdownMenuTrigger asChild>
+                        <Button variant="ghost" size="icon">
+                          <MoreHorizontal className="h-4 w-4" />
+                          <span className="sr-only">Language actions</span>
+                        </Button>
+                      </DropdownMenuTrigger>
+                      <DropdownMenuContent align="end">
+                        <DropdownMenuItem asChild>
+                          <Link href={`/cms/settings/languages/${lang.id}/edit`} className="flex items-center cursor-pointer">
+                            <Edit3 className="mr-2 h-4 w-4" /> Edit
+                          </Link>
+                        </DropdownMenuItem>
+                        <DropdownMenuSeparator />
+                        <DeleteLanguageClientButton language={lang} />
+                      </DropdownMenuContent>
+                    </DropdownMenu>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+      <div className="mt-6 p-4 border border-amber-300 bg-amber-50 dark:bg-amber-900/30 rounded-lg">
+        <div className="flex items-start">
+            <ShieldAlert className="h-5 w-5 text-amber-600 dark:text-amber-400 mr-3 flex-shrink-0 mt-0.5" />
+            <div>
+                <h4 className="text-sm font-semibold text-amber-700 dark:text-amber-300">Important Note on Deleting Languages</h4>
+                <p className="text-xs text-amber-600 dark:text-amber-400 mt-1">
+                Deleting a language is a destructive action. All content (pages, posts, blocks, navigation items) specifically associated with that language will be permanently deleted due to database cascade rules. Please ensure this is intended before proceeding. You cannot delete the current default language if it is the only one.
+                </p>
+            </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+import LogoForm from '../../components/LogoForm'
+import { updateLogo, getLogoById } from '../../actions'
+import { notFound } from 'next/navigation'
+
+export default async function EditLogoPage(props: { params: Promise<{ id: string }> }) {
+  const params = await props.params
+  const logo = await getLogoById(params.id)
+
+  if (!logo) {
+    notFound()
+  }
+
+  return (
+    <div>
+      <h1 className="text-2xl font-semibold mb-6">Edit Logo</h1>
+      <LogoForm logo={logo} action={updateLogo as any} />
+    </div>
+  )
+}

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

@@ -0,0 +1,114 @@
+'use server'
+
+import { createClient } from '@nextblock-cms/db/server'
+import { revalidatePath } from 'next/cache'
+import { redirect } from 'next/navigation'
+import type { Logo } from './types'
+
+export async function createLogo(payload: {
+  name: string
+  media_id: string
+}): Promise<{ success: boolean; error?: string }> {
+  const supabase = createClient()
+
+  const { error } = await supabase.from('logos').insert(payload)
+
+  if (error) {
+    console.error('Error creating logo:', error)
+    return { success: false, error: error.message }
+  }
+
+  revalidatePath('/cms/settings/logos')
+  return { success: true }
+}
+
+export async function updateLogo(payload: {
+  id: string
+  name: string
+  media_id: string
+}) {
+  const supabase = createClient()
+  const { id, ...data } = payload
+
+  const { error } = await supabase.from('logos').update(data).eq('id', id)
+
+  if (error) {
+    console.error('Error updating logo:', error)
+    // Optionally, handle the error more gracefully
+    // redirect('/error?message=Could not update logo')
+    return
+  }
+
+  revalidatePath('/cms/settings/logos')
+  revalidatePath(`/cms/settings/logos/${id}/edit`)
+  redirect('/cms/settings/logos')
+}
+
+export async function deleteLogo(id: string) {
+  const supabase = createClient()
+
+  const { error } = await supabase.from('logos').delete().eq('id', id)
+
+  if (error) {
+    console.error('Error deleting logo:', error)
+    // Optionally, handle the error more gracefully
+    // redirect('/error?message=Could not delete logo')
+    return
+  }
+
+  revalidatePath('/cms/settings/logos')
+}
+
+export async function getLogos() {
+  const supabase = createClient()
+  const { data, error } = await supabase
+    .from('logos')
+    .select('*, media:media_id(*)')
+    .order('created_at', { ascending: false })
+
+  if (error) {
+    console.error('Error fetching logos:', error.message)
+    throw new Error(`Failed to fetch logos: ${error.message}`)
+  }
+
+  return data
+}
+
+export async function getLogoById(id: string) {
+  const supabase = createClient()
+  const { data, error } = await supabase
+    .from('logos')
+    .select('*, media:media_id(*)')
+    .eq('id', id)
+    .single()
+
+  if (error) {
+    console.error(`Error fetching logo by id ${id}:`, error.message)
+    return null
+  }
+
+  return data
+}
+
+export async function getActiveLogo(): Promise<Logo | null> {
+  const supabase = createClient()
+
+  const { data, error } = await supabase
+    .from('logos')
+    .select(
+      `
+      *,
+      media:media_id (*)
+    `
+    )
+    .order('created_at', { ascending: false })
+    .limit(1)
+    .maybeSingle()
+
+  if (error) {
+    console.error('Error fetching active logo:', error.message)
+    throw new Error(`Failed to fetch active logo: ${error.message}`)
+  }
+
+  return data as Logo | null
+}