Add named custom theme presets (save/load/rename/delete) in admin theme editor

src/actions/admin-theme.ts

@@ -8,6 +8,12 @@ import { siteSettings } from "@/lib/services/site-settings";
 import { logStaffActivity } from "@/lib/services/staff-activity";
 import { FONTS, PRESETS, THEME_COLOR_KEYS } from "@/lib/theme-presets";
 import { presetSettings, settingKey } from "@/lib/theme-settings";
+import {
+  deleteCustomThemeStore,
+  getCustomTheme,
+  snapshotCurrentTheme,
+  upsertCustomTheme,
+} from "@/lib/theme-custom-store";
 
 // Only hex/keyword colour values are accepted (matches ThemeVars' sanitiser).
 const COLOR_RE = /^[#a-zA-Z0-9(),.\s%-]+$/;
@@ -92,3 +98,74 @@ export async function applyPreset(formData: FormData): Promise<void> {
   }
   redirect(`/admin/theme?preset=${encodeURIComponent(name)}`);
 }
+
+export async function saveCustomTheme(formData: FormData): Promise<void> {
+  const staff = await requireStaff();
+  const name = String(formData.get("name") ?? "").normalize("NFC").trim();
+  if (!name) redirect("/admin/theme");
+  const snapshot = await snapshotCurrentTheme();
+  try {
+    await upsertCustomTheme(name, snapshot);
+    await logStaffActivity({
+      staffId: staff.id,
+      action: "theme_preset",
+      description: `Saved custom theme "${name}"`,
+    });
+    revalidatePath("/admin/theme");
+  } catch {
+    // ignore
+  }
+  redirect("/admin/theme?savedTheme=1");
+}
+
+export async function applyCustomTheme(formData: FormData): Promise<void> {
+  const staff = await requireStaff();
+  const id = String(formData.get("id") ?? "").normalize("NFC").trim();
+  if (!id) redirect("/admin/theme");
+  const theme = await getCustomTheme(id);
+  if (!theme) redirect("/admin/theme");
+  try {
+    for (const [key, value] of Object.entries(theme.settings)) {
+      if (value) await writeSetting(key, value);
+    }
+    await writeSetting("theme_preset", theme.name);
+    siteSettings.reload();
+    await logStaffActivity({
+      staffId: staff.id,
+      action: "theme_preset",
+      description: `Applied custom theme "${theme.name}"`,
+    });
+    revalidatePath("/", "layout");
+  } catch {
+    // ignore
+  }
+  redirect(`/admin/theme?theme=${encodeURIComponent(theme.name)}`);
+}
+
+export async function renameCustomTheme(formData: FormData): Promise<void> {
+  await requireStaff();
+  const id = String(formData.get("id") ?? "").normalize("NFC").trim();
+  const name = String(formData.get("name") ?? "").normalize("NFC").trim();
+  if (!id || !name) redirect("/admin/theme");
+  const snapshot = await snapshotCurrentTheme();
+  try {
+    await upsertCustomTheme(name, snapshot, id);
+    revalidatePath("/admin/theme");
+  } catch {
+    // ignore
+  }
+  redirect("/admin/theme?renamed=1");
+}
+
+export async function deleteCustomTheme(formData: FormData): Promise<void> {
+  await requireStaff();
+  const id = String(formData.get("id") ?? "").normalize("NFC").trim();
+  if (!id) redirect("/admin/theme");
+  try {
+    await deleteCustomThemeStore(id);
+    revalidatePath("/admin/theme");
+  } catch {
+    // ignore
+  }
+  redirect("/admin/theme?deletedTheme=1");
+}

src/components/admin/theme/rename-theme.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useState } from "react";
+import { renameCustomTheme } from "@/actions/admin-theme";
+
+export function RenameTheme({ id, name }: { id: string; name: string }) {
+  const [editing, setEditing] = useState(false);
+  const [val, setVal] = useState(name);
+
+  if (!editing) {
+    return (
+      <button
+        type="button"
+        onClick={() => setEditing(true)}
+        className="text-xs font-medium text-[var(--admin-text-muted)] hover:text-[var(--admin-accent)] no-underline"
+      >
+        Rename
+      </button>
+    );
+  }
+
+  return (
+    <form action={renameCustomTheme} className="flex items-center gap-1">
+      <input type="hidden" name="id" value={id} />
+      <input
+        name="name"
+        value={val}
+        onChange={(e) => setVal(e.target.value)}
+        className="w-28 px-1.5 py-0.5 rounded-md border bg-[var(--admin-canvas)] text-[var(--admin-text)] text-xs"
+        style={{ borderColor: "var(--admin-border)" }}
+        autoFocus
+      />
+      <button type="submit" className="text-xs font-semibold text-[var(--admin-accent)]">
+        OK
+      </button>
+      <button type="button" onClick={() => setEditing(false)} className="text-xs text-[var(--admin-text-muted)]">
+        ✕
+      </button>
+    </form>
+  );
+}