@tribe-nest/forge 3.60.0 → 3.61.0

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>
+  );
+}