@tribe-nest/forge 3.59.0 → 3.61.0

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

@@ -1,8 +1,10 @@
 import { useEffect, useState, type CSSProperties } from "react";
-import { MessageSquarePlus, Plus, Search, X } from "lucide-react";
+import { Lock, MessageSquarePlus, Plus, Search, X } from "lucide-react";
+import { useForgeT } from "../../../i18n";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
 import { useCommunitySpaceFeed } from "../../headless/community/useCommunitySpaceFeed";
 import { useCommunitySearch, type CommunityPost, type CommunitySearchResults } from "../../../data/queries/useCommunity";
+import { useCommunityAgent } from "../../../data/queries/useCommunityAgent";
 import { Loading } from "../Loading";
 import { CommunityComposer } from "./CommunityComposer";
 import { CommunityPostCard } from "./CommunityPostCard";
@@ -25,7 +27,10 @@ export interface CommunityFeedProps {
  */
 export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, onBack }: CommunityFeedProps) {
   const t = useThemeTokens();
+  const tr = useForgeT();
   const feed = useCommunitySpaceFeed(idOrSlug);
+  // The community AI, for the name on its "thinking" line.
+  const agentInfo = useCommunityAgent();
   const border = `1px solid ${t.border}`;
 
   // Composer is closed by default. This drives the composer's `open` prop, and
@@ -59,6 +64,48 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
     );
   }
 
+  if (feed.levelLocked) {
+    return (
+      <div
+        data-testid="community-feed-level-locked"
+        style={{
+          border,
+          borderRadius: t.cornerRadius,
+          padding: 32,
+          textAlign: "center",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 8,
+          color: t.text,
+        }}
+      >
+        <Lock size={22} style={{ color: t.muted }} aria-hidden />
+        <div style={{ fontSize: 16, fontWeight: 600 }}>{feed.space.name}</div>
+        <div style={{ fontSize: 14, color: t.muted }}>
+          {tr("forge.community_feed.unlocks_at_level", { level: feed.minLevel })}
+        </div>
+        {onBack && (
+          <button
+            onClick={onBack}
+            style={{
+              marginTop: 6,
+              background: "none",
+              border,
+              borderRadius: t.cornerRadius,
+              padding: "6px 14px",
+              cursor: "pointer",
+              color: t.text,
+              fontSize: 13,
+            }}
+          >
+            {tr("forge.community_feed.back_to_spaces")}
+          </button>
+        )}
+      </div>
+    );
+  }
+
   const isForum = feed.space.type === "forum";
 
   const iconButton = (extra?: CSSProperties): CSSProperties => ({
@@ -257,6 +304,7 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
           and the empty-state button drive the same state through `open`. */}
       <CommunityComposer
         collapsible
+        allowPoll
         open={composerOpen}
         onOpenChange={setComposerOpen}
         withTitle={isForum}
@@ -344,6 +392,7 @@ export function CommunityFeed({ spaceId: idOrSlug, onOpenPost, onOpenProfile, on
               onOpen={onOpenPost}
               onOpenProfile={onOpenProfile}
               onReact={(emoji) => feed.react(post.id, emoji)}
+              agentThinking={feed.isAgentThinking(post.id) ? { name: agentInfo.agent?.name } : null}
             />
           ))}
         </div>

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

