@eifi1/ui-kit 0.53.0 → 0.55.0

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

@@ -1,374 +0,0 @@
-import { useRef, useState } from "react";
-import type { ComponentPropsWithRef, ReactNode } from "react";
-import { MonitorSmartphone } from "lucide-react";
-
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels";
-import { cn } from "../lib/cn";
-import { useDayFormatter } from "../lib/day-format";
-import { toDate } from "../lib/format";
-import { Button } from "../components/button";
-import { Card } from "../components/card";
-import { Chip } from "../components/chip";
-import { Disclosure } from "../components/disclosure";
-import { InlineConfirm } from "../components/inline-confirm";
-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 "../hooks/use-mounted";
-import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts";
-import type { NotificationsLabels } from "./notifications-labels";
-import type { NotificationTypeEntry, NotificationTypesValue, PushDeviceItem } from "./notification-types";
-import { notifyPushSubscriptionChanged } from "./use-push-device";
-
-/**
- * A name for a stored user agent: "Chrome · Android", "Firefox · Windows" (keksdose
- * `push-devices-card.tsx:19-45`). Best effort: an agent it does not recognise comes back
- * as it is, cut at 60 characters so a token soup cannot blow up the row; `null` for none.
- * The order matters — Edge and Opera say "Chrome" too, and Chrome says "Safari".
- */
-export function describeUserAgent(ua: string | null): string | null {
-  if (!ua) return null;
-  const browser = /edg(?:e|a|ios)?\//i.test(ua)
-    ? "Edge"
-    : /opr\/|opera/i.test(ua)
-      ? "Opera"
-      : /firefox|fxios/i.test(ua)
-        ? "Firefox"
-        : /chrome|crios/i.test(ua)
-          ? "Chrome"
-          : /safari/i.test(ua)
-            ? "Safari"
-            : null;
-  const os = /windows/i.test(ua)
-    ? "Windows"
-    : /android/i.test(ua)
-      ? "Android"
-      : /iphone|ipad|ipod/i.test(ua)
-        ? "iOS"
-        : /mac os x|macintosh/i.test(ua)
-          ? "macOS"
-          : /linux/i.test(ua)
-            ? "Linux"
-            : null;
-  if (!browser && !os) return ua.length > 60 ? `${ua.slice(0, 60)}…` : ua;
-  return [browser, os].filter(Boolean).join(" · ");
-}
-
-export interface PushDevicesSettingProps<Id extends string | number = string> extends Omit<
-  ComponentPropsWithRef<"div">,
-  "children"
-> {
-  /** `GET /notifications/devices`, oldest first; `undefined` while the first load runs. */
-  devices: readonly PushDeviceItem<Id>[] | undefined;
-  loading?: boolean;
-  /** This browser's endpoint (`usePushDevice().currentEndpoint`): its row says "This
-   *  device", and removing it also unsubscribes the browser. */
-  currentEndpoint?: string | null;
-  /** `DELETE /notifications/devices/{id}`. Asked first; refresh `devices` once it
-   *  resolves. */
-  onRemove: (id: Id) => Promise<unknown> | void;
-  /** The dates' text. Default: the provider's `formatDate` (the app's date preference),
-   *  else a medium date in the provider's locale and `timeZone`. */
-  formatDate?: (date: Date) => string;
-  /** Overrides the provider's locale for the default format. */
-  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>;
-}
-
-/** Tear down this browser's subscription after its server row went: otherwise the
- *  browser still holds one, and the push card would say "on" for a device nothing can
- *  reach. Best effort — the row is already gone. */
-async function unsubscribeThisBrowser(): Promise<void> {
-  try {
-    const registration = await navigator.serviceWorker?.getRegistration();
-    const subscription = await registration?.pushManager.getSubscription();
-    await subscription?.unsubscribe();
-  } catch {
-    /* the server row is gone either way */
-  }
-  notifyPushSubscriptionChanged();
-}
-
-/**
- * Every device that gets push for the account (docs/notifications-harmonization.md §3.5,
- * §4.2) — keksdose's devices card: the browser and system read from the stored user
- * agent, "This device" on this browser's row, when it was added and last delivered to,
- * the failures in a row in the warning tone, and "Remove".
- *
- * **Remove asks first, in the row**, as `PasskeysSetting` does: the card must work in an
- * app without a `ConfirmProvider`, and the question belongs beside the device it names.
- * Focus moves to Cancel. **Removing this device** also unsubscribes the browser and fires
- * `PUSH_SUBSCRIPTION_CHANGED` (keksdose `push-devices-card.tsx:83-97`), so the push card
- * stops saying "on".
- *
- * **"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,
-  loading,
-  currentEndpoint,
-  onRemove,
-  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);
-  // The prop, else the provider's `formatDate` (the app's date preference), else the kit's
-  // in the provider's locale and `timeZone` (refactor audit 2026-10-30, DUP-2).
-  const day = useDayFormatter(formatDateProp, localeProp);
-  const [asking, setAsking] = useState<Id | null>(null);
-  const [busyId, setBusyId] = useState<Id | null>(null);
-  const [failure, setFailure] = useState<ReactNode>(null);
-  const mounted = useMounted();
-
-  const dateText = (iso: string): string => {
-    const date = toDate(iso);
-    return date ? day(date) : iso;
-  };
-
-  const remove = (device: PushDeviceItem<Id>) => {
-    if (busyId !== null) return;
-    setBusyId(device.id);
-    setFailure(null);
-    const isThis = Boolean(currentEndpoint) && device.endpoint === currentEndpoint;
-    settle(() => onRemove(device.id))
-      .then(async () => {
-        if (isThis) await unsubscribeThisBrowser();
-        if (!mounted.current) return;
-        setBusyId(null);
-        setAsking(null);
-      })
-      .catch((error: unknown) => {
-        if (!mounted.current) return;
-        setBusyId(null);
-        setFailure(describeFailure(describeError?.(error), labels.failed));
-      });
-  };
-
-  // 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} />;
-  } else if (devices.length === 0) {
-    body = <p className={CARD_DESCRIPTION_CLASS}>{labels.devicesEmpty}</p>;
-  } else {
-    body = (
-      <ul aria-label={labels.devicesTitle} className="divide-y divide-subtle">
-        {devices.map((device) => (
-          <DeviceRow
-            key={device.id}
-            device={device}
-            name={describeUserAgent(device.user_agent) ?? labels.unknownDevice}
-            current={Boolean(currentEndpoint) && device.endpoint === currentEndpoint}
-            added={dateText(device.created_at)}
-            lastDelivery={device.last_success_at ? dateText(device.last_success_at) : null}
-            asking={asking === device.id}
-            busy={busyId === device.id}
-            blocked={busyId !== null && busyId !== device.id}
-            onAsk={() => setAsking(device.id)}
-            onCancel={() => setAsking(null)}
-            onConfirm={() => remove(device)}
-            labels={labels}
-            cancelLabel={common.cancel}
-            types={typesOf(device, describeUserAgent(device.user_agent) ?? labels.unknownDevice)}
-          />
-        ))}
-      </ul>
-    );
-  }
-
-  return (
-    <Card {...rest} className={cn("p-4 space-y-3", className)}>
-      <div>
-        <SettingsCardTitle>{labels.devicesTitle}</SettingsCardTitle>
-        <div className={CARD_DESCRIPTION_CLASS}>{labels.devicesDescription}</div>
-      </div>
-      {body}
-      <FailureLine>{failure}</FailureLine>
-    </Card>
-  );
-}
-
-function DeviceRow<Id extends string | number>({
-  device,
-  name,
-  current,
-  added,
-  lastDelivery,
-  asking,
-  busy,
-  blocked,
-  onAsk,
-  onCancel,
-  onConfirm,
-  labels,
-  cancelLabel,
-  types,
-}: {
-  device: PushDeviceItem<Id>;
-  name: string;
-  current: boolean;
-  added: string;
-  lastDelivery: string | null;
-  asking: boolean;
-  busy: boolean;
-  blocked: boolean;
-  onAsk: () => void;
-  onCancel: () => void;
-  onConfirm: () => void;
-  labels: NotificationsLabels;
-  cancelLabel: string;
-  /** "Types on this device", under the row (0.46). */
-  types: ReactNode;
-}) {
-  // Back to Remove when the confirm leaves, so focus does not fall to <body>.
-  const removeRef = useRef<HTMLButtonElement>(null);
-
-  const row = { "data-push-device-id": String(device.id), "data-current": current || undefined };
-
-  if (asking) {
-    return (
-      <InlineConfirm
-        as="li"
-        {...row}
-        className="py-2"
-        prompt={labels.removePrompt}
-        confirmLabel={labels.remove}
-        confirmName={labels.removeItem(name)}
-        cancelLabel={cancelLabel}
-        onConfirm={onConfirm}
-        onLeave={onCancel}
-        busy={busy}
-        commit={COMMIT_EXCEPT_BILLING}
-        returnFocusRef={removeRef}
-      />
-    );
-  }
-
-  return (
-    <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>
-        <Button
-          ref={removeRef}
-          type="button"
-          size="sm"
-          variant="ghost"
-          commit={COMMIT_EXCEPT_BILLING}
-          disabled={blocked}
-          aria-label={labels.removeItem(name)}
-          onClick={onAsk}
-        >
-          {labels.remove}
-        </Button>
-      </div>
-      {types}
-    </li>
-  );
-}

package/src/notifications/push-worker.ts

@@ -1,168 +0,0 @@
-/**
- * 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);
-  });
-}