@eifi1/ui-kit 0.44.0 → 0.46.0

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

@@ -10,6 +10,7 @@ import { Skeleton } from "../components/skeleton";
 import { Switch } from "../components/switch";
 import { SectionLabel } from "../components/text";
 import { COMMIT_EXCEPT_BILLING } from "../components/write-lock";
+import { usePhoneLayout } from "../hooks/use-breakpoint";
 import { CARD_DESCRIPTION_CLASS } from "../settings/settings-card-classes";
 import { SettingsCardTitle } from "../settings/settings-heading";
 import { settle, useMounted } from "../account/account-parts";
@@ -18,6 +19,7 @@ import type { WriteOverlay } from "./notification-parts";
 import type { NotificationsLabels } from "./notifications-labels";
 import type {
   DigestCadence,
+  NotificationChannel,
   NotificationSettingsPatch,
   NotificationSwitches,
   NotificationTypeEntry,
@@ -73,15 +75,33 @@ interface Row<Id extends string> {
 }
 
 /** A switch's key in the write overlay. */
-const switchKey = (id: string, channel: "app" | "email") => `${id}.${channel}`;
+const switchKey = (id: string, channel: NotificationChannel) => `${id}.${channel}`;
 const CADENCE_KEY = "digest_cadence";
 
+/** The grid of a several-channel row on a wide screen: the type's words, then one narrow
+ *  column per channel drawn. Literal classes, so Tailwind's scan finds them. */
+const COLUMN_GRID: Record<number, string> = {
+  1: "grid-cols-[minmax(0,1fr)_4.5rem]",
+  2: "grid-cols-[minmax(0,1fr)_repeat(2,4.5rem)]",
+  3: "grid-cols-[minmax(0,1fr)_repeat(3,4.5rem)]",
+};
+
+/** The channels in the card's column order (§10.2). */
+const CHANNELS: readonly NotificationChannel[] = ["app", "push", "email"];
+
+/** The channels a type offers: every one the server did not answer `null` (or leave out,
+ *  as `push` before server-kit 0.16). */
+const channelsOf = (switches: NotificationSwitches): NotificationChannel[] =>
+  CHANNELS.filter((channel) => switches[channel] !== null && switches[channel] !== undefined);
+
 /**
  * What the person hears about, and how (docs/notifications-harmonization.md §2.1–§2.3,
- * §4.2): one row per type the SERVER answered, the app's words on it, a switch for "in
- * the app" and "By e-mail" under it where the type offers mail. Where the app has no
- * "in the app" channel (Kurvenschmiede), the e-mail switch is the row's own, with the
- * type's label.
+ * §4.2, §10.2): one row per type the SERVER answered, the app's words on it, and a switch
+ * per channel the type offers — "In the app", "Push", "E-mail". On a wide screen they are
+ * narrow columns under those headings; on a phone they stack under the type's label. A
+ * channel the server answers `null` is not drawn (kastlan and KS offer no push; KS no
+ * "in the app"), and a row with one channel keeps a single switch named by the type
+ * (Kurvenschmiede's e-mail-only rows).
  *
  * **The server's list is the only list.** The card keeps no defaults and no list of
  * types: it draws what `value` holds, in the order of `groups`, else of `types`. A type
@@ -140,23 +160,24 @@ export function NotificationTypesSetting<Id extends string = string>({
     }
   }
 
+  const phone = usePhoneLayout();
   const rowOf = (id: Id): Row<Id> | null => {
     const switches = value?.[id];
     const entry = entries.get(id);
-    if (!switches || !entry || (switches.app === null && switches.email === null)) return null;
+    if (!switches || !entry || channelsOf(switches).length === 0) return null;
     return { entry, switches };
   };
   const rowsOf = (ids: readonly Id[]) => ids.map(rowOf).filter((row): row is Row<Id> => row !== null);
 
-  const shown = (id: string, channel: "app" | "email", server: boolean): boolean => {
+  const shown = (id: string, channel: NotificationChannel, server: boolean): boolean => {
     const key = switchKey(id, channel);
     return overlay.get(key) ?? server;
   };
-  /** The row's own switch: `app`, or `email` where the app has no `app` channel. */
-  const rowOn = ({ entry, switches }: Row<Id>) =>
-    switches.app !== null
-      ? shown(entry.id, "app", switches.app)
-      : shown(entry.id, "email", switches.email === true);
+  const channelOn = ({ entry, switches }: Row<Id>, channel: NotificationChannel) =>
+    shown(entry.id, channel, switches[channel] === true);
+  /** The type reaches the person at all: some channel is on (the cadence and the app's
+   *  extra show then). */
+  const rowOn = (row: Row<Id>) => channelsOf(row.switches).some((channel) => channelOn(row, channel));
 
   const save = <V,>(key: string, patch: NotificationSettingsPatch<Id>, which: WriteOverlay<V>, next: V) => {
     if (which.pending(key)) return;
@@ -174,7 +195,7 @@ export function NotificationTypesSetting<Id extends string = string>({
     );
   };
 
-  const flip = (id: Id, channel: "app" | "email", on: boolean) =>
+  const flip = (id: Id, channel: NotificationChannel, on: boolean) =>
     save(
       switchKey(id, channel),
       { types: { [id]: { [channel]: on } } as NotificationSettingsPatch<Id>["types"] },
@@ -190,11 +211,33 @@ export function NotificationTypesSetting<Id extends string = string>({
     </span>
   ) : null;
 
+  const channelLabel: Record<NotificationChannel, string> = {
+    app: labels.channelApp,
+    push: labels.channelPush,
+    email: labels.channelEmail,
+  };
+  /** The columns on a wide screen: every channel some several-channel row offers. */
+  const drawnRows = value && !loading ? rowsOf(groups ? groups.flatMap((group) => group.types) : types.map((entry) => entry.id)) : [];
+  const multi = drawnRows.filter((row) => channelsOf(row.switches).length > 1);
+  const columns = CHANNELS.filter((channel) => multi.some((row) => channelsOf(row.switches).includes(channel)));
+  const columnHeadings =
+    !phone && columns.length > 0 ? (
+      // The switches carry the channel's name themselves; the headings are for the eye.
+      <div aria-hidden className={cn("grid gap-x-2", COLUMN_GRID[columns.length])} data-channel-headings="">
+        <span />
+        {columns.map((channel) => (
+          <span key={channel} className="text-center text-caption font-medium text-muted">
+            {channelLabel[channel]}
+          </span>
+        ))}
+      </div>
+    ) : null;
+
   const renderRow = (row: Row<Id>) => {
     const { entry, switches } = row;
     const on = rowOn(row);
-    const emailOnly = switches.app === null;
-    const both = !emailOnly && switches.email !== null;
+    const offered = channelsOf(switches);
+    const single = offered.length === 1 ? offered[0] : null;
     const cadenceSelect =
       on && digest?.type === entry.id && cadence ? (
         <Select
@@ -213,52 +256,99 @@ export function NotificationTypesSetting<Id extends string = string>({
         </Select>
       ) : null;
     const extra = on ? renderExtra?.(entry.id) : null;
-    const description =
-      emailOnly && unverifiedLine ? (
-        <>
-          {entry.description !== undefined && <span className="block">{entry.description}</span>}
-          {unverifiedLine}
-        </>
-      ) : (
-        entry.description
+    const below =
+      cadenceSelect || hasContent(extra) ? (
+        <div className="ps-4 space-y-2">
+          {cadenceSelect}
+          {extra}
+        </div>
+      ) : null;
+
+    // One channel: today's single switch, named by the type (KS's e-mail-only rows).
+    if (single) {
+      const description =
+        single === "email" && unverifiedLine ? (
+          <>
+            {entry.description !== undefined && <span className="block">{entry.description}</span>}
+            {unverifiedLine}
+          </>
+        ) : (
+          entry.description
+        );
+      return (
+        <div key={entry.id} data-notification-type={entry.id} data-channels={single} className="space-y-2">
+          <Switch
+            label={entry.label}
+            description={description}
+            checked={channelOn(row, single)}
+            disabled={disabled}
+            commit={COMMIT_EXCEPT_BILLING}
+            onCheckedChange={(next) => flip(entry.id, single, next)}
+          />
+          {below}
+        </div>
       );
+    }
+
+    // Several channels: a group named by its type, a switch per channel — columns on a
+    // wide screen (the headings above the list name them), stacked on a phone.
+    const labelId = `${groupId}-type-${entry.id}`;
+    const unverifiedId = `${groupId}-unverified-${entry.id}`;
+    const channelSwitch = (channel: NotificationChannel) => (
+      <Switch
+        key={channel}
+        size="sm"
+        label={phone ? channelLabel[channel] : undefined}
+        aria-label={phone ? undefined : channelLabel[channel]}
+        description={phone && channel === "email" ? (unverifiedLine ?? undefined) : undefined}
+        aria-describedby={!phone && channel === "email" && unverifiedLine ? unverifiedId : undefined}
+        checked={channelOn(row, channel)}
+        disabled={disabled}
+        commit={COMMIT_EXCEPT_BILLING}
+        onCheckedChange={(next) => flip(entry.id, channel, next)}
+        data-channel={channel}
+      />
+    );
+    const text = (
+      <div className="min-w-0">
+        <div id={labelId} className="text-sm font-medium text-primary">
+          {entry.label}
+        </div>
+        {(entry.description !== undefined || (!phone && offered.includes("email") && unverifiedLine)) && (
+          <div className={CARD_DESCRIPTION_CLASS}>
+            {entry.description !== undefined && <span className="block">{entry.description}</span>}
+            {!phone && offered.includes("email") && <span id={unverifiedId}>{unverifiedLine}</span>}
+          </div>
+        )}
+      </div>
+    );
     return (
       <div
         key={entry.id}
         data-notification-type={entry.id}
-        // A row with two switches is a group named by its type, so "By e-mail" is heard
-        // with the type it belongs to.
-        role={both ? "group" : undefined}
-        aria-label={both ? entry.label : undefined}
+        data-channels={offered.join(" ")}
+        role="group"
+        aria-labelledby={labelId}
         className="space-y-2"
       >
-        <Switch
-          label={entry.label}
-          description={description}
-          checked={on}
-          disabled={disabled}
-          commit={COMMIT_EXCEPT_BILLING}
-          onCheckedChange={(next) => flip(entry.id, emailOnly ? "email" : "app", next)}
-        />
-        {both && (
-          <div className="ps-4">
-            <Switch
-              size="sm"
-              label={labels.byEmail}
-              description={unverifiedLine ?? undefined}
-              checked={shown(entry.id, "email", switches.email === true)}
-              disabled={disabled}
-              commit={COMMIT_EXCEPT_BILLING}
-              onCheckedChange={(next) => flip(entry.id, "email", next)}
-            />
-          </div>
-        )}
-        {(cadenceSelect || hasContent(extra)) && (
-          <div className="ps-4 space-y-2">
-            {cadenceSelect}
-            {extra}
+        {phone ? (
+          <>
+            {text}
+            <div className="ps-4 space-y-2" data-stacked="">
+              {offered.map(channelSwitch)}
+            </div>
+          </>
+        ) : (
+          <div className={cn("grid items-start gap-x-2", COLUMN_GRID[columns.length])}>
+            {text}
+            {columns.map((channel) => (
+              <div key={channel} className="flex justify-center pt-0.5">
+                {offered.includes(channel) ? channelSwitch(channel) : null}
+              </div>
+            ))}
           </div>
         )}
+        {below}
       </div>
     );
   };
@@ -274,7 +364,9 @@ export function NotificationTypesSetting<Id extends string = string>({
       drawn.length === 0 ? (
         <p className={CARD_DESCRIPTION_CLASS}>{labels.typesEmpty}</p>
       ) : (
-        drawn.map(({ group, rows }) => {
+        <>
+        {columnHeadings}
+        {drawn.map(({ group, rows }) => {
           const headingId = `${groupId}-${group.id}`;
           return (
             <div key={group.id} role="group" aria-labelledby={headingId} className="space-y-3">
@@ -284,7 +376,8 @@ export function NotificationTypesSetting<Id extends string = string>({
               {rows.map(renderRow)}
             </div>
           );
-        })
+        })}
+        </>
       );
   } else {
     const rows = rowsOf(types.map((entry) => entry.id));
@@ -292,7 +385,10 @@ export function NotificationTypesSetting<Id extends string = string>({
       rows.length === 0 ? (
         <p className={CARD_DESCRIPTION_CLASS}>{labels.typesEmpty}</p>
       ) : (
-        <div className="space-y-3">{rows.map(renderRow)}</div>
+        <div className="space-y-3">
+          {columnHeadings}
+          {rows.map(renderRow)}
+        </div>
       );
   }
 

package/src/notifications/notification-types.ts

@@ -13,16 +13,23 @@ import type { ReactNode } from "react";
 export type DigestCadence = "weekly" | "monthly";
 
 /**
- * One type's two switches in the `GET` (§3.2). `null` where the type does not offer
- * that channel: `email` for a type with no mail, `app` in an app with no "in the app"
- * channel (Kurvenschmiede: `{app: null, email: true}`). An unset switch already reads as
- * its default — the server fills it in.
+ * One type's switches in the `GET` (§3.2; §10.2: one per channel). `null` where the type
+ * does not offer that channel: `email` for a type with no mail, `app` in an app with no
+ * "in the app" channel (Kurvenschmiede: `{app: null, push: null, email: true}`), `push` in
+ * an app with no push (server-kit `NotificationTypes(..., push_channel=False)`: kastlan,
+ * KS). An unset switch already reads as its default — the server fills it in.
  */
 export interface NotificationSwitches {
   app: boolean | null;
+  /** 0.46 (§10.2): push, independent of `app`. Left out by a server before
+   *  server-kit 0.16, which reads as `null` (not offered). */
+  push?: boolean | null;
   email: boolean | null;
 }
 
+/** A channel a type may offer (§10.2), in the order the types card draws them. */
+export type NotificationChannel = "app" | "push" | "email";
+
 /** The `GET`'s `types`: every type the account can receive, in the registry's order. */
 export type NotificationTypesValue = Readonly<Record<string, NotificationSwitches>>;
 
@@ -51,16 +58,18 @@ export interface NotificationTypeGroup<Id extends string = string> {
 
 /**
  * The parts of `PATCH /notifications/settings` (§3.2) the cards send. Omitted keeps; a
- * type's `null` puts both its switches back to their defaults; `quiet_hours_*: null`
+ * type's `null` puts its switches back to their defaults; `quiet_hours_*: null`
  * clears a time. One switch per call from the types card (`{types: {digest: {app:
- * true}}}`), or `{digest_cadence}`; quiet hours send a time, with the device's zone the
- * first time; the zone picker sends `{timezone}`.
+ * true}}}`), or `{digest_cadence}`; quiet hours send a time. No zone: it is the
+ * account's, automatic only (§10.3, amended 2026-10-20).
  */
 export interface NotificationSettingsPatch<Id extends string = string> {
-  types?: Partial<Record<Id, { app?: boolean; email?: boolean } | null>>;
+  types?: Partial<Record<Id, { app?: boolean; push?: boolean; email?: boolean } | null>>;
   digest_cadence?: DigestCadence;
   quiet_hours_start?: string | null;
   quiet_hours_end?: string | null;
+  /** @deprecated 0.46 — the zone is the account's, automatic only (§10.3), and server-kit 0.16 refuses it here;
+   *  removed in 0.47. No kit card sends it. */
   timezone?: string;
 }
 
@@ -77,4 +86,7 @@ export interface PushDeviceItem<Id extends string | number = string> {
   last_success_at: string | null;
   /** Failed deliveries in a row; the server removes the device at 10. */
   failure_count: number;
+  /** 0.46 (§10.2): the type ids this device mutes — a device can mute types, never add
+   *  them. Left out by a server before server-kit 0.16 (none muted). */
+  muted_types?: string[];
 }

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}.`,