@wix/himalaya-cli 0.1633.0 → 0.1635.0

package/templates/branded-lite/tier5-src/himi-branded-lite-cms/index.ts

@@ -1,58 +1,135 @@
 import { defineService } from "../_shared/collection-service.js";
-import { collectionDefinitions, type CmsCollectionDefinition } from "../_shared/himi-cms";
-import { copyParam, stashCopy } from "../_shared/himi-copy.js";
+import { collectionDefinitions, countDataItems, type CmsCollectionDefinition } from "../_shared/himi-cms";
+import { copyParam, copyPlural, stashCopy } from "../_shared/himi-copy.js";
 import { getAll, upsert, type DbEntity } from "@himalaya/local-db";
 
 // Offline-first (data-offline): this catalog is derived from the app's BAKED CMS
 // contract (himalaya.input.cmsCollections) — there is no live wixApi fetch to
-// revalidate, so it is structurally read-only. We still add the read-through seam
-// around that baked load path: the derived rows are mirrored into the on-device store,
+// revalidate the NAMES, so they are structurally read-only. We still add the read-through seam
+// around that baked load path: the derived entries are mirrored into the on-device store,
 // and if the contract ever arrives empty we fall back to the last-synced cache.
 // DEGRADES GRACEFULLY: every local-db call is wrapped so a build that hasn't granted
 // `local_database` (+ declared the `cms_collections` entity) behaves exactly as before.
+//
+// The item COUNT under each name is the one live read. It is never cached: a stale number would
+// read as the business's own, and a count the API did not return is not shown at all.
 const ENTITY = "cms_collections";
