@eifi1/ui-kit 0.35.0 → 0.36.0

package/src/i18n/shared-labels.ts

@@ -37,6 +37,8 @@ export const DEFAULT_COMMON_LABELS: CommonLabels = {
   fieldValue: (field, value) => `${field}: ${value}`,
   dismiss: "Dismiss",
   opensInNewTab: "opens in a new tab",
+  aboutField: (field) => `About ${field}`,
+  help: "Help",
 };
 
 export const DEFAULT_DATE_PICKER_LABELS: DatePickerLabels = {

package/src/index.ts

@@ -856,6 +856,13 @@ export type { PlanLimitToastOptions } from "./billing/plan-limit-toast";
 // come with `./shell` above (also `@eifi1/ui-kit/shell`).
 export { DEFAULT_SETTINGS_LABELS, useSettingsLabels } from "./settings/settings-labels";
 export type { SettingsLabels, SettingsGroupLabels, SettingsCoreGroup } from "./settings/settings-labels";
+// 0.36.0 (§11): "Reset this device's settings" — the registry the kit's stores, provider
+// and shell join on their own and an app adds its own device keys to, and the card, the
+// appearance group's last.
+export { registerDeviceSetting, deviceSettings, resetDeviceSettings } from "./lib/device-settings";
+export type { DeviceSetting, DeviceSettingKind } from "./lib/device-settings";
+export { DeviceResetSetting, DEVICE_RESET_ANCHOR, DEFAULT_DEVICE_RESET_LABELS } from "./settings/device-reset-setting";
+export type { DeviceResetSettingProps, DeviceResetLabels } from "./settings/device-reset-setting";
 // The language follows the account (§6.2); since 0.32 so do the text size and the
 // contrast (useAccountAppearance below, docs/text-size-harmonization.md §6).
 export { useAccountLanguage, resolveAccountLanguage, matchOfferedLanguage } from "./settings/use-account-language";
@@ -877,6 +884,49 @@ export type {
   AccountAppearance,
 } from "./settings/use-account-appearance";
 
+// ── notifications ────────────────────────────────────────────────────────────
+// 0.36.0 (docs/notifications-harmonization.md §4.2): the notification cards — the types
+// the server answers (the kit keeps no list of its own), quiet hours with the zone picker,
+// this device's push on its hook, the device list — and the signed-out unsubscribe page.
+// Each card takes the app's request functions; the kit makes no request itself.
+export { DEFAULT_NOTIFICATIONS_LABELS } from "./notifications/notifications-labels";
+export type { NotificationsLabels, NotificationRegionLabels } from "./notifications/notifications-labels";
+export type {
+  DigestCadence,
+  NotificationSwitches,
+  NotificationTypesValue,
+  NotificationTypeEntry,
+  NotificationTypeGroup,
+  NotificationSettingsPatch,
+  PushDeviceItem,
+} from "./notifications/notification-types";
+export { NotificationTypesSetting } from "./notifications/notification-types-setting";
+export type { NotificationTypesSettingProps } from "./notifications/notification-types-setting";
+export { QuietHoursSetting } from "./notifications/quiet-hours-setting";
+export type { QuietHoursSettingProps } from "./notifications/quiet-hours-setting";
+export { TimeZoneSelect, timeZoneOptions, deviceTimeZone } from "./notifications/time-zone-select";
+export type { TimeZoneSelectProps } from "./notifications/time-zone-select";
+export {
+  usePushDevice,
+  PUSH_SUBSCRIPTION_CHANGED,
+  notifyPushSubscriptionChanged,
+  pushSupported,
+  PushDeviceError,
+} from "./notifications/use-push-device";
+export type {
+  PushDevice,
+  UsePushDeviceOptions,
+  PushSubscriptionInput,
+  PushPermission,
+  PushDeviceErrorCode,
+} from "./notifications/use-push-device";
+export { PushDeviceSetting } from "./notifications/push-device-setting";
+export type { PushDeviceSettingProps, PushDeviceAction } from "./notifications/push-device-setting";
+export { PushDevicesSetting, describeUserAgent } from "./notifications/push-devices-setting";
+export type { PushDevicesSettingProps } from "./notifications/push-devices-setting";
+export { UnsubscribePanel, unsubscribeTokenType } from "./notifications/unsubscribe-panel";
+export type { UnsubscribePanelProps } from "./notifications/unsubscribe-panel";
+
 // ── landing ──────────────────────────────────────────────────────────────────
 // 0.31.0 (docs/landing-demo-harmonization.md): the public landing page. Its router-aware parts — the header and the resume (RootEntry,
 // RedirectIfAuthed, the last-visited page) — come with `./shell` above.

package/src/lib/device-settings.ts

@@ -0,0 +1,146 @@
+import { readSessionStored, readStored, removeStored, storedKeys, writeSessionStored } from "./safe-storage";
+
+/**
+ * What this device keeps of how it shows the app, and the one action that puts it all
+ * back: "Reset this device's settings" (docs/settings-harmonization.md §11).
+ *
+ * A registry, because no one part knows every key. The kit's own stores and components
+ * join it themselves — the theme, palette, text-size and contrast stores when they are
+ * created, `UiKitProvider` (the prefix its tables keep their views under) and `AppShell`
+ * (the sidebar's folded state) while they are mounted — and an app adds its own keys
+ * beside the store or accessor that owns each (keksdose's date format, kastlan's
+ * language, Kurvenschmiede's curve channels). {@link resetDeviceSettings} then clears
+ * exactly what joined, and nothing else: the sign-in, the session, what waits to be sent
+ * and the account never join (§11.2 decision 2), so a key nobody registered survives.
+ *
+ * No React and no router: a store joins at module scope, when it is created. Here in
+ * `src/lib` beside `safe-storage.ts`, which the stores and the shell already import, so
+ * `src/theme` and `src/shell` do not import `src/settings`. One module instance, one
+ * module-level list.
+ */
+
+/** What a reset of this device's settings clears (§11.2 decision 1): how the app looks
+ *  here, and how its tables and panels were left. An app's own list may add a third kind
+ *  of its own for what never goes (Kurvenschmiede's "never"). */
+export type DeviceSettingKind = "appearance" | "view";
+
+export interface DeviceSetting {
+  /** The storage key; with `prefix`, every key that starts with it. */
+  key: string;
+  /** `true`: `key` is a prefix (a table's views, keksdose's display currency per budget).
+   *  It matches by `startsWith`: `budget.displayCurrency.` does not take the legacy
+   *  `budget.displayCurrency`. */
+  prefix?: boolean;
+  /** Default `"local"`. */
+  storage?: "local" | "session";
+  kind: DeviceSettingKind;
+  /**
+   * Puts the live value back to its default through the store's own setter, the one its
+   * control calls, so whatever that setter also does still happens — never
+   * `setState(getInitialState())`, which skips it. REQUIRED for anything held in memory:
+   * every persisted zustand store (removing its key alone, it writes its value back on its
+   * next change), a mounted component's state. With `reset` the key is left to it (a
+   * persisted store writes its default itself); without, the key, or every key under the
+   * prefix, is removed — for what is read where it is next used (a table at its mount, a
+   * plain accessor).
+   */
+  reset?: () => void;
+}
+
+/** Whoever joined one key, in join order; the last one's entry is the key's entry. */
+type Holders = { entry: DeviceSetting }[];
+
+/** One slot per key and storage area, in the order each was first joined. */
+const slots = new Map<string, Holders>();
+
+const areaOf = (entry: DeviceSetting): "local" | "session" => (entry.storage === "session" ? "session" : "local");
+const slotOf = (entry: DeviceSetting) => `${areaOf(entry)}:${entry.key}`;
+
+/**
+ * Join the registry; answers the leave function. A store joins once, at creation, and
+ * never leaves; a component joins while mounted and leaves in its effect's cleanup.
+ *
+ * **One entry per key** (and storage area): joining a key again replaces its entry and
+ * adds a holder, and a leave drops its holder — the entry goes with the last one, and
+ * until then the latest remaining holder's entry is the key's. So a module evaluated twice
+ * (a test, a hot reload) does not reset twice, and two nested providers with one prefix
+ * keep their entry until the outer one unmounts.
+ */
+export function registerDeviceSetting(entry: DeviceSetting): () => void {
+  const slot = slotOf(entry);
+  const holder = { entry: { ...entry } };
+  const holders = slots.get(slot);
+  if (holders) holders.push(holder);
+  else slots.set(slot, [holder]);
+  let left = false;
+  return () => {
+    if (left) return;
+    left = true;
+    // A holder that has not left is in its slot: only its own leave takes it out, and a
+    // slot goes only once it is empty.
+    const current = slots.get(slot) as Holders;
+    current.splice(current.indexOf(holder), 1);
+    if (current.length === 0) slots.delete(slot);
+  };
+}
+
+/** Every entry, in join order: for an app's own test (Kurvenschmiede holds it to its
+ *  `STORAGE` list) or its privacy page. */
+export function deviceSettings(): readonly DeviceSetting[] {
+  return [...slots.values()].map((holders) => holders[holders.length - 1].entry);
+}
+
+/** Is this a development build? `import.meta.env` is a Vite injection, absent under Node. */
+function devBuild(): boolean {
+  return Boolean(import.meta.env?.DEV);
+}
+
+/** The keys an entry covers now: a prefix's keys found under it, else its own key. */
+function keysOf(entry: DeviceSetting): string[] {
+  return entry.prefix ? storedKeys(entry.key, areaOf(entry)) : [entry.key];
+}
+
+/** Remove what `entry` covers; answers the keys that were there. */
+function removeEntry(entry: DeviceSetting): string[] {
+  const session = areaOf(entry) === "session";
+  const present = keysOf(entry).filter((key) => (session ? readSessionStored(key) : readStored(key)) !== null);
+  for (const key of present) {
+    if (session) writeSessionStored(key, null);
+    else removeStored(key);
+  }
+  return present;
+}
+
+/**
+ * Reset every entry, at once; answers the keys it reset or removed, prefixes expanded.
+ *
+ * Synchronous, in two passes: first every `reset`, in join order, so each live store puts
+ * its value back (and writes its default); then the keys of the entries without one. A
+ * `reset` that throws is caught (`console.error` in development), its key is removed
+ * instead, and the rest still run. It never reloads, navigates or sends a request, and
+ * never touches a key nobody registered. Where the browser refuses storage, the live
+ * values still reset and nothing throws.
+ *
+ * The answer: an entry with a `reset` lists its key (a prefix, the keys found under it);
+ * an entry without lists the keys it removed, those that were there.
+ */
+export function resetDeviceSettings(): string[] {
+  const keys: string[] = [];
+  const remove: DeviceSetting[] = [];
+  for (const entry of deviceSettings()) {
+    if (!entry.reset) {
+      remove.push(entry);
+      continue;
+    }
+    const covered = keysOf(entry);
+    try {
+      entry.reset();
+      keys.push(...covered);
+    } catch (error) {
+      if (devBuild()) console.error(`resetDeviceSettings: the reset of "${entry.key}" threw; its key is removed instead.`, error);
+      remove.push(entry);
+    }
+  }
+  for (const entry of remove) keys.push(...removeEntry(entry));
+  return [...new Set(keys)];
+}

package/src/lib/plain-text.ts

@@ -0,0 +1,22 @@
+import { isValidElement } from "react";
+import type { ReactNode } from "react";
+
+/**
+ * The text of a label node: a string or number as is, an element by its children,
+ * recursively, whitespace collapsed. A `<Tooltip label="…">Spend</Tooltip>` label yields
+ * "Spend" — the text the reader sees, not the bubble's. `undefined` when there is no text
+ * to find (an icon), so the caller falls back to a name of its own.
+ *
+ * Package-private — not re-exported from the barrel. StatTile names its sparkline by it;
+ * a field names its `help` "?" by it ("About <label>", round 0.36).
+ */
+export function plainText(node: ReactNode): string | undefined {
+  const walk = (n: ReactNode): string => {
+    if (typeof n === "string" || typeof n === "number") return String(n);
+    if (Array.isArray(n)) return n.map(walk).join("");
+    if (isValidElement<{ children?: ReactNode }>(n)) return walk(n.props.children);
+    return "";
+  };
+  const text = walk(node).replace(/\s+/g, " ").trim();
+  return text === "" ? undefined : text;
+}

package/src/lib/safe-storage.ts

@@ -59,3 +59,19 @@ export function writeSessionStored(key: string, value: string | null): void {
     value === null ? storage.removeItem(key) : storage.setItem(key, value),
   );
 }
