feat(admin): delete a whitelist entry, and stop hiding a broken mail setup

Three operator gaps, all found the same way — a person could not sign up and the
app showed nobody anything.

- DELETE /api/admin/invites/{id} with a delete control on both the pending
  requests and the previously-decided list. Deny keeps the row so the person
  cannot immediately re-ask; delete forgets the address. Refused with 409 while
  a User row exists for it, because is_allowed reads that row and removing it
  would revoke a live user's access with no other sign — the list ships
  has_account so the UI withholds the button instead of offering one that fails.
- Email is fail-soft by design, which had come to mean invisible. _send() now
  records an email_undelivered notification for every admin when a message is
  skipped or rejected, naming the message that was lost, throttled to one an
  hour. /api/me carries email_configured, driving a standing warning on
  Configuration → Email / SMTP and above the access-request list.
- The sign-in card's Create account / Forgot password / Didn't get the email
  views are history entries (useHistorySubview), so Back returns to the previous
  view instead of only moving the address bar.

Also: the per-test rate-limiter reset sweeps every loaded app.* module rather
than a hand-kept list of three — this change added a limiter outside it.

frontend/src/components/AdminUsers.tsx

@@ -7,6 +7,7 @@ import { api, type AdminUserRow, type Invite, type Me } from "../lib/api";
 import { notify } from "../lib/notifications";
 import { ADMIN_USERS_TAB_KEY } from "../lib/adminUsersTab";
 import Tooltip from "./Tooltip";
+import InlineNotice from "./InlineNotice";
 import { Section } from "./ui/form";
 import { LoadingState, StateMessage } from "./QueryState";
 import { useConfirm } from "./ConfirmProvider";
@@ -266,6 +267,7 @@ function AdminInvites() {
   const { t } = useTranslation();
   const qc = useQueryClient();
   const confirm = useConfirm();
+  const me = useMe();
   const invites = useQuery({ queryKey: qk.adminInvites(), queryFn: () => api.adminInvites() });
   const [newEmail, setNewEmail] = useState("");
   const refresh = () => {
@@ -297,6 +299,23 @@ function AdminInvites() {
     });
     if (ok) deny.mutate(i.id);
   };
