@tribe-nest/forge 1.13.0

package/src/ui/styled/SignupForm.tsx

@@ -0,0 +1,109 @@
+import { useSignupForm } from "../headless/auth/useSignupForm";
+import { useForgeTheme } from "../theme/ForgeThemeProvider";
+
+export interface SignupFormProps {
+  /** Called after a successful signup. The shell typically redirects here. */
+  onSuccess?: (smartLinkPath?: string) => void;
+  /** Href for the "Login" link. */
+  loginHref: string;
+  membershipTierId?: string;
+  couponCode?: string;
+}
+
+/** Themed account signup form, built on `useSignupForm`. */
+export function SignupForm({ onSuccess, loginHref, membershipTierId, couponCode }: SignupFormProps) {
+  const theme = useForgeTheme();
+  const form = useSignupForm({ onSuccess, membershipTierId, couponCode });
+
+  const card: React.CSSProperties = {
+    maxWidth: 420,
+    margin: "40px auto 0",
+    padding: 24,
+    border: `1px solid ${theme.colors.primary}40`,
+    borderRadius: theme.cornerRadius,
+    color: theme.colors.text,
+  };
+  const input: React.CSSProperties = {
+    width: "100%",
+    height: 40,
+    padding: "8px 12px",
+    borderRadius: theme.cornerRadius,
+    border: `1px solid ${theme.colors.primary}40`,
+    background: "transparent",
+    color: theme.colors.text,
+    outline: "none",
+  };
+  const button: React.CSSProperties = {
+    width: "100%",
+    padding: "10px 14px",
+    borderRadius: theme.cornerRadius,
+    background: theme.colors.primary,
+    color: theme.colors.background,
+    border: "none",
+    fontWeight: 600,
+    cursor: "pointer",
+  };
+  const field = (label: string, node: React.ReactNode) => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6 }}>
+      <label style={{ fontSize: 14 }}>{label}</label>
+      {node}
+    </div>
+  );
+
+  return (
+    <div style={card}>
+      <h1 style={{ fontSize: 24, fontWeight: 700, marginBottom: 24 }}>Create your account</h1>
+      {form.error && <p style={{ color: "#ef4444", marginBottom: 16 }}>{form.error}</p>}
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          form.submit();
+        }}
+        style={{ display: "flex", flexDirection: "column", gap: 16 }}
+      >
+        <div style={{ display: "flex", gap: 12 }}>
+          {field(
+            "First name",
+            <input value={form.firstName} onChange={(e) => form.setFirstName(e.target.value)} style={input} placeholder="First name" />,
+          )}
+          {field(
+            "Last name",
+            <input value={form.lastName} onChange={(e) => form.setLastName(e.target.value)} style={input} placeholder="Last name" />,
+          )}
+        </div>
+        {field(
+          "Email",
+          <input type="email" value={form.email} onChange={(e) => form.setEmail(e.target.value)} style={input} placeholder="Email" />,
+        )}
+        {field(
+          "Password",
+          <input
+            type="password"
+            value={form.password}
+            onChange={(e) => form.setPassword(e.target.value)}
+            style={input}
+            placeholder="At least 8 characters"
+          />,
+        )}
+        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: 13 }}>
+          <input
+            type="checkbox"
+            checked={form.acceptedTerms}
+            onChange={(e) => form.setAcceptedTerms(e.target.checked)}
+            style={{ accentColor: theme.colors.primary }}
+          />
+          I accept the Terms and Privacy Policy
+        </label>
+        <button type="submit" disabled={form.isSubmitting} style={button}>
+          {form.isSubmitting ? "Creating account…" : "Sign up"}
+        </button>
+      </form>
+      <p style={{ marginTop: 16, fontSize: 14, textAlign: "center" }}>
+        Already have an account?{" "}
+        <a href={loginHref} style={{ color: theme.colors.primary, textDecoration: "underline" }}>
+          Login
+        </a>
+      </p>
+    </div>
+  );
+}

package/src/ui/styled/UserMenu.tsx