+
+/**
+ * Every key in `area` that starts with `prefix`, or `[]` where storage refuses — for the
+ * reset of this device's settings, which removes a table's views by their prefix
+ * (docs/settings-harmonization.md §11.4). Package-private, like {@link removeStored}.
+ */
+export function storedKeys(prefix: string, area: "local" | "session" = "local"): string[] {
+  return guarded(area === "session" ? "sessionStorage" : "localStorage", [], (storage) => {
+    const keys: string[] = [];
+    for (let i = 0; i < storage.length; i++) {
+      const key = storage.key(i);
+      if (key !== null && key.startsWith(prefix)) keys.push(key);
+    }
+    return keys;
+  });
+}

package/src/notifications/notification-parts.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import type { ReactNode } from "react";
+
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { hasContent } from "../lib/presence";
+import { AlertBanner } from "../components/alert-banner";
+import { DEFAULT_NOTIFICATIONS_LABELS } from "./notifications-labels";
+import type { NotificationsLabels } from "./notifications-labels";
+
+/**
+ * What the notification cards share: their words, the failure line under a card, and
+ * the overlay a card shows while its write runs.
+ *
+ * @internal Not part of the barrel; the cards are.
+ */
+
+/** The `notifications` namespace: English, then the provider, then the card's prop. */
+export function useNotificationsLabels(prop?: LabelOverride<NotificationsLabels>): NotificationsLabels {
+  return useKitLabels("notifications", DEFAULT_NOTIFICATIONS_LABELS, prop);
+}
+
+/** The app's words for a failure, else `fallback`. */
+export function describeFailure(own: ReactNode | undefined, fallback: ReactNode): ReactNode {
+  return hasContent(own) ? own : fallback;
+}
+
+/** A failure, said under the card's controls — nothing toasts (§4.2). */
+export function FailureLine({ children }: { children: ReactNode }) {
+  if (!hasContent(children)) return null;
+  return (
+    <AlertBanner tone="danger" size="sm" role="alert">
+      {children}
+    </AlertBanner>
+  );
+}
+
+/** What {@link useWriteOverlay} answers. */
+export interface WriteOverlay<V> {
+  has: (key: string) => boolean;
+  get: (key: string) => V | undefined;
+  pending: (key: string) => boolean;
+  set: (key: string, value: V) => void;
+  settle: (key: string, ok: boolean) => void;
+}
+
+/**
+ * Values a card shows while its write runs, over what the server last answered.
+ *
+ * `set(key, value)` shows `value` at once; `settle(key, ok)` drops it again when the
+ * write failed (the server's value comes back) and keeps it when it succeeded, until the
+ * app hands the card a new `source` — the PATCH's answer, or a refetch — which clears
+ * every settled entry, so a card whose app does not update its query on success does not
+ * flick back to the old value in between. `pending(key)` says whether a write for `key`
+ * is still running.
+ *
+ * The reset on a new `source` is React's "adjust state while rendering" pattern, not an
+ * effect: the overlay is gone in the same render that shows the new value.
+ */
+export function useWriteOverlay<V>(source: unknown): WriteOverlay<V> {
+  const [entries, setEntries] = useState<ReadonlyMap<string, { value: V; running: boolean }>>(new Map());
+  const [seen, setSeen] = useState(source);
+  if (seen !== source) {
+    setSeen(source);
+    const kept = new Map([...entries].filter(([, entry]) => entry.running));
+    if (kept.size !== entries.size) setEntries(kept);
+  }
+  return {
+    has: (key: string) => entries.has(key),
+    get: (key: string) => entries.get(key)?.value,
+    pending: (key: string) => entries.get(key)?.running === true,
+    set: (key: string, value: V) =>
+      setEntries((current) => new Map(current).set(key, { value, running: true })),
+    settle: (key: string, ok: boolean) =>
+      setEntries((current) => {
+        const entry = current.get(key);
+        if (!entry) return current;
+        const next = new Map(current);
+        if (ok) next.set(key, { value: entry.value, running: false });
+        else next.delete(key);
+        return next;
+      }),
+  };
+}

