feat(design): the Copy rule — names, verbs, dates and units (E28 S3g)

The owner's picks (all the recommended options) become DESIGN.md's Copy chapter and a sweep of both languages (742 values, no key drift): - One name per feature: the rail's label, which may shorten it (Alerts -> Notifications, Fiókok -> Felhasználók, Download Center -> Downloads, Channel manager -> Channels); one "sync from YouTube" verb. - Four verbs, four meanings (Delete / Remove / Dismiss / Discard, and their Hungarian pairs), checked against what each action does. - Sentence case, the app's places capitalised; "…" on a command that asks first (a popover or form title got its own key without it); one-sentence messages without a stop or a tick, "Couldn't …"; curly quotes. - Dates only from lib/format.ts, in the UI language: formatDateTime names the month and stops at the minute (it printed "9/27/2026, 8:30:14 AM"), formatDateTimeSec for the log, the audit and the recorder; ui/RelativeTime pairs "3d ago" with the exact minute on hover. local/date-format refuses toLocale*String and Intl date formatters elsewhere. - Units from Intl, short (formatUnit): runtimes, totals, the Scheduler countdown, the stats range, the player's tap skip. "2h 13m" was English in both languages. - src/i18n/copyRule.test.ts holds the machine-readable part (quotes, "...", ticks, bare unit letters).
2026-09-27 05:46:17 +02:00
parent 2c65edfffd
commit bd6aaa1e43
100 changed files with 1193 additions and 964 deletions
@@ -43,7 +43,7 @@ domain-free.

 B5 glass roles; a bare glass class is a lint error), `Badge` (a static label), `LinkButton` / `IconLink` (a
 link wearing the button face) over `buttonStyles`, `Skeleton` (B8 first loads, through `LoadingState shape`), `NavRail` (B7), `form`, `DraftSaveBar`, `Combobox`, `FilterSelect`, `SegmentedToggle`, `SortControl`, `ColumnSortControl`, `PriorityStepper`, `UndoToolbar` |
-| data display | `DataTable`, `tableHeader` + `tableAlign`, `Pager` + `pagerContent`, `VirtualGrid` + `gridColumns` (the column/width maths, incl. the ultrawide `maxCols` cap), `readAhead`, `Carousel`, `MediaCard` + `mediaCardStyles` (the one media card, docs/DESIGN.md "Media card") + `MediaPreview` / `useMediaPreview` (its mouse-rest preview), `NavGrid` (a plain grid, list or table body the keyboard walks — `DataTable`, `VirtualGrid` and `Carousel` take `keyboardNav`), `Avatar`, `CountBadge`, `ItemCount`, `FilterChipGroup` |
+| data display | `DataTable`, `tableHeader` + `tableAlign`, `Pager` + `pagerContent`, `VirtualGrid` + `gridColumns` (the column/width maths, incl. the ultrawide `maxCols` cap), `readAhead`, `Carousel`, `MediaCard` + `mediaCardStyles` (the one media card, docs/DESIGN.md "Media card") + `MediaPreview` / `useMediaPreview` (its mouse-rest preview), `NavGrid` (a plain grid, list or table body the keyboard walks — `DataTable`, `VirtualGrid` and `Carousel` take `keyboardNav`), `Avatar`, `CountBadge`, `ItemCount`, `FilterChipGroup`, `RelativeTime` ("3d ago" with the exact minute on hover, docs/DESIGN.md "Copy") |
 | page & panel structure | `PageShell` + `pageToolbarSlot` + `pageHeading`, `PageScroller`, `Headings` (`PageHeading`, `SectionLabel`), `SkipLink` + `landmarks`, `FilterFold` (B4), `PanelGroup`, `PanelGroups`, `Tabs`, `BackToTop` |
 | state & messaging | `QueryState`, `Banner`, `InlineNotice` |

@@ -0,0 +1,40 @@
+// @vitest-environment jsdom
+//
+// docs/DESIGN.md "Copy": a relative time in a list carries the exact moment on hover.
+import { afterEach, describe, expect, it } from "vitest";
+import { cleanup, render } from "@testing-library/react";
+import { formatDateTime, formatDateTimeSec, relativeTime } from "../../lib/format";
+import { RelativeTime } from "./RelativeTime";
+
+afterEach(cleanup);
+
+const THREE_DAYS_AGO = new Date(Date.now() - 3 * 86400_000).toISOString();
+
+describe("RelativeTime", () => {
+  it("says how long ago, and names the exact minute on hover", () => {
+    const { container } = render(<RelativeTime at={THREE_DAYS_AGO} />);
+    const el = container.querySelector("time")!;
+    expect(el.textContent).toBe(relativeTime(THREE_DAYS_AGO));
+    expect(el.getAttribute("title")).toBe(formatDateTime(THREE_DAYS_AGO));
+    expect(el.getAttribute("dateTime")).toBe(THREE_DAYS_AGO);
+  });
+
+  it("takes epoch millis, and the log form with seconds", () => {
+    const ms = Date.parse(THREE_DAYS_AGO);
+    const { container } = render(<RelativeTime at={ms} seconds />);
+    expect(container.querySelector("time")!.getAttribute("title")).toBe(
+      formatDateTimeSec(THREE_DAYS_AGO),
+    );
+  });
+
+  it("shows the placeholder for a missing or unreadable moment, never a bare title", () => {
+    const { container } = render(
+      <>
+        <RelativeTime at={null} empty="—" />
+        <RelativeTime at="not a date" />
+      </>,
+    );
+    expect(container.textContent).toBe("—");
+    expect(container.querySelector("time")).toBeNull();
+  });
+});
@@ -0,0 +1,32 @@
+import { formatDateTime, formatDateTimeSec, relativeFromMs } from "../../lib/format";
+
+// docs/DESIGN.md "Copy": a relative time ("3d ago") says how recent something is in a list, and the
+// exact moment is one hover away — so the pair travels together here instead of every list
+// remembering (or forgetting) its own `title`. `seconds` is the log form (the audit). An unreadable
+// or missing moment renders `empty` ("—" in a table cell) or nothing.
+export function RelativeTime({
+  at,
+  seconds = false,
+  empty = "",
+  className,
+}: {
+  /** An ISO timestamp, or epoch millis (a client-side notification). */
+  at: string | number | null | undefined;
+  seconds?: boolean;
+  empty?: string;
+  className?: string;
+}) {
+  const ms = typeof at === "number" ? at : at ? new Date(at).getTime() : NaN;
+  const text = Number.isFinite(ms) ? relativeFromMs(ms) : "";
+  if (!text) return empty ? <span className={className}>{empty}</span> : null;
+  const iso = new Date(ms).toISOString();
+  return (
+    <time
+      dateTime={iso}
+      title={seconds ? formatDateTimeSec(iso) : formatDateTime(iso)}
+      className={className}
+    >
+      {text}
+    </time>
+  );
+}