@skillcdn/console 0.1.16 → 0.1.18

package/src/components/calendar.tsx

@@ -48,9 +48,11 @@ 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. */
+  /** The project's goals, so that the task under the pointer is shown with its goal's title, and, given `goalHref`, so that each goal marks its target day. */
   readonly goals?: readonly RestGoal[] | undefined;
   readonly taskHref: (task: RestTask) => string;
+  /** Where a goal's page is: given, the goals mark their target days on the month (ADR-0026). */
+  readonly goalHref?: ((goal: RestGoal) => string) | undefined;
   /** Where the calendar is on another month. */
   readonly monthHref: (month: string) => string;
 }
@@ -324,12 +326,32 @@ interface WeekRowProps {
   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 goals whose target day is each day, where the goals mark the month. */
+  readonly goalsOn?: ReadonlyMap<string, readonly RestGoal[]> | undefined;
+  readonly goalHref?: ((goal: RestGoal) => string) | 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;
 }
 
+/** The goals that aim at each day, by day: those with a target day, still planned or worked towards. */
+function goalsOnDays(goals: readonly RestGoal[]): ReadonlyMap<string, readonly RestGoal[]> {
+  const on = new Map<string, RestGoal[]>();
+  for (const goal of goals) {
+    if (goal.dueOn === null || goal.state === "dropped") {
+      continue;
+    }
+    const list = on.get(goal.dueOn);
+    if (list === undefined) {
+      on.set(goal.dueOn, [goal]);
+    } else {
+      list.push(goal);
+    }
+  }
+  return on;
+}
+
 /** 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;
@@ -361,6 +383,21 @@ function WeekRow(props: WeekRowProps) {
           )}
         >
           <span className="sc-calendar-day">{Number(cell.day.slice(8))}</span>
+          {props.goalHref !== undefined &&
+            (props.goalsOn?.get(cell.day) ?? []).map((goal) => (
+              <a
+                key={goal.id}
+                className={cx(
+                  "sc-calendar-goal",
+                  `sc-category-${goal.category?.color ?? "gray"}`,
+                  goal.state === "done" && "sc-calendar-over",
+                )}
+                href={props.goalHref?.(goal)}
+              >
+                <span className="sc-calendar-flag" aria-hidden="true" />
+                <span className="sc-calendar-task-title">{goal.title}</span>
+              </a>
+            ))}
           {Array.from({ length: lanes }, (_, lane) => {
             const segment = segments.find(
               (candidate) =>
@@ -435,6 +472,7 @@ export function Calendar(props: CalendarProps) {
   const firstDay = firstDayOfWeek(tag);
   const weeks = monthGrid(props.month, firstDay);
   const on = onDays(props.tasks);
+  const goalsOn = props.goalHref === undefined ? undefined : goalsOnDays(props.goals ?? []);
   const inMonth = (day: string) => monthOf(day) === props.month;
   const monthWeeks = weeks.map((week) => ({ week, segments: weekSegments(week, props.tasks) }));
   const nothing =
@@ -492,6 +530,8 @@ export function Calendar(props: CalendarProps) {
               taskHref={props.taskHref}
               pointed={pointed}
               goals={props.goals}
+              goalsOn={goalsOn}
+              goalHref={props.goalHref}
               onPoint={point}
               onLeave={leave}
               people

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>
+  );
+}

package/src/components/event-feed.tsx

@@ -76,6 +76,8 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       );
     case "task.updated":
       return feed.event.taskUpdated(fields, task);
+    case "task.commented":
+      return feed.event.taskCommented(task, data.excerpt);
     case "decision.raised":
       return feed.event.decisionRaised(question);
     case "decision.answered":

package/src/components/goals.tsx

@@ -4,20 +4,32 @@ import {
   type GoalState,
   MAX_BODY_LENGTH,
   MAX_TITLE_LENGTH,
+  type RestCategory,
   type RestGoal,
   type RestGoalInput,
   type RestTask,
   TASK_STATES,
 } from "../api.js";
-import { useWords } from "../i18n/index.js";
+import { formatDays } from "../dates.js";
+import { useLanguage, useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
 import { TaskList } from "./task-list.js";
-import { Button, Day, DueBadge, GoalStateBadge, PersonChip, ProgressBar, Time } from "./ui.js";
+import {
+  Button,
+  CategoryBadge,
+  Day,
+  DueBadge,
+  GoalStateBadge,
+  PersonChip,
+  ProgressBar,
+  Time,
+} from "./ui.js";
 
-// The roadmap of a project (ADR-0019): its goals, each with the day it is meant to be reached
-// by and how far its tasks are, read from the board as it stands. The list, one goal with its
-// tasks, and the form an owner sets one with. Each takes its data as props and nothing from
-// the network; what people wrote is shown as text, never as HTML.
+// The roadmap of a project (ADR-0019): its goals, each planned in days as a task is, a start
+// and a target, sorted into a category of the workspace (ADR-0026), with how far its tasks
+// are, read from the board as it stands. The list, one goal with its tasks, and the form an
+// owner sets one with. Each takes its data as props and nothing from the network; what people
+// wrote is shown as text, never as HTML.
 
 /** A goal's day on the calendar's terms: reached or let go, it is a plain fact; else it may be late. */
 const dueState = (goal: RestGoal) =>
