@skillcdn/console 0.1.15 → 0.1.17

package/src/components/calendar.tsx

@@ -1,10 +1,17 @@
-import type { ReactNode, SyntheticEvent } from "react";
-import { OPEN_TASK_STATES, type RestCategory, type RestPerson, type RestTask } from "../api.js";
+import { type ReactNode, type SyntheticEvent, useState } from "react";
+import {
+  OPEN_TASK_STATES,
+  type RestCategory,
+  type RestGoal,
+  type RestPerson,
+  type RestTask,
+} from "../api.js";
 import {
   addDays,
   addMonths,
   daysBetween,
   firstDayOfWeek,
+  formatDay,
   formatDays,
   formatMonth,
   formatWeekday,
@@ -16,15 +23,16 @@ import {
   weekOf,
 } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
-import { Avatar, cx, PersonChip, personName } from "./ui.js";
+import { Avatar, CategoryBadge, cx, PersonChip, personName, StateBadge, Time } from "./ui.js";
 
 // The calendar of a project (ADR-0019): the month as a grid, or one week on its own. A task
 // planned from a start to a due day lies across its days as a bar, in a lane of its own within
 // each week so that the bars of one week never cross; a task with one day alone, a due day or
 // a start, sits on that day as a dot. On a project's calendar the person who has a task stands
 // before its title, since the days hold several people's work. Who has what says whether the
-// work is on its days. Takes its data as props and nothing from the network; the month or the
-// week shown is the address's (ADR-0010).
+// work is on its days. The task under the pointer is shown in full within its item, with the
+// facts its own page lists, above or below it where there is more room. Takes its data as props
+// and nothing from the network; the month or the week shown is the address's (ADR-0010).
 
 const isOpen = (task: RestTask): boolean => OPEN_TASK_STATES.includes(task.state);
 
@@ -40,6 +48,8 @@ export interface CalendarProps {
   readonly today?: string | undefined;
   /** The workspace's categories, for the legend to say what the colours mean. */
   readonly categories?: readonly RestCategory[] | undefined;
+  /** The project's goals, so that the task under the pointer is shown with its goal's title. */
+  readonly goals?: readonly RestGoal[] | undefined;
   readonly taskHref: (task: RestTask) => string;
   /** Where the calendar is on another month. */
   readonly monthHref: (month: string) => string;
@@ -131,6 +141,174 @@ const tone = (task: RestTask, now: string): string =>
     isOpen(task) && task.dueOn !== null && task.dueOn < now && "sc-calendar-late",
   );
 
+/** Where the card of the item under the pointer goes: the side with more room, kept within the window. */
+export interface TipPlace {
+  readonly side: "above" | "below";
+  /** How far the card moves from the item's left edge, in pixels, to stay within the window: zero or less. */
+  readonly shift: number;
+}
+
+/** What the card may grow to, in pixels: 20rem at the usual root size, as the style says. */
+const TIP_WIDTH = 320;
+/** What stays between the card and the window's edge, in pixels. */
+const TIP_MARGIN = 8;
+
+/**
+ * Places the card beside an item, from the item's box and the window's size, both in pixels from
+ * the window's top left corner: above the item where the room above is at least the room below,
+ * else below it, and moved left where it would otherwise leave the window on the right.
+ */
+export function placeTip(
+  item: { readonly top: number; readonly bottom: number; readonly left: number },
+  window: { readonly width: number; readonly height: number },
+): TipPlace {
+  const side = item.top >= window.height - item.bottom ? "above" : "below";
+  const left = Math.max(TIP_MARGIN, Math.min(item.left, window.width - TIP_WIDTH - TIP_MARGIN));
+  return { side, shift: Math.min(0, left - item.left) };
+}
+
+/** The item the pointer is on: a task on a day, since a bar has an item on each of its days, and where its card goes. */
+interface Pointed {
+  readonly task: RestTask;
+  readonly day: string;
+  readonly place: TipPlace;
+}
+
+/** The item under the pointer, measured as the pointer arrives, since only the browser knows where it is. */
+function usePointed(): [
+  Pointed | null,
+  (task: RestTask, day: string, item: HTMLElement) => void,
+  () => void,
+] {
+  const [pointed, setPointed] = useState<Pointed | null>(null);
+  const point = (task: RestTask, day: string, item: HTMLElement): void =>
+    setPointed({
+      task,
+      day,
+      place: placeTip(item.getBoundingClientRect(), {
+        width: window.innerWidth,
+        height: window.innerHeight,
+      }),
+    });
+  const leave = (): void => setPointed(null);
+  return [pointed, point, leave];
+}
+
+export interface TaskTipProps {
+  readonly task: RestTask;
+  /** The project's goals, so that the task's goal is named by its title; without them the row is left out. */
+  readonly goals?: readonly RestGoal[] | undefined;
+  readonly place: TipPlace;
+}
+
+/**
+ * The task under the pointer in full: its number and its title, then the facts its own page lists
+ * beside the text, those that are set. Lies within the item it belongs to, above or below it, and
+ * out of the accessible tree: the item's text is the title, and the facts are on the task's page.
+ */
+export function TaskTip(props: TaskTipProps) {
+  const words = useWords();
+  const { tag } = useLanguage();
+  const { task, place } = props;
+  const goal = props.goals?.find((candidate) => candidate.id === task.goalId);
+  const day = (value: string): string => formatDay(value, tag);
+  return (
+    <div
+      className={cx(
+        "sc-task-tip",
+        place.side === "above" ? "sc-task-tip-above" : "sc-task-tip-below",
+      )}
+      style={{ left: place.shift }}
+      aria-hidden="true"
+    >
+      <p className="sc-task-tip-title">
+        #{task.number} {task.title}
+      </p>
+      <dl className="sc-task-tip-facts">
+        <div>
+          <dt>{words.task.state}</dt>
+          <dd>
+            <StateBadge state={task.state} />
+          </dd>
+        </div>
+        <div>
+          <dt>{words.task.form.priority}</dt>
+          <dd>{words.vocabulary.priority[task.priority]}</dd>
+        </div>
+        {task.category !== null && (
+          <div>
+            <dt>{words.task.category}</dt>
+            <dd>
+              <CategoryBadge category={task.category} />
+            </dd>
+          </div>
+        )}
+        {goal !== undefined && (
+          <div>
+            <dt>{words.task.goal}</dt>
+            <dd>{goal.title}</dd>
+          </div>
+        )}
+        <div>
+          <dt>{words.task.owner}</dt>
+          <dd>
+            <PersonChip person={task.owner} />
+          </dd>
+        </div>
+        <div>
+          <dt>{words.task.assignee}</dt>
+          <dd>
+            {task.assignee === null ? (
+              <span className="sc-muted">{words.common.nobody}</span>
+            ) : (
+              <PersonChip person={task.assignee} />
+            )}
+          </dd>
+        </div>
+        {(task.startsOn !== null || task.dueOn !== null) && (
+          <div>
+            <dt>{words.task.plan}</dt>
+            <dd>
+              {words.task.planned(
+                task.startsOn === null ? undefined : day(task.startsOn),
+                task.dueOn === null ? undefined : day(task.dueOn),
+              )}
+            </dd>
+          </div>
+        )}
+        {task.startedAt !== null && (
+          <div>
+            <dt>{words.task.started}</dt>
+            <dd>
+              <Time iso={task.startedAt} />
+            </dd>
+          </div>
+        )}
+        {task.doneAt !== null && (
+          <div>
+            <dt>{words.task.done}</dt>
+            <dd>
+              <Time iso={task.doneAt} />
+            </dd>
+          </div>
+        )}
+        <div>
+          <dt>{words.task.written}</dt>
+          <dd>
+            <Time iso={task.createdAt} />
+          </dd>
+        </div>
+        <div>
+          <dt>{words.task.changed}</dt>
+          <dd>
+            <Time iso={task.updatedAt} />
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+}
+
 interface WeekRowProps {
   readonly week: readonly GridDay[];
   readonly segments: readonly WeekSegment[];
@@ -142,26 +320,30 @@ interface WeekRowProps {
   readonly markOf?: ((task: RestTask) => ReactNode) | undefined;
   /** Whether the person who has a task stands before its title, where the days hold several people's work. */
   readonly people?: boolean | undefined;
-}
-
-/**
- * Marks an item whose title its line cut short, or which shows none (a bar on its later days),
- * so that the tip it carries in `data-tip` is shown at once while the pointer is on it. Measured
- * as the pointer arrives, since only the browser knows where the line ended.
- */
-function reveal(event: SyntheticEvent<HTMLElement>): void {
-  const item = event.currentTarget;
-  const title = item.querySelector(".sc-calendar-task-title");
-  item.toggleAttribute("data-clipped", title === null || title.scrollWidth > title.clientWidth);
+  /** The item under the pointer, shown in full within that item, or none. */
+  readonly pointed: Pointed | null;
+  /** The project's goals, so that the item under the pointer names its goal; none across projects. */
+  readonly goals?: readonly RestGoal[] | undefined;
+  /** The pointer, or the focus, arrived on a task's item on a day. */
+  readonly onPoint: (task: RestTask, day: string, item: HTMLElement) => void;
+  /** It left. */
+  readonly onLeave: () => void;
 }
 
 /** One week as a row of cells: the bars across the days in their lanes, then the tasks on each day. */
 function WeekRow(props: WeekRowProps) {
   const { week, segments, now } = props;
-  const tip = (task: RestTask): string =>
-    props.people === true && task.assignee !== null
-      ? `#${task.number} ${task.title} \u00B7 ${personName(task.assignee)}`
-      : `#${task.number} ${task.title}`;
+  const pointing = (task: RestTask, day: string) => ({
+    onMouseEnter: (event: SyntheticEvent<HTMLElement>) =>
+      props.onPoint(task, day, event.currentTarget),
+    onMouseLeave: props.onLeave,
+    onFocus: (event: SyntheticEvent<HTMLElement>) => props.onPoint(task, day, event.currentTarget),
+    onBlur: props.onLeave,
+  });
+  const tipIn = (task: RestTask, day: string): ReactNode =>
+    props.pointed !== null && props.pointed.task.id === task.id && props.pointed.day === day ? (
+      <TaskTip task={task} goals={props.goals} place={props.pointed.place} />
+    ) : null;
   const who = (task: RestTask): ReactNode =>
     props.people === true && task.assignee !== null ? (
       <Avatar person={task.assignee} size="xs" />
@@ -199,12 +381,9 @@ function WeekRow(props: WeekRowProps) {
                   segment.from === column && segment.begins && "sc-calendar-bar-begins",
                   segment.to === column && segment.ends && "sc-calendar-bar-ends",
                   tone(task, now),
-                  "sc-tip",
                 )}
                 href={props.taskHref(task)}
-                data-tip={tip(task)}
-                onMouseEnter={reveal}
-                onFocus={reveal}
+                {...pointing(task, cell.day)}
               >
                 {segment.from === column && (
                   <>
@@ -213,6 +392,7 @@ function WeekRow(props: WeekRowProps) {
                     <span className="sc-calendar-task-title">{task.title}</span>
                   </>
                 )}
+                {tipIn(task, cell.day)}
               </a>
             );
           })}
@@ -221,11 +401,9 @@ function WeekRow(props: WeekRowProps) {
             return (
               <a
                 key={task.id}
-                className={cx("sc-calendar-task", tone(task, now), "sc-tip")}
+                className={cx("sc-calendar-task", tone(task, now))}
                 href={props.taskHref(task)}
-                data-tip={tip(task)}
-                onMouseEnter={reveal}
-                onFocus={reveal}
+                {...pointing(task, cell.day)}
               >
                 {mark === undefined || mark === null ? (
                   <span
@@ -239,6 +417,7 @@ function WeekRow(props: WeekRowProps) {
                 )}
                 {who(task)}
                 <span className="sc-calendar-task-title">{task.title}</span>
+                {tipIn(task, cell.day)}
               </a>
             );
           })}
