@tribe-nest/forge 3.42.1 → 3.50.0

package/src/ui/media/stage/stageTheme.ts

@@ -0,0 +1,50 @@
+import type { ResolvedThemeTokens } from "../../theme/ForgeThemeProvider";
+
+/**
+ * The call stage's palette: a dark stage, with the site's accents.
+ *
+ * THE one sanctioned exception to "colors only from theme tokens" (a locked
+ * product decision): the call screen commits to a near-black chrome on every
+ * surface, the way every video product does, because faces read against dark
+ * and a light-themed site would otherwise produce a white call screen. The
+ * neutral constants live in THIS file and nowhere else; every accent (the
+ * speaking ring, active buttons, badges, danger) still flows from the theme,
+ * so the stage is recognisably the site's.
+ */
+export type StageTokens = {
+  /** Near-black stage floor. */
+  stageBg: string;
+  /** Tiles, panels, dialogs: one step up from the floor. */
+  stageSurface: string;
+  /** The control bar and top bar: one more step. */
+  stageChrome: string;
+  stageText: string;
+  stageMuted: string;
+  stageBorder: string;
+  /** The site's primary: speaking ring, active controls, badges. */
+  accent: string;
+  /** Text on the accent. */
+  accentText: string;
+  /** The site's alarming color: leave, recording dot, errors. */
+  danger: string;
+  cornerRadius: number;
+  fontFamily?: string | undefined;
+  headingFontFamily?: string | undefined;
+};
+
+export function stageTokens(tokens: ResolvedThemeTokens): StageTokens {
+  return {
+    stageBg: "#0c0d10",
+    stageSurface: "#17181d",
+    stageChrome: "#1e2026",
+    stageText: "#f4f5f7",
+    stageMuted: "#9aa0ab",
+    stageBorder: "#2c2f37",
+    accent: tokens.primary,
+    accentText: tokens.textPrimary,
+    danger: tokens.secondary,
+    cornerRadius: tokens.cornerRadius,
+    fontFamily: tokens.fontFamily,
+    headingFontFamily: tokens.headingFontFamily,
+  };
+}

package/src/ui/styled/CohortPage.tsx

@@ -1,6 +1,7 @@
 import { useCohortPage } from "../../data/queries/useCohortPage";
 import { useForgeT } from "../../i18n";
 import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { CourseCallsSection } from "./CourseCallsSection";
 import { Loading } from "./Loading";
 
 export interface CohortPageProps {
@@ -13,7 +14,7 @@ function formatDate(value: string | number | Date): string {
   return new Date(value).toLocaleDateString("en-US", { year: "numeric", month: "short", day: "numeric" });
 }
 
-/** Cohort landing page — structured cohort/course/curriculum data. Built on `useCohortPage`. */
+/** Cohort landing page: structured cohort/course/curriculum data. Built on `useCohortPage`. */
 export function CohortPage({ cohortId }: CohortPageProps) {
   const theme = useForgeTheme();
   const t = useForgeT();
@@ -79,6 +80,19 @@ export function CohortPage({ cohortId }: CohortPageProps) {
           </div>
         </section>
       )}
+
+      {/* The cohort's live calls, joinable, for the student looking at them.
+          The structured `data.calls` above this page carries no join address
+          on purpose (the payload is anonymous), so the JOINABLE list is read
+          separately and only for a signed-in student. Scoped to this cohort
+          plus the course behind it: a session addressed to everyone who bought
+          the course belongs on a cohort student's schedule, a sibling cohort's
+          does not. */}
+      <CourseCallsSection
+        courseId={course?.id ?? null}
+        cohortId={cohort.id}
+        style={{ marginTop: 32 }}
+      />
     </div>
   );
 }

package/src/ui/styled/CourseAccess.tsx

@@ -1,6 +1,7 @@
 import type { CSSProperties } from "react";
 import { useThemeTokens } from "../theme/ForgeThemeProvider";
 import { useCourseClassroom, type UseCourseClassroomOptions } from "../headless/course/useCourseClassroom";