@@ -0,0 +1,159 @@
+import { useState, type CSSProperties } from "react";
+import { Play } from "lucide-react";
+import { useForgeT } from "../../../i18n";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import type { CommunityLinkPreview as CommunityLinkPreviewData } from "../../../data/queries/useCommunity";
+import { autoplayEmbedUrl, linkPreviewDisplay, linkPreviewHost } from "../../headless/community/linkPreview";
+
+export interface CommunityLinkPreviewProps {
+  preview: CommunityLinkPreviewData | null | undefined;
+  className?: string;
+  style?: CSSProperties;
+}
+
+/** A link out of the community: a stranger's page, so it gets no referrer, no ranking credit and no opener. */
+const LINK_REL = "noopener noreferrer nofollow ugc";
+
+/**
+ * The card under a post for its first link. A plain link shows its image, site
+ * name, title and description, and opens in a new tab. A YouTube, Vimeo or Loom
+ * video shows its thumbnail and a play button, and the player is only loaded
+ * once the member presses play, so reading the feed tells no video site who is
+ * reading it. A video from anywhere else is shown as a link card.
+ */
+export function CommunityLinkPreview({ preview, className, style }: CommunityLinkPreviewProps) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const [playing, setPlaying] = useState(false);
+  const display = linkPreviewDisplay(preview);
+  if (!preview || !display) return null;
+
+  const siteName = preview.siteName?.trim() || linkPreviewHost(display.href);
+  const title = preview.title?.trim() || null;
+  const frame: CSSProperties = {
+    marginTop: 12,
+    border: `1px solid ${t.border}`,
+    borderRadius: t.cornerRadius,
+    overflow: "hidden",
+    background: t.surface,
+    ...style,
+  };
+
+  if (display.kind === "video") {
+    return (
+      <div data-testid="community-link-video" className={className} style={frame}>
+        <div style={{ position: "relative", width: "100%", aspectRatio: "16 / 9", background: t.background }}>
+          {playing ? (
+            <iframe
+              data-testid="community-link-video-frame"
+              src={autoplayEmbedUrl(display.embedUrl)}
+              title={title ?? tr("forge.community_link_preview.video_frame")}
+              loading="lazy"
+              allow="autoplay; fullscreen; picture-in-picture"
+              allowFullScreen
+              referrerPolicy="strict-origin-when-cross-origin"
+              style={{ position: "absolute", inset: 0, width: "100%", height: "100%", border: 0 }}
+            />
+          ) : (
+            <button
+              type="button"
+              data-testid="community-link-video-play"
+              onClick={() => setPlaying(true)}
+              aria-label={title ? tr("forge.community_link_preview.play_title", { title }) : tr("forge.community_link_preview.play")}
+              style={{
+                position: "absolute",
+                inset: 0,
+                width: "100%",
+                height: "100%",
+                padding: 0,
+                border: "none",
+                cursor: "pointer",
+                background: "transparent",
+              }}
+            >
+              {display.imageUrl && (
+                <img
+                  src={display.imageUrl}
+                  alt=""
+                  loading="lazy"
+                  referrerPolicy="no-referrer"
+                  style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
+                />
+              )}
+              <span
+                aria-hidden
+                style={{
+                  position: "absolute",
+                  top: "50%",
+                  left: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: 60,
+                  height: 60,
+                  borderRadius: 999,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  background: t.primary,
+                  color: t.textPrimary,
+                }}
+              >
+                <Play size={26} fill="currentColor" />
+              </span>
+            </button>
+          )}
+        </div>
+        {(title || siteName) && (
+          <a
+            href={display.href}
+            target="_blank"
+            rel={LINK_REL}
+            style={{ display: "block", padding: "10px 14px", textDecoration: "none", color: t.text }}
+          >
+            {siteName && <span style={{ display: "block", fontSize: 12, color: t.muted }}>{siteName}</span>}
+            {title && <span style={{ display: "block", fontSize: 14, fontWeight: 600 }}>{title}</span>}
+          </a>
+        )}
+      </div>
+    );
+  }
+
+  return (
+    <a
+      data-testid="community-link-card"
+      href={display.href}
+      target="_blank"
+      rel={LINK_REL}
+      className={className}
+      style={{ ...frame, display: "block", textDecoration: "none", color: t.text }}
+    >
+      {display.imageUrl && (
+        <img
+          src={display.imageUrl}
+          alt=""
+          loading="lazy"
+          referrerPolicy="no-referrer"
+          style={{ display: "block", width: "100%", maxHeight: 280, objectFit: "cover", background: t.background }}
+        />
+      )}
+      <span style={{ display: "flex", flexDirection: "column", gap: 3, padding: "10px 14px" }}>
+        {siteName && <span style={{ fontSize: 12, color: t.muted }}>{siteName}</span>}
+        <span style={{ fontSize: 14, fontWeight: 600, overflowWrap: "anywhere" }}>{title ?? display.href}</span>
+        {preview.description?.trim() && (
+          <span
+            style={{
+              fontSize: 13,
+              color: t.muted,
+              display: "-webkit-box",
+              WebkitLineClamp: 2,
+              WebkitBoxOrient: "vertical",
+              overflow: "hidden",
+            }}
+          >
+            {preview.description.trim()}
+          </span>
+        )}
+        <span className="fg:sr-only">{tr("forge.community_link_preview.new_tab")}</span>
+      </span>
+    </a>
+  );
+}

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

