@tribe-nest/forge 3.48.0 → 3.52.0

package/src/ui/styled/members/MemberCallsCalendar.tsx

@@ -26,7 +26,16 @@ export interface MemberCallsCalendarProps extends UseMemberCallsOptions {
   getCallHref?: (publicId: string) => string;
   /** SPA navigation adapter. Defaults to a full-page visit. */
   navigate?: (href: string) => void;
-  /** Where a viewer with nothing at all is sent to see what a membership includes. */
+  /**
+   * Where a viewer with nothing at all is sent to see what a membership
+   * includes. Shown only in the empty state.
+   *
+   * OPTIONAL, and omitting it is how a non-membership surface drops the upsell.
+   * A course-only buyer standing in their own classroom with no session this
+   * month must not be sold a membership they did not come for, so
+   * `CourseCallsSection` passes nothing here. The members calendar passes its
+   * path and is unchanged.
+   */
   membershipHref?: string;
   className?: string;
   style?: CSSProperties;
@@ -85,6 +94,15 @@ const WEEKDAYS = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
  * computed from the same window the join enforces. A client re-deriving it from
  * the clock would give two answers to one question, and the wrong one is the one
  * the member acts on.
+ *
+ * ## It is not a MEMBERSHIP calendar, only a member-area one
+ *
+ * The rows come from `listForAttendee`, which resolves every audience kind, so
+ * this same grid renders a course's office hours and a cohort's week-3 session
+ * without knowing what either is. `courseId` / `cohortId` (through
+ * `UseMemberCallsOptions`) narrow it to one of them, which is what lets the
+ * classroom and the cohort page reuse this component instead of growing a
+ * second month grid. See `CourseCallsSection`.
  */
 export function MemberCallsCalendar({
   getCallHref = (publicId) => `/i/video-calls/${publicId}`,
@@ -153,7 +171,7 @@ export function MemberCallsCalendar({
           (below). Both open the same details modal on tap. `minmax(0, 1fr)`
           rather than `1fr` so a long title in a cell cannot force the grid
           wider than its container. */}
-      <div className="hidden sm:block">
+      <div className="fg:hidden fg:sm:block">
         <div style={{ display: "grid", gridTemplateColumns: "repeat(7, minmax(0, 1fr))", gap: 4 }}>
           {WEEKDAYS.map((day) => (
             <div key={day} style={{ fontSize: 11, fontWeight: 700, color: t.muted, padding: "4px 6px" }}>
@@ -214,7 +232,7 @@ export function MemberCallsCalendar({
       {/* The phone face: an agenda, not a grid. A vertical list cannot overflow
           a narrow screen sideways, and every row is a comfortable tap target
           that opens the same details modal. Only days WITH a call appear. */}
-      <div className="sm:hidden">
+      <div className="fg:sm:hidden">
         <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
           {calendar.days
             .filter((day) => day.inMonth && day.calls.length > 0)

package/src/ui/styled/members/MemberHomeLayout.tsx

@@ -66,13 +66,13 @@ export function MemberHomeLayout({
 
   return (
     <div
-      className={`flex w-full flex-col lg:flex-row lg:items-start lg:gap-8 ${className ?? ""}`}
+      className={`fg:flex fg:w-full fg:flex-col fg:lg:flex-row fg:lg:items-start fg:lg:gap-8 ${className ?? ""}`}
       style={{ color: t.text, fontFamily: t.fontFamily, ...style }}
     >
       {/* Top tab bar — small screens (horizontally scrollable, no burger). */}
       <nav
         aria-label="Member home"
-        className="flex w-full gap-1 overflow-x-auto lg:hidden"
+        className="fg:flex fg:w-full fg:gap-1 fg:overflow-x-auto fg:lg:hidden"
         style={{ borderBottom: `1px solid ${t.border}`, paddingBottom: 8, marginBottom: 16 }}
       >
         {isReady ? visibleItems.map(renderItem) : null}
@@ -81,7 +81,7 @@ export function MemberHomeLayout({
       {/* Side nav — lg and up. */}
       <nav
         aria-label="Member home"
-        className="sticky top-4 hidden w-52 shrink-0 flex-col gap-1 lg:flex"
+        className="fg:sticky fg:top-4 fg:hidden fg:w-52 fg:shrink-0 fg:flex-col fg:gap-1 fg:lg:flex"
         style={{
           border: `1px solid ${t.border}`,
           borderRadius: t.cornerRadius,
@@ -92,7 +92,7 @@ export function MemberHomeLayout({
         {isReady ? visibleItems.map(renderItem) : null}
       </nav>
 
-      <main className="min-w-0 w-full flex-1">{children}</main>
+      <main className="fg:min-w-0 fg:w-full fg:flex-1">{children}</main>
     </div>
   );
 }

package/src/ui/styled/members/MemberPostsFeed.tsx

@@ -114,7 +114,7 @@ export function MemberPostsFeed({
       </div>
 
       {/* Filters: type chips + tier select + saved toggle */}
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="fg:flex fg:flex-wrap fg:items-center fg:gap-2">
         {chip("All", !feed.type && !feed.savedOnly, () => {
           feed.setType("");
           feed.setSavedOnly(false);

package/src/ui/styled/members/PostCollectionsGrid.tsx

@@ -97,7 +97,7 @@ export function PostCollectionsGrid({
           {list.hasActiveFilters ? "No collections found matching your filters" : "No collections yet"}
         </p>
       ) : (
-        <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <div className="fg:grid fg:grid-cols-1 fg:gap-4 fg:sm:grid-cols-2">
           {list.collections.map((collection) => (
             <CollectionCard
               key={collection.id}

package/src/ui/styled/musicLinkStyles.tsx

@@ -153,7 +153,7 @@ const anchorProps = (platform: string, url: string, onClick: LayoutParts["onDest
 function ServiceRows({ parts, surface }: { parts: LayoutParts; surface: string }) {
   const { t, destinations, metaFor, onDestinationClick } = parts;
   return (
-    <div className="tn-ml-rows" style={{ width: "100%", display: "flex", flexDirection: "column", gap: 10 }}>
+    <div className="fg:tn-ml-rows" style={{ width: "100%", display: "flex", flexDirection: "column", gap: 10 }}>
       {destinations.map((d) => {
         const meta = metaFor(d.platform);
         return (
@@ -415,11 +415,11 @@ function SplitLayout({ parts }: { parts: LayoutParts }) {
   return (
     <>
       <style>{SPLIT_CSS}</style>
-      <div className="tn-ml-split" style={column(430)}>
-        <div className="tn-ml-split-art" style={{ display: "flex", justifyContent: "center", width: "100%" }}>
+      <div className="fg:tn-ml-split" style={column(430)}>
+        <div className="fg:tn-ml-split-art" style={{ display: "flex", justifyContent: "center", width: "100%" }}>
           {parts.artwork(250)}
         </div>
-        <div className="tn-ml-split-text" style={{ width: "100%", display: "flex", flexDirection: "column" }}>
+        <div className="fg:tn-ml-split-text" style={{ width: "100%", display: "flex", flexDirection: "column" }}>
           <Heading parts={parts} align="left" size={27} />
           <ListHeading parts={parts} />
           <ServiceRows parts={parts} surface={parts.t.surface} />