@@ -251,6 +430,7 @@ function WeekRow(props: WeekRowProps) {
 export function Calendar(props: CalendarProps) {
   const words = useWords().calendar;
   const { tag } = useLanguage();
+  const [pointed, point, leave] = usePointed();
   const now = props.today ?? todayOf();
   const firstDay = firstDayOfWeek(tag);
   const weeks = monthGrid(props.month, firstDay);
@@ -310,6 +490,10 @@ export function Calendar(props: CalendarProps) {
               on={on}
               now={now}
               taskHref={props.taskHref}
+              pointed={pointed}
+              goals={props.goals}
+              onPoint={point}
+              onLeave={leave}
               people
             />
           ))}
@@ -349,6 +533,7 @@ export interface WeekProps {
 export function Week(props: WeekProps) {
   const words = useWords().calendar.week;
   const { tag } = useLanguage();
+  const [pointed, point, leave] = usePointed();
   const now = props.today ?? todayOf();
   const firstDay = firstDayOfWeek(tag);
   const days = weekOf(props.day ?? now, firstDay);
@@ -400,6 +585,9 @@ export function Week(props: WeekProps) {
             now={now}
             taskHref={props.taskHref}
             markOf={props.markOf}
+            pointed={pointed}
+            onPoint={point}
+            onLeave={leave}
           />
         </tbody>
       </table>

package/src/components/comments.tsx

@@ -0,0 +1,342 @@
+import { type ClipboardEvent, type FormEvent, type ReactNode, useState } from "react";
+import {
+  agentLabel,
+  MAX_BODY_LENGTH,
+  MAX_FILES_PER_COMMENT,
+  type RestComment,
+  type RestCommentFile,
+  type RestDecision,
+  type RestRun,
+  type RestTask,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { DecisionCard, type DecisionCardProps } from "./decision-list.js";
+import { Markdown } from "./markdown.js";
+import { RunCard } from "./runs.js";
+import { Button, formatBytes, PersonChip, personName, Time } from "./ui.js";
+
+// The discussion on a task (ADR-0024): what people and agents said about it, each word with
+// the files put in it, read in one thread with the runs on the task and the decisions about
+// it, in the order they came. Takes its data as props and nothing from the network.
+
+/** The kinds of picture the pages show in place: what a browser renders and cannot run. */
+const PICTURE_TYPES: ReadonlySet<string> = new Set([
+  "image/png",
+  "image/jpeg",
+  "image/gif",
+  "image/webp",
+]);
+
+/** Whether a file is a picture the pages show in place, by the media type the console kept. */
+export function isPicture(contentType: string): boolean {
+  return PICTURE_TYPES.has(contentType);
+}
+
+/** Whether the text places a file by its name, as `![words](name)` or `![words](./name)`. */
+function placed(body: string, name: string): boolean {
+  return body.includes(`](${name})`) || body.includes(`](./${name})`);
+}
+
+export interface CommentCardProps {
+  readonly comment: RestComment;
+  /** Where a file put in the comment is read: the project's address for it. Left out, a file is named and not linked. */
+  readonly fileHref?: ((file: RestCommentFile) => string) | undefined;
+  /** Where a document of the project is read, by its path, for the links in what was written. */
+  readonly docHref?: ((path: string) => string) | undefined;
+}
+
+export function CommentCard(props: CommentCardProps) {
+  const words = useWords();
+  const { comment } = props;
+  const hrefOf = (file: RestCommentFile) => props.fileHref?.(file);
+  // A picture the text names by its file name is shown where the text puts it; the rest of
+  // the files follow the text, pictures in place and everything else as a link.
+  const named = (source: string): string | undefined => {
+    const name = source.startsWith("./") ? source.slice(2) : source;
+    const file = comment.files.find(
+      (candidate) => candidate.file.name === name && isPicture(candidate.file.contentType),
+    );
+    return file === undefined ? undefined : hrefOf(file);
+  };
+  const following = comment.files.filter((file) => !placed(comment.body, file.file.name));
+  return (
+    <article
+      className="sc-comment"
+      aria-label={words.comments.label(personName(comment.author))}
+      id={comment.id}
+    >
+      <header className="sc-comment-header">
+        <PersonChip person={comment.author} />
+        {comment.agent !== null && (
+          <span className="sc-feed-agent" title={comment.agent}>
+            {words.feed.as(agentLabel(comment.agent))}
+          </span>
+        )}
+        <span className="sc-comment-meta">
+          <Time iso={comment.createdAt} />
+        </span>
+      </header>
+      {comment.body.trim().length > 0 && (
+        <Markdown source={comment.body} docHref={props.docHref} fileSrc={named} />
+      )}
+      {following.length > 0 && (
+        <ul className="sc-comment-files" aria-label={words.comments.files}>
+          {following.map((attached) => {
+            const href = hrefOf(attached);
+            const { file } = attached;
+            if (href !== undefined && isPicture(file.contentType)) {
+              return (
+                <li key={attached.id} className="sc-comment-picture">
+                  <a href={href} rel="noopener nofollow ugc" target="_blank">
+                    <img
+                      src={href}
+                      alt={words.comments.picture(file.name)}
+                      loading="lazy"
+                      decoding="async"
+                    />
+                  </a>
+                  <span className="sc-muted">
+                    {file.name}, {formatBytes(file.size)}
+                  </span>
+                </li>
+              );
+            }
+            return (
+              <li key={attached.id}>
+                {href === undefined ? (
+                  <span>{file.name}</span>
+                ) : (
+                  <a href={href} rel="nofollow ugc">
+                    {file.name}
+                  </a>
+                )}{" "}
+                <span className="sc-muted">{formatBytes(file.size)}</span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </article>
+  );
+}
+
+/** What a comment form hands over: the word, and the files chosen or pasted. */
+export interface CommentDraft {
+  readonly body: string;
+  readonly files: readonly File[];
+}
+
+export interface CommentFormProps {
+  readonly onSubmit: (draft: CommentDraft) => void;
+  readonly busy?: boolean | undefined;
+}
+
+/** A name for a file among those chosen already: the same, or with a count before its extension. */
+function unusedName(name: string, taken: readonly File[]): string {
+  const names = new Set(taken.map((file) => file.name));
+  if (!names.has(name)) {
+    return name;
+  }
+  const dot = name.lastIndexOf(".");
+  const stem = dot > 0 ? name.slice(0, dot) : name;
+  const extension = dot > 0 ? name.slice(dot) : "";
+  for (let n = 2; ; n += 1) {
+    const candidate = `${stem}-${n}${extension}`;
+    if (!names.has(candidate)) {
+      return candidate;
+    }
+  }
+}
+
+export function CommentForm(props: CommentFormProps) {
+  const words = useWords().comments;
+  const [body, setBody] = useState("");
+  const [files, setFiles] = useState<readonly File[]>([]);
+  const empty = body.trim().length === 0 && files.length === 0;
+
+  const add = (chosen: readonly File[]): File[] => {
+    const added: File[] = [];
+    let held = files;
+    for (const file of chosen) {
+      if (held.length >= MAX_FILES_PER_COMMENT) {
+        break;
+      }
+      const name = unusedName(file.name, held);
+      const kept = name === file.name ? file : new File([file], name, { type: file.type });
+      held = [...held, kept];
+      added.push(kept);
+    }
+    setFiles(held);
+    return added;
+  };
+
+  // A picture pasted in goes with the comment, placed in the text where pictures are read.
+  const paste = (event: ClipboardEvent<HTMLTextAreaElement>) => {
+    const pasted = [...event.clipboardData.files].filter((file) => isPicture(file.type));
+    if (pasted.length === 0) {
+      return;
+    }
+    event.preventDefault();
+    const added = add(pasted);
+    if (added.length > 0) {
+      const lines = added.map((file) => `![](${file.name})`).join("\n");
+      setBody((current) =>
+        current.trim().length === 0 ? lines : `${current.trimEnd()}\n\n${lines}`,
+      );
+    }
+  };
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    if (empty || props.busy === true) {
+      return;
+    }
+    props.onSubmit({ body, files });
+    setBody("");
+    setFiles([]);
+  };
+
+  return (
+    <form className="sc-comment-form" aria-label={words.write} onSubmit={submit}>
+      <textarea
+        className="sc-input sc-textarea"
+        aria-label={words.write}
+        placeholder={words.placeholder}
+        maxLength={MAX_BODY_LENGTH}
+        rows={4}
+        value={body}
+        disabled={props.busy === true}
+        onChange={(event) => setBody(event.target.value)}
+        onPaste={paste}
+      />
+      {files.length > 0 && (
+        <ul className="sc-comment-chosen" aria-label={words.files}>
+          {files.map((file) => (
+            <li key={file.name} className="sc-comment-chosen-file">
+              <span>{file.name}</span> <span className="sc-muted">{formatBytes(file.size)}</span>{" "}
+              <Button
+                variant="ghost"
+                size="sm"
+                aria-label={words.removeFile(file.name)}
+                onClick={() => setFiles((current) => current.filter((held) => held !== file))}
+              >
+                ×
+              </Button>
+            </li>
+          ))}
+        </ul>
+      )}
+      <div className="sc-comment-form-actions">
+        <label className="sc-button sc-button-ghost sc-button-sm">
+          {words.chooseFiles}
+          <input
+            className="sc-comment-file-input"
+            type="file"
+            multiple
+            onChange={(event) => {
+              add([...(event.target.files ?? [])]);
+              event.target.value = "";
+            }}
+          />
+        </label>
+        <Button type="submit" variant="primary" disabled={empty || props.busy === true}>
+          {words.one}
+        </Button>
+      </div>
+      <p className="sc-field-hint">{words.hint}</p>
+    </form>
+  );
+}
+
+/** One thing said or done about a task, with when, for the thread's order. */
+export type ThreadItem =
+  | { readonly kind: "comment"; readonly at: string; readonly comment: RestComment }
+  | { readonly kind: "run"; readonly at: string; readonly run: RestRun }
+  | { readonly kind: "decision"; readonly at: string; readonly decision: RestDecision };
+
+/** The comments, the runs and the decisions of a task as one thread, in the order they came. */
+export function threadOf(
+  comments: readonly RestComment[],
+  runs: readonly RestRun[],
+  decisions: readonly RestDecision[],
+): ThreadItem[] {
+  const items: ThreadItem[] = [
+    ...comments.map((comment) => ({ kind: "comment" as const, at: comment.createdAt, comment })),
+    ...runs.map((run) => ({ kind: "run" as const, at: run.startedAt, run })),
+    ...decisions.map((decision) => ({
+      kind: "decision" as const,
+      at: decision.createdAt,
+      decision,
+    })),
+  ];
+  return items.sort((a, b) => (a.at < b.at ? -1 : a.at > b.at ? 1 : 0));
+}
+
+export interface TaskThreadProps {
+  readonly task: RestTask;
+  readonly comments: readonly RestComment[];
+  readonly runs: readonly RestRun[];
+  readonly decisions: readonly RestDecision[];
+  /** Where a file of the project is read, by its id: a run's as a comment's. */
+  readonly fileHref?: ((fileId: string) => string) | undefined;
+  /** Where a decision is answered, for a run that waits for one. */
+  readonly decisionHref?: ((decisionId: string) => string) | undefined;
+  readonly docHref?: ((path: string) => string) | undefined;
+  readonly onAnswer?: DecisionCardProps["onAnswer"];
+  readonly onUpdateDecision?: DecisionCardProps["onUpdate"];
+  readonly onAbandonRun?: ((run: RestRun) => void) | undefined;
+  /** Called with what was written; left out, nothing can be said here. */
+  readonly onComment?: ((draft: CommentDraft) => void) | undefined;
+  readonly busy?: boolean | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function TaskThread(props: TaskThreadProps) {
+  const items = threadOf(props.comments, props.runs, props.decisions);
+  const fileHref = props.fileHref;
+  const shown = (item: ThreadItem): ReactNode => {
+    if (item.kind === "comment") {
+      return (
+        <CommentCard
+          key={item.comment.id}
+          comment={item.comment}
+          fileHref={fileHref === undefined ? undefined : (file) => fileHref(file.id)}
+          docHref={props.docHref}
+        />
+      );
+    }
+    if (item.kind === "run") {
+      return (
+        <RunCard
+          key={item.run.id}
+          run={item.run}
+          decisionHref={props.decisionHref}
+          fileHref={fileHref === undefined ? undefined : (artifact) => fileHref(artifact.id)}
+          docHref={props.docHref}
+          onAbandon={props.onAbandonRun}
+          busy={props.busy}
+        />
+      );
+    }
+    return (
+      <DecisionCard
+        key={item.decision.id}
+        decision={item.decision}
+        task={props.task}
+        docHref={props.docHref}
+        onAnswer={props.onAnswer}
+        onUpdate={props.onUpdateDecision}
+        busy={props.busy}
+      />
+    );
+  };
+  return (
+    <div className="sc-thread">
+      {items.length === 0 && props.empty}
+      {items.map(shown)}
+      {props.onComment !== undefined && (
+        <CommentForm onSubmit={props.onComment} busy={props.busy} />
+      )}
+    </div>
+  );
+}