@tribe-nest/forge 3.60.0 → 3.61.0

package/src/ui/styled/app/AppHome.tsx

@@ -0,0 +1,1139 @@
+import type { CSSProperties, MouseEvent, ReactNode } from "react";
+import {
+  Bell,
+  BookOpen,
+  Bookmark,
+  CalendarDays,
+  ChevronRight,
+  FileSignature,
+  FolderKanban,
+  Receipt,
+  Settings,
+  ShoppingBag,
+  Ticket,
+  Users,
+  Video,
+  type LucideIcon,
+} from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForgeLocale, useForgeT, type ForgeT } from "../../../i18n";
+import { internalPath } from "../../../runtime/pages";
+import { useNotificationUnreadCount } from "../../../data/queries/useNotifications";
+import { useAmountFormatter } from "../../format/useFormatCurrency";
+import { useEmailCodeSignIn } from "../../headless/auth/useEmailCodeSignIn";
+import { useAppCommunityUnread, useAppHome } from "../../headless/siteApp/useAppHome";
+import {
+  greetingPart,
+  type AppAttentionAction,
+  type AppCommunityCard,
+  type AppHomeSectionView,
+  type AppLearningCourse,
+  type AppNextCall,
+  type AppNextTicket,
+  type AppPortalTile,
+  type AppPortalTileKey,
+} from "../../headless/siteApp/appHome";
+import type { IEvent, IPublicProduct, PublicCourse } from "../../../types/models";
+import { Loading } from "../Loading";
+
+/** Literal keys, so the translation spec can see every one of them. */
+const TILE_LABEL_KEYS: Record<AppPortalTileKey, string> = {
+  projects: "forge.app_home.tile_projects",
+  bookings: "forge.app_home.tile_bookings",
+  invoices: "forge.app_home.tile_invoices",
+  documents: "forge.app_home.tile_documents",
+  courses: "forge.app_home.tile_courses",
+  orders: "forge.app_home.tile_orders",
+  tickets: "forge.app_home.tile_tickets",
+  saved: "forge.app_home.tile_saved",
+  settings: "forge.app_home.tile_settings",
+};
+
+const TILE_ICONS: Record<AppPortalTileKey, LucideIcon> = {
+  projects: FolderKanban,
+  bookings: CalendarDays,
+  invoices: Receipt,
+  documents: FileSignature,
+  courses: BookOpen,
+  orders: ShoppingBag,
+  tickets: Ticket,
+  saved: Bookmark,
+  settings: Settings,
+};
+
+const ACTION_KEYS: Record<AppAttentionAction["action"], string> = {
+  pay: "forge.app_home.action_pay",
+  review: "forge.app_home.action_review",
+  reply: "forge.app_home.action_reply",
+  update: "forge.app_home.action_update",
+};
+
+export interface AppHomeProps {
+  /**
+   * SPA navigation adapter. Defaults to a full-page `window.location` visit.
+   * Pass your router's navigate for client-side transitions.
+   */
+  navigate?: (href: string) => void;
+  className?: string;
+  style?: CSSProperties;
+}
+
+type Go = (href: string) => void;
+
+/**
+ * The site app's home (`/i/app`): a slim header, a greeting, then the sections
+ * the creator configured, in their order, each drawn only when it has
+ * something to show (the portal is always drawn). Signed out, it is the app's
+ * front door: the name, an email-first sign in, and a way to look around.
+ *
+ * Built on `useAppHome`; pair it with `<AppBar />`.
+ */
+export function AppHome({ navigate, className, style }: AppHomeProps) {
+  const t = useThemeTokens();
+  const home = useAppHome();
+  const go: Go = navigate ?? ((href: string) => window.location.assign(href));
+
+  if (home.isLoading) return <Loading fullPage />;
+
+  return (
+    <div
+      data-testid="app-home"
+      className={`fg:mx-auto fg:flex fg:w-full fg:max-w-[720px] fg:flex-col ${className ?? ""}`}
+      style={{ color: t.text, fontFamily: t.fontFamily, ...style }}
+    >
+      {home.isSignedIn ? (
+        <SignedInHome home={home} go={go} />
+      ) : (
+        <SignedOutHome appName={home.appName} iconUrl={home.iconUrl} go={go} />
+      )}
+    </div>
+  );
+}
+
+// ---- Signed in -----------------------------------------------------------------------
+
+function SignedInHome({ home, go }: { home: ReturnType<typeof useAppHome>; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const part = greetingPart(new Date());
+  const name = home.firstName;
+  // Literal keys, so the translation spec can see every one of them.
+  const greeting = name
+    ? {
+        morning: tr("forge.app_home.greeting_morning_name", { name }),
+        afternoon: tr("forge.app_home.greeting_afternoon_name", { name }),
+        evening: tr("forge.app_home.greeting_evening_name", { name }),
+      }[part]
+    : {
+        morning: tr("forge.app_home.greeting_morning"),
+        afternoon: tr("forge.app_home.greeting_afternoon"),
+        evening: tr("forge.app_home.greeting_evening"),
+      }[part];
+  const needs = home.sections.find((section) => section.kind === "needs_you");
+  const waiting = needs?.kind === "needs_you" ? needs.actions.length : 0;
+
+  return (
+    <>
+      <AppHeader appName={home.appName} iconUrl={home.iconUrl} firstName={name} go={go} />
+      <div className="fg:flex fg:flex-col fg:gap-7" style={{ padding: "20px 16px 24px" }}>
+        <div>
+          <h1 style={{ margin: 0, fontSize: 26, fontWeight: 800, fontFamily: t.headingFontFamily, letterSpacing: "-0.02em" }}>
+            {greeting}
+          </h1>
+          {waiting > 0 ? (
+            <p data-testid="app-home-lead" style={{ margin: "4px 0 0", fontSize: 15, color: t.muted }}>
+              {waiting === 1 ? tr("forge.app_home.lead_one") : tr("forge.app_home.lead_many", { count: waiting })}
+            </p>
+          ) : null}
+        </div>
+        {home.sections.map((section) => (
+          <SectionView key={`${section.kind}:${section.key}`} section={section} go={go} />
+        ))}
+      </div>
+    </>
+  );
+}
+
+function SectionView({ section, go }: { section: AppHomeSectionView; go: Go }) {
+  switch (section.kind) {
+    case "needs_you":
+      return <NeedsYou actions={section.actions} go={go} />;
+    case "portal":
+      return <PortalGrid tiles={section.tiles} go={go} />;
+    case "communities":
+      return <YourCommunities communities={section.communities} go={go} />;
+    case "coming_up":
+      return <ComingUp call={section.call} ticket={section.ticket} go={go} />;
+    case "learning":
+      return <ContinueLearning course={section.course} go={go} />;
+    case "explore_communities":
+      return <ExploreCommunities communities={section.communities} go={go} />;
+    case "events":
+      return <UpcomingEvents events={section.events} go={go} />;
+    case "courses":
+      return <CoursesList courses={section.courses} go={go} />;
+    case "shop":
+      return <Shop products={section.products} go={go} />;
+    case "link":
+      return <LinkSection label={section.label} href={section.href} go={go} />;
+  }
+}
+
+function AppHeader({
+  appName,
+  iconUrl,
+  firstName,
+  go,
+}: {
+  appName: string | null;
+  iconUrl: string | null;
+  firstName: string | null;
+  go: Go;
+}) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const { data: unread } = useNotificationUnreadCount(true);
+  const initial = (firstName ?? "").charAt(0).toUpperCase() || "?";
+  return (
+    <header
+      data-testid="app-home-header"
+      className="fg:flex fg:items-center fg:gap-3"
+      style={{ minHeight: 60, padding: "0 16px", borderBottom: `1px solid ${t.border}` }}
+    >
+      <AppMark iconUrl={iconUrl} name={appName} size={32} />
+      <div className="fg:min-w-0 fg:flex-1 fg:truncate" style={{ fontWeight: 700, fontSize: 16 }}>
+        {appName}
+      </div>
+      <AppLink
+        href={internalPath("account/notifications")}
+        go={go}
+        testId="app-home-bell"
+        ariaLabel={tr("forge.app_home.aria_notifications")}
+        style={{ position: "relative", display: "inline-flex", padding: 8, color: t.text }}
+      >
+        <Bell size={20} aria-hidden />
+        {unread && unread > 0 ? (
+          <span
+            data-testid="app-home-bell-dot"
+            aria-hidden
+            style={{ position: "absolute", top: 7, right: 7, width: 8, height: 8, borderRadius: 4, background: t.primary }}
+          />
+        ) : null}
+      </AppLink>
+      <AppLink
+        href={internalPath("account")}
+        go={go}
+        testId="app-home-avatar"
+        ariaLabel={tr("forge.app_home.aria_account")}
+        style={{
+          width: 36,
+          height: 36,
+          borderRadius: 18,
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          background: t.surface,
+          color: t.primary,
+          fontWeight: 700,
+          fontSize: 13,
+          textDecoration: "none",
+        }}
+      >
+        {initial}
+      </AppLink>
+    </header>
+  );
+}
+
+// ---- Sections ------------------------------------------------------------------------
+
+function NeedsYou({ actions, go }: { actions: AppAttentionAction[]; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <section aria-label={tr("forge.app_home.needs_you")} data-testid="app-section-needs_you" className="fg:flex fg:flex-col fg:gap-2">
+      {actions.map((entry) => (
+        <div
+          key={`${entry.item.kind}:${entry.item.id}`}
+          data-testid={`app-attention-${entry.item.kind}`}
+          className="fg:flex fg:items-center fg:gap-3"
+          style={{
+            padding: 14,
+            borderRadius: Math.max(t.cornerRadius, 12),
+            border: `1px solid ${t.border}`,
+            borderLeft: `3px solid ${t.primary}`,
+            background: t.surface,
+          }}
+        >
+          <div className="fg:min-w-0 fg:flex-1">
+            <div className="fg:truncate" style={{ fontWeight: 600, fontSize: 15 }}>
+              {attentionTitle(entry, tr)}
+            </div>
+          </div>
+          <AppLink
+            href={entry.href}
+            go={go}
+            testId="app-attention-action"
+            style={{ ...pillButton(t), background: t.primary, color: t.textPrimary, border: "none" }}
+          >
+            {tr(ACTION_KEYS[entry.action])}
+          </AppLink>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+function attentionTitle(entry: AppAttentionAction, tr: ForgeT): string {
+  const item = entry.item;
+  switch (item.kind) {
+    case "invoice_due":
+    case "invoice_overdue":
+      return tr("forge.app_home.attention_invoice", { number: item.invoiceNumber });
+    case "approval_requested":
+      return tr("forge.app_home.attention_approval", { milestone: item.milestoneName });
+    case "document_to_sign":
+      return item.title;
+    case "message_unread":
+      return item.unreadCount === 1
+        ? tr("forge.app_home.attention_message_one")
+        : tr("forge.app_home.attention_message_many", { count: item.unreadCount });
+    case "membership_payment_failed":
+      return tr("forge.app_home.attention_payment_failed", { community: item.communityName });
+  }
+}
+
+function PortalGrid({ tiles, go }: { tiles: AppPortalTile[]; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <Section
+      testId="app-section-portal"
+      title={tr("forge.app_home.portal")}
+      link={{ label: tr("forge.app_home.open"), href: internalPath("account") }}
+      go={go}
+    >
+      <div className="fg:grid fg:grid-cols-4 fg:gap-2">
+        {tiles.map((tile) => {
+          const Icon = TILE_ICONS[tile.key];
+          return (
+            <AppLink
+              key={tile.key}
+              href={tile.href}
+              go={go}
+              testId={`app-portal-tile-${tile.key}`}
+              className="fg:flex fg:flex-col fg:items-center fg:gap-1"
+              style={{
+                position: "relative",
+                padding: "12px 4px",
+                borderRadius: Math.max(t.cornerRadius, 12),
+                background: t.surface,
+                color: t.text,
+                textDecoration: "none",
+                minWidth: 0,
+              }}
+            >
+              <Icon size={22} aria-hidden />
+              <span className="fg:max-w-full fg:truncate" style={{ fontSize: 12, fontWeight: 600 }}>
+                {tr(TILE_LABEL_KEYS[tile.key])}
+              </span>
+              {tile.attention > 0 ? (
+                <span data-testid={`app-portal-tile-${tile.key}-badge`} style={badge(t)}>
+                  {tile.attention}
+                </span>
+              ) : null}
+            </AppLink>
+          );
+        })}
+      </div>
+    </Section>
+  );
+}
+
+function YourCommunities({ communities, go }: { communities: AppCommunityCard[]; go: Go }) {
+  const tr = useForgeT();
+  return (
+    <Section
+      testId="app-section-communities"
+      title={tr("forge.app_home.your_communities")}
+      link={{ label: tr("forge.app_home.all"), href: internalPath("communities") }}
+      go={go}
+    >
+      <div className="fg:-mr-4 fg:flex fg:gap-3 fg:overflow-x-auto fg:pr-4" style={{ scrollbarWidth: "none" }}>
+        {communities.map((community) => (
+          <CommunityCard key={community.id} community={community} go={go} />
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+function CommunityCard({ community, go }: { community: AppCommunityCard; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const { data: unread } = useAppCommunityUnread(community.id);
+  const meta = [community.tierName, community.memberCount !== null ? tr("forge.app_home.members", { count: community.memberCount }) : null]
+    .filter(Boolean)
+    .join(" · ");
+  return (
+    <AppLink
+      href={community.href}
+      go={go}
+      testId={`app-community-${community.slug}`}
+      className="fg:flex fg:shrink-0 fg:flex-col fg:gap-2"
+      style={{ width: 200, color: t.text, textDecoration: "none" }}
+    >
+      <div
+        style={{
+          position: "relative",
+          height: 96,
+          borderRadius: Math.max(t.cornerRadius, 14),
+          background: community.coverUrl
+            ? `center / cover no-repeat url(${JSON.stringify(community.coverUrl)})`
+            : t.surface,
+          border: `1px solid ${t.border}`,
+        }}
+      >
+        <span style={{ position: "absolute", left: 10, bottom: -14 }}>
+          <AppMark iconUrl={community.logoUrl} name={community.name} size={36} />
+        </span>
+        {unread && unread > 0 ? (
+          <span
+            data-testid={`app-community-${community.slug}-unread`}
+            style={{ ...badge(t), position: "absolute", top: 8, right: 8, padding: "2px 8px", height: "auto" }}
+          >
+            {tr("forge.app_home.new_count", { count: unread })}
+          </span>
+        ) : null}
+      </div>
+      <div style={{ paddingTop: 10 }}>
+        <div className="fg:truncate" style={{ fontWeight: 700, fontSize: 15 }}>
+          {community.name}
+        </div>
+        {meta ? (
+          <div className="fg:truncate" style={{ fontSize: 13, color: t.muted }}>
+            {meta}
+          </div>
+        ) : null}
+      </div>
+    </AppLink>
+  );
+}
+
+function ComingUp({ call, ticket, go }: { call: AppNextCall | null; ticket: AppNextTicket | null; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <Section testId="app-section-coming_up" title={tr("forge.app_home.coming_up")} go={go}>
+      <div className="fg:flex fg:flex-col fg:gap-2">
+        {call ? (
+          <AgendaRow
+            testId="app-coming-up-call"
+            at={call.startsAt}
+            title={call.title}
+            meta={call.context}
+            action={
+              call.joinable ? (
+                <AppLink
+                  href={call.href}
+                  go={go}
+                  testId="app-coming-up-join"
+                  style={{ ...pillButton(t), background: t.primary, color: t.textPrimary, border: "none" }}
+                >
+                  <Video size={16} aria-hidden style={{ marginRight: 6 }} />
+                  {tr("forge.app_home.join")}
+                </AppLink>
+              ) : (
+                <AppLink href={call.href} go={go} testId="app-coming-up-call-details" style={pillButton(t)}>
+                  {tr("forge.app_home.details")}
+                </AppLink>
+              )
+            }
+          />
+        ) : null}
+        {ticket ? (
+          <AgendaRow
+            testId="app-coming-up-ticket"
+            at={ticket.startsAt}
+            title={ticket.title}
+            meta={ticket.count === 1 ? tr("forge.app_home.tickets_one") : tr("forge.app_home.tickets_many", { count: ticket.count })}
+            action={
+              <AppLink href={ticket.href} go={go} testId="app-coming-up-ticket-view" style={pillButton(t)}>
+                {tr("forge.app_home.view_ticket")}
+              </AppLink>
+            }
+          />
+        ) : null}
+      </div>
+    </Section>
+  );
+}
+
+function AgendaRow({
+  at,
+  title,
+  meta,
+  action,
+  testId,
+}: {
+  at: string;
+  title: string;
+  meta: string | null;
+  action: ReactNode;
+  testId: string;
+}) {
+  const t = useThemeTokens();
+  const locale = useForgeLocale();
+  const date = new Date(at);
+  const valid = !Number.isNaN(date.getTime());
+  return (
+    <div
+      data-testid={testId}
+      className="fg:flex fg:items-center fg:gap-3"
+      style={{ padding: 12, borderRadius: Math.max(t.cornerRadius, 12), border: `1px solid ${t.border}` }}
+    >
+      <div aria-hidden style={{ width: 52, flexShrink: 0, textAlign: "center", lineHeight: 1.15 }}>
+        <div style={{ fontSize: 11, fontWeight: 700, color: t.primary, textTransform: "uppercase" }}>
+          {valid ? new Intl.DateTimeFormat(locale, { month: "short" }).format(date) : ""}
+        </div>
+        <div style={{ fontSize: 20, fontWeight: 800 }}>{valid ? new Intl.DateTimeFormat(locale, { day: "numeric" }).format(date) : ""}</div>
+        <div style={{ fontSize: 11, color: t.muted }}>
+          {valid ? new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit" }).format(date) : ""}
+        </div>
+      </div>
+      <div className="fg:min-w-0 fg:flex-1">
+        <div className="fg:truncate" style={{ fontWeight: 600, fontSize: 15 }}>
+          {title}
+        </div>
+        {meta ? (
+          <div className="fg:truncate" style={{ fontSize: 13, color: t.muted }}>
+            {meta}
+          </div>
+        ) : null}
+      </div>
+      {action}
+    </div>
+  );
+}
+
+function ContinueLearning({ course, go }: { course: AppLearningCourse; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const progress = course.progress;
+  return (
+    <Section testId="app-section-learning" title={tr("forge.app_home.continue_learning")} go={go}>
+      <AppLink
+        href={course.href}
+        go={go}
+        testId="app-learning-course"
+        className="fg:flex fg:items-center fg:gap-3"
+        style={{
+          padding: 12,
+          borderRadius: Math.max(t.cornerRadius, 12),
+          border: `1px solid ${t.border}`,
+          color: t.text,
+          textDecoration: "none",
+        }}
+      >
+        <span
+          className="fg:flex fg:items-center fg:justify-center"
+          style={{ width: 56, height: 56, borderRadius: 12, background: t.surface, color: t.primary, flexShrink: 0 }}
+        >
+          <BookOpen size={22} aria-hidden />
+        </span>
+        <div className="fg:min-w-0 fg:flex-1 fg:flex fg:flex-col fg:gap-1">
+          <div className="fg:truncate" style={{ fontWeight: 600, fontSize: 15 }}>
+            {course.title}
+          </div>
+          {progress ? (
+            <>
+              <div style={{ fontSize: 13, color: t.muted }}>
+                {tr("forge.app_home.lessons_done", { done: progress.done, total: progress.total })}
+              </div>
+              <div
+                role="progressbar"
+                aria-valuemin={0}
+                aria-valuemax={progress.total}
+                aria-valuenow={progress.done}
+                aria-label={tr("forge.app_home.aria_course_progress")}
+                data-testid="app-learning-progress"
+                style={{ height: 6, borderRadius: 3, background: t.border, overflow: "hidden" }}
+              >
+                <div style={{ width: `${Math.round(progress.ratio * 100)}%`, height: "100%", background: t.primary }} />
+              </div>
+            </>
+          ) : null}
+        </div>
+        <ChevronRight size={18} aria-hidden style={{ color: t.muted, flexShrink: 0 }} />
+      </AppLink>
+    </Section>
+  );
+}
+
+function ExploreCommunities({ communities, go }: { communities: AppCommunityCard[]; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  return (
+    <Section
+      testId="app-section-explore_communities"
+      title={tr("forge.app_home.explore_communities")}
+      link={{ label: tr("forge.app_home.see_all"), href: internalPath("communities") }}
+      go={go}
+    >
+      <div className="fg:flex fg:flex-col fg:gap-3">
+        {communities.map((community) => (
+          <div key={community.id} data-testid={`app-explore-${community.slug}`} className="fg:flex fg:items-center fg:gap-3">
+            <AppMark iconUrl={community.logoUrl} name={community.name} size={48} />
+            <div className="fg:min-w-0 fg:flex-1">
+              <div className="fg:truncate" style={{ fontWeight: 600, fontSize: 15 }}>
+                {community.name}
+              </div>
+              {community.memberCount !== null ? (
+                <div style={{ fontSize: 13, color: t.muted }}>{tr("forge.app_home.members", { count: community.memberCount })}</div>
+              ) : null}
+            </div>
+            <AppLink href={community.href} go={go} testId={`app-explore-${community.slug}-join`} style={pillButton(t)}>
+              {community.joinMode === "application"
+                ? tr("forge.app_home.apply_community")
+                : community.joinMode === "invite"
+                  ? tr("forge.app_home.community_details")
+                  : tr("forge.app_home.join_community")}
+            </AppLink>
+          </div>
+        ))}
+      </div>
+    </Section>
+  );
+}
+
+function UpcomingEvents({ events, go }: { events: IEvent[]; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  return (
+    <Section
+      testId="app-section-events"
+      title={tr("forge.app_home.upcoming_events")}
+      link={{ label: tr("forge.app_home.all_events"), href: internalPath("events") }}
+      go={go}
+    >
+      <div className="fg:-mr-4 fg:flex fg:gap-3 fg:overflow-x-auto fg:pr-4" style={{ scrollbarWidth: "none" }}>
+        {events.map((event) => {
+          const date = new Date(event.dateTime);
+          const image = event.media?.find((m) => m.type === "image")?.url ?? event.media?.[0]?.url ?? null;
+          return (
+            <AppLink
+              key={event.id}
+              href={internalPath("events/$slug", { slug: event.slug || event.id })}
+              go={go}
+              testId={`app-event-${event.id}`}
+              className="fg:flex fg:shrink-0 fg:flex-col fg:gap-2"
+              style={{ width: 220, color: t.text, textDecoration: "none" }}
+            >
+              <div
+                style={{
+                  position: "relative",
+                  height: 124,
+                  borderRadius: Math.max(t.cornerRadius, 14),
+                  background: image ? `center / cover no-repeat url(${JSON.stringify(image)})` : t.surface,
+                }}
+              >
+                {!Number.isNaN(date.getTime()) ? (
+                  <span
+                    style={{
+                      position: "absolute",
+                      left: 10,
+                      top: 10,
+                      padding: "4px 8px",
+                      borderRadius: 8,
+                      background: t.background,
+                      color: t.text,
+                      fontSize: 12,
+                      fontWeight: 700,
+                      textTransform: "uppercase",
+                    }}
+                  >
+                    {new Intl.DateTimeFormat(locale, { day: "numeric", month: "short" }).format(date)}
+                  </span>
+                ) : null}
+              </div>
+              <div className="fg:truncate" style={{ fontWeight: 600, fontSize: 15 }}>
+                {event.title}
+              </div>
+            </AppLink>
+          );
+        })}
+      </div>
+    </Section>
+  );
+}
+
+function CoursesList({ courses, go }: { courses: PublicCourse[]; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const format = useAmountFormatter();
+  return (
+    <Section
+      testId="app-section-courses"
+      title={tr("forge.app_home.courses")}
+      link={{ label: tr("forge.app_home.all_courses"), href: internalPath("courses") }}
+      go={go}
+    >
+      <div className="fg:flex fg:flex-col fg:gap-3">
+        {courses.map((course) => {
+          const image = course.media?.find((m) => m.type === "image")?.url ?? null;
+          const price = Number(course.price);
+          return (
+            <AppLink
+              key={course.id}
+              href={internalPath("courses/$slug", { slug: course.slug || course.id })}
+              go={go}
+              testId={`app-course-${course.id}`}
+              className="fg:flex fg:items-center fg:gap-3"
+              style={{ color: t.text, textDecoration: "none" }}
+            >
+              <span
+                style={{
+                  width: 64,
+                  height: 64,
+                  borderRadius: 12,
+                  flexShrink: 0,
+                  background: image ? `center / cover no-repeat url(${JSON.stringify(image)})` : t.surface,
+                }}
+              />
+              <div className="fg:min-w-0 fg:flex-1">
+                <div className="fg:truncate" style={{ fontWeight: 600, fontSize: 15 }}>
+                  {course.title}
+                </div>
+                <div style={{ fontSize: 13, color: t.muted }}>
+                  {Number.isFinite(price) && price > 0 ? format(price) : tr("forge.app_home.free")}
+                </div>
+              </div>
+            </AppLink>
+          );
+        })}
+      </div>
+    </Section>
+  );
+}
+
+function Shop({ products, go }: { products: IPublicProduct[]; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const format = useAmountFormatter();
+  return (
+    <Section
+      testId="app-section-shop"
+      title={tr("forge.app_home.from_the_shop")}
+      link={{ label: tr("forge.app_home.shop"), href: internalPath("store") }}
+      go={go}
+    >
+      <div className="fg:grid fg:grid-cols-2 fg:gap-3">
+        {products.map((product) => {
+          const image = product.media?.find((m) => m.type === "image")?.url ?? product.media?.[0]?.url ?? null;
+          const prices = (product.variants ?? []).map((v) => Number(v.price)).filter((p) => Number.isFinite(p));
+          const from = prices.length ? Math.min(...prices) : null;
+          return (
+            <AppLink
+              key={product.id}
+              href={internalPath("store/$slug", { slug: product.slug || product.id })}
+              go={go}
+              testId={`app-product-${product.id}`}
+              className="fg:flex fg:min-w-0 fg:flex-col fg:gap-2"
+              style={{ color: t.text, textDecoration: "none" }}
+            >
+              <span
+                style={{
+                  aspectRatio: "1 / 1",
+                  borderRadius: Math.max(t.cornerRadius, 14),
+                  background: image ? `center / cover no-repeat url(${JSON.stringify(image)})` : t.surface,
+                }}
+              />
+              <span className="fg:truncate" style={{ fontWeight: 600, fontSize: 14 }}>
+                {product.title}
+              </span>
+              {from !== null ? <span style={{ fontSize: 13, color: t.muted }}>{from > 0 ? format(from) : tr("forge.app_home.free")}</span> : null}
+            </AppLink>
+          );
+        })}
+      </div>
+    </Section>
+  );
+}
+
+function LinkSection({ label, href, go }: { label: string; href: string; go: Go }) {
+  const t = useThemeTokens();
+  return (
+    <AppLink
+      href={href}
+      go={go}
+      testId="app-section-link"
+      className="fg:flex fg:items-center fg:gap-3"
+      style={{
+        padding: 16,
+        borderRadius: Math.max(t.cornerRadius, 14),
+        border: `1px solid ${t.border}`,
+        background: t.surface,
+        color: t.text,
+        textDecoration: "none",
+        fontWeight: 700,
+        fontSize: 16,
+      }}
+    >
+      <span className="fg:min-w-0 fg:flex-1 fg:truncate">{label}</span>
+      <ChevronRight size={18} aria-hidden style={{ color: t.muted, flexShrink: 0 }} />
+    </AppLink>
+  );
+}
+
+// ---- Signed out -------------------------------------------------------------------------
+
+function SignedOutHome({ appName, iconUrl, go }: { appName: string | null; iconUrl: string | null; go: Go }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const flow = useEmailCodeSignIn();
+  const field: CSSProperties = { display: "flex", flexDirection: "column", gap: 6, fontSize: 14, fontWeight: 600 };
+  const input: CSSProperties = {
+    height: 52,
+    boxSizing: "border-box",
+    padding: "0 16px",
+    borderRadius: Math.max(t.cornerRadius, 12),
+    border: `1px solid ${t.border}`,
+    background: "transparent",
+    color: t.text,
+    fontSize: 16,
+    fontFamily: t.fontFamily,
+    width: "100%",
+  };
+  const submit: CSSProperties = {
+    height: 52,
+    borderRadius: Math.max(t.cornerRadius, 12),
+    border: "none",
+    background: t.primary,
+    color: t.textPrimary,
+    fontWeight: 700,
+    fontSize: 16,
+    fontFamily: t.fontFamily,
+    cursor: "pointer",
+    opacity: flow.isSubmitting ? 0.7 : 1,
+  };
+  const link: CSSProperties = {
+    background: "transparent",
+    border: "none",
+    color: t.muted,
+    fontSize: 14,
+    fontWeight: 600,
+    cursor: "pointer",
+    padding: 4,
+    fontFamily: t.fontFamily,
+  };
+  const error = flow.error ? (
+    <p role="alert" style={{ margin: 0, fontSize: 14, color: t.text, fontWeight: 600 }}>
+      {flow.error}
+    </p>
+  ) : null;
+
+  const explore: Array<{ key: string; label: string; href: string; icon: LucideIcon }> = [
+    { key: "communities", label: tr("forge.app_home.explore_link_communities"), href: internalPath("communities"), icon: Users },
+    { key: "events", label: tr("forge.app_home.explore_link_events"), href: internalPath("events"), icon: CalendarDays },
+    { key: "courses", label: tr("forge.app_home.explore_link_courses"), href: internalPath("courses"), icon: BookOpen },
+    { key: "shop", label: tr("forge.app_home.explore_link_shop"), href: internalPath("store"), icon: ShoppingBag },
+  ];
+
+  return (
+    <div data-testid="app-home-signed-out" className="fg:flex fg:flex-col fg:gap-7" style={{ padding: "48px 24px 24px" }}>
+      <div className="fg:flex fg:flex-col fg:items-center fg:gap-3" style={{ textAlign: "center" }}>
+        <AppMark iconUrl={iconUrl} name={appName} size={72} />
+        <h1 style={{ margin: 0, fontSize: 26, fontWeight: 800, fontFamily: t.headingFontFamily, letterSpacing: "-0.02em" }}>
+          {appName}
+        </h1>
+      </div>
+
+      {flow.step === "email" ? (
+        <form
+          data-testid="app-sign-in-email"
+          className="fg:flex fg:flex-col fg:gap-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void flow.submitEmail();
+          }}
+        >
+          <label style={field}>
+            {tr("forge.app_home.email")}
+            <input
+              style={input}
+              type="email"
+              inputMode="email"
+              autoComplete="email"
+              placeholder={tr("forge.app_home.email_placeholder")}
+              value={flow.email}
+              onChange={(event) => flow.setEmail(event.target.value)}
+            />
+          </label>
+          {error}
+          <button type="submit" disabled={flow.isSubmitting} style={submit}>
+            {tr("forge.app_home.continue")}
+          </button>
+        </form>
+      ) : flow.step === "code" ? (
+        <form
+          data-testid="app-sign-in-code"
+          className="fg:flex fg:flex-col fg:gap-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void flow.submitCode();
+          }}
+        >
+          <p style={{ margin: 0, fontSize: 15 }}>{tr("forge.app_home.code_sent", { email: flow.email })}</p>
+          <label style={field}>
+            {tr("forge.app_home.code")}
+            <input
+              style={{ ...input, letterSpacing: 4 }}
+              inputMode="numeric"
+              autoComplete="one-time-code"
+              maxLength={6}
+              value={flow.code}
+              onChange={(event) => flow.setCode(event.target.value.replace(/\D/g, ""))}
+              autoFocus
+            />
+          </label>
+          {error}
+          {flow.resent && !flow.error ? (
+            <p role="status" style={{ margin: 0, fontSize: 13, color: t.muted }}>
+              {tr("forge.app_home.code_resent")}
+            </p>
+          ) : null}
+          <button type="submit" disabled={flow.isSubmitting} style={submit}>
+            {tr("forge.app_home.verify")}
+          </button>
+          <div className="fg:flex fg:flex-wrap fg:justify-between fg:gap-2">
+            <button type="button" style={link} onClick={flow.changeEmail}>
+              {tr("forge.app_home.different_email")}
+            </button>
+            <button type="button" style={link} disabled={flow.isSubmitting} onClick={() => void flow.resendCode()}>
+              {tr("forge.app_home.resend")}
+            </button>
+          </div>
+        </form>
+      ) : (
+        <form
+          data-testid="app-sign-in-profile"
+          className="fg:flex fg:flex-col fg:gap-3"
+          onSubmit={(event) => {
+            event.preventDefault();
+            void flow.submitProfile();
+          }}
+        >
+          <p style={{ margin: 0, fontWeight: 600 }}>{tr("forge.app_home.new_here", { email: flow.email })}</p>
+          <div className="fg:flex fg:gap-2">
+            <label style={{ ...field, flex: 1, minWidth: 0 }}>
+              {tr("forge.app_home.first_name")}
+              <input
+                style={input}
+                value={flow.firstName}
+                maxLength={100}
+                autoComplete="given-name"
+                onChange={(event) => flow.setFirstName(event.target.value)}
+              />
+            </label>
+            <label style={{ ...field, flex: 1, minWidth: 0 }}>
+              {tr("forge.app_home.last_name")}
+              <input
+                style={input}
+                value={flow.lastName}
+                maxLength={100}
+                autoComplete="family-name"
+                onChange={(event) => flow.setLastName(event.target.value)}
+              />
+            </label>
+          </div>
+          <label className="fg:flex fg:items-center fg:gap-2" style={{ fontSize: 13 }}>
+            <input
+              type="checkbox"
+              checked={flow.acceptedTerms}
+              onChange={(event) => flow.setAcceptedTerms(event.target.checked)}
+              style={{ accentColor: t.primary }}
+            />
+            {tr("forge.app_home.accept_terms")}
+          </label>
+          {error}
+          <button type="submit" disabled={flow.isSubmitting} style={submit}>
+            {tr("forge.app_home.continue")}
+          </button>
+          <button type="button" style={link} onClick={flow.changeEmail}>
+            {tr("forge.app_home.start_again")}
+          </button>
+        </form>
+      )}
+
+      <div className="fg:flex fg:items-center fg:gap-3" style={{ color: t.muted, fontSize: 13 }}>
+        <span className="fg:flex-1" style={{ height: 1, background: t.border }} />
+        {tr("forge.app_home.look_around")}
+        <span className="fg:flex-1" style={{ height: 1, background: t.border }} />
+      </div>
+
+      <div className="fg:grid fg:grid-cols-2 fg:gap-2">
+        {explore.map(({ key, label, href, icon: Icon }) => (
+          <AppLink
+            key={key}
+            href={href}
+            go={go}
+            testId={`app-explore-link-${key}`}
+            className="fg:flex fg:items-center fg:gap-2"
+            style={{
+              minHeight: 52,
+              padding: "0 14px",
+              borderRadius: Math.max(t.cornerRadius, 12),
+              background: t.surface,
+              color: t.text,
+              fontWeight: 600,
+              fontSize: 14,
+              textDecoration: "none",
+            }}
+          >
+            <Icon size={20} aria-hidden />
+            {label}
+          </AppLink>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---- Pieces ---------------------------------------------------------------------------------
+
+type Tokens = ReturnType<typeof useThemeTokens>;
+
+function pillButton(t: Tokens): CSSProperties {
+  return {
+    display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
+    minHeight: 36,
+    padding: "0 16px",
+    borderRadius: 999,
+    border: `1px solid ${t.border}`,
+    color: t.text,
+    fontWeight: 600,
+    fontSize: 14,
+    textDecoration: "none",
+    whiteSpace: "nowrap",
+  };
+}
+
+function badge(t: Tokens): CSSProperties {
+  return {
+    position: "absolute",
+    top: 6,
+    right: 6,
+    minWidth: 18,
+    height: 18,
+    padding: "0 5px",
+    borderRadius: 9,
+    background: t.primary,
+    color: t.textPrimary,
+    fontSize: 11,
+    fontWeight: 700,
+    lineHeight: "18px",
+    textAlign: "center",
+    boxSizing: "border-box",
+  };
+}
+
+function Section({
+  title,
+  link,
+  go,
+  testId,
+  children,
+}: {
+  title: string;
+  link?: { label: string; href: string };
+  go: Go;
+  testId: string;
+  children: ReactNode;
+}) {
+  const t = useThemeTokens();
+  return (
+    <section aria-label={title} data-testid={testId} className="fg:flex fg:flex-col fg:gap-3">
+      <div className="fg:flex fg:items-baseline fg:justify-between fg:gap-3">
+        <h2 style={{ margin: 0, fontSize: 18, fontWeight: 700, fontFamily: t.headingFontFamily }}>{title}</h2>
+        {link ? (
+          <AppLink href={link.href} go={go} style={{ fontSize: 14, fontWeight: 600, color: t.primary, textDecoration: "none" }}>
+            {link.label}
+          </AppLink>
+        ) : null}
+      </div>
+      {children}
+    </section>
+  );
+}
+
+/** The app's mark: its icon, or its first letter on the theme's primary. */
+function AppMark({ iconUrl, name, size }: { iconUrl: string | null; name: string | null; size: number }) {
+  const t = useThemeTokens();
+  const radius = Math.round(size * 0.28);
+  if (iconUrl) {
+    return <img src={iconUrl} alt="" style={{ width: size, height: size, borderRadius: radius, objectFit: "cover", flexShrink: 0 }} />;
+  }
+  return (
+    <span
+      aria-hidden
+      className="fg:inline-flex fg:items-center fg:justify-center"
+      style={{
+        width: size,
+        height: size,
+        borderRadius: radius,
+        background: t.primary,
+        color: t.textPrimary,
+        fontWeight: 800,
+        fontSize: Math.round(size * 0.42),
+        flexShrink: 0,
+      }}
+    >
+      {(name ?? "").trim().charAt(0).toUpperCase()}
+    </span>
+  );
+}
+
+/**
+ * A real link that navigates in-app on a plain left click. An absolute URL (a
+ * creator's link section pointing off-site) opens as an ordinary link.
+ */
+function AppLink({
+  href,
+  go,
+  children,
+  style,
+  className,
+  testId,
+  ariaLabel,
+}: {
+  href: string;
+  go: Go;
+  children: ReactNode;
+  style?: CSSProperties;
+  className?: string;
+  testId?: string;
+  ariaLabel?: string;
+}) {
+  const external = /^https?:\/\//i.test(href);
+  return (
+    <a
+      href={href}
+      className={className}
+      style={style}
+      data-testid={testId}
+      aria-label={ariaLabel}
+      {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+      onClick={(event: MouseEvent<HTMLAnchorElement>) => {
+        if (external) return;
+        if (event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return;
+        event.preventDefault();
+        go(href);
+      }}
+    >
+      {children}
+    </a>
+  );
+}