Fix the Stage 1 Dashboard UX defects found in assembled review

The assembled Stage 1 Dashboard was reviewed by hand on a desktop, with the sidebar collapsed, and on an iPhone. This fixes what that review found, and records the decisions in ADR 0064: - Discover is its own page at /settings/discover, with Installed and Updates beneath it as children. There is no Browse item any more. /settings/discover/browse is still read, as an alias, and is respelled in place. Parents and children now read as a hierarchy: a guide line, text-only children, a disclosure chevron, and parent and current states that look different. - The sidebar is navigation only. Display pairing moves from the sidebar and drawer to Settings -> Displays: the paired displays, a deliberate Add display dialog, and revocation. Nothing takes focus on arrival; the code field is focused only once Add display is chosen. - Collapsed icons are centred. Nav-link layout moves from inline styles to the shell stylesheet, and every collapsed item is one square centred on the rail. - /settings is an overview of the installation: displays paired, modules installed and running, and a line for each other area. It reads only existing endpoints. - Phones get a sticky, safe-area-aware header holding the menu trigger and the page name. New pages start at the top, and focus no longer scrolls content under the header. - @ekklesia/ui draws checkbox and radio indicators from tokens rather than accent-color, so the selected state is the strong accent in Light and Dark alike. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-15 20:37:32 -05:00
parent 186668915b
commit 405e509bcb
31 changed files with 2346 additions and 611 deletions
@@ -0,0 +1,256 @@
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { DisplaysSettingsPage } from "../src/browser/DisplaysSettingsPage.js";
+
+declare global {
+  // eslint-disable-next-line no-var
+  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
+}
+
+/**
+ * Settings → Displays (ADR 0064): the device surface that used to sit in the sidebar, moved into
+ * Settings — the paired displays, a deliberate Add display flow, and revocation in a product dialog.
+ */
+
+const apiBaseUrl = "https://ekklesia.example.test";
+const NOW = new Date("2026-10-15T12:00:00.000Z");
+
+let container: HTMLDivElement;
+let root: Root;
+
+beforeEach(() => {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = true;
+  container = document.createElement("div");
+  document.body.append(container);
+  root = createRoot(container);
+});
+
+afterEach(async () => {
+  await act(async () => root.unmount());
+  container.remove();
+});
+
+function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    headers: { "content-type": "application/json" },
+    status,
+  });
+}
+
+interface ServerOptions {
+  readonly devices?: unknown[];
+  readonly denied?: boolean;
+}
+
+function server(options: ServerOptions = {}) {
+  let devices: unknown[] = options.devices ?? [
+    {
+      createdAt: "2026-10-01T09:00:00.000Z",
+      id: "device-1",
+      lastSeenAt: "2026-10-15T11:50:00.000Z",
+      name: "Foyer TV",
+      permissions: [],
+      revoked: false,
+    },
+  ];
+  const requests: { path: string; body: unknown }[] = [];
+  const fetch = vi.fn(async (input: RequestInfo | URL, init?: RequestInit) => {
+    const path = new URL(String(input)).pathname;
+    const body = init?.body === undefined ? undefined : JSON.parse(String(init.body));
+    requests.push({ body, path });
+    if (path === "/api/v1/devices") {
+      return options.denied ? json({ code: "AUTHORIZATION_DENIED" }, 403) : json({ devices });
+    }
+    if (path === "/api/v1/devices/device-1/revoke") {
+      devices = devices.map((device) => ({ ...(device as object), revoked: true }));
+      return new Response(null, { status: 204 });
+    }
+    if (path === "/api/v1/device-pairing/lookups") {
+      return (body as { code: string }).code === "123456"
+        ? json({
+            expiresAt: "2026-10-15T12:10:00.000Z",
+            moduleId: "signage",
+            permissionId: "signage.display",
+            requestedAt: "2026-10-15T11:59:00.000Z",
+          })
+        : json({ code: "DEVICE_PAIRING_NOT_FOUND" }, 404);
+    }
+    if (path === "/api/v1/device-pairing/approvals") {
+      devices = [
+        ...devices,
+        {
+          createdAt: "2026-10-15T12:00:00.000Z",
+          id: "device-2",
+          name: (body as { deviceName: string }).deviceName,
+          permissions: [],
+          revoked: false,
+        },
+      ];
+      return json({ moduleId: "signage", permissionId: "signage.display" });
+    }
+    return json({ code: "NOT_FOUND" }, 404);
+  }) as unknown as typeof globalThis.fetch;
+  return { fetch, requests };
+}
+
+function query(testId: string): HTMLElement | null {
+  return container.querySelector(`[data-testid="${testId}"]`);
+}
+
+function required(testId: string): HTMLElement {
+  const element = query(testId);
+  if (!element) {
+    throw new Error(`missing ${testId}`);
+  }
+  return element;
+}
+
+async function settle(): Promise<void> {
+  for (let index = 0; index < 6; index += 1) {
+    await new Promise((resolve) => setTimeout(resolve, 0));
+  }
+}
+
+async function click(testId: string): Promise<void> {
+  await act(async () => {
+    required(testId).click();
+    await settle();
+  });
+}
+
+async function type(testId: string, value: string): Promise<void> {
+  const input = required(testId) as HTMLInputElement;
+  await act(async () => {
+    const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+    setter?.call(input, value);
+    input.dispatchEvent(new Event("input", { bubbles: true }));
+  });
+}
+
+async function submit(testId: string): Promise<void> {
+  const form = (required(testId) as HTMLButtonElement).form;
+  await act(async () => {
+    form?.requestSubmit();
+    await settle();
+  });
+}
+
+async function renderPage(options: ServerOptions = {}) {
+  const platform = server(options);
+  await act(async () => {
+    root.render(
+      <DisplaysSettingsPage
+        back={{ href: "/settings", label: "Back to Settings", onBack: () => undefined }}
+        config={{ apiBaseUrl, fetch: platform.fetch }}
+        moduleName={(moduleId) => (moduleId === "signage" ? "Signage" : undefined)}
+        now={() => NOW}
+      />,
+    );
+    await settle();
+  });
+  return platform;
+}
+
+describe("Settings → Displays", () => {
+  it("lists the paired displays with what is known about each, and takes no focus", async () => {
+    const before = document.activeElement;
+    await renderPage();
+
+    const card = required("device-device-1");
+    expect(card.textContent).toContain("Foyer TV");
+    expect(card.textContent).toContain("Paired");
+    expect(card.textContent).toContain("Last seen within the last hour");
+    expect(container.querySelector("h1")?.textContent).toBe("Displays");
+    // No pairing form until someone asks for one, and nothing grabbed focus.
+    expect(container.querySelector("input")).toBeNull();
+    expect(document.activeElement).toBe(before);
+  });
+
+  it("says when nothing is paired yet, and when the list is not this person's to see", async () => {
+    await renderPage({ devices: [] });
+    expect(required("device-list-empty").textContent).toContain("No displays are paired yet");
+
+    await act(async () => root.unmount());
+    root = createRoot(container);
+    await renderPage({ denied: true });
+    expect(container.textContent).toContain("Displays aren't available to you");
+    expect(query("add-display")).toBeNull();
+  });
+
+  it("pairs a display through a deliberate Add display flow, focusing each next step", async () => {
+    const platform = await renderPage();
+
+    await click("add-display");
+    const dialog = required("add-display-dialog");
+    expect(dialog.getAttribute("role")).toBe("dialog");
+    // Typing the code is now plainly the next thing to do, so the field has focus.
+    expect(document.activeElement).toBe(required("device-pairing-code-input"));
+
+    await type("device-pairing-code-input", "999999");
+    await submit("device-pairing-lookup");
+    expect(required("device-pairing-error").textContent).toContain("not waiting for approval");
+
+    await type("device-pairing-code-input", "123456");
+    await submit("device-pairing-lookup");
+    expect(required("device-pairing-found").textContent).toContain("Signage");
+    expect(document.activeElement).toBe(required("device-pairing-name"));
+
+    await type("device-pairing-name", "Sanctuary left");
+    await submit("device-pairing-approve");
+
+    expect(query("add-display-dialog")).toBeNull();
+    expect(
+      platform.requests.find((r) => r.path === "/api/v1/device-pairing/approvals")?.body,
+    ).toEqual({ code: "123456", deviceName: "Sanctuary left" });
+    // The new display appears without a page refresh, and the page says so.
+    expect(required("device-device-2").textContent).toContain("Sanctuary left");
+    expect(required("device-pairing-success").textContent).toContain("Sanctuary left is paired");
+    // Focus is back on the control that opened the flow.
+    expect(document.activeElement).toBe(required("add-display"));
+  });
+
+  it("closes the Add display flow on Cancel without pairing anything", async () => {
+    const platform = await renderPage();
+    await click("add-display");
+    await click("add-display-cancel");
+
+    expect(query("add-display-dialog")).toBeNull();
+    expect(platform.requests.map((r) => r.path)).toEqual(["/api/v1/devices"]);
+    expect(document.activeElement).toBe(required("add-display"));
+  });
+});
+
+/**
+ * Revoking a display strands that screen until someone re-pairs it in person, so the page explains
+ * the consequence in its own dialog first — never with a browser-native confirm (DESIGN §21).
+ */
+describe("display revocation", () => {
+  it("asks in a product dialog before revoking, and does nothing on cancel", async () => {
+    const confirm = vi.fn(() => true);
+    Object.assign(window, { confirm });
+    const platform = await renderPage();
+
+    await click("device-revoke-device-1");
+    const dialog = container.querySelector('[role="dialog"]');
+    expect(dialog?.textContent).toContain("Revoke Foyer TV?");
+    expect(dialog?.textContent).toContain("pairing code");
+
+    await click("device-revoke-cancel");
+    expect(container.querySelector('[role="dialog"]')).toBeNull();
+    expect(platform.requests.some((r) => r.path.endsWith("/revoke"))).toBe(false);
+    expect(confirm).not.toHaveBeenCalled();
+  });
+
+  it("revokes only after the destructive action is confirmed", async () => {
+    const platform = await renderPage();
+
+    await click("device-revoke-device-1");
+    await click("device-revoke-confirm");
+
+    expect(platform.requests.filter((r) => r.path.endsWith("/revoke"))).toHaveLength(1);
+    expect(container.querySelector('[role="dialog"]')).toBeNull();
+    expect(required("device-device-1").textContent).toContain("Revoked");
+    expect(query("device-revoke-device-1")).toBeNull();
+  });
+});