@eifi1/ui-kit 0.45.0 → 0.46.0

package/src/notifications/notifications-labels.ts

@@ -30,8 +30,13 @@ export interface NotificationsLabels {
   typesTitle: string;
   /** The line under it. */
   typesDescription: string;
-  /** The e-mail switch under a type that offers mail. */
+  /** @deprecated 0.46 — the card's channels are columns now (`channelEmail`); removed in 0.47. Unused,
+   *  kept so an app's override still type-checks. */
   byEmail: string;
+  /** 0.46 (§10.2): the channel columns' headings, and each switch's name. */
+  channelApp: string;
+  channelPush: string;
+  channelEmail: string;
   /** Under every e-mail switch while the account's address is unverified (decision 16):
    *  no notification mail goes to an unverified address. */
   emailUnverified: string;
@@ -47,8 +52,12 @@ export interface NotificationsLabels {
   /* ── Quiet hours ────────────────────────────────────────────────────── */
   quietTitle: string;
   /** The line under the title; `inbox`: the app keeps an inbox, which a held push still
-   *  reaches. */
-  quietDescription: (inbox: boolean) => string;
+   *  reaches; `held` (0.46, §10.4): the app queues a held push and sends it when the
+   *  window ends, instead of dropping it. */
+  quietDescription: (inbox: boolean, held?: boolean) => string;
+  /** 0.46 (§10.3, automatic only): the card names the account's zone, read-only, given
+   *  the zone as `zoneName` writes it ("Europe / Zurich"); it follows the device last used. */
+  quietZone: (zone: string) => string;
   /** The start time's label. */
   quietFrom: string;
   /** The end time's label. */
@@ -57,12 +66,13 @@ export interface NotificationsLabels {
   quietIncomplete: string;
   /** The zone picker's label. */
   timeZone: string;
-  /** Given the device's zone, as the picker names it, when it differs from the one the
-   *  server applies. */
+  /** @deprecated 0.46 — the zone is automatic (§10.3), the card offers no device zone; removed in 0.47.
+   *  Unused, kept so an app's override still type-checks. */
   deviceZone: (zone: string) => string;
-  /** The button that takes the device's zone. */
+  /** @deprecated 0.46 — the zone is automatic (§10.3), nothing to take; removed in 0.47. Unused, kept
+   *  so an app's override still type-checks. */
   useDeviceZone: string;
-  /** The zone picker's region headings. */
+  /** The zone's region headings, in the picker and in a zone's name ("Europe / Zurich"). */
   regions: NotificationRegionLabels;
 
   /* ── This device ────────────────────────────────────────────────────── */
@@ -123,6 +133,32 @@ export interface NotificationsLabels {
   removeItem: (device: string) => string;
   /** The question the row asks before it removes. */
   removePrompt: string;
+  /** 0.46 (§10.2): the disclosure on a device's row listing the types with push on. */
+  deviceTypes: string;
+  /** The line inside it. */
+  deviceTypesDescription: string;
+  /** No type has push on for the account. */
+  deviceTypesEmpty: string;
+
+  /* ── The inbox and the bell (0.46, §10.1) ───────────────────────────── */
+  /** The inbox's heading (keksdose's "Inbox"). */
+  inboxTitle: string;
+  inboxLoading: string;
+  /** Nothing in the inbox. */
+  inboxEmpty: string;
+  markAllRead: string;
+  /** The header's clear button, and the confirm's answer. */
+  clearAll: string;
+  /** The question asked before the inbox is cleared. */
+  clearPrompt: string;
+  /** The row that loads the next page. */
+  showMore: string;
+  /** The bell's name. */
+  bellLabel: string;
+  /** Read after the bell's name, given the unread count (≥ 1). */
+  bellUnread: (count: number) => string;
+  /** The bell panel's link to the app's inbox. */
+  allNotifications: string;
 
   /* ── The unsubscribe page ───────────────────────────────────────────── */
   unsubscribeTitle: string;
@@ -150,6 +186,9 @@ export const DEFAULT_NOTIFICATIONS_LABELS: NotificationsLabels = {
   typesTitle: "Notify me about",
   typesDescription: "Choose what you hear about, and how.",
   byEmail: "By e-mail",
+  channelApp: "In the app",
+  channelPush: "Push",
+  channelEmail: "E-mail",
   emailUnverified: "Confirm your address to receive these.",
   digestCadence: "Frequency",
   digestWeekly: "Weekly",
@@ -158,10 +197,15 @@ export const DEFAULT_NOTIFICATIONS_LABELS: NotificationsLabels = {
   typesEmpty: "There are no notifications for this account.",
 
   quietTitle: "Quiet hours",
-  quietDescription: (inbox) =>
-    inbox
-      ? "No push notifications during this window. They still reach your inbox."
-      : "No push notifications during this window.",
+  quietDescription: (inbox, held) =>
+    held
+      ? inbox
+        ? "Push notifications wait during this window and arrive when it ends. They reach your inbox at once."
+        : "Push notifications wait during this window and arrive when it ends."
+      : inbox
+        ? "No push notifications during this window. They still reach your inbox."
+        : "No push notifications during this window.",
+  quietZone: (zone) => `In your time zone (${zone}), which follows the device you last used.`,
   quietFrom: "From",
   quietUntil: "Until",
   quietIncomplete: "Set both a start and an end time. Quiet hours take effect once both are set.",
@@ -221,6 +265,20 @@ export const DEFAULT_NOTIFICATIONS_LABELS: NotificationsLabels = {
   remove: "Remove",
   removeItem: (device) => `Remove ${device}`,
   removePrompt: "Stop sending notifications to this device?",
+  deviceTypes: "Types on this device",
+  deviceTypesDescription: "Turn a type off to mute it on this device only.",
+  deviceTypesEmpty: "No type has push notifications turned on.",
+
+  inboxTitle: "Inbox",
+  inboxLoading: "Loading notifications…",
+  inboxEmpty: "You’re all caught up.",
+  markAllRead: "Mark all as read",
+  clearAll: "Clear all",
+  clearPrompt: "Delete all notifications from your inbox?",
+  showMore: "Show more",
+  bellLabel: "Notifications",
+  bellUnread: (count) => `${count} unread`,
+  allNotifications: "All notifications",
 
   unsubscribeTitle: "E-mail notifications",
   unsubscribeAbout: (type) => `You get e-mails about: ${type}.`,

package/src/notifications/push-devices-setting.tsx

@@ -9,14 +9,16 @@ import { formatDate } from "../lib/format";
 import { Button } from "../components/button";
 import { Card } from "../components/card";
 import { Chip } from "../components/chip";
+import { Disclosure } from "../components/disclosure";
 import { Skeleton } from "../components/skeleton";
+import { Switch } from "../components/switch";
 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 } from "./notification-parts";
+import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts";
 import type { NotificationsLabels } from "./notifications-labels";
-import type { PushDeviceItem } from "./notification-types";
+import type { NotificationTypeEntry, NotificationTypesValue, PushDeviceItem } from "./notification-types";
 import { notifyPushSubscriptionChanged } from "./use-push-device";
 
 /**
@@ -70,6 +72,17 @@ export interface PushDevicesSettingProps<Id extends string | number = string>
   locale?: string;
   /** The app's own words for a failed removal, or `undefined` for the kit's `failed`. */
   describeError?: (error: unknown) => ReactNode | undefined;
+  /**
+   * 0.46 (§10.2): "Types on this device" on each row — a switch per type whose account
+   * `push` is on, all on until the device mutes one. Save the device's WHOLE list:
+   * `PATCH /notifications/devices/{id} {"muted_types": [...]}`; refresh `devices` once it
+   * resolves. Left out, no row has the disclosure.
+   */
+  onMutedTypesChange?: (id: Id, mutedTypes: string[]) => Promise<unknown> | void;
+  /** The app's words for its types (the types card's `types`), for the disclosure. */
+  types?: readonly NotificationTypeEntry[];
+  /** The settings `GET`'s `types` (the types card's `value`): which types have push on. */
+  typeSwitches?: NotificationTypesValue;
   labels?: LabelOverride<NotificationsLabels>;
 }
 
@@ -99,7 +112,13 @@ async function unsubscribeThisBrowser(): Promise<void> {
  * `PUSH_SUBSCRIPTION_CHANGED` (keksdose `push-devices-card.tsx:83-97`), so the push card
  * stops saying "on".
  *
- * Under a write lock Remove is a `commit` control exempt from billing.
+ * **"Types on this device"** (0.46, §10.2, with `onMutedTypesChange`): a disclosure under
+ * each row with a switch per type the account gets by push; turning one off mutes it on
+ * that device only — a device can mute types, never add them. Each flip saves the
+ * device's whole `muted_types` list.
+ *
+ * Under a write lock Remove and the type switches are `commit` controls exempt from
+ * billing.
  */
 export function PushDevicesSetting<Id extends string | number = string>({
   devices,
@@ -109,11 +128,15 @@ export function PushDevicesSetting<Id extends string | number = string>({
   formatDate: formatDateProp,
   locale: localeProp,
   describeError,
+  onMutedTypesChange,
+  types,
+  typeSwitches,
   labels: labelsProp,
   className,
   ...rest
 }: PushDevicesSettingProps<Id>) {
   const labels = useNotificationsLabels(labelsProp);
+  const mutedOverlay = useWriteOverlay<string[]>(devices);
   const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
   const locale = useKitLocale(localeProp);
   const [asking, setAsking] = useState<Id | null>(null);
@@ -146,6 +169,65 @@ export function PushDevicesSetting<Id extends string | number = string>({
       });
   };
 
+  // The types a device can mute: those the account gets by push, in the app's order.
+  const pushTypes = (types ?? []).filter((entry) => typeSwitches?.[entry.id]?.push === true);
+  const mutedOf = (device: PushDeviceItem<Id>): string[] =>
+    mutedOverlay.get(String(device.id)) ??
+    // Ids the registry dropped (no longer in the settings answer) are ignored.
+    (device.muted_types ?? []).filter((id) => !typeSwitches || id in typeSwitches);
+  const setMuted = (device: PushDeviceItem<Id>, id: string, on: boolean) => {
+    const key = String(device.id);
+    if (!onMutedTypesChange || mutedOverlay.pending(key)) return;
+    const current = mutedOf(device);
+    const next = on ? current.filter((muted) => muted !== id) : [...current.filter((muted) => muted !== id), id];
+    setFailure(null);
+    mutedOverlay.set(key, next);
+    settle(() => onMutedTypesChange(device.id, next)).then(
+      () => {
+        if (mounted.current) mutedOverlay.settle(key, true);
+      },
+      (error: unknown) => {
+        if (!mounted.current) return;
+        mutedOverlay.settle(key, false);
+        setFailure(describeFailure(describeError?.(error), labels.failed));
+      },
+    );
+  };
+  const typesOf = (device: PushDeviceItem<Id>, name: string): ReactNode => {
+    if (!onMutedTypesChange) return null;
+    const muted = mutedOf(device);
+    return (
+      <Disclosure
+        variant="bare"
+        title={labels.deviceTypes}
+        // Every row has one: the name says whose (it starts with the visible words).
+        triggerProps={{ "aria-label": `${labels.deviceTypes}: ${name}` }}
+        className="text-sm"
+        data-device-types=""
+      >
+        <div className="space-y-2 pt-1 ps-6">
+          {pushTypes.length === 0 ? (
+            <p className={CARD_DESCRIPTION_CLASS}>{labels.deviceTypesEmpty}</p>
+          ) : (
+            <>
+              <p className={CARD_DESCRIPTION_CLASS}>{labels.deviceTypesDescription}</p>
+              {pushTypes.map((entry) => (
+                <Switch
+                  key={entry.id}
+                  size="sm"
+                  label={entry.label}
+                  checked={!muted.includes(entry.id)}
+                  commit={COMMIT_EXCEPT_BILLING}
+                  onCheckedChange={(on) => setMuted(device, entry.id, on)}
+                />
+              ))}
+            </>
+          )}
+        </div>
+      </Disclosure>
+    );
+  };
+
   let body: ReactNode;
   if (loading || devices === undefined) {
     body = <Skeleton lines={2} label={labels.devicesLoading} />;
@@ -170,6 +252,7 @@ export function PushDevicesSetting<Id extends string | number = string>({
             onConfirm={() => remove(device)}
             labels={labels}
             cancelLabel={common.cancel}
+            types={typesOf(device, describeUserAgent(device.user_agent) ?? labels.unknownDevice)}
           />
         ))}
       </ul>
@@ -202,6 +285,7 @@ function DeviceRow<Id extends string | number>({
   onConfirm,
   labels,
   cancelLabel,
+  types,
 }: {
   device: PushDeviceItem<Id>;
   name: string;
@@ -216,6 +300,8 @@ function DeviceRow<Id extends string | number>({
   onConfirm: () => void;
   labels: NotificationsLabels;
   cancelLabel: string;
+  /** "Types on this device", under the row (0.46). */
+  types: ReactNode;
 }) {
   const cancelRef = useRef<HTMLButtonElement>(null);
   const removeRef = useRef<HTMLButtonElement>(null);
@@ -268,39 +354,42 @@ function DeviceRow<Id extends string | number>({
   }
 
   return (
-    <li {...row} className="flex items-center gap-3 py-2">
-      <MonitorSmartphone aria-hidden className="size-4 shrink-0 text-muted" />
-      <div className="min-w-0 flex-1">
-        <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-          <span className="min-w-0 break-words text-sm font-medium">{name}</span>
-          {current && (
-            <Chip size="sm" tone="brand">
-              {labels.thisDevice}
-            </Chip>
-          )}
+    <li {...row} className="space-y-1 py-2">
+      <div className="flex items-center gap-3">
+        <MonitorSmartphone aria-hidden className="size-4 shrink-0 text-muted" />
+        <div className="min-w-0 flex-1">
+          <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
+            <span className="min-w-0 break-words text-sm font-medium">{name}</span>
+            {current && (
+              <Chip size="sm" tone="brand">
+                {labels.thisDevice}
+              </Chip>
+            )}
+          </div>
+          <div className={CARD_DESCRIPTION_CLASS}>
+            {labels.added(added)}
+            {" · "}
+            {lastDelivery ? labels.lastDelivery(lastDelivery) : labels.noDelivery}
+          </div>
+          {device.failure_count > 0 && <div className="text-xs text-warning">{labels.failures(device.failure_count)}</div>}
         </div>
-        <div className={CARD_DESCRIPTION_CLASS}>
-          {labels.added(added)}
-          {" · "}
-          {lastDelivery ? labels.lastDelivery(lastDelivery) : labels.noDelivery}
-        </div>
-        {device.failure_count > 0 && <div className="text-xs text-warning">{labels.failures(device.failure_count)}</div>}
+        <Button
+          ref={removeRef}
+          type="button"
+          size="sm"
+          variant="ghost"
+          commit={COMMIT_EXCEPT_BILLING}
+          disabled={blocked}
+          aria-label={labels.removeItem(name)}
+          onClick={() => {
+            setReturning(false);
+            onAsk();
+          }}
+        >
+          {labels.remove}
+        </Button>
       </div>
-      <Button
-        ref={removeRef}
-        type="button"
-        size="sm"
-        variant="ghost"
-        commit={COMMIT_EXCEPT_BILLING}
-        disabled={blocked}
-        aria-label={labels.removeItem(name)}
-        onClick={() => {
-          setReturning(false);
-          onAsk();
-        }}
-      >
-        {labels.remove}
-      </Button>
+      {types}
     </li>
   );
 }

package/src/notifications/push-worker.ts

@@ -0,0 +1,160 @@
+/**
+ * The service worker's half of Web Push that the kit can own (0.46,
+ * docs/notifications-harmonization.md NT:1028): re-registering a subscription the
+ * browser ROTATED. A push service may replace a subscription (expiry, a key rotation, a
+ * browser update) and fires `pushsubscriptionchange` in the worker; until 0.46 the
+ * server kept sending to the old endpoint, got 410, deleted the device, and the person
+ * had to turn push on again without knowing why.
+ *
+ * {@link handlePushSubscriptionChange} listens for the event in the app's worker and
+ * calls the app's `replace` — `POST /notifications/devices/replace` (server-kit
+ * `PushReplaceIn`): the OLD endpoint and the old subscription's `auth` secret, which only
+ * this browser and the server hold, prove the device without a session (a worker has no
+ * `Authorization` header to send), and the server moves that row to the new endpoint in
+ * place — same account, same device. Open pages are told with a
+ * {@link PUSH_SUBSCRIPTION_CHANGED} message, and every mounted `usePushDevice` re-reads.
+ *
+ * Dependency-free (no React), so an app's worker bundle takes only this file — through
+ * the worker-safe subpath `@eifi1/ui-kit/push-worker` (0.46, §10.6 rule 5), not the main
+ * barrel, which reaches React and the components:
+ *
+ *     // sw.ts
+ *     import { handlePushSubscriptionChange } from "@eifi1/ui-kit/push-worker";
+ *     handlePushSubscriptionChange(self, {
+ *       pushKey: () => fetch("/api/notifications/push-key").then((r) => r.json()).then((b) => b.key),
+ *       replace: (body) => fetch("/api/notifications/devices/replace", {
+ *         method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body),
+ *       }).then((r) => { if (!r.ok) throw new Error(String(r.status)); }),
+ *     });
+ */
+
+/** What `register` sends: `POST /notifications/devices` (§3.5). */
+export interface PushSubscriptionInput {
+  endpoint: string;
+  keys: { p256dh: string; auth: string };
+  user_agent: string | null;
+}
+
+/** What `replace` sends: `POST /notifications/devices/replace` (server-kit
+ *  `PushReplaceIn`). The endpoint never goes in a URL. */
+export interface PushReplaceInput {
+  /** The rotated-away subscription's endpoint. */
+  old_endpoint: string;
+  /** Its `keys.auth` as registered — the proof that this browser held it. */
+  old_auth: string;
+  /** The browser's new subscription. */
+  subscription: PushSubscriptionInput;
+}
+
+/** The message a worker posts to its pages after a rotation, and the window event the
+ *  hooks re-read on — the same name. */
+export const PUSH_SUBSCRIPTION_CHANGED = "eifi1:push-subscription-changed";
+
+/** A VAPID public key (base64url) as the bytes `PushManager.subscribe` wants. */
+export function keyBytes(key: string): Uint8Array<ArrayBuffer> {
+  const base64 = key.replace(/-/g, "+").replace(/_/g, "/") + "=".repeat((4 - (key.length % 4)) % 4);
+  const raw = atob(base64);
+  const bytes = new Uint8Array(new ArrayBuffer(raw.length));
+  for (let i = 0; i < raw.length; i++) bytes[i] = raw.charCodeAt(i);
+  return bytes;
+}
+
+/** A subscription's register body, or `null` when the browser handed back an incomplete
+ *  one. */
+export function pushSubscriptionInput(subscription: PushSubscription): PushSubscriptionInput | null {
+  const json = subscription.toJSON();
+  const p256dh = json.keys?.p256dh;
+  const auth = json.keys?.auth;
+  if (!json.endpoint || !p256dh || !auth) return null;
+  return {
+    endpoint: json.endpoint,
+    keys: { p256dh, auth },
+    user_agent: (typeof navigator !== "undefined" && navigator.userAgent) || null,
+  };
+}
+
+/** The `pushsubscriptionchange` event as the worker receives it (not in TypeScript's
+ *  DOM lib). Either subscription may be missing: Chrome often hands neither. */
+export interface PushSubscriptionChangeEventLike {
+  readonly oldSubscription?: PushSubscription | null;
+  readonly newSubscription?: PushSubscription | null;
+  waitUntil?: (promise: Promise<unknown>) => void;
+}
+
+export interface PushSubscriptionChangeOptions {
+  /** `GET /notifications/push-key` → its `key` — asked only when the browser handed no
+   *  new subscription and the old one does not carry its key. `""`: push is off. */
+  pushKey: () => Promise<string>;
+  /** `POST /notifications/devices/replace`. A rejection is the outcome `"failed"`. */
+  replace: (input: PushReplaceInput) => Promise<unknown>;
+}
+
+/**
+ * What a rotation came to: `"replaced"` — the server moved the device; `"no_previous"` —
+ * the browser named no old subscription (or one without its keys), so there is nothing
+ * to prove the device with and the page shows push as off; `"push_off"` — the server has
+ * no key; `"incomplete"` — the new subscription has no keys; `"failed"` — `replace` (or
+ * the browser's subscribe) threw.
+ */
+export type PushResubscribeOutcome = "replaced" | "no_previous" | "push_off" | "incomplete" | "failed";
+
+/**
+ * Re-register after `pushsubscriptionchange`: the browser's new subscription — or, when
+ * it handed none, the one it holds now, or a fresh one under the old subscription's key
+ * (else `pushKey()`) — sent to `replace` with the old endpoint and its `auth`.
+ */
+export async function resubscribeAfterChange(
+  event: PushSubscriptionChangeEventLike,
+  pushManager: PushManager,
+  options: PushSubscriptionChangeOptions,
+): Promise<PushResubscribeOutcome> {
+  const old = event.oldSubscription;
+  const oldAuth = old?.toJSON().keys?.auth;
+  if (!old?.endpoint || !oldAuth) return "no_previous";
+  try {
+    let next = event.newSubscription ?? (await pushManager.getSubscription());
+    if (!next || next.endpoint === old.endpoint) {
+      const kept = old.options?.applicationServerKey;
+      const key = kept ? null : await options.pushKey();
+      if (key === "") return "push_off";
+      next = await pushManager.subscribe({
+        userVisibleOnly: true,
+        applicationServerKey: kept ?? keyBytes(key ?? ""),
+      });
+    }
+    const subscription = pushSubscriptionInput(next);
+    if (!subscription) return "incomplete";
+    await options.replace({ old_endpoint: old.endpoint, old_auth: oldAuth, subscription });
+    return "replaced";
+  } catch {
+    return "failed";
+  }
+}
+
+/** The parts of a `ServiceWorkerGlobalScope` this needs. */
+export interface PushWorkerScope {
+  addEventListener: (type: "pushsubscriptionchange", listener: (event: PushSubscriptionChangeEventLike) => void) => void;
+  registration: { pushManager: PushManager };
+  clients?: { matchAll: (options?: { type?: "window"; includeUncontrolled?: boolean }) => Promise<readonly { postMessage: (message: unknown) => void }[]> };
+}
+
+/**
+ * Listen for `pushsubscriptionchange` in the app's service worker (`self`) and
+ * re-register through {@link resubscribeAfterChange}, holding the worker alive until it
+ * is done (`waitUntil`). Then every open page gets `{ type: PUSH_SUBSCRIPTION_CHANGED,
+ * outcome }`; `usePushDevice` re-reads on it. `onOutcome` is for the app's own logging.
+ */
+export function handlePushSubscriptionChange(
+  scope: PushWorkerScope,
+  options: PushSubscriptionChangeOptions & { onOutcome?: (outcome: PushResubscribeOutcome) => void },
+): void {
+  scope.addEventListener("pushsubscriptionchange", (event) => {
+    const done = resubscribeAfterChange(event, scope.registration.pushManager, options).then(async (outcome) => {
+      options.onOutcome?.(outcome);
+      const pages = (await scope.clients?.matchAll({ type: "window", includeUncontrolled: true })) ?? [];
+      for (const page of pages) page.postMessage({ type: PUSH_SUBSCRIPTION_CHANGED, outcome });
+      return outcome;
+    });
+    event.waitUntil?.(done);
+  });
+}