@eifi1/ui-kit 0.44.0 → 0.46.0

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);
+  });
+}

package/src/notifications/quiet-hours-setting.tsx

@@ -3,7 +3,6 @@ import type { ComponentPropsWithRef, ReactNode } from "react";
 
 import type { LabelOverride } from "../i18n/kit-labels";
 import { cn } from "../lib/cn";
-import { Button } from "../components/button";
 import { Card } from "../components/card";
 import { TimeInput } from "../components/time-input";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
@@ -13,9 +12,9 @@ import { settle, useMounted } from "../account/account-parts";
 import { describeFailure, FailureLine, useNotificationsLabels, useWriteOverlay } from "./notification-parts";
 import type { NotificationsLabels } from "./notifications-labels";
 import type { NotificationSettingsPatch } from "./notification-types";
-import { deviceTimeZone, TimeZoneSelect, zoneName } from "./time-zone-select";
+import { zoneName } from "./time-zone-select";
 
-/** The zone the server applies while the account has none (§2.6): every app's. */
+/** The zone the server applies while no device ever reported one (§10.3): every app's. */
 const DEFAULT_FALLBACK_ZONE = "Europe/Zurich";
 
 export interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
@@ -23,17 +22,29 @@ export interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<"div"
   start: string | null;
   /** The `GET`'s `quiet_hours_end`. */
   end: string | null;
-  /** The `GET`'s `timezone`, an IANA name, or `null` (the app's zone applies). */
-  timezone: string | null;
+  /** The zone the 0.36 card showed, an IANA name, or `null`.
+   *  @deprecated 0.46 — pass `zone` (§10.3: the zone is the account's, automatic only); removed in 0.47.
+   *  Shown read-only while `zone` is left out; the card no longer offers a picker. */
+  timezone?: string | null;
   /**
-   * Save one change — `PATCH /notifications/settings`: a time (`null` when cleared), with
-   * the device's zone the first time one is entered while `timezone` is `null`; or
-   * `{timezone}`. The field shows the new value while the call runs and goes back if it
+   * 0.46 (§10.3, amended 2026-10-20: automatic only): the account's zone — `/auth/me`'s
+   * `device_timezone`, the zone of the device last used; `null` while no device has
+   * reported one, and the card then names `fallbackZone`, the zone the server applies.
+   * Shown read-only once a time is set ("In your time zone (Europe / Zurich), which follows
+   * the device you last used."). No picker: the zone is never chosen.
+   */
+  zone?: string | null;
+  /** 0.46 (§10.4): the app queues a held push and sends it when the window ends (it runs
+   *  the notifications tick); the description says so. Default `false`: dropped. */
+  held?: boolean;
+  /**
+   * Save one change — `PATCH /notifications/settings`: a time, or `null` when cleared.
+   * Never a zone. The field shows the new value while the call runs and goes back if it
    * rejects.
    */
   onChange: (patch: NotificationSettingsPatch) => Promise<unknown> | void;
-  /** The zone shown, and the one the server applies, while `timezone` is `null`.
-   *  Default `"Europe/Zurich"`, every app's (decision 6). */
+  /** The zone named while neither `zone` nor `timezone` names one: the one the server
+   *  applies. Default `"Europe/Zurich"`, every app's. */
   fallbackZone?: string;
   /** The app keeps an inbox, and the description says a held push still reaches it. */
   inbox?: boolean;
@@ -43,30 +54,32 @@ export interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<"div"
   labels?: LabelOverride<NotificationsLabels>;
 }
 
