Make the Generator's server-name lists editable, add themes, import names from Skatteverket

Name lists now live in settings instead of the web bundle. Admins edit them under
Settings -> Names (add/remove names, create/rename/delete lists, reset a built-in
list). Names are folded to hostname-safe form (a-z, 0-9, hyphen) and validated on
the server; saves are audited.

Adds Swedish boy names, Pixar, Norse mythology and Astrid Lindgren lists, and
lengthens the Swedish girl and Disney lists. "Mixed" is now every list with each
name counted once.

Admins can preview and import the most common Swedish names from Skatteverket's
open "Namn pa nyfodda" data (girls or boys, latest 1-5 full years); nothing is
stored until the editor is saved. The old comment that credited SCB statistics is
gone: SCB stopped publishing name statistics after 2023.

Privacy page, README and ROLES updated for the new outbound call and page.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

web/src/pages/Generator.tsx

@@ -1,21 +1,26 @@
-import { useEffect, useState } from "react";
-import { api } from "../api/client";
+import { useEffect, useMemo, useState } from "react";
+import { Link } from "react-router-dom";
+import { api, type CurrentUser, type NameTheme } from "../api/client";
 import CopyButton from "../components/CopyButton";
+import { readableError } from "../utils/errors";
 import {
   generateServerName,
   generateUsername,
   generatePassword,
   passwordEntropyBits,
   passwordStrengthLabel,
-  type ServerNameTheme,
   type UsernameOptions,
   type PasswordOptions,
 } from "../utils/generators";
 
-export default function Generator() {
+const MIXED = "mixed";
+
+export default function Generator({ user }: { user: CurrentUser }) {
   // ─── Server name ───────────────────────────────────────────────────────
   const [existingServerNames, setExistingServerNames] = useState<string[]>([]);
-  const [theme, setTheme] = useState<ServerNameTheme>("mixed");
+  const [themes, setThemes] = useState<NameTheme[] | null>(null);
+  const [themesError, setThemesError] = useState<string | null>(null);
+  const [theme, setTheme] = useState<string>(MIXED);
   const [serverName, setServerName] = useState("");
 
   useEffect(() => {
@@ -27,8 +32,22 @@ export default function Generator() {
       });
   }, []);
 
+  useEffect(() => {
+    api.generator
+      .themes()
+      .then((res) => setThemes(res.themes))
+      .catch((err) => setThemesError(readableError(err)));
+  }, []);
+
+  // "Mixed" is every list together, each name once even if it appears in several.
+  const pool = useMemo(() => {
+    if (!themes) return [];
+    if (theme === MIXED) return [...new Set(themes.flatMap((t) => t.names))];
+    return themes.find((t) => t.id === theme)?.names ?? [];
+  }, [themes, theme]);
+
   function rollServerName() {
-    setServerName(generateServerName(theme, existingServerNames));
+    setServerName(generateServerName(pool, existingServerNames));
   }
 
   // ─── Username ────────────────────────────────────────────────────────
@@ -64,7 +83,8 @@ export default function Generator() {
     <>
       <h2 className="page-title mb-3">Generator</h2>
       <div className="text-secondary mb-3">
-        Everything here is generated locally in your browser — nothing is sent to or stored on the server.
+        Usernames and passwords are generated locally in your browser — nothing is sent to or stored on the server. Server names are
+        picked in your browser too, from name lists the server hands out.
       </div>
 
       <div className="row row-cards">
@@ -74,20 +94,33 @@ export default function Generator() {
               <h3 className="card-title">Server name</h3>
             </div>
             <div className="card-body">
-              <p className="text-secondary">Picks from Swedish girl names and Disney characters, avoiding names already in use.</p>
+              <p className="text-secondary">
+                Picks from a list of names, avoiding names already in use.
+                {user.role === "admin" && (
+                  <>
+                    {" "}
+                    <Link to="/settings/names">Edit the lists</Link>.
+                  </>
+                )}
+              </p>
+              {themesError && <div className="alert alert-danger py-2">{themesError}</div>}
               <label className="form-label">Theme</label>
-              <select className="form-select mb-3" value={theme} onChange={(e) => setTheme(e.target.value as ServerNameTheme)}>
-                <option value="mixed">Mixed</option>
-                <option value="swedish">Swedish girl names</option>
-                <option value="disney">Disney characters</option>
+              <select className="form-select mb-1" value={theme} onChange={(e) => setTheme(e.target.value)} disabled={!themes}>
+                <option value={MIXED}>Mixed — all lists</option>
+                {(themes ?? []).map((t) => (
+                  <option key={t.id} value={t.id}>
+                    {t.label} ({t.names.length})
+                  </option>
+                ))}
               </select>
+              <div className="form-hint mb-3">{themes ? `${pool.length} name${pool.length === 1 ? "" : "s"} to pick from.` : "Loading the lists…"}</div>
               <div className="input-group">
                 <input type="text" className="form-control" readOnly value={serverName} placeholder="Click Generate…" />
                 {serverName && <CopyButton text={serverName} />}
               </div>
             </div>
             <div className="card-footer">
-              <button className="btn btn-primary" onClick={rollServerName}>
+              <button className="btn btn-primary" onClick={rollServerName} disabled={pool.length === 0}>
                 Generate
               </button>
             </div>