@chatwarden/player-react 0.0.0-stage → 0.1.2

package/src/MyRecord.tsx

@@ -0,0 +1,60 @@
+import { useId } from 'react';
+import type { PlayerClient } from './client.js';
+import { usePlayerData } from './hooks.js';
+import { WARNING_DAYS } from './constants.js';
+import { AppealLink, Card, ErrorBlock, Facts, kindKey, Lines, Root, useUi } from './ui.js';
+import type { PlayerUiProps } from './ui.js';
+
+export interface MyRecordProps extends PlayerUiProps {
+  client: PlayerClient;
+  /** Where "Think this is a mistake?" goes: an `http(s)` address or a path starting with `/`. Left out when absent or unsafe. */
+  appealUrl?: string;
+  /** Change it to load the record again. */
+  refreshKey?: number | string;
+}
+
+/** "My record": what is on the player's record now, newest first, from `GET /record`; or a calm line when it is clear. */
+export function MyRecord(props: MyRecordProps) {
+  const { client, appealUrl, refreshKey, theme, className } = props;
+  const ui = useUi(props);
+  const { t } = ui;
+  const state = usePlayerData(() => client.record(), refreshKey);
+  const titleId = useId();
+  const linesId = useId();
+  const items = state.data === undefined ? [] : [...state.data].sort((a, b) => b.createdAt - a.createdAt);
+
+  return (
+    <Root theme={theme} className={className}>
+      <section className="cw-section" aria-labelledby={titleId}>
+        <h2 id={titleId} className="cw-title">
+          {t('player.record.title')}
+        </h2>
+        {state.error !== null && <ErrorBlock ui={ui} what={t('player.record.loadFailed')} error={state.error} onRetry={state.reload} />}
+        {state.data === undefined && state.error === null && (
+          <p className="cw-state" role="status">
+            {t('player.record.loading')}
+          </p>
+        )}
+        {state.data !== undefined && items.length === 0 && <p className="cw-state">{t('player.record.empty')}</p>}
+        {items.length > 0 && (
+          <>
+            <p className="cw-body">{t('player.record.intro', { days: WARNING_DAYS })}</p>
+            <AppealLink ui={ui} href={appealUrl} />
+            <ul className="cw-items" aria-labelledby={titleId}>
+              {items.map((notice, i) => (
+                <li key={notice.id} className="cw-item">
+                  <div className="cw-head">
+                    <Card kind={notice.kind} />
+                    <h3 className="cw-kind">{t(kindKey(notice.kind))}</h3>
+                  </div>
+                  <Facts ui={ui} notice={notice} record />
+                  <Lines ui={ui} notice={notice} id={`${linesId}-${i}`} />
+                </li>
+              ))}
+            </ul>
+          </>
+        )}
+      </section>
+    </Root>
+  );
+}

package/src/NoticeQueue.tsx