+  const remove = useMutation({
+    mutationFn: (id: number) => api.deleteInvite(id),
+    onSuccess: (_d, _id) => {
+      refresh();
+      notify({ level: "success", message: t("settings.invites.deleted") });
+    },
+    onError: () => notify({ level: "error", message: t("settings.invites.deleteFailed") }),
+  });
+  const onDelete = async (i: { id: number; email: string }) => {
+    const ok = await confirm({
+      title: t("settings.invites.deleteTitle"),
+      message: t("settings.invites.deleteConfirm", { email: i.email }),
+      confirmLabel: t("settings.invites.delete"),
+      danger: true,
+    });
+    if (ok) remove.mutate(i.id);
+  };
   const add = useMutation({
     mutationFn: (email: string) => api.addInvite(email),
     onSuccess: (_d, email) => {
@@ -313,6 +332,9 @@ function AdminInvites() {
 
   return (
     <Section card title={t("settings.invites.title")}>
+      {!me.email_configured && (
+        <InlineNotice className="mb-3">{t("settings.invites.emailOff")}</InlineNotice>
+      )}
       {invites.isError && !invites.data ? (
         <StateMessage tone="error" onRetry={() => invites.refetch()}>
           {t("common.loadError")}
@@ -329,7 +351,8 @@ function AdminInvites() {
               inv={i}
               onApprove={() => approve.mutate({ id: i.id, email: i.email })}
               onDeny={() => onDeny(i)}
-              busy={approve.isPending || deny.isPending}
+              onDelete={() => onDelete(i)}
+              busy={approve.isPending || deny.isPending || remove.isPending}
             />
           ))}
         </div>
@@ -364,11 +387,31 @@ function AdminInvites() {
           </summary>
           <div className="mt-2 space-y-1 text-xs text-muted">
             {decided.map((i) => (
-              <div key={i.id} className="flex items-center justify-between gap-2">
-                <span className="truncate">{i.email}</span>
+              <div key={i.id} className="flex items-center gap-2">
+                <span className="truncate flex-1">{i.email}</span>
                 <span className={i.status === "approved" ? "text-accent" : "text-danger"}>
                   {i.status}
                 </span>
+                {/* An entry with an account behind it stays read-only: deleting it would revoke that
+                    user's access, since is_allowed reads this row. Delete the user instead. */}
+                {i.has_account ? (
+                  <Tooltip hint={t("settings.invites.deleteHasAccount")}>
+                    <span className="shrink-0 p-1 text-muted/50" aria-hidden>
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </span>
+                  </Tooltip>
+                ) : (
+                  <Tooltip hint={t("settings.invites.deleteHint")}>
+                    <button
+                      onClick={() => onDelete(i)}
+                      disabled={remove.isPending}
+                      className="shrink-0 p-1 rounded-md text-muted hover:text-danger disabled:opacity-50 transition"
+                      aria-label={t("settings.invites.deleteLabel", { email: i.email })}
+                    >
+                      <Trash2 className="w-3.5 h-3.5" />
+                    </button>
+                  </Tooltip>
+                )}
               </div>
             ))}
           </div>
@@ -506,11 +549,13 @@ function InviteRow({
   inv,
   onApprove,
   onDeny,
+  onDelete,
   busy,
 }: {
   inv: Invite;
   onApprove: () => void;
   onDeny: () => void;
+  onDelete: () => void;
   busy: boolean;
 }) {
   const { t } = useTranslation();
@@ -546,6 +591,20 @@ function InviteRow({
           <X className="w-4 h-4" />
         </button>
       </Tooltip>
+      {/* Deny keeps the row (so the person can't immediately re-ask); delete forgets the address
+          entirely. Withheld once an account exists — that would revoke a live user's access. */}
+      {!inv.has_account && (
+        <Tooltip hint={t("settings.invites.deleteHint")}>
+          <button
+            onClick={onDelete}
+            disabled={busy}
+            className="shrink-0 p-1.5 rounded-lg border border-border text-muted hover:text-danger disabled:opacity-50 transition"
+            aria-label={t("settings.invites.deleteLabel", { email: inv.email })}
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </Tooltip>
+      )}
     </div>
   );
 }

frontend/src/components/ConfigPanel.tsx

@@ -6,6 +6,8 @@ import { Plug, RotateCcw, Send } from "lucide-react";
 import { api, type ConfigItem, type PlexTestResult } from "../lib/api";
 import { notify } from "../lib/notifications";
 import Tooltip from "./Tooltip";
+import InlineNotice from "./InlineNotice";
+import { useMe } from "../lib/useMe";
 import Tabs, { usePersistedTab } from "./Tabs";
 import { LoadingState, StateMessage } from "./QueryState";
 import { PageToolbar } from "./PageShell";
@@ -35,6 +37,7 @@ const GROUP_ORDER = [
 export default function ConfigPanel() {
   const { t } = useTranslation();
   const qc = useQueryClient();
+  const me = useMe();
   const q = useQuery({ queryKey: qk.adminConfig(), queryFn: api.adminConfig });
   const data = q.data;
 
@@ -204,7 +207,11 @@ export default function ConfigPanel() {
             </div>
 
             {activeGroup === "email" && (
-              <div className="mt-3 pt-3 border-t border-border/60">
+              <div className="mt-3 pt-3 border-t border-border/60 space-y-3">
+                {/* The one place an operator can see that mail is off. Sending is fail-soft, so a
+                    half-filled config costs verification links, resets and access-request notices
+                    with no error anywhere — say so next to the fields that fix it. */}
+                {!me.email_configured && <InlineNotice>{t("config.emailOff")}</InlineNotice>}
                 <Tooltip hint={t("config.testEmailHint")}>
                   <button
                     onClick={() => testEmail.mutate()}

frontend/src/components/InlineNotice.tsx

@@ -0,0 +1,26 @@
+import type { ReactNode } from "react";
+import type { LucideIcon } from "lucide-react";
+import { AlertTriangle } from "lucide-react";
+
+// An in-flow warning that sits INSIDE a panel, next to the thing it is about — as opposed to
+// Banner, which is the full-bleed top-of-app bar (border-b, app chrome) and looks wrong nested in a
+// card. Same warn tokens as Banner's warning tone so the two read as one system.
+export default function InlineNotice({
+  children,
+  icon: Icon = AlertTriangle,
+  className = "",
+}: {
+  children: ReactNode;
+  icon?: LucideIcon;
+  className?: string;
+}) {
+  return (
+    <div
+      role="status"
+      className={`flex items-start gap-2 rounded-xl border border-warn/30 bg-warn/15 px-3 py-2 text-sm text-fg ${className}`}
+    >
+      <Icon className="w-4 h-4 shrink-0 mt-0.5 text-warn" aria-hidden />
+      <span className="min-w-0">{children}</span>
+    </div>
+  );
+}

frontend/src/components/NotificationsPanel.tsx

@@ -243,6 +243,7 @@ function NotificationRow({
   const isMaintenance = n.type === "maintenance" && typeof n.data?.count === "number";
   const isScheduler = n.type === "scheduler" && typeof n.data?.job_id === "string";
   const isDownloadDone = n.type === "download_done";
+  const isEmailUndelivered = n.type === "email_undelivered" && typeof n.data?.reason === "string";
   let title = n.title;
   let body = n.body;
   if (isMaintenance) {
@@ -258,6 +259,17 @@ function NotificationRow({
       job,
     });
     body = d.summary || n.body;
+  } else if (isEmailUndelivered) {
+    // Email is fail-soft: a drop leaves no error anywhere else, so this notice IS the trace. Name
+    // the message that was lost, since that is what tells the operator what their users didn't get.
+    const d = n.data as { reason: string; subject?: string };
+    title = t("inbox.emailUndelivered.title");
+    body = t(
+      d.reason === "not_configured"
+        ? "inbox.emailUndelivered.notConfigured"
+        : "inbox.emailUndelivered.sendFailed",
+      { subject: d.subject || n.body || "" },
+    );
   } else if (isDownloadDone) {
     // "Download ready" / "Edit ready" per the producer's kind, with the video's title as the body
     // (shipped in data.title). Same notification type; the copy differs so an edit isn't mislabelled.

frontend/src/components/Welcome.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useRef, useState } from "react";
+import { useHistorySubview, type SubviewUrl } from "../lib/history";
 import { useTranslation } from "react-i18next";
 import {
   ArrowRight,
@@ -27,7 +28,19 @@ import { inputCls } from "./ui/form";
 const EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
 const PASSWORD_MIN = 10;
 
-type Mode = "signin" | "register" | "forgot" | "reset" | "resend";
+export type Mode = "signin" | "register" | "forgot" | "reset" | "resend";
+
+// The card's sub-views are real history entries, so browser/mouse Back leaves one the way it leaves
+// any other page — they used to be plain state, and Back silently changed only the address bar.
+// "signin" is the root (no param) and "reset" is deliberately NOT mirrored: that view is only
+// reachable with the one-time token from the #reset fragment, so a bookmarked ?m=reset would open a
+// form that cannot submit.
+export const MODE_URL: SubviewUrl<Mode> = {
+  key: "m",
+  encode: (m: Mode) => (m === "signin" || m === "reset" ? null : m),
+  decode: (raw: string) =>
+    raw === "register" || raw === "forgot" || raw === "resend" ? (raw as Mode) : null,
+};
 
 // Per-mode i18n keys for the card title and the submit button. A flat map (vs nested ternaries)
 // keeps adding a new mode a one-line change and makes a missing key a compile error.
@@ -328,7 +341,10 @@ function AuthCard() {
       .catch(() => setVerify("invalid"));
   }, [verifyToken]);
 
-  const [mode, setMode] = useState<Mode>(resetToken ? "reset" : "signin");
+  const { view: mode, open: setMode } = useHistorySubview<Mode>(
+    resetToken ? "reset" : "signin",
+    MODE_URL,
+  );
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
   const [busy, setBusy] = useState(false);
@@ -344,6 +360,13 @@ function AuthCard() {
       .catch(() => {});
   }, []);
   const [done, setDone] = useState<string>(""); // success/info message replacing the form
+  // `done` and `error` belong to the view that produced them, and the render is `done ? msg : form`
+  // — without this, Back out of a submitted form would show the old success message under the
+  // previous view's title. Clearing on view change covers both Back/Forward and the mode links.
+  useEffect(() => {
+    setDone("");
+    setError("");
+  }, [mode]);
 
   // Explicit demo entry (replaces the old hidden probe): a labelled email field, still gated
   // by the demo whitelist server-side.

frontend/src/components/welcomeMode.dom.test.ts

@@ -0,0 +1,93 @@
+// @vitest-environment jsdom
+//
+// The login card's sub-views (Create an account / Forgot password / Didn't get the email) used to be
+// plain React state: clicking one changed nothing in history, so Back popped to whatever entry came
+// before the card and the address bar moved while the form on screen did not. They now ride
+// useHistorySubview, and this pins the wiring decisions that are specific to THIS card — which modes
+// are mirrored, and that Back walks the views. The hook's own mechanics live in
+// history.subview.dom.test.ts.
+import { describe, it, expect, beforeEach, afterEach } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+
+import { useHistorySubview } from "../lib/history";
+import { MODE_URL, type Mode } from "./Welcome";
+
+const render = (root: Mode = "signin") => renderHook(() => useHistorySubview<Mode>(root, MODE_URL));
+
+// jsdom's history.back() is asynchronous and does not rewind location, so — as in
+// history.subview.dom.test.ts — a Back is simulated by landing on the target entry and firing
+// popstate. `open()` pushing a REAL entry is asserted separately via history.length.
+const popTo = (search: string, state: unknown = null) =>
+  act(() => {
+    window.history.replaceState(state, "", search || "/");
+    window.dispatchEvent(new PopStateEvent("popstate", { state }));
+  });
+
+// jsdom keeps one history across a file; land on a clean root entry before each test.
+beforeEach(() => window.history.replaceState(null, "", "/"));
+afterEach(() => window.history.replaceState(null, "", "/"));
+
+describe("login card mode ↔ URL", () => {
+  it("mirrors the three link-reachable views and leaves sign-in as the bare root", () => {
+    expect(MODE_URL.encode("signin")).toBeNull();
+    expect(MODE_URL.encode("register")).toBe("register");
+    expect(MODE_URL.encode("forgot")).toBe("forgot");
+    expect(MODE_URL.encode("resend")).toBe("resend");
+  });
+
+  it("never mirrors the reset view", () => {
+    // Reset is only reachable with the one-time token from the #reset fragment. Mirroring it would
+    // hand out a bookmark that opens a password form with no token behind it.
+    expect(MODE_URL.encode("reset")).toBeNull();
+    expect(MODE_URL.decode("reset")).toBeNull();
+  });
+
+  it("decodes only real views, so a hand-typed ?m= falls back to sign-in", () => {
+    expect(MODE_URL.decode("register")).toBe("register");
+    expect(MODE_URL.decode("")).toBeNull();
+    expect(MODE_URL.decode("nonsense")).toBeNull();
+  });
+
+  it("opening a view pushes a real history entry, and landing back on the root restores sign-in", () => {
+    const { result } = render();
+    const entries = window.history.length;
+    expect(result.current.view).toBe("signin");
+
+    act(() => result.current.open("forgot"));
+
+    // The whole point: a Back has somewhere to go. Before this the click changed state only.
+    expect(window.history.length).toBe(entries + 1);
+    expect(result.current.view).toBe("forgot");
+    expect(new URLSearchParams(window.location.search).get("m")).toBe("forgot");
+
+    popTo("/");
+
+    expect(result.current.view).toBe("signin");
+  });
+
+  it("walks back one view at a time when the user hops between them", () => {
+    const { result } = render();
+    const entries = window.history.length;
+    act(() => result.current.open("register"));
+    act(() => result.current.open("forgot"));
+    expect(window.history.length).toBe(entries + 2); // one entry per view, not one for the lot
+
+    popTo("/?m=register", { _sub: "register" });
+    expect(result.current.view).toBe("register");
+
+    popTo("/");
+    expect(result.current.view).toBe("signin");
+  });
+
+  it("opens on the reset view when a reset token seeded it, without putting it in the URL", () => {
+    const { result } = render("reset");
+    expect(result.current.view).toBe("reset");
+    expect(window.location.search).toBe("");
+  });
+
+  it("restores a bookmarked view from the URL alone", () => {
+    window.history.replaceState(null, "", "/?m=resend");
+    const { result } = render();
+    expect(result.current.view).toBe("resend");
+  });
+});