@tribe-nest/forge 1.13.0

package/src/ui/styled/PodcastEpisode.tsx

@@ -0,0 +1,137 @@
+import { Play, Pause } from "lucide-react";
+import { usePodcast, findEpisode, episodeAudio } from "../../data/queries/usePodcast";
+import { usePodcastPlayer } from "../headless/podcast/usePodcastPlayer";
+import type { BlogPost, BlogCategory } from "../../types/models";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+// Baseline `.rich-text` content styles ship with Forge (WYSIWYG with the admin
+// editor) — no host-loaded stylesheet needed.
+import "./rich-text.css";
+
+export interface PodcastEpisodeProps {
+  /** Show (podcast category) slug. */
+  showSlug: string;
+  /** Episode (blog post) slug. */
+  episodeSlug: string;
+  /** Build hrefs for sibling episodes + back to the show. */
+  episodeHref?: (episodeSlug: string) => string;
+  showHref?: (showSlug: string) => string;
+  initialShow?: BlogCategory | null;
+  initialEpisodes?: BlogPost[] | null;
+}
+
+function fmt(sec?: number | null) {
+  if (!sec || sec <= 0) return "";
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Single-episode page — plays this episode and offers Previous / Next episode
+ * buttons. Shares the queue + player with the show page (persistent playback).
+ * Built on `usePodcast` + `usePodcastPlayer`.
+ */
+export function PodcastEpisode({
+  showSlug,
+  episodeSlug,
+  episodeHref = (s) => `/i/podcasts/${showSlug}/${s}`,
+  showHref = (s) => `/i/podcasts/${s}`,
+  initialShow,
+  initialEpisodes,
+}: PodcastEpisodeProps) {
+  const theme = useForgeTheme();
+  const { show, episodes, isLoading } = usePodcast(showSlug, {
+    initialShow: initialShow ?? undefined,
+    initialEpisodes: initialEpisodes ?? undefined,
+  });
+  const player = usePodcastPlayer({ episodes, show });
+  const { episode, previous, next } = findEpisode(episodes, episodeSlug);
+
+  if (isLoading) return <Loading fullPage />;
+  if (!episode) return <p style={{ color: theme.colors.text }}>Episode not found.</p>;
+
+  const border = `${theme.colors.text}1a`;
+  const dur = episodeAudio(episode)?.durationSec;
+  const playing = player.isEpisodePlaying(episode);
+
+  return (
+    <article style={{ maxWidth: 720, margin: "0 auto", padding: "40px 20px", color: theme.colors.text }}>
+      <a href={showHref(showSlug)} style={{ color: theme.colors.primary, textDecoration: "none", fontSize: 14 }}>
+        ← {show?.title ?? "Podcast"}
+      </a>
+
+      <h1 style={{ fontSize: 26, fontWeight: 800, marginTop: 12 }}>{episode.title}</h1>
+      <div style={{ fontSize: 13, opacity: 0.55, marginTop: 4 }}>
+        {episode.publishedAt ? new Date(episode.publishedAt).toLocaleDateString() : ""}
+        {dur ? ` · ${fmt(dur)}` : ""}
+      </div>
+
+      {/* Play control for this episode (loads the show as the queue) */}
+      <div style={{ display: "flex", alignItems: "center", gap: 12, margin: "18px 0" }}>
+        <button
+          onClick={() => player.toggleEpisode(episode)}
+          style={{
+            display: "inline-flex",
+            alignItems: "center",
+            gap: 8,
+            padding: "10px 18px",
+            borderRadius: 999,
+            border: "none",
+            background: theme.colors.primary,
+            color: theme.colors.background,
+            cursor: "pointer",
+            fontWeight: 600,
+          }}
+        >
+          {playing ? <Pause size={18} /> : <Play size={18} />}
+          {playing ? "Pause" : "Play episode"}
+        </button>
+        {player.isCurrent(episode) && (
+          <span style={{ fontSize: 13, opacity: 0.6 }}>
+            {fmt(player.currentTime)} / {fmt(player.duration)}
+          </span>
+        )}
+      </div>
+
+      {/* Show notes — `rich-text` = shared baseline content styles (WYSIWYG
+          with the editor), bundled with Forge via the ./rich-text.css import. */}
+      <div
+        className="rich-text"
+        style={{ lineHeight: 1.7, marginTop: 8, borderTop: `1px solid ${border}`, paddingTop: 18 }}
+        dangerouslySetInnerHTML={{ __html: episode.content }}
+      />
+
+      {/* Prev / Next episode navigation */}
+      <nav style={{ display: "flex", justifyContent: "space-between", gap: 12, marginTop: 32, borderTop: `1px solid ${border}`, paddingTop: 18 }}>
+        {previous ? (
+          <a href={episodeHref(previous.slug)} style={navLink(theme)}>
+            <span style={{ opacity: 0.55, fontSize: 12 }}>← Previous</span>
+            <span style={{ fontWeight: 600 }}>{previous.title}</span>
+          </a>
+        ) : (
+          <span />
+        )}
+        {next ? (
+          <a href={episodeHref(next.slug)} style={{ ...navLink(theme), textAlign: "right", alignItems: "flex-end" }}>
+            <span style={{ opacity: 0.55, fontSize: 12 }}>Next →</span>
+            <span style={{ fontWeight: 600 }}>{next.title}</span>
+          </a>
+        ) : (
+          <span />
+        )}
+      </nav>
+    </article>
+  );
+}
+
+function navLink(theme: ReturnType<typeof useForgeTheme>): React.CSSProperties {
+  return {
+    display: "flex",
+    flexDirection: "column",
+    gap: 2,
+    maxWidth: "48%",
+    color: theme.colors.text,
+    textDecoration: "none",
+  };
+}

package/src/ui/styled/PodcastList.tsx

@@ -0,0 +1,58 @@
+import { usePodcasts } from "../../data/queries/usePodcast";
+import type { PodcastShow } from "../../types/models";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface PodcastListProps {
+  /** Build the href for a show page from its slug. */
+  showHref?: (slug: string) => string;
+  /** Server-fetched shows to seed the query for SSR (no loading flash). */
+  initialShows?: PodcastShow[] | null;
+}
+
+/** Podcast index — grid of the creator's shows. Built on `usePodcasts`. */
+export function PodcastList({ showHref = (s) => `/i/podcasts/${s}`, initialShows }: PodcastListProps) {
+  const theme = useForgeTheme();
+  const { data: shows, isLoading } = usePodcasts({ initialData: initialShows ?? undefined });
+
+  if (isLoading) return <Loading fullPage />;
+  const list = shows ?? [];
+  if (!list.length) return <p style={{ opacity: 0.7, color: theme.colors.text }}>No podcasts yet.</p>;
+
+  return (
+    <div style={{ maxWidth: 960, margin: "0 auto", padding: "40px 20px", color: theme.colors.text }}>
+      <header style={{ marginBottom: 28 }}>
+        <h1 style={{ fontSize: 30, fontWeight: 800 }}>Podcasts</h1>
+      </header>
+      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(220px, 1fr))", gap: 24 }}>
+        {list.map((show) => (
+          <a
+            key={show.id}
+            href={showHref(show.slug)}
+            style={{
+              color: theme.colors.text,
+              textDecoration: "none",
+              border: `1px solid ${theme.colors.text}1a`,
+              borderRadius: theme.cornerRadius,
+              overflow: "hidden",
+              display: "block",
+            }}
+          >
+            {show.coverImage?.url ? (
+              <img src={show.coverImage.url} alt={show.title} style={{ width: "100%", aspectRatio: "1/1", objectFit: "cover" }} />
+            ) : (
+              <div style={{ width: "100%", aspectRatio: "1/1", background: `${theme.colors.text}0d` }} />
+            )}
+            <div style={{ padding: 14 }}>
+              <h3 style={{ fontWeight: 700 }}>{show.title}</h3>
+              {show.author && <p style={{ fontSize: 13, opacity: 0.6, marginTop: 2 }}>{show.author}</p>}
+              <p style={{ fontSize: 12, opacity: 0.5, marginTop: 6 }}>
+                {show.episodeCount} episode{show.episodeCount === 1 ? "" : "s"}
+              </p>
+            </div>
+          </a>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/PodcastShow.tsx

@@ -0,0 +1,164 @@
+import { Play, Pause, SkipBack, SkipForward } from "lucide-react";
+import { usePodcast } from "../../data/queries/usePodcast";
+import { usePodcastPlayer } from "../headless/podcast/usePodcastPlayer";
+import type { BlogPost, BlogCategory } from "../../types/models";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface PodcastShowProps {
+  /** Show (podcast category) slug. */
+  slug: string;
+  /** Build the href for a single-episode page from its slug. */
+  episodeHref?: (episodeSlug: string) => string;
+  /** Server-fetched show + episodes to seed the queries for SSR (no loading flash). */
+  initialShow?: BlogCategory | null;
+  initialEpisodes?: BlogPost[] | null;
+}
+
+function fmt(sec?: number | null) {
+  if (!sec || sec <= 0) return "";
+  const m = Math.floor(sec / 60);
+  const s = Math.floor(sec % 60);
+  return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Podcast show page — header + a single in-page player that plays the current
+ * episode and walks next/previous without leaving the page, plus the episode list.
+ * Built on `usePodcast` + `usePodcastPlayer` (the shared AudioPlayer + queue).
+ */
+export function PodcastShow({ slug, episodeHref = (s) => `/i/podcasts/${slug}/${s}`, initialShow, initialEpisodes }: PodcastShowProps) {
+  const theme = useForgeTheme();
+  const { show, episodes, isLoading } = usePodcast(slug, {
+    initialShow: initialShow ?? undefined,
+    initialEpisodes: initialEpisodes ?? undefined,
+  });
+  const player = usePodcastPlayer({ episodes, show });
+
+  if (isLoading) return <Loading fullPage />;
+  if (!show) return <p>Podcast not found.</p>;
+
+  const cover = show.coverImage?.url;
+  const nowPlaying = player.currentEpisode ?? episodes[0] ?? null;
+  const pct = player.duration > 0 ? (player.currentTime / player.duration) * 100 : 0;
+  const border = `${theme.colors.text}1a`;
+
+  return (
+    <div style={{ maxWidth: 820, margin: "0 auto", padding: "40px 20px", color: theme.colors.text }}>
+      <header style={{ display: "flex", gap: 20, alignItems: "flex-start", marginBottom: 24 }}>
+        {cover ? (
+          <img src={cover} alt={show.title} style={{ width: 140, height: 140, borderRadius: theme.cornerRadius, objectFit: "cover" }} />
+        ) : (
+          <div style={{ width: 140, height: 140, borderRadius: theme.cornerRadius, background: `${theme.colors.text}0d` }} />
+        )}
+        <div>
+          <h1 style={{ fontSize: 28, fontWeight: 800 }}>{show.title}</h1>
+          {show.author && <p style={{ opacity: 0.6, marginTop: 4 }}>{show.author}</p>}
+          {show.description && <p style={{ opacity: 0.75, marginTop: 10, lineHeight: 1.5 }}>{show.description}</p>}
+        </div>
+      </header>
+
+      {/* In-page player — current episode + prev/next + seek, no navigation */}
+      {nowPlaying && (
+        <div
+          style={{
+            position: "sticky",
+            top: 8,
+            zIndex: 5,
+            background: theme.colors.background,
+            border: `1px solid ${border}`,
+            borderRadius: theme.cornerRadius,
+            padding: 14,
+            marginBottom: 20,
+            boxShadow: "0 4px 16px rgba(0,0,0,0.06)",
+          }}
+        >
+          <div style={{ fontSize: 13, opacity: 0.6 }}>Now playing</div>
+          <div style={{ fontWeight: 600, margin: "2px 0 10px" }}>{nowPlaying.title}</div>
+          <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
+            <button onClick={player.playPrevious} disabled={!player.hasPrevious} aria-label="Previous episode" style={iconBtn(theme, !player.hasPrevious)}>
+              <SkipBack size={18} />
+            </button>
+            <button onClick={() => player.toggleEpisode(nowPlaying)} aria-label="Play/pause" style={{ ...iconBtn(theme, false), background: theme.colors.primary, color: theme.colors.background, width: 44, height: 44 }}>
+              {player.isEpisodePlaying(nowPlaying) ? <Pause size={20} /> : <Play size={20} />}
+            </button>
+            <button onClick={player.playNext} disabled={!player.hasNext} aria-label="Next episode" style={iconBtn(theme, !player.hasNext)}>
+              <SkipForward size={18} />
+            </button>
+            <div style={{ flex: 1 }}>
+              <input
+                type="range"
+                min={0}
+                max={player.duration || 0}
+                value={player.currentTime}
+                onChange={(e) => player.seek(Number(e.target.value))}
+                style={{ width: "100%", accentColor: theme.colors.primary }}
+              />
+              <div style={{ display: "flex", justifyContent: "space-between", fontSize: 12, opacity: 0.6 }}>
+                <span>{fmt(player.currentTime)}</span>
+                <span>{fmt(player.duration)}</span>
+              </div>
+            </div>
+          </div>
+          {/* thin progress affordance under the row */}
+          <div style={{ height: 2, background: `${theme.colors.text}14`, borderRadius: 2, marginTop: 6 }}>
+            <div style={{ height: 2, width: `${pct}%`, background: theme.colors.primary, borderRadius: 2 }} />
+          </div>
+        </div>
+      )}
+
+      {/* Episode list — click to play in place; title links to the episode page */}
+      <div style={{ display: "flex", flexDirection: "column", gap: 2 }}>
+        {episodes.map((ep) => {
+          const active = player.isCurrent(ep);
+          const dur = ep.media?.find((m) => (m.type || "").startsWith("audio"))?.durationSec;
+          return (
+            <div
+              key={ep.id}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 12,
+                padding: "12px 10px",
+                borderRadius: theme.cornerRadius,
+                background: active ? `${theme.colors.primary}12` : "transparent",
+                borderBottom: `1px solid ${border}`,
+              }}
+            >
+              <button onClick={() => player.toggleEpisode(ep)} aria-label={player.isEpisodePlaying(ep) ? "Pause episode" : "Play episode"} style={{ ...iconBtn(theme, false), flexShrink: 0 }}>
+                {player.isEpisodePlaying(ep) ? <Pause size={16} /> : <Play size={16} />}
+              </button>
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <a href={episodeHref(ep.slug)} style={{ color: theme.colors.text, textDecoration: "none", fontWeight: 600 }}>
+                  {ep.title}
+                </a>
+                <div style={{ fontSize: 12, opacity: 0.55, marginTop: 2 }}>
+                  {ep.publishedAt ? new Date(ep.publishedAt).toLocaleDateString() : ""}
+                  {dur ? ` · ${fmt(dur)}` : ""}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+        {!episodes.length && <p style={{ opacity: 0.7 }}>No episodes yet.</p>}
+      </div>
+    </div>
+  );
+}
+
+function iconBtn(theme: ReturnType<typeof useForgeTheme>, disabled: boolean): React.CSSProperties {
+  return {
+    width: 36,
+    height: 36,
+    borderRadius: 999,
+    border: `1px solid ${theme.colors.text}22`,
+    background: theme.colors.background,
+    color: theme.colors.text,
+    cursor: disabled ? "default" : "pointer",
+    opacity: disabled ? 0.4 : 1,
+    fontSize: 14,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+  };
+}

package/src/ui/styled/PostsFeed.tsx

@@ -0,0 +1,63 @@
+import { useGetPosts } from "../../data/queries/usePosts";
+import type { IPublicPost } from "../../types/models";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+import { Loading } from "./Loading";
+
+export interface PostsFeedProps {
+  columns?: number;
+  limit?: number;
+  onSelect?: (post: IPublicPost) => void;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+/** Themed posts grid, built on `useGetPosts`. */
+export function PostsFeed({ columns = 3, limit, onSelect, className, style }: PostsFeedProps) {
+  const t = useThemeTokens();
+  const { data, isLoading } = useGetPosts({ page: 1 });
+  const posts = (data?.data ?? []).slice(0, limit ?? 100);
+
+  if (isLoading) return <Loading />;
+  if (!posts.length) return <p style={{ color: t.text, opacity: 0.7 }}>No posts yet.</p>;
+
+  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,
+      }}
+    >
+      {posts.map((post) => {
+        const cover = post.media?.find((m) => m.type === "image")?.url ?? post.media?.[0]?.url;
+        return (
+          <button
+            key={post.id}
+            onClick={() => onSelect?.(post)}
+            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="" style={{ width: "100%", height: "100%", objectFit: "cover" }} />}
+            </div>
+            <div style={{ padding: 10, fontSize: 14 }}>{post.caption?.slice(0, 100)}</div>
+          </button>
+        );
+      })}
+    </div>
+  );
+}