@@ -0,0 +1,203 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import type { RefObject } from 'react';
+import type { PlayerNotice } from '@chatwarden/core';
+import { toPlayerError } from './client.js';
+import type { PlayerClient, PlayerError } from './client.js';
+import { Dialog } from './Dialog.js';
+import { usePlayerData } from './hooks.js';
+import { AppealLink, bodyKey, Card, errorText, Facts, isSanction, Lines, Portal, Root, titleKey, useUi } from './ui.js';
+import type { DialogHostProps, PlayerUiProps, Ui } from './ui.js';
+
+export interface NoticeQueueProps extends PlayerUiProps, DialogHostProps {
+  client: PlayerClient;
+  /**
+   * Whether a notice may appear now. Pass `false` during a match: notices are held (kept, not dropped, not acknowledged) and
+   * appear, oldest first, when it turns `true` again; the list is asked for once more at that moment, so a notice that arrived during
+   * the match is not missed. Default: `true`.
+   */
+  canShow?: boolean;
+  /** Where "Think this is a mistake?" goes: an `https` address or a relative one (`/appeal`). Left out when absent or unsafe. */
+  appealUrl?: string;
+  /** Change it to ask the server again (for example when your own push channel says a notice is pending). */
+  refreshKey?: number | string;
+  /** Called once for each notice the player acknowledged. */
+  onAcknowledged?: (notice: PlayerNotice) => void;
+  /** Called with how many notices are waiting (shown or held) each time that number changes, after the first load. */
+  onPendingChange?: (count: number) => void;
+}
+
+/**
+ * Shows the player's pending notices, oldest first, one at a time in a modal dialog. Every notice is acknowledged (a warning with
+ * "Acknowledge", the others with "Got it"); the dialog closes after the last one and focus returns to where it was.
+ */
+export function NoticeQueue(props: NoticeQueueProps) {
+  const { client, canShow = true, appealUrl, refreshKey, onAcknowledged, onPendingChange, theme, className, container, returnFocusTo } = props;
+  const ui = useUi(props);
+  const state = usePlayerData(() => client.notices(), refreshKey);
+  // The ids acknowledged since this list arrived. A newer list replaces both, so the server stays the truth.
+  const [done, setDone] = useState<{ list: PlayerNotice[] | undefined; ids: readonly string[] }>({ list: undefined, ids: [] });
+  const gone = done.list === state.data ? done.ids : [];
+  const queue = (state.data ?? []).filter((n) => !gone.includes(n.id)).sort((a, b) => a.createdAt - b.createdAt);
+  const count = queue.length;
+  const loaded = state.data !== undefined;
+  // "Close for now" after a failed acknowledge hides the queue until a newer list arrives (a refresh, or the next release of a hold).
+  const [later, setLater] = useState<PlayerNotice[] | undefined>(undefined);
+  const titleId = useId();
+  const heading = useRef<HTMLHeadingElement>(null);
+  const reload = state.reload;
+
+  // Releasing a hold asks the server once more: a warning that landed during the match must be seen before the next one.
+  const wasShown = useRef(canShow);
+  useEffect(() => {
+    if (canShow && !wasShown.current) reload();
+    wasShown.current = canShow;
+  }, [canShow, reload]);
+
+  const told = useRef(onPendingChange);
+  told.current = onPendingChange;
+  useEffect(() => {
+    if (loaded) told.current?.(count);
+  }, [loaded, count]);
+
+  if (!canShow) return null;
+  if (state.data === undefined) {
+    if (state.error === null) return null;
+    return (
+      <Root theme={theme} className={className}>
+        <div className="cw-error" role="alert">
+          <p>
+            <strong>{ui.t('player.notices.loadFailed')}</strong> {errorText(ui.t, state.error)}
+          </p>
+          <button type="button" className="cw-btn" onClick={state.reload}>
+            {ui.t('player.state.retry')}
+          </button>
+        </div>
+      </Root>
+    );
+  }
+  const current = queue[0];
+  if (current === undefined || later === state.data) return null;
+
+  const acknowledged = (notice: PlayerNotice): void => {
+    setDone({ list: state.data, ids: [...gone, notice.id] });
+    onAcknowledged?.(notice);
+  };
+
+  return (
+    <Portal container={container}>
+    <Root theme={theme} className={className}>
+      {/* One dialog for the whole queue: it opens once and closes once, so focus comes back to where it was after the last notice. */}
+      <Dialog labelledBy={titleId} initialFocus={heading} {...(returnFocusTo === undefined ? {} : { returnFocusTo })}>
+        <NoticeCard
+          key={current.id}
+          ui={ui}
+          client={client}
+          notice={current}
+          total={count}
+          appealUrl={appealUrl}
+          titleId={titleId}
+          heading={heading}
+          onDone={acknowledged}
+          onLater={() => setLater(state.data)}
+        />
+      </Dialog>
+    </Root>
+    </Portal>
+  );
+}
+
+function NoticeCard({
+  ui,
+  client,
+  notice,
+  total,
+  appealUrl,
+  titleId,
+  heading,
+  onDone,
+  onLater,
+}: {
+  ui: Ui;
+  client: PlayerClient;
+  notice: PlayerNotice;
+  /** How many notices are waiting, this one included. It is always the first. */
+  total: number;
+  appealUrl: string | undefined;
+  titleId: string;
+  heading: RefObject<HTMLHeadingElement | null>;
+  onDone: (notice: PlayerNotice) => void;
+  onLater: () => void;
+}) {
+  const { t } = ui;
+  const linesId = useId();
+  const sending = useRef(false);
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState<PlayerError | null>(null);
+
+  // Each notice, not only the first, takes focus at its heading: it is what a screen reader should read next.
+  useEffect(() => heading.current?.focus(), []);
+
+  const acknowledge = async (): Promise<void> => {
+    // One request at a time: a second click, or a second Enter, while one is on its way does nothing.
+    if (sending.current) return;
+    sending.current = true;
+    setBusy(true);
+    setFailure(null);
+    try {
+      await client.ack(notice.id);
+      // `false` (a 200 that is not ours) and a 404 both mean the notice is no longer pending: it is done.
+      onDone(notice);
+    } catch (e) {
+      const error = toPlayerError(e);
+      if (error.status === 404) onDone(notice);
+      else setFailure(error);
+    } finally {
+      sending.current = false;
+      setBusy(false);
+    }
+  };
+
+  const mustAck = notice.kind === 'warning' || notice.mustAcknowledge;
+  return (
+    <>
+      {/* Always drawn, so a screen reader that has seen it empty hears it when a second notice arrives. */}
+      <p className="cw-position" aria-live="polite">
+        {total > 1 ? t('player.notice.position', { n: 1, total }) : null}
+      </p>
+      <div className="cw-head">
+        <Card kind={notice.kind} />
+        <h2 id={titleId} ref={heading} className="cw-title" tabIndex={-1}>
+          {t(titleKey(notice.kind))}
+        </h2>
+      </div>
+      <p className="cw-body">{t(bodyKey(notice.kind))}</p>
+      <Facts ui={ui} notice={notice} />
+      {notice.refCode !== null && <p className="cw-hint">{t('player.notice.refHint')}</p>}
+      <Lines ui={ui} notice={notice} id={linesId} />
+      {isSanction(notice.kind) && <AppealLink ui={ui} href={appealUrl} />}
+      {mustAck && <p className="cw-hint">{t('player.notice.todo.warning')}</p>}
+      {failure !== null && (
+        <div className="cw-error" role="alert">
+          <p>
+            {t('player.notice.ackFailed')} {errorText(t, failure)}
+          </p>
+          {/* The main button below tries again; this is the way out when it keeps failing. The notice stays pending. */}
+          <button type="button" className="cw-btn" onClick={onLater}>
+            {t('player.notice.closeForNow')}
+          </button>
+        </div>
+      )}
+      <div className="cw-actions">
+        <button
+          type="button"
+          className="cw-btn cw-btn--primary"
+          aria-disabled={busy || undefined}
+          aria-busy={busy || undefined}
+          onClick={() => void acknowledge()}
+        >
+          {t(mustAck ? 'player.notice.acknowledge' : 'player.notice.gotIt')}
+        </button>
+      </div>
+    </>
+  );
+}

