@eifi1/ui-kit 0.35.0 → 0.37.0

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

@@ -0,0 +1,224 @@
+import { useState } from "react";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+
+import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels";
+import { cn } from "../lib/cn";
+import { AlertBanner } from "../components/alert-banner";
+import { Button } from "../components/button";
+import { Card } from "../components/card";
+import { DialogFrame } from "../components/dialog-frame";
+import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes";
+import { SettingsCardTitle } from "../settings/settings-heading";
+import { useMounted } from "../account/account-parts";
+import { describeFailure, FailureLine, useNotificationsLabels } from "./notification-parts";
+import type { NotificationsLabels } from "./notifications-labels";
+import { PushDeviceError } from "./use-push-device";
+import type { PushDevice } from "./use-push-device";
+
+/** Which action failed — {@link PushDeviceSettingProps.describeError}'s second argument. */
+export type PushDeviceAction = "enable" | "disable" | "test";
+
+export interface PushDeviceSettingProps extends Omit<ComponentPropsWithRef<"div">, "children"> {
+  /** This browser's push, from {@link usePushDevice}. */
+  push: PushDevice;
+  /** The app's name, for the iOS line and the explainer. */
+  appName: string;
+  /** The app's own words for a failure, or `undefined` for the kit's. The kit already
+   *  has words for a missing service worker and an unanswered push service. */
+  describeError?: (error: unknown, action: PushDeviceAction) => ReactNode | undefined;
+  labels?: LabelOverride<NotificationsLabels>;
+}
+
+/** What the line under the buttons says. */
+type Outcome = { tone: "status" | "warning" | "danger"; text: ReactNode } | null;
+
+/**
+ * Push on THIS device (docs/notifications-harmonization.md §2.2, §2.7, §4.2): keksdose's
+ * push block, as a card of its own. Registering the device is the switch — push has no
+ * account switch. One state at a time, in keksdose's order
+ * (`notifications-card.tsx:333-402`):
+ *
+ * 1. the browser has no push;
+ * 2. iOS outside the installed app (iOS delivers only to the installed app);
+ * 3. push is not set up on the server (no VAPID keys);
+ * 4. notifications blocked in the browser;
+ * 5. on or off — with "another account" when this browser's subscription is someone
+ *    else's — and "Turn on notifications", or "Send a test" and "Turn off".
+ *
+ * **The explainer comes before the browser's one prompt**: turning on while the
+ * permission is still `"default"` opens a dialog first (what the notifications are for,
+ * that the browser asks next); with it granted, it goes straight on. A test that reached
+ * no device says so (`testNone`) — a 404/410 removes the row on the server while this
+ * browser still holds its subscription. Outcomes are a line under the buttons; nothing
+ * toasts.
+ */
+export function PushDeviceSetting({
+  push,
+  appName,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}: PushDeviceSettingProps) {
+  const labels = useNotificationsLabels(labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const [explainer, setExplainer] = useState(false);
+  const [running, setRunning] = useState<PushDeviceAction | null>(null);
+  const [outcome, setOutcome] = useState<Outcome>(null);
+  const mounted = useMounted();
+
+  const failureOf = (error: unknown, action: PushDeviceAction, fallback: string): ReactNode => {
+    if (error instanceof PushDeviceError) {
+      return error.code === "no_service_worker" ? labels.noServiceWorker : labels.pushTimeout;
+    }
+    return describeFailure(describeError?.(error, action), fallback);
+  };
+
+  const run = <T,>(action: PushDeviceAction, call: () => Promise<T>, done: (value: T) => Outcome, fallback: string) => {
+    if (running) return;
+    setRunning(action);
+    setOutcome(null);
+    call().then(
+      (value) => {
+        if (!mounted.current) return;
+        setRunning(null);
+        setOutcome(done(value));
+      },
+      (error: unknown) => {
+        if (!mounted.current) return;
+        setRunning(null);
+        setOutcome({ tone: "danger", text: failureOf(error, action, fallback) });
+      },
+    );
+  };
+
+  const enable = () =>
+    run(
+      "enable",
+      () => push.enable(),
+      (ok): Outcome => (ok ? null : { tone: "danger", text: labels.enableFailed }),
+      labels.enableFailed,
+    );
+  const disable = () => run("disable", () => push.disable(), () => null, labels.failed);
+  const test = () =>
+    run(
+      "test",
+      () => push.sendTest(),
+      ({ sent }): Outcome =>
+        sent > 0 ? { tone: "status", text: labels.testSent(sent) } : { tone: "warning", text: labels.testNone },
+      labels.testFailed,
+    );
+
+  const turnOn = () => {
+    if (push.permission === "granted") enable();
+    else setExplainer(true);
+  };
+
+  let state: ReactNode;
+  if (!push.supported) {
+    state = <p className={CARD_DESCRIPTION_CLASS}>{labels.unsupported}</p>;
+  } else if (push.ios && !push.installed) {
+    state = <p className={CARD_DESCRIPTION_CLASS}>{labels.iosInstall(appName)}</p>;
+  } else if (push.configured === false) {
+    state = <p className={CARD_DESCRIPTION_CLASS}>{labels.notConfigured}</p>;
+  } else if (push.permission === "denied") {
+    state = <p className="text-xs text-warning">{labels.blocked}</p>;
+  } else {
+    const busy = push.busy || running !== null;
+    state = (
+      <>
+        <p className={CARD_DESCRIPTION_CLASS} data-push-state={push.subscribed ? "on" : "off"}>
+          {push.subscribed ? labels.on : labels.off}
+        </p>
+        {push.foreignSubscription && <p className="text-xs text-warning">{labels.otherAccount}</p>}
+        <div className="flex flex-wrap gap-2">
+          {push.subscribed ? (
+            <>
+              <Button
+                type="button"
+                size="sm"
+                variant="secondary"
+                commit={COMMIT_EXCEPT_BILLING}
+                pending={running === "test"}
+                disabled={busy && running !== "test"}
+                onClick={test}
+              >
+                {labels.sendTest}
+              </Button>
+              <Button
+                type="button"
+                size="sm"
+                variant="ghost"
+                commit={COMMIT_EXCEPT_BILLING}
+                pending={running === "disable"}
+                disabled={busy && running !== "disable"}
+                onClick={disable}
+              >
+                {labels.disable}
+              </Button>
+            </>
+          ) : (
+            <Button
+              type="button"
+              size="sm"
+              commit={COMMIT_EXCEPT_BILLING}
+              pending={running === "enable"}
+              disabled={busy && running !== "enable"}
+              onClick={turnOn}
+            >
+              {labels.enable}
+            </Button>
+          )}
+        </div>
+        {outcome?.tone === "status" && (
+          <p role="status" className={CARD_DESCRIPTION_CLASS}>
+            {outcome.text}
+          </p>
+        )}
+        {outcome?.tone === "warning" && (
+          <AlertBanner tone="warning" size="sm" role="status">
+            {outcome.text}
+          </AlertBanner>
+        )}
+        {outcome?.tone === "danger" && <FailureLine>{outcome.text}</FailureLine>}
+      </>
+    );
+  }
+
+  return (
+    <Card {...rest} className={cn("p-4 space-y-3", className)}>
+      <div>
+        <SettingsCardTitle>{labels.pushTitle}</SettingsCardTitle>
+        <div className={CARD_DESCRIPTION_CLASS}>{labels.pushDescription}</div>
+      </div>
+      {state}
+      <DialogFrame
+        open={explainer}
+        onClose={() => setExplainer(false)}
+        title={labels.explainerTitle}
+        description={labels.explainerBody(appName)}
+        actions={(close) => (
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="ghost" onClick={close}>
+              {common.cancel}
+            </Button>
+            <Button
+              type="button"
+              onClick={() => {
+                setExplainer(false);
+                // Only now the browser's one permission prompt.
+                enable();
+              }}
+            >
+              {labels.explainerContinue}
+            </Button>
+          </div>
+        )}
+      >
+        <p className={CARD_DESCRIPTION_CLASS}>{labels.explainerHint}</p>
+      </DialogFrame>
+    </Card>
+  );
+}

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

@@ -0,0 +1,306 @@
+import { useEffect, useRef, useState } from "react";
+import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react";
+import { MonitorSmartphone } from "lucide-react";
+
+import { useKitLabels, useKitLocale, type LabelOverride } from "../i18n/kit-labels";
+import { DEFAULT_COMMON_LABELS } from "../i18n/shared-labels";
+import { cn } from "../lib/cn";
+import { formatDate } from "../lib/format";
+import { Button } from "../components/button";
+import { Card } from "../components/card";
+import { Chip } from "../components/chip";
+import { Skeleton } from "../components/skeleton";
+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 type { NotificationsLabels } from "./notifications-labels";
+import type { 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 locale, medium date. */
+  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;
+  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".
+ *
+ * Under a write lock Remove is a `commit` control exempt from billing.
+ */
+export function PushDevicesSetting<Id extends string | number = string>({
+  devices,
+  loading,
+  currentEndpoint,
+  onRemove,
+  formatDate: formatDateProp,
+  locale: localeProp,
+  describeError,
+  labels: labelsProp,
+  className,
+  ...rest
+}: PushDevicesSettingProps<Id>) {
+  const labels = useNotificationsLabels(labelsProp);
+  const common = useKitLabels("common", DEFAULT_COMMON_LABELS);
+  const locale = useKitLocale(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 = new Date(iso);
+    if (Number.isNaN(date.getTime())) return iso;
+    return formatDateProp ? formatDateProp(date) : formatDate(date, "medium", { locale });
+  };
+
+  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));
+      });
+  };
+
+  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}
+          />
+        ))}
+      </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,
+}: {
+  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;
+}) {
+  const cancelRef = useRef<HTMLButtonElement>(null);
+  const removeRef = useRef<HTMLButtonElement>(null);
+  // Which way the confirm closed: back to Remove, so focus does not fall to <body>.
+  const [returning, setReturning] = useState(false);
+  useEffect(() => {
+    if (asking) cancelRef.current?.focus();
+    else if (returning) removeRef.current?.focus();
+  }, [asking, returning]);
+
+  const leave = () => {
+    setReturning(true);
+    onCancel();
+  };
+  const escapeLeaves = (event: KeyboardEvent<HTMLButtonElement>) => {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      leave();
+    }
+  };
+
+  const row = { "data-push-device-id": String(device.id), "data-current": current || undefined };
+
+  if (asking) {
+    return (
+      <li {...row} className="space-y-2 py-2">
+        <p role="alert" className="text-sm">
+          {labels.removePrompt}
+        </p>
+        <div className="flex flex-wrap gap-2">
+          <Button
+            type="button"
+            size="sm"
+            variant="danger"
+            commit={COMMIT_EXCEPT_BILLING}
+            pending={busy}
+            aria-label={labels.removeItem(name)}
+            onClick={onConfirm}
+            onKeyDown={escapeLeaves}
+          >
+            {labels.remove}
+          </Button>
+          <Button ref={cancelRef} type="button" size="sm" variant="ghost" onClick={leave} onKeyDown={escapeLeaves}>
+            {cancelLabel}
+          </Button>
+        </div>
+      </li>
+    );
+  }
+
+  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>
+          )}
+        </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={() => {
+          setReturning(false);
+          onAsk();
+        }}
+      >
+        {labels.remove}
+      </Button>
+    </li>
+  );
+}