@eifi1/ui-kit 0.54.0 → 0.56.0

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

@@ -1,238 +0,0 @@
-import { useEffect, useId, useRef, useState } from "react";
-import type { ComponentPropsWithRef, KeyboardEvent, ReactNode } from "react";
-
-import type { LabelOverride } from "../i18n/kit-labels";
-import { cn } from "../lib/cn";
-import { Card } from "../components/card";
-import { TimeInput } from "../components/time-input";
-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 { NotificationRegionLabels, NotificationsLabels } from "./notifications-labels";
-import type { NotificationSettingsPatch } from "./notification-types";
-
-/** The zone the server applies while no device ever reported one (§10.3): every app's. */
-const DEFAULT_FALLBACK_ZONE = "Europe/Zurich";
-
-/** A zone for a sentence: "Europe / Zurich", the region in the kit's words (`labels.regions`);
- *  a region the labels do not know keeps its IANA name, a zone with none ("UTC") is itself. */
-function zoneName(zone: string, regions: NotificationRegionLabels): string {
-  const slash = zone.indexOf("/");
-  if (slash < 0) return zone;
-  const region = zone.slice(0, slash);
-  const named = Object.prototype.hasOwnProperty.call(regions, region)
-    ? regions[region as keyof NotificationRegionLabels]
-    : region;
-  return `${named} / ${zone
-    .slice(slash + 1)
-    .replace(/_/g, " ")
-    .replace(/\//g, " / ")}`;
-}
-
-export interface QuietHoursSettingProps extends Omit<ComponentPropsWithRef<"div">, "children" | "onChange"> {
-  /** The `GET`'s `quiet_hours_start`, `"HH:MM"`, or `null`. */
-  start: string | null;
-  /** The `GET`'s `quiet_hours_end`. */
-  end: string | null;
-  /**
-   * 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. Called when a time is ENTERED — the field left, or Enter, or the card
-   * unmounted with a time still typed — never per keystroke, and one call per field at a
-   * time (0.52). The field shows the new value while the call runs and goes back if it
-   * rejects.
-   */
-  onChange: (patch: NotificationSettingsPatch) => Promise<unknown> | void;
-  /** The zone named while `zone` names none: 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;
-  disabled?: boolean;
-  /** The app's own words for a failed save, or `undefined` for the kit's `failed`. */
-  describeError?: (error: unknown) => ReactNode | undefined;
-  labels?: LabelOverride<NotificationsLabels>;
-}
-
-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 — 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 when it is entered — on leaving the field or on Enter, or
- *   when the card goes while it is still typed — and a cleared time sends `null`. While
- *   only one is set the card says so: the window fails open until both are.
- * - **One request per field at a time** (0.52): a time entered while that field's save
- *   runs waits for it, and only the latest waiting one is sent. Each input event used to
- *   PATCH — typing "30" over 22:00's minutes sent 22:03 and 22:30, and whichever answer
- *   landed last stayed on the server (refactor audit 2026-10-30, FLW-4).
- * - **The zone** shows while a time is set: `zone`, else `fallbackZone`.
- *
- * Under a write lock the fields are `commit` controls exempt from billing.
- */
-export function QuietHoursSetting({
-  start,
-  end,
-  zone,
-  held = false,
-  onChange,
-  fallbackZone = DEFAULT_FALLBACK_ZONE,
-  inbox = false,
-  disabled = false,
-  describeError,
-  labels: labelsProp,
-  className,
-  ...rest
-}: QuietHoursSettingProps) {
-  const labels = useNotificationsLabels(labelsProp);
-  const overlay = useWriteOverlay<string | null>(`${start}|${end}`);
-  const [failure, setFailure] = useState<ReactNode>(null);
-  const mounted = useMounted();
-  const id = useId();
-
-  // What is typed and not yet entered, per field: the field shows it, nothing is sent.
-  const [drafts, setDrafts] = useState<Partial<Record<QuietField, string>>>({});
-  // Per field: whether a save runs, and the latest time entered while it did (own key =
-  // one is waiting). Refs: a save's answer reads them after renders it did not see.
-  const running = useRef<Partial<Record<QuietField, boolean>>>({});
-  const waiting = useRef<Partial<Record<QuietField, string | null>>>({});
-
-  const server = (field: QuietField) => (field === "quiet_hours_start" ? start : end);
-  const saved = (field: QuietField) => (overlay.has(field) ? (overlay.get(field) ?? null) : server(field));
-  const shown = (field: QuietField) => drafts[field] ?? saved(field) ?? "";
-  const startShown = shown("quiet_hours_start");
-  const endShown = shown("quiet_hours_end");
-  const accountZone = zone ?? fallbackZone;
-
-  const send = (field: QuietField, value: string | null) => {
-    running.current[field] = true;
-    if (mounted.current) setFailure(null);
-    settle(() => onChange({ [field]: value })).then(
-      () => done(field, true),
-      (error: unknown) => done(field, false, error),
-    );
-  };
-
-  /** A save answered: the waiting time goes next — even after an unmount, it is what the
-   *  person entered last — and supersedes this answer, a failure included. */
-  const done = (field: QuietField, ok: boolean, error?: unknown) => {
-    running.current[field] = false;
-    if (Object.prototype.hasOwnProperty.call(waiting.current, field)) {
-      const next = waiting.current[field] ?? null;
-      delete waiting.current[field];
-      send(field, next);
-      return;
-    }
-    if (!mounted.current) return;
-    overlay.settle(field, ok);
-    if (!ok) setFailure(describeFailure(describeError?.(error), labels.failed));
-  };
-
-  /** `draft` entered: the time it names, or `undefined` when that is what the field
-   *  already holds and nothing is to be sent. Queued behind the field's running save. */
-  const save = (field: QuietField, draft: string): string | null | undefined => {
-    const next = draft || null;
-    if (next === saved(field)) return undefined;
-    if (running.current[field]) waiting.current[field] = next;
-    else send(field, next);
-    return next;
-  };
-
-  /** The typed time, entered: saved unless it is what the field already holds. */
-  const enter = (field: QuietField) => {
-    const draft = drafts[field];
-    if (draft === undefined) return;
-    setDrafts((current) => {
-      const rest = { ...current };
-      delete rest[field];
-      return rest;
-    });
-    const next = save(field, draft);
-    if (next !== undefined) overlay.set(field, next);
-  };
-
-  // Leaving the card is leaving the field. A focused input removed with its card fires no
-  // blur — Escape on the settings sheet, a shortcut that navigates — and the time it showed
-  // as typed was dropped (0.52 code review, quiet-hours-setting.tsx; save-on-blur is FLW-4's
-  // decision). So whatever is still typed is entered as the card goes. A ref to this
-  // render's drafts and saved values, assigned in an effect, never during render.
-  const leave = useRef<() => void>(() => {});
-  useEffect(() => {
-    leave.current = () => {
-      for (const [field, draft] of Object.entries(drafts) as [QuietField, string][]) save(field, draft);
-    };
-  });
-  useEffect(() => () => leave.current(), []);
-
-  const type = (field: QuietField, value: string) => setDrafts((current) => ({ ...current, [field]: value }));
-  const enterOnEnter = (field: QuietField, event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter") enter(field);
-  };
-
-  const anySet = Boolean(startShown || endShown);
-  const halfSet = Boolean(startShown) !== Boolean(endShown);
-
-  return (
-    <Card {...rest} className={cn("p-4 space-y-3", className)}>
-      <div>
-        <SettingsCardTitle>{labels.quietTitle}</SettingsCardTitle>
-        <div className={CARD_DESCRIPTION_CLASS}>{labels.quietDescription(inbox, held)}</div>
-      </div>
-      <div className="flex flex-wrap items-end gap-3">
-        <TimeInput
-          id={`${id}-start`}
-          label={labels.quietFrom}
-          value={startShown}
-          onValueChange={(value) => type("quiet_hours_start", value)}
-          onBlur={() => enter("quiet_hours_start")}
-          onKeyDown={(event) => enterOnEnter("quiet_hours_start", event)}
-          disabled={disabled}
-          commit={COMMIT_EXCEPT_BILLING}
-          className="w-36"
-        />
-        <TimeInput
-          id={`${id}-end`}
-          label={labels.quietUntil}
-          value={endShown}
-          onValueChange={(value) => type("quiet_hours_end", value)}
-          onBlur={() => enter("quiet_hours_end")}
-          onKeyDown={(event) => enterOnEnter("quiet_hours_end", event)}
-          disabled={disabled}
-          commit={COMMIT_EXCEPT_BILLING}
-          className="w-36"
-        />
-      </div>
-      {halfSet && (
-        <p className="text-xs text-warning" data-quiet-incomplete="">
-          {labels.quietIncomplete}
-        </p>
-      )}
-      {anySet && (
-        <p className={CARD_DESCRIPTION_CLASS} data-quiet-zone="">
-          {labels.quietZone(zoneName(accountZone, labels.regions))}
-        </p>
-      )}
-      <FailureLine>{failure}</FailureLine>
-    </Card>
-  );
-}