package/src/Picker.tsx

@@ -0,0 +1,60 @@
+import { useId } from 'react';
+import type { RefObject } from 'react';
+import type { ReasonGroup, ReasonItem } from './reporting.js';
+
+/** The radios, by group. One radio group (one name) across the groups, so the arrow keys walk all of them and Tab stops once. */
+export function Picker(props: {
+  groups: readonly ReasonGroup[];
+  name: string;
+  value: string | null;
+  onChange: (id: string) => void;
+  legend: string;
+  invalid?: boolean;
+  describedBy?: string | undefined;
+  fieldset?: RefObject<HTMLFieldSetElement | null>;
+}) {
+  const { groups, name, value, onChange, legend, invalid, describedBy, fieldset } = props;
+  const base = useId();
+  const choice = (r: ReasonItem) => {
+    const label = `${base}-${r.id}-l`;
+    const hint = `${base}-${r.id}-h`;
+    return (
+      <label key={r.id} className="cw-choice">
+        <input
+          type="radio"
+          name={name}
+          value={r.id}
+          checked={value === r.id}
+          aria-labelledby={label}
+          aria-describedby={r.hint === '' ? undefined : hint}
+          onChange={() => onChange(r.id)}
+        />
+        <span className="cw-choice-text">
+          <span id={label}>{r.label}</span>
+          {r.hint !== '' && (
+            <span id={hint} className="cw-choice-hint">
+              {r.hint}
+            </span>
+          )}
+        </span>
+      </label>
+    );
+  };
+  return (
+    <fieldset ref={fieldset} className="cw-fieldset" role="radiogroup" aria-invalid={invalid || undefined} aria-describedby={invalid ? describedBy : undefined}>
+      <legend className="cw-legend">{legend}</legend>
+      {groups.map((g, i) =>
+        g.name === '' ? (
+          <div key={`g${i}`} className="cw-group">
+            {g.items.map(choice)}
+          </div>
+        ) : (
+          <fieldset key={`g${i}`} className="cw-fieldset cw-group">
+            <legend className="cw-group-legend">{g.name}</legend>
+            {g.items.map(choice)}
+          </fieldset>
+        ),
+      )}
+    </fieldset>
+  );
+}