package/src/notifications/notification-types-setting.tsx

@@ -0,0 +1,309 @@
+import { useId, useState } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import type { LabelOverride } from "../i18n/kit-labels";
+import { cn } from "../lib/cn";
+import { hasContent } from "../lib/presence";
+import { Card } from "../components/card";
+import { Select } from "../components/select";
+import { Skeleton } from "../components/skeleton";
+import { Switch } from "../components/switch";
+import { SectionLabel } from "../components/text";
+import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes";
+import { SettingsCardTitle } from "../settings/settings-heading";
+import { settle, useMounted } from "../account/account-parts";
+import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts";
+import type { WriteOverlay } from "./notification-parts";
+import type { NotificationsLabels } from "./notifications-labels";
+import type {
+  DigestCadence,
+  NotificationSettingsPatch,
+  NotificationSwitches,
+  NotificationTypeEntry,
+  NotificationTypeGroup,
+  NotificationTypesValue,
+} from "./notification-types";
+
+/** Is this a development build? Dead code in a consumer's production bundle; on under
+ *  vitest, where a type the card cannot draw is a bug a test should fail on (as
+ *  `SettingsSection`'s catalogue check). */
+function devChecks(): boolean {
+  return Boolean(import.meta.env?.DEV);
+}
+
+export interface NotificationTypesSettingProps<Id extends string = string>
+  extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
+  /** The app's words for its types, in its order. Where an app types its ids. */
+  types: readonly NotificationTypeEntry<Id>[];
+  /** The `GET`'s `types` (§3.2); `undefined` while the first load runs. */
+  value: NotificationTypesValue | undefined;
+  /** The settings are loading. */
+  loading?: boolean;
+  /**
+   * Save one change — `PATCH /notifications/settings` with this body: one switch per
+   * call (`{types: {digest: {app: true}}}`), or `{digest_cadence}`. The switch shows its
+   * new state while the call runs and goes back if it rejects; hand the card the
+   * PATCH's answer (or refetch) when it resolves.
+   */
+  onChange: (patch: NotificationSettingsPatch<Id>) => Promise<unknown> | void;
+  /** Headings over the types, in the app's words (keksdose's three). Without them, one
+   *  list in the order of `types`. In development every type the server answered must
+   *  be in one. */
+  groups?: readonly NotificationTypeGroup<Id>[];
+  /** The digest type and the account's cadence: a cadence `Select` under that type
+   *  while it is on. */
+  digest?: { type: Id; cadence: DigestCadence };
+  /** Under a type while it is on — keksdose's low-balance threshold field. */
+  renderExtra?: (id: Id) => ReactNode;
+  /** The account's address is unverified: every e-mail switch says
+   *  `labels.emailUnverified` under it (decision 16). */
+  emailUnverified?: boolean;
+  /** Nothing can be changed (the switches stay readable). */
+  disabled?: boolean;
+  /** The app's own words for a failed save, or `undefined` for the kit's `failed`. */
+  describeError?: (error: unknown) => ReactNode | undefined;
+  labels?: LabelOverride<NotificationsLabels>;
+}
+
+/** One drawn type: the app's words and the server's switches. */
+interface Row<Id extends string> {
+  entry: NotificationTypeEntry<Id>;
+  switches: NotificationSwitches;
+}
+
+/** A switch's key in the write overlay. */
+const switchKey = (id: string, channel: "app" | "email") => `${id}.${channel}`;
+const CADENCE_KEY = "digest_cadence";
+
+/**
+ * What the person hears about, and how (docs/notifications-harmonization.md §2.1–§2.3,
+ * §4.2): one row per type the SERVER answered, the app's words on it, a switch for "in
+ * the app" and "By e-mail" under it where the type offers mail. Where the app has no
+ * "in the app" channel (Kurvenschmiede), the e-mail switch is the row's own, with the
+ * type's label.
+ *
+ * **The server's list is the only list.** The card keeps no defaults and no list of
+ * types: it draws what `value` holds, in the order of `groups`, else of `types`. A type
+ * the app names that the server did not answer is not drawn (kastlan's tenant receives
+ * neither of its types). In development a type the server answered with no entry in
+ * `types`, or in no group when `groups` is given, throws — keksdose's compile-time
+ * `_EVERY_TYPE_IS_GROUPED`, now at run time, since the list is the server's.
+ *
+ * **Each flip saves at once**, one switch per call; the switch shows its new state while
+ * the call runs and goes back if it rejects, with the failure said under the card. The
+ * digest's cadence and the app's extra field (`renderExtra`) show under their type while
+ * it is on.
+ *
+ * Under a write lock the switches are `commit` controls exempt from billing: a lapsed
+ * plan never keeps a person from turning notifications off (billing §12.13).
+ */
+export function NotificationTypesSetting<Id extends string = string>({
+  types,
+  value,
+  loading,
+  onChange,
+  groups,
+  digest,
+  renderExtra,
+  emailUnverified = false,
+  disabled = false,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}: NotificationTypesSettingProps<Id>) {
+  const labels = useNotificationsLabels(labelsProp);
+  const overlay = useWriteOverlay<boolean>(value);
+  const cadenceOverlay = useWriteOverlay<DigestCadence>(digest?.cadence);
+  const [failure, setFailure] = useState<ReactNode>(null);
+  const mounted = useMounted();
+  const groupId = useId();
+
+  const answered = value ? Object.keys(value) : [];
+  const entries = new Map(types.map((entry) => [entry.id as string, entry]));
+  if (value && devChecks()) {
+    const unnamed = answered.filter((id) => !entries.has(id));
+    if (unnamed.length) {
+      throw new Error(
+        `NotificationTypesSetting: the server answered ${unnamed.map((id) => `"${id}"`).join(", ")} with no entry in \`types\` — give every type the server can send its words.`,
+      );
+    }
+    if (groups) {
+      const grouped = new Set<string>(groups.flatMap((group) => group.types));
+      const loose = answered.filter((id) => !grouped.has(id));
+      if (loose.length) {
+        throw new Error(
+          `NotificationTypesSetting: ${loose.map((id) => `"${id}"`).join(", ")} is in no group — a type in no group is drawn nowhere, and could not be turned off.`,
+        );
+      }
+    }
+  }
+
+  const rowOf = (id: Id): Row<Id> | null => {
+    const switches = value?.[id];
+    const entry = entries.get(id);
+    if (!switches || !entry || (switches.app === null && switches.email === null)) return null;
+    return { entry, switches };
+  };
+  const rowsOf = (ids: readonly Id[]) => ids.map(rowOf).filter((row): row is Row<Id> => row !== null);
+
+  const shown = (id: string, channel: "app" | "email", server: boolean): boolean => {
+    const key = switchKey(id, channel);
+    return overlay.get(key) ?? server;
+  };
+  /** The row's own switch: `app`, or `email` where the app has no `app` channel. */
+  const rowOn = ({ entry, switches }: Row<Id>) =>
+    switches.app !== null
+      ? shown(entry.id, "app", switches.app)
+      : shown(entry.id, "email", switches.email === true);
+
+  const save = <V,>(key: string, patch: NotificationSettingsPatch<Id>, which: WriteOverlay<V>, next: V) => {
+    if (which.pending(key)) return;
+    setFailure(null);
+    which.set(key, next);
+    settle(() => onChange(patch)).then(
+      () => {
+        if (mounted.current) which.settle(key, true);
+      },
+      (error: unknown) => {
+        if (!mounted.current) return;
+        which.settle(key, false);
+        setFailure(describeFailure(describeError?.(error), labels.failed));
+      },
+    );
+  };
+
+  const flip = (id: Id, channel: "app" | "email", on: boolean) =>
+    save(
+      switchKey(id, channel),
+      { types: { [id]: { [channel]: on } } as NotificationSettingsPatch<Id>["types"] },
+      overlay,
+      on,
+    );
+
+  const cadence = cadenceOverlay.get(CADENCE_KEY) ?? digest?.cadence;
+
+  const unverifiedLine = emailUnverified ? (
+    <span className="block" data-email-unverified="">
+      {labels.emailUnverified}
+    </span>
+  ) : null;
+
+  const renderRow = (row: Row<Id>) => {
+    const { entry, switches } = row;
+    const on = rowOn(row);
+    const emailOnly = switches.app === null;
+    const both = !emailOnly && switches.email !== null;
+    const cadenceSelect =
+      on && digest?.type === entry.id && cadence ? (
+        <Select
+          label={labels.digestCadence}
+          value={cadence}
+          disabled={disabled}
+          commit={COMMIT_EXCEPT_BILLING}
+          onChange={(event) => {
+            const next = event.target.value as DigestCadence;
+            if (next !== cadence) save(CADENCE_KEY, { digest_cadence: next }, cadenceOverlay, next);
+          }}
+          className="max-w-44"
+        >
+          <option value="weekly">{labels.digestWeekly}</option>
+          <option value="monthly">{labels.digestMonthly}</option>
+        </Select>
+      ) : null;
+    const extra = on ? renderExtra?.(entry.id) : null;
+    const description =
+      emailOnly && unverifiedLine ? (
+        <>
+          {entry.description !== undefined && <span className="block">{entry.description}</span>}
+          {unverifiedLine}
+        </>
+      ) : (
+        entry.description
+      );
+    return (
+      <div
+        key={entry.id}
+        data-notification-type={entry.id}
+        // A row with two switches is a group named by its type, so "By e-mail" is heard
+        // with the type it belongs to.
+        role={both ? "group" : undefined}
+        aria-label={both ? entry.label : undefined}
+        className="space-y-2"
+      >
+        <Switch
+          label={entry.label}
+          description={description}
+          checked={on}
+          disabled={disabled}
+          commit={COMMIT_EXCEPT_BILLING}
+          onCheckedChange={(next) => flip(entry.id, emailOnly ? "email" : "app", next)}
+        />
+        {both && (
+          <div className="ps-4">
+            <Switch
+              size="sm"
+              label={labels.byEmail}
+              description={unverifiedLine ?? undefined}
+              checked={shown(entry.id, "email", switches.email === true)}
+              disabled={disabled}
+              commit={COMMIT_EXCEPT_BILLING}
+              onCheckedChange={(next) => flip(entry.id, "email", next)}
+            />
+          </div>
+        )}
+        {(cadenceSelect || hasContent(extra)) && (
+          <div className="ps-4 space-y-2">
+            {cadenceSelect}
+            {extra}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  let body: ReactNode;
+  if (loading || value === undefined) {
+    body = <Skeleton lines={3} label={labels.typesLoading} />;
+  } else if (groups) {
+    const drawn = groups
+      .map((group) => ({ group, rows: rowsOf(group.types) }))
+      .filter(({ rows }) => rows.length > 0);
+    body =
+      drawn.length === 0 ? (
+        <p className={CARD_DESCRIPTION_CLASS}>{labels.typesEmpty}</p>
+      ) : (
+        drawn.map(({ group, rows }) => {
+          const headingId = `${groupId}-${group.id}`;
+          return (
+            <div key={group.id} role="group" aria-labelledby={headingId} className="space-y-3">
+              <SectionLabel as="div" size="xs" id={headingId}>
+                {group.label}
+              </SectionLabel>
+              {rows.map(renderRow)}
+            </div>
+          );
+        })
+      );
+  } else {
+    const rows = rowsOf(types.map((entry) => entry.id));
+    body =
+      rows.length === 0 ? (
+        <p className={CARD_DESCRIPTION_CLASS}>{labels.typesEmpty}</p>
+      ) : (
+        <div className="space-y-3">{rows.map(renderRow)}</div>
+      );
+  }
+
+  return (
+    <Card {...rest} className={cn("p-4 space-y-3", className)}>
+      <div>
+        <SettingsCardTitle>{labels.typesTitle}</SettingsCardTitle>
+        <div className={CARD_DESCRIPTION_CLASS}>{labels.typesDescription}</div>
+      </div>
+      {body}
+      <FailureLine>{failure}</FailureLine>
+    </Card>
+  );
+}