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

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>
+  );
+}