package/src/ReportDialog.tsx

@@ -0,0 +1,304 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import type { FormEvent } from 'react';
+import type { PlayerReporting, ReportDetailResult, ReportFlow, ReportRefusal, ReportResult } from '@chatwarden/core';
+import { NOTE_MAX } from './constants.js';
+import { PlayerError } from './client.js';
+import { Dialog } from './Dialog.js';
+import { DETAIL_REFUSED_TEXT, FollowUp } from './FollowUp.js';
+import type { FollowUpOutcome, ReportFollowUp } from './FollowUp.js';
+import { Picker } from './Picker.js';
+import type { PlayerText } from './i18n.js';
+import { groupReasons, readReporting } from './reporting.js';
+import type { ReasonItem } from './reporting.js';
+import { errorText, Portal, Root, useUi } from './ui.js';
+import type { DialogHostProps, PlayerUiProps } from './ui.js';
+
+/**
+ * What the player filled in. Your server adds the room and the seats and calls `cw.reports.submit({ ...draft, roomId, reporterSeat,
+ * targetSeat })`. The dialog sends `reason` (an id from the studio's `reporting` list, or nothing, as in one tap). A reason is only a
+ * hint: the moderators decide what a report really is.
+ */
+export interface ReportDraft {
+  /** The reason the player chose: an id from `reporting.reasons`. Left out when none was chosen. */
+  reason?: string;
+  /** The note, trimmed; left out when blank. */
+  note?: string;
+}
+
+export type { ReportFollowUp } from './FollowUp.js';
+
+export interface ReportDialogProps extends PlayerUiProps, DialogHostProps {
+  /**
+   * Sends the report: your server calls `cw.reports.submit({ ...draft, roomId, reporterSeat, targetSeat })` and returns its
+   * `ReportResult`. A refusal is a result, not an error; reject only when no answer arrived.
+   */
+  onSubmit: (draft: ReportDraft) => Promise<ReportResult>;
+  /**
+   * The optional follow-up after a one-tap report: your server calls `cw.reports.addDetail(reportId, reporterSeat, detail)` (the seat
+   * from its own session, never from the page) and returns its `ReportDetailResult`. Without it the "Add a reason" step is not shown.
+   */
+  onAddDetail?: (reportId: string, detail: ReportFollowUp) => Promise<ReportDetailResult>;
+  /** Called on Escape, Cancel and Close. Unmount the dialog in answer. */
+  onClose: () => void;
+  /**
+   * How reporting works here: `(await createPlayerClient.rules()).reporting`, the `reporting` part of `GET /rules`. It sets the flow
+   * (one tap, pick a reason first, reason required), the reasons (grouped, with hints) and the thank-you. Without it the dialog is
+   * one tap with the dialog's own words, the same as when `GET /rules` cannot be loaded.
+   */
+  reporting?: PlayerReporting;
+  /** Who is being reported, as the player knows them (a handle). Shown as text in the heading. */
+  targetName?: string;
+  /** The message being reported. Shown as quoted text (cut if very long) so the player sees what they are reporting. */
+  line?: string;
+}
+
+// One plain message for each refusal the kit has. Anything else (a refusal a newer kit adds) gets the last one.
+const REFUSED_TEXT: Readonly<Record<ReportRefusal, PlayerText>> = {
+  duplicate: 'player.report.refused.duplicate',
+  rate: 'player.report.refused.rate',
+  self: 'player.report.refused.self',
+  not_player: 'player.report.refused.not_player',
+  off: 'player.report.refused.off',
+  suspended: 'player.report.refused.suspended',
+  reason_required: 'player.report.refused.reason_required',
+  reason_unknown: 'player.report.refused.reason_unknown',
+};
+
+/** How much of the reported message is quoted on the screen. */
+const LINE_MAX = 280;
+
+/** A failure to send as an error the components can word: anything that is not already a PlayerError is a dropped connection. */
+const failureOf = (e: unknown): PlayerError =>
+  e instanceof PlayerError ? e : new PlayerError({ status: 0, code: 'network', message: 'Could not reach the server.' });
+
+/** Anything that is not a result object (undefined, null, a string) is not a success and not a crash: it reads as an unknown refusal. */
+const resultOf = <T,>(answer: unknown, unknown: T): T => (typeof answer === 'object' && answer !== null && !Array.isArray(answer) ? (answer as T) : unknown);
+
+const quoted = (line: string | undefined): string => {
+  const plain = (line ?? '').replace(/\s+/g, ' ').trim();
+  return plain.length > LINE_MAX ? `${plain.slice(0, LINE_MAX).trimEnd()}…` : plain;
+};
+
+/** The screen to draw: the flow, the reasons as the dialog will list them, and the thank-you. */
+interface Screen {
+  flow: ReportFlow;
+  reasons: ReasonItem[];
+  thanks: string;
+}
+
+/**
+ * A dialog for reporting a message or a player. How it works is the studio's setting (`reporting`, from `GET /rules`):
+ * - `one_tap` (the default): one step, "Report this message?" and a Report button. The report is filed at once and the thank-you
+ *   shown; an optional "Add a reason" step then attaches a reason and a note to the same report (`onAddDetail`).
+ * - `reason_first`: the reasons in groups, then an optional note; a reason can be skipped.
+ * - `reason_required`: the same without the skip.
+ * The reason is only a hint for the moderators. Every refusal the kit can give has its own plain message. Render it when the player
+ * chooses to report, and unmount it in `onClose`.
+ */
+export function ReportDialog(props: ReportDialogProps) {
+  const { onSubmit, onAddDetail, onClose, targetName, line, theme, className, container, returnFocusTo } = props;
+  const ui = useUi(props);
+  const { t } = ui;
+  const heading = useRef<HTMLHeadingElement>(null);
+  const picker = useRef<HTMLFieldSetElement>(null);
+  // One thing on its way at a time, report or follow-up: a second click, or a second Enter, does nothing.
+  const sending = useRef(false);
+  const titleId = useId();
+  const groupName = useId();
+  const noteId = useId();
+  const hintId = useId();
+  const missingId = useId();
+  const [reason, setReason] = useState<string | null>(null);
+  const [note, setNote] = useState('');
+  const [missing, setMissing] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [failure, setFailure] = useState<PlayerError | null>(null);
+  const [result, setResult] = useState<ReportResult | null>(null);
+  // How the follow-up after a one-tap report ended, and whether its time is up (the kit takes one until `detailUntil`).
+  const [dDone, setDDone] = useState<FollowUpOutcome | null>(null);
+  const [expired, setExpired] = useState(false);
+
+  const screen: Screen = (() => {
+    // No `reporting` (or something that is not the payload): one tap with the dialog's own words, as when `GET /rules` cannot be loaded.
+    const read = readReporting(props.reporting) ?? { flow: 'one_tap' as const, reasons: [], thanks: '' };
+    // A flow that asks for a reason has nothing to ask with when the list is empty: it is one tap.
+    return { flow: read.reasons.length === 0 ? 'one_tap' : read.flow, reasons: read.reasons, thanks: read.thanks.trim() };
+  })();
+  const { flow } = screen;
+  const groups = groupReasons(screen.reasons);
+  const chosen = screen.reasons.find((r) => r.id === reason);
+  // The note: when the chosen reason asks for it.
+  const showNote = chosen?.asksNote === true;
+
+  // The form is gone once there is an answer: focus goes back to the heading, so the answer is read and focus is not lost.
+  useEffect(() => {
+    if (result !== null) heading.current?.focus();
+  }, [result]);
+  useEffect(() => {
+    if (dDone !== null) heading.current?.focus();
+  }, [dDone]);
+  // The follow-up stops being offered when the kit would no longer take it.
+  const until = result?.ok === true && typeof result.detailUntil === 'number' && Number.isFinite(result.detailUntil) ? result.detailUntil : null;
+  useEffect(() => {
+    if (until === null) return undefined;
+    let timer: ReturnType<typeof setTimeout> | undefined;
+    // Looks at the clock again when the time comes, so a clock that has not moved does not end the offer early.
+    const check = (): void => {
+      const left = until - ui.now();
+      if (left < 0) setExpired(true);
+      else timer = setTimeout(check, Math.min(Math.max(left + 1, 50), 2_000_000_000));
+    };
+    check();
+    return () => clearTimeout(timer);
+  }, [until]);
+
+  const send = async (draft: ReportDraft): Promise<void> => {
+    sending.current = true;
+    setBusy(true);
+    setFailure(null);
+    try {
+      setResult(resultOf<ReportResult>(await onSubmit(draft), { ok: false, refused: 'unknown' } as unknown as ReportResult));
+    } catch (error) {
+      setFailure(failureOf(error));
+    } finally {
+      sending.current = false;
+      setBusy(false);
+    }
+  };
+
+  const trimmed = note.trim();
+  const submit = (e: FormEvent): void => {
+    e.preventDefault();
+    if (sending.current) return;
+    if (flow !== 'one_tap' && reason === null) {
+      setMissing(true);
+      picker.current?.querySelector<HTMLElement>('input')?.focus();
+      return;
+    }
+    const draft: ReportDraft = flow === 'one_tap' ? {} : { reason: reason as string };
+    if (showNote && trimmed !== '') draft.note = trimmed;
+    void send(draft);
+  };
+  const skip = (): void => {
+    if (sending.current) return;
+    void send(showNote && trimmed !== '' ? { note: trimmed } : {});
+  };
+
+  const reportId = result?.ok === true && typeof result.reportId === 'string' && result.reportId !== '' ? result.reportId : null;
+  const quote = quoted(line);
+  const oneTapTitle = quote !== '' ? t('player.report.titleOneTap') : targetName === undefined ? t('player.report.titleOneTapPlayer') : t('player.report.titleOneTapNamed', { name: targetName });
+  const title = flow === 'one_tap' ? oneTapTitle : targetName === undefined ? t('player.report.title') : t('player.report.titleNamed', { name: targetName });
+  const taken = result?.ok === true;
+  const refusal = result !== null && !taken ? result : null;
+  // After an answer the heading says what happened (a question would be stale), and focus is on it.
+  const shownTitle = result === null ? title : taken ? t('player.report.titleSent') : t('player.report.titleRefused');
+  const remaining = taken && typeof result.remaining === 'number' && Number.isFinite(result.remaining) && result.remaining >= 0 ? result.remaining : null;
+  const refusedKey = (r: unknown): PlayerText => {
+    const refused = (r as { refused?: unknown }).refused;
+    return typeof refused === 'string' && Object.hasOwn(REFUSED_TEXT, refused) ? REFUSED_TEXT[refused as ReportRefusal] : 'player.report.refused.unknown';
+  };
+  const detailRefusedKey = (refused: string): PlayerText => (Object.hasOwn(DETAIL_REFUSED_TEXT, refused) ? (DETAIL_REFUSED_TEXT[refused] as PlayerText) : 'player.report.detail.failed');
+  const detailUntil = taken && typeof result.detailUntil === 'number' && Number.isFinite(result.detailUntil) ? result.detailUntil : null;
+  const timeUp = expired || (detailUntil !== null && ui.now() > detailUntil);
+  const canFollow = taken && flow === 'one_tap' && reportId !== null && onAddDetail !== undefined && screen.reasons.length > 0 && !timeUp;
+  const needText: PlayerText = flow === 'reason_first' ? 'player.report.needReasonOrSkip' : 'player.report.needReason';
+
+  return (
+    <Portal container={container}>
+    <Root theme={theme} className={className}>
+      <Dialog labelledBy={titleId} initialFocus={heading} onEscape={() => !sending.current && onClose()} {...(returnFocusTo === undefined ? {} : { returnFocusTo })}>
+        <h2 id={titleId} ref={heading} className="cw-title" tabIndex={-1}>
+          {shownTitle}
+        </h2>
+        {/* Always there, so what is written into it is announced: the thank-you, and "Added. Thanks.". */}
+        <div role="status" className="cw-live">
+          {taken && (
+            <p className="cw-result">
+              {screen.thanks === '' ? t('player.report.thanks') : screen.thanks}
+              {remaining !== null && ` ${t('player.report.remaining', { count: remaining })}`}
+            </p>
+          )}
+          {dDone?.ok === true && <p className="cw-result">{t('player.report.detail.added')}</p>}
+        </div>
+        {result === null ? (
+          <form onSubmit={submit} noValidate>
+            <p className="cw-body">{flow === 'one_tap' ? t('player.report.oneTap.intro') : t('player.report.intro')}</p>
+            {quote !== '' && <blockquote className="cw-quote">{t('player.report.quote', { line: quote })}</blockquote>}
+            {flow !== 'one_tap' && (
+              <Picker
+                groups={groups}
+                name={groupName}
+                value={reason}
+                legend={t('player.report.legend')}
+                invalid={missing}
+                describedBy={missingId}
+                fieldset={picker}
+                onChange={(id) => {
+                  setReason(id);
+                  setMissing(false);
+                }}
+              />
+            )}
+            {missing && (
+              <p id={missingId} className="cw-field-error" role="alert">
+                {t(needText)}
+              </p>
+            )}
+            {showNote && (
+              <>
+                <label className="cw-label" htmlFor={noteId}>
+                  {t('player.report.note')}
+                </label>
+                <textarea id={noteId} className="cw-textarea" rows={4} maxLength={NOTE_MAX} value={note} aria-describedby={hintId} onChange={(e) => setNote(e.target.value)} />
+                <p id={hintId} className="cw-hint">
+                  {t('player.report.noteHint', { max: NOTE_MAX })}
+                </p>
+              </>
+            )}
+            {failure !== null && (
+              <p className="cw-error" role="alert">
+                {t('player.report.failed')} {errorText(t, failure)}
+              </p>
+            )}
+            <div className="cw-actions">
+              <button type="submit" className="cw-btn cw-btn--primary" aria-disabled={busy || undefined} aria-busy={busy || undefined}>
+                {flow === 'one_tap' ? t('player.report.oneTap.send') : t('player.report.send')}
+              </button>
+              {flow === 'reason_first' && (
+                <button type="button" className="cw-btn" aria-disabled={busy || undefined} aria-busy={busy || undefined} onClick={skip}>
+                  {t('player.report.skip')}
+                </button>
+              )}
+              {/* Closing while a report is on its way would lose the answer: busy, like Escape. */}
+              <button type="button" className="cw-btn" aria-disabled={busy || undefined} onClick={() => !sending.current && onClose()}>
+                {t('player.report.cancel')}
+              </button>
+            </div>
+          </form>
+        ) : (
+          <>
+            {!taken && (
+              <p className="cw-error" role="alert">
+                {t(refusedKey(refusal))}
+              </p>
+            )}
+            {canFollow && dDone === null && (
+              <FollowUp t={t} groups={groups} reportId={reportId} onAddDetail={onAddDetail} sending={sending} busy={busy} onBusy={setBusy} onDone={setDDone} />
+            )}
+            {dDone !== null && !dDone.ok && (
+              <p className="cw-error" role="alert">
+                {t(detailRefusedKey(dDone.refused))}
+              </p>
+            )}
+            <div className="cw-actions">
+              <button type="button" className="cw-btn cw-btn--primary" aria-disabled={busy || undefined} onClick={() => !sending.current && onClose()}>
+                {t('player.report.close')}
+              </button>
+            </div>
+          </>
+        )}
+      </Dialog>
+    </Root>
+    </Portal>
+  );
+}