+import { CourseCallsSection } from "./CourseCallsSection";
 import { Loading } from "./Loading";
 import { useForgeT } from "../../i18n";
 
@@ -14,20 +15,20 @@ export interface CourseAccessProps extends UseCourseClassroomOptions {
 }
 
 /**
- * Enrolled course player — module/lesson sidebar, video progress tracking, and
+ * Enrolled course player: module/lesson sidebar, video progress tracking, and
  * the account-binding gate that stands in front of both. Built on the headless
  * `useCourseClassroom`.
  *
  * The three states worth naming, because each one strands somebody if it is
  * drawn as the others:
  *
- *   - **401** — a bound grant opened with no session. Almost always the buyer,
+ *   - **401**: a bound grant opened with no session. Almost always the buyer,
  *     on an old email link, on a device that never signed in. Gets a sign-in
  *     button that returns HERE, never a dead end.
- *   - **403** — a bound grant opened as somebody else. Gets "this belongs to a
+ *   - **403**: a bound grant opened as somebody else. Gets "this belongs to a
  *     different account" and a way OUT of the current session. Never the word
  *     "sign in", which they have already done.
- *   - **legacy** — no `account_id`, so the link alone is the credential. Opens
+ *   - **legacy**: no `account_id`, so the link alone is the credential. Opens
  *     normally, with a dismissible note offering to put it behind an account.
  */
 export function CourseAccess({
@@ -82,7 +83,7 @@ export function CourseAccess({
         <p style={{ fontSize: 14, color: tokens.muted, lineHeight: 1.6 }}>{gate.body}</p>
 
         {/* Naming the session they are in is what makes "wrong account"
-            actionable — otherwise the reader has no idea which of their
+            actionable, otherwise the reader has no idea which of their
             addresses they are currently signed in with. */}
         {gate.kind === "wrong_account" && classroom.signedInEmail && (
           <p style={{ fontSize: 13, color: tokens.muted }}>
@@ -127,7 +128,7 @@ export function CourseAccess({
         ...style,
       }}
     >
-      {/* Legacy grant, opened fine. An offer, not an obstacle — inline, muted,
+      {/* Legacy grant, opened fine. An offer, not an obstacle: inline, muted,
           dismissible, and never in front of the course the reader came for. */}
       {securePrompt && (
         <div
@@ -311,6 +312,18 @@ export function CourseAccess({
           )}
         </main>
       </div>
+
+      {/* The student's live calls, where the student already is.
+          Scoped to THIS enrolment: `cohortId` is the grant's own cohort, so a
+          student holding two grants on one course opens two classrooms and each
+          shows only its own sessions. No membership href, so the empty state
+          does not sell a membership to a course buyer. */}
+      <CourseCallsSection
+        courseId={data.access.courseId}
+        cohortId={data.access.cohortId ?? null}
+        navigate={go}
+        style={{ marginTop: 32 }}
+      />
     </div>
   );
 }

package/src/ui/styled/CourseCallsSection.tsx

@@ -0,0 +1,99 @@
+import type { CSSProperties } from "react";
+
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { useForgeT } from "../../i18n";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { MemberCallsCalendar } from "./members/MemberCallsCalendar";
+
+export interface CourseCallsSectionProps {
+  /** The course this surface is standing on. The classroom reads it off the access row. */
+  courseId?: string | null;
+  /** The cohort this surface is standing on, when there is one. */
+  cohortId?: string | null;
+  /** Heading above the calendar. Defaults to the translated "Live calls". */
+  title?: string;
+  /**
+   * Builds the href of the call itself, from its public id. The default is the
+   * generic call page, which is where both apps mount it.
+   */
+  getCallHref?: (publicId: string) => string;
+  /** SPA navigation adapter. Defaults to a full-page visit. */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/**
+ * A student's live calls, on the page the student is already on.
+ *
+ * ## Why this is a wrapper and not a calendar
+ *
+ * `MemberCallsCalendar` is already call-kind agnostic: it renders whatever
+ * `listForAttendee` returns, and that resolves course and cohort audiences the
+ * same way it resolves membership tiers. A classroom-specific month grid would
+ * be a second implementation of the same month, the same open/closed rule and
+ * the same join address - which is the dual-surface trap this pillar has been
+ * caught by twice. So this file adds exactly two things and nothing else: the
+ * SCOPE, and the decision to leave the membership upsell out.
+ *
+ * ## No membership href, deliberately
+ *
+ * The members calendar's empty state offers "My membership", which is right
+ * where it stands. On a classroom it would sell a membership to somebody who
+ * bought a course, so nothing is passed and the button does not render. That is
+ * the default in `MemberCallsCalendar`, not a special case here.
+ *
+ * ## Scope
+ *
+ * `courseId` and `cohortId` are intersected server-side with the audience keys
+ * the caller actually holds, so they narrow and never unlock. Passing BOTH is
+ * the classroom's case and is not redundant: a cohort student's schedule is
+ * their cohort's sessions PLUS anything addressed to everyone who bought the
+ * course. A sibling cohort's sessions are excluded because its key is not in
+ * the intersection.
+ */
+export function CourseCallsSection({
+  courseId,
+  cohortId,
+  title,
+  getCallHref,
+  navigate,
+  className,
+  style,
+}: CourseCallsSectionProps) {
+  const translate = useForgeT();
+  const t = useThemeTokens();
+  const { isAuthenticated, isInitialized } = usePublicAuth();
+
+  // Nothing to scope by means nothing to show. Rendering the calendar unscoped
+  // here would quietly put the viewer's WHOLE schedule - other courses, the
+  // membership AMA - on one course's page.
+  if (!courseId && !cohortId) return null;
+
+  /**
+   * A seat is minted against an ACCOUNT, so there is nothing to show a reader we
+   * cannot identify: the cohort page is anonymous to the public, and a legacy
+   * course grant opens for anyone holding the link. Rendering the calendar
+   * anyway would fire an authenticated read, take a 401, and put "we could not
+   * load your calls" on a page that is working perfectly.
+   *
+   * `isInitialized` as well, because the session is restored in an effect - a
+   * render before it lands looks signed-out to every child.
+   */
+  if (!isInitialized || !isAuthenticated) return null;
+
+  return (
+    <section
+      className={className}
+      style={{ display: "flex", flexDirection: "column", gap: 12, color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      <h2 style={{ margin: 0, fontSize: 20, fontWeight: 700 }}>{title ?? translate("forge.course_calls.title")}</h2>
+      <MemberCallsCalendar
+        courseId={courseId}
+        cohortId={cohortId}
+        getCallHref={getCallHref}
+        navigate={navigate}
+      />
+    </section>
+  );
+}

package/src/ui/styled/FormRenderer.tsx

@@ -186,10 +186,20 @@ export function FieldInput({
     case "yes_no":
       control = (
         <div style={{ display: "flex", gap: 16 }}>
-          {["Yes", "No"].map((opt) => (
-            <label key={opt} style={{ display: "flex", alignItems: "center", gap: 6 }}>
-              <input type="radio" name={field.id} checked={value === opt} onChange={() => onChange(opt)} />
-              {opt}
+          {/* Stored value is lowercase "yes"/"no": edge conditions, quiz grading and
+              the automation trigger coercion all compare against that, not the label. */}
+          {[
+            { optValue: "yes", optLabel: "Yes" },
+            { optValue: "no", optLabel: "No" },
+          ].map(({ optValue, optLabel }) => (
+            <label key={optValue} style={{ display: "flex", alignItems: "center", gap: 6 }}>
+              <input
+                type="radio"
+                name={field.id}
+                checked={value === optValue}
+                onChange={() => onChange(optValue)}
+              />
+              {optLabel}
             </label>
           ))}
         </div>

package/src/ui/styled/_tests/CourseCallsSection.spec.tsx

@@ -0,0 +1,163 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { ForgeThemeProvider } from "../../theme/ForgeThemeProvider";
+import type { MyMembershipCall } from "../../../data/queries/useMembershipCalls";
+
+/**
+ * The section is a WRAPPER, so the mock goes under the whole chain
+ * (`MemberCallsCalendar` -> `useMemberCalls` -> `useMyMembershipCalls`) rather
+ * than over the calendar itself. That is the point of the file: what is under
+ * test is the wiring - which scope reaches the query, which empty state the
+ * student is shown, and which call id Join opens - not the month grid, which
+ * has its own spec.
+ */
+const rows: MyMembershipCall[] = [];
+const useMyMembershipCalls = vi.fn();
+
+vi.mock("../../../data/queries/useMembershipCalls", () => ({
+  useMyMembershipCalls: (options: unknown) => useMyMembershipCalls(options),
+}));
+
+let session = { isAuthenticated: true, isInitialized: true };
+vi.mock("../../../contexts/PublicAuthContext", () => ({
+  usePublicAuth: () => session,
+}));
+
+const { CourseCallsSection } = await import("../CourseCallsSection");
+
+/**
+ * A day inside the month the grid opens on.
+ *
+ * `useMemberCalls` lays out the six weeks around the REAL clock and buckets
+ * calls into them by the viewer's local day, so a call pinned to a fixed
+ * calendar date falls outside the grid the moment that month passes and every
+ * assertion here goes quietly green-then-red. Built from `now` instead.
+ */
+const at = (hour: number): Date => {
+  const now = new Date();
+  return new Date(now.getFullYear(), now.getMonth(), 15, hour, 0, 0);
+};
+
+const call = (over: Partial<MyMembershipCall> = {}): MyMembershipCall => ({
+  id: "call-1",
+  title: "Week 1 kickoff",
+  description: "Bring your questions.",
+  startsAt: at(17).toISOString(),
+  endsAt: at(18).toISOString(),
+  timezone: "America/New_York",
+  participation: "open",
+  role: "attendee",
+  audiences: [{ id: "a1", audienceType: "course_cohort", audienceId: "cohort-1", label: "March cohort" }],
+  opensAt: at(16).toISOString(),
+  closesAt: at(20).toISOString(),
+  isOpen: true,
+  callPublicId: "pub-week-1",
+  recording: null,
+  ...over,
+});
+
+const mount = (props: Record<string, unknown> = {}, navigate = vi.fn()) => {
+  const view = render(
+    <ForgeThemeProvider theme={{ colors: { text: "#111", background: "#fff", primary: "#6d28d9" }, cornerRadius: 8 }}>
+      <CourseCallsSection courseId="course-1" cohortId="cohort-1" navigate={navigate} {...props} />
+    </ForgeThemeProvider>,
+  );
+  return { ...view, navigate };
+};
+
+beforeEach(() => {
+  rows.length = 0;
+  session = { isAuthenticated: true, isInitialized: true };
+  useMyMembershipCalls.mockReset();
+  useMyMembershipCalls.mockImplementation(() => ({
+    data: rows,
+    isLoading: false,
+    error: null,
+    refetch: vi.fn(),
+  }));
+});
+
+afterEach(cleanup);
+
+describe("CourseCallsSection", () => {
+  it("renders the student's calls under a heading", () => {
+    rows.push(call());
+    const { getAllByText } = mount();
+    expect(getAllByText("Live calls").length).toBe(1);
+    // Desktop grid cell and mobile agenda row are both in the DOM; the
+    // calendar renders both faces and hides one with a media class.
+    expect(getAllByText("Week 1 kickoff").length).toBeGreaterThan(0);
+  });
+
+  it("scopes the read to the course AND the cohort being viewed", () => {
+    rows.push(call());
+    mount();
+    const options = useMyMembershipCalls.mock.calls[0]![0] as { courseId?: string; cohortId?: string };
+    expect(options.courseId).toBe("course-1");
+    expect(options.cohortId).toBe("cohort-1");
+  });
+
+  it("passes only the cohort when that is all the surface knows", () => {
+    mount({ courseId: null });
+    const options = useMyMembershipCalls.mock.calls[0]![0] as { courseId?: string | null; cohortId?: string };
+    expect(options.courseId).toBeNull();
+    expect(options.cohortId).toBe("cohort-1");
+  });
+
+  it("shows the empty state with NO membership upsell on a course surface", () => {
+    const { getByText, queryByText } = mount();
+    expect(getByText("Nothing this month")).toBeTruthy();
+    // The whole reason this wrapper exists. `MemberCallsCalendar` renders the
+    // button only when it is handed a `membershipHref`, and a course-only buyer
+    // standing in their own classroom must not be sold a membership.
+    expect(queryByText("My membership")).toBeNull();
+  });
+
+  it("links Join to the call's own publicId, on the generic call page", () => {
+    rows.push(call({ callPublicId: "pub-week-1" }));
+    const { getAllByText, getByText, navigate } = mount();
+    fireEvent.click(getAllByText("Week 1 kickoff")[0]!);
+    fireEvent.click(getByText("Join call"));
+    expect(navigate).toHaveBeenCalledWith("/i/video-calls/pub-week-1");
+  });
+
+  it("offers Watch for a past call whose recording is ready", () => {
+    rows.push(
+      call({
+        id: "call-2",
+        title: "Week 0 orientation",
+        isOpen: false,
+        recording: { id: "rec-1", status: "ready", durationSeconds: 3600, watchUrl: "https://cdn.test/rec.mp4" },
+      }),
+    );
+    const { getAllByText, container } = mount();
+    fireEvent.click(getAllByText("Week 0 orientation")[0]!);
+    // Queried by href rather than by text: the label carries the duration in a
+    // second text node, so a text matcher would be matching the minutes too.
+    const watch = container.querySelector<HTMLAnchorElement>('a[href="https://cdn.test/rec.mp4"]');
+    expect(watch?.textContent).toContain("Watch recording");
+  });
+
+  it("renders nothing for a reader with no session, rather than a failed read", () => {
+    // A legacy course grant opens for anyone holding the link, and the cohort
+    // page is anonymous to the public. The attendee endpoint would 401 them, and
+    // "we could not load your calls" on a page that is working perfectly is
+    // worse than no section at all.
+    session = { isAuthenticated: false, isInitialized: true };
+    const { container } = mount();
+    // Not `textContent`: `ForgeThemeProvider` writes a `:root` custom-property
+    // block into the tree, which is there whatever the section does.
+    expect(container.querySelector("section")).toBeNull();
+    expect(useMyMembershipCalls).not.toHaveBeenCalled();
+  });
+
+  it("renders nothing when there is no course or cohort to scope by", () => {
+    // Unscoped here would put the viewer's WHOLE schedule - other courses, the
+    // membership AMA - on one course's page.
+    const { container } = mount({ courseId: null, cohortId: null });
+    expect(container.querySelector("section")).toBeNull();
+    expect(useMyMembershipCalls).not.toHaveBeenCalled();
+  });
+});

package/src/ui/styled/forge-utilities.css

@@ -331,6 +331,9 @@
     .p-6 {
       padding: calc(var(--spacing) * 6);
     }
+    .p-10 {
+      padding: calc(var(--spacing) * 10);
+    }
     .px-4 {
       padding-inline: calc(var(--spacing) * 4);
     }
@@ -465,6 +468,16 @@
       --tw-ease: var(--ease-out);
       transition-timing-function: var(--ease-out);
     }
+    .sm\:block {
+      @media (width >= 40rem) {
+        display: block;
+      }
+    }
+    .sm\:hidden {
+      @media (width >= 40rem) {
+        display: none;
+      }
+    }
     .sm\:grid-cols-2 {
       @media (width >= 40rem) {
         grid-template-columns: repeat(2, minmax(0, 1fr));