create-nextblock 0.14.2 → 0.14.4

package/templates/nextblock-template/app/cms/settings/global-css/components/ThemeManager.tsx

@@ -0,0 +1,267 @@
+'use client';
+
+import React from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Button,
+  Input,
+  Label,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@nextblock-cms/ui';
+import { toast } from 'sonner';
+import { Copy, Loader2, Plus, Star, Trash2 } from 'lucide-react';
+import type { SiteTheme } from '../../../../../lib/themes/buildThemeCss';
+import {
+  createTheme,
+  deleteTheme,
+  duplicateTheme,
+  setDefaultTheme,
+  updateTheme,
+} from '../theme-actions';
+import { ThemeEditor, ThemePreview, themeToDraft, type ThemeDraft } from './ThemeEditor';
+import { ThemeIcon } from '../../../../../components/theme-icon';
+
+export default function ThemeManager({ initialThemes }: { initialThemes: SiteTheme[] }) {
+  const router = useRouter();
+  const [themes, setThemes] = React.useState(initialThemes);
+  const [selectedId, setSelectedId] = React.useState(initialThemes[0]?.id ?? '');
+  const [draft, setDraft] = React.useState<ThemeDraft | null>(
+    initialThemes[0] ? themeToDraft(initialThemes[0]) : null,
+  );
+  const [pending, setPending] = React.useState<string | null>(null);
+  const [createOpen, setCreateOpen] = React.useState(false);
+  const [newName, setNewName] = React.useState('');
+
+  React.useEffect(() => {
+    setThemes(initialThemes);
+  }, [initialThemes]);
+
+  const selected = themes.find((theme) => theme.id === selectedId) ?? null;
+
+  // Switching themes discards nothing silently: the draft is per-theme and only
+  // written back on Save, so we reseed whenever the selection changes.
+  const selectTheme = (theme: SiteTheme) => {
+    setSelectedId(theme.id);
+    setDraft(themeToDraft(theme));
+  };
+
+  const isDirty = React.useMemo(() => {
+    if (!selected || !draft) return false;
+    return JSON.stringify(draft) !== JSON.stringify(themeToDraft(selected));
+  }, [selected, draft]);
+
+  const run = async (key: string, fn: () => Promise<{ ok: boolean; message?: string; error?: string }>) => {
+    setPending(key);
+    try {
+      const result = await fn();
+      if (result.ok) {
+        toast.success(result.message ?? 'Done.');
+        router.refresh();
+        return true;
+      }
+      toast.error(result.error ?? 'Something went wrong.');
+      return false;
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : 'Something went wrong.');
+      return false;
+    } finally {
+      setPending(null);
+    }
+  };
+
+  const handleSave = async () => {
+    if (!selected || !draft) return;
+    await run('save', () =>
+      updateTheme(selected.id, {
+        name: draft.name,
+        description: draft.description,
+        icon: draft.icon,
+        color_scheme: draft.color_scheme,
+        tokens: draft.tokens,
+        extra_css: draft.extra_css,
+        is_active: selected.is_default ? true : draft.is_active,
+      }),
+    );
+  };
+
+  const handleCreate = async () => {
+    const name = newName.trim();
+    if (!name) return;
+    const ok = await run('create', () =>
+      createTheme({
+        name,
+        // Start from the currently selected theme's palette so a new theme is a
+        // usable variation rather than an unreadable blank slate.
+        tokens: draft?.tokens ?? {},
+        color_scheme: draft?.color_scheme ?? 'light',
+        icon: 'Palette',
+        sort_order: (themes[themes.length - 1]?.sort_order ?? 0) + 10,
+      }),
+    );
+    if (ok) {
+      setCreateOpen(false);
+      setNewName('');
+    }
+  };
+
+  if (!selected || !draft) {
+    return (
+      <div className="rounded-lg border border-dashed p-8 text-center">
+        <p className="text-sm text-muted-foreground">
+          No themes found. Run the pending database migration to seed Light, Dark and Vibrant.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      <div className="grid gap-6 lg:grid-cols-[220px_minmax(0,1fr)]">
+        {/* Theme list */}
+        <aside className="space-y-2">
+          <div className="flex items-center justify-between">
+            <h2 className="text-sm font-semibold">Themes</h2>
+            <Button type="button" variant="ghost" size="sm" className="h-7 px-2" onClick={() => setCreateOpen(true)}>
+              <Plus className="h-3.5 w-3.5" />
+            </Button>
+          </div>
+          <ul className="space-y-1">
+            {themes.map((theme) => {
+              const active = theme.id === selectedId;
+              return (
+                <li key={theme.id}>
+                  <button
+                    type="button"
+                    onClick={() => selectTheme(theme)}
+                    aria-current={active}
+                    className={
+                      'flex w-full items-center gap-2 rounded-md border px-2.5 py-2 text-left text-sm transition-colors ' +
+                      (active ? 'border-ring bg-accent/50' : 'border-transparent hover:bg-accent/30')
+                    }
+                  >
+                    <ThemeIcon name={theme.icon} size={15} className="shrink-0 text-muted-foreground" />
+                    <span className="min-w-0 flex-1 truncate">{theme.name}</span>
+                    {theme.is_default ? (
+                      <Star className="h-3.5 w-3.5 shrink-0 fill-current text-amber-500" aria-label="Default theme" />
+                    ) : null}
+                    {!theme.is_active ? (
+                      <span className="shrink-0 text-[10px] text-muted-foreground">hidden</span>
+                    ) : null}
+                  </button>
+                </li>
+              );
+            })}
+          </ul>
+        </aside>
+
+        {/* Editor */}
+        <div className="min-w-0 space-y-4">
+          <div className="flex flex-wrap items-center gap-2 border-b pb-3">
+            <Button type="button" onClick={handleSave} disabled={!isDirty || pending !== null}>
+              {pending === 'save' ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : null}
+              {isDirty ? 'Save changes' : 'Saved'}
+            </Button>
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={pending !== null}
+              onClick={() => run('duplicate', () => duplicateTheme(selected.id))}
+            >
+              <Copy className="mr-1.5 h-3.5 w-3.5" />
+              Duplicate
+            </Button>
+            {!selected.is_default ? (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={pending !== null}
+                onClick={() => run('default', () => setDefaultTheme(selected.id))}
+              >
+                <Star className="mr-1.5 h-3.5 w-3.5" />
+                Make default
+              </Button>
+            ) : null}
+            {!selected.is_system && !selected.is_default ? (
+              <Button
+                type="button"
+                variant="outline"
+                size="sm"
+                disabled={pending !== null}
+                className="text-destructive hover:text-destructive"
+                onClick={() => {
+                  if (
+                    !window.confirm(
+                      `Delete "${selected.name}"? Visitors currently using it will fall back to the default theme.`,
+                    )
+                  ) {
+                    return;
+                  }
+                  void run('delete', () => deleteTheme(selected.id)).then((ok) => {
+                    if (ok) {
+                      const next = themes.find((theme) => theme.id !== selected.id);
+                      if (next) selectTheme(next);
+                    }
+                  });
+                }}
+              >
+                <Trash2 className="mr-1.5 h-3.5 w-3.5" />
+                Delete
+              </Button>
+            ) : null}
+            {selected.is_system ? (
+              <span className="text-[11px] text-muted-foreground">
+                System theme — fully editable, but cannot be deleted because &quot;System&quot; resolves to it.
+              </span>
+            ) : null}
+          </div>
+
+          <ThemePreview draft={draft} />
+
+          <ThemeEditor theme={selected} draft={draft} onDraftChange={setDraft} />
+        </div>
+      </div>
+
+      <Dialog open={createOpen} onOpenChange={setCreateOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New theme</DialogTitle>
+            <DialogDescription>
+              Starts as a copy of &quot;{selected.name}&quot; so you can adjust from a working palette.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-1.5">
+            <Label htmlFor="new-theme-name">Name</Label>
+            <Input
+              id="new-theme-name"
+              value={newName}
+              onChange={(event) => setNewName(event.target.value)}
+              placeholder="Midnight"
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  event.preventDefault();
+                  void handleCreate();
+                }
+              }}
+            />
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => setCreateOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="button" onClick={handleCreate} disabled={!newName.trim() || pending !== null}>
+              {pending === 'create' ? <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" /> : null}
+              Create theme
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

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

@@ -1,24 +1,40 @@
-// app/cms/settings/global-css/page.tsx
-import { getGlobalCss } from './actions';
-import GlobalCssForm from './components/GlobalCssForm';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
-
-export default async function GlobalCssSettingsPage() {
-  const css = await getGlobalCss();
-
-  return (
-    <div className="max-w-4xl mx-auto">
-        <Card>
-            <CardHeader>
-                <CardTitle>Global CSS</CardTitle>
-                <CardDescription>
-                    Inject custom CSS rules dynamically across the entire application front-end.
-                </CardDescription>
-            </CardHeader>
-            <CardContent>
-                <GlobalCssForm initialCss={css} />
-            </CardContent>
-        </Card>
-    </div>
-  );
-}
+// app/cms/settings/global-css/page.tsx
+import { getGlobalCss } from './actions';
+import { getSiteThemes } from './theme-actions';
+import GlobalCssForm from './components/GlobalCssForm';
+import ThemeManager from './components/ThemeManager';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@nextblock-cms/ui';
+
+export default async function GlobalCssSettingsPage() {
+  const [css, themes] = await Promise.all([getGlobalCss(), getSiteThemes()]);
+
+  return (
+    <div className="mx-auto max-w-6xl space-y-6">
+      <Card>
+        <CardHeader>
+          <CardTitle>Themes</CardTitle>
+          <CardDescription>
+            Recolour the themes visitors can pick from the switcher, or add your own. Changes apply
+            site-wide without a redeploy.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <ThemeManager initialThemes={themes} />
+        </CardContent>
+      </Card>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Global CSS</CardTitle>
+          <CardDescription>
+            Inject custom CSS rules dynamically across the entire application front-end. Loaded after
+            the themes above, so it can override any of them.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <GlobalCssForm initialCss={css} />
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/nextblock-template/app/cms/settings/global-css/theme-actions.ts

@@ -0,0 +1,259 @@
+// app/cms/settings/global-css/theme-actions.ts
+'use server';
+
+import { createClient } from '@nextblock-cms/db/server';
+import { revalidatePath, revalidateTag } from 'next/cache';
+import type { SettingsActionResult } from '../../../../lib/cms/action-result';
+import { isValidThemeSlug, type SiteTheme } from '../../../../lib/themes/buildThemeCss';
+import { isThemeTokenKey, isValidTokenValue, THEME_TOKEN_KEYS } from '../../../../lib/themes/tokens';
+
+const THEME_COLUMNS =
+  'id, slug, name, description, icon, color_scheme, tokens, extra_css, is_system, is_default, is_active, sort_order';
+
+/** Theme edits are ADMIN-only — RLS enforces it too, this is the friendly error. */
+async function requireAdmin() {
+  const supabase = createClient();
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+  if (!user) {
+    return { supabase, error: 'You must be logged in to manage themes.' as const };
+  }
+
+  const { data: profile, error: profileError } = await supabase
+    .from('profiles')
+    .select('role')
+    .eq('id', user.id)
+    .single();
+
+  if (profileError || !profile || profile.role !== 'ADMIN') {
+    return { supabase, error: 'Only administrators can manage themes.' as const };
+  }
+  return { supabase, error: null };
+}
+
+function revalidateThemes() {
+  revalidateTag('public-layout-site-themes', 'max');
+  revalidatePath('/', 'layout');
+}
+
+export async function getSiteThemes(): Promise<SiteTheme[]> {
+  const supabase = createClient();
+  const { data, error } = await supabase.from('site_themes').select(THEME_COLUMNS).order('sort_order');
+  if (error || !data) return [];
+  return data as unknown as SiteTheme[];
+}
+
+/**
+ * Keep only known tokens with well-formed values. Anything else is dropped
+ * rather than rejected, so a partially-filled form still saves what it can.
+ */
+function sanitizeTokens(input: unknown): Record<string, string> {
+  if (!input || typeof input !== 'object' || Array.isArray(input)) return {};
+  const out: Record<string, string> = {};
+  for (const [key, value] of Object.entries(input as Record<string, unknown>)) {
+    if (typeof value !== 'string') continue;
+    const trimmed = value.trim();
+    if (isThemeTokenKey(key) && isValidTokenValue(key, trimmed)) {
+      out[key] = trimmed;
+    }
+  }
+  return out;
+}
+
+export interface ThemeInput {
+  name: string;
+  slug?: string;
+  description?: string | null;
+  icon?: string;
+  color_scheme?: 'light' | 'dark';
+  tokens?: Record<string, string>;
+  extra_css?: string | null;
+  is_active?: boolean;
+  is_default?: boolean;
+  sort_order?: number;
+}
+
+export async function createTheme(input: ThemeInput): Promise<SettingsActionResult & { slug?: string }> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  const slug = (input.slug ?? input.name ?? '')
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '');
+
+  if (!isValidThemeSlug(slug)) {
+    return {
+      ok: false,
+      error: 'Theme id must be 2-40 characters, lowercase letters, numbers and dashes, starting with a letter.',
+    };
+  }
+  if (!input.name?.trim()) {
+    return { ok: false, error: 'Theme name is required.' };
+  }
+
+  const { error } = await supabase.from('site_themes').insert({
+    slug,
+    name: input.name.trim(),
+    description: input.description?.trim() || null,
+    icon: input.icon || 'Palette',
+    color_scheme: input.color_scheme === 'dark' ? 'dark' : 'light',
+    tokens: sanitizeTokens(input.tokens),
+    extra_css: input.extra_css?.trim() || null,
+    is_active: input.is_active ?? true,
+    is_default: false,
+    is_system: false,
+    sort_order: input.sort_order ?? 100,
+  });
+
+  if (error) {
+    if (error.code === '23505') {
+      return { ok: false, error: `A theme with the id "${slug}" already exists.` };
+    }
+    console.error('Error creating theme:', error);
+    return { ok: false, error: 'Failed to create theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: `Theme "${input.name.trim()}" created.`, slug };
+}
+
+export async function updateTheme(id: string, input: ThemeInput): Promise<SettingsActionResult> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  if (!input.name?.trim()) {
+    return { ok: false, error: 'Theme name is required.' };
+  }
+
+  // `slug` and `is_system` are intentionally not updatable: the slug is the CSS
+  // class and the value persisted in each visitor's localStorage by next-themes,
+  // so renaming it would silently reset everyone's chosen theme.
+  const patch: Record<string, unknown> = {
+    name: input.name.trim(),
+    description: input.description?.trim() || null,
+    icon: input.icon || 'Palette',
+    color_scheme: input.color_scheme === 'dark' ? 'dark' : 'light',
+    extra_css: input.extra_css?.trim() || null,
+  };
+  if (input.tokens !== undefined) patch.tokens = sanitizeTokens(input.tokens);
+  if (input.is_active !== undefined) patch.is_active = input.is_active;
+  if (input.sort_order !== undefined) patch.sort_order = input.sort_order;
+
+  const { error } = await supabase.from('site_themes').update(patch).eq('id', id);
+
+  if (error) {
+    console.error('Error updating theme:', error);
+    return { ok: false, error: 'Failed to update theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: 'Theme saved.' };
+}
+
+export async function setDefaultTheme(id: string): Promise<SettingsActionResult> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  // A hidden theme cannot be the site default.
+  const { error } = await supabase
+    .from('site_themes')
+    .update({ is_default: true, is_active: true })
+    .eq('id', id);
+
+  if (error) {
+    console.error('Error setting default theme:', error);
+    return { ok: false, error: 'Failed to set the default theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: 'Default theme updated.' };
+}
+
+export async function deleteTheme(id: string): Promise<SettingsActionResult> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  const { data: theme, error: readError } = await supabase
+    .from('site_themes')
+    .select('slug, name, is_system, is_default')
+    .eq('id', id)
+    .single();
+
+  if (readError || !theme) {
+    return { ok: false, error: 'Theme not found.' };
+  }
+  if (theme.is_system) {
+    return {
+      ok: false,
+      error: `"${theme.name}" is a system theme. Light and Dark are what "System" resolves to, so they cannot be deleted — but you can recolour them freely.`,
+    };
+  }
+  if (theme.is_default) {
+    return { ok: false, error: 'Make another theme the default before deleting this one.' };
+  }
+
+  const { error } = await supabase.from('site_themes').delete().eq('id', id);
+  if (error) {
+    console.error('Error deleting theme:', error);
+    return { ok: false, error: 'Failed to delete theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: `Theme "${theme.name}" deleted. Visitors using it fall back to the default.` };
+}
+
+export async function duplicateTheme(id: string): Promise<SettingsActionResult & { slug?: string }> {
+  const { supabase, error: authError } = await requireAdmin();
+  if (authError) return { ok: false, error: authError };
+
+  const { data: source, error: readError } = await supabase
+    .from('site_themes')
+    .select(THEME_COLUMNS)
+    .eq('id', id)
+    .single();
+
+  if (readError || !source) {
+    return { ok: false, error: 'Theme not found.' };
+  }
+
+  const theme = source as unknown as SiteTheme;
+  // Find a free slug: my-theme-copy, my-theme-copy-2, ...
+  const { data: existing } = await supabase.from('site_themes').select('slug');
+  const taken = new Set((existing ?? []).map((row) => row.slug));
+  let slug = `${theme.slug}-copy`.slice(0, 40);
+  let n = 2;
+  while (taken.has(slug)) {
+    slug = `${theme.slug}-copy-${n}`.slice(0, 40);
+    n += 1;
+  }
+
+  const { error } = await supabase.from('site_themes').insert({
+    slug,
+    name: `${theme.name} copy`,
+    description: theme.description,
+    icon: theme.icon,
+    color_scheme: theme.color_scheme,
+    tokens: sanitizeTokens(theme.tokens),
+    extra_css: theme.extra_css,
+    is_active: true,
+    is_default: false,
+    is_system: false,
+    sort_order: (theme.sort_order ?? 0) + 1,
+  });
+
+  if (error) {
+    console.error('Error duplicating theme:', error);
+    return { ok: false, error: 'Failed to duplicate theme.' };
+  }
+
+  revalidateThemes();
+  return { ok: true, message: `Created "${theme.name} copy".`, slug };
+}
+
+/** Exposed so the client form can render inputs for exactly what the server accepts. */
+export async function getThemeTokenKeys(): Promise<string[]> {
+  return THEME_TOKEN_KEYS;
+}