package/src/notifications/unsubscribe-panel.tsx

@@ -1,200 +0,0 @@
-import { useRef, useState } from "react";
-import type { ComponentPropsWithRef, ReactNode } from "react";
-import { CheckCircle2, Link2Off } from "lucide-react";
-
-import type { LabelOverride } from "../i18n/kit-labels";
-import { cn } from "../lib/cn";
-import { errorBodyWithCode } from "../auth/auth-errors";
-import { httpStatusOf } from "../lib/http-status";
-import { INTRO_CLASS, OUTCOME_CLASS, STATUS_HEADING_CLASS, useFocusWhen } from "../auth/status-parts";
-import type { AuthHeadingLevel } from "../auth/status-parts";
-import { Button } from "../components/button";
-import { EmptyState } from "../components/empty-state";
-import { useMounted } from "../hooks/use-mounted";
-import { FailureLine, useNotificationsLabels } from "./notification-parts";
-import type { NotificationsLabels } from "./notifications-labels";
-
-/** A type id, as the server's registry allows it (§2.1). */
-const TYPE_ID = /^[a-z][a-z0-9_]{1,39}$/;
-/** base64url, unpadded, as the token's `<data>` is written (§3.6). */
-const BASE64URL = /^[A-Za-z0-9_-]+$/;
-
-/**
- * The notification type an unsubscribe token names, read from its `<data>` half —
- * `v1.<base64url("<user_id>:<type id>")>.<mac>` (docs/notifications-harmonization.md
- * §3.6) — or `null` for a token that does not parse. Only the claim is read: the MAC is
- * the server's to check, so a forged token still names a type here and the server
- * refuses it. For the page's words ("You get e-mails about: Overdue invoices").
- */
-export function unsubscribeTokenType(token: string): string | null {
-  const parts = token.split(".");
-  if (parts.length !== 3) return null;
-  const [version, data, mac] = parts;
-  if (version !== "v1" || !BASE64URL.test(data) || !BASE64URL.test(mac) || data.length % 4 === 1) return null;
-  let claim: string;
-  try {
-    claim = atob(data.replace(/-/g, "+").replace(/_/g, "/") + "=".repeat((4 - (data.length % 4)) % 4));
-  } catch {
-    return null;
-  }
-  const colon = claim.indexOf(":");
-  if (colon < 1) return null;
-  const type = claim.slice(colon + 1);
-  return TYPE_ID.test(type) ? type : null;
-}
-
-/** server-kit's `UnsubscribeTokenError`: 400 `{code: "unsubscribe_invalid"}`. A body
- *  thrown as it came, with no status, counts on its code. */
-function defaultIsInvalid(error: unknown): boolean {
-  const coded = errorBodyWithCode(error, (code) => code === "unsubscribe_invalid") !== undefined;
-  const status = httpStatusOf(error);
-  return coded && (status === undefined || status === 400);
-}
-
-export interface UnsubscribePanelProps extends Omit<ComponentPropsWithRef<"div">, "children" | "title"> {
-  /** The `token` from the page's query (`/unsubscribe?token=…`). */
-  token: string;
-  /** The app's name, for "Stop all notification e-mails from {app}". */
-  appName: string;
-  /** The type's name in the app's words, from {@link unsubscribeTokenType}. Without it
-   *  the page says only that notification mail comes. */
-  typeLabel?: string;
-  /** `POST /notifications/unsubscribe/{token}`: that type's e-mail off. */
-  onStop: (token: string) => Promise<unknown>;
-  /** `POST /notifications/unsubscribe/{token}/all`: every e-mail switch off. */
-  onStopAll: (token: string) => Promise<unknown>;
-  /** Settings → Notifications, through the provider's link component. */
-  settingsHref: string;
-  /** Whether a rejection means the link is no good. Default: a 400 with
-   *  `code: "unsubscribe_invalid"`. Anything else is "try again". */
-  isInvalid?: (error: unknown) => boolean;
-  /** The heading. Default `labels.unsubscribeTitle`; `null` draws none, for a page that
-   *  puts it in `AuthLayout`'s `title`. */
-  title?: ReactNode;
-  /** The heading's level. Default `h2`, under the page's `h1`. */
-  headingAs?: AuthHeadingLevel;
-  labels?: LabelOverride<NotificationsLabels>;
-}
-
-type Phase = "ready" | "these" | "all" | "stopped-these" | "stopped-all" | "invalid" | "failed";
-
-/**
- * The body of an app's signed-out `/unsubscribe` page (docs/notifications-harmonization.md
- * §3.6, §4.2) — the page a notification mail's footer links to. It works signed in or
- * out (auth §7), and is not a card.
- *
- * **Nothing happens on a GET**: link scanners fetch every URL, so the page asks first —
- * "Stop these e-mails", or "Stop all notification e-mails from {app}" — and only a press
- * POSTs. A mail client's one-click POST goes to the server's route directly, without
- * this page. Account mail is not a notification and keeps coming; the page says so, and
- * then how to turn the mail back on (Settings → Notifications).
- *
- * A token that does not parse is "this link doesn't work" at once, with no request; the
- * server's refusal (`unsubscribe_invalid`) says the same. Any other failure is "try
- * again", the buttons still there. A valid token always answers 200 — also when the
- * switch was already off or the account is gone — so the done state reveals nothing.
- */
-export function UnsubscribePanel({
-  token,
-  appName,
-  typeLabel,
-  onStop,
-  onStopAll,
-  settingsHref,
-  isInvalid = defaultIsInvalid,
-  title,
-  headingAs: Heading = "h2",
-  labels: labelsProp,
-  className,
-  ...rest
-}: UnsubscribePanelProps) {
-  const labels = useNotificationsLabels(labelsProp);
-  const parses = unsubscribeTokenType(token) !== null;
-  const [phase, setPhase] = useState<Phase>("ready");
-  const mounted = useMounted();
-  const outcomeRef = useRef<HTMLDivElement>(null);
-  const shown: Phase = parses ? phase : "invalid";
-  const done = shown === "stopped-these" || shown === "stopped-all";
-  useFocusWhen(done, outcomeRef);
-
-  const stop = (which: "these" | "all") => {
-    if (shown !== "ready" && shown !== "failed") return;
-    setPhase(which);
-    const call = which === "these" ? onStop : onStopAll;
-    call(token).then(
-      () => {
-        if (mounted.current) setPhase(which === "these" ? "stopped-these" : "stopped-all");
-      },
-      (error: unknown) => {
-        if (mounted.current) setPhase(isInvalid(error) ? "invalid" : "failed");
-      },
-    );
-  };
-
-  const settingsLink = (
-    <Button href={settingsHref} variant="secondary">
-      {labels.openSettings}
-    </Button>
-  );
-
-  let body: ReactNode;
-  if (shown === "invalid") {
-    body = (
-      <EmptyState
-        tone="danger"
-        icon={<Link2Off />}
-        title={labels.invalidLink}
-        action={settingsLink}
-        className={OUTCOME_CLASS}
-      />
-    );
-  } else if (done) {
-    body = (
-      <div ref={outcomeRef} tabIndex={-1} className="outline-none">
-        <EmptyState
-          tone="success"
-          icon={<CheckCircle2 />}
-          title={shown === "stopped-these" ? labels.stoppedThese : labels.stoppedAll(appName)}
-          hint={labels.stoppedHint(labels.accountMail, labels.turnBackOn)}
-          action={settingsLink}
-          className={OUTCOME_CLASS}
-        />
-      </div>
-    );
-  } else {
-    const working = shown === "these" || shown === "all";
-    body = (
-      <>
-        <p className={INTRO_CLASS}>{typeLabel ? labels.unsubscribeAbout(typeLabel) : labels.unsubscribeGeneric}</p>
-        <p className={INTRO_CLASS}>{labels.accountMail}</p>
-        <div className="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
-          <Button
-            type="button"
-            pending={shown === "these"}
-            disabled={working && shown !== "these"}
-            onClick={() => stop("these")}
-          >
-            {labels.stopThese}
-          </Button>
-          <Button
-            type="button"
-            variant="secondary"
-            pending={shown === "all"}
-            disabled={working && shown !== "all"}
-            onClick={() => stop("all")}
-          >
-            {labels.stopAll(appName)}
-          </Button>
-        </div>
-        {shown === "failed" && <FailureLine>{labels.failed}</FailureLine>}
-      </>
-    );
-  }
-
-  return (
-    <div {...rest} data-state={shown} className={cn("space-y-3", className)}>
-      {title === null ? null : <Heading className={STATUS_HEADING_CLASS}>{title ?? labels.unsubscribeTitle}</Heading>}
-      {body}
-    </div>
-  );
-}