-async function readCached(): Promise<CollectionRow[]> {
-  try { return (await getAll(ENTITY)) as unknown as CollectionRow[]; } catch { return []; }
+
+/** What the screen needs to know about a collection, with no per-visit state. Mirrored to the cache. */
+interface Entry {
+  id: string;
+  title: string;
+  detailScreenId: string;
+  isMembersOnly: boolean;
+}
+
+async function readCached(): Promise<Entry[]> {
+  try {
+    return (await getAll(ENTITY)).map((r) => {
+      const stored = r as unknown as Partial<Entry> & { meta?: string };
+      return {
+        id: String(stored.id ?? ""),
+        title: typeof stored.title === "string" ? stored.title : String(stored.id ?? ""),
+        detailScreenId: typeof stored.detailScreenId === "string" ? stored.detailScreenId : `himi_cms_collection_${encodeURIComponent(String(stored.id ?? ""))}`,
+        // A row cached before counts carried its "Members only" label in `meta`.
+        isMembersOnly: stored.isMembersOnly ?? Boolean(stored.meta),
+      };
+    }).filter((entry) => entry.id !== "");
+  } catch { return []; }
 }
-async function writeCached(rows: CollectionRow[]): Promise<void> {
-  try { for (const r of rows) await upsert(ENTITY, r as unknown as DbEntity); } catch { /* capability not granted → online-only */ }
+async function writeCached(entries: Entry[]): Promise<void> {
+  try { for (const e of entries) await upsert(ENTITY, e as unknown as DbEntity); } catch { /* capability not granted → online-only */ }
 }
 
+/** "pending" until the count call settles; "none" for a members-only collection, which shows a lock instead. */
+type CountStatus = "pending" | "ready" | "error" | "none";
+
 interface CollectionRow {
   id: string;
   title: string;
-  subtitle: string;
-  meta: string;
-  initial: string;
   detailScreenId: string;
+  isMembersOnly: boolean;
+  membersOnlyText: string;
+  countStatus: CountStatus;
+  countText: string;
+  /** The row's accessible name: the collection, then whichever caption it shows. */
+  accessibilityLabel: string;
+  // The descriptor hides a node when its bound flag is TRUE, so each caption has its inverse.
+  noCountLoading: boolean;
+  noCountText: boolean;
+  noMembersOnly: boolean;
 }
 
 interface State {
   status: "ready";
-  all: CollectionRow[];
   rows: CollectionRow[];
-  emptyText: string;
-  noRows: boolean;
+  /** More than 5 collections: the name search shows. */
+  showSearch: boolean;
+  hideSearch: boolean;
+  /** The contract holds no collection at all. */
   noEmpty: boolean;
+  /** A search matched none of them. */
+  noNoMatch: boolean;
+  noRows: boolean;
 }
 
-function row(collection: CmsCollectionDefinition): CollectionRow {
-  const title = collection.displayName.trim() || collection.id;
-  // No field count and no "Available to visitors": both are back-office schema/permission
-  // metadata, meaningless to the visitor reading the card ([branded-lite-qa] #3077). "Members
-  // only" stays — it tells the visitor they will need to sign in, which is theirs to know.
+/** A name search earns its place only past this many collections. */
+const SEARCH_THRESHOLD = 5;
+
+let entries: Entry[] = [];
+let query = "";
+/** A settled count by collection id. A failed refresh never replaces a count already known. */
+const counts = new Map<string, { status: "ready" | "error"; count: number }>();
+/** Ids with a count call on the wire, so a second `load` (onAppear fires on every visit) does not double it. */
+const inFlight = new Set<string>();
+
+function entryFor(collection: CmsCollectionDefinition): Entry {
   return {
     id: collection.id,
-    title,
-    subtitle: "",
-    meta: collection.readRole === "ANYONE" ? "" : copyParam("cms.membersOnlyAccessLabel", "Members only"),
-    initial: (title[0] || "C").toUpperCase(),
+    title: collection.displayName.trim() || collection.id,
     detailScreenId: `himi_cms_collection_${encodeURIComponent(collection.id)}`,
+    isMembersOnly: collection.readRole !== "ANYONE",
   };
 }
 
-function ready(all: CollectionRow[], rows = all, emptyText = copyParam("cms.emptyText", "No CMS collections are published to this app yet.")): State {
-  return { status: "ready", all, rows, emptyText, noRows: rows.length === 0, noEmpty: rows.length > 0 };
+function rowFor(entry: Entry): CollectionRow {
+  const membersOnlyText = copyParam("cms.membersOnlyAccessLabel", "Members only");
+  const known = counts.get(entry.id);
+  const countStatus: CountStatus = entry.isMembersOnly ? "none" : known?.status ?? "pending";
+  const countText = countStatus === "ready" && known
+    ? copyPlural("cms.itemCount", "{n, plural, one {# item} other {# items}}", known.count)
+    : "";
+  const caption = entry.isMembersOnly ? membersOnlyText : countText;
+  return {
+    id: entry.id,
+    title: entry.title,
+    detailScreenId: entry.detailScreenId,
+    isMembersOnly: entry.isMembersOnly,
+    membersOnlyText,
+    countStatus,
+    countText,
+    accessibilityLabel: caption ? `${entry.title}, ${caption}` : entry.title,
+    noCountLoading: countStatus !== "pending",
+    noCountText: countStatus !== "ready",
+    noMembersOnly: !entry.isMembersOnly,
+  };
+}
+
+/** Every visible field, derived from the module's truth at the moment of the call, so an action that
+ *  settles later (a count arriving, a search typed) can never publish an older picture of it. */
+function view(): State {
+  const needle = query.trim().toLowerCase();
+  const shown = needle ? entries.filter((entry) => entry.title.toLowerCase().includes(needle)) : entries;
+  const showSearch = entries.length > SEARCH_THRESHOLD;
+  return {
+    status: "ready",
+    rows: shown.map(rowFor),
+    showSearch,
+    hideSearch: !showSearch,
+    noEmpty: entries.length > 0,
+    noNoMatch: entries.length === 0 || shown.length > 0,
+    noRows: shown.length === 0,
+  };
 }
 
 function value(arg: unknown, key: string): string {
@@ -61,30 +138,74 @@ function value(arg: unknown, key: string): string {
   return typeof result === "string" ? result : "";
 }
 
+/** The count the API returned, or undefined: a missing or malformed total is never read as zero. */
+function totalOf(response: { totalCount?: number } | undefined): number | undefined {
+  const total = response?.totalCount;
+  return typeof total === "number" && Number.isFinite(total) && total >= 0 ? total : undefined;
+}
+
+/** One count call per readable collection, all at once; each row fills as ITS call returns. */
+function startCounts(): void {
+  for (const entry of entries) {
+    if (entry.isMembersOnly || inFlight.has(entry.id)) continue;
+    inFlight.add(entry.id);
+    const settle = (total: number | undefined) => { inFlight.delete(entry.id); void svc.countSettled({ id: entry.id, total }); };
+    countDataItems(entry.id).then((response) => settle(totalOf(response)), () => settle(undefined));
+  }
+}
+
 const inputCollections = (globalThis as { himalaya?: { input?: { cmsCollections?: unknown } } }).himalaya?.input?.cmsCollections;
+entries = collectionDefinitions(typeof inputCollections === "string" ? inputCollections : "").map(entryFor);
+const initialState = view();
+const derivedStateKeys = Object.keys(initialState) as Array<keyof State>;
 
 const svc = defineService<State, {
-  load: (state: State, arg?: unknown) => Promise<State>;
+  load: (state: State, arg?: unknown) => Promise<State | undefined>;
   search: (state: State, arg?: unknown) => State;
+  countSettled: (state: State, arg: { id: string; total: number | undefined }) => State;
 }>("himiBrandedCms", {
-  state: ready(collectionDefinitions(typeof inputCollections === "string" ? inputCollections : "").map(row)),
+  state: initialState,
+  // Rows and visibility are derived from this run's contract/query/counts.
+  // A prior search or count must not override them on a cold boot. Collection
+  // definitions already have their own explicit local-database cache.
+  notHydrated: derivedStateKeys,
+  notPersisted: derivedStateKeys,
   actions: {
-    load: async (_state, arg) => {
+    load: async (state, arg) => {
       stashCopy(arg);
-      const all = collectionDefinitions(value(arg, "collections")).map(row);
-      if (all.length) { await writeCached(all); return ready(all); }
-      // No baked contract rows: fall back to the last-synced cache (offline), else empty.
-      const cached = await readCached();
-      return cached.length ? ready(cached) : ready(all);
+      // The remounted SearchField starts empty. Reset before awaiting the cache so
+      // a search typed during this load is not cleared by its eventual completion.
+      query = "";
+      const given = value(arg, "collections");
+      const baked = collectionDefinitions(given).map(entryFor);
+      if (baked.length) {
+        entries = baked;
+        await writeCached(baked);
+      } else if (given !== "" || !entries.length) {
+        // The contract named no collection (or nothing at all seeded this screen): what was seeded from the
+        // input no longer stands. Fall back to the last-synced cache (offline), else the empty state.
+        entries = await readCached();
+      }
+      startCounts();
+      // Actions are not serialized: a count that settles while this one is still committing would be
+      // overwritten by the older picture returned here. The names normally match what the screen already
+      // shows (the same contract seeded it), so then there is nothing to commit and nothing to overwrite.
+      const next = view();
+      return JSON.stringify(next) === JSON.stringify(state) ? undefined : next;
+    },
+    search: (_state, arg) => {
+      query = value(arg, "value");
+      return view();
     },
-    search: (state, arg) => {
-      const query = value(arg, "value").trim().toLowerCase();
-      const rows = query
-        ? state.all.filter((item) => `${item.title} ${item.subtitle} ${item.meta}`.toLowerCase().includes(query))
-        : state.all;
-      return ready(state.all, rows, query ? copyParam("cms.searchEmptyText", "No collections match your search.") : undefined);
+    countSettled: (_state, arg) => {
+      if (arg.total !== undefined) counts.set(arg.id, { status: "ready", count: arg.total });
+      else if (counts.get(arg.id)?.status !== "ready") counts.set(arg.id, { status: "error", count: 0 });
+      return view();
     },
   },
 });
 
+// NO module-scope `startCounts()`: a bridge call made during the bundle's own evaluation stalls on
+// the Android WebView (see himi-owner-lite-aria-history). The names paint from the baked input, and
+// onAppear's `load` starts the counts right after that first frame.
 export { svc };

package/templates/branded-lite/tier5-src/himi-branded-lite-inbox/index.ts

@@ -0,0 +1,83 @@
+// himi-branded-lite-inbox — the member's Inbox: every conversation the member-role chat list returns, the
+// business's and other members'. Only the member-role list is used (`GET inbox/v2/conversations`, the call the
+// first Inbox made, is an OWNER endpoint that answers a member with 404). A failed query is an error with Retry
+// (or Sign in for a visitor) and an empty one is a real empty state — never sample rows presented as the
+// customer's own. Samples appear only in the host's explicit sample preview (_shared/branded-load-state.ts).
+import { defineService } from "../_shared/collection-service.js";
+import { LOADING, loaded, loadFailed, type LoadCopy, type LoadFlags } from "../_shared/branded-load-state.js";
+import { getChatToken, listChatroomsPage } from "@himalaya/wix-chat-web";
+import { assertMemberAccess, memberAccess } from "../_shared/member-access.js";
+import { inboxRows, type InboxRow } from "../_shared/inbox-rooms.js";
+import { copyParam, stashCopy } from "../_shared/himi-copy.js";
+
+type Row = Omit<InboxRow, "at">;
+interface S extends LoadFlags {
+  conversations: Row[]; emptyText: string;
+  isMock: boolean; notMock: boolean; /** #2849 — hiddenWhen() hides on TRUE, so these are inverted: the empty-state banner
+   *  shows only when the site really has none, and the unavailable one only when the query failed. A failed
+   *  query must never render the sentence that claims the customer has no conversations. */
+  notMockEmpty: boolean; notMockUnavailable: boolean;
+}
+
+const MEMBER = { role: "member" } as const;
+const PAGE_SIZE = 50;
+// 2000 conversations: far beyond a real member. The cap only stops a runaway cursor from looping, and reaching it is an
+// error, never a quietly shorter list.
+const MAX_PAGES = 40;
+
+const MOCK: Row[] = [
+  { id: "sample-support", title: "Support", subtitle: "Hi! Let us know how we can help.", screenId: "himi_business_chat", kind: "", photo: "", initial: "S", unread: false, unreadDot: "" },
+  { id: "sample-member", title: "A member", subtitle: "Welcome 👋 Thanks for joining us!", screenId: "himi_chat_thread", kind: "chatroom", photo: "", initial: "A", unread: false, unreadDot: "" },
+];
+
+/** Sample rows reach the screen ONLY in the host's explicit sample preview; a failed or empty query is an
+ *  honest error / empty state (branded-load-state.ts). */
+const COPY: LoadCopy<Row> = {
+  prefix: "inbox",
+  empty: "No messages yet.",
+  error: "Your messages couldn't be loaded.",
+  signIn: "Sign in to see your messages.",
+  sample: () => MOCK.map((r) => ({ ...r })),
+};
+
+const signInRequired = () => new Error("Unauthenticated: sign in to see your messages");
+
+async function listAllRooms(): Promise<unknown[]> {
+  // One token for every page; a refused one fails the whole load rather than showing half a list.
+  const { chatToken } = await getChatToken(MEMBER);
+  const rooms: unknown[] = [];
+  let nextPointer: number | string | undefined;
+  for (let page = 0; page < MAX_PAGES; page++) {
+    const result = await listChatroomsPage({ ...MEMBER, chatToken, pageSize: PAGE_SIZE, ...(nextPointer !== undefined ? { nextPointer } : {}) });
+    rooms.push(...result.items);
+    nextPointer = result.nextPointer;
+    if (nextPointer === undefined) return rooms;
+  }
+  throw new Error("Conversation list is longer than the pages read");
+}
+
+const svc = defineService<S, { load: (s: S, arg?: unknown) => Promise<S> }>("himiBrandedInbox", {
+  state: { ...LOADING, conversations: [], emptyText: "" },
+  actions: {
+    load: async (s, arg) => {
+      // The screen's onAppear carries the copy pack (Hebrew, an owner's wording). This service is not a collection, so
+      // nothing else stashes it; a retry sends no params and keeps the pack already stashed.
+      stashCopy(arg);
+      try {
+        const member = await memberAccess();
+        if (!member.email) throw signInRequired();
+        const rows = inboxRows(await listAllRooms(), copyParam("inbox.conversationFallback", "Conversation")).map(({ at: _at, ...row }) => row);
+        // A sign-out or account switch while the list loaded must not paint the previous member's rooms.
+        await assertMemberAccess(member);
+        return { ...s, ...loaded("conversations", rows, COPY) };
+      } catch (err) {
+        const failed = loadFailed("conversations", (await memberAccess()).email ? err : signInRequired(), COPY);
+        // The failure sentence is the screen banner's stock key, not a second key for the same English (the extractor
+        // keeps one key per extracted row); loadFailed would read `inbox.errorText`, which does not exist.
+        return { ...s, ...failed, ...(failed.signInRequired ? {} : { error: copyParam("inbox.unavailableBody", COPY.error) }) };
+      }
+    },
+  },
+});
+svc.load();
+export { svc };

package/templates/branded-lite/tier5-src/himi-branded-lite-notifications/index.ts

@@ -10,6 +10,10 @@ import { defineService as registerService } from "../_shared/collection-service.
 import { LOADING, loaded, loadFailed, type LoadCopy, type LoadFlags } from "../_shared/branded-load-state.js";
 import { queryNotifications, markRead, markAllRead, type MfvNotification } from "@himalaya/wix-members-feed-viewer";
 import { assertMemberAccess, memberAccess, type MemberAccess } from "../_shared/member-access.js";
+import { navigate } from "@himalaya/state";
+import { notificationOpen, urlHost, type NotificationOpen } from "../_shared/notification-target.js";
+import { openRichLink } from "../_shared/rich-content-link.js";
+import { copyParam, copyTemplate } from "../_shared/himi-copy.js";
 
 interface Row {
   id: string;
@@ -22,9 +26,13 @@ interface Row {
   photo: string;
   initial: string;
   dest: string;
+  /** What a tap does (a screen, a web link or nothing). Absent on the preview samples, which open nothing. */
+  open?: NotificationOpen;
 }
 interface S extends LoadFlags {
   items: Row[]; emptyText: string; actionMessage: string;
+  /** The web link the last tap named and is waiting for a second tap to open (see `open`). */
+  pendingUrl: string;
   /** Ownership travels with the rows, including a state captured by an async write. */
   inboxMember: MemberAccess | null;
   isMock: boolean; notMock: boolean;
@@ -67,7 +75,17 @@ function photo(n: MfvNotification): string {
   return n.icon?.personAvatarData?.data || n.icon?.webUrlData?.webUrl || "";
 }
 
-function norm(n: MfvNotification): Row {
+/** The screens the Notifications screen says its app serves, or undefined when it did not say. */
+function servedScreens(arg: unknown): ReadonlySet<string> | undefined {
+  const served = (arg as { served?: unknown } | null | undefined)?.served;
+  // A Retry reaches `load` with no params (the collection layer re-dispatches the action bare), so the list the screen
+  // last named is kept: dropping it would let every catalog link be tried again.
+  if (typeof served === "string") lastServed = new Set(served.split(",").filter(Boolean));
+  return lastServed;
+}
+let lastServed: ReadonlySet<string> | undefined;
+
+function norm(n: MfvNotification, served?: ReadonlySet<string>): Row {
   const name = (n.title || n.message || "Notification").trim() || "Notification";
   const rel = relativeTime(n.sentDate);
   const lead = n.title && n.message ? n.message.trim() : "";
@@ -83,6 +101,7 @@ function norm(n: MfvNotification): Row {
     photo: p,
     initial: (name[0] || "#").toUpperCase(),
     dest: dest(n),
+    open: notificationOpen(n.deeplink, served),
   };
 }
 
@@ -128,12 +147,13 @@ function currentInbox(s: S): S | undefined {
 }
 
 const defineService = withOnlineWrites(registerService, ["markOneRead","markAll"], { messageFields: ["actionMessage"] });
-const INITIAL = { ...LOADING, items: [] as Row[], emptyText: "", actionMessage: "", inboxMember: null };
+const INITIAL = { ...LOADING, items: [] as Row[], emptyText: "", actionMessage: "", pendingUrl: "", inboxMember: null };
 const svc = defineService<S, {
   prepare: (s: S) => S;
-  load: (s: S) => Promise<S>;
+  load: (s: S, arg?: unknown) => Promise<S>;
   markOneRead: (s: S, id: string) => Promise<S | undefined>;
   markAll: (s: S) => Promise<S | undefined>;
+  open: (s: S, arg?: unknown) => Promise<S | undefined>;
 }>("himiBrandedNotifications", {
   state: INITIAL,
   actions: {
@@ -141,14 +161,16 @@ const svc = defineService<S, {
     // Native hosts may already cold-paint their account-scoped snapshot; this
     // reducer does not control that earlier host phase.
     prepare: (s) => ({ ...s, ...INITIAL }),
-    load: async (s) => {
+    load: async (s, arg) => {
+      // The screen names which of the link targets this app serves (a comma list); none given means any may be tried.
+      const served = servedScreens(arg);
       try {
         const member = await requireMember();
-        const items = (await queryNotifications(25)).map(norm);
+        const items = (await queryNotifications(25)).map((n) => norm(n, served));
         await assertMemberAccess(member);
-        return { ...s, ...loaded("items", items, COPY), inboxMember: member, actionMessage: "" };
+        return { ...s, ...loaded("items", items, COPY), inboxMember: member, actionMessage: "", pendingUrl: "" };
       } catch (err) {
-        return { ...s, ...loadFailed("items", (await memberAccess()).email ? err : signInRequired(), COPY), inboxMember: null };
+        return { ...s, ...loadFailed("items", (await memberAccess()).email ? err : signInRequired(), COPY), inboxMember: null, actionMessage: "", pendingUrl: "" };
       }
     },
     // Mark one read; optimistically clear its dot. Real write is best-effort and
@@ -174,6 +196,39 @@ const svc = defineService<S, {
       const current = currentInbox(s);
       return current ? { ...current, items: current.items.map((r) => (r.id === id ? { ...r, unread: false, unreadDot: "" } : r)) } : undefined;
     },
+    // A tap on a row opens what the notification points at, like the One App: a Himi screen when its link names
+    // one of ours (see _shared/notification-target.ts), else its https link, else a visible "can't open".
+    // A web link is written by the site, so it needs a SECOND tap on the same row, after the first tap has
+    // shown where it goes. It never replaces the inbox, and an unknown link never guesses a screen.
+    open: async (s, arg): Promise<S | undefined> => {
+      const id = String((arg as { id?: unknown } | null | undefined)?.id ?? "");
+      const row = s.items.find((r) => r.id === id);
+      if (!row || s.busy) return undefined;
+      if (!s.isMock) {
+        try { await requireInboxMember(s); } catch (err) {
+          const current = currentInbox(s);
+          return current ? { ...current, ...loadFailed("items", err, COPY), inboxMember: null } : undefined;
+        }
+      }
+      const current = currentInbox(s);
+      if (!current) return undefined;
+      const action = row.open ?? { kind: "none" as const };
+      if (action.kind === "url") {
+        if (current.pendingUrl !== action.url) {
+          return { ...current, pendingUrl: action.url, actionMessage: copyTemplate("notifications.openLinkText", "Tap again to open {host}.", { host: urlHost(action.url) }) };
+        }
+        const opened = await openRichLink(action.url);
+        const now = currentInbox(s);
+        return now ? { ...now, pendingUrl: "", actionMessage: opened ? "" : copyParam("notifications.cantOpenText", "This notification can't be opened here.") } : undefined;
+      }
+      if (action.kind === "none") {
+        return { ...current, pendingUrl: "", actionMessage: copyParam("notifications.cantOpenText", "This notification can't be opened here.") };
+      }
+      // Read on open: the dot clears at once, the write is best effort and never holds the navigation.
+      if (!id.startsWith("sample-") && row.unread) markRead([id]).catch(() => undefined);
+      const read = { ...current, pendingUrl: "", actionMessage: "", items: current.items.map((r) => (r.id === id ? { ...r, unread: false, unreadDot: "" } : r)) };
+      return navigate(read, { screenId: action.target.screenId, args: action.target.args });
+    },
     // Mark everything read; optimistically clear all dots.
     markAll: async (s): Promise<S | undefined> => {
       if (s.busy) return undefined;

package/templates/branded-lite/tier5-src/wix-spaces-members/index.ts

@@ -1,23 +1,34 @@
 // Public site-member directory. Search, sorting, totals and offset paging match
 // OneApp's Members v1 query; no owner roster or build-time count is substituted.
 import { defineService } from "@himalaya/state";
-import { queryMembers, type WixMember } from "@himalaya/wix-members";
+import { queryMembers, followMember, unfollowMember, type WixMember } from "@himalaya/wix-members";
 import { createCollectionQuery } from "../_shared/collection-query.js";
 import { readAccess, assertReadAccess, readAccessDenied, type ReadAccess } from "../_shared/member-read.js";
 import { memberAccessChanged } from "../_shared/member-access.js";
 import { withEmptyFlags } from "../_shared/empty-flags.js";
+import { copyParam, stashCopy } from "../_shared/himi-copy.js";
+import { memberRowExtras, followLabel, type MemberRowExtras } from "../_shared/member-row-extras.js";
 
-interface Row { id: string; name: string; subtitle: string; initial: string; photo: string; sectionTitle: string }
+interface Row extends MemberRowExtras { id: string; name: string; initial: string; photo: string; sectionTitle: string }
 interface S {
   status: "loading" | "ready" | "error";
   members: Row[]; emptyText: string;
   query: string; total: number | null; searchLabel: string;
   nextCursor: string; noMore: boolean; noPageError: boolean;
   error: string; notErrored: boolean; notLoading: boolean; hideSearch: boolean;
+  followHint: string;
 }
 const PAGE_SIZE = 50;
 const SEARCH_FIELDS = ["contact.firstName", "contact.lastName", "profile.nickname"];
 let directoryAccess: ReadAccess | undefined;
+// A Follow the signed-in member just made or undone. Rows keep the state they were read with, so this
+// shows the change at once; the next first-page read replaces it with what the server says.
+const followChanges = new Map<string, boolean>();
+const pendingFollows = new Set<string>();
+
+/** Who a directory read, and a write that follows it, belong to: the site and the signed-in member. A reload
+ *  builds a NEW ReadAccess object for the same reader, so identity says nothing; this key does. */
+const readerKey = (access: ReadAccess | undefined): string => access ? JSON.stringify([access.tenant, access.member.scope, access.member.email]) : "";
 
 function name(m: WixMember): string {
   const nick = m.profile?.nickname?.trim();
@@ -25,10 +36,14 @@ function name(m: WixMember): string {
   const full = [m.contact?.firstName, m.contact?.lastName].filter(Boolean).join(" ").trim();
   return full || "Member";
 }
-function row(m: WixMember): Row {
+function row(m: WixMember, extras: MemberRowExtras): Row {
   const n = name(m);
   // Login emails are not directory subtitles. Only public profile content is presented.
-  return { id: m.id, name: n, subtitle: "", initial: (n[0] || "#").toUpperCase(), photo: m.profile?.photo?.url || "", sectionTitle: "" };
+  return { id: m.id, name: n, initial: (n[0] || "#").toUpperCase(), photo: m.profile?.photo?.url || "", sectionTitle: "", ...extras };
+}
+function withFollowChange(item: Row): Row {
+  const following = followChanges.get(item.id);
+  return following === undefined ? item : { ...item, isFollowing: following, followLabel: followLabel(following) };
 }
 function sections(rows: Row[]): Row[] {
   const groups = new Map<string, Row[]>();
@@ -47,16 +62,17 @@ const directory = createCollectionQuery<Row>({
     if (!Number.isSafeInteger(offset) || offset < 0) throw new Error("Invalid member page offset");
     const access = cursor ? directoryAccess : await readAccess();
     if (!access) throw memberAccessChanged();
-    if (!cursor) directoryAccess = access;
+    if (!cursor) { directoryAccess = access; followChanges.clear(); followHint = ""; }
     await assertReadAccess(access);
     const response = await queryMembers({ query: {
       filter: { status: "APPROVED", privacyStatus: "PUBLIC" },
       sorting: [{ fieldName: "profile.nickname", order: "ASC" }],
       paging: { limit: PAGE_SIZE, offset },
     }, ...(criteria.query ? { search: { expression: criteria.query, fields: SEARCH_FIELDS } } : {}) });
+    if (!Array.isArray(response.members) || response.members.some(member => !member?.id)) throw new Error("Invalid member page");
+    const extras = response.members.length ? await memberRowExtras(response.members.map(member => member.id), access) : undefined;
     await assertReadAccess(access);
     if (access !== directoryAccess) throw memberAccessChanged();
-    if (!Array.isArray(response.members) || response.members.some(member => !member?.id)) throw new Error("Invalid member page");
     const metadata = response.metadata;
     if (metadata?.offset !== undefined && metadata.offset !== offset) throw new Error("Mismatched member page offset");
     const total = !metadata?.tooManyToCount && typeof metadata?.total === "number" && Number.isSafeInteger(metadata.total) && metadata.total >= 0
@@ -64,7 +80,7 @@ const directory = createCollectionQuery<Row>({
     const next = offset + response.members.length;
     if (!response.members.length && total !== undefined && total > next) throw new Error("Incomplete member page");
     return {
-      items: response.members.map(row), total,
+      items: response.members.map(member => row(member, extras!(member.id))), total,
       nextCursor: response.members.length && (total === undefined ? response.members.length === PAGE_SIZE : next < total) ? String(next) : "",
     };
   },
@@ -73,6 +89,7 @@ const directory = createCollectionQuery<Row>({
 // Set once the reader has typed a search: from then on the field stays mounted, even while a cleared search
 // reloads the full directory (no rows, no query yet), so it never unmounts and loses focus mid-edit.
 let searched = false;
+let followHint = "";
 
 function project(): S {
   const page = directory.getState();
@@ -81,7 +98,7 @@ function project(): S {
   const failed = page.status === "error";
   return {
     status: failed ? "error" : loading ? "loading" : "ready",
-    members: sections(page.items), query: page.criteria.query, total,
+    members: sections(page.items.map(withFollowChange)), query: page.criteria.query, total,
     searchLabel: total === null ? "" : `${total} ${total === 1 ? "member" : "members"}`,
     emptyText: page.status === "ready" && !page.items.length ? page.criteria.query ? "No results" : "No members yet" : "",
     nextCursor: loading || page.loadingMore || page.pageError ? "" : page.nextCursor,
@@ -94,21 +111,24 @@ function project(): S {
     // A successful empty SEARCH keeps its field reachable (to clear the query); a directory that is
     // loading or truly empty (no query, no rows) has nothing to search.
     hideSearch: failed || (!page.items.length && !page.criteria.query && !searched),
+    followHint,
   };
 }
 const svc = defineService<S, {
-  load: (s: S) => Promise<undefined>;
+  load: (s: S, arg?: unknown) => Promise<undefined>;
   filter: (s: S, arg?: unknown) => Promise<undefined>;
   loadMore: (s: S) => Promise<undefined>;
   retry: (s: S) => Promise<undefined>;
+  toggleFollow: (s: S, arg?: unknown) => Promise<S | undefined>;
   changed: (s: S) => S;
 }>("spacesMembers", withEmptyFlags({
   state: { status: "loading", members: [], emptyText: "", query: "", total: null, searchLabel: "", nextCursor: "", noMore: true, noPageError: true,
-    error: "", notErrored: true, notLoading: false, hideSearch: true },
+    error: "", notErrored: true, notLoading: false, hideSearch: true, followHint: "" },
   // A restored worker must re-read the current reader/site before showing a roster.
-  notHydrated: ["status", "members", "emptyText", "query", "total", "searchLabel", "nextCursor", "noMore", "noPageError", "error", "notErrored", "notLoading", "hideSearch"],
+  notHydrated: ["status", "members", "emptyText", "query", "total", "searchLabel", "nextCursor", "noMore", "noPageError", "error", "notErrored", "notLoading", "hideSearch", "followHint"],
   actions: {
-    load: async () => { await directory.query(directory.getState().criteria); return undefined; },
+    // The screen's onAppear carries the copy pack (the owner's wording, the stock translations) and the app language.
+    load: async (_s, arg) => { stashCopy(arg); await directory.query(directory.getState().criteria); return undefined; },
     filter: async (_s, arg) => {
       const value = typeof arg === "string" ? arg : (arg as { value?: unknown })?.value;
       if (typeof value === "string" && value.trim()) searched = true;
@@ -116,6 +136,34 @@ const svc = defineService<S, {
     },
     loadMore: async () => { await directory.loadMore(); return undefined; },
     retry: async () => { await directory.retry(); return undefined; },
+    // Only a signed-in member reaches this: a Visitor's Follow opens sign-in from the descriptor instead.
+    toggleFollow: async (_s, arg) => {
+      const id = (arg as { id?: unknown } | undefined)?.id;
+      const access = directoryAccess;
+      if (typeof id !== "string" || !id || !access?.member.email || pendingFollows.has(id)) return undefined;
+      const row = directory.getState().items.find(item => item.id === id);
+      if (!row) return undefined;
+      const following = withFollowChange(row).isFollowing;
+      pendingFollows.add(id);
+      try {
+        await assertReadAccess(access);
+        if (following) await unfollowMember(id); else await followMember(id);
+        await assertReadAccess(access);
+        // A first-page reload (typing in search, Retry) may have replaced directoryAccess while the write was in
+        // flight. The write still stands for the same reader on the same site, so it is recorded; only another
+        // reader's list must not take it.
+        if (readerKey(access) !== readerKey(directoryAccess)) return undefined;
+        followChanges.set(id, !following);
+        followHint = "";
+      } catch {
+        // A failed write belongs to the member who tapped: the control keeps its state and says so.
+        if (readerKey(access) !== readerKey(directoryAccess)) return undefined;
+        followHint = copyParam("members.followError", "Couldn't update Follow — try again.");
+      } finally {
+        pendingFollows.delete(id);
+      }
+      return project();
+    },
     changed: () => project(),
   },
 }, { members: "noMembers" }));