@@ -0,0 +1,171 @@
+import { useEffect, useRef, useState } from "react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  globeAnglesFor,
+  memberGlobeMarkers,
+  type MemberGlobePoint,
+} from "../../headless/community/useCommunityMembers";
+
+export interface CommunityMemberGlobeProps {
+  points: MemberGlobePoint[];
+  /** Called when WebGL is unavailable, so the caller can show the country list instead. */
+  onUnsupported?: () => void;
+  /** Accessible name for the drawing. */
+  label: string;
+  className?: string;
+}
+
+/** A theme colour as cobe's 0..1 RGB triple. Falls back to mid grey. */
+function rgb01(color: string): [number, number, number] {
+  const hex = color.trim().replace(/^#/, "");
+  const full = hex.length === 3 ? hex.replace(/./g, (c) => c + c) : hex.slice(0, 6);
+  const n = Number.parseInt(full, 16);
+  if (!/^[0-9a-f]{6}$/i.test(full) || Number.isNaN(n)) return [0.5, 0.5, 0.5];
+  return [((n >> 16) & 255) / 255, ((n >> 8) & 255) / 255, (n & 255) / 255];
+}
+
+/** Perceived lightness 0..1, to decide whether the globe sits on a dark page. */
+function lightness([r, g, b]: [number, number, number]): number {
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+type CobeGlobe = { update: (state: Record<string, unknown>) => void; destroy: () => void };
+
+/**
+ * A slowly turning dotted globe with one dot per country members are in, sized
+ * by how many. Country level only: members choose a country, never a place.
+ * Drag to turn it. It starts facing the biggest country, stops turning for
+ * visitors who asked for reduced motion, and stops drawing while out of view.
+ * Colours come from the theme.
+ *
+ * `cobe` is loaded with a dynamic `import()` from the effect, so nothing of
+ * WebGL is on the server render path. cobe v2 has no render loop of its own;
+ * this drives it with `update()`, as the admin analytics globe does.
+ */
+export function CommunityMemberGlobe({ points, onUnsupported, label, className }: CommunityMemberGlobeProps) {
+  const t = useThemeTokens();
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const globeRef = useRef<CobeGlobe | null>(null);
+  const drag = useRef<{ startX: number; startPhi: number } | null>(null);
+  const phiRef = useRef(0);
+  const thetaRef = useRef(0.3);
+  const pointsRef = useRef(points);
+  pointsRef.current = points;
+  const [ready, setReady] = useState(false);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    let cancelled = false;
+    let cleanup: (() => void) | null = null;
+
+    (async () => {
+      let createGlobe: (canvas: HTMLCanvasElement, opts: Record<string, unknown>) => CobeGlobe;
+      try {
+        createGlobe = (await import("cobe")).default as unknown as typeof createGlobe;
+      } catch {
+        if (!cancelled) onUnsupported?.();
+        return;
+      }
+      if (cancelled) return;
+
+      const background = rgb01(t.background);
+      const dark = lightness(background) < 0.5;
+      const reduceMotion = window.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      let size = canvas.offsetWidth || 400;
+
+      const biggest = pointsRef.current[0];
+      if (biggest) {
+        const [phi, theta] = globeAnglesFor(biggest.latitude, biggest.longitude);
+        phiRef.current = phi;
+        thetaRef.current = Math.max(-0.6, Math.min(0.6, theta));
+      }
+
+      let globe: CobeGlobe;
+      try {
+        globe = createGlobe(canvas, {
+          devicePixelRatio: dpr,
+          width: size * dpr,
+          height: size * dpr,
+          phi: phiRef.current,
+          theta: thetaRef.current,
+          dark: dark ? 1 : 0,
+          diffuse: 1.2,
+          mapSamples: 16000,
+          mapBrightness: dark ? 6 : 1.8,
+          baseColor: dark ? [0.3, 0.3, 0.3] : [1, 1, 1],
+          markerColor: rgb01(t.primary),
+          glowColor: background,
+          markers: memberGlobeMarkers(pointsRef.current),
+          markerElevation: 0.02,
+        });
+      } catch {
+        onUnsupported?.();
+        return;
+      }
+      globeRef.current = globe;
+      setReady(true);
+
+      let visible = true;
+      let frame = 0;
+      const tick = () => {
+        if (visible) {
+          if (!drag.current && !reduceMotion) phiRef.current += 0.0025;
+          globe.update({ phi: phiRef.current, theta: thetaRef.current, width: size * dpr, height: size * dpr });
+        }
+        frame = requestAnimationFrame(tick);
+      };
+      frame = requestAnimationFrame(tick);
+
+      const io =
+        typeof IntersectionObserver !== "undefined"
+          ? new IntersectionObserver(([entry]) => (visible = entry.isIntersecting))
+          : null;
+      io?.observe(canvas);
+      const ro =
+        typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => (size = canvas.offsetWidth || size)) : null;
+      ro?.observe(canvas);
+
+      cleanup = () => {
+        cancelAnimationFrame(frame);
+        io?.disconnect();
+        ro?.disconnect();
+        globe.destroy();
+        globeRef.current = null;
+      };
+    })();
+
+    return () => {
+      cancelled = true;
+      cleanup?.();
+    };
+    // Built once per theme; markers are pushed in by the effect below.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [t.background, t.primary]);
+
+  useEffect(() => {
+    globeRef.current?.update({ markers: memberGlobeMarkers(points) });
+  }, [points]);
+
+  return (
+    <canvas
+      ref={canvasRef}
+      role="img"
+      aria-label={label}
+      data-testid="community-member-globe"
+      className={className ?? "fg:aspect-square fg:w-full fg:max-w-[420px] fg:cursor-grab fg:touch-none"}
+      style={{ opacity: ready ? 1 : 0, transition: "opacity 0.7s" }}
+      onPointerDown={(e) => {
+        drag.current = { startX: e.clientX, startPhi: phiRef.current };
+        e.currentTarget.setPointerCapture?.(e.pointerId);
+      }}
+      onPointerMove={(e) => {
+        if (!drag.current) return;
+        phiRef.current = drag.current.startPhi + (e.clientX - drag.current.startX) / 150;
+      }}
+      onPointerUp={() => (drag.current = null)}
+      onPointerCancel={() => (drag.current = null)}
+    />
+  );
+}

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

@@ -1,5 +1,8 @@
-import { useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { useForgeLocale, useForgeT } from "../../../i18n";
+import { countryOptions } from "../../headless/community/countries";
+import { CallHelpHint } from "../../media/CallHelpHint";
 import { usePublicAuth } from "../../../contexts/PublicAuthContext";
 import {
   communityMemberName,
@@ -29,8 +32,9 @@ export interface CommunityMemberProfileProps {
   onBack?: () => void;
 }
 
-/** Member profile: avatar, bio, points/level, recent activity — plus settings
- * (display name, bio, avatar, digest cadence) on your own profile. */
+/** Member profile: avatar, bio, points/level, recent activity. On your own
+ * profile, settings too: display name, bio, avatar, directory and map
+ * visibility, country and city, and digest cadence. */
 export function CommunityMemberProfile({ accountId, onOpenPost, onBack }: CommunityMemberProfileProps) {
   const t = useThemeTokens();
   const { user } = usePublicAuth();
@@ -163,8 +167,13 @@ function ProfileSettings({ profile }: { profile: MemberProfileData }) {
   const upload = useCommunityAttachmentUpload();
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const countries = useMemo(() => countryOptions(locale), [locale]);
   const [displayName, setDisplayName] = useState(profile.displayName ?? "");
   const [bio, setBio] = useState(profile.bio ?? "");
+  const [city, setCity] = useState(profile.city ?? "");
+  const [countryCode, setCountryCode] = useState(profile.countryCode ?? "");
   const [saved, setSaved] = useState(false);
 
   const border = `1px solid ${t.border}`;
@@ -180,12 +189,21 @@ function ProfileSettings({ profile }: { profile: MemberProfileData }) {
     fontSize: 14,
   };
 
-  const save = (extra: Partial<{ avatarUrl: string | null; digestCadence: CommunityDigestCadence }> = {}) => {
+  const save = (
+    extra: Partial<{
+      avatarUrl: string | null;
+      digestCadence: CommunityDigestCadence;
+      showInDirectory: boolean;
+      showOnMap: boolean;
+    }> = {},
+  ) => {
     setSaved(false);
     update.mutate(
       {
         displayName: displayName.trim() || null,
         bio: bio.trim() || null,
+        city: city.trim() || null,
+        countryCode: countryCode || null,
         ...extra,
       },
       { onSuccess: () => setSaved(true) },
@@ -242,6 +260,59 @@ function ProfileSettings({ profile }: { profile: MemberProfileData }) {
         {upload.error && <span style={{ fontSize: 12, color: "#dc2626" }}>{upload.error}</span>}
       </div>
 
+      <fieldset
+        data-testid="community-profile-directory-settings"
+        style={{ border: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}
+      >
+        <legend style={{ fontSize: 13, color: t.muted, padding: 0, marginBottom: 4 }}>
+          {tr("forge.community_member_profile.directory_legend")}
+        </legend>
+        <SettingSwitch
+          label={tr("forge.community_member_profile.show_in_directory")}
+          checked={profile.showInDirectory !== false}
+          disabled={update.isPending}
+          onChange={(value) => save({ showInDirectory: value })}
+          help={
+            <CallHelpHint label={tr("forge.community_member_profile.show_in_directory_help_label")}>
+              {tr("forge.community_member_profile.show_in_directory_help")}
+            </CallHelpHint>
+          }
+        />
+        <SettingSwitch
+          label={tr("forge.community_member_profile.show_on_map")}
+          checked={profile.showOnMap === true}
+          disabled={update.isPending}
+          onChange={(value) => save({ showOnMap: value })}
+          help={
+            <CallHelpHint label={tr("forge.community_member_profile.show_on_map_help_label")}>
+              {tr("forge.community_member_profile.show_on_map_help")}
+            </CallHelpHint>
+          }
+        />
+        <div className="fg:flex fg:flex-col fg:gap-3 fg:sm:flex-row">
+          <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, color: t.muted, flex: 1 }}>
+            {tr("forge.community_member_profile.country")}
+            <select value={countryCode} onChange={(e) => setCountryCode(e.target.value)} style={inputStyle}>
+              <option value="">{tr("forge.community_member_profile.country_none")}</option>
+              {countries.map((country) => (
+                <option key={country.code} value={country.code}>
+                  {country.name}
+                </option>
+              ))}
+            </select>
+          </label>
+          <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, color: t.muted, flex: 1 }}>
+            <span style={{ display: "inline-flex", alignItems: "center", gap: 6 }}>
+              {tr("forge.community_member_profile.city")}
+              <CallHelpHint label={tr("forge.community_member_profile.city_help_label")}>
+                {tr("forge.community_member_profile.city_help")}
+              </CallHelpHint>
+            </span>
+            <input value={city} onChange={(e) => setCity(e.target.value)} maxLength={80} style={inputStyle} />
+          </label>
+        </div>
+      </fieldset>
+
       <fieldset style={{ border: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 6 }}>
         <legend style={{ fontSize: 13, color: t.muted, padding: 0, marginBottom: 4 }}>Email digest</legend>
         {DIGEST_OPTIONS.map((opt) => (
@@ -279,7 +350,69 @@ function ProfileSettings({ profile }: { profile: MemberProfileData }) {
           {update.isPending ? "Saving…" : "Save"}
         </button>
         {saved && !update.isPending && <span style={{ fontSize: 13, color: t.muted }}>Saved ✓</span>}
+        {update.isError && (
+          <span role="alert" style={{ fontSize: 13, color: t.text, fontWeight: 600 }}>
+            {tr("forge.community_member_profile.save_error")}
+          </span>
+        )}
       </div>
     </div>
   );
 }
+
+/** An on/off setting as an accessible switch, with its explanation behind a `?`. */
+function SettingSwitch({
+  label,
+  checked,
+  disabled,
+  onChange,
+  help,
+}: {
+  label: string;
+  checked: boolean;
+  disabled?: boolean;
+  onChange: (value: boolean) => void;
+  help?: React.ReactNode;
+}) {
+  const t = useThemeTokens();
+  return (
+    <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+      <button
+        type="button"
+        role="switch"
+        aria-checked={checked}
+        aria-label={label}
+        disabled={disabled}
+        onClick={() => onChange(!checked)}
+        style={{
+          position: "relative",
+          width: 38,
+          height: 22,
+          flexShrink: 0,
+          borderRadius: 999,
+          border: "none",
+          padding: 0,
+          cursor: disabled ? "wait" : "pointer",
+          background: checked ? t.primary : t.border,
+          transition: "background 0.15s",
+        }}
+      >
+        <span
+          aria-hidden
+          style={{
+            position: "absolute",
+            top: 3,
+            left: checked ? 19 : 3,
+            width: 16,
+            height: 16,
+            borderRadius: "50%",
+            background: checked ? t.textPrimary : t.background,
+            transition: "left 0.15s",
+          }}
+        />
+      </button>
+      <span style={{ fontSize: 14, color: t.text }}>{label}</span>
+      {help}
+    </div>
+  );
+}