@devaccel-labs/app-comments-toolbar 1.0.0 → 1.3.0

package/src/runtime/dashboard.tsx

@@ -0,0 +1,1130 @@
+import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import type { CommentMessage, Member, Thread } from "./client.js";
+import { replyToThread, updateThread } from "./client.js";
+import { formatSize, useAttachments } from "./attachments.js";
+import { colorFor, initials, type PlacedStatus } from "./format.js";
+import * as Icon from "./icons.js";
+import { MentionTextarea, MessageText, mentionsIn } from "./mentions.js";
+import { relatedTo } from "./related.js";
+import type { Here } from "./screen.js";
+import type { Session } from "./session.js";
+import {
+  agoPhrase,
+  fromYou,
+  involved,
+  leadSentence,
+  mentionOfYou,
+  namesYou,
+} from "./thread-model.js";
+
+type TableRow = { thread: Thread; status: PlacedStatus };
+type Pill = "any" | "open" | "resolved" | "mine" | "mentions" | `role:${string}`;
+type PageFilter = "all" | "here" | `route:${string}`;
+type Sort = "new" | "old";
+type Pane = "thread" | "activity" | "related";
+type Menu = "page" | "role" | "sort" | "status" | "more" | null;
+/** The dashboard's sections. "inbox" is the Comments section. */
+export type DashboardScreen = "insights" | "inbox" | "profile" | "settings";
+type Screen = DashboardScreen;
+/** Asks an open or opening dashboard to show this thread in Comments. A new `at` asks again. */
+export type DashboardFocus = { threadId: string; at: number };
+
+function Avatar({ name, size = 32 }: { name: string; size?: number }) {
+  return (
+    <span
+      className="cs-avatar"
+      style={{ width: size, height: size, fontSize: size * 0.38, background: colorFor(name) }}
+      aria-hidden="true"
+    >
+      {initials(name)}
+    </span>
+  );
+}
+
+export function Dashboard({
+  rows,
+  here,
+  environment,
+  memberName,
+  memberId,
+  roles,
+  members,
+  session,
+  memberToken,
+  envFilter,
+  profile,
+  settingsPane,
+  onClose,
+  onOpen,
+  onReattach,
+  onRefresh,
+  screen,
+  onScreen,
+  focus = null,
+  readOnly = false,
+}: {
+  rows: TableRow[];
+  /** The screen the page is on: "This page" is its threads. */
+  here: Here;
+  environment: string;
+  memberName: string;
+  memberId?: string;
+  roles: string[];
+  members: Member[];
+  session: Session;
+  memberToken: string;
+  envFilter: ReactNode;
+  profile: ReactNode;
+  settingsPane: ReactNode;
+  onClose: () => void;
+  onOpen: (row: TableRow) => void;
+  /** Re-pins a comment from this page that lost its element. */
+  onReattach?: (row: TableRow) => void;
+  onRefresh: () => Promise<unknown> | unknown;
+  screen: Screen;
+  onScreen: (screen: Screen) => void;
+  focus?: DashboardFocus | null;
+  /** View-only access: no replies and no status changes. */
+  readOnly?: boolean;
+}) {
+  const [pill, setPill] = useState<Pill>("any");
+  const [author, setAuthor] = useState<string | null>(null);
+  const [page, setPage] = useState<PageFilter>("all");
+  const [sort, setSort] = useState<Sort>("new");
+  const [menu, setMenu] = useState<Menu>(null);
+  const [pane, setPane] = useState<Pane>("thread");
+  const [openId, setOpenId] = useState<string | null>(focus?.threadId ?? null);
+  const [checked, setChecked] = useState<Set<string>>(() => new Set());
+  const [focusedAt, setFocusedAt] = useState<number | null>(focus?.at ?? null);
+  if (focus && focus.at !== focusedAt) {
+    // Every filter is cleared so the asked-for thread is in the list, resolved or not.
+    setFocusedAt(focus.at);
+    setPill("any");
+    setAuthor(null);
+    setPage("all");
+    setOpenId(focus.threadId);
+    setMenu(null);
+  }
+  const [reply, setReply] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+  const picked = useRef(new Map<string, Member>());
+  const fileInput = useRef<HTMLInputElement>(null);
+  const roleNames = useMemo(() => {
+    const names = new Set(roles);
+    for (const row of rows) if (row.thread.role) names.add(row.thread.role);
+    return [...names];
+  }, [roles, rows]);
+  const pages = useMemo(() => {
+    const values = new Set<string>();
+    for (const row of rows) values.add(row.thread.url || row.thread.route);
+    return [...values].sort((a, b) => a.localeCompare(b));
+  }, [rows]);
+  const paged = useMemo(
+    () =>
+      rows.filter(({ thread }) => {
+        if (page === "here") return here.has(thread);
+        if (page.startsWith("route:")) return (thread.url || thread.route) === page.slice(6);
+        return true;
+      }),
+    [here, page, rows],
+  );
+  const counts = {
+    any: paged.length,
+    open: paged.filter((row) => row.thread.status === "open").length,
+    resolved: paged.filter((row) => row.thread.status === "resolved").length,
+    mentions: paged.filter((row) => mentionOfYou(row.thread, memberId, memberName)).length,
+  };
+  const authors = useMemo(() => {
+    const written = new Map<string, number>();
+    for (const row of paged) {
+      const name = row.thread.createdBy.trim();
+      if (name) written.set(name, (written.get(name) ?? 0) + 1);
+    }
+    const ordered: Array<[string, number]> = [];
+    const seen = new Set<string>();
+    for (const member of members) {
+      const count = written.get(member.name);
+      if (!count || seen.has(member.name)) continue;
+      seen.add(member.name);
+      ordered.push([member.name, count]);
+    }
+    for (const [name, count] of [...written.entries()].sort((a, b) => a[0].localeCompare(b[0]))) {
+      if (seen.has(name)) continue;
+      ordered.push([name, count]);
+    }
+    return ordered;
+  }, [members, paged]);
+  const insights = useMemo(() => {
+    const people = new Map<string, { open: number; resolved: number }>();
+    let open = 0;
+    let resolved = 0;
+    for (const { thread } of rows) {
+      if (thread.status === "resolved") resolved += 1;
+      else open += 1;
+      const name = thread.createdBy.trim() || "Someone";
+      const person = people.get(name) ?? { open: 0, resolved: 0 };
+      person[thread.status === "resolved" ? "resolved" : "open"] += 1;
+      people.set(name, person);
+    }
+    const byVolume = (
+      a: { open: number; resolved: number },
+      b: { open: number; resolved: number },
+    ) => b.open + b.resolved - (a.open + a.resolved);
+    return {
+      open,
+      resolved,
+      people: [...people.entries()]
+        .map(([name, counts]) => ({ name, ...counts }))
+        .sort((a, b) => byVolume(a, b) || a.name.localeCompare(b.name)),
+      recent: [...rows]
+        .sort((a, b) => Date.parse(b.thread.updatedAt) - Date.parse(a.thread.updatedAt))
+        .slice(0, 6),
+    };
+  }, [rows]);
+  const mentions = useMemo(() => {
+    const found: Array<{ row: TableRow; hit: CommentMessage }> = [];
+    for (const row of rows) {
+      const hit = mentionOfYou(row.thread, memberId, memberName);
+      if (hit) found.push({ row, hit });
+    }
+    found.sort((a, b) => Date.parse(b.hit.createdAt) - Date.parse(a.hit.createdAt));
+    return found;
+  }, [memberId, memberName, rows]);
+  const shown = useMemo(() => {
+    const matched = paged.filter(({ thread }) => {
+      if (author && thread.createdBy !== author) return false;
+      if (pill === "open" || pill === "resolved") return thread.status === pill;
+      if (pill === "mine") return involved(thread, memberName);
+      if (pill === "mentions") return Boolean(mentionOfYou(thread, memberId, memberName));
+      if (pill.startsWith("role:")) return thread.role === pill.slice(5);
+      return true;
+    });
+    return [...matched].sort((a, b) => {
+      const order = Date.parse(a.thread.updatedAt) - Date.parse(b.thread.updatedAt);
+      return sort === "new" ? -order : order;
+    });
+  }, [author, memberId, memberName, paged, pill, sort]);
+  if (author && !authors.some(([name]) => name === author)) setAuthor(null);
+  if (!rows.some((row) => row.thread.id === openId)) setOpenId(shown[0]?.thread.id ?? null);
+  useEffect(() => {
+    if (!menu) return;
+    const close = (event: PointerEvent) => {
+      const target = event.target;
+      if (target instanceof Element && target.closest(".cs-dash-menu")) return;
+      setMenu(null);
+    };
+    window.addEventListener("pointerdown", close, true);
+    return () => window.removeEventListener("pointerdown", close, true);
+  }, [menu]);
+  const selected = rows.find((row) => row.thread.id === openId) ?? null;
+  const linked = Boolean(
+    selected && selected.thread.environment && selected.thread.environment !== environment,
+  );
+  const files = useAttachments(
+    session,
+    memberToken,
+    setError,
+    linked ? selected?.thread.environment : undefined,
+  );
+  const openThreadId = selected?.thread.id ?? null;
+  const [replyThreadId, setReplyThreadId] = useState(openThreadId);
+  if (openThreadId !== replyThreadId) {
+    setReplyThreadId(openThreadId);
+    setReply("");
+    setError("");
+    setPane("thread");
+    files.reset();
+  }
+  useEffect(() => {
+    if (openThreadId === null || typeof openThreadId === "string") picked.current = new Map();
+  }, [openThreadId]);
+
+  const choosePill = (next: Pill) => {
+    setPill(next);
+    setMenu(null);
+  };
+  const showInbox = (
+    next: { pill?: Pill; author?: string | null; page?: PageFilter; threadId?: string } = {},
+  ) => {
+    setPill(next.pill ?? "any");
+    setAuthor(next.author ?? null);
+    setPage(next.page ?? "all");
+    if (next.threadId) setOpenId(next.threadId);
+    setMenu(null);
+    onScreen("inbox");
+  };
+  const pageLabel = page === "all" ? "All pages" : page === "here" ? "This page" : page.slice(6);
+  const roleLabel = pill.startsWith("role:") ? pill.slice(5) : "All roles";
+  const first = selected?.thread.messages[0];
+  const shots = first?.attachments?.filter((file) => file.contentType.startsWith("image/")) ?? [];
+  const clips = first?.attachments?.filter((file) => file.contentType.startsWith("video/")) ?? [];
+  const related = selected
+    ? relatedTo(
+        selected.thread,
+        rows.map((row) => row.thread),
+      )
+    : [];
+
+  const addFiles = (list: FileList | null) => {
+    if (!list?.length) return;
+    files.add([...list].map((file) => ({ blob: file, name: file.name })));
+  };
+
+  const send = async () => {
+    if (!selected || busy || files.uploading || (!reply.trim() && !files.ids.length)) return;
+    setBusy(true);
+    setError("");
+    const mentions = mentionsIn(reply, picked.current);
+    try {
+      await replyToThread(session, memberToken, selected.thread.id, reply.trim(), {
+        mentions: mentions.map((person) => person.id),
+        attachments: files.ids,
+      });
+      setReply("");
+      picked.current = new Map();
+      files.reset();
+      await onRefresh();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Couldn’t reply.");
+    }
+    setBusy(false);
+  };
+
+  const setStatus = async (status: "open" | "resolved") => {
+    if (!selected || linked || selected.thread.status === status) {
+      setMenu(null);
+      return;
+    }
+    setMenu(null);
+    setBusy(true);
+    setError("");
+    try {
+      await updateThread(session, memberToken, selected.thread.id, { status });
+      await onRefresh();
+    } catch (caught) {
+      setError(caught instanceof Error ? caught.message : "Couldn’t update.");
+    }
+    setBusy(false);
+  };
+
+  const toggleMenu = (name: Menu) => setMenu((current) => (current === name ? null : name));
+
+  return (
+    <>
+      <div className="cs-dash-scrim cs-hit" onClick={onClose} />
+      <section
+        className="cs-card cs-dashboard cs-hit"
+        data-cs-ui="dashboard-panel"
+        aria-label="Dashboard"
+      >
+        <nav className="cs-dash-sidebar" aria-label="Dashboard sections">
+          <p className="cs-dash-sidebar-env">{environment}</p>
+          {(
+            [
+              ["insights", "Dashboard", <Icon.Board key="i" />, mentions.length || null],
+              ["inbox", "Comments", <Icon.Inbox key="i" />, insights.open || null],
+              ["profile", "Profile", <Icon.User key="i" />, null],
+              ["settings", "Settings", <Icon.Gear key="i" />, null],
+            ] as const
+          ).map(([value, label, icon, badge]) => (
+            <button
+              key={value}
+              type="button"
+              className={screen === value ? "cs-dash-nav is-on" : "cs-dash-nav"}
+              data-cs-ui={`dashboard-nav-${value}`}
+              aria-current={screen === value ? "page" : undefined}
+              onClick={() => (value === "inbox" ? showInbox() : onScreen(value))}
+            >
+              {icon}
+              <span>{label}</span>
+              {badge ? (
+                <em title={value === "insights" ? "Comments that @mention you" : undefined}>
+                  {value === "insights" ? `@${badge}` : badge}
+                </em>
+              ) : null}
+            </button>
+          ))}
+        </nav>
+        <div className="cs-dash-main">
+          {screen === "profile" || screen === "settings" ? (
+            <>
+              <header className="cs-dash-top">
+                <h2 className="cs-insight-title">
+                  {screen === "profile" ? "Profile" : "Settings"}
+                </h2>
+                <div className="cs-dash-tools">
+                  <button
+                    className="cs-dash-icon"
+                    type="button"
+                    aria-label="Close dashboard"
+                    onClick={onClose}
+                  >
+                    <Icon.Close />
+                  </button>
+                </div>
+              </header>
+              <div className="cs-insights">
+                <div className="cs-dash-pane" data-cs-ui={`dashboard-${screen}`}>
+                  {screen === "profile" ? profile : settingsPane}
+                </div>
+              </div>
+            </>
+          ) : screen === "insights" ? (
+            <>
+              <header className="cs-dash-top">
+                <h2 className="cs-insight-title">Dashboard</h2>
+                {envFilter}
+                <div className="cs-dash-tools">
+                  <button
+                    className="cs-dash-icon"
+                    type="button"
+                    aria-label="Close dashboard"
+                    onClick={onClose}
+                  >
+                    <Icon.Close />
+                  </button>
+                </div>
+              </header>
+              <div className="cs-insights" data-cs-ui="dashboard-insights">
+                {rows.length === 0 ? <p className="cs-dash-empty">No comments yet.</p> : null}
+                {rows.length > 0 ? (
+                  <>
+                    <div className="cs-insight-stats">
+                      <button
+                        type="button"
+                        className="cs-insight-stat"
+                        onClick={() => showInbox({ pill: "open" })}
+                      >
+                        <b>{insights.open}</b>
+                        <span>Open</span>
+                      </button>
+                      <button
+                        type="button"
+                        className="cs-insight-stat"
+                        onClick={() => showInbox({ pill: "resolved" })}
+                      >
+                        <b>{insights.resolved}</b>
+                        <span>Resolved</span>
+                      </button>
+                      <button
+                        type="button"
+                        className={
+                          mentions.length ? "cs-insight-stat is-mention" : "cs-insight-stat"
+                        }
+                        data-cs-ui="dashboard-mentions"
+                        onClick={() => showInbox({ pill: "mentions" })}
+                      >
+                        <b>{mentions.length}</b>
+                        <span>Mentions</span>
+                      </button>
+                      <div className="cs-insight-stat">
+                        <b>{insights.people.length}</b>
+                        <span>{insights.people.length === 1 ? "Person" : "People"}</span>
+                      </div>
+                      <div className="cs-insight-stat">
+                        <b>{new Set(rows.map((row) => row.thread.url || row.thread.route)).size}</b>
+                        <span>Pages</span>
+                      </div>
+                    </div>
+                    {mentions.length > 0 ? (
+                      <section className="cs-insight-card" data-cs-ui="dashboard-mention-list">
+                        <header>
+                          <h3>You were mentioned</h3>
+                        </header>
+                        <div className="cs-insight-recent">
+                          {mentions.slice(0, 6).map(({ row, hit }) => (
+                            <button
+                              key={row.thread.id}
+                              type="button"
+                              className="cs-insight-row"
+                              onClick={() =>
+                                showInbox({ pill: "mentions", threadId: row.thread.id })
+                              }
+                            >
+                              <Avatar name={hit.author} size={21} />
+                              <span className="cs-insight-who">
+                                <strong>{leadSentence(hit.body) || "Mentioned you"}</strong>
+                                <small>{hit.author} mentioned you</small>
+                              </span>
+                              <em>{agoPhrase(hit.createdAt)}</em>
+                            </button>
+                          ))}
+                        </div>
+                      </section>
+                    ) : null}
+                    <section className="cs-insight-card">
+                      <header>
+                        <h3>Who’s writing</h3>
+                        <p className="cs-insight-legend">
+                          <i className="is-open" /> Open <i className="is-done" /> Resolved
+                        </p>
+                      </header>
+                      <div className="cs-insight-list">
+                        {insights.people.map((person) => {
+                          const total = person.open + person.resolved;
+                          const scale = insights.people[0]
+                            ? insights.people[0].open + insights.people[0].resolved
+                            : 1;
+                          return (
+                            <button
+                              key={person.name}
+                              type="button"
+                              className="cs-insight-row"
+                              onClick={() => showInbox({ author: person.name })}
+                            >
+                              <Avatar name={person.name} size={21} />
+                              <span className="cs-insight-who">
+                                <strong>{person.name}</strong>
+                                <span className="cs-insight-bar" aria-hidden="true">
+                                  <i
+                                    className="is-open"
+                                    style={{ width: `${(person.open / scale) * 100}%` }}
+                                  />
+                                  <i
+                                    className="is-done"
+                                    style={{ width: `${(person.resolved / scale) * 100}%` }}
+                                  />
+                                </span>
+                              </span>
+                              <em>{total}</em>
+                            </button>
+                          );
+                        })}
+                      </div>
+                    </section>
+                    <section className="cs-insight-card">
+                      <header>
+                        <h3>Recent</h3>
+                      </header>
+                      <div className="cs-insight-recent">
+                        {insights.recent.map((row) => (
+                          <button
+                            key={row.thread.id}
+                            type="button"
+                            className="cs-insight-row"
+                            onClick={() => showInbox({ threadId: row.thread.id })}
+                          >
+                            <Avatar name={row.thread.createdBy} size={21} />
+                            <span className="cs-insight-who">
+                              <strong>
+                                {leadSentence(row.thread.messages[0]?.body ?? "Comment")}
+                              </strong>
+                              <small>{row.thread.createdBy}</small>
+                            </span>
+                            <em>{agoPhrase(row.thread.updatedAt)}</em>
+                          </button>
+                        ))}
+                      </div>
+                    </section>
+                  </>
+                ) : null}
+              </div>
+            </>
+          ) : (
+            <>
+              <header className="cs-dash-top">
+                <div className="cs-dash-pills">
+                  <div role="radiogroup" aria-label="Status">
+                    {(
+                      [
+                        ["any", `All (${counts.any})`],
+                        ["open", `Open (${counts.open})`],
+                        ["resolved", `Resolved (${counts.resolved})`],
+                        ["mine", "Mine"],
+                        ["mentions", `Mentions (${counts.mentions})`],
+                      ] as const
+                    ).map(([value, label]) => (
+                      <button
+                        key={value}
+                        type="button"
+                        role="radio"
+                        aria-checked={pill === value}
+                        data-cs-ui="dashboard-status"
+                        data-status={value}
+                        className={pill === value ? "cs-dash-pill is-on" : "cs-dash-pill"}
+                        onClick={() => choosePill(value)}
+                      >
+                        {label}
+                      </button>
+                    ))}
+                  </div>
+                  {authors.length > 0 ? <span className="cs-dash-sep" aria-hidden="true" /> : null}
+                  {authors.map(([name, count]) => (
+                    <button
+                      key={name}
+                      type="button"
+                      aria-pressed={author === name}
+                      data-cs-ui="dashboard-author"
+                      data-author={name}
+                      className={author === name ? "cs-dash-pill is-on" : "cs-dash-pill"}
+                      onClick={() => setAuthor((current) => (current === name ? null : name))}
+                    >
+                      <Avatar name={name} size={14} />
+                      {name} ({count})
+                    </button>
+                  ))}
+                </div>
+                {envFilter}
+                <div className="cs-dash-tools">
+                  <div className="cs-dash-menu">
+                    <button
+                      type="button"
+                      className="cs-dash-pill"
+                      data-cs-ui="dashboard-page"
+                      aria-expanded={menu === "page"}
+                      onClick={() => toggleMenu("page")}
+                    >
+                      {pageLabel}
+                      <Icon.ChevronDown />
+                    </button>
+                    {menu === "page" ? (
+                      <div className="cs-dash-menu-pop" role="menu">
+                        {(
+                          [
+                            ["all", "All pages"],
+                            ["here", "This page"],
+                          ] as const
+                        ).map(([value, label]) => (
+                          <button
+                            key={value}
+                            type="button"
+                            className={page === value ? "is-on" : ""}
+                            onClick={() => {
+                              setPage(value);
+                              setMenu(null);
+                            }}
+                          >
+                            {label}
+                          </button>
+                        ))}
+                        {pages.map((value) => (
+                          <button
+                            key={value}
+                            type="button"
+                            className={page === `route:${value}` ? "is-on" : ""}
+                            onClick={() => {
+                              setPage(`route:${value}`);
+                              setMenu(null);
+                            }}
+                          >
+                            {value}
+                          </button>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                  <div className="cs-dash-menu">
+                    <button
+                      type="button"
+                      className="cs-dash-pill"
+                      data-cs-ui="dashboard-roles"
+                      aria-expanded={menu === "role"}
+                      onClick={() => toggleMenu("role")}
+                    >
+                      {roleLabel}
+                      <Icon.ChevronDown />
+                    </button>
+                    {menu === "role" ? (
+                      <div className="cs-dash-menu-pop" role="menu">
+                        <button
+                          type="button"
+                          className={pill.startsWith("role:") ? "" : "is-on"}
+                          onClick={() => {
+                            if (pill.startsWith("role:")) choosePill("any");
+                            else setMenu(null);
+                          }}
+                        >
+                          All roles
+                        </button>
+                        {roleNames.map((role) => (
+                          <button
+                            key={role}
+                            type="button"
+                            data-cs-ui="dashboard-role"
+                            data-role={role}
+                            className={pill === `role:${role}` ? "is-on" : ""}
+                            onClick={() => choosePill(`role:${role}`)}
+                          >
+                            {role}
+                          </button>
+                        ))}
+                      </div>
+                    ) : null}
+                  </div>
+                  <div className="cs-dash-menu">
+                    <button
+                      type="button"
+                      className="cs-dash-pill"
+                      data-cs-ui="dashboard-sort"
+                      aria-expanded={menu === "sort"}
+                      onClick={() => toggleMenu("sort")}
+                    >
+                      {sort === "new" ? "Newest first" : "Oldest first"}
+                      <Icon.ChevronDown />
+                    </button>
+                    {menu === "sort" ? (
+                      <div className="cs-dash-menu-pop" role="menu">
+                        <button
+                          type="button"
+                          className={sort === "new" ? "is-on" : ""}
+                          onClick={() => {
+                            setSort("new");
+                            setMenu(null);
+                          }}
+                        >
+                          Newest first
+                        </button>
+                        <button
+                          type="button"
+                          className={sort === "old" ? "is-on" : ""}
+                          onClick={() => {
+                            setSort("old");
+                            setMenu(null);
+                          }}
+                        >
+                          Oldest first
+                        </button>
+                      </div>
+                    ) : null}
+                  </div>
+                  <button
+                    className={pane === "activity" ? "cs-dash-icon is-on" : "cs-dash-icon"}
+                    type="button"
+                    aria-label="Activity"
+                    onClick={() =>
+                      setPane((current) => (current === "activity" ? "thread" : "activity"))
+                    }
+                  >
+                    <Icon.Clock />
+                  </button>
+                  <div className="cs-dash-menu">
+                    <button
+                      className="cs-dash-icon"
+                      type="button"
+                      aria-label="More"
+                      aria-expanded={menu === "more"}
+                      onClick={() => toggleMenu("more")}
+                    >
+                      <Icon.Ellipsis />
+                    </button>
+                    {menu === "more" && selected ? (
+                      <div className="cs-dash-menu-pop" role="menu">
+                        <button
+                          type="button"
+                          onClick={() => {
+                            setMenu(null);
+                            onOpen(selected);
+                          }}
+                        >
+                          Show on page
+                        </button>
+                        {onReattach &&
+                        !readOnly &&
+                        !linked &&
+                        selected.thread.status === "open" &&
+                        here.has(selected.thread) &&
+                        selected.status !== "pinned" &&
+                        selected.status !== "drifted" ? (
+                          <button
+                            type="button"
+                            data-cs-ui="reattach"
+                            onClick={() => {
+                              setMenu(null);
+                              onReattach(selected);
+                            }}
+                          >
+                            Reattach
+                          </button>
+                        ) : null}
+                      </div>
+                    ) : null}
+                  </div>
+                  <button
+                    className="cs-dash-icon"
+                    type="button"
+                    aria-label="Close dashboard"
+                    onClick={onClose}
+                  >
+                    <Icon.Close />
+                  </button>
+                </div>
+              </header>
+              <div className="cs-dash-body">
+                <div className="cs-dash-list">
+                  {shown.length === 0 ? <p className="cs-dash-empty">No comments match.</p> : null}
+                  {shown.map((row) => {
+                    const { thread } = row;
+                    const message = thread.messages[0];
+                    const title = leadSentence(message?.body ?? "Comment");
+                    const rest = (message?.body ?? "").trim().slice(title.length).trim();
+                    const yours = mentionOfYou(thread, memberId, memberName);
+                    return (
+                      <article
+                        key={thread.id}
+                        className={thread.id === openId ? "cs-dash-row is-on" : "cs-dash-row"}
+                        data-cs-ui="dashboard-row"
+                        data-thread-id={thread.id}
+                        data-mentioned={yours ? "true" : undefined}
+                      >
+                        <input
+                          className="cs-dash-check"
+                          type="checkbox"
+                          aria-label={`Select ${title}`}
+                          checked={checked.has(thread.id)}
+                          onChange={() =>
+                            setChecked((current) => {
+                              const next = new Set(current);
+                              if (next.has(thread.id)) next.delete(thread.id);
+                              else next.add(thread.id);
+                              return next;
+                            })
+                          }
+                          onClick={(event) => event.stopPropagation()}
+                        />
+                        <button
+                          type="button"
+                          className="cs-dash-open"
+                          onClick={() => setOpenId(thread.id)}
+                        >
+                          <Avatar name={thread.createdBy} />
+                          <span className="cs-dash-copy">
+                            <strong>{title}</strong>
+                            {rest ? <p>{rest}</p> : null}
+                            {yours ? (
+                              <span className="cs-dash-tags">
+                                <span
+                                  className="cs-dash-tag is-mention"
+                                  data-cs-ui="dashboard-mention"
+                                >
+                                  @ you
+                                </span>
+                              </span>
+                            ) : null}
+                          </span>
+                          <span className="cs-dash-side">
+                            <b>{thread.createdBy}</b>
+                            <time dateTime={thread.updatedAt}>{agoPhrase(thread.updatedAt)}</time>
+                            <span
+                              className={
+                                thread.status === "resolved"
+                                  ? "cs-dash-state is-done"
+                                  : "cs-dash-state"
+                              }
+                            >
+                              <span className="cs-dash-dot" />
+                              {thread.status === "resolved" ? "Resolved" : "Open"}
+                            </span>
+                          </span>
+                        </button>
+                      </article>
+                    );
+                  })}
+                </div>
+                <div className="cs-dash-detail">
+                  {selected && first ? (
+                    <>
+                      <div className="cs-dash-detail-scroll">
+                        <div className="cs-dash-title">
+                          <h2>{leadSentence(first.body)}</h2>
+                          <div className="cs-dash-menu">
+                            <button
+                              type="button"
+                              className="cs-dash-pill cs-dash-status"
+                              aria-label="Status"
+                              aria-expanded={menu === "status"}
+                              disabled={linked || readOnly}
+                              onClick={() => toggleMenu("status")}
+                            >
+                              <span
+                                className={
+                                  selected.thread.status === "resolved"
+                                    ? "cs-dash-state is-done"
+                                    : "cs-dash-state"
+                                }
+                              >
+                                <span className="cs-dash-dot" />
+                                {selected.thread.status === "resolved" ? "Resolved" : "Open"}
+                              </span>
+                              <Icon.ChevronDown />
+                            </button>
+                            {menu === "status" ? (
+                              <div className="cs-dash-menu-pop" role="menu">
+                                <button type="button" onClick={() => void setStatus("open")}>
+                                  Open
+                                </button>
+                                <button type="button" onClick={() => void setStatus("resolved")}>
+                                  Resolved
+                                </button>
+                              </div>
+                            ) : null}
+                          </div>
+                        </div>
+                        {mentionOfYou(selected.thread, memberId, memberName) ? (
+                          <div className="cs-dash-tags">
+                            <span className="cs-dash-tag is-mention">@ you</span>
+                          </div>
+                        ) : null}
+                        <div className="cs-dash-meta">
+                          <Avatar name={selected.thread.createdBy} size={21} />
+                          <strong>{selected.thread.createdBy}</strong>
+                          <time dateTime={selected.thread.createdAt}>
+                            {agoPhrase(selected.thread.createdAt)}
+                          </time>
+                          <span className="cs-dash-tag">{selected.thread.role ?? "All users"}</span>
+                        </div>
+                        <p className="cs-dash-body-text">
+                          <MessageText body={first.body} mentions={first.mentions} />
+                        </p>
+                        <div className="cs-dash-media">
+                          {shots.map((file) => (
+                            <a
+                              key={file.id}
+                              className="cs-dash-shot"
+                              href={file.url}
+                              target="_blank"
+                              rel="noreferrer noopener"
+                            >
+                              <img src={file.url} alt={file.name} />
+                            </a>
+                          ))}
+                          {clips.map((file) => (
+                            <a
+                              key={file.id}
+                              className="cs-dash-file"
+                              href={file.url}
+                              target="_blank"
+                              rel="noreferrer noopener"
+                            >
+                              <span className="cs-dash-play">
+                                <Icon.Play />
+                              </span>
+                              <span>
+                                <strong>{file.name}</strong>
+                                <small>{formatSize(file.size)}</small>
+                              </span>
+                            </a>
+                          ))}
+                          <button
+                            className="cs-dash-add"
+                            type="button"
+                            onClick={() => fileInput.current?.click()}
+                          >
+                            <Icon.Camera />+ Add screenshot
+                          </button>
+                        </div>
+                        <div className="cs-dash-tabs" role="tablist">
+                          {(
+                            [
+                              [
+                                "thread",
+                                `Thread (${Math.max(0, selected.thread.messages.length - 1)})`,
+                              ],
+                              ["activity", "Activity"],
+                              ["related", "Related"],
+                            ] as const
+                          ).map(([value, label]) => (
+                            <button
+                              key={value}
+                              type="button"
+                              role="tab"
+                              aria-selected={pane === value}
+                              className={pane === value ? "is-on" : ""}
+                              onClick={() => setPane(value)}
+                            >
+                              {label}
+                            </button>
+                          ))}
+                        </div>
+                        {pane === "thread" ? (
+                          <div className="cs-dash-thread" role="tabpanel">
+                            {selected.thread.messages.slice(1).length === 0 ? (
+                              <p className="cs-dash-empty">No replies yet.</p>
+                            ) : null}
+                            {selected.thread.messages.slice(1).map((message) => (
+                              <div key={message.id} className="cs-dash-note">
+                                <Avatar name={message.author} size={21} />
+                                <div>
+                                  <header>
+                                    <strong>{message.author}</strong>
+                                    <time dateTime={message.createdAt}>
+                                      {agoPhrase(message.createdAt)}
+                                    </time>
+                                    {namesYou(message, memberId, memberName) &&
+                                    !fromYou(message, memberId, memberName) ? (
+                                      <span className="cs-dash-tag is-mention">@ you</span>
+                                    ) : null}
+                                  </header>
+                                  {message.body ? (
+                                    <p>
+                                      <MessageText
+                                        body={message.body}
+                                        mentions={message.mentions}
+                                      />
+                                    </p>
+                                  ) : null}
+                                  <div className="cs-dash-media">
+                                    {(message.attachments ?? [])
+                                      .filter(
+                                        (file) =>
+                                          file.contentType.startsWith("video/") ||
+                                          file.contentType.startsWith("image/"),
+                                      )
+                                      .map((file) =>
+                                        file.contentType.startsWith("image/") ? (
+                                          <a
+                                            key={file.id}
+                                            className="cs-dash-shot"
+                                            href={file.url}
+                                            target="_blank"
+                                            rel="noreferrer noopener"
+                                          >
+                                            <img src={file.url} alt={file.name} />
+                                          </a>
+                                        ) : (
+                                          <a
+                                            key={file.id}
+                                            className="cs-dash-file"
+                                            href={file.url}
+                                            target="_blank"
+                                            rel="noreferrer noopener"
+                                          >
+                                            <span className="cs-dash-play">
+                                              <Icon.Play />
+                                            </span>
+                                            <span>
+                                              <strong>{file.name}</strong>
+                                              <small>{formatSize(file.size)}</small>
+                                            </span>
+                                          </a>
+                                        ),
+                                      )}
+                                  </div>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        ) : null}
+                        {pane === "activity" ? (
+                          <div className="cs-dash-thread" role="tabpanel">
+                            {selected.thread.messages.map((message, index) => (
+                              <div key={message.id} className="cs-dash-note">
+                                <Avatar name={message.author} size={21} />
+                                <div>
+                                  <header>
+                                    <strong>{message.author}</strong>
+                                    <time dateTime={message.createdAt}>
+                                      {agoPhrase(message.createdAt)}
+                                    </time>
+                                  </header>
+                                  <p>{index === 0 ? "Started this comment" : "Replied"}</p>
+                                </div>
+                              </div>
+                            ))}
+                          </div>
+                        ) : null}
+                        {pane === "related" ? (
+                          <div className="cs-dash-thread" role="tabpanel">
+                            {related.length === 0 ? (
+                              <p className="cs-dash-empty">
+                                Nothing else on this page or this component.
+                              </p>
+                            ) : null}
+                            {related.map(({ thread, because }) => (
+                              <button
+                                key={thread.id}
+                                type="button"
+                                className="cs-dash-file"
+                                onClick={() => setOpenId(thread.id)}
+                              >
+                                <Avatar name={thread.createdBy} size={21} />
+                                <span>
+                                  <strong>
+                                    {leadSentence(thread.messages[0]?.body ?? "Comment")}
+                                  </strong>
+                                  <small>{because}</small>
+                                </span>
+                              </button>
+                            ))}
+                          </div>
+                        ) : null}
+                        {error ? <p className="cs-error">{error}</p> : null}
+                        {linked ? (
+                          <p className="cs-hint">Resolve this in {selected.thread.environment}.</p>
+                        ) : null}
+                      </div>
+                      {readOnly ? null : (
+                        <form
+                          className="cs-dash-reply"
+                          onSubmit={(event) => {
+                            event.preventDefault();
+                            void send();
+                          }}
+                        >
+                          <Avatar name={memberName || "You"} size={21} />
+                          <MentionTextarea
+                            aria-label="Reply"
+                            placeholder="Write a reply…"
+                            rows={1}
+                            value={reply}
+                            members={members}
+                            onValueChange={setReply}
+                            onMention={(person) => picked.current.set(person.id, person)}
+                          />
+                          <input
+                            ref={fileInput}
+                            type="file"
+                            accept="image/*,video/*"
+                            multiple
+                            hidden
+                            onChange={(event) => {
+                              addFiles(event.target.files);
+                              event.target.value = "";
+                            }}
+                          />
+                          <button
+                            className="cs-icon-button"
+                            type="button"
+                            aria-label="Attach a file"
+                            onClick={() => fileInput.current?.click()}
+                          >
+                            <Icon.Paperclip />
+                          </button>
+                          <button
+                            className="cs-icon-button"
+                            type="button"
+                            aria-label="Mention someone"
+                            onClick={() =>
+                              setReply(
+                                (current) =>
+                                  `${current}${current && !current.endsWith(" ") ? " " : ""}@`,
+                              )
+                            }
+                          >
+                            @
+                          </button>
+                          <button
+                            className="cs-dash-send"
+                            type="submit"
+                            aria-label="Send reply"
+                            disabled={
+                              busy || files.uploading || (!reply.trim() && !files.ids.length)
+                            }
+                          >
+                            <Icon.Plane />
+                          </button>
+                        </form>
+                      )}
+                    </>
+                  ) : (
+                    <p className="cs-dash-empty">No comment selected.</p>
+                  )}
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      </section>
+    </>
+  );
+}