@dailies-studio/shot-editor 0.1.0 → 0.2.0

package/src/panels/comments/CommentThread.tsx

@@ -0,0 +1,346 @@
+// ONE THREAD (Paper page 20, "Thread"; S5): where it is, Resolve, the
+// assignee, the other place's notes about it, its messages, "Ask agent to
+// fix", and the reply composer. The Comments panel draws every thread inline
+// (a card, a Studio spot, a Frame pin from the old board frame, a removed
+// one).
+import { useState } from "react";
+import type { MouseEvent } from "react";
+import { useContextMenu } from "@dailies-studio/ui";
+import type { MenuEntry } from "@dailies-studio/ui";
+import * as api from "../../api.js";
+import type { CommentMessage as Message, CommentThread as Thread } from "../../api.js";
+import { useShotEditor, useStore } from "../../state/context.js";
+import {
+  commentPrompt,
+  notesAbout,
+  orphanOf,
+  personLabel,
+  placeOfKind,
+  plainText,
+  threadWhere,
+} from "../../state/comments.js";
+import type { Doc3D } from "@dailies-studio/shot/doc";
+import { agentInEditor } from "../agent/agentGate.js";
+import { CommentComposer } from "./CommentComposer.js";
+import { CHEVRON_ICON, CommentBody, PersonAvatar, RESOLVE_ICON, shortAgo, sparkle, useComments } from "./parts.js";
+
+export function CommentThread(props: { className?: string }) {
+  const store = useStore();
+  const { comments } = store;
+  const { detail, names, threads } = useComments();
+  const doc = useShotEditor((s) => s.doc);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const { open: openMenu, menu } = useContextMenu();
+  const [refusal, setRefusal] = useState<string | null>(null);
+  if (detail === null || doc === null) return null;
+  const thread = detail;
+  const where = threadWhere(doc, thread.anchor);
+  const orphan = orphanOf(doc, thread.anchor);
+  const resolved = thread.status === "resolved";
+  const here = placeOfKind(thread.anchor.kind);
+  const notes = notesAbout(doc, threads, thread);
+  const linked = new Set(thread.links.map((l) => l.threadId));
+  // "Link to Studio" / "Link to board" (S5): the other place's open threads,
+  // and any already linked, checked.
+  const candidates = threads.filter(
+    (t) => placeOfKind(t.anchor.kind) !== here && (t.status === "open" || linked.has(t.id)),
+  );
+  const linkMenu: MenuEntry = {
+    kind: "submenu",
+    label: here === "board" ? "Link to Studio" : "Link to board",
+    disabled: !thread.can.reply || candidates.length === 0,
+    title:
+      candidates.length === 0
+        ? here === "board"
+          ? "No Studio comments to link"
+          : "No board comments to link"
+        : undefined,
+    items: candidates.map(
+      (t): MenuEntry => ({
+        kind: "action",
+        id: t.id,
+        label: noteLabel(doc, t, names),
+        checked: linked.has(t.id),
+        onSelect: () => say(linked.has(t.id) ? comments.unlink(thread.id, t.id) : comments.link(thread.id, t.id)),
+      }),
+    ),
+  };
+
+  const say = (run: Promise<string | null>): void => {
+    void run.then(setRefusal);
+  };
+  const menuAt = (e: MouseEvent<HTMLElement>, items: MenuEntry[]): void => {
+    const r = e.currentTarget.getBoundingClientRect();
+    openMenu({ x: r.left, y: r.bottom + 4 }, items);
+  };
+  const assignMenu = (e: MouseEvent<HTMLElement>): void => {
+    const at = e.currentTarget.getBoundingClientRect();
+    void comments.mentionable("").then(
+      (res) =>
+        openMenu({ x: at.left, y: at.bottom + 4 }, [
+          ...res.people.map(
+            (p): MenuEntry => ({
+              kind: "action",
+              id: p.id,
+              label: personLabel(p),
+              checked: thread.assignee?.id === p.id,
+              onSelect: () => say(comments.assign(thread.id, p.id)),
+            }),
+          ),
+          { kind: "separator" },
+          {
+            kind: "action",
+            id: "unassign",
+            label: "Unassign",
+            disabled: thread.assignee === null,
+            onSelect: () => say(comments.assign(thread.id, null)),
+          },
+        ]),
+      (err: unknown) => setRefusal(err instanceof Error ? err.message : String(err)),
+    );
+  };
+
+  return (
+    <div
+      className={`comment-thread${props.className === undefined ? "" : ` ${props.className}`}`}
+      role="dialog"
+      aria-label={`Comment, ${where.time === null ? "" : `${where.time} · `}${where.text}`}
+      data-testid="comment-thread"
+      data-kind={thread.anchor.kind}
+    >
+      <div className="comment-thread-head">
+        {where.time === null ? null : (
+          <>
+            <span className="comment-thread-time">{where.time}</span>
+            <span className="comment-thread-dot" aria-hidden="true">
+              ·
+            </span>
+          </>
+        )}
+        <span className="comment-thread-where">{where.text}</span>
+        {thread.can.resolve ? (
+          <button
+            type="button"
+            className="comment-thread-resolve"
+            data-testid="comment-resolve"
+            onClick={() => say(comments.setStatus(thread.id, resolved ? "open" : "resolved"))}
+          >
+            {RESOLVE_ICON}
+            {resolved ? "Reopen" : "Resolve"}
+          </button>
+        ) : null}
+        <button
+          type="button"
+          className="comment-thread-more"
+          aria-label="More"
+          onClick={(e) =>
+            menuAt(e, [
+              {
+                kind: "action",
+                id: "close",
+                label: "Close",
+                shortcut: "Esc",
+                onSelect: () => comments.close(),
+              },
+              linkMenu,
+              { kind: "separator" },
+              {
+                kind: "action",
+                id: "delete",
+                label: "Delete thread",
+                danger: true,
+                disabled: !thread.can.delete,
+                title: thread.can.delete ? undefined : "Only its author or a Project editor can delete a thread",
+                onSelect: () => say(comments.remove(thread.id)),
+              },
+            ])
+          }
+        >
+          ···
+        </button>
+      </div>
+      <div className="comment-thread-meta">
+        <span className="comment-thread-meta-label">Assignee</span>
+        <button
+          type="button"
+          className="comment-assignee"
+          data-testid="comment-assignee"
+          disabled={!thread.can.assign}
+          onClick={assignMenu}
+        >
+          {thread.assignee === null ? (
+            <span className="comment-assignee-none">Unassigned</span>
+          ) : (
+            <>
+              <PersonAvatar userId={thread.assignee.id} label={personLabel(thread.assignee)} size={18} />
+              <span>{personLabel(thread.assignee)}</span>
+            </>
+          )}
+          {thread.can.assign ? CHEVRON_ICON : null}
+        </button>
+        <span className="comment-thread-spacer" />
+        <span className={`comment-status${resolved ? " is-resolved" : ""}`}>
+          <span className="comment-status-dot" aria-hidden="true" />
+          {resolved ? "Resolved" : "Open"}
+        </span>
+      </div>
+      {orphan !== null && thread.snapshotKey !== null ? (
+        <img className="comment-thread-snapshot" src={api.snapshotUrl(thread.id)} alt={`${where.text}, as it was`} />
+      ) : null}
+      {notes.map((note) => (
+        <NoteStrip key={note.id} doc={doc} note={note} names={names} onOpen={() => void store.openThread(note.id)} />
+      ))}
+      <div className="comment-thread-messages">
+        {(thread.messages ?? (thread.head === null ? [] : [thread.head])).map((m) => (
+          <CommentMessage key={m.id} message={m} names={names} />
+        ))}
+      </div>
+      {refusal === null ? null : (
+        <p className="comment-refusal" role="alert">
+          {refusal}
+        </p>
+      )}
+      {readOnly || resolved || !agentInEditor() ? null : (
+        <div className="comment-thread-agent">
+          <button
+            type="button"
+            className="comment-agent-button"
+            data-testid="comment-ask-agent"
+            onClick={() => store.openAgentWith(commentPrompt(doc, [thread]))}
+          >
+            {sparkle(13)}
+            Ask agent to fix
+          </button>
+        </div>
+      )}
+      {thread.can.reply ? (
+        <CommentComposer key={thread.id} threadKey={thread.id} variant="reply" onCancel={() => comments.close()} />
+      ) : null}
+      {menu}
+    </div>
+  );
+}
+
+/** A thread from the other place, in a menu: where it sits and its words. */
+function noteLabel(doc: Doc3D, t: Thread, names: Readonly<Record<string, string>>): string {
+  const where = threadWhere(doc, t.anchor);
+  const words = plainText(t.head?.body ?? "", names).slice(0, 40) || "Comment";
+  return `${where.time === null ? "" : `${where.time} `}${where.text}: ${words}`;
+}
+
+/** S5's note strip: a thread from the other place about this one. On the
+ *  board, "Studio note" with its moment and "Open in Studio"; in the Studio,
+ *  "Board note" and "Open on board". */
+function NoteStrip(props: { doc: Doc3D; note: Thread; names: Readonly<Record<string, string>>; onOpen: () => void }) {
+  const { note } = props;
+  const studio = note.anchor.kind === "studio";
+  const where = threadWhere(props.doc, note.anchor);
+  const words = plainText(note.head?.body ?? "", props.names).slice(0, 80);
+  return (
+    <div className="comment-note" data-testid={studio ? "comment-studio-note" : "comment-board-note"}>
+      {where.time === null ? null : <span className="comment-note-time">{where.time}</span>}
+      <span className="comment-note-text">
+        {studio ? "Studio note" : "Board note"}: “{words || "Comment"}”
+      </span>
+      <button type="button" className="comment-note-open" onClick={props.onOpen}>
+        {studio ? "Open in Studio" : "Open on board"}
+      </button>
+    </div>
+  );
+}
+
+/** One message: who, when, the words with their mention chips, and the
+ *  marker when an agent wrote it on someone's behalf. Its author edits or
+ *  deletes it from the "···" on hover. */
+export function CommentMessage(props: { message: Message; names: Readonly<Record<string, string>> }) {
+  const { message: m } = props;
+  const { comments } = useStore();
+  const { open: openMenu, menu } = useContextMenu();
+  const [editing, setEditing] = useState<string | null>(null);
+  const [refusal, setRefusal] = useState<string | null>(null);
+  const save = async (): Promise<void> => {
+    if (editing === null) return;
+    const said = await comments.editMessage(m.threadId, m.id, editing);
+    setRefusal(said);
+    if (said === null) setEditing(null);
+  };
+  return (
+    <div className="comment-message" data-testid="comment-message">
+      <PersonAvatar userId={m.authorId} label={m.authorLabel} size={24} />
+      <div className="comment-message-main">
+        <div className="comment-message-head">
+          <span className="comment-message-name">{m.authorLabel}</span>
+          <span className="comment-message-time" title={new Date(m.createdAt).toLocaleString()}>
+            {shortAgo(m.createdAt)}
+            {m.editedAt === null ? "" : " · edited"}
+          </span>
+          {m.viaAgent ? (
+            <span className="comment-via-agent" data-testid="comment-via-agent" title="An agent wrote this for them">
+              {sparkle(9)}
+              via agent
+            </span>
+          ) : null}
+          {(m.can.edit || m.can.delete) && !m.deleted && editing === null ? (
+            <button
+              type="button"
+              className="comment-message-more"
+              aria-label="Message actions"
+              onClick={(e) => {
+                const r = e.currentTarget.getBoundingClientRect();
+                openMenu({ x: r.left, y: r.bottom + 4 }, [
+                  { kind: "action", id: "edit", label: "Edit", disabled: !m.can.edit, onSelect: () => setEditing(m.body) },
+                  {
+                    kind: "action",
+                    id: "delete",
+                    label: "Delete",
+                    danger: true,
+                    disabled: !m.can.delete,
+                    onSelect: () => void comments.deleteMessage(m.threadId, m.id).then(setRefusal),
+                  },
+                ]);
+              }}
+            >
+              ···
+            </button>
+          ) : null}
+        </div>
+        {m.deleted ? (
+          <p className="comment-message-body is-deleted">Message deleted</p>
+        ) : editing === null ? (
+          <CommentBody body={m.body} names={props.names} className="comment-message-body" />
+        ) : (
+          <div className="comment-message-edit">
+            <textarea
+              className="comment-field"
+              aria-label="Edit message"
+              value={editing}
+              autoFocus
+              onChange={(e) => setEditing(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Escape") setEditing(null);
+                else if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) void save();
+                else return;
+                e.preventDefault();
+                e.stopPropagation();
+              }}
+            />
+            <div className="comment-message-edit-actions">
+              <button type="button" className="btn" onClick={() => setEditing(null)}>
+                Cancel
+              </button>
+              <button type="button" className="comment-post" onClick={() => void save()}>
+                Save
+              </button>
+            </div>
+          </div>
+        )}
+        {refusal === null ? null : (
+          <p className="comment-refusal" role="alert">
+            {refusal}
+          </p>
+        )}
+      </div>
+      {menu}
+    </div>
+  );
+}

