@skillcdn/console 0.1.8 → 0.1.10

package/src/components/calendar.tsx

@@ -0,0 +1,255 @@
+import { OPEN_TASK_STATES, type RestPerson, type RestTask } from "../api.js";
+import {
+  addMonths,
+  daysBetween,
+  firstDayOfWeek,
+  formatMonth,
+  formatWeekday,
+  monthGrid,
+  monthOf,
+  today as todayOf,
+  weekdays,
+} from "../dates.js";
+import { useLanguage, useWords } from "../i18n/index.js";
+import { cx, PersonChip } from "./ui.js";
+
+// The calendar of a project (ADR-0019): the month as a grid, each task on the day it is due
+// and, lightly, on the day it starts; and who has what, so that whoever runs the project sees
+// at a glance whether the work is on its days. Takes its data as props and nothing from the
+// network; the month shown is the address's (ADR-0010).
+
+const isOpen = (task: RestTask): boolean => OPEN_TASK_STATES.includes(task.state);
+
+export interface CalendarProps {
+  readonly tasks: readonly RestTask[];
+  /** The month shown: `2026-10`. */
+  readonly month: string;
+  /** The day to count from; the browser's today when left out. */
+  readonly today?: string | undefined;
+  readonly taskHref: (task: RestTask) => string;
+  /** Where the calendar is on another month. */
+  readonly monthHref: (month: string) => string;
+}
+
+function push(map: Map<string, RestTask[]>, day: string, task: RestTask): void {
+  const list = map.get(day);
+  if (list === undefined) {
+    map.set(day, [task]);
+  } else {
+    list.push(task);
+  }
+}
+
+export function Calendar(props: CalendarProps) {
+  const words = useWords().calendar;
+  const { tag } = useLanguage();
+  const now = props.today ?? todayOf();
+  const firstDay = firstDayOfWeek(tag);
+  const weeks = monthGrid(props.month, firstDay);
+  const due = new Map<string, RestTask[]>();
+  const starting = new Map<string, RestTask[]>();
+  for (const task of props.tasks) {
+    if (task.dueOn !== null) {
+      push(due, task.dueOn, task);
+    }
+    if (task.startsOn !== null && task.startsOn !== task.dueOn) {
+      push(starting, task.startsOn, task);
+    }
+  }
+  // Within a day, what is still open comes first; the rest reads as what was.
+  for (const list of due.values()) {
+    list.sort((a, b) => Number(isOpen(b)) - Number(isOpen(a)) || a.number - b.number);
+  }
+  const inMonth = (day: string) => monthOf(day) === props.month;
+  const nothing =
+    [...due.keys()].every((day) => !inMonth(day)) &&
+    [...starting.keys()].every((day) => !inMonth(day));
+  return (
+    <div className="sc-calendar">
+      <div className="sc-calendar-head">
+        <h2 className="sc-calendar-month">{formatMonth(props.month, tag)}</h2>
+        <nav className="sc-calendar-nav" aria-label={words.grid}>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.monthHref(addMonths(props.month, -1))}
+            aria-label={words.previous}
+          >
+            {"<"}
+          </a>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.monthHref(monthOf(now))}
+          >
+            {words.thisMonth}
+          </a>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.monthHref(addMonths(props.month, 1))}
+            aria-label={words.next}
+          >
+            {">"}
+          </a>
+        </nav>
+      </div>
+      <table className="sc-calendar-grid" aria-label={words.grid}>
+        <thead>
+          <tr>
+            {weekdays(firstDay).map((weekday) => (
+              <th key={weekday} scope="col">
+                {formatWeekday(weekday, tag)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {weeks.map((week) => (
+            <tr key={week[0]?.day}>
+              {week.map((cell) => (
+                <td
+                  key={cell.day}
+                  className={cx(
+                    "sc-calendar-cell",
+                    !cell.inMonth && "sc-calendar-cell-outside",
+                    cell.day === now && "sc-calendar-cell-today",
+                  )}
+                >
+                  <span className="sc-calendar-day">{Number(cell.day.slice(8))}</span>
+                  {(due.get(cell.day) ?? []).map((task) => (
+                    <a
+                      key={task.id}
+                      className={cx(
+                        "sc-calendar-task",
+                        !isOpen(task) && "sc-calendar-task-over",
+                        isOpen(task) && cell.day < now && "sc-calendar-task-late",
+                      )}
+                      href={props.taskHref(task)}
+                      title={`#${task.number} ${task.title}`}
+                    >
+                      <span
+                        className={cx(
+                          "sc-calendar-dot",
+                          `sc-category-${task.category?.color ?? "gray"}`,
+                        )}
+                      />
+                      <span className="sc-calendar-task-title">{task.title}</span>
+                    </a>
+                  ))}
+                  {(starting.get(cell.day) ?? []).map((task) => (
+                    <a
+                      key={task.id}
+                      className="sc-calendar-task sc-calendar-task-start"
+                      href={props.taskHref(task)}
+                      title={`#${task.number} ${task.title}: ${words.starts}`}
+                    >
+                      <span className="sc-calendar-task-title">{task.title}</span>
+                    </a>
+                  ))}
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      {nothing && <p className="sc-muted">{words.nothingDue}</p>}
+    </div>
+  );
+}
+
+/** One person's share of the open work, as the table of who has what says it. */
+export interface WorkloadRow {
+  /** The person, or nobody for the tasks assigned to no one. */
+  readonly person: RestPerson | undefined;
+  readonly open: number;
+  readonly inProgress: number;
+  /** Open, and due within the next seven days from today. */
+  readonly dueSoon: number;
+  /** Open, and past its day. */
+  readonly overdue: number;
+}
+
+/** Who has what, from the open tasks: by login, with the unassigned last. */
+export function workloadOf(tasks: readonly RestTask[], today: string): WorkloadRow[] {
+  const rows = new Map<string, { person: RestPerson | undefined; tasks: RestTask[] }>();
+  for (const task of tasks.filter(isOpen)) {
+    const key = task.assignee?.id ?? "";
+    const row = rows.get(key);
+    if (row === undefined) {
+      rows.set(key, { person: task.assignee ?? undefined, tasks: [task] });
+    } else {
+      row.tasks.push(task);
+    }
+  }
+  const count = (list: readonly RestTask[]): Omit<WorkloadRow, "person"> => ({
+    open: list.length,
+    inProgress: list.filter((task) => task.state === "in_progress" || task.state === "in_review")
+      .length,
+    dueSoon: list.filter((task) => {
+      if (task.dueOn === null) {
+        return false;
+      }
+      const days = daysBetween(today, task.dueOn);
+      return days >= 0 && days <= 7;
+    }).length,
+    overdue: list.filter((task) => task.dueOn !== null && task.dueOn < today).length,
+  });
+  return [...rows.values()]
+    .map((row) => ({ person: row.person, ...count(row.tasks) }))
+    .sort((a, b) => {
+      if (a.person === undefined) {
+        return 1;
+      }
+      if (b.person === undefined) {
+        return -1;
+      }
+      return a.person.login.localeCompare(b.person.login);
+    });
+}
+
+export interface WorkloadProps {
+  readonly tasks: readonly RestTask[];
+  readonly today?: string | undefined;
+  /** Where the board is, narrowed to one person's tasks, or to the unassigned. */
+  readonly personHref?: ((person: RestPerson | undefined) => string) | undefined;
+}
+
+/** Who has what: a row per person, and what of theirs is late or due soon. */
+export function Workload(props: WorkloadProps) {
+  const words = useWords().calendar.workload;
+  const rows = workloadOf(props.tasks, props.today ?? todayOf());
+  if (rows.length === 0) {
+    return null;
+  }
+  return (
+    <table className="sc-workload" aria-label={words.title}>
+      <thead>
+        <tr>
+          <th scope="col">{words.person}</th>
+          <th scope="col">{words.open}</th>
+          <th scope="col">{words.inProgress}</th>
+          <th scope="col">{words.dueSoon}</th>
+          <th scope="col">{words.overdue}</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map((row) => {
+          const href = props.personHref?.(row.person);
+          const who =
+            row.person === undefined ? (
+              <span className="sc-muted">{words.unassigned}</span>
+            ) : (
+              <PersonChip person={row.person} />
+            );
+          return (
+            <tr key={row.person?.id ?? ""}>
+              <th scope="row">{href === undefined ? who : <a href={href}>{who}</a>}</th>
+              <td>{row.open}</td>
+              <td>{row.inProgress}</td>
+              <td className={cx(row.dueSoon > 0 && "sc-workload-soon")}>{row.dueSoon}</td>
+              <td className={cx(row.overdue > 0 && "sc-workload-late")}>{row.overdue}</td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+}

package/src/components/categories.tsx

@@ -0,0 +1,209 @@
+import { type FormEvent, type ReactNode, useState } from "react";
+import {
+  CATEGORY_COLORS,
+  type CategoryColor,
+  MAX_CATEGORY_KEY_LENGTH,
+  MAX_CATEGORY_NAME_LENGTH,
+  type RestCategory,
+  type RestCategoryInput,
+  type RestCategoryPatch,
+} from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { keyOf } from "./projects.js";
+import { Button, CategoryBadge, cx } from "./ui.js";
+
+// The categories tasks are sorted into (ADR-0019), as the workspace's page lists them: each in
+// its colour, with the ways for an administrator to rename, recolour, add and remove one. Takes
+// its data as props and nothing from the network.
+
+export interface CategoryListProps {
+  readonly categories: readonly RestCategory[];
+  readonly busy?: boolean | undefined;
+  /** Called with a category to add. Left out, the list is read here, not changed. */
+  readonly onAdd?: ((input: RestCategoryInput) => void) | undefined;
+  readonly onChange?: ((category: RestCategory, patch: RestCategoryPatch) => void) | undefined;
+  readonly onRemove?: ((category: RestCategory) => void) | undefined;
+  readonly empty?: ReactNode;
+}
+
+/** One category, with its name and its colour open to change where an administrator is looking. */
+function CategoryRow(props: {
+  readonly category: RestCategory;
+  readonly busy: boolean | undefined;
+  readonly onChange: ((category: RestCategory, patch: RestCategoryPatch) => void) | undefined;
+  readonly onRemove: ((category: RestCategory) => void) | undefined;
+}) {
+  const words = useWords();
+  const { category } = props;
+  const [name, setName] = useState(category.name);
+  const [color, setColor] = useState<CategoryColor>(category.color);
+  const changed = name.trim() !== category.name || color !== category.color;
+  if (props.onChange === undefined) {
+    return (
+      <li className="sc-category-row">
+        <CategoryBadge category={category} />
+        <code className="sc-project-key">{category.key}</code>
+      </li>
+    );
+  }
+  return (
+    <li className="sc-category-row">
+      <form
+        className="sc-category-form"
+        onSubmit={(event) => {
+          event.preventDefault();
+          if (changed && name.trim() !== "") {
+            props.onChange?.(category, { name: name.trim(), color });
+          }
+        }}
+      >
+        <span className={cx("sc-category-swatch", `sc-category-${color}`)} aria-hidden="true" />
+        <label className="sc-field sc-field-inline">
+          <span className="sc-visually-hidden">{words.categories.nameOf(category.key)}</span>
+          <input
+            className="sc-input"
+            value={name}
+            maxLength={MAX_CATEGORY_NAME_LENGTH}
+            required
+            onChange={(event) => setName(event.target.value)}
+          />
+        </label>
+        <code className="sc-project-key">{category.key}</code>
+        <label className="sc-field sc-field-inline">
+          <span className="sc-visually-hidden">{words.categories.colorOf(category.key)}</span>
+          <select
+            className="sc-input"
+            value={color}
+            onChange={(event) => setColor(event.target.value as CategoryColor)}
+          >
+            {CATEGORY_COLORS.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.categoryColor[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <Button
+          type="submit"
+          variant="primary"
+          size="sm"
+          disabled={props.busy === true || !changed || name.trim() === ""}
+        >
+          {words.common.save}
+        </Button>
+        {props.onRemove !== undefined && (
+          <Button
+            variant="danger"
+            size="sm"
+            disabled={props.busy === true}
+            onClick={() => props.onRemove?.(category)}
+          >
+            {words.common.remove}
+          </Button>
+        )}
+      </form>
+    </li>
+  );
+}
+
+export function CategoryList(props: CategoryListProps) {
+  const words = useWords();
+  const form = words.categories.form;
+  const [name, setName] = useState("");
+  const [key, setKey] = useState("");
+  const [keyTouched, setKeyTouched] = useState(false);
+  const [color, setColor] = useState<CategoryColor>("gray");
+  const add = (event: FormEvent) => {
+    event.preventDefault();
+    if (name.trim() === "" || key.trim() === "") {
+      return;
+    }
+    props.onAdd?.({ key: key.trim(), name: name.trim(), color });
+    setName("");
+    setKey("");
+    setKeyTouched(false);
+    setColor("gray");
+  };
+  return (
+    <div className="sc-categories">
+      {props.categories.length === 0 ? (
+        (props.empty ?? null)
+      ) : (
+        <ul className="sc-category-list" aria-label={words.categories.list}>
+          {props.categories.map((category) => (
+            <CategoryRow
+              key={category.key}
+              category={category}
+              busy={props.busy}
+              onChange={props.onChange}
+              onRemove={props.onRemove}
+            />
+          ))}
+        </ul>
+      )}
+      {props.onAdd !== undefined && (
+        <form
+          className="sc-form sc-member-form"
+          aria-label={words.categories.addAria}
+          onSubmit={add}
+        >
+          <div className="sc-field-row">
+            <label className="sc-field">
+              <span className="sc-field-label">{form.name}</span>
+              <input
+                className="sc-input"
+                value={name}
+                maxLength={MAX_CATEGORY_NAME_LENGTH}
+                required
+                onChange={(event) => {
+                  setName(event.target.value);
+                  if (!keyTouched) {
+                    setKey(keyOf(event.target.value).slice(0, MAX_CATEGORY_KEY_LENGTH));
+                  }
+                }}
+              />
+            </label>
+            <label className="sc-field">
+              <span className="sc-field-label">{form.key}</span>
+              <input
+                className="sc-input"
+                value={key}
+                maxLength={MAX_CATEGORY_KEY_LENGTH}
+                pattern="[a-z0-9]([a-z0-9-]*[a-z0-9])?"
+                required
+                title={form.keyHint}
+                onChange={(event) => {
+                  setKeyTouched(true);
+                  setKey(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 CategoryColor)}
+              >
+                {CATEGORY_COLORS.map((candidate) => (
+                  <option key={candidate} value={candidate}>
+                    {words.vocabulary.categoryColor[candidate]}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <div className="sc-form-actions">
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={props.busy === true || name.trim() === "" || key.trim() === ""}
+              >
+                {form.add}
+              </Button>
+            </div>
+          </div>
+        </form>
+      )}
+    </div>
+  );
+}

package/src/components/decision-list.tsx

@@ -11,9 +11,11 @@ import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
 import { Button, cx, PersonChip, Time } from "./ui.js";
 
-// The decisions: the ones that wait, with the way to answer each, and the ones answered, with
-// who answered and when; each a record (ADR-0009) of its context, its answer with the
-// rationale, and what followed. Each takes its data as props and nothing from the network.
+// The decisions: the ones that wait, each a card with the way to answer it, since they are what
+// a person came for; and the ones answered, the record, a row each, since they are read back
+// rarely and looked up by what was asked. Each decision is a record (ADR-0009) of its context,
+// its answer with the rationale, and what followed, read on its own page. Each component takes
+// its data as props and nothing from the network.
 
 export interface DecisionCardProps {
   readonly decision: RestDecision;
@@ -240,6 +242,55 @@ export interface DecisionListProps {
   readonly empty?: React.ReactNode;
 }
 
+export interface DecisionLogProps {
+  /** The decisions answered, newest first. */
+  readonly decisions: readonly RestDecision[];
+  readonly tasks?: ReadonlyMap<string, RestTask> | undefined;
+  readonly taskHref?: ((task: RestTask) => string) | undefined;
+  /** Where each decision's own page is, with its context, its rationale and what followed. */
+  readonly decisionHref?: ((decision: RestDecision) => string) | undefined;
+}
+
+/** The record: one row per decision answered, what was asked, what was chosen, by whom, when. */
+export function DecisionLog(props: DecisionLogProps) {
+  const words = useWords();
+  return (
+    <ol className="sc-decision-log" aria-label={words.decisions.record}>
+      {props.decisions.map((decision) => {
+        const task = decision.taskId === null ? undefined : props.tasks?.get(decision.taskId);
+        const href = props.decisionHref?.(decision);
+        const chosen =
+          decision.options.find((option) => option.id === decision.answer?.option)?.label ??
+          decision.answer?.option ??
+          "";
+        return (
+          <li key={decision.id} className="sc-decision-row">
+            <span className="sc-decision-row-question">
+              {href === undefined ? decision.question : <a href={href}>{decision.question}</a>}
+            </span>
+            <span className="sc-decision-row-answer">{chosen}</span>
+            <span className="sc-decision-row-meta">
+              {decision.answer !== null && (
+                <>
+                  <PersonChip person={decision.answer.by} /> <Time iso={decision.answer.at} />
+                </>
+              )}
+              {task !== undefined &&
+                (props.taskHref === undefined ? (
+                  <span className="sc-card-number">#{task.number}</span>
+                ) : (
+                  <a className="sc-card-number" href={props.taskHref(task)}>
+                    #{task.number}
+                  </a>
+                ))}
+            </span>
+          </li>
+        );
+      })}
+    </ol>
+  );
+}
+
 export function DecisionList(props: DecisionListProps) {
   const words = useWords();
   const waiting = props.decisions.filter((decision) => decision.answer === null);
@@ -268,9 +319,15 @@ export function DecisionList(props: DecisionListProps) {
       {answered.length > 0 && (
         <section aria-label={words.decisions.answered}>
           <h2 className="sc-section-title">
-            {words.decisions.answered} <span className="sc-column-count">{answered.length}</span>
+            {words.decisions.record} <span className="sc-column-count">{answered.length}</span>
           </h2>
-          {answered.map(card)}
+          <p className="sc-lead">{words.decisions.recordLead}</p>
+          <DecisionLog
+            decisions={answered}
+            tasks={props.tasks}
+            taskHref={props.taskHref}
+            decisionHref={props.decisionHref}
+          />
         </section>
       )}
     </div>

package/src/components/event-feed.tsx

@@ -30,6 +30,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 +47,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":