@tribe-nest/forge 3.60.0 → 3.61.0

package/src/ui/styled/portal/PortalHome.tsx

@@ -0,0 +1,401 @@
+import { useForgeLocale, useForgeT, type ForgeT } from "../../../i18n";
+import { usePublicAuth } from "../../../contexts/PublicAuthContext";
+import { internalPath } from "../../../runtime/pages";
+import { useMyBookings } from "../../../data/queries/useMyBookings";
+import { useMyTickets } from "../../../data/queries/useMyTickets";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { bookingCallWindow } from "../../media/bookingWindow";
+import {
+  usePortalActivity,
+  usePortalSummary,
+  type PortalAttentionItem,
+} from "../../headless/portal/usePortal";
+import { useWorkPortalProjects } from "../../headless/work/useWorkPortal";
+import { Loading } from "../Loading";
+import { ActivityRows } from "./PortalActivity";
+import {
+  PortalBlock,
+  PortalHeading,
+  PortalLink,
+  PortalList,
+  PortalProgress,
+  portalMoney,
+  usePortal,
+  usePortalButtons,
+} from "./shared";
+
+/** How far ahead "Coming up" looks. Two weeks is what a person plans around. */
+const AGENDA_DAYS = 14;
+const AGENDA_LIMIT = 5;
+
+/**
+ * The portal's home (`/i/account`).
+ *
+ * It answers one question before any other: what needs me? Everything the
+ * person owes or has to decide sits in one ranked list, each item one click from
+ * the exact thing. Below it: what is coming up, how their projects stand, and
+ * what changed lately. A section with nothing to say is not drawn.
+ */
+export function PortalHome() {
+  const tr = useForgeT();
+  const { user } = usePublicAuth();
+  const { data: summary, isLoading } = usePortalSummary();
+
+  if (isLoading || !summary) return <Loading />;
+
+  const attention = summary.attention;
+  const hour = new Date().getHours();
+  const name = user?.firstName?.trim();
+  const part = hour < 12 ? "morning" : hour < 18 ? "afternoon" : "evening";
+  // Literal keys, so the translation spec can see every one of them.
+  const greeting = name
+    ? {
+        morning: tr("forge.portal_home.greeting_morning_name", { name }),
+        afternoon: tr("forge.portal_home.greeting_afternoon_name", { name }),
+        evening: tr("forge.portal_home.greeting_evening_name", { name }),
+      }[part]
+    : {
+        morning: tr("forge.portal_home.greeting_morning"),
+        afternoon: tr("forge.portal_home.greeting_afternoon"),
+        evening: tr("forge.portal_home.greeting_evening"),
+      }[part];
+
+  return (
+    <div data-testid="portal-home">
+      <PortalHeading
+        title={greeting}
+        lead={
+          attention.length === 0
+            ? tr("forge.portal_home.lead_clear")
+            : attention.length === 1
+              ? tr("forge.portal_home.lead_one")
+              : tr("forge.portal_home.lead_many", { count: attention.length })
+        }
+      />
+
+      {attention.length > 0 ? <NeedsYou items={attention} /> : null}
+
+      <ComingUp hasBookings={summary.sections.bookings > 0} hasTickets={summary.sections.tickets > 0} />
+
+      {summary.sections.projects > 0 ? <ProjectsGlance /> : null}
+
+      <RecentActivity />
+    </div>
+  );
+}
+
+// ---- Needs you --------------------------------------------------------------
+
+function attentionCopy(
+  item: PortalAttentionItem,
+  tr: ForgeT,
+  formatDate: (v: string) => string,
+): { title: string; meta: string[]; action: string; href: string } {
+  switch (item.kind) {
+    case "invoice_overdue":
+    case "invoice_due": {
+      const amount = portalMoney(item.total, item.currency);
+      const when = item.dueDate
+        ? item.kind === "invoice_overdue"
+          ? tr("forge.portal_home.overdue_since", { date: formatDate(item.dueDate) })
+          : tr("forge.portal_home.due_on", { date: formatDate(item.dueDate) })
+        : null;
+      return {
+        title: tr("forge.portal_home.pay_invoice", { number: item.invoiceNumber }),
+        meta: [amount, ...(when ? [when] : []), ...(item.projectName ? [item.projectName] : [])],
+        action: tr("forge.portal_home.pay"),
+        href: internalPath("invoice/$invoiceId", { invoiceId: item.id }),
+      };
+    }
+    case "approval_requested":
+      return {
+        title: tr("forge.portal_home.review_milestone", { milestone: item.milestoneName }),
+        meta: [item.projectName, ...(item.note ? [item.note] : [])],
+        action: tr("forge.portal_home.review"),
+        href: `${internalPath("account/projects/$projectId", { projectId: item.projectId })}#approvals`,
+      };
+    case "document_to_sign":
+      return {
+        title: tr("forge.portal_home.sign_document", { title: item.title }),
+        meta: [
+          tr("forge.portal_home.sent_on", { date: formatDate(item.sentAt) }),
+          ...(item.expiresAt ? [tr("forge.portal_home.expires_on", { date: formatDate(item.expiresAt) })] : []),
+        ],
+        action: tr("forge.portal_home.review_and_sign"),
+        href: internalPath("documents/$token", { token: item.token }),
+      };
+    case "message_unread":
+      return {
+        title:
+          item.unreadCount === 1
+            ? tr("forge.portal_home.new_message_one")
+            : tr("forge.portal_home.new_message_many", { count: item.unreadCount }),
+        meta: item.preview ? [item.preview] : [],
+        action: tr("forge.portal_home.reply"),
+        href: internalPath("account/messages"),
+      };
+    case "membership_payment_failed":
+      return {
+        title: tr("forge.portal_home.update_card", { community: item.communityName }),
+        meta: [tr("forge.portal_home.payment_failed")],
+        action: tr("forge.portal_home.update"),
+        href: internalPath("communities/$slug/home", { slug: item.communitySlug }),
+      };
+  }
+}
+
+/**
+ * The one loud thing on the page.
+ *
+ * A single ranked list rather than a row of counters: "Pay invoice INV-1042"
+ * is something a person can act on, "2 invoices" is something they have to go
+ * and look up. The theme's primary edges the list and fills each action; it is
+ * used nowhere else on Home.
+ */
+function NeedsYou({ items }: { items: PortalAttentionItem[] }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const { formatDate } = usePortal();
+  const buttons = usePortalButtons();
+
+  return (
+    <section aria-labelledby="portal-needs-you" data-testid="portal-needs-you" style={{ marginBottom: 40 }}>
+      <h2 id="portal-needs-you" style={{ position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }}>
+        {tr("forge.portal_home.needs_you")}
+      </h2>
+      <ol
+        style={{
+          listStyle: "none",
+          margin: 0,
+          padding: 0,
+          borderLeft: `3px solid ${t.primary}`,
+          background: t.surface,
+          borderRadius: `0 ${t.cornerRadius}px ${t.cornerRadius}px 0`,
+        }}
+      >
+        {items.map((item, index) => {
+          const copy = attentionCopy(item, tr, formatDate);
+          const overdue = item.kind === "invoice_overdue";
+          return (
+            <li
+              key={`${item.kind}:${item.id}`}
+              data-testid={`portal-attention-${item.kind}`}
+              className="fg:flex fg:flex-col fg:gap-3 fg:sm:flex-row fg:sm:items-center"
+              style={{
+                padding: "16px 20px",
+                borderTop: index === 0 ? "none" : `1px solid ${t.border}`,
+              }}
+            >
+              <div className="fg:min-w-0 fg:flex-1">
+                <p style={{ margin: 0, fontSize: 16, fontWeight: 600, lineHeight: 1.35, color: t.text }}>{copy.title}</p>
+                <p
+                  className="fg:flex fg:flex-wrap fg:gap-x-3"
+                  style={{ margin: "4px 0 0", fontSize: 14, color: t.muted }}
+                >
+                  {copy.meta.map((part, i) => (
+                    <span
+                      key={i}
+                      style={overdue && i === 1 ? { color: t.text, fontWeight: 600 } : undefined}
+                    >
+                      {part}
+                    </span>
+                  ))}
+                </p>
+              </div>
+              <PortalLink href={copy.href} style={buttons.primary} data-testid="portal-attention-action">
+                {copy.action}
+              </PortalLink>
+            </li>
+          );
+        })}
+      </ol>
+    </section>
+  );
+}
+
+// ---- Coming up --------------------------------------------------------------
+
+type AgendaEntry = {
+  key: string;
+  at: Date;
+  title: string;
+  kindLabel: string;
+  action: { label: string; href: string; primary: boolean };
+};
+
+/**
+ * Sessions and shows in the next two weeks, on one dated agenda.
+ *
+ * A session whose call is open now gets a filled "Join" button, the one moment
+ * the agenda earns the primary colour.
+ */
+function ComingUp({ hasBookings, hasTickets }: { hasBookings: boolean; hasTickets: boolean }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const buttons = usePortalButtons();
+  const { user } = usePublicAuth();
+  const { data: bookings } = useMyBookings(hasBookings ? user?.id : undefined, 1, 20);
+  const { data: tickets } = useMyTickets(hasTickets ? user?.id : undefined, 1, 20);
+
+  const now = new Date();
+  const horizon = now.getTime() + AGENDA_DAYS * 86400_000;
+  const entries: AgendaEntry[] = [];
+
+  for (const booking of hasBookings ? (bookings?.data ?? []) : []) {
+    if (booking.status !== "confirmed") continue;
+    const start = new Date(booking.sessionStartTime);
+    const end = new Date(booking.sessionEndTime);
+    if (end.getTime() < now.getTime() || start.getTime() > horizon) continue;
+    const window = bookingCallWindow(booking, now);
+    const canJoin = window.isOpen && !!booking.videoCallId;
+    entries.push({
+      key: `booking:${booking.id}`,
+      at: start,
+      title: booking.coachingProductTitle,
+      kindLabel: tr("forge.portal_home.kind_session"),
+      action: canJoin
+        ? {
+            label: tr("forge.portal_home.join"),
+            href: internalPath("video-calls/$callId", { callId: booking.videoCallId! }),
+            primary: true,
+          }
+        : { label: tr("forge.portal_home.details"), href: internalPath("account/bookings"), primary: false },
+    });
+  }
+
+  for (const ticket of hasTickets ? (tickets?.data ?? []) : []) {
+    if (ticket.selfCancelledAt || ticket.status === "cancelled" || ticket.status === "refunded") continue;
+    const start = new Date(ticket.eventDateTime);
+    const end = ticket.eventEndDateTime ? new Date(ticket.eventEndDateTime) : start;
+    if (end.getTime() < now.getTime() || start.getTime() > horizon) continue;
+    entries.push({
+      key: `ticket:${ticket.id}`,
+      at: start,
+      title: ticket.eventTitle,
+      kindLabel: tr("forge.portal_home.kind_event"),
+      action: { label: tr("forge.portal_home.view_ticket"), href: internalPath("account/tickets"), primary: false },
+    });
+  }
+
+  if (entries.length === 0) return null;
+  entries.sort((a, b) => a.at.getTime() - b.at.getTime());
+
+  const weekday = new Intl.DateTimeFormat(locale, { weekday: "short" });
+  const day = new Intl.DateTimeFormat(locale, { day: "numeric" });
+  const month = new Intl.DateTimeFormat(locale, { month: "short" });
+  const time = new Intl.DateTimeFormat(locale, { hour: "numeric", minute: "2-digit" });
+
+  return (
+    <PortalBlock title={tr("forge.portal_home.coming_up")}>
+      <PortalList>
+        {entries.slice(0, AGENDA_LIMIT).map((entry) => (
+          <li
+            key={entry.key}
+            data-testid="portal-agenda-item"
+            className="fg:flex fg:items-center fg:gap-4 fg:py-3"
+            style={{ borderBottom: `1px solid ${t.border}` }}
+          >
+            {/* The date is the row's anchor: an agenda is read down its dates. */}
+            <div style={{ width: 48, flexShrink: 0, textAlign: "center", lineHeight: 1.1 }} aria-hidden>
+              <div style={{ fontSize: 12, color: t.muted }}>{weekday.format(entry.at)}</div>
+              <div style={{ fontSize: 24, fontWeight: 600, fontFamily: t.headingFontFamily, color: t.text }}>
+                {day.format(entry.at)}
+              </div>
+              <div style={{ fontSize: 12, color: t.muted }}>{month.format(entry.at)}</div>
+            </div>
+            <div className="fg:min-w-0 fg:flex-1">
+              <p style={{ margin: 0, fontWeight: 600, color: t.text }}>{entry.title}</p>
+              <p style={{ margin: "2px 0 0", fontSize: 14, color: t.muted }}>
+                <time dateTime={entry.at.toISOString()}>
+                  {weekday.format(entry.at)} {day.format(entry.at)} {month.format(entry.at)}, {time.format(entry.at)}
+                </time>{" "}
+                <span>{entry.kindLabel}</span>
+              </p>
+            </div>
+            <PortalLink href={entry.action.href} style={entry.action.primary ? buttons.primary : buttons.quiet}>
+              {entry.action.label}
+            </PortalLink>
+          </li>
+        ))}
+      </PortalList>
+    </PortalBlock>
+  );
+}
+
+// ---- Projects ---------------------------------------------------------------
+
+function ProjectsGlance() {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const { formatDate } = usePortal();
+  const buttons = usePortalButtons();
+  const { data: projects } = useWorkPortalProjects();
+  const active = (projects ?? []).filter((p) => p.status !== "completed" && p.status !== "archived");
+  if (active.length === 0) return null;
+
+  return (
+    <PortalBlock
+      title={tr("forge.portal_home.projects")}
+      aside={
+        <PortalLink href={internalPath("account/projects")} style={buttons.text}>
+          {tr("forge.portal_home.all_projects")}
+        </PortalLink>
+      }
+    >
+      <PortalList>
+        {active.slice(0, 4).map((project) => (
+          <li key={project.id} style={{ borderBottom: `1px solid ${t.border}` }}>
+            <PortalLink
+              href={internalPath("account/projects/$projectId", { projectId: project.id })}
+              data-testid="portal-home-project"
+              className="fg:block fg:py-4"
+              style={{ color: t.text, textDecoration: "none" }}
+            >
+              <span className="fg:flex fg:items-baseline fg:justify-between fg:gap-3">
+                <span style={{ fontWeight: 600 }}>{project.name}</span>
+                <span style={{ fontSize: 13, color: t.muted, whiteSpace: "nowrap" }}>
+                  {tr("forge.portal_home.tasks_done", { done: project.doneCount, total: project.taskCount })}
+                </span>
+              </span>
+              <span style={{ display: "block", margin: "10px 0 6px" }}>
+                <PortalProgress
+                  done={project.doneCount}
+                  total={project.taskCount}
+                  label={tr("forge.portal_home.progress_label", { name: project.name })}
+                />
+              </span>
+              {project.dueDate ? (
+                <span style={{ fontSize: 13, color: t.muted }}>
+                  {tr("forge.portal_home.due_on", { date: formatDate(project.dueDate) })}
+                </span>
+              ) : null}
+            </PortalLink>
+          </li>
+        ))}
+      </PortalList>
+    </PortalBlock>
+  );
+}
+
+// ---- Recent activity --------------------------------------------------------
+
+function RecentActivity() {
+  const tr = useForgeT();
+  const buttons = usePortalButtons();
+  const { data } = usePortalActivity(5);
+  const items = data?.pages[0]?.items ?? [];
+  if (items.length === 0) return null;
+  return (
+    <PortalBlock
+      title={tr("forge.portal_home.recent")}
+      aside={
+        <PortalLink href={internalPath("account/activity")} style={buttons.text}>
+          {tr("forge.portal_home.all_activity")}
+        </PortalLink>
+      }
+    >
+      <ActivityRows items={items} />
+    </PortalBlock>
+  );
+}