@@ -0,0 +1,166 @@
+import { useEffect, useRef, useState } from "react";
+import { User, LogIn, LogOut } from "lucide-react";
+import { usePublicAuth } from "../../contexts/PublicAuthContext";
+import { useThemeTokens } from "../theme/ForgeThemeProvider";
+
+export interface UserMenuProps {
+  /** Custom trigger icon (defaults to a user icon). */
+  icon?: React.ReactNode;
+  /** Account link (logged in). Default `/i/account`. */
+  accountHref?: string;
+  /** Login link (logged out). Default `/i/login`. */
+  loginHref?: string;
+  /** Signup link (logged out). Default `/i/signup`. */
+  signupHref?: string;
+  /**
+   * Which edge the popover anchors to. `right` (default) opens toward the left
+   * — correct when the menu sits on the right of a header. Use `left` when the
+   * trigger sits near the left edge (e.g. inside a mobile drawer) so the popover
+   * doesn't spill off-screen.
+   */
+  align?: "left" | "right";
+  /** Extra class(es) on the trigger. */
+  className?: string;
+  /** Inline style merged into the trigger. */
+  style?: React.CSSProperties;
+}
+
+/**
+ * Drop-in account menu: an auth-aware user icon that opens a small popover.
+ * Logged in → the user's name/email + an Account link + Log out; logged out →
+ * Log in / Create account. Built on the Forge `usePublicAuth` context (requires
+ * `PublicAuthProvider`, already in the site root). Pass your own `icon` or get
+ * the default. Drop it into a header: `<UserMenu />`.
+ */
+export function UserMenu({
+  icon,
+  accountHref = "/i/account",
+  loginHref = "/i/login",
+  signupHref = "/i/signup",
+  align = "right",
+  className,
+  style,
+}: UserMenuProps) {
+  const t = useThemeTokens();
+  const { user, logout } = usePublicAuth();
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onDoc = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", onDoc);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      document.removeEventListener("mousedown", onDoc);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open]);
+
+  const item: React.CSSProperties = {
+    color: t.primary,
+    background: "transparent",
+    border: "none",
+    cursor: "pointer",
+    textDecoration: "none",
+    fontSize: 14,
+    textAlign: "left",
+    padding: 0,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 6,
+  };
+
+  return (
+    <div ref={ref} className={className} style={{ position: "relative", display: "inline-flex", ...style }}>
+      <button
+        type="button"
+        onClick={() => setOpen((v) => !v)}
+        aria-label="Account"
+        aria-expanded={open}
+        style={{
+          background: "transparent",
+          border: "none",
+          cursor: "pointer",
+          color: t.text,
+          display: "inline-flex",
+          alignItems: "center",
+          padding: 4,
+        }}
+      >
+        {icon ?? <User size={20} />}
+      </button>
+
+      {open && (
+        <div
+          role="menu"
+          style={{
+            position: "absolute",
+            top: "calc(100% + 8px)",
+            ...(align === "left" ? { left: 0 } : { right: 0 }),
+            minWidth: 220,
+            maxWidth: "calc(100vw - 32px)",
+            background: t.background,
+            color: t.text,
+            border: `1px solid ${t.border}`,
+            borderRadius: t.cornerRadius,
+            boxShadow: "0 10px 30px -12px rgba(0,0,0,0.4)",
+            padding: 16,
+            zIndex: 60,
+            fontFamily: t.fontFamily,
+          }}
+        >
+          {user ? (
+            <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+              <div>
+                <p style={{ fontWeight: 600, fontSize: 14, margin: 0 }}>
+                  {user.firstName} {user.lastName}
+                </p>
+                <p style={{ fontSize: 12, opacity: 0.7, margin: "2px 0 0" }}>{user.email}</p>
+              </div>
+              <div
+                style={{
+                  paddingTop: 8,
+                  borderTop: `1px solid ${t.border}`,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 10,
+                  alignItems: "flex-start",
+                }}
+              >
+                <a href={accountHref} role="menuitem" style={item} onClick={() => setOpen(false)}>
+                  My Account
+                </a>
+                <button
+                  type="button"
+                  role="menuitem"
+                  style={item}
+                  onClick={() => {
+                    setOpen(false);
+                    void logout();
+                  }}
+                >
+                  <LogOut size={14} /> Log out
+                </button>
+              </div>
+            </div>
+          ) : (
+            <div style={{ display: "flex", flexDirection: "column", gap: 10, alignItems: "flex-start" }}>
+              <a href={loginHref} role="menuitem" style={item} onClick={() => setOpen(false)}>
+                <LogIn size={16} /> Log in
+              </a>
+              <a href={signupHref} role="menuitem" style={item} onClick={() => setOpen(false)}>
+                Create account
+              </a>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/ui/styled/chat/ChatAttachments.tsx

@@ -0,0 +1,172 @@
+import { useState } from "react";
+import type { ChatAttachment } from "../../../data/queries/useChat";
+import { attachmentKind, formatBytes } from "../../headless/chat/attachmentKind";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { readableTextOn } from "../../theme/contrast";
+
+/** Renders a message's attachments with a preview per file type + download. */
+export function ChatAttachments({ attachments }: { attachments: ChatAttachment[] }) {
+  const [lightbox, setLightbox] = useState<string | null>(null);
+  if (!attachments?.length) return null;
+
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 8, marginTop: 6 }}>
+      {attachments.map((att, i) => (
+        <AttachmentItem key={`${att.url}-${i}`} attachment={att} onOpenImage={() => setLightbox(att.url)} />
+      ))}
+      {lightbox && <Lightbox url={lightbox} onClose={() => setLightbox(null)} />}
+    </div>
+  );
+}
+
+function AttachmentItem({ attachment, onOpenImage }: { attachment: ChatAttachment; onOpenImage: () => void }) {
+  const theme = useForgeTheme();
+  const kind = attachmentKind(attachment);
+  const border = `1px solid ${theme.colors.text}1a`;
+
+  if (kind === "image") {
+    return (
+      <img
+        src={attachment.url}
+        alt={attachment.fileName}
+        onClick={onOpenImage}
+        style={{ maxWidth: 240, maxHeight: 240, borderRadius: theme.cornerRadius, cursor: "zoom-in", objectFit: "cover" }}
+      />
+    );
+  }
+
+  if (kind === "video") {
+    return (
+      <video
+        src={attachment.url}
+        controls
+        preload="metadata"
+        style={{ maxWidth: 280, borderRadius: theme.cornerRadius }}
+      />
+    );
+  }
+
+  if (kind === "audio") {
+    return (
+      <div style={{ display: "flex", flexDirection: "column", gap: 4, maxWidth: 280 }}>
+        <span style={{ fontSize: 12, opacity: 0.75 }}>{attachment.fileName}</span>
+        <audio src={attachment.url} controls preload="metadata" style={{ width: "100%" }} />
+      </div>
+    );
+  }
+
+  if (kind === "pdf") {
+    return <PdfAttachment attachment={attachment} />;
+  }
+
+  return <FileCard attachment={attachment} border={border} />;
+}
+
+function PdfAttachment({ attachment }: { attachment: ChatAttachment }) {
+  const theme = useForgeTheme();
+  const [open, setOpen] = useState(false);
+  const border = `1px solid ${theme.colors.text}1a`;
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: 6, maxWidth: 320 }}>
+      <FileCard
+        attachment={attachment}
+        border={border}
+        extra={
+          <button
+            onClick={() => setOpen((v) => !v)}
+            style={{
+              background: "none",
+              border,
+              borderRadius: 6,
+              padding: "2px 8px",
+              cursor: "pointer",
+              color: theme.colors.text,
+              fontSize: 12,
+            }}
+          >
+            {open ? "Hide" : "Preview"}
+          </button>
+        }
+      />
+      {open && (
+        <iframe
+          title={attachment.fileName}
+          src={attachment.url}
+          style={{ width: "100%", height: 360, border, borderRadius: theme.cornerRadius }}
+        />
+      )}
+    </div>
+  );
+}
+
+function FileCard({
+  attachment,
+  border,
+  extra,
+}: {
+  attachment: ChatAttachment;
+  border: string;
+  extra?: React.ReactNode;
+}) {
+  const theme = useForgeTheme();
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        padding: "8px 10px",
+        border,
+        borderRadius: theme.cornerRadius,
+        maxWidth: 320,
+      }}
+    >
+      <span style={{ fontSize: 20 }} aria-hidden>
+        📄
+      </span>
+      <div style={{ minWidth: 0, flex: 1 }}>
+        <div style={{ fontSize: 13, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+          {attachment.fileName}
+        </div>
+        <div style={{ fontSize: 11, opacity: 0.6 }}>{formatBytes(attachment.fileSize)}</div>
+      </div>
+      {extra}
+      <a
+        href={attachment.url}
+        target="_blank"
+        rel="noopener noreferrer"
+        download
+        style={{
+          background: theme.colors.primary,
+          color: readableTextOn(theme.colors.primary),
+          borderRadius: 6,
+          padding: "2px 8px",
+          fontSize: 12,
+          textDecoration: "none",
+        }}
+      >
+        Download
+      </a>
+    </div>
+  );
+}
+
+function Lightbox({ url, onClose }: { url: string; onClose: () => void }) {
+  return (
+    <div
+      onClick={onClose}
+      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={url} alt="" style={{ maxWidth: "90vw", maxHeight: "90vh", objectFit: "contain" }} />
+    </div>
+  );
+}