package/src/RestrictedChatLine.tsx

@@ -0,0 +1,42 @@
+import { timeLeft, untilText } from './format.js';
+import { Card, Root, useUi } from './ui.js';
+import type { PlayerUiProps } from './ui.js';
+
+export interface RestrictedChatLineProps extends PlayerUiProps {
+  /** When the restriction ends (epoch ms), or `null` for no end. From `cw.chat.restricted(...)`. */
+  until: number | null;
+  /** `true` when a moderator turned the chat off, `false` when the automatic filter did (kind `auto`). */
+  byModerator: boolean;
+  /** The reference code to quote to a moderator, when you have one. */
+  refCode?: string;
+}
+
+/** One line for the place a chat box would be, saying why the player cannot type, until when, and who did it. */
+export function RestrictedChatLine(props: RestrictedChatLineProps) {
+  const { until, byModerator, refCode, theme, className } = props;
+  const ui = useUi(props);
+  const { t, locale, timeZone } = ui;
+  const ends = typeof until === 'number' && Number.isFinite(until);
+  const when = ends ? untilText(until, locale, timeZone) : '';
+  const left = ends ? timeLeft(until, ui.now(), locale) : null;
+  const text = !ends
+    ? t(byModerator ? 'player.restricted.moderator.noEnd' : 'player.restricted.filter.noEnd')
+    : left === null
+      ? t('player.restricted.ended', { when })
+      : t(byModerator ? 'player.restricted.moderator.until' : 'player.restricted.filter.until', { when, left });
+
+  return (
+    <Root theme={theme} className={className}>
+      <p className="cw-restricted" role="status">
+        <Card kind="chat" />
+        <span className="cw-text">{text}</span>
+        {refCode !== undefined && (
+          <>
+            {' '}
+            <span className="cw-ref">{t('player.restricted.ref', { code: refCode })}</span>
+          </>
+        )}
+      </p>
+    </Root>
+  );
+}