@tribe-nest/forge 1.13.0

package/src/ui/styled/community/CommunityFeed.tsx

@@ -0,0 +1,483 @@
+import { useEffect, useState, type CSSProperties } from "react";
+import { MessageSquarePlus, Plus, Search, X } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useCommunitySpaceFeed } from "../../headless/community/useCommunitySpaceFeed";
+import { useCommunitySearch, type CommunityPost, type CommunitySearchResults } from "../../../data/queries/useCommunity";
+import { Loading } from "../Loading";
+import { CommunityComposer } from "./CommunityComposer";
+import { CommunityPostCard } from "./CommunityPostCard";
+
+export interface CommunityFeedProps {
+  /** A space uuid OR its per-profile slug — resolved from the gated spaces list. */
+  spaceId: string;
+  onOpenPost: (post: CommunityPost) => void;
+  onOpenProfile?: (accountId: string) => void;
+  onBack?: () => void;
+}
+
+/**
+ * A space's post feed, live over the space's Socket.io room. Renders feed
+ * spaces as a card stream and forum spaces as compact title rows — same data,
+ * two shapes. The composer is hidden by default behind a "+" in the header (it
+ * cramps the top otherwise); a header search scopes FTS to THIS space and, while
+ * a query is active, replaces the feed with matching posts.
+ */
+export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, onBack }: CommunityFeedProps) {
+  const t = useThemeTokens();
+  const feed = useCommunitySpaceFeed(idOrSlug);
+  const border = `1px solid ${t.border}`;
+
+  // Composer is hidden by default — the "+" reveals it below the header.
+  const [composerOpen, setComposerOpen] = useState(false);
+  // Search expands from the header icon; a live query >=2 chars replaces the feed.
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const trimmed = query.trim();
+  const searching = trimmed.length >= 2;
+
+  const [searchFocused, setSearchFocused] = useState(false);
+  // Debounce the query 500ms so we don't fire an FTS request per keystroke.
+  const [debouncedQuery, setDebouncedQuery] = useState("");
+  useEffect(() => {
+    const id = setTimeout(() => setDebouncedQuery(trimmed), 500);
+    return () => clearTimeout(id);
+  }, [trimmed]);
+
+  // Scope search to this space via the resolved space (id or slug both work).
+  const search = useCommunitySearch(debouncedQuery, feed.space?.id);
+
+  if (feed.spacesLoading || (feed.postsLoading && !feed.posts.length)) return <Loading />;
+
+  if (!feed.space) {
+    return (
+      <div style={{ border, borderRadius: t.cornerRadius, padding: 32, textAlign: "center", color: t.muted }}>
+        This space doesn't exist or your membership doesn't include it.
+      </div>
+    );
+  }
+
+  const isForum = feed.space.type === "forum";
+
+  const iconButton = (extra?: CSSProperties): CSSProperties => ({
+    flexShrink: 0,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 32,
+    height: 32,
+    borderRadius: 999,
+    border,
+    background: "transparent",
+    color: t.text,
+    cursor: "pointer",
+    ...extra,
+  });
+
+  const closeSearch = () => {
+    setSearchOpen(false);
+    setQuery("");
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 14 }}>
+      <style>{"@keyframes forgeCommunitySearchIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}"}</style>
+      <header style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        {onBack && (
+          <button
+            onClick={onBack}
+            aria-label="Back to spaces"
+            style={{ background: "none", border: "none", cursor: "pointer", color: t.text, fontSize: 18 }}
+          >
+            ←
+          </button>
+        )}
+        <div style={{ minWidth: 0, flex: 1 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <h2 style={{ margin: 0, fontSize: 18, fontFamily: t.headingFontFamily, color: t.text }}>
+              {feed.space.name}
+            </h2>
+            {/* Reveal/hide the composer (hidden by default). */}
+            <button
+              onClick={() => setComposerOpen((o) => !o)}
+              aria-label={composerOpen ? "Hide composer" : "New post"}
+              aria-expanded={composerOpen}
+              title={composerOpen ? "Hide composer" : isForum ? "Start a discussion" : "New post"}
+              style={iconButton({
+                width: 26,
+                height: 26,
+                background: composerOpen ? `${t.primary}1a` : "transparent",
+                color: composerOpen ? t.primary : t.text,
+              })}
+            >
+              <Plus size={15} style={{ transform: composerOpen ? "rotate(45deg)" : "none", transition: "transform .15s" }} />
+            </button>
+          </div>
+          {feed.space.description && (
+            <p style={{ margin: "2px 0 0", fontSize: 13, color: t.muted }}>{feed.space.description}</p>
+          )}
+          {feed.memberCount != null && (
+            <p style={{ margin: "2px 0 0", fontSize: 12, color: t.muted }}>
+              {Number(feed.memberCount)} {Number(feed.memberCount) === 1 ? "member" : "members"}
+            </p>
+          )}
+        </div>
+
+        {/* Search toggle only — the input itself is a full-width bar below the
+            header (see below) so it never squeezes the title on a narrow column. */}
+        <button
+          onClick={() => (searchOpen ? closeSearch() : setSearchOpen(true))}
+          aria-label={searchOpen ? "Close search" : "Search this space"}
+          aria-expanded={searchOpen}
+          title="Search this space"
+          style={iconButton({
+            background: searchOpen ? `${t.primary}1a` : "transparent",
+            color: searchOpen ? t.primary : t.text,
+          })}
+        >
+          {searchOpen ? <X size={15} /> : <Search size={15} />}
+        </button>
+
+        {feed.isJoined && (
+          <button
+            onClick={() => !feed.joinPending && feed.leave()}
+            title="Leave this space (stops new-post notifications)"
+            style={{
+              flexShrink: 0,
+              border: `1px solid ${t.border}`,
+              borderRadius: 999,
+              background: "transparent",
+              color: t.text,
+              fontSize: 12,
+              fontWeight: 600,
+              padding: "5px 14px",
+              cursor: feed.joinPending ? "default" : "pointer",
+              opacity: feed.joinPending ? 0.6 : 1,
+            }}
+          >
+            Joined
+          </button>
+        )}
+      </header>
+
+      {/* Full-width search bar — lives below the header so it never distorts
+          the title row; focus lifts a soft primary ring. */}
+      {searchOpen && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            gap: 10,
+            width: "100%",
+            padding: "10px 14px",
+            borderRadius: 999,
+            background: t.surface,
+            border: `1px solid ${searchFocused ? t.primary : t.border}`,
+            boxShadow: searchFocused ? `0 0 0 3px ${t.primary}22` : "none",
+            transition: "border-color .15s, box-shadow .15s",
+            animation: "forgeCommunitySearchIn .18s ease",
+          }}
+        >
+          <Search size={16} style={{ color: searchFocused ? t.primary : t.muted, flexShrink: 0 }} />
+          <input
+            autoFocus
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            onFocus={() => setSearchFocused(true)}
+            onBlur={() => setSearchFocused(false)}
+            onKeyDown={(e) => {
+              if (e.key === "Escape") closeSearch();
+            }}
+            placeholder="Search this space…"
+            style={{
+              flex: 1,
+              minWidth: 0,
+              border: "none",
+              outline: "none",
+              background: "transparent",
+              color: t.text,
+              fontSize: 14,
+            }}
+          />
+          {query && (
+            <button
+              onClick={() => setQuery("")}
+              aria-label="Clear search"
+              style={iconButton({ width: 22, height: 22, border: "none", color: t.muted })}
+            >
+              <X size={14} />
+            </button>
+          )}
+        </div>
+      )}
+
+      {/* Un-joined viewers can still read + post (tier access governs that) —
+          the banner nudges them to opt into new-post notifications. */}
+      {!feed.isJoined && (
+        <div
+          style={{
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: 10,
+            border: `1px solid ${t.primary}33`,
+            background: `${t.primary}0d`,
+            borderRadius: t.cornerRadius,
+            padding: "8px 12px",
+          }}
+        >
+          <span style={{ fontSize: 13, color: t.text }}>Join this space to get notified about new posts.</span>
+          <button
+            onClick={() => !feed.joinPending && feed.join()}
+            style={{
+              flexShrink: 0,
+              border: "none",
+              borderRadius: 999,
+              background: t.primary,
+              color: t.textPrimary,
+              fontSize: 12,
+              fontWeight: 600,
+              padding: "5px 14px",
+              cursor: feed.joinPending ? "default" : "pointer",
+              opacity: feed.joinPending ? 0.6 : 1,
+            }}
+          >
+            Join
+          </button>
+        </div>
+      )}
+
+      {/* Composer — hidden until toggled; behavior/props identical to before. */}
+      {composerOpen && (
+        <div style={{ position: "relative" }}>
+          <CommunityComposer
+            withTitle={isForum}
+            placeholder={isForum ? "Start a discussion…" : "Share something with the community…"}
+            submitLabel={isForum ? "Start discussion" : "Post"}
+            compact={!isForum}
+            onSubmit={async (input) => {
+              await feed.createPost.mutateAsync(input);
+              setComposerOpen(false);
+            }}
+          />
+          <button
+            onClick={() => setComposerOpen(false)}
+            aria-label="Close composer"
+            title="Close composer"
+            style={{
+              position: "absolute",
+              top: 8,
+              right: 8,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 26,
+              height: 26,
+              borderRadius: 999,
+              border: "none",
+              background: "transparent",
+              color: t.muted,
+              cursor: "pointer",
+            }}
+          >
+            <X size={15} />
+          </button>
+        </div>
+      )}
+
+      {/* While searching, results replace the feed; clearing returns to it. */}
+      {searching ? (
+        <SearchResults
+          results={search.data}
+          // Treat the debounce window (query typed but not yet requested) as
+          // loading so we never flash "no matches" before the request fires.
+          loading={search.isLoading || search.isFetching || debouncedQuery !== trimmed}
+          query={debouncedQuery || trimmed}
+          isForum={isForum}
+          onOpenPost={onOpenPost}
+          spaceId={feed.space.id}
+        />
+      ) : feed.posts.length === 0 ? (
+        <div
+          style={{
+            border,
+            borderRadius: t.cornerRadius,
+            padding: "44px 24px",
+            textAlign: "center",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 6,
+          }}
+        >
+          <div
+            style={{
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: 48,
+              height: 48,
+              borderRadius: 999,
+              background: `${t.primary}14`,
+              color: t.primary,
+              marginBottom: 6,
+            }}
+          >
+            <MessageSquarePlus size={22} />
+          </div>
+          <div style={{ fontSize: 16, fontWeight: 600, color: t.text }}>
+            {isForum ? "No discussions yet" : "No posts yet"}
+          </div>
+          <div style={{ fontSize: 13, color: t.muted, maxWidth: 300 }}>
+            {isForum
+              ? "Kick things off — start the first discussion in this space."
+              : "Be the first to share something with the community."}
+          </div>
+          <button
+            onClick={() => setComposerOpen(true)}
+            style={{
+              marginTop: 10,
+              border: "none",
+              borderRadius: 999,
+              background: t.primary,
+              color: t.textPrimary,
+              fontSize: 13,
+              fontWeight: 600,
+              padding: "8px 18px",
+              cursor: "pointer",
+            }}
+          >
+            {isForum ? "Start a discussion" : "Write the first post"}
+          </button>
+        </div>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: isForum ? 8 : 14 }}>
+          {feed.posts.map((post) => (
+            <CommunityPostCard
+              key={post.id}
+              post={post}
+              variant={isForum ? "forum" : "feed"}
+              onOpen={onOpenPost}
+              onOpenProfile={onOpenProfile}
+              onReact={(emoji) => feed.react(post.id, emoji)}
+            />
+          ))}
+        </div>
+      )}
+
+      {!searching && feed.hasMore && (
+        <button
+          onClick={() => feed.fetchNextPage()}
+          style={{
+            alignSelf: "center",
+            background: "none",
+            border,
+            borderRadius: t.cornerRadius,
+            padding: "6px 14px",
+            cursor: "pointer",
+            color: t.text,
+            fontSize: 13,
+          }}
+        >
+          Load more
+        </button>
+      )}
+    </div>
+  );
+}
+
+/**
+ * In-space search results — post matches (title + snippet) that navigate to the
+ * thread via onOpenPost, and reply matches surfaced by their parent post. Search
+ * rows are lean FTS projections, so we hand onOpenPost a minimal post shape
+ * (callers route by id).
+ */
+function SearchResults({
+  results,
+  loading,
+  query,
+  isForum,
+  onOpenPost,
+  spaceId,
+}: {
+  results: CommunitySearchResults | undefined;
+  loading: boolean;
+  query: string;
+  isForum: boolean;
+  onOpenPost: (post: CommunityPost) => void;
+  spaceId: string;
+}) {
+  const t = useThemeTokens();
+  const border = `1px solid ${t.border}`;
+
+  if (loading) return <Loading />;
+
+  const posts = results?.posts ?? [];
+  const replies = results?.replies ?? [];
+
+  if (posts.length === 0 && replies.length === 0) {
+    return (
+      <div style={{ border, borderRadius: t.cornerRadius, padding: 28, textAlign: "center", color: t.muted }}>
+        No matches for “{query}”.
+      </div>
+    );
+  }
+
+  const snippet = (text: string | null, len = 140) => {
+    const clean = (text ?? "").replace(/\s+/g, " ").trim();
+    return clean.length > len ? clean.slice(0, len) + "…" : clean;
+  };
+
+  const openById = (id: string, title: string | null, bodyText: string | null) =>
+    // Minimal post shape — the FTS row carries no engagement/media; callers only
+    // read the id to route, and the thread view refetches the full post.
+    onOpenPost({
+      id,
+      spaceId,
+      title,
+      bodyText,
+      profileId: "",
+      authorAccountId: "",
+      body: null,
+      isPinned: false,
+      isLocked: false,
+      replyCount: 0,
+      reactionCount: 0,
+      lastActivityAt: null,
+      createdAt: new Date().toISOString(),
+      author: null,
+      media: [],
+    });
+
+  const rowStyle: CSSProperties = {
+    textAlign: "left",
+    width: "100%",
+    border,
+    borderRadius: t.cornerRadius,
+    background: t.surface,
+    padding: "12px 14px",
+    cursor: "pointer",
+    color: t.text,
+    display: "flex",
+    flexDirection: "column",
+    gap: 4,
+  };
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: isForum ? 8 : 10 }}>
+      {posts.map((p) => (
+        <button key={`post-${p.id}`} onClick={() => openById(p.id, p.title, p.bodyText)} style={rowStyle}>
+          <span style={{ fontWeight: 700, fontSize: 15 }}>{p.title || snippet(p.bodyText, 60) || "Untitled"}</span>
+          {p.bodyText && (
+            <span style={{ fontSize: 13, color: t.muted }}>{snippet(p.bodyText)}</span>
+          )}
+        </button>
+      ))}
+      {replies.map((r) => (
+        <button key={`reply-${r.id}`} onClick={() => openById(r.postId, r.postTitle, null)} style={rowStyle}>
+          <span style={{ fontSize: 12, color: t.muted }}>Reply in “{r.postTitle || "a discussion"}”</span>
+          {r.bodyText && <span style={{ fontSize: 13, color: t.text }}>{snippet(r.bodyText)}</span>}
+        </button>
+      ))}
+    </div>
+  );
+}

