@tribe-nest/forge 3.60.0 → 3.63.0

package/src/ui/headless/_tests/communityCalendar.spec.tsx

@@ -0,0 +1,195 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import {
+  calendarMonthWindow,
+  calendarMonthStart,
+  callJoinable,
+  groupCalendarItems,
+  nextRsvp,
+  rsvpErrorCode,
+  useCommunityCalendar,
+} from "../communities/useCommunityCalendar";
+import type { CommunityCalendarCall, CommunityCalendarEvent } from "../../../data/queries/useCommunityCalendar";
+import { PROFILE_ID, account, calls, get, installAdapter, restoreAdapter, wrapper, type Route } from "./communityHarness";
+
+/**
+ * The community calendar as the site reads it: one month per request, grouped
+ * by the viewer's own days with what is still ahead on top, and going or not
+ * going on a call (what is SENT, and that the new counts land in the cache).
+ */
+
+afterEach(restoreAdapter);
+
+/** Local wall-clock times, so the day grouping holds in any test time zone. */
+const at = (day: number, hour: number) => new Date(2026, 8, day, hour, 0, 0).toISOString();
+const NOW = new Date(2026, 8, 15, 12, 0, 0);
+
+const call = (overrides: Partial<CommunityCalendarCall> = {}): CommunityCalendarCall => ({
+  kind: "call",
+  id: "11111111-aaaa-4aaa-8aaa-111111111111",
+  title: "Weekly Q&A",
+  description: null,
+  startsAt: at(16, 18),
+  endsAt: at(16, 19),
+  timezone: "Europe/Berlin",
+  participation: "open",
+  role: "attendee",
+  audiences: [],
+  opensAt: at(16, 17),
+  closesAt: at(16, 19),
+  isOpen: false,
+  callPublicId: "pub-1",
+  rsvp: { going: 2, notGoing: 1, mine: null },
+  icsUrl: "https://api.test/calendar/calls/c1.ics",
+  recording: null,
+  ...overrides,
+});
+
+const event = (overrides: Partial<CommunityCalendarEvent> = {}): CommunityCalendarEvent => ({
+  kind: "event",
+  id: "event-1",
+  title: "Album launch",
+  description: null,
+  slug: "album-launch",
+  startsAt: at(16, 20),
+  endsAt: null,
+  timezone: "Europe/Berlin",
+  type: "physical",
+  address: { name: "The Club", city: "Berlin" },
+  cancelled: false,
+  icsUrl: "https://api.test/calendar/events/e1.ics",
+  ...overrides,
+});
+
+const put =
+  (path: string, answer: (req: { body: Record<string, unknown> | null }) => unknown): Route =>
+  (req) =>
+    req.method === "put" && req.url === path ? answer(req) : undefined;
+
+describe("calendar helpers", () => {
+  it("reads one month from its first local midnight to the next", () => {
+    const { from, to } = calendarMonthWindow(calendarMonthStart(NOW));
+    expect(from).toEqual(new Date(2026, 8, 1));
+    expect(to).toEqual(new Date(2026, 9, 1));
+    expect(calendarMonthStart(NOW, -1)).toEqual(new Date(2026, 7, 1));
+    expect(calendarMonthStart(NOW, 4)).toEqual(new Date(2027, 0, 1));
+  });
+
+  it("groups by day, upcoming soonest first, then what already happened, latest first", () => {
+    const items = [
+      event({ id: "e-late", startsAt: at(16, 20) }),
+      call({ id: "c-early", startsAt: at(16, 9), endsAt: at(16, 10) }),
+      call({ id: "c-next-week", startsAt: at(22, 18), endsAt: at(22, 19) }),
+      call({ id: "c-past", startsAt: at(3, 18), endsAt: at(3, 19) }),
+      event({ id: "e-past", startsAt: at(10, 20), endsAt: at(10, 23) }),
+    ];
+    const { upcoming, past } = groupCalendarItems(items, NOW);
+    expect(upcoming.map((day) => [day.key, day.items.map((item) => item.id)])).toEqual([
+      ["2026-09-16", ["c-early", "e-late"]],
+      ["2026-09-22", ["c-next-week"]],
+    ]);
+    expect(past.map((day) => [day.key, day.items.map((item) => item.id)])).toEqual([
+      ["2026-09-10", ["e-past"]],
+      ["2026-09-03", ["c-past"]],
+    ]);
+  });
+
+  it("keeps a call that is on right now with what is ahead", () => {
+    const live = call({ id: "live", startsAt: at(15, 11), endsAt: at(15, 13), isOpen: true });
+    expect(groupCalendarItems([live], NOW).upcoming[0]!.items[0]!.id).toBe("live");
+  });
+
+  it("clears an answer when the same one is pressed again", () => {
+    expect(nextRsvp(null, "going")).toBe("going");
+    expect(nextRsvp("going", "going")).toBeNull();
+    expect(nextRsvp("going", "not_going")).toBe("not_going");
+  });
+
+  it("offers Join only while the room is open and there is one", () => {
+    expect(callJoinable(call({ isOpen: true }))).toBe(true);
+    expect(callJoinable(call({ isOpen: false }))).toBe(false);
+    expect(callJoinable(call({ isOpen: true, callPublicId: null }))).toBe(false);
+  });
+
+  it("reads a refused answer", () => {
+    expect(rsvpErrorCode({ response: { status: 409 } })).toBe("closed");
+    expect(rsvpErrorCode({ response: { status: 404 } })).toBe("not_found");
+    expect(rsvpErrorCode(new Error("network"))).toBe("failed");
+  });
+});
+
+describe("useCommunityCalendar", () => {
+  const PATH = "/public/communities/fan-club/calendar";
+  const RSVP = `/public/communities/fan-club/calendar/calls/${call().id}/rsvp`;
+
+  it("asks for the month shown, and the next one on the arrow", async () => {
+    installAdapter([get(PATH, () => [call(), event()])]);
+    const { result } = renderHook(() => useCommunityCalendar({ now: NOW }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.items).toHaveLength(2));
+    expect(calls("get", PATH)[0]!.params).toEqual({
+      profileId: PROFILE_ID,
+      from: new Date(2026, 8, 1).toISOString(),
+      to: new Date(2026, 9, 1).toISOString(),
+    });
+    act(() => result.current.goToNextMonth());
+    await waitFor(() => expect(calls("get", PATH)).toHaveLength(2));
+    expect(calls("get", PATH)[1]!.params).toMatchObject({
+      from: new Date(2026, 9, 1).toISOString(),
+      to: new Date(2026, 10, 1).toISOString(),
+    });
+    expect(result.current.isCurrentMonth).toBe(false);
+  });
+
+  it("sends going, and puts the new counts in the cache", async () => {
+    installAdapter([
+      get(PATH, () => [call()]),
+      put(RSVP, (req) => ({ going: 3, notGoing: 1, mine: req.body?.response ?? null })),
+    ]);
+    const { result } = renderHook(() => useCommunityCalendar({ now: NOW }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.items).toHaveLength(1));
+    act(() => result.current.answer(result.current.items[0] as CommunityCalendarCall, "going"));
+    await waitFor(() => expect((result.current.items[0] as CommunityCalendarCall).rsvp).toEqual({ going: 3, notGoing: 1, mine: "going" }));
+    expect(calls("put", RSVP)[0]!.body).toEqual({ profileId: PROFILE_ID, response: "going" });
+    // Only the one GET: the answer's own reply is what updates the list.
+    expect(calls("get", PATH)).toHaveLength(1);
+  });
+
+  it("clears the answer when the chosen one is pressed again", async () => {
+    installAdapter([
+      get(PATH, () => [call({ rsvp: { going: 3, notGoing: 1, mine: "going" } })]),
+      put(RSVP, () => ({ going: 2, notGoing: 1, mine: null })),
+    ]);
+    const { result } = renderHook(() => useCommunityCalendar({ now: NOW }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.items).toHaveLength(1));
+    act(() => result.current.answer(result.current.items[0] as CommunityCalendarCall, "going"));
+    await waitFor(() => expect((result.current.items[0] as CommunityCalendarCall).rsvp.mine).toBeNull());
+    expect(calls("put", RSVP)[0]!.body).toEqual({ profileId: PROFILE_ID, response: null });
+  });
+
+  it("keeps a 409 against the call it was for", async () => {
+    installAdapter([
+      get(PATH, () => [call()]),
+      put(RSVP, () => {
+        throw { status: 409, message: "Closed" };
+      }),
+    ]);
+    const { result } = renderHook(() => useCommunityCalendar({ now: NOW }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.items).toHaveLength(1));
+    act(() => result.current.answer(result.current.items[0] as CommunityCalendarCall, "not_going"));
+    await waitFor(() => expect(result.current.rsvpErrorFor(call().id)).toBe("closed"));
+    expect(result.current.rsvpErrorFor("another-call")).toBeNull();
+    expect((result.current.items[0] as CommunityCalendarCall).rsvp).toEqual(call().rsvp);
+  });
+
+  it("is forbidden for a non-member", async () => {
+    installAdapter([
+      get(PATH, () => {
+        throw { status: 403, message: "Forbidden" };
+      }),
+    ]);
+    const { result } = renderHook(() => useCommunityCalendar({ now: NOW }), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.forbidden).toBe(true));
+    expect(result.current.isError).toBe(false);
+  });
+});