package/src/ui/styled/chat/ChatComposer.tsx

@@ -0,0 +1,153 @@
+import { useRef, useState } from "react";
+import type { ChatAttachment } from "../../../data/queries/useChat";
+import { useChatAttachmentUpload } from "../../headless/chat/useChatAttachmentUpload";
+import { formatBytes } from "../../headless/chat/attachmentKind";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { readableTextOn } from "../../theme/contrast";
+
+export interface ChatComposerProps {
+  onSend: (content: string, attachments: ChatAttachment[]) => void;
+  onTyping?: () => void;
+  border: string;
+  placeholder?: string;
+}
+
+/** Message composer shared by the main panel and the thread panel. */
+export function ChatComposer({ onSend, onTyping, border, placeholder = "Message…" }: ChatComposerProps) {
+  const theme = useForgeTheme();
+  const [draft, setDraft] = useState("");
+  const upload = useChatAttachmentUpload();
+  const fileInputRef = useRef<HTMLInputElement | null>(null);
+  const [sending, setSending] = useState(false);
+
+  const send = async () => {
+    if (sending) return;
+    if (!draft.trim() && !upload.hasPending) return;
+    setSending(true);
+    try {
+      const attachments = upload.hasPending ? await upload.uploadAll() : [];
+      onSend(draft.trim(), attachments);
+      setDraft("");
+      upload.clear();
+    } catch {
+      // Upload failed — the error surfaces via `upload.error`. Keep the draft
+      // and staged files so the member can retry.
+    } finally {
+      setSending(false);
+    }
+  };
+
+  return (
+    <div style={{ borderTop: border }}>
+      {upload.error && (
+        <div style={{ padding: "8px 12px 0", fontSize: 12, color: "#dc2626" }}>{upload.error}</div>
+      )}
+      {upload.pending.length > 0 && (
+        <div style={{ display: "flex", flexWrap: "wrap", gap: 8, padding: "8px 12px 0" }}>
+          {upload.pending.map((p) => (
+            <div
+              key={p.id}
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 6,
+                padding: "4px 8px",
+                border,
+                borderRadius: theme.cornerRadius,
+                maxWidth: 200,
+              }}
+            >
+              {p.kind === "image" && p.previewUrl ? (
+                <img src={p.previewUrl} alt="" style={{ width: 28, height: 28, objectFit: "cover", borderRadius: 4 }} />
+              ) : (
+                <span aria-hidden>📎</span>
+              )}
+              <div style={{ minWidth: 0, flex: 1 }}>
+                <div style={{ fontSize: 12, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                  {p.file.name}
+                </div>
+                <div style={{ fontSize: 10, opacity: 0.6 }}>
+                  {p.status === "uploading" ? `${p.progress}%` : formatBytes(p.file.size)}
+                </div>
+              </div>
+              <button
+                onClick={() => upload.removeFile(p.id)}
+                style={{ background: "none", border: "none", cursor: "pointer", color: theme.colors.text }}
+                aria-label="Remove attachment"
+              >
+                ×
+              </button>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <div style={{ display: "flex", gap: 8, padding: 12 }}>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          hidden
+          onChange={(e) => {
+            if (e.target.files) upload.addFiles(e.target.files);
+            e.target.value = "";
+          }}
+        />
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          disabled={!upload.canAddMore}
+          title="Attach files"
+          style={{
+            background: "none",
+            border,
+            borderRadius: theme.cornerRadius,
+            padding: "0 12px",
+            cursor: upload.canAddMore ? "pointer" : "not-allowed",
+            color: theme.colors.text,
+            fontSize: 18,
+          }}
+        >
+          📎
+        </button>
+        <input
+          value={draft}
+          onChange={(e) => {
+            setDraft(e.target.value);
+            onTyping?.();
+          }}
+          onKeyDown={(e) => {
+            if (e.key === "Enter" && !e.shiftKey) {
+              e.preventDefault();
+              send();
+            }
+          }}
+          placeholder={placeholder}
+          style={{
+            flex: 1,
+            padding: "10px 12px",
+            borderRadius: theme.cornerRadius,
+            border,
+            background: theme.colors.background,
+            color: theme.colors.text,
+          }}
+        />
+        <button
+          onClick={send}
+          disabled={sending}
+          style={{
+            background: theme.colors.primary,
+            color: readableTextOn(theme.colors.primary),
+            border: "none",
+            borderRadius: theme.cornerRadius,
+            padding: "0 18px",
+            fontWeight: 600,
+            cursor: sending ? "wait" : "pointer",
+            opacity: sending ? 0.7 : 1,
+          }}
+        >
+          {sending ? "…" : "Send"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/ui/styled/chat/ChatThreadPanel.tsx

@@ -0,0 +1,94 @@
+import { useEffect, useRef } from "react";
+import type { ChatMessage } from "../../../data/queries/useChat";
+import type { Socket } from "socket.io-client";
+import { useMessageThread } from "../../headless/chat/useMessageThread";
+import { useForgeTheme } from "../../theme/ForgeThemeProvider";
+import { MessageBubble } from "./MessageBubble";
+import { ChatComposer } from "./ChatComposer";
+
+export interface ChatThreadPanelProps {
+  parentMessage: ChatMessage;
+  socket: Socket | null;
+  currentAccountId?: string;
+  onClose: () => void;
+  onMarkAsRead?: (messageIds: string[]) => void;
+  border: string;
+}
+
+/**
+ * One-level thread panel — a side panel on desktop, full-screen overlay on
+ * mobile. Renders the parent, its replies, and a reply composer.
+ */
+export function ChatThreadPanel({
+  parentMessage,
+  socket,
+  currentAccountId,
+  onClose,
+  onMarkAsRead,
+  border,
+}: ChatThreadPanelProps) {
+  const theme = useForgeTheme();
+  const thread = useMessageThread({ parentMessage, socket });
+
+  // Thread replies count toward the channel's unread total but never appear in
+  // the main timeline (which is where reads are normally marked). Mark the
+  // parent + replies read so opening the thread clears its unread. Guard with a
+  // ref of already-marked ids: the markAsRead callback identity changes as the
+  // mutation runs, so re-running without this guard would loop.
+  const markedRef = useRef<Set<string>>(new Set());
+  useEffect(() => {
+    if (!onMarkAsRead) return;
+    const ids = [parentMessage, ...thread.replies]
+      .filter((m) => m.senderAccountId !== currentAccountId && !markedRef.current.has(m.id))
+      .map((m) => m.id);
+    if (ids.length === 0) return;
+    ids.forEach((id) => markedRef.current.add(id));
+    onMarkAsRead(ids);
+  }, [parentMessage, thread.replies, currentAccountId, onMarkAsRead]);
+
+  return (
+    <section
+      className="fixed inset-0 z-50 md:static md:z-auto md:w-[360px] flex flex-col"
+      style={{ background: theme.colors.background, borderLeft: border }}
+    >
+      <header style={{ padding: "12px 16px", borderBottom: border, display: "flex", alignItems: "center", gap: 12 }}>
+        <strong style={{ flex: 1 }}>Thread</strong>
+        <button
+          onClick={onClose}
+          style={{ background: "none", border: "none", cursor: "pointer", color: theme.colors.text, fontSize: 18 }}
+          aria-label="Close thread"
+        >
+          ×
+        </button>
+      </header>
+
+      <div style={{ padding: 16, borderBottom: border }}>
+        <MessageBubble message={parentMessage} mine={parentMessage.senderAccountId === currentAccountId} showThreadControls={false} />
+      </div>
+
+      <div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 10 }}>
+        {thread.hasMore && (
+          <button
+            onClick={() => thread.fetchNextPage()}
+            style={{ alignSelf: "center", background: "none", border, borderRadius: 8, padding: "4px 10px", cursor: "pointer", color: theme.colors.text }}
+          >
+            Load earlier replies
+          </button>
+        )}
+        {thread.replies.map((m) => (
+          <MessageBubble key={m.id} message={m} mine={m.senderAccountId === currentAccountId} showThreadControls={false} />
+        ))}
+        {!thread.isLoading && thread.replies.length === 0 && (
+          <div style={{ opacity: 0.5, fontSize: 13, textAlign: "center" }}>No replies yet. Start the thread.</div>
+        )}
+      </div>
+
+      <ChatComposer
+        onSend={(content, attachments) => thread.sendReply(content, attachments)}
+        onTyping={thread.handleTyping}
+        border={border}
+        placeholder="Reply…"
+      />
+    </section>
+  );
+}