@skillcdn/console 0.3.1 → 0.3.2

package/src/components/picker.tsx

@@ -0,0 +1,297 @@
+import {
+  type KeyboardEvent,
+  type ReactNode,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from "react";
+import { useWords } from "../i18n/index.js";
+import { cx } from "./ui.js";
+
+// Choosing one thing out of a listing too long to offer whole (ADR-0037): the task a new one is
+// part of, the goal it works towards. The picker asks for what the words typed find, a page at a
+// time, and never holds the listing: the first page as soon as the field is entered, the words'
+// page once the typing rests, the next page on a press. What is chosen stands in the field's
+// place, and a press clears it. Takes a search and nothing else from the network.
+
+/** How many items one page of a picker holds: enough to find the one meant, few enough to read at a glance. */
+export const PICKER_PAGE_LIMIT = 10;
+/** How long the typing rests before the words are searched. */
+const SEARCH_DELAY_MS = 200;
+
+export interface PickerPage<T> {
+  readonly items: readonly T[];
+  readonly more: boolean;
+}
+
+/** What the words find, from `offset` on; the first page of everything while the words are empty. */
+export type PickerSearch<T> = (
+  query: string,
+  page: { readonly limit: number; readonly offset: number },
+  signal: AbortSignal,
+) => Promise<PickerPage<T>>;
+
+/** How far the list stands from the field, in pixels, as the stylesheet has it. */
+const LIST_GAP = 4;
+
+/**
+ * Whether the list opens above the field: only where the window has no room for it below the
+ * field and more room above than below; else below, as a list does.
+ */
+export function opensAbove(
+  field: { readonly top: number; readonly bottom: number },
+  listHeight: number,
+  windowHeight: number,
+): boolean {
+  const below = windowHeight - field.bottom - LIST_GAP;
+  const over = field.top - LIST_GAP;
+  return listHeight > below && over > below;
+}
+
+export interface PickerProps<T> {
+  /** What is chosen, if anything. */
+  readonly value: T | undefined;
+  /** What stands for a choice made but not read back yet: shown in the chip's place, and cleared as one. */
+  readonly held?: ReactNode | undefined;
+  readonly search: PickerSearch<T>;
+  readonly keyOf: (item: T) => string;
+  /** How an item reads, in the list and once chosen. */
+  readonly render: (item: T) => ReactNode;
+  readonly onChange: (item: T | undefined) => void;
+  /** The field's name, for the input and the list. */
+  readonly label: string;
+  readonly placeholder: string;
+  readonly disabled?: boolean | undefined;
+  /** What the search may answer with but cannot be chosen: a task, as its own parent. */
+  readonly exclude?: ((item: T) => boolean) | undefined;
+}
+
+export function Picker<T>(props: PickerProps<T>) {
+  const words = useWords().common;
+  const listId = useId();
+  const [query, setQuery] = useState("");
+  const [open, setOpen] = useState(false);
+  const [items, setItems] = useState<readonly T[]>([]);
+  const [more, setMore] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [active, setActive] = useState(-1);
+  const [above, setAbove] = useState(false);
+  const field = useRef<HTMLInputElement>(null);
+  const list = useRef<HTMLDivElement>(null);
+  // The search and the exclusion as the page last gave them, read at the moment of a request,
+  // so that a page rendering again starts no search over.
+  const search = useRef(props.search);
+  search.current = props.search;
+  const exclude = useRef(props.exclude);
+  exclude.current = props.exclude;
+  const latest = useRef(query);
+  latest.current = query;
+
+  // The list opens below the field, and above it only where the window has no room below and
+  // more above: measured before anything is painted, once it is open and again whenever what it
+  // holds changes its height, so that it never shows below for a frame on its way up.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the items, the loading and the more are what changes the list's height
+  useLayoutEffect(() => {
+    if (!open || field.current === null || list.current === null) {
+      return;
+    }
+    setAbove(
+      opensAbove(
+        field.current.getBoundingClientRect(),
+        list.current.offsetHeight,
+        window.innerHeight,
+      ),
+    );
+  }, [open, items, loading, more]);
+
+  // The words' page once the typing rests; the first page of everything at once on entering.
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(
+      () => {
+        setLoading(true);
+        search
+          .current(query, { limit: PICKER_PAGE_LIMIT, offset: 0 }, controller.signal)
+          .then((page) => {
+            if (!controller.signal.aborted) {
+              setItems(page.items.filter((item) => exclude.current?.(item) !== true));
+              setMore(page.more);
+              setActive(-1);
+              setLoading(false);
+            }
+          })
+          .catch(() => {
+            if (!controller.signal.aborted) {
+              setItems([]);
+              setMore(false);
+              setLoading(false);
+            }
+          });
+      },
+      query === "" ? 0 : SEARCH_DELAY_MS,
+    );
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [open, query]);
+
+  /** The next page of the same words, put under the ones shown; dropped when the words moved on. */
+  const loadMore = () => {
+    const wanted = query;
+    setLoading(true);
+    search
+      .current(
+        wanted,
+        { limit: PICKER_PAGE_LIMIT, offset: items.length },
+        new AbortController().signal,
+      )
+      .then((page) => {
+        if (wanted !== latest.current) {
+          return;
+        }
+        setItems((current) => [
+          ...current,
+          ...page.items.filter((item) => exclude.current?.(item) !== true),
+        ]);
+        setMore(page.more);
+        setLoading(false);
+      })
+      .catch(() => {
+        if (wanted === latest.current) {
+          setMore(false);
+          setLoading(false);
+        }
+      });
+  };
+
+  const choose = (item: T) => {
+    props.onChange(item);
+    setQuery("");
+    setOpen(false);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!open) {
+        setOpen(true);
+        return;
+      }
+      setActive((current) => (items.length === 0 ? -1 : (current + 1) % items.length));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setActive((current) =>
+        items.length === 0 ? -1 : current <= 0 ? items.length - 1 : current - 1,
+      );
+    } else if (event.key === "Enter") {
+      // A choice, or nothing: the form around the field is never sent by this key.
+      event.preventDefault();
+      const chosen = active >= 0 ? items[active] : undefined;
+      if (chosen !== undefined) {
+        choose(chosen);
+      }
+    } else if (event.key === "Escape" && open) {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+
+  if (props.value !== undefined || props.held !== undefined) {
+    return (
+      <div className="sc-picker sc-picker-chosen">
+        <span className="sc-picker-value">
+          {props.value === undefined ? props.held : props.render(props.value)}
+        </span>
+        <button
+          type="button"
+          className="sc-picker-clear"
+          aria-label={words.remove}
+          disabled={props.disabled}
+          onClick={() => props.onChange(undefined)}
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="sc-picker">
+      <input
+        ref={field}
+        className="sc-input"
+        type="text"
+        role="combobox"
+        aria-label={props.label}
+        aria-expanded={open}
+        aria-controls={listId}
+        aria-autocomplete="list"
+        aria-activedescendant={active >= 0 ? `${listId}-${active}` : undefined}
+        autoComplete="off"
+        placeholder={props.placeholder}
+        value={query}
+        disabled={props.disabled}
+        onChange={(event) => {
+          setQuery(event.target.value);
+          setOpen(true);
+        }}
+        onFocus={() => setOpen(true)}
+        onBlur={() => setOpen(false)}
+        onKeyDown={onKeyDown}
+      />
+      {open && (
+        // The list of a combobox: read and chosen through the input, which keeps the focus; an
+        // option is chosen on the press, before the input loses its focus and the list closes.
+        <div
+          ref={list}
+          className={cx("sc-picker-list", above && "sc-picker-list-above")}
+          id={listId}
+          role="listbox"
+          aria-label={props.label}
+        >
+          {items.map((item, index) => (
+            <div
+              key={props.keyOf(item)}
+              id={`${listId}-${index}`}
+              role="option"
+              tabIndex={-1}
+              aria-selected={index === active}
+              className={cx("sc-picker-option", index === active && "sc-picker-option-active")}
+              onMouseDown={(event) => {
+                event.preventDefault();
+                choose(item);
+              }}
+              onMouseEnter={() => setActive(index)}
+            >
+              {props.render(item)}
+            </div>
+          ))}
+          {!loading && items.length === 0 && (
+            <div className="sc-picker-note sc-muted">{words.picker.nothingFound}</div>
+          )}
+          {loading && <div className="sc-picker-note sc-muted">{words.picker.searching}</div>}
+          {more && !loading && (
+            <div className="sc-picker-note">
+              <button
+                type="button"
+                className="sc-button sc-button-ghost sc-button-sm"
+                onMouseDown={(event) => {
+                  event.preventDefault();
+                  loadMore();
+                }}
+              >
+                {words.picker.more}
+              </button>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/components/task-form.tsx

@@ -1,10 +1,11 @@
-import { type FormEvent, useState } from "react";
+import { type FormEvent, type ReactNode, useState } from "react";
 import {
   MAX_BODY_LENGTH,
   MAX_LINK_LABEL_LENGTH,
   MAX_LINKS,
   MAX_TITLE_LENGTH,
   MAX_URL_LENGTH,
+  MAX_WORKERS,
   type RestCategory,
   type RestGoal,
   type RestPerson,
@@ -14,22 +15,33 @@ import {
   TASK_STATES,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Button, personName } from "./ui.js";
+import { Picker, type PickerSearch } from "./picker.js";
+import { Button, GoalStateBadge, PersonChip, personName, StateBadge } 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.
+// field here. The workers are any number of the people (ADR-0037); the task this one is part of
+// and the goal it works towards are found by searching, a page at a time, never offered whole.
+
+/** What words find among the tasks of the project, a page at a time. */
+export type TaskSearch = PickerSearch<RestTask>;
+/** What words find among the open goals of the project, a page at a time. */
+export type GoalSearch = PickerSearch<RestGoal>;
 
 export interface TaskFormProps {
   readonly people: readonly RestPerson[];
   /** The task to change; left out, the form writes a new one. */
   readonly task?: RestTask | undefined;
-  /** The tasks a new one may be part of. */
-  readonly parents?: readonly RestTask[] | undefined;
+  /** The task this one is part of, as it stands, for the form to show it; the search finds another. */
+  readonly parent?: RestTask | undefined;
+  /** Left out, a task cannot be made part of one here. */
+  readonly findTasks?: TaskSearch | 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;
+  /** The goal the task works towards, as it stands, for the form to show it; the search finds another. */
+  readonly goal?: RestGoal | undefined;
+  /** Left out, no goal is offered. */
+  readonly findGoals?: GoalSearch | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
   readonly onSubmit: (input: RestTaskInput) => void;
@@ -41,6 +53,25 @@ interface LinkDraft {
   readonly label: string;
 }
 
+/** A task as a picker names one: its number and its title, with its state. */
+export function taskLabel(task: RestTask): ReactNode {
+  return (
+    <>
+      <span className="sc-card-number">#{task.number}</span> {task.title}{" "}
+      <StateBadge state={task.state} />
+    </>
+  );
+}
+
+/** A goal as a picker names one: its title, with its state. */
+export function goalLabel(goal: RestGoal): ReactNode {
+  return (
+    <>
+      {goal.title} <GoalStateBadge state={goal.state} />
+    </>
+  );
+}
+
 export function TaskForm(props: TaskFormProps) {
   const words = useWords();
   const form = words.task.form;
@@ -49,10 +80,16 @@ export function TaskForm(props: TaskFormProps) {
   const [body, setBody] = useState(task?.body ?? "");
   const [state, setState] = useState(task?.state ?? "idea");
   const [priority, setPriority] = useState(task?.priority ?? "normal");
-  const [assigneeId, setAssigneeId] = useState(task?.assignee?.id ?? "");
-  const [parentId, setParentId] = useState(task?.parentId ?? "");
+  const [workerIds, setWorkerIds] = useState<readonly string[]>(
+    task?.workers.map((worker) => worker.id) ?? [],
+  );
+  // What is chosen is kept by id, so that a parent or a goal the page has not read back yet is
+  // kept as it is rather than dropped; the one chosen here is kept whole, to be shown.
+  const [parentId, setParentId] = useState<string | null>(task?.parentId ?? null);
+  const [parentChosen, setParentChosen] = useState<RestTask | undefined>(undefined);
+  const [goalId, setGoalId] = useState<string | null>(task?.goalId ?? null);
+  const [goalChosen, setGoalChosen] = useState<RestGoal | undefined>(undefined);
   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[]>(
@@ -66,10 +103,10 @@ export function TaskForm(props: TaskFormProps) {
       body,
       state,
       priority,
-      assigneeId: assigneeId === "" ? null : assigneeId,
-      parentId: parentId === "" ? null : parentId,
+      workerIds: [...workerIds],
+      parentId,
       category: category === "" ? null : category,
-      goalId: goalId === "" ? null : goalId,
+      goalId,
       startsOn: startsOn === "" ? null : startsOn,
       dueOn: dueOn === "" ? null : dueOn,
       links: links
@@ -81,12 +118,33 @@ export function TaskForm(props: TaskFormProps) {
     });
   };
 
-  const parents = (props.parents ?? []).filter((candidate) => candidate.id !== task?.id);
+  // A worker is one of the people, or one the task had who is no longer among them.
+  const personOf = (id: string): RestPerson | undefined =>
+    props.people.find((person) => person.id === id) ??
+    task?.workers.find((worker) => worker.id === id);
+  const chosenWorkers = workerIds.flatMap((id) => {
+    const person = personOf(id);
+    return person === undefined ? [] : [person];
+  });
+  const otherPeople = props.people.filter((person) => !workerIds.includes(person.id));
+  const parent =
+    parentId === null
+      ? undefined
+      : parentChosen?.id === parentId
+        ? parentChosen
+        : props.parent?.id === parentId
+          ? props.parent
+          : undefined;
+  const goal =
+    goalId === null
+      ? undefined
+      : goalChosen?.id === goalId
+        ? goalChosen
+        : props.goal?.id === goalId
+          ? props.goal
+          : undefined;
+  const held = <span className="sc-muted">&hellip;</span>;
   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 (
@@ -142,21 +200,6 @@ export function TaskForm(props: TaskFormProps) {
             ))}
           </select>
         </label>
-        <label className="sc-field">
-          <span className="sc-field-label">{form.assignee}</span>
-          <select
-            className="sc-input"
-            value={assigneeId}
-            onChange={(event) => setAssigneeId(event.target.value)}
-          >
-            <option value="">{words.common.nobody}</option>
-            {props.people.map((person) => (
-              <option key={person.id} value={person.id}>
-                {personName(person)}
-              </option>
-            ))}
-          </select>
-        </label>
         {categories.length > 0 && (
           <label className="sc-field">
             <span className="sc-field-label">{form.category}</span>
@@ -175,6 +218,44 @@ export function TaskForm(props: TaskFormProps) {
           </label>
         )}
       </div>
+      <fieldset className="sc-field sc-workers-field">
+        <legend className="sc-field-label">{form.workers}</legend>
+        <div className="sc-chips">
+          {chosenWorkers.map((person) => (
+            <span key={person.id} className="sc-chip">
+              <PersonChip person={person} />
+              <button
+                type="button"
+                className="sc-chip-remove"
+                aria-label={`${words.common.remove}: ${personName(person)}`}
+                onClick={() => setWorkerIds(workerIds.filter((id) => id !== person.id))}
+              >
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </span>
+          ))}
+          {chosenWorkers.length === 0 && <span className="sc-muted">{words.common.nobody}</span>}
+          {otherPeople.length > 0 && workerIds.length < MAX_WORKERS && (
+            <select
+              className="sc-input sc-chip-add"
+              aria-label={form.addWorker}
+              value=""
+              onChange={(event) => {
+                if (event.target.value !== "") {
+                  setWorkerIds([...workerIds, event.target.value]);
+                }
+              }}
+            >
+              <option value="">{form.addWorker}</option>
+              {otherPeople.map((person) => (
+                <option key={person.id} value={person.id}>
+                  {personName(person)}
+                </option>
+              ))}
+            </select>
+          )}
+        </div>
+      </fieldset>
       <div className="sc-field-row">
         <label className="sc-field">
           <span className="sc-field-label">{form.startsOn}</span>
@@ -195,39 +276,44 @@ export function TaskForm(props: TaskFormProps) {
             onChange={(event) => setDueOn(event.target.value)}
           />
         </label>
-        {goals.length > 0 && (
-          <label className="sc-field">
+        {props.findGoals !== undefined && (
+          <div 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>
+            <Picker
+              value={goal}
+              held={goalId === null ? undefined : held}
+              search={props.findGoals}
+              keyOf={(candidate) => candidate.id}
+              render={goalLabel}
+              label={form.goal}
+              placeholder={form.searchGoals}
+              disabled={props.busy}
+              onChange={(chosen) => {
+                setGoalChosen(chosen);
+                setGoalId(chosen?.id ?? null);
+              }}
+            />
+          </div>
         )}
-        {parents.length > 0 && (
-          <label className="sc-field">
+        {props.findTasks !== undefined && (
+          <div className="sc-field">
             <span className="sc-field-label">{form.partOf}</span>
-            <select
-              className="sc-input"
-              value={parentId}
-              onChange={(event) => setParentId(event.target.value)}
-            >
-              <option value="">{words.common.nothing}</option>
-              {parents.map((candidate) => (
-                <option key={candidate.id} value={candidate.id}>
-                  #{candidate.number} {candidate.title}
-                </option>
-              ))}
-            </select>
-          </label>
+            <Picker
+              value={parent}
+              held={parentId === null ? undefined : held}
+              search={props.findTasks}
+              keyOf={(candidate) => candidate.id}
+              render={taskLabel}
+              label={form.partOf}
+              placeholder={form.searchTasks}
+              disabled={props.busy}
+              exclude={(candidate) => candidate.id === task?.id}
+              onChange={(chosen) => {
+                setParentChosen(chosen);
+                setParentId(chosen?.id ?? null);
+              }}
+            />
+          </div>
         )}
       </div>
       <fieldset className="sc-field sc-links">

package/src/components/task-list.tsx

@@ -2,7 +2,7 @@ import type { ReactNode } from "react";
 import type { RestTask } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { ShowMore, usePaged } from "./paged.js";
-import { Avatar, Badge, CategoryBadge, DueBadge, StateBadge } from "./ui.js";
+import { Badge, CategoryBadge, DueBadge, StateBadge, Workers } 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,
@@ -52,7 +52,7 @@ export function TaskList(props: TaskListProps) {
                 {task.dueOn !== null && (
                   <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
                 )}
-                {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
+                <Workers workers={task.workers} size="sm" />
               </span>
             </li>
           );

package/src/components/task-view.tsx

@@ -21,7 +21,7 @@ import { type CommentDraft, TaskThread } from "./comments.js";
 import { DecisionForm } from "./decision-form.js";
 import { EventFeed } from "./event-feed.js";
 import { Markdown } from "./markdown.js";
-import { TaskForm } from "./task-form.js";
+import { type GoalSearch, TaskForm, type TaskSearch } from "./task-form.js";
 import {
   Badge,
   Button,
@@ -44,8 +44,13 @@ import {
 export interface TaskViewProps {
   readonly task: RestTask;
   readonly people: readonly RestPerson[];
-  /** Every task of the board, for the breakdown and for what this one may be part of. */
+  /** The current tasks of the board, for the breakdown and for naming what this one is part of. */
   readonly tasks: readonly RestTask[];
+  /** The task this one is part of, when the page has it: one put away is not among `tasks`. Left out, it is looked for among them. */
+  readonly parent?: RestTask | undefined;
+  /** What words find among the tasks and the open goals of the project, for the form (ADR-0037); left out, the form offers neither. */
+  readonly findTasks?: TaskSearch | undefined;
+  readonly findGoals?: GoalSearch | undefined;
   readonly decisions: readonly RestDecision[];
   /** The runs of the board, or of this task; the ones on this task are shown. */
   readonly runs?: readonly RestRun[] | undefined;
@@ -97,9 +102,10 @@ export function TaskView(props: TaskViewProps) {
   const { tag } = useLanguage();
   const { task } = props;
   const parent =
-    task.parentId === null
+    props.parent ??
+    (task.parentId === null
       ? undefined
-      : props.tasks.find((candidate) => candidate.id === task.parentId);
+      : props.tasks.find((candidate) => candidate.id === task.parentId));
   const subtasks = props.tasks.filter((candidate) => candidate.parentId === task.id);
   const about = props.decisions.filter((decision) => decision.taskId === task.id);
   const runs = (props.runs ?? []).filter((run) => run.taskId === task.id);
@@ -119,9 +125,11 @@ export function TaskView(props: TaskViewProps) {
         <TaskForm
           people={props.people}
           task={task}
-          parents={props.tasks}
+          parent={parent}
+          findTasks={props.findTasks}
           categories={props.categories}
-          goals={props.goals}
+          goal={goal}
+          findGoals={props.findGoals}
           busy={props.busy}
           error={props.error}
           onSubmit={(input) => props.onChange(task, input)}
@@ -289,12 +297,18 @@ export function TaskView(props: TaskViewProps) {
               </dd>
             </div>
             <div>
-              <dt>{words.task.assignee}</dt>
+              <dt>{words.task.workers}</dt>
               <dd>
-                {task.assignee === null ? (
+                {task.workers.length === 0 ? (
                   <span className="sc-muted">{words.common.nobody}</span>
                 ) : (
-                  <PersonChip person={task.assignee} />
+                  <ul className="sc-worker-list">
+                    {task.workers.map((worker) => (
+                      <li key={worker.id}>
+                        <PersonChip person={worker} />
+                      </li>
+                    ))}
+                  </ul>
                 )}
               </dd>
             </div>