@skillcdn/console 0.1.9 → 0.1.10

package/src/components/task-form.tsx

@@ -5,6 +5,8 @@ import {
   MAX_LINKS,
   MAX_TITLE_LENGTH,
   MAX_URL_LENGTH,
+  type RestCategory,
+  type RestGoal,
   type RestPerson,
   type RestTask,
   type RestTaskInput,
@@ -15,6 +17,8 @@ import { useWords } from "../i18n/index.js";
 import { Button } from "./ui.js";
 
 // Writing a task, or changing one. The bounds are the package's, said before a request is made.
+// The plan is two days (ADR-0019); what happened to the task is the board's to keep, not a
+// field here.
 
 export interface TaskFormProps {
   readonly people: readonly RestPerson[];
@@ -22,6 +26,10 @@ export interface TaskFormProps {
   readonly task?: RestTask | undefined;
   /** The tasks a new one may be part of. */
   readonly parents?: readonly RestTask[] | undefined;
+  /** The categories of the workspace, to sort the task into one. */
+  readonly categories?: readonly RestCategory[] | undefined;
+  /** The goals of the project, for the task to work towards one. */
+  readonly goals?: readonly RestGoal[] | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
   readonly onSubmit: (input: RestTaskInput) => void;
@@ -43,6 +51,10 @@ export function TaskForm(props: TaskFormProps) {
   const [priority, setPriority] = useState(task?.priority ?? "normal");
   const [assigneeId, setAssigneeId] = useState(task?.assignee?.id ?? "");
   const [parentId, setParentId] = useState(task?.parentId ?? "");
+  const [category, setCategory] = useState(task?.category?.key ?? "");
+  const [goalId, setGoalId] = useState(task?.goalId ?? "");
+  const [startsOn, setStartsOn] = useState(task?.startsOn ?? "");
+  const [dueOn, setDueOn] = useState(task?.dueOn ?? "");
   const [links, setLinks] = useState<readonly LinkDraft[]>(
     task?.links.map((link) => ({ url: link.url, label: link.label ?? "" })) ?? [],
   );
@@ -56,6 +68,10 @@ export function TaskForm(props: TaskFormProps) {
       priority,
       assigneeId: assigneeId === "" ? null : assigneeId,
       parentId: parentId === "" ? null : parentId,
+      category: category === "" ? null : category,
+      goalId: goalId === "" ? null : goalId,
+      startsOn: startsOn === "" ? null : startsOn,
+      dueOn: dueOn === "" ? null : dueOn,
       links: links
         .filter((link) => link.url.trim().length > 0)
         .map((link) => ({
@@ -66,6 +82,12 @@ export function TaskForm(props: TaskFormProps) {
   };
 
   const parents = (props.parents ?? []).filter((candidate) => candidate.id !== task?.id);
+  const categories = props.categories ?? [];
+  // A goal let go is not offered, unless the task is on it already.
+  const goals = (props.goals ?? []).filter(
+    (goal) => goal.state !== "dropped" || goal.id === task?.goalId,
+  );
+  const datesInOrder = startsOn === "" || dueOn === "" || startsOn <= dueOn;
 
   return (
     <form className="sc-form" onSubmit={submit}>
@@ -134,6 +156,61 @@ export function TaskForm(props: TaskFormProps) {
             ))}
           </select>
         </label>
+        {categories.length > 0 && (
+          <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>
+              {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}
+            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>
+        {goals.length > 0 && (
+          <label className="sc-field">
+            <span className="sc-field-label">{form.goal}</span>
+            <select
+              className="sc-input"
+              value={goalId}
+              onChange={(event) => setGoalId(event.target.value)}
+            >
+              <option value="">{form.noGoal}</option>
+              {goals.map((goal) => (
+                <option key={goal.id} value={goal.id}>
+                  {goal.title}
+                </option>
+              ))}
+            </select>
+          </label>
+        )}
         {parents.length > 0 && (
           <label className="sc-field">
             <span className="sc-field-label">{form.partOf}</span>
@@ -214,7 +291,7 @@ export function TaskForm(props: TaskFormProps) {
         <Button
           type="submit"
           variant="primary"
-          disabled={props.busy === true || title.trim() === ""}
+          disabled={props.busy === true || title.trim() === "" || !datesInOrder}
         >
           {task === undefined ? form.write : words.common.save}
         </Button>

package/src/components/task-list.tsx

@@ -0,0 +1,61 @@
+import type { ReactNode } from "react";
+import type { RestTask } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { Avatar, Badge, CategoryBadge, DueBadge, StateBadge } from "./ui.js";
+
+// A list of tasks as rows, where the board's columns are not the point: the calendar's late
+// and unscheduled tasks, a goal's tasks, a person's own work. Each row says what a card says,
+// in one line. Takes its data as props and nothing from the network.
+
+export interface TaskListProps {
+  readonly tasks: readonly RestTask[];
+  readonly taskHref: (task: RestTask) => string;
+  /** Whether each row says the task's state: where the rows are not grouped by it. */
+  readonly showState?: boolean | undefined;
+  /** What the row says the task belongs to, where tasks of several projects are listed together. */
+  readonly projectOf?: ((task: RestTask) => string | undefined) | undefined;
+  /** The day to count due days from; the browser's today when left out. */
+  readonly today?: string | undefined;
+  readonly label?: string | undefined;
+  readonly empty?: ReactNode;
+}
+
+export function TaskList(props: TaskListProps) {
+  const words = useWords();
+  if (props.tasks.length === 0) {
+    return <>{props.empty ?? null}</>;
+  }
+  return (
+    <ul className="sc-task-rows" aria-label={props.label}>
+      {props.tasks.map((task) => {
+        const project = props.projectOf?.(task);
+        return (
+          <li key={task.id} className="sc-task-row">
+            <a className="sc-task-row-title" href={props.taskHref(task)}>
+              <span className="sc-card-number">#{task.number}</span> {task.title}
+            </a>
+            {project !== undefined && <span className="sc-task-row-project">{project}</span>}
+            <span className="sc-task-row-meta">
+              {task.category !== null && <CategoryBadge category={task.category} />}
+              {props.showState === true && <StateBadge state={task.state} />}
+              {task.openDecisions > 0 && (
+                <Badge tone="warning" title={words.board.decisionsTitle}>
+                  {words.board.decisions(task.openDecisions)}
+                </Badge>
+              )}
+              {task.openRuns > 0 && (
+                <Badge tone="accent" title={words.board.agentAtWorkTitle}>
+                  {words.board.agentAtWork}
+                </Badge>
+              )}
+              {task.dueOn !== null && (
+                <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+              )}
+              {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
+            </span>
+          </li>
+        );
+      })}
+    </ul>
+  );
+}

package/src/components/task-view.tsx

@@ -1,17 +1,20 @@
 import type {
   RestAnswerInput,
   RestArtifact,
+  RestCategory,
   RestDecision,
   RestDecisionInput,
   RestDecisionPatch,
   RestEvent,
+  RestGoal,
   RestPerson,
   RestRun,
   RestTask,
   RestTaskInput,
   TaskState,
 } from "../api.js";
-import { useWords } from "../i18n/index.js";
+import { formatDay } from "../dates.js";
+import { useLanguage, useWords } from "../i18n/index.js";
 import type { TaskFormKind } from "../router.js";
 import { TASK_STATES } from "../vocabulary.js";
 import { DecisionForm } from "./decision-form.js";
@@ -20,12 +23,13 @@ import { EventFeed } from "./event-feed.js";
 import { Markdown } from "./markdown.js";
 import { RunList } from "./runs.js";
 import { TaskForm } from "./task-form.js";
-import { PersonChip, PriorityBadge, StateBadge, Time } from "./ui.js";
+import { CategoryBadge, DueBadge, PersonChip, PriorityBadge, StateBadge, Time } from "./ui.js";
 
 // One task: what it is, who it is on, what it links to, the agents at work on it, the decisions
 // about it, the tasks that are part of it, everything that happened to it, and the ways to
 // change it. Takes its data as props and nothing from the network; which of its forms is open
-// is told by the page, since each form has an address of its own (ADR-0010).
+// is told by the page, since each form has an address of its own (ADR-0010). The facts beside
+// the text say only what is set: a plan, a category or a goal the task has none of is not a row.
 
 export interface TaskViewProps {
   readonly task: RestTask;
@@ -37,13 +41,21 @@ export interface TaskViewProps {
   readonly runs?: readonly RestRun[] | undefined;
   /** Everything that happened to the task, oldest first, when the page has read it. */
   readonly history?: readonly RestEvent[] | undefined;
+  /** The categories of the workspace, for the form. */
+  readonly categories?: readonly RestCategory[] | undefined;
+  /** The goals of the project, for the form and for naming the one the task works towards. */
+  readonly goals?: readonly RestGoal[] | undefined;
   readonly taskHref: (task: RestTask) => string;
   /** Where a decision is answered, for a run that waits for one. */
   readonly decisionHref?: ((decisionId: string) => string) | undefined;
+  /** Where a goal of the roadmap is read. */
+  readonly goalHref?: ((goalId: string) => string) | undefined;
   /** Where a file a run handed in is read. */
   readonly fileHref?: ((artifact: RestArtifact) => 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;
+  /** The day to count due days from; the browser's today when left out. */
+  readonly today?: string | undefined;
   /** The form open on the page, if one: the task edited, or a decision raised about it. */
   readonly form?: TaskFormKind | undefined;
   /** Where each form is opened; left out, the forms cannot be opened from here. */
@@ -65,6 +77,7 @@ export interface TaskViewProps {
 
 export function TaskView(props: TaskViewProps) {
   const words = useWords();
+  const { tag } = useLanguage();
   const { task } = props;
   const parent =
     task.parentId === null
@@ -74,6 +87,11 @@ export function TaskView(props: TaskViewProps) {
   const about = props.decisions.filter((decision) => decision.taskId === task.id);
   const runs = (props.runs ?? []).filter((run) => run.taskId === task.id);
   const tasksById = new Map(props.tasks.map((candidate) => [candidate.id, candidate]));
+  const goal =
+    task.goalId === null
+      ? undefined
+      : props.goals?.find((candidate) => candidate.id === task.goalId);
+  const day = (value: string) => formatDay(value, tag);
 
   if (props.form === "edit") {
     return (
@@ -85,6 +103,8 @@ export function TaskView(props: TaskViewProps) {
           people={props.people}
           task={task}
           parents={props.tasks}
+          categories={props.categories}
+          goals={props.goals}
           busy={props.busy}
           error={props.error}
           onSubmit={(input) => props.onChange(task, input)}
@@ -110,7 +130,11 @@ export function TaskView(props: TaskViewProps) {
         </h1>
         <div className="sc-task-badges">
           <StateBadge state={task.state} />
+          {task.category !== null && <CategoryBadge category={task.category} />}
           <PriorityBadge priority={task.priority} />
+          {task.dueOn !== null && (
+            <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+          )}
         </div>
       </header>
       <div className="sc-task-body">
@@ -226,6 +250,26 @@ export function TaskView(props: TaskViewProps) {
               <dt>{words.task.form.priority}</dt>
               <dd>{words.vocabulary.priority[task.priority]}</dd>
             </div>
+            {task.category !== null && (
+              <div>
+                <dt>{words.task.category}</dt>
+                <dd>
+                  <CategoryBadge category={task.category} />
+                </dd>
+              </div>
+            )}
+            {task.goalId !== null && (
+              <div>
+                <dt>{words.task.goal}</dt>
+                <dd>
+                  {props.goalHref === undefined ? (
+                    (goal?.title ?? task.goalId)
+                  ) : (
+                    <a href={props.goalHref(task.goalId)}>{goal?.title ?? task.goalId}</a>
+                  )}
+                </dd>
+              </div>
+            )}
             <div>
               <dt>{words.task.owner}</dt>
               <dd>
@@ -242,6 +286,33 @@ export function TaskView(props: TaskViewProps) {
                 )}
               </dd>
             </div>
+            {(task.startsOn !== null || task.dueOn !== null) && (
+              <div>
+                <dt>{words.task.plan}</dt>
+                <dd>
+                  {words.task.planned(
+                    task.startsOn === null ? undefined : day(task.startsOn),
+                    task.dueOn === null ? undefined : day(task.dueOn),
+                  )}
+                </dd>
+              </div>
+            )}
+            {task.startedAt !== null && (
+              <div>
+                <dt>{words.task.started}</dt>
+                <dd>
+                  <Time iso={task.startedAt} />
+                </dd>
+              </div>
+            )}
+            {task.doneAt !== null && (
+              <div>
+                <dt>{words.task.done}</dt>
+                <dd>
+                  <Time iso={task.doneAt} />
+                </dd>
+              </div>
+            )}
             <div>
               <dt>{words.task.written}</dt>
               <dd>

package/src/components/ui.tsx

@@ -1,5 +1,15 @@
 import type { ButtonHTMLAttributes, ReactNode } from "react";
-import type { PersonRole, RestPerson, TaskPriority, TaskState } from "../api.js";
+import {
+  type CategoryColor,
+  type GoalState,
+  OPEN_TASK_STATES,
+  type PersonRole,
+  type RestPerson,
+  type RestTaskCounts,
+  type TaskPriority,
+  type TaskState,
+} from "../api.js";
+import { daysBetween, formatDay, today } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
 
 // Small building blocks. Each one is a class in styles/console.css and nothing more. Classes
@@ -157,6 +167,111 @@ export function PriorityBadge(props: { readonly priority: TaskPriority }) {
   return <Badge tone={tone}>{words.vocabulary.priority[props.priority]}</Badge>;
 }
 
+/** A category as a badge, in its colour: a class the stylesheet paints, never a value typed by hand. */
+export function CategoryBadge(props: {
+  readonly category: { readonly name: string; readonly color: CategoryColor };
+}) {
+  return (
+    <span className={cx("sc-badge", "sc-badge-category", `sc-category-${props.category.color}`)}>
+      {props.category.name}
+    </span>
+  );
+}
+
+export function GoalStateBadge(props: { readonly state: GoalState }) {
+  const words = useWords();
+  const tone =
+    props.state === "done"
+      ? "success"
+      : props.state === "active"
+        ? "accent"
+        : props.state === "dropped"
+          ? "neutral"
+          : "neutral";
+  return <Badge tone={tone}>{words.vocabulary.goalState[props.state]}</Badge>;
+}
+
+/**
+ * When a task is due, as a person needs to read it: how late it is while it is open and past
+ * its day, how soon it is due within the week, and the day itself otherwise. A task that is
+ * over keeps its day as a plain fact.
+ */
+export function DueBadge(props: {
+  readonly dueOn: string;
+  readonly state: TaskState;
+  /** The day to count from; the browser's today when left out. */
+  readonly today?: string | undefined;
+}) {
+  const words = useWords();
+  const { tag } = useLanguage();
+  const now = props.today ?? today();
+  const open = OPEN_TASK_STATES.includes(props.state);
+  const days = daysBetween(now, props.dueOn);
+  const day = formatDay(props.dueOn, tag);
+  if (!open) {
+    return <Badge tone="neutral">{words.board.due.on(day)}</Badge>;
+  }
+  if (days < 0) {
+    return (
+      <Badge tone="danger" title={day}>
+        {words.board.due.overdue(-days)}
+      </Badge>
+    );
+  }
+  if (days === 0) {
+    return <Badge tone="warning">{words.board.due.today}</Badge>;
+  }
+  if (days === 1) {
+    return <Badge tone="warning">{words.board.due.tomorrow}</Badge>;
+  }
+  if (days <= 7) {
+    return (
+      <Badge tone="point" title={day}>
+        {words.board.due.inDays(days)}
+      </Badge>
+    );
+  }
+  return <Badge tone="neutral">{words.board.due.on(day)}</Badge>;
+}
+
+/** How far a goal is, read from its tasks: the done ones, the ones at work, and the rest. */
+export function ProgressBar(props: { readonly counts: RestTaskCounts }) {
+  const words = useWords();
+  const { counts } = props;
+  const total = counts.idea + counts.ready + counts.in_progress + counts.in_review + counts.done;
+  const working = counts.in_progress + counts.in_review;
+  const share = (count: number) => (total === 0 ? 0 : (count / total) * 100);
+  return (
+    <div className="sc-progress">
+      <div
+        className="sc-progress-bar"
+        role="progressbar"
+        aria-valuemin={0}
+        aria-valuemax={total}
+        aria-valuenow={counts.done}
+        aria-label={words.roadmap.progress(counts.done, total)}
+      >
+        <span className="sc-progress-done" style={{ width: `${share(counts.done)}%` }} />
+        <span className="sc-progress-working" style={{ width: `${share(working)}%` }} />
+      </div>
+      <span className="sc-progress-words">
+        {words.roadmap.progress(counts.done, total)}
+        {working > 0 && ` · ${words.roadmap.inProgress(working)}`}
+      </span>
+    </div>
+  );
+}
+
+/** A day as people read one, in the language of the page. */
+export function Day(props: { readonly day: string }) {
+  const { tag } = useLanguage();
+  return (
+    <time className="sc-time" dateTime={props.day}>
+      {formatDay(props.day, tag)}
+    </time>
+  );
+}
+
 export function Spinner(props: { readonly label: string }) {
   return (
     <span className="sc-spinner" role="status">

package/src/components/work.tsx

@@ -0,0 +1,83 @@
+import type { RestTask, RestWork } from "../api.js";
+import { addDays, today as todayOf } from "../dates.js";
+import { useWords } from "../i18n/index.js";
+import { TaskList } from "./task-list.js";
+import { PersonChip, Time } from "./ui.js";
+
+// What is on a person's plate (ADR-0019), across the projects they may see: the open tasks
+// assigned to them, by when they are due, and the decisions that wait for a person. Takes its
+// data as props and nothing from the network.
+
+export interface WorkListProps {
+  readonly work: RestWork;
+  /** The day to count from; the browser's today when left out. */
+  readonly today?: string | undefined;
+  readonly taskHref: (projectKey: string, task: RestTask) => string;
+  readonly decisionHref: (projectKey: string, decisionId: string) => string;
+}
+
+export function WorkList(props: WorkListProps) {
+  const words = useWords();
+  const work = words.work;
+  const now = props.today ?? todayOf();
+  const weekEnd = addDays(now, 6);
+  const { tasks, decisions } = props.work;
+  const projectOf = new Map(tasks.map((item) => [item.task.id, item.project]));
+  const hrefOf = (task: RestTask) => props.taskHref(projectOf.get(task.id)?.key ?? "", task);
+  const nameOf = (task: RestTask) => projectOf.get(task.id)?.name;
+  const groups: { readonly title: string; readonly tasks: RestTask[] }[] = [
+    { title: work.overdue, tasks: [] },
+    { title: work.thisWeek, tasks: [] },
+    { title: work.later, tasks: [] },
+    { title: work.noDay, tasks: [] },
+  ];
+  for (const { task } of tasks) {
+    const index = task.dueOn === null ? 3 : task.dueOn < now ? 0 : task.dueOn <= weekEnd ? 1 : 2;
+    groups[index]?.tasks.push(task);
+  }
+  return (
+    <div className="sc-work">
+      {groups
+        .filter((group) => group.tasks.length > 0)
+        .map((group) => (
+          <section key={group.title} className="sc-task-section" aria-label={group.title}>
+            <h2 className="sc-section-title">
+              {group.title} <span className="sc-column-count">{group.tasks.length}</span>
+            </h2>
+            <TaskList
+              tasks={group.tasks}
+              taskHref={hrefOf}
+              projectOf={nameOf}
+              showState
+              today={now}
+            />
+          </section>
+        ))}
+      <section className="sc-task-section" aria-label={work.decisions}>
+        <h2 className="sc-section-title">
+          {work.decisions} <span className="sc-column-count">{decisions.length}</span>
+        </h2>
+        {decisions.length === 0 ? (
+          <p className="sc-muted">{work.noDecisions}</p>
+        ) : (
+          <ol className="sc-decision-log">
+            {decisions.map(({ project, decision }) => (
+              <li key={decision.id} className="sc-decision-row">
+                <a
+                  className="sc-decision-row-question"
+                  href={props.decisionHref(project.key, decision.id)}
+                >
+                  {decision.question}
+                </a>
+                <span className="sc-task-row-project">{work.inProject(project.name)}</span>
+                <span className="sc-decision-row-meta">
+                  <PersonChip person={decision.raisedBy} /> <Time iso={decision.createdAt} />
+                </span>
+              </li>
+            ))}
+          </ol>
+        )}
+      </section>
+    </div>
+  );
+}