@tribe-nest/forge 1.13.0

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

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { formatBytes } from "../../headless/chat/attachmentKind";
+import type { CommunityMediaItem } from "../../../data/queries/useCommunity";
+
+/**
+ * Renders a post/reply's attached media (from media_mappings) — images open a
+ * lightbox, video/audio get players, documents/other get a download card.
+ * Same presentation rules as chat's <ChatAttachments/>.
+ */
+export function CommunityMediaGallery({ media }: { media: CommunityMediaItem[] }) {
+  const t = useThemeTokens();
+  const [lightbox, setLightbox] = useState<string | null>(null);
+  if (!media?.length) return null;
+
+  const images = media.filter((m) => m.type === "image");
+  const rest = media.filter((m) => m.type !== "image");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 8 }}>
+      {images.length > 0 && (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+          {images.map((m) => (
+            <img
+              key={m.id}
+              src={m.url}
+              alt={m.name ?? ""}
+              onClick={() => setLightbox(m.url)}
+              style={{
+                maxWidth: images.length > 1 ? 180 : 340,
+                maxHeight: images.length > 1 ? 180 : 340,
+                borderRadius: t.cornerRadius,
+                cursor: "zoom-in",
+                objectFit: "cover",
+              }}
+            />
+          ))}
+        </div>
+      )}
+
+      {rest.map((m) => {
+        if (m.type === "video") {
+          return (
+            <video key={m.id} src={m.url} controls preload="metadata" style={{ maxWidth: 340, borderRadius: t.cornerRadius }} />
+          );
+        }
+        if (m.type === "audio") {
+          return (
+            <div key={m.id} style={{ display: "flex", flexDirection: "column", gap: 4, maxWidth: 340 }}>
+              {m.name && <span style={{ fontSize: 12, color: t.muted }}>{m.name}</span>}
+              <audio src={m.url} controls preload="metadata" style={{ width: "100%" }} />
+            </div>
+          );
+        }
+        return (
+          <div
+            key={m.id}
+            style={{
+              display: "flex",
+              alignItems: "center",
+              gap: 10,
+              padding: "8px 10px",
+              border: `1px solid ${t.border}`,
+              borderRadius: t.cornerRadius,
+              maxWidth: 340,
+            }}
+          >
+            <span style={{ fontSize: 18 }} aria-hidden>
+              📄
+            </span>
+            <div style={{ minWidth: 0, flex: 1 }}>
+              <div style={{ fontSize: 13, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                {m.name ?? "Attachment"}
+              </div>
+              {m.size != null && <div style={{ fontSize: 11, color: t.muted }}>{formatBytes(Number(m.size))}</div>}
+            </div>
+            <a
+              href={m.url}
+              target="_blank"
+              rel="noopener noreferrer"
+              download
+              style={{
+                background: t.primary,
+                color: t.textPrimary,
+                borderRadius: 6,
+                padding: "2px 8px",
+                fontSize: 12,
+                textDecoration: "none",
+              }}
+            >
+              Download
+            </a>
+          </div>
+        );
+      })}
+
+      {lightbox && (
+        <div
+          onClick={() => setLightbox(null)}
+          style={{
+            position: "fixed",
+            inset: 0,
+            background: "rgba(0,0,0,0.8)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            zIndex: 1000,
+            cursor: "zoom-out",
+          }}
+        >
+          <img src={lightbox} alt="" style={{ maxWidth: "90vw", maxHeight: "90vh", objectFit: "contain" }} />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,285 @@
+import { useRef, useState } from "react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { usePublicAuth } from "../../../contexts/PublicAuthContext";
+import {
+  communityMemberName,
+  useCommunityMemberProfile,
+  useMyCommunityProfile,
+  useUpdateMyCommunityProfile,
+  type CommunityDigestCadence,
+  type CommunityMemberProfile as MemberProfileData,
+} from "../../../data/queries/useCommunity";
+import { useCommunityAttachmentUpload } from "../../headless/community/useCommunityAttachmentUpload";
+import { Loading } from "../Loading";
+import { MemberAvatar } from "./MemberAvatar";
+import { timeAgo } from "./util";
+
+const DIGEST_OPTIONS: { value: CommunityDigestCadence; label: string; hint: string }[] = [
+  { value: "daily", label: "Daily digest", hint: "One email a day with what you missed" },
+  { value: "hourly", label: "Hourly digest", hint: "Batched email roughly every hour" },
+  { value: "inapp_only", label: "In-app only", hint: "Notifications stay in your inbox here" },
+  { value: "off", label: "Off", hint: "No notifications at all" },
+];
+
+export interface CommunityMemberProfileProps {
+  /** The member to show. When it's the signed-in member, editing + the email
+   * digest cadence preference are unlocked. */
+  accountId: string;
+  onOpenPost?: (postId: string) => void;
+  onBack?: () => void;
+}
+
+/** Member profile: avatar, bio, points/level, recent activity — plus settings
+ * (display name, bio, avatar, digest cadence) on your own profile. */
+export function CommunityMemberProfile({ accountId, onOpenPost, onBack }: CommunityMemberProfileProps) {
+  const t = useThemeTokens();
+  const { user } = usePublicAuth();
+  const isSelf = user?.id === accountId;
+
+  // `me` also bootstraps the community profile row on first visit.
+  const myProfile = useMyCommunityProfile(isSelf);
+  const otherProfile = useCommunityMemberProfile(isSelf ? undefined : accountId);
+  const profile = isSelf ? myProfile.data : otherProfile.data;
+  const isLoading = isSelf ? myProfile.isLoading : otherProfile.isLoading;
+
+  const border = `1px solid ${t.border}`;
+
+  if (isLoading) return <Loading />;
+  if (!profile) {
+    return (
+      <div style={{ border, borderRadius: t.cornerRadius, padding: 32, textAlign: "center", color: t.muted }}>
+        This member hasn't joined the community yet.
+      </div>
+    );
+  }
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
+      {onBack && (
+        <button
+          onClick={onBack}
+          style={{ alignSelf: "flex-start", background: "none", border: "none", cursor: "pointer", color: t.text, fontSize: 14, padding: 0 }}
+        >
+          ← Back
+        </button>
+      )}
+
+      {/* Identity card */}
+      <div style={{ border, borderRadius: t.cornerRadius, background: t.surface, padding: 18, display: "flex", gap: 14, alignItems: "center" }}>
+        <MemberAvatar member={profile} size={64} />
+        <div style={{ flex: 1, minWidth: 0 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8, flexWrap: "wrap" }}>
+            <h2 style={{ margin: 0, fontSize: 19, fontFamily: t.headingFontFamily, color: t.text }}>
+              {communityMemberName(profile)}
+            </h2>
+            {profile.role === "moderator" && (
+              <span style={{ fontSize: 11, fontWeight: 700, color: t.primary, textTransform: "uppercase" }}>Moderator</span>
+            )}
+          </div>
+          {profile.bio && <p style={{ margin: "6px 0 0", fontSize: 14, color: t.text }}>{profile.bio}</p>}
+          {profile.lastActiveAt && (
+            <p style={{ margin: "4px 0 0", fontSize: 12, color: t.muted }}>Active {timeAgo(profile.lastActiveAt)} ago</p>
+          )}
+        </div>
+        <div style={{ textAlign: "center", flexShrink: 0 }}>
+          <div style={{ fontSize: 22, fontWeight: 800, color: t.primary }}>{profile.points}</div>
+          <div style={{ fontSize: 11, color: t.muted }}>points</div>
+          <div
+            style={{
+              marginTop: 4,
+              background: `${t.primary}1a`,
+              color: t.primary,
+              borderRadius: 999,
+              fontSize: 11,
+              fontWeight: 700,
+              padding: "1px 8px",
+            }}
+          >
+            Level {profile.level}
+          </div>
+        </div>
+      </div>
+
+      {isSelf && <ProfileSettings profile={profile} />}
+
+      {/* Activity */}
+      {(profile.recentPosts?.length || profile.recentReplies?.length) ? (
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          <h3 style={{ margin: 0, fontSize: 15, color: t.text }}>Recent activity</h3>
+          {(profile.recentPosts ?? []).map((p) => (
+            <button
+              key={`post-${p.id}`}
+              onClick={() => onOpenPost?.(p.id)}
+              style={{
+                border,
+                borderRadius: t.cornerRadius,
+                background: t.surface,
+                padding: "10px 12px",
+                textAlign: "left",
+                cursor: onOpenPost ? "pointer" : "default",
+                color: t.text,
+              }}
+            >
+              <div style={{ fontSize: 12, color: t.muted, marginBottom: 2 }}>Posted · {timeAgo(p.createdAt)}</div>
+              <div style={{ fontWeight: 600, fontSize: 14 }}>{p.title || p.bodyText?.slice(0, 100) || "Post"}</div>
+              <div style={{ fontSize: 12, color: t.muted, marginTop: 2 }}>
+                {p.replyCount} replies · {p.reactionCount} reactions
+              </div>
+            </button>
+          ))}
+          {(profile.recentReplies ?? []).map((r) => (
+            <button
+              key={`reply-${r.id}`}
+              onClick={() => onOpenPost?.(r.postId)}
+              style={{
+                border,
+                borderRadius: t.cornerRadius,
+                background: t.surface,
+                padding: "10px 12px",
+                textAlign: "left",
+                cursor: onOpenPost ? "pointer" : "default",
+                color: t.text,
+              }}
+            >
+              <div style={{ fontSize: 12, color: t.muted, marginBottom: 2 }}>
+                Replied{r.postTitle ? ` to "${r.postTitle}"` : ""} · {timeAgo(r.createdAt)}
+              </div>
+              <div style={{ fontSize: 14 }}>{r.bodyText?.slice(0, 140)}</div>
+            </button>
+          ))}
+        </div>
+      ) : (
+        <div style={{ border, borderRadius: t.cornerRadius, padding: 20, textAlign: "center", color: t.muted, fontSize: 14 }}>
+          No activity yet.
+        </div>
+      )}
+    </div>
+  );
+}
+
+function ProfileSettings({ profile }: { profile: MemberProfileData }) {
+  const t = useThemeTokens();
+  const update = useUpdateMyCommunityProfile();
+  const upload = useCommunityAttachmentUpload();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+
+  const [displayName, setDisplayName] = useState(profile.displayName ?? "");
+  const [bio, setBio] = useState(profile.bio ?? "");
+  const [saved, setSaved] = useState(false);
+
+  const border = `1px solid ${t.border}`;
+  const inputStyle: React.CSSProperties = {
+    width: "100%",
+    boxSizing: "border-box",
+    padding: "8px 10px",
+    borderRadius: t.cornerRadius,
+    border,
+    background: t.background,
+    color: t.text,
+    fontFamily: "inherit",
+    fontSize: 14,
+  };
+
+  const save = (extra: Partial<{ avatarUrl: string | null; digestCadence: CommunityDigestCadence }> = {}) => {
+    setSaved(false);
+    update.mutate(
+      {
+        displayName: displayName.trim() || null,
+        bio: bio.trim() || null,
+        ...extra,
+      },
+      { onSuccess: () => setSaved(true) },
+    );
+  };
+
+  const onAvatarPicked = async (files: FileList) => {
+    upload.clear();
+    upload.addFiles([files[0]]);
+    // Upload immediately; addFiles is sync state, uploadAll reads the ref on next tick.
+    setTimeout(async () => {
+      try {
+        const [attachment] = await upload.uploadAll();
+        if (attachment) save({ avatarUrl: attachment.url });
+        upload.clear();
+      } catch {
+        // upload.error carries the message
+      }
+    }, 0);
+  };
+
+  return (
+    <div style={{ border, borderRadius: t.cornerRadius, background: t.surface, padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
+      <h3 style={{ margin: 0, fontSize: 15, color: t.text }}>Your community settings</h3>
+
+      <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, color: t.muted }}>
+        Display name
+        <input value={displayName} onChange={(e) => setDisplayName(e.target.value)} maxLength={80} placeholder="How other members see you" style={inputStyle} />
+      </label>
+
+      <label style={{ display: "flex", flexDirection: "column", gap: 4, fontSize: 13, color: t.muted }}>
+        Bio
+        <textarea value={bio} onChange={(e) => setBio(e.target.value)} maxLength={1000} rows={3} placeholder="A line or two about you" style={{ ...inputStyle, resize: "vertical" }} />
+      </label>
+
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          hidden
+          onChange={(e) => {
+            if (e.target.files?.length) onAvatarPicked(e.target.files);
+            e.target.value = "";
+          }}
+        />
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          disabled={upload.isUploading}
+          style={{ background: "none", border, borderRadius: t.cornerRadius, padding: "6px 12px", cursor: "pointer", color: t.text, fontSize: 13 }}
+        >
+          {upload.isUploading ? "Uploading…" : "Change avatar"}
+        </button>
+        {upload.error && <span style={{ fontSize: 12, color: "#dc2626" }}>{upload.error}</span>}
+      </div>
+
+      <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) => (
+          <label key={opt.value} style={{ display: "flex", alignItems: "flex-start", gap: 8, cursor: "pointer", fontSize: 14, color: t.text }}>
+            <input
+              type="radio"
+              name="digest-cadence"
+              checked={profile.digestCadence === opt.value}
+              onChange={() => save({ digestCadence: opt.value })}
+              style={{ marginTop: 3, accentColor: t.primary }}
+            />
+            <span>
+              {opt.label}
+              <span style={{ display: "block", fontSize: 12, color: t.muted }}>{opt.hint}</span>
+            </span>
+          </label>
+        ))}
+      </fieldset>
+
+      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+        <button
+          onClick={() => save()}
+          disabled={update.isPending}
+          style={{
+            background: t.primary,
+            color: t.textPrimary,
+            border: "none",
+            borderRadius: t.cornerRadius,
+            padding: "8px 18px",
+            fontWeight: 600,
+            cursor: update.isPending ? "wait" : "pointer",
+            fontSize: 14,
+          }}
+        >
+          {update.isPending ? "Saving…" : "Save"}
+        </button>
+        {saved && !update.isPending && <span style={{ fontSize: 13, color: t.muted }}>Saved ✓</span>}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,222 @@
+import { AtSign, Bell, Heart, MessageCircle, ShieldAlert, Sparkles } from "lucide-react";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import {
+  useCommunityNotifications,
+  useCommunityUnreadCount,
+  useMarkCommunityNotificationsRead,
+  type CommunityNotificationItem,
+} from "../../../data/queries/useCommunity";
+import { Loading } from "../Loading";
+import { timeAgo } from "./util";
+
+// ── Bell ─────────────────────────────────────────────────────────────────────
+
+export interface CommunityNotificationsBellProps {
+  onClick: () => void;
+  size?: number;
+}
+
+/** Bell button with the unread badge (polled every 30s). */
+export function CommunityNotificationsBell({ onClick, size = 20 }: CommunityNotificationsBellProps) {
+  const t = useThemeTokens();
+  const { data: unread = 0 } = useCommunityUnreadCount();
+
+  return (
+    <button
+      onClick={onClick}
+      aria-label={unread > 0 ? `Notifications (${unread} unread)` : "Notifications"}
+      style={{
+        position: "relative",
+        background: "none",
+        border: `1px solid ${t.border}`,
+        borderRadius: t.cornerRadius,
+        width: size + 16,
+        height: size + 16,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        color: t.text,
+        flexShrink: 0,
+      }}
+    >
+      <Bell size={size} />
+      {unread > 0 && (
+        <span
+          style={{
+            position: "absolute",
+            top: -6,
+            right: -6,
+            background: t.primary,
+            color: t.textPrimary,
+            borderRadius: 999,
+            fontSize: 10,
+            fontWeight: 700,
+            minWidth: 16,
+            height: 16,
+            padding: "0 4px",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {unread > 99 ? "99+" : unread}
+        </span>
+      )}
+    </button>
+  );
+}
+
+// ── Inbox ────────────────────────────────────────────────────────────────────
+
+const NOTIFICATION_COPY: Record<string, string> = {
+  mention: "You were mentioned",
+  reply: "New reply to your post",
+  reaction: "Someone reacted to your content",
+  new_post: "New post in the community",
+  mod: "A moderator updated your account",
+};
+
+function NotificationIcon({ type }: { type: string }) {
+  const props = { size: 16 };
+  switch (type) {
+    case "mention":
+      return <AtSign {...props} />;
+    case "reply":
+      return <MessageCircle {...props} />;
+    case "reaction":
+      return <Heart {...props} />;
+    case "new_post":
+      return <Sparkles {...props} />;
+    case "mod":
+      return <ShieldAlert {...props} />;
+    default:
+      return <Bell {...props} />;
+  }
+}
+
+export interface CommunityNotificationsInboxProps {
+  /** Post notifications (entityType community_post) navigate here. Reply
+   * notifications carry only the reply id — no public reply→post resolver yet,
+   * so they render without navigation. */
+  onOpenPost?: (postId: string) => void;
+}
+
+/** The in-app notification inbox with mark-all-read. */
+export function CommunityNotificationsInbox({ onOpenPost }: CommunityNotificationsInboxProps) {
+  const t = useThemeTokens();
+  const { data, isLoading } = useCommunityNotifications();
+  const markRead = useMarkCommunityNotificationsRead();
+  const border = `1px solid ${t.border}`;
+
+  if (isLoading) return <Loading />;
+
+  const items = data?.data ?? [];
+  const unreadCount = data?.unreadCount ?? 0;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 10 }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <h2 style={{ margin: 0, fontSize: 18, fontFamily: t.headingFontFamily, color: t.text }}>Notifications</h2>
+        {unreadCount > 0 && (
+          <button
+            onClick={() => markRead.mutate(undefined)}
+            disabled={markRead.isPending}
+            style={{
+              background: "none",
+              border,
+              borderRadius: t.cornerRadius,
+              padding: "4px 12px",
+              cursor: "pointer",
+              color: t.primary,
+              fontWeight: 600,
+              fontSize: 13,
+            }}
+          >
+            Mark all read
+          </button>
+        )}
+      </div>
+
+      {items.length === 0 ? (
+        <div style={{ border, borderRadius: t.cornerRadius, padding: 28, textAlign: "center", color: t.muted }}>
+          You're all caught up.
+        </div>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+          {items.map((n) => (
+            <NotificationRow
+              key={n.id}
+              notification={n}
+              onOpen={
+                n.entityType === "community_post" && n.entityId && onOpenPost
+                  ? () => {
+                      if (!n.readAt) markRead.mutate([n.id]);
+                      onOpenPost(n.entityId!);
+                    }
+                  : undefined
+              }
+              onMarkRead={!n.readAt ? () => markRead.mutate([n.id]) : undefined}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function NotificationRow({
+  notification,
+  onOpen,
+  onMarkRead,
+}: {
+  notification: CommunityNotificationItem;
+  onOpen?: () => void;
+  onMarkRead?: () => void;
+}) {
+  const t = useThemeTokens();
+  const unread = !notification.readAt;
+
+  return (
+    <div
+      onClick={onOpen ?? onMarkRead}
+      role={onOpen ? "button" : undefined}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 12,
+        border: `1px solid ${unread ? `${t.primary}55` : t.border}`,
+        background: unread ? `${t.primary}0d` : t.surface,
+        borderRadius: t.cornerRadius,
+        padding: "10px 14px",
+        cursor: onOpen || onMarkRead ? "pointer" : "default",
+      }}
+    >
+      <span
+        aria-hidden
+        style={{
+          width: 32,
+          height: 32,
+          borderRadius: "50%",
+          background: `${t.primary}1a`,
+          color: t.primary,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          flexShrink: 0,
+        }}
+      >
+        <NotificationIcon type={notification.type} />
+      </span>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <div style={{ fontSize: 14, fontWeight: unread ? 600 : 400, color: t.text }}>
+          {NOTIFICATION_COPY[notification.type] ?? "Community update"}
+        </div>
+        <div style={{ fontSize: 12, color: t.muted }}>{timeAgo(notification.createdAt)}</div>
+      </div>
+      {unread && (
+        <span aria-label="Unread" style={{ width: 8, height: 8, borderRadius: "50%", background: t.primary, flexShrink: 0 }} />
+      )}
+    </div>
+  );
+}