package/src/panels/comments/CommentsPanel.tsx

@@ -0,0 +1,336 @@
+// THE COMMENTS TAB (Paper page 20, "Comments panel"; S5): one thread list per
+// place, never mixed. On the board: card threads by card, then Frame pins by
+// Shot and Frame. In the Studio: Studio threads by Shot, in frame order. Four
+// filters over either. A row opens its thread where it sits
+// (`store.openThread`), and the thread itself opens inline here. A Frame pin
+// from the old board frame still lists, under its Shot and Frame.
+import type { ReactNode } from "react";
+import { useShotEditor, useStore } from "../../state/context.js";
+import {
+  boardThreads,
+  commentPrompt,
+  filterThreads,
+  groupCardThreads,
+  groupStudioThreads,
+  groupThreads,
+  NEW_THREAD,
+  personLabel,
+  placeOfKind,
+  plainText,
+  resolvedToday,
+  studioPinsFor,
+  studioThreads,
+  threadWhere,
+} from "../../state/comments.js";
+import type { CommentsFilter } from "../../state/comments.js";
+import type { CommentCardAnchor, CommentStudioAnchor, CommentThread as Thread } from "../../api.js";
+import { shotNameOf, shotNumberOf } from "../../state/storyboardModel.js";
+import { agentInEditor } from "../agent/agentGate.js";
+import { StillPicture } from "../storyboard/StillThumbs.js";
+import { CommentComposer } from "./CommentComposer.js";
+import { CommentThread } from "./CommentThread.js";
+import { CardCommentCounts, PersonAvatar, RESOLVED_ICON, shortAgo, sparkle, useComments } from "./parts.js";
+
+const FILTERS: { value: CommentsFilter; label: string }[] = [
+  { value: "open", label: "Open" },
+  { value: "resolved", label: "Resolved" },
+  { value: "mine", label: "Mine" },
+  { value: "mentions", label: "Mentions" },
+];
+
+export function CommentsPanel() {
+  const store = useStore();
+  const state = useComments();
+  const doc = useShotEditor((s) => s.doc);
+  const readOnly = useShotEditor((s) => s.readOnly);
+  const onBoard = useShotEditor((s) => s.storyboardOpen);
+  const shotHere = useShotEditor((s) => s.enteredScene ?? s.sceneId);
+  if (doc === null) return null;
+  const { filter, matched, openId, detail, draft, names, loaded, error } = state;
+  // ONE THREAD LIST PER PLACE (S5). Never mixed.
+  const threads: readonly Thread[] = onBoard ? boardThreads(state.threads) : studioThreads(state.threads);
+  const open = threads.filter((t) => t.status === "open");
+  const shown = filterThreads(threads, filter, matched);
+  const cardGroups = onBoard ? groupCardThreads(doc, shown) : [];
+  const groups = onBoard ? groupThreads(doc, shown) : [];
+  const studioGroups = onBoard ? [] : groupStudioThreads(doc, shown);
+  const pinNumbers = new Map(studioPinsFor(doc, state.threads, openId).map((p) => [p.threadId, p.initials]));
+  const today = filter === "open" ? resolvedToday(threads, Date.now()) : [];
+  const studioOpenHere =
+    shotHere === null ? 0 : open.filter((t) => t.anchor.kind === "studio" && t.anchor.sceneId === shotHere).length;
+  // The place's name and its open count, apart, so a long shot name is the
+  // part that gives way in a narrow column and the count always shows.
+  const inShot = !onBoard && shotHere !== null && doc.scenesById[shotHere] !== undefined;
+  const chipName = inShot ? `${shotNumberOf(doc, shotHere) ?? ""} ${shotNameOf(doc, shotHere)}`.trim() : "Comments";
+  const chipOpen = inShot ? studioOpenHere : open.length;
+  const panelDraft =
+    draft !== null && draft.anchor.kind !== "frame" && placeOfKind(draft.anchor.kind) === (onBoard ? "board" : "studio")
+      ? draft.anchor
+      : null;
+  const mentionsUnread = state.inbox.items.some(
+    (item) => item.kind === "mention" && item.readAt === null && item.projectId === state.projectId,
+  );
+  // A thread carries no "resolved through an agent" bit; the inbox's resolve
+  // item does, for the people who follow the thread.
+  const agentResolved = new Set(
+    state.inbox.items.filter((item) => item.kind === "resolved" && item.viaAgent).map((item) => item.threadId),
+  );
+  const count = (f: CommentsFilter): number | null =>
+    f === "open" ? open.length : f === "resolved" ? threads.length - open.length : f === filter && matched !== null ? shown.length : null;
+  const inline = (t: Thread): boolean => t.id === openId && detail !== null;
+  const row = (t: Thread, orphan: boolean, lead?: ReactNode) => (
+    <div key={t.id}>
+      <ThreadRow
+        thread={t}
+        names={names}
+        active={t.id === openId}
+        orphan={orphan}
+        lead={lead}
+        onOpen={() => void store.openThread(t.id)}
+      />
+      {inline(t) ? <CommentThread className="is-inline" /> : null}
+    </div>
+  );
+  const empty =
+    filter === "open"
+      ? onBoard
+        ? "No open comments. Select a card and press C to comment on it."
+        : "No open Studio comments. Press C, then click the picture to leave one at the playhead."
+      : filter === "resolved"
+        ? "Nothing resolved yet."
+        : filter === "mine"
+          ? "No threads you started or were assigned."
+          : "No one has mentioned you here.";
+
+  return (
+    <div className="comments-panel" data-testid="comments-panel" data-place={onBoard ? "board" : "studio"}>
+      <div className="comments-place-bar" data-testid="comments-place-bar">
+        <span className="comments-place-title">{onBoard ? "Storyboard" : "Studio"}</span>
+        <span className="comments-place-sub">{onBoard ? "talks about the plan" : "talks about the picture at a moment"}</span>
+        <span className="comment-thread-spacer" />
+        <span className="comments-place-chip" title={`${chipName} · ${chipOpen} open`}>
+          <span className="comments-place-chip-name">{chipName}</span>
+          <span className="comments-place-chip-count"> · {chipOpen} open</span>
+        </span>
+      </div>
+      <div className="comments-filters" role="radiogroup" aria-label="Show">
+        {FILTERS.map((f) => {
+          const n = count(f.value);
+          return (
+            <button
+              key={f.value}
+              type="button"
+              role="radio"
+              aria-checked={filter === f.value}
+              className={`comments-filter${filter === f.value ? " is-active" : ""}`}
+              data-testid={`comments-filter-${f.value}`}
+              onClick={() => void store.comments.setFilter(f.value)}
+            >
+              {f.label}
+              {n === null ? null : <span className="comments-filter-count">{n}</span>}
+              {f.value === "mentions" && mentionsUnread ? <span className="comments-unread-dot" aria-label="New" /> : null}
+            </button>
+          );
+        })}
+      </div>
+      <div className="comments-list">
+        {panelDraft === null ? null : <PanelDraft anchor={panelDraft} />}
+        {error !== null ? (
+          <p className="comments-empty" role="alert">
+            {error}
+          </p>
+        ) : !loaded || (filter !== "open" && filter !== "resolved" && matched === null) ? (
+          <p className="comments-empty">Loading comments…</p>
+        ) : shown.length === 0 && today.length === 0 && panelDraft === null ? (
+          <p className="comments-empty" data-testid="comments-empty">
+            {empty}
+          </p>
+        ) : null}
+        {cardGroups.map((group, g) => (
+          <section key={group.id} className={`comments-shot${g > 0 ? " is-later" : ""}`} data-testid="comments-card">
+            <header className="comments-shot-head">
+              <span className="comments-card-label">
+                {group.orphan === null ? `On card · ${group.label}` : group.label}
+              </span>
+              <span className="comment-thread-spacer" />
+              {group.orphan === null ? (
+                <CardCommentCounts target={group.target} />
+              ) : null}
+            </header>
+            {group.threads.map((t) => row(t, group.orphan !== null))}
+          </section>
+        ))}
+        {studioGroups.map((group, g) => (
+          <section key={group.sceneId} className={`comments-shot${g > 0 ? " is-later" : ""}`} data-testid="comments-studio-shot">
+            <header className="comments-shot-head">
+              {group.number === null ? null : <span className="comments-shot-number">{group.number}</span>}
+              <span className="comments-shot-name">{group.name}</span>
+              <span className="comment-thread-spacer" />
+              {group.open > 0 ? <span className="comments-shot-open">{group.open} open</span> : null}
+            </header>
+            {group.threads.map((t) => {
+              const where = threadWhere(doc, t.anchor);
+              const n = pinNumbers.get(t.id);
+              return row(
+                t,
+                group.number === null,
+                <span className="comments-thread-where">
+                  {n === undefined ? null : <span className="comments-studio-pin">{n}</span>}
+                  <span className="comments-studio-time">{where.time}</span>
+                  <span className="comments-thread-where-text">{where.text}</span>
+                </span>,
+              );
+            })}
+          </section>
+        ))}
+        {groups.map((group, g) => (
+          <section
+            key={`${group.number ?? "gone"}:${group.sceneId}`}
+            className={`comments-shot${g > 0 || cardGroups.length > 0 ? " is-later" : ""}`}
+          >
+            <header className="comments-shot-head">
+              {group.number === null ? null : <span className="comments-shot-number">{group.number}</span>}
+              <span className="comments-shot-name">{group.name}</span>
+              <span className="comment-thread-spacer" />
+              {group.open > 0 ? <span className="comments-shot-open">{group.open} open</span> : null}
+            </header>
+            {group.frames.map((frame, f) => (
+              <div key={frame.stillId} className="comments-frame">
+                <div className={`comments-frame-head${f > 0 ? " is-later" : ""}`}>
+                  {frame.orphan === null ? (
+                    <>
+                      <StillPicture
+                        sceneId={group.sceneId}
+                        frame={frame.frame}
+                        width={32}
+                        height={18}
+                        className="comments-frame-thumb"
+                      />
+                      <span className="comments-frame-label">
+                        {frame.label} · {(frame.frame / (doc.fps.num / doc.fps.den)).toFixed(1)} s
+                      </span>
+                    </>
+                  ) : (
+                    <>
+                      <span className="comments-frame-thumb is-removed" aria-hidden="true" />
+                      <span className="comments-frame-removed">Frame removed</span>
+                      <span className="comments-frame-was">was {frame.label}</span>
+                    </>
+                  )}
+                </div>
+                {frame.threads.map((t) => row(t, frame.orphan !== null))}
+              </div>
+            ))}
+          </section>
+        ))}
+        {today.length > 0 ? (
+          <section className="comments-today" data-testid="comments-resolved-today">
+            <div className="comments-today-label">Resolved today</div>
+            {today.map((t) => (
+              <button key={t.id} type="button" className="comments-today-row" onClick={() => void store.openThread(t.id)}>
+                {RESOLVED_ICON}
+                <span className="comments-today-title">{plainText(t.head?.body ?? "", names) || "Comment"}</span>
+                {agentResolved.has(t.id) ? (
+                  <span className="comment-via-agent">
+                    {sparkle(9)}
+                    via agent
+                  </span>
+                ) : null}
+              </button>
+            ))}
+          </section>
+        ) : null}
+      </div>
+      {readOnly || open.length === 0 || !agentInEditor() ? null : (
+        <div className="comments-foot">
+          <button
+            type="button"
+            className="comments-agent-all"
+            data-testid="comments-ask-agent"
+            onClick={() => store.openAgentWith(commentPrompt(doc, open))}
+          >
+            {sparkle(13)}
+            Ask agent to fix {open.length} open
+          </button>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** A card or Studio thread being written, at the top of its place's list:
+ *  where it goes, then the composer. */
+function PanelDraft(props: { anchor: CommentCardAnchor | CommentStudioAnchor }) {
+  const store = useStore();
+  const doc = useShotEditor((s) => s.doc);
+  if (doc === null) return null;
+  const where = threadWhere(doc, props.anchor);
+  return (
+    <div className="comment-thread is-inline comments-draft" data-testid="comments-draft">
+      <CommentComposer
+        threadKey={NEW_THREAD}
+        variant="new"
+        onCancel={() => store.comments.cancelDraft()}
+        head={
+          <div className="comment-composer-head">
+            {where.time === null ? null : <span className="comments-studio-time">{where.time}</span>}
+            <span className="comment-composer-shot">{where.text}</span>
+          </div>
+        }
+      />
+    </div>
+  );
+}
+
+function ThreadRow(props: {
+  thread: Thread;
+  names: Readonly<Record<string, string>>;
+  active: boolean;
+  orphan: boolean;
+  /** A line above the author: the Studio's pin number, time and layer. */
+  lead?: ReactNode;
+  onOpen: () => void;
+}) {
+  const { thread: t } = props;
+  const author = t.head?.authorLabel ?? "Someone";
+  const replies = Math.max(0, t.messageCount - 1);
+  return (
+    <button
+      type="button"
+      className={`comments-thread${props.active ? " is-active" : ""}`}
+      data-testid="comments-thread"
+      aria-current={props.active ? "true" : undefined}
+      onClick={props.onOpen}
+    >
+      <PersonAvatar userId={t.createdBy} label={author} size={22} className="is-tailed" />
+      <span className="comments-thread-main">
+        {props.lead}
+        <span className="comments-thread-head">
+          <span className="comments-thread-name">{author}</span>
+          <span className="comments-thread-time">{shortAgo(t.lastMessageAt)}</span>
+          <span className="comment-thread-spacer" />
+          {t.viewer.unread ? <span className="comments-unread-dot" aria-label="Unread" data-testid="comments-unread" /> : null}
+        </span>
+        <span className="comments-thread-body">{plainText(t.head?.body ?? "", props.names)}</span>
+        <span className="comments-thread-meta">
+          <span>{replies === 0 ? "No replies" : replies === 1 ? "1 reply" : `${replies} replies`}</span>
+          {t.assignee === null ? (
+            <span>Unassigned</span>
+          ) : (
+            <span className="comments-thread-assignee">
+              <PersonAvatar userId={t.assignee.id} label={personLabel(t.assignee)} size={14} />
+              {personLabel(t.assignee)}
+            </span>
+          )}
+        </span>
+        {props.orphan ? (
+          <span className="comments-thread-orphan">
+            {t.anchor.kind === "frame"
+              ? "Shows the picture you saw. Undo the delete and the pin comes back."
+              : "Undo the delete and it comes back where it was."}
+          </span>
+        ) : null}
+      </span>
+    </button>
+  );
+}