@skillcdn/console 0.1.9 → 0.1.11

package/src/components/event-feed.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import type { RestEvent } from "../api.js";
 import { en, type Messages } from "../i18n/en.js";
 import { useWords } from "../i18n/index.js";
+import { ShowMore, usePaged } from "./paged.js";
 import { PersonChip, Time } from "./ui.js";
 
 // The feed: one line per event, newest first, as a sentence a person reads at a glance: who,
@@ -30,6 +31,8 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
           : feed.role.other;
   const login = data.login ?? feed.someone;
   const question = data.question ?? feed.aQuestion;
+  const goal = data.title ?? feed.aGoal;
+  const category = data.name ?? data.key ?? feed.aCategory;
   switch (event.kind) {
     case "person.joined":
       return feed.event.personJoined();
@@ -45,6 +48,16 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       return feed.event.memberChanged(login, role(data.role), project);
     case "project.member_removed":
       return feed.event.memberRemoved(login, project);
+    case "category.created":
+      return feed.event.categoryCreated(category);
+    case "category.updated":
+      return feed.event.categoryUpdated(fields, category);
+    case "category.removed":
+      return feed.event.categoryRemoved(category);
+    case "goal.created":
+      return feed.event.goalCreated(goal);
+    case "goal.updated":
+      return feed.event.goalUpdated(fields, goal);
     case "task.created":
       return feed.event.taskCreated(task);
     case "task.moved":
@@ -67,6 +80,8 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       return feed.event.runReported(task, data.excerpt);
     case "run.handed_in":
       return feed.event.runHandedIn(data.label ?? feed.something, task);
+    case "run.taken_over":
+      return feed.event.runTakenOver(task, data.agent ?? feed.someone);
     case "run.ended":
       return data.status === "finished"
         ? feed.event.runFinished(task)
@@ -94,36 +109,40 @@ export interface EventFeedProps {
 
 export function EventFeed(props: EventFeedProps) {
   const words = useWords();
+  const newestFirst = [...props.events].reverse();
+  const { shown, rest, more } = usePaged(newestFirst);
   if (props.events.length === 0) {
     return <div className="sc-feed">{props.empty ?? null}</div>;
   }
-  const newestFirst = [...props.events].reverse();
   return (
-    <ol className="sc-feed" aria-label={words.feed.list}>
-      {newestFirst.map((event) => {
-        const href = props.href?.(event);
-        const said = describeEvent(event, words);
-        return (
-          <li key={event.id} className="sc-feed-item">
-            <span className="sc-feed-actor">
-              {event.actor === null ? (
-                <span className="sc-person-login">{words.feed.console}</span>
-              ) : (
-                <PersonChip person={event.actor} />
-              )}
-              {event.agent !== null && (
-                <span className="sc-feed-agent" title={words.feed.asTitle}>
-                  {words.feed.as(event.agent)}
-                </span>
-              )}
-            </span>
-            <span className="sc-feed-words">
-              {href === undefined ? said : <a href={href}>{said}</a>}
-            </span>
-            <Time iso={event.createdAt} />
-          </li>
-        );
-      })}
-    </ol>
+    <>
+      <ol className="sc-feed" aria-label={words.feed.list}>
+        {shown.map((event) => {
+          const href = props.href?.(event);
+          const said = describeEvent(event, words);
+          return (
+            <li key={event.id} className="sc-feed-item">
+              <span className="sc-feed-actor">
+                {event.actor === null ? (
+                  <span className="sc-person-login">{words.feed.console}</span>
+                ) : (
+                  <PersonChip person={event.actor} />
+                )}
+                {event.agent !== null && (
+                  <span className="sc-feed-agent" title={words.feed.asTitle}>
+                    {words.feed.as(event.agent)}
+                  </span>
+                )}
+              </span>
+              <span className="sc-feed-words">
+                {href === undefined ? said : <a href={href}>{said}</a>}
+              </span>
+              <Time iso={event.createdAt} />
+            </li>
+          );
+        })}
+      </ol>
+      <ShowMore rest={rest} onMore={more} />
+    </>
   );
 }

package/src/components/goals.tsx

@@ -0,0 +1,264 @@
+import { type FormEvent, type ReactNode, useState } from "react";
+import {
+  GOAL_STATES,
+  type GoalState,
+  MAX_BODY_LENGTH,
+  MAX_TITLE_LENGTH,
+  type RestGoal,
+  type RestGoalInput,
+  type RestTask,
+  TASK_STATES,
+} from "../api.js";
+import { 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";
+
+// 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.
+
+/** 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) =>
+  goal.state === "done" ? "done" : goal.state === "dropped" ? "dropped" : "ready";
+
+export interface GoalListProps {
+  readonly goals: readonly RestGoal[];
+  readonly goalHref: (goal: RestGoal) => string;
+  /** The day to count from; the browser's today when left out. */
+  readonly today?: string | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function GoalList(props: GoalListProps) {
+  const words = useWords().roadmap;
+  if (props.goals.length === 0) {
+    return <>{props.empty ?? null}</>;
+  }
+  return (
+    <ul className="sc-goals" aria-label={words.title}>
+      {props.goals.map((goal) => (
+        <li key={goal.id} className={`sc-goal sc-goal-${goal.state}`}>
+          <div className="sc-goal-head">
+            <a className="sc-goal-title" href={props.goalHref(goal)}>
+              {goal.title}
+            </a>
+            <GoalStateBadge state={goal.state} />
+            {goal.dueOn !== null && (
+              <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
+            )}
+          </div>
+          <ProgressBar counts={goal.taskCounts} />
+        </li>
+      ))}
+    </ul>
+  );
+}
+
+export interface GoalFormProps {
+  /** The goal to change; left out, the form sets a new one. */
+  readonly goal?: RestGoal | undefined;
+  readonly busy?: boolean | undefined;
+  readonly error?: string | undefined;
+  readonly onSubmit: (input: RestGoalInput) => void;
+  readonly onCancel?: (() => void) | undefined;
+}
+
+export function GoalForm(props: GoalFormProps) {
+  const words = useWords();
+  const form = words.roadmap.form;
+  const { goal } = props;
+  const [title, setTitle] = useState(goal?.title ?? "");
+  const [body, setBody] = useState(goal?.body ?? "");
+  const [state, setState] = useState<GoalState>(goal?.state ?? "planned");
+  const [dueOn, setDueOn] = useState(goal?.dueOn ?? "");
+
+  const submit = (event: FormEvent) => {
+    event.preventDefault();
+    props.onSubmit({ title: title.trim(), body, state, dueOn: dueOn === "" ? null : dueOn });
+  };
+
+  return (
+    <form className="sc-form" onSubmit={submit}>
+      <label className="sc-field">
+        <span className="sc-field-label">{form.title}</span>
+        <input
+          className="sc-input"
+          value={title}
+          maxLength={MAX_TITLE_LENGTH}
+          required
+          onChange={(event) => setTitle(event.target.value)}
+        />
+      </label>
+      <label className="sc-field">
+        <span className="sc-field-label">{form.body}</span>
+        <textarea
+          className="sc-input sc-textarea"
+          value={body}
+          maxLength={MAX_BODY_LENGTH}
+          rows={4}
+          placeholder={form.bodyPlaceholder}
+          onChange={(event) => setBody(event.target.value)}
+        />
+      </label>
+      <div className="sc-field-row">
+        <label className="sc-field">
+          <span className="sc-field-label">{form.state}</span>
+          <select
+            className="sc-input"
+            value={state}
+            onChange={(event) => setState(event.target.value as GoalState)}
+          >
+            {GOAL_STATES.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.goalState[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.dueOn}</span>
+          <input
+            className="sc-input"
+            type="date"
+            value={dueOn}
+            onChange={(event) => setDueOn(event.target.value)}
+          />
+        </label>
+      </div>
+      {props.error !== undefined && (
+        <p className="sc-form-error" role="alert">
+          {props.error}
+        </p>
+      )}
+      <div className="sc-form-actions">
+        <Button
+          type="submit"
+          variant="primary"
+          disabled={props.busy === true || title.trim() === ""}
+        >
+          {goal === undefined ? form.set : words.common.save}
+        </Button>
+        {props.onCancel !== undefined && (
+          <Button variant="ghost" onClick={props.onCancel}>
+            {words.common.cancel}
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}
+
+export interface GoalViewProps {
+  readonly goal: RestGoal;
+  /** The tasks of the board; those that work towards the goal are shown, by state. */
+  readonly tasks: readonly RestTask[];
+  readonly taskHref: (task: RestTask) => string;
+  /** Where a document of the project is read, by its path, for the links in what was written. */
+  readonly docHref?: ((path: string) => string) | undefined;
+  readonly today?: string | undefined;
+  /** Where the goal is changed; left out, it cannot be changed from here. */
+  readonly editHref?: string | undefined;
+  /** Called when an owner moves the goal to another state from here. */
+  readonly onMove?: ((goal: RestGoal, state: GoalState) => void) | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+export function GoalView(props: GoalViewProps) {
+  const words = useWords();
+  const roadmap = words.roadmap;
+  const { goal } = props;
+  const towards = props.tasks.filter((task) => task.goalId === goal.id);
+  return (
+    <div className="sc-task sc-goal-view">
+      <header className="sc-task-header">
+        <h1 className="sc-task-title">{goal.title}</h1>
+        <div className="sc-task-badges">
+          <GoalStateBadge state={goal.state} />
+          {goal.dueOn !== null && (
+            <DueBadge dueOn={goal.dueOn} state={dueState(goal)} today={props.today} />
+          )}
+        </div>
+      </header>
+      <div className="sc-task-body">
+        <div className="sc-task-main">
+          <ProgressBar counts={goal.taskCounts} />
+          {goal.body.length > 0 ? (
+            <Markdown source={goal.body} docHref={props.docHref} />
+          ) : (
+            <p className="sc-muted">{roadmap.nothingMore}</p>
+          )}
+          <section className="sc-task-section" aria-label={roadmap.tasks}>
+            <h2 className="sc-section-title">{roadmap.tasks}</h2>
+            {towards.length === 0 ? (
+              <p className="sc-muted">{roadmap.noTasks}</p>
+            ) : (
+              TASK_STATES.map((state) => {
+                const inState = towards.filter((task) => task.state === state);
+                return inState.length === 0 ? null : (
+                  <div key={state} className="sc-goal-tasks">
+                    <h3 className="sc-goal-tasks-state">
+                      {words.vocabulary.state[state]}{" "}
+                      <span className="sc-column-count">{inState.length}</span>
+                    </h3>
+                    <TaskList tasks={inState} taskHref={props.taskHref} today={props.today} />
+                  </div>
+                );
+              })
+            )}
+          </section>
+        </div>
+        <aside className="sc-task-aside" aria-label={words.task.facts}>
+          <dl className="sc-facts">
+            <div>
+              <dt>{roadmap.state}</dt>
+              <dd>
+                {props.onMove === undefined ? (
+                  words.vocabulary.goalState[goal.state]
+                ) : (
+                  <select
+                    className="sc-input"
+                    aria-label={roadmap.state}
+                    value={goal.state}
+                    disabled={props.busy === true}
+                    onChange={(event) => props.onMove?.(goal, event.target.value as GoalState)}
+                  >
+                    {GOAL_STATES.map((state) => (
+                      <option key={state} value={state}>
+                        {words.vocabulary.goalState[state]}
+                      </option>
+                    ))}
+                  </select>
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt>{roadmap.target}</dt>
+              <dd>
+                {goal.dueOn === null ? (
+                  <span className="sc-muted">{roadmap.noTarget}</span>
+                ) : (
+                  <Day day={goal.dueOn} />
+                )}
+              </dd>
+            </div>
+            <div>
+              <dt>{roadmap.setBy}</dt>
+              <dd>
+                <PersonChip person={goal.createdBy} /> <Time iso={goal.createdAt} />
+              </dd>
+            </div>
+          </dl>
+          {props.editHref !== undefined && (
+            <div className="sc-task-actions">
+              <a className="sc-button sc-button-secondary" href={props.editHref}>
+                {words.common.edit}
+              </a>
+            </div>
+          )}
+        </aside>
+      </div>
+    </div>
+  );
+}

package/src/components/paged.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useWords } from "../i18n/index.js";
+import { Button } from "./ui.js";
+
+// A long list shown a page at a time, from what the page already holds: the record of the
+// decisions, the feed, the tasks with no day. The next page is a click away and nothing is
+// asked of the server; the API's own pages (`limit`, `offset`) are for the command and scripts.
+
+/** How many items a list shows before it asks to be told to show more. */
+export const PAGE_SIZE = 50;
+
+/** The first `shown` items of a list, and the way to show the next page of it. */
+export function usePaged<T>(
+  items: readonly T[],
+  pageSize = PAGE_SIZE,
+): { readonly shown: readonly T[]; readonly rest: number; readonly more: () => void } {
+  const [pages, setPages] = useState(1);
+  const shown = items.slice(0, pages * pageSize);
+  return {
+    shown,
+    rest: items.length - shown.length,
+    more: () => setPages((current) => current + 1),
+  };
+}
+
+/** The button under a paged list, saying how many more there are; nothing when there are none. */
+export function ShowMore(props: { readonly rest: number; readonly onMore: () => void }) {
+  const words = useWords();
+  if (props.rest <= 0) {
+    return null;
+  }
+  return (
+    <div className="sc-show-more">
+      <Button variant="secondary" size="sm" onClick={props.onMore}>
+        {words.common.showMore(Math.min(props.rest, PAGE_SIZE), props.rest)}
+      </Button>
+    </div>
+  );
+}

package/src/components/projects.tsx

@@ -1,13 +1,20 @@
-import { type FormEvent, type ReactNode, useState } from "react";
+import { type FormEvent, type ReactNode, useEffect, useMemo, useState } from "react";
 import {
+  COLOR_NAMES,
+  type ColorName,
   MAX_PROJECT_DESCRIPTION_LENGTH,
   MAX_PROJECT_KEY_LENGTH,
   MAX_PROJECT_NAME_LENGTH,
+  MAX_PROJECT_SYMBOL_LENGTH,
   MAX_SKILLS_ADDRESS_LENGTH,
+  PROJECT_ICON_TYPES,
   PROJECT_ROLES,
   PROJECT_VISIBILITIES,
   type ProjectRole,
   type ProjectVisibility,
+  projectColorOf,
+  projectIconPath,
+  projectSymbolOf,
   type RestMember,
   type RestMemberInput,
   type RestPerson,
@@ -16,7 +23,44 @@ import {
   type RestProjectPatch,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Badge, Button, PersonChip, Time } from "./ui.js";
+import { Badge, Button, cx, PersonChip, Time } from "./ui.js";
+
+/** A project's mark: its symbol on its colour, so that projects tell apart at a glance. */
+export function ProjectMark(props: {
+  readonly project: {
+    readonly key: string;
+    readonly name: string;
+    readonly color: ColorName | null;
+    readonly symbol: string | null;
+    /** The project's own image, when it has one; the symbol on the colour otherwise. */
+    readonly icon?: { readonly sha256: string } | null | undefined;
+  };
+  readonly size?: "sm" | "md" | "lg";
+  /** Where the image is read from; the console's own path for it when left out. */
+  readonly iconSrc?: string | undefined;
+}) {
+  const size = props.size ?? "md";
+  const icon = props.project.icon ?? null;
+  const src =
+    props.iconSrc ?? (icon === null ? undefined : projectIconPath(props.project.key, icon));
+  return (
+    <span
+      className={cx(
+        "sc-mark",
+        `sc-mark-${size}`,
+        `sc-category-${projectColorOf(props.project)}`,
+        src !== undefined && "sc-mark-pictured",
+      )}
+      aria-hidden="true"
+    >
+      {src === undefined ? (
+        projectSymbolOf(props.project)
+      ) : (
+        <img className="sc-mark-image" src={src} alt="" />
+      )}
+    </span>
+  );
+}
 
 // The projects of the workspace (ADR-0008): the list a person may see, the way to make one,
 // a project's settings for its owners, and those listed in it. Each takes its data as props
@@ -60,6 +104,7 @@ export function ProjectList(props: ProjectListProps) {
       {props.projects.map((project) => (
         <li key={project.id} className="sc-project">
           <div className="sc-project-head">
+            <ProjectMark project={project} size="md" />
             <a
               className="sc-project-name"
               href={props.projectHref(project)}
@@ -79,14 +124,11 @@ export function ProjectList(props: ProjectListProps) {
           {project.description.length > 0 && (
             <p className="sc-project-description">{project.description}</p>
           )}
-          <p className="sc-project-meta">
-            {project.openDecisions > 0 && (
+          {project.openDecisions > 0 && (
+            <p className="sc-project-meta">
               <Badge tone="warning">{words.decisionsWaiting(project.openDecisions)}</Badge>
-            )}
-            {project.openRuns > 0 && (
-              <Badge tone="accent">{words.agentsAtWork(project.openRuns)}</Badge>
-            )}
-          </p>
+            </p>
+          )}
         </li>
       ))}
     </ul>
@@ -98,7 +140,11 @@ export interface ProjectFormProps {
   readonly project?: RestProject | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
-  readonly onSubmit: (input: RestProjectInput | RestProjectPatch) => void;
+  /**
+   * Called with the settings as they are to be, and the image for the mark: a file chosen,
+   * `null` to take the image away, or nothing to keep what the project has.
+   */
+  readonly onSubmit: (input: RestProjectInput | RestProjectPatch, icon?: File | null) => void;
   readonly onCancel?: (() => void) | undefined;
 }
 
@@ -121,6 +167,31 @@ export function ProjectForm(props: ProjectFormProps) {
   const [description, setDescription] = useState(project?.description ?? "");
   const [visibility, setVisibility] = useState<ProjectVisibility>(project?.visibility ?? "private");
   const [skillsAddress, setSkillsAddress] = useState(project?.skillsAddress ?? "");
+  const [color, setColor] = useState<ColorName | "">(project?.color ?? "");
+  const [symbol, setSymbol] = useState(project?.symbol ?? "");
+  /** The image for the mark: a file chosen, `null` for none any more, nothing to keep the project's. */
+  const [icon, setIcon] = useState<File | null | undefined>(undefined);
+  const chosenSrc = useMemo(
+    () => (icon instanceof File ? URL.createObjectURL(icon) : undefined),
+    [icon],
+  );
+  useEffect(
+    () => () => {
+      if (chosenSrc !== undefined) {
+        URL.revokeObjectURL(chosenSrc);
+      }
+    },
+    [chosenSrc],
+  );
+  const kept = icon === undefined ? (project?.icon ?? null) : null;
+  /** The mark as it will be, from what is typed and chosen so far. */
+  const preview = {
+    key: key.trim() === "" ? keyOf(name) : key.trim(),
+    name: name.trim() === "" ? "?" : name.trim(),
+    color: color === "" ? null : color,
+    symbol: symbol.trim() === "" ? null : symbol.trim(),
+    icon: icon instanceof File ? { sha256: "chosen" } : kept,
+  };
 
   const submit = (event: FormEvent) => {
     event.preventDefault();
@@ -129,9 +200,12 @@ export function ProjectForm(props: ProjectFormProps) {
       description: description.trim(),
       visibility,
       skillsAddress: skillsAddress.trim() === "" ? null : skillsAddress.trim(),
+      color: preview.color,
+      symbol: preview.symbol,
     };
     props.onSubmit(
       project === undefined ? { key: key.trim(), ...settings, name: name.trim() } : settings,
+      icon,
     );
   };
 
@@ -207,6 +281,50 @@ export function ProjectForm(props: ProjectFormProps) {
           />
         </label>
       </div>
+      <div className="sc-field-row sc-mark-row">
+        <ProjectMark project={preview} size="lg" iconSrc={chosenSrc} />
+        <label className="sc-field">
+          <span className="sc-field-label">{form.symbol}</span>
+          <input
+            className="sc-input"
+            value={symbol}
+            maxLength={MAX_PROJECT_SYMBOL_LENGTH}
+            pattern="\S*"
+            placeholder={projectSymbolOf({ name: preview.name, symbol: null })}
+            onChange={(event) => setSymbol(event.target.value)}
+          />
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.color}</span>
+          <select
+            className="sc-input"
+            value={color}
+            onChange={(event) => setColor(event.target.value as ColorName | "")}
+          >
+            <option value="">{form.colorAuto}</option>
+            {COLOR_NAMES.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.categoryColor[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.image}</span>
+          <input
+            key={icon === null ? "none" : "some"}
+            className="sc-input sc-input-file"
+            type="file"
+            accept={PROJECT_ICON_TYPES.join(",")}
+            onChange={(event) => setIcon(event.target.files?.[0] ?? undefined)}
+          />
+        </label>
+        {(icon instanceof File || kept !== null) && (
+          <Button variant="ghost" size="sm" onClick={() => setIcon(null)}>
+            {form.imageRemove}
+          </Button>
+        )}
+      </div>
       {props.error !== undefined && (
         <p className="sc-form-error" role="alert">
           {props.error}

package/src/components/runs.tsx

@@ -9,7 +9,7 @@ import { Badge, Button, formatBytes, PersonChip, Time } from "./ui.js";
 
 /** The words of a run's status in English: the default pack's. */
 export const RUN_STATUS_LABELS: Readonly<Record<RunStatus, string>> = {
-  running: "At work",
+  running: "Open",
   waiting: "Waiting for a decision",
   finished: "Finished",
   failed: "Failed",
@@ -61,6 +61,12 @@ export function RunCard(props: RunCardProps) {
               {words.until} <Time iso={run.endedAt} />
             </>
           )}
+          {open && (
+            <>
+              {" "}
+              · {words.lastHeard} <Time iso={run.lastHeardAt} />
+            </>
+          )}
         </span>
         {open && props.onAbandon !== undefined && (
           <Button

package/src/components/shell.tsx

@@ -34,8 +34,10 @@ export interface ShellProps {
   readonly title: string;
   /** The marks to show beside the name; none shows the name alone. */
   readonly brand?: Brand | undefined;
-  /** The project the page is on, named after the workspace, or nothing on the workspace's own pages. */
-  readonly project?: { readonly name: string; readonly href: string } | undefined;
+  /** The project the page is on, named after the workspace, with its mark when the page has it, or nothing on the workspace's own pages. */
+  readonly project?:
+    | { readonly name: string; readonly href: string; readonly mark?: ReactNode }
+    | undefined;
   /** The pages of the level the person is on, as tabs: the project's, or the workspace's. */
   readonly nav: readonly NavItem[];
   /** The workspace's pages, reached from anywhere through the person's menu. */
@@ -228,6 +230,7 @@ export function Shell(props: ShellProps) {
                 href={props.project.href}
                 onClick={follow(props.project.href)}
               >
+                {props.project.mark}
                 {props.project.name}
               </a>
             </span>