@@ -33,6 +45,7 @@ export interface GoalListProps {
 
 export function GoalList(props: GoalListProps) {
   const words = useWords().roadmap;
+  const { tag } = useLanguage();
   if (props.goals.length === 0) {
     return <>{props.empty ?? null}</>;
   }
@@ -44,7 +57,11 @@ export function GoalList(props: GoalListProps) {
             <a className="sc-goal-title" href={props.goalHref(goal)}>
               {goal.title}
             </a>
+            {goal.category !== null && <CategoryBadge category={goal.category} />}
             <GoalStateBadge state={goal.state} />
+            {goal.startsOn !== null && goal.dueOn !== null && goal.startsOn < goal.dueOn && (
+              <span className="sc-goal-days">{formatDays(goal.startsOn, goal.dueOn, tag)}</span>
+            )}
             {goal.dueOn !== null && (
               <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
             )}
@@ -59,6 +76,8 @@ export function GoalList(props: GoalListProps) {
 export interface GoalFormProps {
   /** The goal to change; left out, the form sets a new one. */
   readonly goal?: RestGoal | undefined;
+  /** The workspace's categories to sort the goal into; left out, the form offers none. */
+  readonly categories?: readonly RestCategory[] | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
   readonly onSubmit: (input: RestGoalInput) => void;
@@ -72,11 +91,20 @@ export function GoalForm(props: GoalFormProps) {
   const [title, setTitle] = useState(goal?.title ?? "");
   const [body, setBody] = useState(goal?.body ?? "");
   const [state, setState] = useState<GoalState>(goal?.state ?? "planned");
+  const [category, setCategory] = useState(goal?.category?.key ?? "");
+  const [startsOn, setStartsOn] = useState(goal?.startsOn ?? "");
   const [dueOn, setDueOn] = useState(goal?.dueOn ?? "");
 
   const submit = (event: FormEvent) => {
     event.preventDefault();
-    props.onSubmit({ title: title.trim(), body, state, dueOn: dueOn === "" ? null : dueOn });
+    props.onSubmit({
+      title: title.trim(),
+      body,
+      state,
+      category: category === "" ? null : category,
+      startsOn: startsOn === "" ? null : startsOn,
+      dueOn: dueOn === "" ? null : dueOn,
+    });
   };
 
   return (
@@ -117,12 +145,42 @@ export function GoalForm(props: GoalFormProps) {
             ))}
           </select>
         </label>
+        {props.categories !== undefined && (
+          <label className="sc-field">
+            <span className="sc-field-label">{form.category}</span>
+            <select
+              className="sc-input"
+              value={category}
+              onChange={(event) => setCategory(event.target.value)}
+            >
+              <option value="">{form.noCategory}</option>
+              {props.categories.map((candidate) => (
+                <option key={candidate.key} value={candidate.key}>
+                  {candidate.name}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
+      </div>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{form.startsOn}</span>
+          <input
+            className="sc-input"
+            type="date"
+            value={startsOn}
+            max={dueOn === "" ? undefined : dueOn}
+            onChange={(event) => setStartsOn(event.target.value)}
+          />
+        </label>
         <label className="sc-field">
           <span className="sc-field-label">{form.dueOn}</span>
           <input
             className="sc-input"
             type="date"
             value={dueOn}
+            min={startsOn === "" ? undefined : startsOn}
             onChange={(event) => setDueOn(event.target.value)}
           />
         </label>
@@ -175,6 +233,7 @@ export function GoalView(props: GoalViewProps) {
       <header className="sc-task-header">
         <h1 className="sc-task-title">{goal.title}</h1>
         <div className="sc-task-badges">
+          {goal.category !== null && <CategoryBadge category={goal.category} />}
           <GoalStateBadge state={goal.state} />
           {goal.dueOn !== null && (
             <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
@@ -233,6 +292,26 @@ export function GoalView(props: GoalViewProps) {
                 )}
               </dd>
             </div>
+            <div>
+              <dt>{roadmap.category}</dt>
+              <dd>
+                {goal.category === null ? (
+                  <span className="sc-muted">{roadmap.noCategory}</span>
+                ) : (
+                  <CategoryBadge category={goal.category} />
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt>{roadmap.starts}</dt>
+              <dd>
+                {goal.startsOn === null ? (
+                  <span className="sc-muted">{roadmap.noStart}</span>
+                ) : (
+                  <Day day={goal.startsOn} />
+                )}
+              </dd>
+            </div>
             <div>
               <dt>{roadmap.target}</dt>
               <dd>

package/src/components/markdown.tsx

@@ -14,6 +14,12 @@ export interface MarkdownProps {
   readonly source: string;
   /** Where a document of the project is read, by its path; left out, such links stay text. */
   readonly docHref?: ((path: string) => string) | undefined;
+  /**
+   * Where a picture named in the text is read, when the text comes with files: given the
+   * source of `![words](source)`, the address of the file it names, or nothing. A picture that
+   * is neither one of those nor over https stays text.
+   */
+  readonly fileSrc?: ((source: string) => string | undefined) | undefined;
 }
 
 export function Markdown(props: MarkdownProps) {
@@ -48,7 +54,9 @@ export function Markdown(props: MarkdownProps) {
             return <span>{children}</span>;
           },
           img({ src, alt, title }) {
-            const url = typeof src === "string" && SAFE_IMAGE.test(src) ? src : undefined;
+            const named = typeof src === "string" ? props.fileSrc?.(src) : undefined;
+            const url =
+              named ?? (typeof src === "string" && SAFE_IMAGE.test(src) ? src : undefined);
             if (url === undefined) {
               return <span className="sc-prose-image-text">{alt ?? ""}</span>;
             }

package/src/components/projects.tsx

@@ -46,18 +46,31 @@ export function ProjectMark(props: {
   const icon = props.project.icon ?? null;
   const src =
     props.iconSrc ?? (icon === null ? undefined : projectIconPath(props.project.key, icon));
+  // The symbol stands in until the image is there, and comes back should the image fail; once
+  // the image is shown, the symbol goes, since an image with clear parts would show it through.
+  const [shown, setShown] = useState<string | undefined>(undefined);
+  const [failed, setFailed] = useState<string | undefined>(undefined);
+  const pictured = src !== undefined && failed !== src;
   return (
     <span
       className={cx(
         "sc-mark",
         `sc-mark-${size}`,
         `sc-category-${projectColorOf(props.project)}`,
-        src !== undefined && "sc-mark-pictured",
+        pictured && "sc-mark-pictured",
       )}
       aria-hidden="true"
     >
-      {projectSymbolOf(props.project)}
-      {src !== undefined && <img className="sc-mark-image" src={src} alt="" />}
+      {(!pictured || shown !== src) && projectSymbolOf(props.project)}
+      {pictured && (
+        <img
+          className="sc-mark-image"
+          src={src}
+          alt=""
+          onLoad={() => setShown(src)}
+          onError={() => setFailed(src)}
+        />
+      )}
     </span>
   );
 }