@terpjs/react-core 0.9.0 → 0.11.0

package/src/SplitPage.tsx

@@ -0,0 +1,150 @@
+import type { ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+
+import { useLayoutContract, verifySlotChildren } from "./layoutContract";
+import { Page } from "./Page";
+import type { PageProps } from "./Page";
+import { injectTerpStyles } from "./styles";
+import { useUiText } from "./uiText";
+import type { UiText } from "./uiText";
+
+injectTerpStyles();
+
+/** How much of the row the list pane takes — a step, not a length (ADR 0097 §4). */
+export type SplitListWidth = "sm" | "md" | "lg";
+
+export type SplitPageProps = Omit<PageProps, "children" | "measure"> & {
+  /** Parent trail for a split screen nested below a hub; aliases `Page`'s `breadcrumbs`. */
+  parents?: PageProps["breadcrumbs"];
+  /**
+   * The list pane's track (default `"md"`).
+   *
+   * Enumerable rather than a percentage or a length, which is the same call `Grid`'s
+   * `minColumn` made and for the same reason: a CSS length here would be a measured value and
+   * therefore an inline style on the panes element — a tenth entry in a ledger that admits only
+   * two permanent kinds (ADR 0094 §3). Three steps cover the cases; an app wanting 37% cannot
+   * have it, which is the trade `gap` already makes.
+   *
+   * A **draggable** divider is deliberately not offered: that is a measured value *and* a
+   * per-user preference, so it waits for the preference seam rather than arriving as an inline
+   * style with nowhere to persist.
+   */
+  listWidth?: SplitListWidth;
+  /**
+   * The two panes, **list first** — a `SplitPane role="list"` then a `SplitPane role="detail"`.
+   *
+   * Order is load-bearing: the tracks are filled by grid auto-placement, so the first pane takes
+   * the narrow one. The contract can see that both children are `SplitPane`s and cannot see
+   * which is which, so this is a convention the render makes obvious rather than a rule the
+   * runtime enforces.
+   */
+  children: ReactNode;
+};
+
+/**
+ * The split archetype: a list beside the record it selects — the master-detail screen.
+ *
+ * It is structured on `HubPage`, not on `DetailPage`, and that is the decision worth knowing.
+ * The obvious shape for two panes is one body slot holding two children, but the layout
+ * contract's runtime check takes a single slot owner and reads `article.children`, so two panes
+ * would be two entries in one slot with nothing distinguishing them. Teaching the contract two
+ * slots per archetype was the invasive option. Instead the panes are the governed thing:
+ * `SplitPage` owns the row element and admits `SplitPane` in it and nothing else, exactly as
+ * `HubPage` owns its grid and admits `HubCard`. `verifySlotChildren`, the mirrored table's
+ * shape and the message builder are all untouched.
+ *
+ * It therefore provides **no** `LayoutSlotContext`, for the reason `HubPage` provides none: the
+ * row element carries a marker that appears in no allow table, so a slot context above it would
+ * refuse every split page on its own body.
+ *
+ * Below the mobile breakpoint the panes stack, in DOM order, list first — so the tab sequence is
+ * the reading order in both layouts. That is the property `visual/keyboard.spec.ts` holds.
+ */
+export function SplitPage({
+  parents,
+  breadcrumbs,
+  listWidth = "md",
+  children,
+  ...page
+}: SplitPageProps) {
+  // The runtime half of the slot-typed layout contract control (ADR 0079) for the pane row:
+  // with a contract active, every rendered child of the row must be a SplitPane (its data-terp
+  // marker) — verified one macrotask after mount, refused fail closed. Same shape as HubPage's.
+  const contract = useLayoutContract();
+  const panesRef = useRef<HTMLDivElement>(null);
+  const [slotViolation, setSlotViolation] = useState<string | null>(null);
+  useEffect(() => {
+    if (contract === null) {
+      return;
+    }
+    const timer = setTimeout(() => {
+      const panes = panesRef.current;
+      if (panes === null) {
+        return;
+      }
+      setSlotViolation(verifySlotChildren(contract, "SplitPage", [...panes.children]));
+    }, 0);
+    return () => clearTimeout(timer);
+  });
+  if (slotViolation !== null) {
+    throw new Error(slotViolation);
+  }
+  return (
+    <Page {...page} breadcrumbs={parents ?? breadcrumbs}>
+      <div ref={panesRef} data-terp="splitpage-panes" data-list-width={listWidth}>
+        {children}
+      </div>
+    </Page>
+  );
+}
+
+/** Which half of the split a pane is — the list, or the record it selects. */
+export type SplitPaneRole = "list" | "detail";
+
+export interface SplitPaneProps {
+  /**
+   * Which half this is.
+   *
+   * It does **not** place the pane. The row's tracks are `minmax(0, <listWidth>) minmax(0, 1fr)`
+   * and grid auto-placement fills them in DOM order, so the FIRST pane gets the narrow track
+   * whatever its role says — write the list first. A `detail`-first composition renders the
+   * record in the narrow column, which is wrong and immediately visible.
+   *
+   * Placing by role instead was considered and refused: it would render correctly whatever the
+   * DOM order, and correct-looking is exactly the wrong failure here. Tab order follows the DOM
+   * and CSS cannot change it, so a `detail`-first tree would then read left-to-right and tab
+   * right-to-left — the WCAG 1.3.2 / 2.4.3 mismatch, silent. Leaving placement to the DOM makes
+   * a mis-ordered split look mis-ordered.
+   *
+   * What the role does carry: the pane's identity for anything that needs to tell the two apart
+   * (`visual/keyboard.spec.ts` asserts the tab order through it), and a hook for a rule should
+   * one ever need to distinguish them.
+   */
+  role: SplitPaneRole;
+  /**
+   * The pane's accessible name.
+   *
+   * Required, because each pane is a `<section>` and therefore a landmark: two unnamed regions
+   * side by side are two indistinguishable entries in a screen reader's landmark list, which is
+   * worse than one region containing both.
+   */
+  label: UiText;
+  children: ReactNode;
+}
+
+/**
+ * One half of a {@link SplitPage} — the list, or the detail beside it.
+ *
+ * A named `<section>`, so the two halves are distinguishable landmarks, and the only component
+ * the split's row admits. It renders no inline style, and no style at all beyond a
+ * `min-width: 0` floor: which track it takes comes from its POSITION, not from `role` — see the
+ * prop for why that is the safer of the two.
+ */
+export function SplitPane({ role, label, children }: SplitPaneProps) {
+  const resolve = useUiText();
+  return (
+    <section data-terp="splitpane" data-role={role} aria-label={resolve(label)}>
+      {children}
+    </section>
+  );
+}

package/src/UserMenu.test.tsx

@@ -66,7 +66,7 @@ describe("UserMenu", () => {
         <UserMenu />
       </TerpProvider>,
     );
-    expect(screen.queryByRole("button", { name: "Account menu" })).not.toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: /jane\.doe@example\.com/ })).not.toBeInTheDocument();
   });
 
   it("shows the avatar initials, email and role, and opens the panel", async () => {
@@ -81,7 +81,7 @@ describe("UserMenu", () => {
         </LocaleProvider>
       </ThemeProvider>,
     );
-    const trigger = await screen.findByRole("button", { name: "Account menu" });
+    const trigger = await screen.findByRole("button", { name: /jane\.doe@example\.com/ });
     expect(screen.getByText("JD")).toBeInTheDocument();
     expect(screen.getByText("jane.doe@example.com")).toBeInTheDocument();
     expect(screen.getByText("editor")).toBeInTheDocument();
@@ -104,7 +104,7 @@ describe("UserMenu", () => {
         <UserMenu onSettings={onSettings} />
       </TerpProvider>,
     );
-    fireEvent.click(await screen.findByRole("button", { name: "Account menu" }));
+    fireEvent.click(await screen.findByRole("button", { name: /jane\.doe@example\.com/ }));
     fireEvent.click(screen.getByRole("menuitem", { name: "Settings" }));
     expect(onSettings).toHaveBeenCalledTimes(1);
     expect(screen.queryByRole("menuitem", { name: "Sign out" })).not.toBeInTheDocument();
@@ -118,6 +118,10 @@ describe("UserMenu", () => {
         <UserMenu collapsed />
       </TerpProvider>,
     );
+    // Collapsed is the one variant that still carries `triggerLabel`, because its only
+    // content is the aria-hidden avatar — without the label the button would have no
+    // accessible name at all. Expanded takes its name from the email and role it renders,
+    // which is what the other cases in this file now assert.
     const trigger = await screen.findByRole("button", { name: "Account menu" });
     expect(screen.getByText("JD")).toBeInTheDocument();
     expect(screen.queryByText("jane.doe@example.com")).not.toBeInTheDocument();
@@ -137,6 +141,25 @@ describe("UserMenu", () => {
     expect(screen.getByRole("menu").parentElement).toHaveAttribute("data-owner", "user-menu");
   });
 
+  it("keeps the trigger inside its own root when expanded, which is how the sign-out helper finds it", async () => {
+    // `@terpjs/conformance`'s `logout()` signs a user out of any Terp app through this button, and
+    // located it by the accessible name "Account menu" until that name stopped existing here —
+    // expanded, the button is named after the user's email and role on purpose (WCAG 2.5.3). The
+    // helper reaches it by marker path now, so the DESCENDANT relationship is a cross-package
+    // contract; the collapsed case above already pins the marker itself, and this pins the shape
+    // of the path in the state the sidebar is actually in by default.
+    stubAuthFetch();
+    const { container } = render(
+      <TerpProvider baseUrl="https://api.test">
+        <LogInOnMount />
+        <UserMenu />
+      </TerpProvider>,
+    );
+    await screen.findByText("jane.doe@example.com");
+    const trigger = container.querySelector('[data-terp="user-menu"] [data-terp="menu-trigger"]');
+    expect(trigger?.tagName).toBe("BUTTON");
+  });
+
   it("signs out via the menu (revokes the token server-side)", async () => {
     const fetchMock = stubAuthFetch();
     render(
@@ -145,7 +168,7 @@ describe("UserMenu", () => {
         <UserMenu />
       </TerpProvider>,
     );
-    fireEvent.click(await screen.findByRole("button", { name: "Account menu" }));
+    fireEvent.click(await screen.findByRole("button", { name: /jane\.doe@example\.com/ }));
     fireEvent.click(screen.getByRole("menuitem", { name: "Sign out" }));
     await waitFor(() =>
       expect(
@@ -164,7 +187,7 @@ describe("UserMenu", () => {
         <UserMenu />
       </TerpProvider>,
     );
-    const trigger = await screen.findByRole("button", { name: "Account menu" });
+    const trigger = await screen.findByRole("button", { name: /jane\.doe@example\.com/ });
     fireEvent.click(trigger);
     expect(screen.getByRole("menuitem", { name: "Sign out" })).toBeInTheDocument();
     fireEvent.keyDown(document, { key: "Escape" });

package/src/UserMenu.tsx

@@ -1,18 +1,18 @@
 import { Icon } from "./icons";
 import { injectTerpStyles } from "./styles";
 import { useAuth } from "./TerpProvider";
+import { Avatar } from "./ui/Avatar";
 import { Menu, MenuItem } from "./ui/Menu";
 import { useStrings } from "./uiText";
 
 injectTerpStyles();
 
-/** Initials for the avatar: the first letters of the email's local-part words. */
-export function userInitials(email: string): string {
-  const local = email.split("@")[0] ?? "";
-  const words = local.split(/[._+-]+/).filter((word) => word.length > 0);
-  const initials = words.slice(0, 2).map((word) => word[0]!.toUpperCase());
-  return initials.join("") || "?";
-}
+/**
+ * Re-exported from where the tile now lives. It was public under this name before `Avatar`
+ * existed, and moving a published export to another module is a breaking change for no
+ * reason — the tile is what needed one home, not the name.
+ */
+export { userInitials } from "./ui/Avatar";
 
 export interface UserMenuProps {
   /** Icon-rail mode: show only the avatar on the trigger (the shell's collapsed state). */
@@ -39,7 +39,7 @@ export function UserMenu({ collapsed = false, onSettings, defaultOpen }: UserMen
 
   const trigger = (
     <>
-      <span aria-hidden="true" data-terp="user-menu-avatar">{userInitials(user.email)}</span>
+      <Avatar from={user.email} size="sm" />
       {!collapsed && (
         <span data-terp="user-menu-identity">
           <span data-terp="user-menu-email">{user.email}</span>
@@ -52,7 +52,13 @@ export function UserMenu({ collapsed = false, onSettings, defaultOpen }: UserMen
   return (
     <Menu
       trigger={trigger}
-      triggerLabel={strings.accountMenu}
+      // Only in the icon rail, and the asymmetry is the point. `aria-label` REPLACES the
+      // subtree text in the accessible name, so in the expanded trigger — which renders the
+      // user's email and role as visible text — naming it "Account menu" hid both from anyone
+      // relying on the name, and left a voice-control user with no spoken label that matches
+      // what they can see (WCAG 2.5.3, Label in Name). Collapsed there is nothing to hide: the
+      // avatar initials are aria-hidden, so without this the button would have no name at all.
+      triggerLabel={collapsed ? strings.accountMenu : undefined}
       placement="top"
       align="start"
       defaultOpen={defaultOpen}

package/src/admin/AuditLogAdmin.tsx

@@ -6,6 +6,8 @@ import { useTerpClient } from "../TerpProvider";
 import { DataView, HttpDataViewRepository, useServerDataView } from "../dataview";
 import type { DataViewColumn } from "../dataview";
 import { DetailList } from "../layout";
+import { Code } from "../typography";
+import { useFormatDateTime } from "../format";
 import { useStrings } from "../uiText";
 import type { TerpStrings } from "../uiText";
 import { unwrap } from "../unwrap";
@@ -14,20 +16,23 @@ import { adminCrumb, renderAdminCrumb } from "./crumbs";
 
 type AuditEventRead = components["schemas"]["AuditEventRead"];
 
-function buildColumns(strings: TerpStrings): DataViewColumn<AuditEventRead>[] {
+function buildColumns(
+  strings: TerpStrings,
+  formatDateTime: (value: string) => string,
+): DataViewColumn<AuditEventRead>[] {
   return [
     {
       id: "created_at",
       header: strings.whenColumn,
       accessor: (e) => e.created_at,
-      cell: (e) => new Date(e.created_at).toLocaleString(),
-      meta: { mobileSlot: "date", width: 170 },
+      cell: (e) => formatDateTime(e.created_at),
+      meta: { mobileSlot: "date", width: "md" },
     },
     {
       id: "action",
       header: strings.actionColumn,
       accessor: (e) => e.action,
-      meta: { mobileSlot: "status", width: 100 },
+      meta: { mobileSlot: "status", width: "xs" },
     },
     {
       id: "target",
@@ -41,7 +46,7 @@ function buildColumns(strings: TerpStrings): DataViewColumn<AuditEventRead>[] {
       header: strings.actorColumn,
       accessor: (e) => e.actor_id ?? "",
       cell: (e) => (e.actor_id === null ? "—" : e.actor_id.slice(0, 8)),
-      meta: { mobileSlot: "subtitle", width: 110 },
+      meta: { mobileSlot: "subtitle", width: "sm" },
     },
   ];
 }
@@ -56,7 +61,11 @@ export function AuditLogAdmin() {
   const strings = useStrings();
   const serverQuery = useServerDataView({ initialPageSize: 25 });
 
-  const columns = useMemo(() => buildColumns(strings), [strings]);
+  const formatDateTime = useFormatDateTime();
+  const columns = useMemo(
+    () => buildColumns(strings, formatDateTime),
+    [strings, formatDateTime],
+  );
   const repository = useMemo(
     () =>
       new HttpDataViewRepository<AuditEventRead>({
@@ -97,7 +106,12 @@ export function AuditLogAdmin() {
               ]}
             />
             {event.payload !== null && (
-              <pre data-terp="admin-payload">{JSON.stringify(event.payload, null, 2)}</pre>
+              // `Code block`, not a hand-rolled <pre>. The comment that used to sit here cited
+              // Code's own rationale for the tabIndex it was copying — a scroll container no
+              // keyboard can reach is the SC 2.1.1 failure axe reports as
+              // `scrollable-region-focusable` — which is a long way of saying this WAS a Code
+              // block, written out again under a second marker. It carries the tabIndex itself.
+              <Code block>{JSON.stringify(event.payload, null, 2)}</Code>
             )}
           </div>
         )}

package/src/admin/GroupCreate.tsx

@@ -15,9 +15,13 @@ import { useStrings } from "../uiText";
 import { unwrap } from "../unwrap";
 
 import { adminCrumb, renderAdminCrumb } from "./crumbs";
+import { routeFieldErrors } from "./fieldErrors";
 
 const FORM_ID = "terp-admin-group-create";
 
+/** The inputs this form renders, and so the only reasons it can put anywhere the user will see. */
+const RENDERED_FIELDS = ["name", "description"] as const;
+
 /** Dedicated group-creation page (`/admin/groups/new`). */
 export function GroupCreate() {
   const client = useTerpClient();
@@ -27,10 +31,14 @@ export function GroupCreate() {
   const [name, setName] = useState("");
   const [description, setDescription] = useState("");
   const [creating, setCreating] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState<Readonly<Record<string, string>>>({});
 
   async function onSubmit(event: FormEvent) {
     event.preventDefault();
     setCreating(true);
+    // Cleared on every attempt: the server re-validates the whole body, so its answer is the
+    // complete set of what is wrong, and a stale key would sit under a field already fixed.
+    setFieldErrors({});
     try {
       const group = unwrap(
         await client.POST("/api/v1/groups/", { body: { name, description } }),
@@ -41,7 +49,13 @@ export function GroupCreate() {
         params: { groupId: group.id },
       });
     } catch (error) {
-      toast.warning(error instanceof Error ? error.message : strings.requestFailed);
+      // A reason that names a field belongs on that field; anything unattributed, or attributed
+      // to a field this form does not render, stays a toast.
+      const { shown, leftover } = routeFieldErrors(error, RENDERED_FIELDS);
+      setFieldErrors(shown);
+      if (Object.keys(shown).length === 0 || leftover) {
+        toast.warning(error instanceof Error ? error.message : strings.requestFailed);
+      }
     } finally {
       setCreating(false);
     }
@@ -77,10 +91,10 @@ export function GroupCreate() {
     >
       <div data-terp="admin-form">
         <Stack id={FORM_ID} as="form" gap={4} onSubmit={onSubmit}>
-          <Field label={strings.groupName}>
+          <Field label={strings.groupName} error={fieldErrors.name}>
             <Input value={name} onChange={(event) => setName(event.target.value)} required />
           </Field>
-          <Field label={strings.description}>
+          <Field label={strings.description} error={fieldErrors.description}>
             <Input value={description} onChange={(event) => setDescription(event.target.value)} />
           </Field>
         </Stack>

package/src/admin/GroupDetail.tsx

@@ -17,8 +17,9 @@ import { useRecord } from "../useRecord";
 import { useToast } from "../toast";
 import { Button } from "../ui/Button";
 import { Input } from "../ui/Input";
+import { useFormatDate, useFormatDateTime } from "../format";
 import { useStrings } from "../uiText";
-import { unwrap } from "../unwrap";
+import { ApiError, unwrap } from "../unwrap";
 
 import { adminCrumb, renderAdminCrumb } from "./crumbs";
 
@@ -47,12 +48,16 @@ export function GroupDetail() {
   const strings = useStrings();
   const suggestionsId = useId();
 
+  const formatDate = useFormatDate();
+  const formatDateTime = useFormatDateTime();
   const [membersVersion, setMembersVersion] = useState(0);
   const [grantsVersion, setGrantsVersion] = useState(0);
   const [memberQuery, setMemberQuery] = useState("");
+  const [memberError, setMemberError] = useState<string | undefined>(undefined);
   const [suggestions, setSuggestions] = useState<UserRead[]>([]);
   const [adding, setAdding] = useState(false);
   const [permission, setPermission] = useState("");
+  const [permissionError, setPermissionError] = useState<string | undefined>(undefined);
   const [granting, setGranting] = useState(false);
   const [deleteOpen, setDeleteOpen] = useState(false);
   const [deleting, setDeleting] = useState(false);
@@ -124,11 +129,11 @@ export function GroupDetail() {
         id: "created_at",
         header: strings.createdColumn,
         accessor: (m) => m.created_at,
-        cell: (m) => new Date(m.created_at).toLocaleDateString(),
-        meta: { mobileSlot: "date", width: 120 },
+        cell: (m) => formatDate(m.created_at),
+        meta: { mobileSlot: "date", width: "sm" },
       },
     ],
-    [strings],
+    [strings, formatDate],
   );
 
   const grantColumns: DataViewColumn<GrantRead>[] = useMemo(
@@ -143,11 +148,11 @@ export function GroupDetail() {
         id: "created_at",
         header: strings.createdColumn,
         accessor: (g) => g.created_at,
-        cell: (g) => new Date(g.created_at).toLocaleDateString(),
-        meta: { mobileSlot: "date", width: 120 },
+        cell: (g) => formatDate(g.created_at),
+        meta: { mobileSlot: "date", width: "sm" },
       },
     ],
-    [strings],
+    [strings, formatDate],
   );
 
   const membersRepository = useMemo(
@@ -190,11 +195,36 @@ export function GroupDetail() {
     toast.warning(error instanceof Error ? error.message : strings.requestFailed);
   }
 
+  /**
+   * Route a failure to the input it is about, or to the toast when it is about anything else.
+   *
+   * The key is named rather than inferred from whichever reason came first, because neither of
+   * these two forms submits only what the user typed: adding a member posts a `user_id` resolved
+   * from the typed email, and granting posts the group's own `subject_id` beside the permission.
+   * A reason about either of those is not something the one visible input can be edited to fix,
+   * so it belongs where every other unattributed failure on this screen already goes.
+   */
+  function failedField(
+    error: unknown,
+    key: string,
+    set: (message: string | undefined) => void,
+  ): void {
+    if (error instanceof ApiError) {
+      const message = error.fields[key];
+      if (message !== undefined) {
+        set(message);
+        return;
+      }
+    }
+    failed(error);
+  }
+
   async function onAddMember(event: FormEvent) {
     event.preventDefault();
     const needle = memberQuery.trim();
     if (needle === "") return;
     setAdding(true);
+    setMemberError(undefined);
     try {
       // Resolve the typed email to an account: exact match among the current
       // suggestions first, else one direct directory query.
@@ -208,7 +238,11 @@ export function GroupDetail() {
         match = page.items.find((user) => user.email === needle);
       }
       if (match === undefined) {
-        toast.warning(strings.userNotFound);
+        // On the field for the same reason a 422 now is: "no account matches that email" is
+        // about the email the user just typed, and it is the only input on this form. Leaving it
+        // a toast would have this one form answer server reasons on the field and client reasons
+        // above it, which is a distinction the user has no way to perceive.
+        setMemberError(strings.userNotFound);
         return;
       }
       unwrap(
@@ -223,7 +257,7 @@ export function GroupDetail() {
       setMembersVersion((v) => v + 1);
       void group.reload();
     } catch (error) {
-      failed(error);
+      failedField(error, "user_id", setMemberError);
     } finally {
       setAdding(false);
     }
@@ -252,6 +286,7 @@ export function GroupDetail() {
   async function onGrant(event: FormEvent) {
     event.preventDefault();
     setGranting(true);
+    setPermissionError(undefined);
     try {
       unwrap(
         await client.POST("/api/v1/access/grants", {
@@ -262,7 +297,7 @@ export function GroupDetail() {
       setPermission("");
       setGrantsVersion((v) => v + 1);
     } catch (error) {
-      failed(error);
+      failedField(error, "permission", setPermissionError);
     } finally {
       setGranting(false);
     }
@@ -334,7 +369,7 @@ export function GroupDetail() {
             items={[
               { label: strings.description, value: record.description || "-" },
               { label: strings.members, value: record.member_count },
-              { label: strings.createdColumn, value: new Date(record.created_at).toLocaleString() },
+              { label: strings.createdColumn, value: formatDateTime(record.created_at) },
             ]}
           />
         )}
@@ -343,7 +378,7 @@ export function GroupDetail() {
             {strings.members}
           </h2>
           <Stack as="form" direction="row" gap={2} align="end" wrap onSubmit={onAddMember}>
-            <Field label={strings.userField}>
+            <Field label={strings.userField} error={memberError}>
               <Input
                 type="email"
                 value={memberQuery}
@@ -380,7 +415,7 @@ export function GroupDetail() {
             {strings.permissions}
           </h2>
           <Stack as="form" direction="row" gap={2} align="end" wrap onSubmit={onGrant}>
-            <Field label={strings.permission}>
+            <Field label={strings.permission} error={permissionError}>
               <Input
                 value={permission}
                 onChange={(event) => setPermission(event.target.value)}

package/src/admin/GroupsAdmin.tsx

@@ -9,6 +9,7 @@ import { useTerpClient } from "../TerpProvider";
 import { DataView, HttpDataViewRepository, useServerDataView } from "../dataview";
 import type { DataViewColumn } from "../dataview";
 import { Button } from "../ui/Button";
+import { useFormatDate } from "../format";
 import { useStrings } from "../uiText";
 import type { TerpStrings } from "../uiText";
 import { unwrap } from "../unwrap";
@@ -17,7 +18,10 @@ import { adminCrumb, renderAdminCrumb } from "./crumbs";
 
 type GroupRead = components["schemas"]["GroupRead"];
 
-function buildColumns(strings: TerpStrings): DataViewColumn<GroupRead>[] {
+function buildColumns(
+  strings: TerpStrings,
+  formatDate: (value: string) => string,
+): DataViewColumn<GroupRead>[] {
   return [
     { id: "name", header: strings.groupName, accessor: (g) => g.name, meta: { mobileSlot: "title" } },
     {
@@ -30,14 +34,14 @@ function buildColumns(strings: TerpStrings): DataViewColumn<GroupRead>[] {
       id: "member_count",
       header: strings.members,
       accessor: (g) => g.member_count,
-      meta: { mobileSlot: "status", width: 110 },
+      meta: { mobileSlot: "status", width: "sm" },
     },
     {
       id: "created_at",
       header: strings.createdColumn,
       accessor: (g) => g.created_at,
-      cell: (g) => new Date(g.created_at).toLocaleDateString(),
-      meta: { mobileSlot: "date", width: 120 },
+      cell: (g) => formatDate(g.created_at),
+      meta: { mobileSlot: "date", width: "sm" },
     },
   ];
 }
@@ -53,7 +57,11 @@ export function GroupsAdmin() {
   const navigate = useNavigate();
   const serverQuery = useServerDataView({ initialPageSize: 10 });
 
-  const columns = useMemo(() => buildColumns(strings), [strings]);
+  const formatDate = useFormatDate();
+  const columns = useMemo(
+    () => buildColumns(strings, formatDate),
+    [strings, formatDate],
+  );
   const repository = useMemo(
     () =>
       new HttpDataViewRepository<GroupRead>({