package/src/ui/styled/community/CommunityLeaderboard.tsx

@@ -0,0 +1,109 @@
+import { useState } from "react";
+import { Trophy } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { usePublicAuth } from "../../../contexts/PublicAuthContext";
+import {
+  communityMemberName,
+  useCommunityLeaderboard,
+  type CommunityLeaderboardPeriod,
+} from "../../../data/queries/useCommunity";
+import { Loading } from "../Loading";
+import { LevelBadge, MemberAvatar } from "./MemberAvatar";
+
+const PERIODS: { value: CommunityLeaderboardPeriod; label: string }[] = [
+  { value: "7", label: "This week" },
+  { value: "30", label: "This month" },
+  { value: "all", label: "All time" },
+];
+
+export interface CommunityLeaderboardProps {
+  onOpenProfile?: (accountId: string) => void;
+}
+
+/** The points leaderboard with 7-day / 30-day / all-time tabs. */
+export function CommunityLeaderboard({ onOpenProfile }: CommunityLeaderboardProps) {
+  const t = useThemeTokens();
+  const { user } = usePublicAuth();
+  const [period, setPeriod] = useState<CommunityLeaderboardPeriod>("7");
+  const { data: entries = [], isLoading } = useCommunityLeaderboard(period);
+  const border = `1px solid ${t.border}`;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 10, flexWrap: "wrap" }}>
+        <h2 style={{ margin: 0, fontSize: 18, fontFamily: t.headingFontFamily, color: t.text, display: "flex", alignItems: "center", gap: 8 }}>
+          <Trophy size={18} style={{ color: t.primary }} /> Leaderboard
+        </h2>
+        <div style={{ display: "flex", gap: 6 }}>
+          {PERIODS.map((p) => {
+            const active = p.value === period;
+            return (
+              <button
+                key={p.value}
+                onClick={() => setPeriod(p.value)}
+                style={{
+                  background: active ? t.primary : "transparent",
+                  color: active ? t.textPrimary : t.text,
+                  border: active ? "none" : border,
+                  borderRadius: 999,
+                  padding: "4px 12px",
+                  fontSize: 13,
+                  fontWeight: 600,
+                  cursor: "pointer",
+                }}
+              >
+                {p.label}
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {isLoading ? (
+        <Loading />
+      ) : entries.length === 0 ? (
+        <div style={{ border, borderRadius: t.cornerRadius, padding: 28, textAlign: "center", color: t.muted }}>
+          No activity in this period yet.
+        </div>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {entries.map((entry, i) => {
+            const isMe = entry.accountId === user?.id;
+            const medal = i === 0 ? "🥇" : i === 1 ? "🥈" : i === 2 ? "🥉" : null;
+            return (
+              <div
+                key={entry.accountId}
+                onClick={() => onOpenProfile?.(entry.accountId)}
+                role={onOpenProfile ? "button" : undefined}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 12,
+                  border: `1px solid ${isMe ? `${t.primary}66` : t.border}`,
+                  background: isMe ? `${t.primary}0d` : t.surface,
+                  borderRadius: t.cornerRadius,
+                  padding: "10px 14px",
+                  cursor: onOpenProfile ? "pointer" : "default",
+                }}
+              >
+                <span style={{ width: 28, textAlign: "center", fontWeight: 700, color: t.muted, fontSize: medal ? 18 : 14 }}>
+                  {medal ?? i + 1}
+                </span>
+                <MemberAvatar member={entry} size={34} />
+                <span style={{ flex: 1, minWidth: 0, display: "flex", alignItems: "center", gap: 6 }}>
+                  <span style={{ fontWeight: 600, color: t.text, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
+                    {communityMemberName(entry)}
+                    {isMe ? " (you)" : ""}
+                  </span>
+                  <LevelBadge level={entry.level} />
+                </span>
+                <span style={{ fontWeight: 800, color: t.primary }}>{entry.points}</span>
+                <span style={{ fontSize: 11, color: t.muted }}>pts</span>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}