@tribe-nest/forge 1.13.0

package/src/ui/styled/ProductGrid.tsx

@@ -0,0 +1,82 @@
+import { useGetProducts } from "../../data/queries/useProducts";
+import type { IPublicProduct } from "../../types/models";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { useAmountFormatter } from "../format/useFormatCurrency";
+import { PriceDisplay } from "../format/PriceDisplay";
+import { usePricesIncludeTax } from "../../data/queries/useWebsite";
+import { Loading } from "./Loading";
+
+export interface ProductGridProps {
+  columns?: number;
+  limit?: number;
+  formatAmount?: (amount: number) => string;
+  onSelect?: (product: IPublicProduct) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+function minPrice(p: IPublicProduct): number {
+  const prices = (p.variants ?? []).map((v) => v.price).filter((n) => typeof n === "number");
+  return prices.length ? Math.min(...prices) : 0;
+}
+
+/** Themed product grid, built on `useGetProducts`. */
+export function ProductGrid({ columns = 3, limit, formatAmount, onSelect, className, style }: ProductGridProps) {
+  const t = useThemeTokens();
+  const fmt = useAmountFormatter(formatAmount);
+  const pricesIncludeTax = usePricesIncludeTax();
+  const { data, isLoading } = useGetProducts({ page: 1 });
+  const products = (data?.data ?? []).slice(0, limit ?? 100);
+
+  if (isLoading) return <Loading />;
+  if (!products.length) return <p style={{ color: t.text, opacity: 0.7 }}>No products yet.</p>;
+
+  // Responsive: each card is at least ~150px wide, but also at least
+  // (container / columns), so it renders `columns` across on wide screens and
+  // wraps to fewer on narrow ones — no fixed column count that cramps mobile.
+  const gap = 16;
+  const track = `minmax(max(150px, calc((100% - ${(columns - 1) * gap}px) / ${columns})), 1fr)`;
+
+  return (
+    <div
+      className={className}
+      style={{
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fill, ${track})`,
+        gap,
+        fontFamily: t.fontFamily,
+        ...style,
+      }}
+    >
+      {products.map((p) => {
+        const cover = p.media?.find((m) => m.type === "image")?.url ?? p.media?.[0]?.url;
+        return (
+          <button
+            key={p.id}
+            onClick={() => onSelect?.(p)}
+            style={{
+              textAlign: "left",
+              cursor: onSelect ? "pointer" : "default",
+              background: t.surface,
+              border: `1px solid ${t.primary}20`,
+              borderRadius: t.cornerRadius,
+              overflow: "hidden",
+              padding: 0,
+              color: t.text,
+            }}
+          >
+            <div style={{ aspectRatio: "1 / 1", background: `${t.primary}10` }}>
+              {cover && <img src={cover} alt={p.title} style={{ width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }} />}
+            </div>
+            <div style={{ padding: 10 }}>
+              <div style={{ fontWeight: 600, fontSize: 14, marginBottom: 2 }}>{p.title}</div>
+              <div style={{ color: t.primary, fontWeight: 600, fontSize: 14 }}>
+                <PriceDisplay amount={minPrice(p)} pricesIncludeTax={pricesIncludeTax} formatAmount={fmt} mutedColor={t.text} captionStyle={{ opacity: 0.65 }} />
+              </div>
+            </div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}

package/src/ui/styled/PushOptIn.tsx

@@ -0,0 +1,65 @@
+import { useForge } from "../../provider/ForgeProvider";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { usePushSubscription } from "../../data/queries/useNotifications";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { Button } from "./Button";
+
+export interface PushOptInProps {
+  /** Row heading. */
+  title?: string;
+  /** Supporting copy. */
+  description?: string;
+}
+
+/**
+ * A small opt-in row for push notifications, for account/membership pages. Uses
+ * the FROZEN `usePushSubscription()` contract (baked `profileId`, fan auth token
+ * flows automatically). Subscribe requires a logged-in fan (the subscribe API is
+ * fan-authenticated), so this renders nothing when unauthenticated or when push
+ * isn't supported. On iOS, push works only from the installed PWA (16.4+) — pair
+ * with `<InstallBanner/>`.
+ *
+ * The membership-notifications spec's full preference UI supersedes this row on
+ * `/i/account` later; this is the minimal subscription primitive it plugs into.
+ */
+export function PushOptIn({
+  title = "Push notifications",
+  description = "Get notified about new posts, replies, and messages.",
+}: PushOptInProps) {
+  const t = useThemeTokens();
+  const { profileId } = useForge();
+  const { isAuthenticated } = usePublicAuth();
+  const { isSupported, isSubscribed, isLoading, subscribe, unsubscribe } = usePushSubscription(profileId ?? "");
+
+  if (!isAuthenticated || !isSupported || !profileId) return null;
+
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 16,
+        padding: 16,
+        borderRadius: t.cornerRadius,
+        border: `1px solid ${t.border}`,
+        background: t.surface,
+        color: t.text,
+      }}
+    >
+      <div>
+        <div style={{ fontWeight: 600, fontSize: 15 }}>{title}</div>
+        <div style={{ fontSize: 13, color: t.muted, marginTop: 2 }}>{description}</div>
+      </div>
+      {isSubscribed ? (
+        <Button size="sm" variant="outline" loading={isLoading} onClick={() => unsubscribe()}>
+          Turn off
+        </Button>
+      ) : (
+        <Button size="sm" loading={isLoading} onClick={() => subscribe()}>
+          Enable
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/PwaRegistration.tsx

@@ -0,0 +1,58 @@
+import { useEffect } from "react";
+
+export interface PwaRegistrationProps {
+  /**
+   * Register the service worker only for the live published site. The starter
+   * passes `enabled={!FORGE_EDIT && FORGE_STATE === "published"}` so the HMR
+   * edit sandbox and `preview-<versionId>.*` review Workers (deployed with
+   * state:"draft") never install a SW or cache a preview. Defaults to `false`
+   * so an un-gated mount is a no-op, never an accidental prod SW.
+   */
+  enabled?: boolean;
+  /** Path the SW is served from (default `/sw.js`, scope `/`). */
+  swUrl?: string;
+}
+
+/**
+ * Registers the Forge service worker (`/sw.js`) on the published site. Renders
+ * nothing. The SW source lives in `@tribe-nest/forge/server`
+ * (`forgeServiceWorkerScript()`) and is served by the starter's `/sw.js` route,
+ * so a Forge version bump propagates SW fixes to every deployed site — never
+ * frozen into per-site files.
+ *
+ * Gating (locked decision): registration is skipped unless `enabled` is true,
+ * so reviewers on a preview Worker or the HMR sandbox are never SW-cached or
+ * install-prompted. Root-path SW ⇒ scope `/` with no `Service-Worker-Allowed`
+ * games; each origin (subdomain + custom domains) registers independently.
+ */
+export function PwaRegistration({ enabled = false, swUrl = "/sw.js" }: PwaRegistrationProps) {
+  useEffect(() => {
+    if (!enabled) return;
+    if (typeof navigator === "undefined" || !("serviceWorker" in navigator)) return;
+    let cancelled = false;
+    const register = () => {
+      navigator.serviceWorker.register(swUrl, { scope: "/" }).catch((err) => {
+        // Registration failure must never break the page.
+        console.error("SW registration failed:", err);
+      });
+    };
+    // Register after load so it never contends with the initial navigation.
+    if (document.readyState === "complete") {
+      if (!cancelled) register();
+    } else {
+      const onLoad = () => {
+        if (!cancelled) register();
+      };
+      window.addEventListener("load", onLoad, { once: true });
+      return () => {
+        cancelled = true;
+        window.removeEventListener("load", onLoad);
+      };
+    }
+    return () => {
+      cancelled = true;
+    };
+  }, [enabled, swUrl]);
+
+  return null;
+}

package/src/ui/styled/ReactionBar.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { usePostEngagement, type UsePostEngagementOptions } from "../headless/engagement/usePostEngagement";
+import type { EngagementEntityType } from "../../types/models";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { readableTextOn } from "../theme/contrast";
+
+export interface ReactionBarProps extends UsePostEngagementOptions {
+  entityId: string;
+  entityType?: EngagementEntityType;
+  showComments?: boolean;
+}
+
+/** Themed like / save / comment bar built on `usePostEngagement`. */
+export function ReactionBar({ entityId, entityType = "post", showComments = true, ...opts }: ReactionBarProps) {
+  const theme = useForgeTheme();
+  const e = usePostEngagement(entityId, entityType, opts);
+  const [draft, setDraft] = useState("");
+
+  const iconBtn = {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+    background: "transparent",
+    border: "none",
+    cursor: "pointer",
+    color: theme.colors.text,
+    fontSize: 15,
+  } as const;
+
+  return (
+    <div style={{ color: theme.colors.text, fontFamily: theme.fontFamily }}>
+      <div style={{ display: "flex", gap: 20, alignItems: "center" }}>
+        <button onClick={e.toggleLike} style={iconBtn} aria-pressed={e.isLiked}>
+          <span style={{ color: e.isLiked ? theme.colors.primary : "inherit" }}>{e.isLiked ? "♥" : "♡"}</span>
+          {e.likeCount}
+        </button>
+
+        {showComments && (
+          <button onClick={e.openComments} style={iconBtn}>
+            💬 {e.commentCount}
+          </button>
+        )}
+
+        <button onClick={e.toggleSave} style={iconBtn} aria-pressed={e.isSaved}>
+          <span style={{ color: e.isSaved ? theme.colors.primary : "inherit" }}>{e.isSaved ? "★" : "☆"}</span>
+        </button>
+      </div>
+
+      {showComments && e.showComments && (
+        <div style={{ marginTop: 12, display: "flex", flexDirection: "column", gap: 8 }}>
+          {e.comments.map((c) => (
+            <div key={c.id} style={{ fontSize: 14 }}>
+              <strong>{c.fullName}</strong> {c.content}
+            </div>
+          ))}
+          <div style={{ display: "flex", gap: 8 }}>
+            <input
+              value={draft}
+              onChange={(ev) => setDraft(ev.target.value)}
+              placeholder="Add a comment…"
+              style={{
+                flex: 1,
+                padding: 8,
+                border: `1px solid ${theme.colors.primary}40`,
+                borderRadius: theme.cornerRadius,
+                background: theme.colors.background,
+                color: theme.colors.text,
+              }}
+            />
+            <button
+              onClick={async () => {
+                await e.addComment(draft);
+                setDraft("");
+              }}
+              disabled={e.isAddingComment || !draft.trim()}
+              style={{
+                background: theme.colors.primary,
+                color: readableTextOn(theme.colors.primary),
+                border: "none",
+                borderRadius: theme.cornerRadius,
+                padding: "8px 14px",
+                cursor: "pointer",
+                opacity: e.isAddingComment || !draft.trim() ? 0.6 : 1,
+              }}
+            >
+              Post
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/ReplayList.tsx

@@ -0,0 +1,134 @@
+import { useState } from "react";
+import { useReplayBroadcasts } from "../../data/queries/useReplay";
+import type { ReplayBroadcast } from "../../types/models";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface ReplayListProps {
+  /** Ticket id gating access to the replay broadcasts (from the URL search param). */
+  ticketId?: string;
+}
+
+/** Locale date-time formatting. */
+function formatDateTime(value: string | number | Date, timezone?: string): string {
+  return new Date(value).toLocaleString("en-US", {
+    weekday: "long",
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "2-digit",
+    hour12: true,
+    timeZone: timezone || "UTC",
+    timeZoneName: "short",
+  });
+}
+
+/** Replay broadcasts gallery, gated by ticket id. Built on `useReplayBroadcasts`. */
+export function ReplayList({ ticketId }: ReplayListProps) {
+  const theme = useForgeTheme();
+  const [selected, setSelected] = useState<ReplayBroadcast | null>(null);
+
+  const { data, isLoading, error } = useReplayBroadcasts(ticketId);
+
+  if (!ticketId) {
+    return (
+      <div style={{ maxWidth: 520, margin: "0 auto", textAlign: "center", color: theme.colors.text }}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Enter Your Ticket ID</h1>
+        <p style={{ opacity: 0.7 }}>
+          Add your ticket id to the URL, e.g. <code>/i/replay?ticketId=&lt;ticketId&gt;</code>.
+        </p>
+      </div>
+    );
+  }
+
+  if (isLoading) return <Loading fullPage />;
+
+  if (error || !data) {
+    return (
+      <p style={{ color: theme.colors.text }}>
+        Invalid ticket id or no broadcasts found. Please check your ticket id and try again.
+      </p>
+    );
+  }
+
+  if (selected) {
+    return (
+      <div style={{ maxWidth: 960, margin: "0 auto", color: theme.colors.text }}>
+        <button
+          onClick={() => setSelected(null)}
+          style={{
+            marginBottom: 16,
+            cursor: "pointer",
+            background: "none",
+            border: "none",
+            color: theme.colors.primary,
+            fontSize: 14,
+          }}
+        >
+          ← Back to broadcasts
+        </button>
+        <div style={{ borderRadius: theme.cornerRadius, overflow: "hidden", border: `1px solid ${theme.colors.text}1a` }}>
+          {selected.vodUrl ? (
+            <video src={selected.vodUrl} controls playsInline style={{ width: "100%", background: "#000" }} />
+          ) : (
+            <div style={{ aspectRatio: "16/9", display: "flex", alignItems: "center", justifyContent: "center", background: "#000", color: "#fff" }}>
+              Video not available
+            </div>
+          )}
+          <div style={{ padding: 24 }}>
+            <h1 style={{ fontSize: 22, fontWeight: 700 }}>{selected.title}</h1>
+            {selected.endedAt && (
+              <p style={{ fontSize: 13, opacity: 0.7, marginTop: 4 }}>Ended {formatDateTime(selected.endedAt)}</p>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (data.broadcasts.length === 0) {
+    return <p style={{ color: theme.colors.text }}>No replay broadcasts available for this ticket.</p>;
+  }
+
+  return (
+    <div style={{ maxWidth: 960, margin: "0 auto", color: theme.colors.text }}>
+      <h1 style={{ fontSize: 28, fontWeight: 700, marginBottom: 24 }}>Replay Broadcasts</h1>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(260px, 1fr))", gap: 16 }}>
+        {data.broadcasts.map((broadcast) => {
+          const thumb = broadcast.thumbnailUrl || broadcast.generatedThumbnailUrl;
+          return (
+            <button
+              key={broadcast.id}
+              onClick={() => setSelected(broadcast)}
+              style={{
+                textAlign: "left",
+                cursor: "pointer",
+                padding: 0,
+                background: "none",
+                color: theme.colors.text,
+                border: `1px solid ${theme.colors.text}1a`,
+                borderRadius: theme.cornerRadius,
+                overflow: "hidden",
+              }}
+            >
+              <div style={{ aspectRatio: "16/9", background: "#000", display: "flex", alignItems: "center", justifyContent: "center" }}>
+                {thumb ? (
+                  <img src={thumb} alt={broadcast.title} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
+                ) : (
+                  <span style={{ color: "#fff", opacity: 0.6 }}>▶</span>
+                )}
+              </div>
+              <div style={{ padding: 16 }}>
+                <h3 style={{ fontWeight: 600 }}>{broadcast.title}</h3>
+                {broadcast.startedAt && (
+                  <p style={{ fontSize: 12, opacity: 0.7, marginTop: 4 }}>{formatDateTime(broadcast.startedAt)}</p>
+                )}
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/ResetPasswordForm.tsx

@@ -0,0 +1,127 @@
+import { useState } from "react";
+import { useResetPassword } from "../../data/queries/useAuthActions";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+export interface ResetPasswordFormProps {
+  /** Reset token from the email link (read from search params by the shell). */
+  token?: string;
+  /** Href for the "Back to login" link (shown on success). */
+  loginHref: string;
+  /** Href for the "Request a new reset link" link (shown when token is missing). */
+  forgotHref: string;
+}
+
+const msg = (e: unknown) => (e as { response?: { data?: { message?: string } } })?.response?.data?.message;
+
+/** Themed reset-password form, built on `useResetPassword`. */
+export function ResetPasswordForm({ token, loginHref, forgotHref }: ResetPasswordFormProps) {
+  const theme = useForgeTheme();
+  const resetPassword = useResetPassword();
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState("");
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isSuccess, setIsSuccess] = useState(false);
+
+  const card: React.CSSProperties = {
+    maxWidth: 420,
+    margin: "40px auto 0",
+    padding: 24,
+    border: `1px solid ${theme.colors.primary}40`,
+    borderRadius: theme.cornerRadius,
+    color: theme.colors.text,
+  };
+  const input: React.CSSProperties = {
+    width: "100%",
+    height: 40,
+    padding: "8px 12px",
+    borderRadius: theme.cornerRadius,
+    border: `1px solid ${theme.colors.primary}40`,
+    background: "transparent",
+    color: theme.colors.text,
+    outline: "none",
+  };
+  const button: React.CSSProperties = {
+    width: "100%",
+    padding: "10px 14px",
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.primary,
+    color: theme.colors.background,
+    border: "none",
+    fontWeight: 600,
+    cursor: "pointer",
+  };
+  const link: React.CSSProperties = { color: theme.colors.primary, textDecoration: "underline" };
+
+  if (!token) {
+    return (
+      <div style={card}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Invalid link</h1>
+        <p style={{ fontSize: 14, marginBottom: 24 }}>This password reset link is invalid or has expired.</p>
+        <a href={forgotHref} style={link}>
+          Request a new reset link
+        </a>
+      </div>
+    );
+  }
+
+  if (isSuccess) {
+    return (
+      <div style={card}>
+        <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 12 }}>Password reset</h1>
+        <p style={{ fontSize: 14, marginBottom: 24 }}>Your password has been reset successfully.</p>
+        <a href={loginHref} style={link}>
+          Back to login
+        </a>
+      </div>
+    );
+  }
+
+  const onSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError("");
+    if (password.length < 8) {
+      setError("Password must be at least 8 characters.");
+      return;
+    }
+    if (password !== confirmPassword) {
+      setError("Passwords don't match.");
+      return;
+    }
+    setIsSubmitting(true);
+    try {
+      await resetPassword.mutateAsync({ token, password });
+      setIsSuccess(true);
+    } catch (err) {
+      setError(msg(err) || "Something went wrong. Please try again.");
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div style={card}>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Reset password</h1>
+      {error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{error}</p>}
+      <form onSubmit={onSubmit} style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <label style={{ fontSize: 14 }}>Password</label>
+          <input type="password" placeholder="Password" value={password} onChange={(e) => setPassword(e.target.value)} style={input} />
+        </div>
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          <label style={{ fontSize: 14 }}>Confirm password</label>
+          <input
+            type="password"
+            placeholder="Confirm password"
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            style={input}
+          />
+        </div>
+        <button type="submit" disabled={isSubmitting} style={button}>
+          {isSubmitting ? "Resetting…" : "Reset password"}
+        </button>
+      </form>
+    </div>
+  );
+}