-type QuietField = "quiet_hours_start" | "quiet_hours_end" | "timezone";
+type QuietField = "quiet_hours_start" | "quiet_hours_end";
 
 /**
  * Quiet hours (docs/notifications-harmonization.md §2.4, §2.6, §4.2): a window of local
  * times in the account's zone, which may cross midnight, when no push of a machine-sent
- * type is sent. A held push is dropped, not delayed; the inbox row and the mail go as
- * usual. keksdose's block, as a card of its own.
+ * type is sent. A held push is dropped — or, with `held` (0.46, §10.4), sent when the
+ * window ends; the inbox row and the mail go as usual. keksdose's block, as a card of its
+ * own.
+ *
+ * **0.46 (§10.3, amended 2026-10-20, Marcel): the zone is the account's, automatic
+ * only** — the zone of the device last used, else `Europe/Zurich`. The card names it
+ * read-only and never sends one; there is no picker and no "Use it".
  *
  * - **Two times**, each saved as it is entered; a cleared time sends `null`. While only
  *   one is set the card says so: the window fails open until both are.
- * - **The zone** shows while a time is set. The first time entered while the account has
- *   none sends this device's zone with it, so "22:00" means the person's 22:00
- *   (keksdose `notifications-card.tsx:288-292`). With none stored, the card shows
- *   `fallbackZone` — the zone the server then applies — never the device's (keksdose's
- *   card showed the device's zone while its server applied UTC).
- * - **"This device is in …"** with "Use it" when the device's zone is not the one in
- *   effect. Never written on its own: a zone is written by a person's pick (§2.6).
+ * - **The zone** shows while a time is set: `zone`, else the deprecated `timezone`, else
+ *   `fallbackZone`.
  *
  * Under a write lock the fields are `commit` controls exempt from billing.
  */
 export function QuietHoursSetting({
   start,
   end,
-  timezone,
+  timezone = null,
+  zone,
+  held = false,
   onChange,
   fallbackZone = DEFAULT_FALLBACK_ZONE,
   inbox = false,
@@ -77,7 +90,7 @@ export function QuietHoursSetting({
   ...rest
 }: QuietHoursSettingProps) {
   const labels = useNotificationsLabels(labelsProp);
-  const overlay = useWriteOverlay<string | null>(`${start}|${end}|${timezone}`);
+  const overlay = useWriteOverlay<string | null>(`${start}|${end}`);
   const [failure, setFailure] = useState<ReactNode>(null);
   const mounted = useMounted();
   const id = useId();
@@ -86,9 +99,7 @@ export function QuietHoursSetting({
     overlay.has(field) ? (overlay.get(field) ?? null) : server;
   const startShown = shown("quiet_hours_start", start);
   const endShown = shown("quiet_hours_end", end);
-  const zoneShown = shown("timezone", timezone);
-  const effectiveZone = zoneShown ?? fallbackZone;
-  const device = deviceTimeZone();
+  const accountZone = (zone === undefined ? timezone : zone) ?? fallbackZone;
 
   const save = (patch: NotificationSettingsPatch) => {
     const fields = Object.keys(patch) as QuietField[];
@@ -109,9 +120,7 @@ export function QuietHoursSetting({
   const saveTime = (field: "quiet_hours_start" | "quiet_hours_end", value: string) => {
     const next = value || null;
     if (next === shown(field, field === "quiet_hours_start" ? start : end)) return;
-    const patch: NotificationSettingsPatch = { [field]: next };
-    if (next && zoneShown === null) patch.timezone = device;
-    save(patch);
+    save({ [field]: next });
   };
 
   const anySet = Boolean(startShown || endShown);
@@ -121,7 +130,7 @@ export function QuietHoursSetting({
     <Card {...rest} className={cn("p-4 space-y-3", className)}>
       <div>
         <SettingsCardTitle>{labels.quietTitle}</SettingsCardTitle>
-        <div className={CARD_DESCRIPTION_CLASS}>{labels.quietDescription(inbox)}</div>
+        <div className={CARD_DESCRIPTION_CLASS}>{labels.quietDescription(inbox, held)}</div>
       </div>
       <div className="flex flex-wrap items-end gap-3">
         <TimeInput
@@ -149,35 +158,9 @@ export function QuietHoursSetting({
         </p>
       )}
       {anySet && (
-        <div className="space-y-2">
-          <TimeZoneSelect
-            id={`${id}-zone`}
-            value={effectiveZone}
-            disabled={disabled}
-            commit={COMMIT_EXCEPT_BILLING}
-            onChange={(zone) => save({ timezone: zone })}
-            className="max-w-72"
-            labels={labelsProp}
-          />
-          {device !== effectiveZone && (
-            <div className="flex flex-wrap items-center gap-x-2 gap-y-1">
-              <span id={`${id}-device`} className={CARD_DESCRIPTION_CLASS}>
-                {labels.deviceZone(zoneName(device, labels.regions))}
-              </span>
-              <Button
-                type="button"
-                size="sm"
-                variant="link"
-                disabled={disabled}
-                commit={COMMIT_EXCEPT_BILLING}
-                aria-describedby={`${id}-device`}
-                onClick={() => save({ timezone: device })}
-              >
-                {labels.useDeviceZone}
-              </Button>
-            </div>
-          )}
-        </div>
+        <p className={CARD_DESCRIPTION_CLASS} data-quiet-zone="">
+          {labels.quietZone(zoneName(accountZone, labels.regions))}
+        </p>
       )}
       <FailureLine>{failure}</FailureLine>
     </Card>

package/src/notifications/time-zone-select.tsx

@@ -10,8 +10,8 @@ import type { NotificationRegionLabels, NotificationsLabels } from "./notificati
 
 /**
  * This device's IANA zone ("Europe/Zurich"), or `"UTC"` where the runtime names none —
- * the zone quiet hours are entered in the first time (§2.6), and the one the card offers
- * when it differs from the account's.
+ * the zone `useDeviceZoneReport` reports, which becomes the account's (§10.3, automatic
+ * only).
  */
 export function deviceTimeZone(): string {
   try {
@@ -40,6 +40,7 @@ function cityOf(rest: string): string {
  * rather than trailing the last group as if it were Pacific. `current` is kept even when
  * the runtime does not list it (an old alias such as "Europe/Kiev"): a picker without its
  * own value would show an empty field.
+ * @deprecated 0.46 — the zone is automatic (§10.3, amended 2026-10-20), no app picks one; removed in 0.47.
  */
 export function timeZoneOptions(
   current: string,
@@ -73,6 +74,7 @@ export function zoneName(zone: string, regions: NotificationRegionLabels): strin
   return `${regionName(regions, region) ?? region} / ${cityOf(zone.slice(slash + 1))}`;
 }
 
+/** @deprecated 0.46 — the zone is automatic (§10.3, amended 2026-10-20), no app picks one; removed in 0.47. */
 export interface TimeZoneSelectProps {
   /** The IANA zone. Not clearable: a zone can be changed, never emptied. */
   value: string;
@@ -95,6 +97,7 @@ export interface TimeZoneSelectProps {
  * a search box instead of a 400-row wheel. Rows are the city under its region, the region
  * in the kit's words (`labels.regions`); a zone with no region first; a stored zone the
  * runtime does not list is kept. On the kit's {@link InlineEntityCombobox}.
+ * @deprecated 0.46 — the zone is automatic (§10.3, amended 2026-10-20), no app picks one; removed in 0.47.
  */
 export function TimeZoneSelect({
   value,