package/src/ui/headless/_tests/communityClassroom.spec.tsx

@@ -0,0 +1,120 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { renderHook, waitFor } from "@testing-library/react";
+import {
+  classroomCourseHref,
+  classroomCourseState,
+  classroomProgressPercent,
+  classroomUnlockParts,
+  useCommunityClassroom,
+} from "../communities/useCommunityClassroom";
+import type { CommunityClassroomCourse } from "../../../data/queries/useCommunityClassroom";
+import { PROFILE_ID, account, calls, get, installAdapter, restoreAdapter, wrapper } from "./communityHarness";
+
+/**
+ * The classroom tab's reading of the server: what state a card is in, how far
+ * through it the member is, what opens a locked one, where an open one leads,
+ * and what the hook SENDS (the community by slug and the profile, nothing more).
+ */
+
+afterEach(restoreAdapter);
+
+const classroomCourse =(overrides: Partial<CommunityClassroomCourse> = {}): CommunityClassroomCourse => ({
+  courseId: "course-1",
+  title: "Songwriting 101",
+  description: "From idea to demo.",
+  slug: "songwriting-101",
+  coverUrl: null,
+  open: true,
+  progress: { completed: 3, total: 10, completedAt: null, currentLessonId: "lesson-4" },
+  unlockLevel: null,
+  unlockTiers: [],
+  accessId: "acc-1",
+  ...overrides,
+});
+
+describe("classroom helpers", () => {
+  it("reads progress as a percentage, full once completed", () => {
+    expect(classroomProgressPercent({ completed: 3, total: 10, completedAt: null, currentLessonId: null })).toBe(30);
+    expect(classroomProgressPercent({ completed: 0, total: 0, completedAt: null, currentLessonId: null })).toBe(0);
+    expect(
+      classroomProgressPercent({ completed: 2, total: 10, completedAt: "2026-09-01T00:00:00.000Z", currentLessonId: null }),
+    ).toBe(100);
+    expect(classroomProgressPercent(null)).toBe(0);
+  });
+
+  it("names the card's state", () => {
+    expect(classroomCourseState(classroomCourse())).toBe("in_progress");
+    expect(classroomCourseState(classroomCourse({ progress: { completed: 0, total: 5, completedAt: null, currentLessonId: null } }))).toBe(
+      "not_started",
+    );
+    expect(classroomCourseState(classroomCourse({ progress: { completed: 5, total: 5, completedAt: null, currentLessonId: null } }))).toBe(
+      "completed",
+    );
+    expect(classroomCourseState(classroomCourse({ open: false, progress: null }))).toBe("locked");
+  });
+
+  it("says what opens a locked course", () => {
+    expect(classroomUnlockParts(classroomCourse({ open: false, unlockLevel: 4 }))).toEqual({ level: 4, tiers: "" });
+    expect(
+      classroomUnlockParts(
+        classroomCourse({
+          open: false,
+          unlockTiers: [
+            { id: "t-gold", name: "Gold" },
+            { id: "t-vip", name: "VIP" },
+          ],
+        }),
+      ),
+    ).toEqual({ level: null, tiers: "Gold, VIP" });
+  });
+
+  it("opens the course player, and never falls back to the sales page", () => {
+    expect(classroomCourseHref({ open: true, accessId: "acc-9" })).toBe("/i/course-access/acc-9");
+    expect(classroomCourseHref({ open: true, accessId: null })).toBeNull();
+    expect(classroomCourseHref({ open: false, accessId: null })).toBeNull();
+  });
+});
+
+describe("useCommunityClassroom", () => {
+  it("reads the classroom by slug with the profile", async () => {
+    installAdapter([get("/public/communities/fan-club/classroom", () => [classroomCourse()])]);
+    const { result } = renderHook(() => useCommunityClassroom(), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.courses).toHaveLength(1));
+    const sent = calls("get", "/public/communities/fan-club/classroom");
+    expect(sent).toHaveLength(1);
+    expect(sent[0]!.params).toEqual({ profileId: PROFILE_ID });
+    expect(result.current.forbidden).toBe(false);
+  });
+
+  it("is forbidden, not broken, for a non-member", async () => {
+    installAdapter([
+      get("/public/communities/fan-club/classroom", () => {
+        throw { status: 403, message: "Forbidden" };
+      }),
+    ]);
+    const { result } = renderHook(() => useCommunityClassroom(), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.forbidden).toBe(true));
+    expect(result.current.isError).toBe(false);
+    // A 403 is an answer: asking again changes nothing.
+    expect(calls("get", "/public/communities/fan-club/classroom")).toHaveLength(1);
+  });
+
+  it("asks nothing while signed out", async () => {
+    installAdapter([get("/public/communities/fan-club/classroom", () => [classroomCourse()])]);
+    const { result } = renderHook(() => useCommunityClassroom(), { wrapper: wrapper() });
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    expect(result.current.courses).toEqual([]);
+    expect(calls("get", "/public/communities/fan-club/classroom")).toHaveLength(0);
+  });
+
+  it("offers an upgrade only when a tier includes the course", async () => {
+    installAdapter([get("/public/communities/fan-club/classroom", () => [])]);
+    const { result } = renderHook(() => useCommunityClassroom(), { wrapper: wrapper({ user: account() }) });
+    const tierLocked = classroomCourse({ open: false, progress: null, unlockTiers: [{ id: "t-gold", name: "Gold" }] });
+    const levelLocked = classroomCourse({ open: false, progress: null, unlockLevel: 3 });
+    expect(result.current.canUpgrade(tierLocked)).toBe(true);
+    expect(result.current.canUpgrade(levelLocked)).toBe(false);
+    expect(result.current.unlockHref(tierLocked)).toBe("/i/communities/fan-club?tier=t-gold");
+  });
+});

