feat(admin): user management — roles, suspend, delete + lifecycle emails

- New Users page tabs (Users & roles / Access requests / Demo) and a tab-ified Configuration
  page, both via a reusable Tabs component (persisted active tab).
- Admin can suspend/unsuspend (migration 0023 adds users.is_suspended) and delete accounts
  from the Users & roles tab, with guards (demo / self / last admin).
- Email notifications to the affected user: suspended (reactive, on a blocked sign-in),
  reinstated, role changed, and account deleted; the approval email now carries a clickable
  app link. The scheduled/manual demo reset also seeds sample channel subscriptions.
- Hide the 'unverified email' chip for Google accounts (Google attests the email).

frontend/src/components/Tabs.tsx

@@ -0,0 +1,62 @@
+import { useState } from "react";
+
+// Reusable horizontal pill tab-rail for in-page sub-navigation (Configuration, Users & roles…).
+// The active tab is persisted to localStorage so a reload (F5) keeps the user where they were,
+// per the app's "persist UI state across reload" convention.
+
+export interface TabDef {
+  id: string;
+  label: string;
+  badge?: number; // optional count pill (e.g. pending requests); hidden when 0/undefined
+}
+
+/** Persisted active-tab state. Validation is deferred to the caller (it clamps to a valid id at
+ * render) so this can be called before an async-loaded tab list is known, keeping hook order stable. */
+export function usePersistedTab(storageKey: string, fallback = ""): [string, (id: string) => void] {
+  const [tab, setTabState] = useState<string>(() => localStorage.getItem(storageKey) ?? fallback);
+  const setTab = (id: string) => {
+    setTabState(id);
+    localStorage.setItem(storageKey, id);
+  };
+  return [tab, setTab];
+}
+
+export default function Tabs({
+  tabs,
+  active,
+  onChange,
+}: {
+  tabs: TabDef[];
+  active: string;
+  onChange: (id: string) => void;
+}) {
+  return (
+    <div className="flex flex-wrap gap-1 mb-4">
+      {tabs.map((tb) => {
+        const on = tb.id === active;
+        return (
+          <button
+            key={tb.id}
+            onClick={() => onChange(tb.id)}
+            className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition ${
+              on
+                ? "bg-accent text-accent-fg font-medium shadow-md shadow-accent/20"
+                : "text-muted hover:text-fg hover:bg-card/60"
+            }`}
+          >
+            {tb.label}
+            {tb.badge != null && tb.badge > 0 && (
+              <span
+                className={`text-[11px] leading-none px-1.5 py-0.5 rounded-full ${
+                  on ? "bg-accent-fg/20" : "bg-accent/20 text-accent"
+                }`}
+              >
+                {tb.badge}
+              </span>
+            )}
+          </button>
+        );
+      })}
+    </div>
+  );
+}