@skillcdn/console 0.1.9 → 0.1.11

package/src/components/calendar.tsx

@@ -0,0 +1,367 @@
+import { OPEN_TASK_STATES, type RestCategory, type RestPerson, type RestTask } from "../api.js";
+import {
+  addMonths,
+  daysBetween,
+  firstDayOfWeek,
+  formatMonth,
+  formatWeekday,
+  type GridDay,
+  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. 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 a due day alone sits on it as a dot, and one with a
+// start alone is marked on that day. Who has what says 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);
+
+/** Whether a task lies across days: a start and a due day, and the due day after the start. */
+const spans = (task: RestTask): boolean =>
+  task.startsOn !== null && task.dueOn !== null && task.startsOn < task.dueOn;
+
+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;
+  /** The workspace's categories, for the legend to say what the colours mean. */
+  readonly categories?: readonly RestCategory[] | undefined;
+  readonly taskHref: (task: RestTask) => string;
+  /** Where the calendar is on another month. */
+  readonly monthHref: (month: string) => string;
+}
+
+/** One task's stretch across one week: which columns it covers, and in which lane it lies. */
+export interface WeekSegment {
+  readonly task: RestTask;
+  /** The first and the last column (0 to 6) the task covers in this week. */
+  readonly from: number;
+  readonly to: number;
+  readonly lane: number;
+  /** Whether the task begins in this week, and whether it ends in it. */
+  readonly begins: boolean;
+  readonly ends: boolean;
+}
+
+/**
+ * The bars of one week: every task lying across days that touches the week, cut to it, each
+ * in the first lane where it crosses nothing that was laid before it. The longest and earliest
+ * go first, so that the lanes stay few.
+ */
+export function weekSegments(week: readonly GridDay[], tasks: readonly RestTask[]): WeekSegment[] {
+  const first = week[0]?.day;
+  const last = week[week.length - 1]?.day;
+  if (first === undefined || last === undefined) {
+    return [];
+  }
+  const cut = tasks
+    .filter(spans)
+    .flatMap((task) => {
+      const startsOn = task.startsOn ?? first;
+      const dueOn = task.dueOn ?? last;
+      if (dueOn < first || startsOn > last) {
+        return [];
+      }
+      const from = startsOn < first ? 0 : daysBetween(first, startsOn);
+      const to = dueOn > last ? week.length - 1 : daysBetween(first, dueOn);
+      return [{ task, from, to, begins: startsOn >= first, ends: dueOn <= last }];
+    })
+    .sort(
+      (a, b) => a.from - b.from || b.to - b.from - (a.to - a.from) || a.task.number - b.task.number,
+    );
+  const ends: number[] = [];
+  return cut.map((segment) => {
+    let lane = ends.findIndex((end) => end < segment.from);
+    if (lane === -1) {
+      lane = ends.length;
+      ends.push(segment.to);
+    } else {
+      ends[lane] = segment.to;
+    }
+    return { ...segment, lane };
+  });
+}
+
+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 (spans(task)) {
+      continue;
+    }
+    if (task.dueOn !== null) {
+      push(due, task.dueOn, task);
+    } else if (task.startsOn !== null) {
+      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 monthWeeks = weeks.map((week) => ({ week, segments: weekSegments(week, props.tasks) }));
+  const nothing =
+    [...due.keys()].every((day) => !inMonth(day)) &&
+    [...starting.keys()].every((day) => !inMonth(day)) &&
+    monthWeeks.every(({ week, segments }) =>
+      segments.every(
+        (segment) => !week.slice(segment.from, segment.to + 1).some((cell) => cell.inMonth),
+      ),
+    );
+  const tone = (task: RestTask, day: string) =>
+    cx(!isOpen(task) && "sc-calendar-over", isOpen(task) && day < now && "sc-calendar-late");
+  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>
+          {monthWeeks.map(({ week, segments }) => {
+            const lanes = segments.reduce((most, segment) => Math.max(most, segment.lane + 1), 0);
+            return (
+              <tr key={week[0]?.day}>
+                {week.map((cell, column) => (
+                  <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>
+                    {Array.from({ length: lanes }, (_, lane) => {
+                      const segment = segments.find(
+                        (candidate) =>
+                          candidate.lane === lane &&
+                          candidate.from <= column &&
+                          column <= candidate.to,
+                      );
+                      if (segment === undefined) {
+                        // The lane is someone else's on this day: the bars below keep their height.
+                        // biome-ignore lint/suspicious/noArrayIndexKey: an empty lane is nothing but its position, and the lanes of a week never reorder
+                        return <span key={lane} className="sc-calendar-lane" aria-hidden="true" />;
+                      }
+                      const { task } = segment;
+                      return (
+                        <a
+                          key={task.id}
+                          className={cx(
+                            "sc-calendar-bar",
+                            `sc-category-${task.category?.color ?? "gray"}`,
+                            segment.from === column && segment.begins && "sc-calendar-bar-begins",
+                            segment.to === column && segment.ends && "sc-calendar-bar-ends",
+                            tone(task, task.dueOn ?? cell.day),
+                          )}
+                          href={props.taskHref(task)}
+                          title={`#${task.number} ${task.title}`}
+                        >
+                          {segment.from === column && (
+                            <span className="sc-calendar-task-title">{task.title}</span>
+                          )}
+                        </a>
+                      );
+                    })}
+                    {(due.get(cell.day) ?? []).map((task) => (
+                      <a
+                        key={task.id}
+                        className={cx("sc-calendar-task", tone(task, cell.day))}
+                        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.startsOnly}`}
+                      >
+                        <span className="sc-calendar-task-title">{task.title}</span>
+                      </a>
+                    ))}
+                  </td>
+                ))}
+              </tr>
+            );
+          })}
+        </tbody>
+      </table>
+      {(props.categories ?? []).length > 0 && (
+        <dl className="sc-calendar-legend" aria-label={words.legend.title}>
+          {(props.categories ?? []).map((category) => (
+            <div key={category.key}>
+              <dt>
+                <span className={cx("sc-calendar-dot", `sc-category-${category.color}`)} />
+              </dt>
+              <dd>{category.name}</dd>
+            </div>
+          ))}
+        </dl>
+      )}
+      {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

@@ -9,11 +9,14 @@ import {
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
+import { ShowMore, usePaged } from "./paged.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 +243,59 @@ 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();
+  const { shown, rest, more } = usePaged(props.decisions);
+  return (
+    <>
+      <ol className="sc-decision-log" aria-label={words.decisions.record}>
+        {shown.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>
+      <ShowMore rest={rest} onMore={more} />
+    </>
+  );
+}
+
 export function DecisionList(props: DecisionListProps) {
   const words = useWords();
   const waiting = props.decisions.filter((decision) => decision.answer === null);
@@ -268,9 +324,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>