package/src/ui/styled/portal/PortalMessages.tsx

@@ -0,0 +1,300 @@
+import { useEffect, useRef, useState } from "react";
+import { Paperclip, X } from "lucide-react";
+import { useForgeLocale, useForgeT } from "../../../i18n";
+import { useThemeTokens } from "../../theme/ForgeThemeProvider";
+import { formatBytes } from "../../headless/chat/attachmentKind";
+import {
+  portalMessagesInOrder,
+  useMarkPortalMessagesRead,
+  usePortalMessageAttachments,
+  usePortalMessages,
+  usePortalMessagesLive,
+  usePortalThread,
+  useSendPortalMessage,
+  type PortalMessage,
+} from "../../headless/portal/usePortalMessages";
+import { ChatAttachments } from "../chat/ChatAttachments";
+import { Loading } from "../Loading";
+import { PortalEmpty, PortalHeading, usePortalButtons } from "./shared";
+
+/**
+ * Messages (`/i/account/messages`): the one conversation this person has with
+ * the creator. Their own messages sit on the right in the theme's primary, the
+ * creator's replies on the left, signed with the creator's name. Live over the
+ * chat socket, with a 10 second re-read while the socket is down.
+ *
+ * Someone the creator does not know as a client (no project, booking or
+ * invoice) and who has no conversation yet is told so, and gets no composer,
+ * unless the creator has opened Messages to every member.
+ */
+export function PortalMessages() {
+  const tr = useForgeT();
+  const thread = usePortalThread();
+  const messages = usePortalMessages();
+  const markRead = useMarkPortalMessagesRead();
+  const threadId = thread.data?.thread?.id ?? null;
+  usePortalMessagesLive(threadId);
+
+  const ordered = portalMessagesInOrder(messages.data?.pages);
+  const newestId = ordered[ordered.length - 1]?.id;
+  const unread = thread.data?.thread?.unreadCount ?? 0;
+  const bottomRef = useRef<HTMLDivElement | null>(null);
+
+  // Reading the page is reading the replies.
+  useEffect(() => {
+    if (threadId && unread > 0) markRead.mutate();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [threadId, unread, newestId]);
+
+  useEffect(() => {
+    bottomRef.current?.scrollIntoView?.({ block: "end" });
+  }, [newestId]);
+
+  const creator = thread.data?.creator.name ?? "";
+  const allowed = !!thread.data?.allowed;
+
+  return (
+    <div data-testid="portal-messages">
+      <PortalHeading title={tr("forge.portal_messages.title")} />
+      {thread.isLoading || (threadId && messages.isLoading) ? (
+        <Loading />
+      ) : (
+        <>
+          {ordered.length === 0 ? (
+            allowed ? (
+              <PortalEmpty
+                title={tr("forge.portal_messages.empty_title", { creator })}
+                body={tr("forge.portal_messages.empty_body")}
+              />
+            ) : (
+              <PortalEmpty
+                title={tr("forge.portal_messages.closed_title")}
+                body={tr("forge.portal_messages.closed_body", { creator })}
+              />
+            )
+          ) : (
+            <Conversation
+              messages={ordered}
+              creator={creator}
+              hasEarlier={!!messages.hasNextPage}
+              loadingEarlier={messages.isFetchingNextPage}
+              onLoadEarlier={() => void messages.fetchNextPage()}
+            />
+          )}
+          <div ref={bottomRef} />
+          {allowed ? <Composer /> : null}
+        </>
+      )}
+    </div>
+  );
+}
+
+function Conversation({
+  messages,
+  creator,
+  hasEarlier,
+  loadingEarlier,
+  onLoadEarlier,
+}: {
+  messages: PortalMessage[];
+  creator: string;
+  hasEarlier: boolean;
+  loadingEarlier: boolean;
+  onLoadEarlier: () => void;
+}) {
+  const tr = useForgeT();
+  const buttons = usePortalButtons();
+  return (
+    <div>
+      {hasEarlier ? (
+        <div className="fg:mb-4 fg:flex fg:justify-center">
+          <button
+            type="button"
+            data-testid="portal-messages-earlier"
+            onClick={onLoadEarlier}
+            disabled={loadingEarlier}
+            style={{ ...buttons.quiet, opacity: loadingEarlier ? 0.6 : 1 }}
+          >
+            {tr("forge.portal_messages.load_earlier")}
+          </button>
+        </div>
+      ) : null}
+      <ol
+        role="log"
+        aria-label={tr("forge.portal_messages.conversation_label", { creator })}
+        className="fg:m-0 fg:flex fg:list-none fg:flex-col fg:gap-3 fg:p-0"
+      >
+        {messages.map((message) => (
+          <Bubble key={message.id} message={message} />
+        ))}
+      </ol>
+    </div>
+  );
+}
+
+function Bubble({ message }: { message: PortalMessage }) {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const locale = useForgeLocale();
+  const mine = message.isMine;
+  const when = new Date(message.createdAt).toLocaleString(locale, {
+    day: "numeric",
+    month: "short",
+    hour: "numeric",
+    minute: "2-digit",
+  });
+  return (
+    <li
+      data-testid={mine ? "portal-message-mine" : "portal-message-theirs"}
+      className={`fg:flex fg:flex-col ${mine ? "fg:items-end" : "fg:items-start"}`}
+    >
+      <div
+        className="fg:max-w-[85%] fg:md:max-w-[70%]"
+        style={{
+          padding: "10px 14px",
+          borderRadius: t.cornerRadius,
+          background: mine ? t.primary : t.surface,
+          color: mine ? t.textPrimary : t.text,
+          border: mine ? `1px solid ${t.primary}` : `1px solid ${t.border}`,
+          fontSize: 15,
+          lineHeight: 1.5,
+        }}
+      >
+        {message.content ? <p className="fg:m-0 fg:whitespace-pre-wrap fg:break-words">{message.content}</p> : null}
+        <ChatAttachments attachments={message.attachments} />
+      </div>
+      <span style={{ marginTop: 4, fontSize: 12, color: t.muted }}>
+        {mine ? tr("forge.portal_messages.you") : message.senderName} · {when}
+      </span>
+    </li>
+  );
+}
+
+function Composer() {
+  const t = useThemeTokens();
+  const tr = useForgeT();
+  const buttons = usePortalButtons();
+  const send = useSendPortalMessage();
+  const upload = usePortalMessageAttachments();
+  const fileInput = useRef<HTMLInputElement | null>(null);
+  const [draft, setDraft] = useState("");
+  const [failed, setFailed] = useState(false);
+  const busy = send.isPending || upload.isUploading;
+  const canSend = !busy && (draft.trim().length > 0 || upload.hasPending);
+
+  const submit = async () => {
+    if (!canSend) return;
+    setFailed(false);
+    try {
+      const attachments = upload.hasPending ? await upload.uploadAll() : [];
+      await send.mutateAsync({ content: draft.trim(), attachments });
+      setDraft("");
+      upload.clear();
+    } catch {
+      // Keep the draft and the staged files so the person can try again.
+      setFailed(true);
+    }
+  };
+
+  return (
+    <form
+      data-testid="portal-messages-composer"
+      className="fg:mt-6"
+      onSubmit={(event) => {
+        event.preventDefault();
+        void submit();
+      }}
+      style={{ borderTop: `1px solid ${t.border}`, paddingTop: 16 }}
+    >
+      {failed || upload.error ? (
+        <p role="alert" style={{ margin: "0 0 8px", fontSize: 13, color: t.text }}>
+          {failed ? tr("forge.portal_messages.send_failed") : tr("forge.portal_messages.attachment_failed")}
+        </p>
+      ) : null}
+      {upload.pending.length > 0 ? (
+        <ul className="fg:m-0 fg:mb-3 fg:flex fg:list-none fg:flex-wrap fg:gap-2 fg:p-0">
+          {upload.pending.map((file) => (
+            <li
+              key={file.id}
+              className="fg:flex fg:max-w-[220px] fg:items-center fg:gap-2"
+              style={{
+                padding: "4px 8px",
+                border: `1px solid ${t.border}`,
+                borderRadius: t.cornerRadius,
+                fontSize: 12,
+              }}
+            >
+              <Paperclip aria-hidden size={14} color={t.muted} />
+              <span className="fg:min-w-0 fg:flex-1 fg:truncate">{file.file.name}</span>
+              <span style={{ color: t.muted }}>
+                {file.status === "uploading" ? `${file.progress}%` : formatBytes(file.file.size)}
+              </span>
+              <button
+                type="button"
+                aria-label={tr("forge.portal_messages.remove_attachment", { name: file.file.name })}
+                onClick={() => upload.removeFile(file.id)}
+                style={{ background: "none", border: "none", padding: 0, cursor: "pointer", color: t.muted }}
+              >
+                <X aria-hidden size={14} />
+              </button>
+            </li>
+          ))}
+        </ul>
+      ) : null}
+      <div className="fg:flex fg:items-end fg:gap-2">
+        <input
+          ref={fileInput}
+          type="file"
+          multiple
+          hidden
+          onChange={(event) => {
+            if (event.target.files) upload.addFiles(event.target.files);
+            event.target.value = "";
+          }}
+        />
+        <button
+          type="button"
+          aria-label={tr("forge.portal_messages.attach")}
+          title={tr("forge.portal_messages.attach")}
+          disabled={!upload.canAddMore || busy}
+          onClick={() => fileInput.current?.click()}
+          style={{ ...buttons.quiet, padding: "8px 10px" }}
+        >
+          <Paperclip aria-hidden size={16} />
+        </button>
+        <textarea
+          value={draft}
+          rows={2}
+          aria-label={tr("forge.portal_messages.placeholder")}
+          placeholder={tr("forge.portal_messages.placeholder")}
+          onChange={(event) => setDraft(event.target.value)}
+          onKeyDown={(event) => {
+            if (event.key === "Enter" && !event.shiftKey) {
+              event.preventDefault();
+              void submit();
+            }
+          }}
+          className="fg:min-w-0 fg:flex-1"
+          style={{
+            resize: "vertical",
+            padding: "10px 12px",
+            borderRadius: t.cornerRadius,
+            border: `1px solid ${t.border}`,
+            background: t.background,
+            color: t.text,
+            fontFamily: t.fontFamily,
+            fontSize: 15,
+          }}
+        />
+        <button
+          type="submit"
+          data-testid="portal-messages-send"
+          disabled={!canSend}
+          style={{ ...buttons.primary, opacity: canSend ? 1 : 0.6 }}
+        >
+          {busy ? tr("forge.portal_messages.sending") : tr("forge.portal_messages.send")}
+        </button>
+      </div>
+    </form>
+  );
+}