package/src/ui/headless/_tests/communityHarness.tsx

@@ -141,12 +141,15 @@ export const get = (path: string | RegExp, answer: (req: Sent) => unknown): Rout
   req.method === "get" && (typeof path === "string" ? req.url === path : path.test(req.url)) ? answer(req) : undefined;
 
 export interface AuthControls {
-  logout: () => void;
+  logout?: () => void;
+  /** Sees every session the email-first flow hands to `adoptSession`. */
+  adopted?: (session: unknown) => void;
 }
 
 /**
  * A stateful auth context: `register` succeeds and asks for a code,
- * `verifyRegistration` signs the fan in, `validateLoginCredentials` +
+ * `verifyRegistration` signs the fan in, `adoptSession` (the email-first flow)
+ * signs in whoever the session names, `validateLoginCredentials` +
  * `verifyLoginCode` do the same for sign-in, `logout` signs out.
  */
 function TestAuth({ initialUser, children, controls }: { initialUser: unknown; children: ReactNode; controls?: AuthControls }) {
@@ -168,8 +171,12 @@ function TestAuth({ initialUser, children, controls }: { initialUser: unknown; c
       return {};
     },
     resendLoginCode: async () => {},
+    adoptSession: (session: { account: ReturnType<typeof account> }) => {
+      controls?.adopted?.(session);
+      setUser(session.account);
+    },
     logout: async () => {
-      controls?.logout();
+      controls?.logout?.();
       setUser(null);
     },
     refetchUser: async () => {},

package/src/ui/headless/_tests/communityMembers.spec.tsx

@@ -0,0 +1,316 @@
+// @vitest-environment jsdom
+import { afterEach, describe, expect, it } from "vitest";
+import { act, renderHook, waitFor } from "@testing-library/react";
+import { buildDirectoryParams } from "../../../data/queries/useCommunityMembers";
+import { mentionDirectoryParams, useCommunityMentionDirectory } from "../../../data/queries/useCommunity";
+import { COUNTRY_CENTROIDS, COUNTRY_CODES, countryName, countryOptions, isCountryCode } from "../community/countries";
+import {
+  memberGlobeMarkers,
+  memberGlobePoints,
+  memberLocationLabel,
+  memberMapCountries,
+  useCommunityMemberDirectory,
+} from "../community/useCommunityMembers";
+import { useMentionComposer } from "../community/useMentionComposer";
+import { useMemberHomeNav } from "../memberHome/useMemberHomeNav";
+import {
+  COMMUNITY,
+  PROFILE_ID,
+  account,
+  calls,
+  get,
+  installAdapter,
+  restoreAdapter,
+  viewer,
+  wrapper,
+} from "./communityHarness";
+
+/**
+ * The member directory and map on the site: the query string the directory
+ * sends, country names in the viewer's language, the globe's dots, where a
+ * member says they are, the @mention picker searching every member by what is
+ * typed, and the Members tab showing to members only.
+ */
+
+afterEach(restoreAdapter);
+
+const PAGE = (data: unknown[] = [], extra: Record<string, unknown> = {}) => ({
+  data,
+  total: data.length,
+  page: 1,
+  pageSize: 24,
+  hasNextPage: false,
+  ...extra,
+});
+
+describe("buildDirectoryParams", () => {
+  it("defaults to the most active members, page 1, 24 a page", () => {
+    expect(buildDirectoryParams()).toEqual({ sort: "active", page: 1, limit: 24 });
+  });
+
+  it("sends a trimmed search, a role, a level and a sort", () => {
+    expect(
+      buildDirectoryParams({ q: "  ada ", role: "moderator", minLevel: 3, sort: "points", page: 2, limit: 12 }),
+    ).toEqual({
+      q: "ada",
+      role: "moderator",
+      minLevel: 3,
+      sort: "points",
+      page: 2,
+      limit: 12,
+    });
+  });
+
+  it("drops what the server would refuse", () => {
+    expect(buildDirectoryParams({ q: "   ", role: "owner" as never, minLevel: 12, page: 0, limit: 500 })).toEqual({
+      sort: "active",
+      page: 1,
+      limit: 100,
+    });
+    expect(buildDirectoryParams({ minLevel: 0, limit: -3 })).toEqual({ sort: "active", page: 1, limit: 1 });
+    expect(buildDirectoryParams({ q: "x".repeat(200) }).q).toHaveLength(80);
+  });
+});
+
+describe("countries", () => {
+  it("names a country in the viewer's language", () => {
+    expect(countryName("DE", "en")).toBe("Germany");
+    expect(countryName("de", "de")).toBe("Deutschland");
+    expect(countryName(null)).toBeNull();
+  });
+
+  it("lists every code once, sorted by name in the locale", () => {
+    const options = countryOptions("en");
+    expect(options).toHaveLength(COUNTRY_CODES.length);
+    expect(new Set(COUNTRY_CODES).size).toBe(COUNTRY_CODES.length);
+    const names = options.map((o) => o.name);
+    expect([...names].sort(new Intl.Collator("en").compare)).toEqual(names);
+    expect(options.find((o) => o.code === "NG")?.name).toBe("Nigeria");
+  });
+
+  it("knows a code, whatever its case, and has a centre for every centred code it lists", () => {
+    expect(isCountryCode("gb")).toBe(true);
+    expect(isCountryCode("XX")).toBe(false);
+    for (const code of Object.keys(COUNTRY_CENTROIDS)) expect(COUNTRY_CODES).toContain(code);
+  });
+});
+
+describe("memberGlobePoints", () => {
+  it("places each country at its centre, merges repeats, drops unknown and empty, biggest first", () => {
+    const points = memberGlobePoints([
+      { countryCode: "de", members: 3 },
+      { countryCode: "NG", members: 10 },
+      { countryCode: "DE", members: 2 },
+      { countryCode: "XX", members: 5 },
+      { countryCode: "FR", members: 0 },
+    ]);
+    expect(points).toEqual([
+      { countryCode: "NG", latitude: COUNTRY_CENTROIDS.NG[0], longitude: COUNTRY_CENTROIDS.NG[1], members: 10 },
+      { countryCode: "DE", latitude: COUNTRY_CENTROIDS.DE[0], longitude: COUNTRY_CENTROIDS.DE[1], members: 5 },
+    ]);
+    expect(memberGlobePoints(undefined)).toEqual([]);
+  });
+
+  it("keeps a country with no known centre in the list, but not on the globe", () => {
+    const rows = [
+      { countryCode: "GU", members: 2 },
+      { countryCode: "NG", members: 1 },
+      { countryCode: "bad", members: 9 },
+    ];
+    expect(memberMapCountries(rows)).toEqual([
+      { countryCode: "GU", members: 2 },
+      { countryCode: "NG", members: 1 },
+    ]);
+    expect(memberGlobePoints(rows).map((p) => p.countryCode)).toEqual(["NG"]);
+  });
+
+  it("sizes dots by the square root of each country's share", () => {
+    const markers = memberGlobeMarkers([
+      { countryCode: "NG", latitude: 9.1, longitude: 8.7, members: 100 },
+      { countryCode: "DE", latitude: 51.2, longitude: 10.5, members: 25 },
+    ]);
+    expect(markers[0]).toEqual({ location: [9.1, 8.7], size: 0.12 });
+    expect(markers[1].size).toBeCloseTo(0.03 + 0.09 * 0.5);
+  });
+});
+
+describe("memberLocationLabel", () => {
+  it("joins city and country, or shows whichever is set", () => {
+    expect(memberLocationLabel({ city: "Berlin", countryCode: "DE" }, "en")).toBe("Berlin, Germany");
+    expect(memberLocationLabel({ city: " ", countryCode: "DE" }, "de")).toBe("Deutschland");
+    expect(memberLocationLabel({ city: "Lagos", countryCode: null })).toBe("Lagos");
+    expect(memberLocationLabel({ city: null, countryCode: null })).toBeNull();
+  });
+});
+
+describe("mention search", () => {
+  it("builds the member search from the typed text", () => {
+    expect(mentionDirectoryParams("ad")).toEqual({ q: "ad", limit: 10, sort: "active" });
+    expect(mentionDirectoryParams("")).toEqual({ limit: 10, sort: "active" });
+    expect(mentionDirectoryParams(undefined)).toEqual({ limit: 10, sort: "active" });
+  });
+
+  it("asks nothing until there is an @token, then searches the members endpoint with q", async () => {
+    installAdapter([
+      get("/public/community/members", (req) =>
+        PAGE([
+          {
+            accountId: "a-2",
+            displayName: `Found ${req.params?.q ?? "all"}`,
+            avatarUrl: null,
+            level: 2,
+            points: 40,
+            firstName: "Ada",
+            lastName: null,
+          },
+        ]),
+      ),
+    ]);
+    const { result, rerender } = renderHook(({ q }: { q?: string }) => useCommunityMentionDirectory(q), {
+      wrapper: wrapper({ user: account() }),
+      initialProps: {},
+    });
+    await new Promise((resolve) => setTimeout(resolve, 200));
+    expect(calls("get", "/public/community/members")).toHaveLength(0);
+
+    rerender({ q: "ad" });
+    await waitFor(() => expect(result.current.data?.[0]?.displayName).toBe("Found ad"));
+    expect(calls("get", "/public/community/members").at(-1)?.params).toEqual({
+      profileId: PROFILE_ID,
+      communityId: COMMUNITY.id,
+      q: "ad",
+      limit: 10,
+      sort: "active",
+    });
+    // The composers read the leaderboard entry shape they always have.
+    expect(result.current.data?.[0]).toEqual({
+      accountId: "a-2",
+      displayName: "Found ad",
+      avatarUrl: null,
+      points: 40,
+      level: 2,
+      firstName: "Ada",
+      lastName: null,
+    });
+    expect(calls("get", "/public/community/leaderboard")).toHaveLength(0);
+  });
+
+  it("feeds the composer's suggestions from what the member types", async () => {
+    installAdapter([
+      get("/public/community/members", () =>
+        PAGE([
+          {
+            accountId: "a-9",
+            displayName: "Zara",
+            avatarUrl: null,
+            level: 1,
+            points: 0,
+            firstName: null,
+            lastName: null,
+          },
+        ]),
+      ),
+    ]);
+    const { result } = renderHook(() => useMentionComposer(), { wrapper: wrapper({ user: account() }) });
+    act(() => result.current.onTextChange("hi @za", 6));
+    await waitFor(() => expect(result.current.suggestions.map((s) => s.name)).toEqual(["Zara"]));
+    // Every request carried what was typed: none went out for the whole directory first.
+    expect(calls("get", "/public/community/members").map((r) => r.params?.q)).toEqual(["za"]);
+  });
+});
+
+describe("useCommunityMemberDirectory", () => {
+  it("sends the search once typing settles, and goes back to page 1 on a filter", async () => {
+    installAdapter([get("/public/community/members", () => PAGE([], { hasNextPage: true, total: 60 }))]);
+    const { result } = renderHook(() => useCommunityMemberDirectory(), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.hasNextPage).toBe(true));
+    act(() => result.current.nextPage());
+    await waitFor(() => expect(calls("get", "/public/community/members").some((r) => r.params?.page === 2)).toBe(true));
+
+    act(() => result.current.setSearch("ada"));
+    await waitFor(() =>
+      expect(calls("get", "/public/community/members").some((r) => r.params?.q === "ada" && r.params?.page === 1)).toBe(
+        true,
+      ),
+    );
+
+    act(() => result.current.setRole("moderator"));
+    await waitFor(() =>
+      expect(
+        calls("get", "/public/community/members").some(
+          (r) => r.params?.role === "moderator" && r.params?.q === "ada" && r.params?.page === 1,
+        ),
+      ).toBe(true),
+    );
+    expect(result.current.filtered).toBe(true);
+  });
+
+  it("loads the map only once the map is shown, and shapes it into dots", async () => {
+    installAdapter([
+      get("/public/community/members", () => PAGE()),
+      get("/public/community/members/map", () => [
+        { countryCode: "NG", members: 4 },
+        { countryCode: "GB", members: 2 },
+      ]),
+    ]);
+    const { result } = renderHook(() => useCommunityMemberDirectory(), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.isLoading).toBe(false));
+    expect(calls("get", "/public/community/members/map")).toHaveLength(0);
+    act(() => result.current.setView("map"));
+    await waitFor(() => expect(result.current.mapPoints.map((p) => p.countryCode)).toEqual(["NG", "GB"]));
+    expect(result.current.mapMembers).toBe(6);
+  });
+
+  it("says when the viewer is not a member", async () => {
+    installAdapter([
+      get("/public/community/members", () => {
+        throw { status: 403, message: "Forbidden" };
+      }),
+    ]);
+    const { result } = renderHook(() => useCommunityMemberDirectory(), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.forbidden).toBe(true));
+  });
+});
+
+describe("the Members tab in the member home nav", () => {
+  it("shows to a member", async () => {
+    installAdapter([
+      get(/^\/public\/communities\/fan-club\/me$/, () => viewer({ state: "member", canInteract: true })),
+    ]);
+    const { result } = renderHook(() => useMemberHomeNav({ currentPath: "/i/communities/fan-club/home/members" }), {
+      wrapper: wrapper({ user: account() }),
+    });
+    await waitFor(() => expect(result.current.visibleItems.map((i) => i.key)).toContain("members"));
+    expect(result.current.activeKey).toBe("members");
+  });
+
+  it("stays hidden signed out", async () => {
+    installAdapter([]);
+    const { result } = renderHook(() => useMemberHomeNav({}), { wrapper: wrapper() });
+    await waitFor(() => expect(result.current.isReady).toBe(true));
+    expect(result.current.visibleItems.map((i) => i.key)).not.toContain("members");
+  });
+
+  it("shows Calendar and Classroom to a member by the same rule, with no call needed", async () => {
+    installAdapter([
+      get(/^\/public\/communities\/fan-club\/me$/, () => viewer({ state: "member", canInteract: true })),
+    ]);
+    const { result } = renderHook(() => useMemberHomeNav({ currentPath: "/i/communities/fan-club/home/classroom" }), {
+      wrapper: wrapper({ user: account() }),
+    });
+    await waitFor(() => expect(result.current.visibleItems.map((i) => i.key)).toContain("classroom"));
+    expect(result.current.visibleItems.map((i) => i.key)).toContain("calendar");
+    expect(result.current.activeKey).toBe("classroom");
+    expect(result.current.items.find((i) => i.key === "classroom")?.href).toBe("/i/communities/fan-club/home/classroom");
+  });
+
+  it("hides Calendar and Classroom from someone who is not a member", async () => {
+    installAdapter([get(/^\/public\/communities\/fan-club\/me$/, () => viewer({ state: "none" }))]);
+    const { result } = renderHook(() => useMemberHomeNav({}), { wrapper: wrapper({ user: account() }) });
+    await waitFor(() => expect(result.current.isReady).toBe(true));
+    await waitFor(() => expect(calls("get", /^\/public\/communities\/fan-club\/me$/).length).toBeGreaterThan(0));
+    const keys = result.current.visibleItems.map((i) => i.key);
+    expect(keys).not.toContain("calendar");
+    expect(keys).not.toContain("classroom");
+  });
+});