@skillcdn/console 0.3.2 → 0.4.0

package/src/components/calendar.tsx

@@ -25,6 +25,7 @@ import {
   weekOf,
 } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
+import { TaskList } from "./task-list.js";
 import { CategoryBadge, cx, PersonChip, personName, StateBadge, Time, Workers } from "./ui.js";
 
 // The calendar of a project (ADR-0019): the month as a grid, or one week on its own. A task
@@ -140,6 +141,17 @@ function onDays(tasks: readonly RestTask[]): ReadonlyMap<string, readonly RestTa
   return on;
 }
 
+/** The tasks of one day: those on it alone and those lying across it, the open ones first. */
+export function tasksOn(day: string, tasks: readonly RestTask[]): RestTask[] {
+  return tasks
+    .filter((task) =>
+      spans(task)
+        ? (task.startsOn ?? day) <= day && day <= (task.dueOn ?? day)
+        : (task.dueOn ?? task.startsOn) === day,
+    )
+    .sort((a, b) => Number(isOpen(b)) - Number(isOpen(a)) || a.number - b.number);
+}
+
 /** How a task reads: struck through once it is over, and marked once its due day is past. */
 const tone = (task: RestTask, now: string): string =>
   cx(
@@ -343,6 +355,10 @@ interface WeekRowProps {
   readonly onPoint: (task: RestTask, day: string, item: HTMLElement) => void;
   /** It left. */
   readonly onLeave: () => void;
+  /** The day whose tasks are listed under the month, where a day can be picked. */
+  readonly picked?: string | null | undefined;
+  /** A day's number was pressed: given, each number is a button. */
+  readonly onPick?: ((day: string) => void) | undefined;
 }
 
 /** The goals that aim at each day, by day: those with a target day, still planned or worked towards. */
@@ -365,9 +381,26 @@ function goalsOnDays(goals: readonly RestGoal[]): ReadonlyMap<string, readonly R
 /** How many days a bar has in the week, for its title to run along: a custom property the stylesheet reads. */
 const spanStyle = (span: number): CSSProperties => ({ "--sc-span": span }) as CSSProperties;
 
+/** How many of a day's own tasks a cell shows before the way to the rest. */
+export const DAY_SHOWN = 3;
+
 /** One week as a row of cells: the bars across the days in their lanes, then the tasks on each day. */
 function WeekRow(props: WeekRowProps) {
   const { week, segments, now } = props;
+  const words = useWords().calendar;
+  const { tag } = useLanguage();
+  // The days a person opened in this week, each showing all of its tasks.
+  const [opened, setOpened] = useState<ReadonlySet<string>>(() => new Set());
+  const toggle = (day: string) =>
+    setOpened((before) => {
+      const after = new Set(before);
+      if (after.has(day)) {
+        after.delete(day);
+      } else {
+        after.add(day);
+      }
+      return after;
+    });
   const pointing = (task: RestTask, day: string) => ({
     onMouseEnter: (event: SyntheticEvent<HTMLElement>) =>
       props.onPoint(task, day, event.currentTarget),
@@ -384,110 +417,154 @@ function WeekRow(props: WeekRowProps) {
   const lanes = segments.reduce((most, segment) => Math.max(most, segment.lane + 1), 0);
   return (
     <tr>
-      {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>
-          {props.goalHref !== undefined &&
-            (props.goalsOn?.get(cell.day) ?? []).map((goal) => (
-              <a
-                key={goal.id}
-                className={cx(
-                  "sc-calendar-goal",
-                  `sc-category-${goal.category?.color ?? "gray"}`,
-                  goal.state === "done" && "sc-calendar-over",
-                )}
-                href={props.goalHref?.(goal)}
-              >
-                <span className="sc-calendar-flag" aria-hidden="true" />
-                <span className="sc-calendar-task-title">{goal.title}</span>
-              </a>
-            ))}
-          {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;
-            // The first piece carries the title; with more days in the week, the title runs along
-            // the bar as far as they reach, over the pieces after it, instead of stopping at the
-            // first day's edge.
-            const span = segment.to - segment.from + 1;
-            const spanning = segment.from === column && span > 1;
-            // Every piece of the task under the pointer lights together, in every week it crosses.
-            const pointed = props.pointed !== null && props.pointed.task.id === task.id;
-            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",
-                  spanning && "sc-calendar-bar-spanning",
-                  pointed && "sc-calendar-bar-pointed",
-                  tone(task, now),
-                )}
-                style={spanning ? spanStyle(span) : undefined}
-                href={props.taskHref(task)}
-                {...pointing(task, cell.day)}
+      {week.map((cell, column) => {
+        const number = Number(cell.day.slice(8));
+        // Everything on the day: its own tasks and the bars crossing it, for a phone's count.
+        const total =
+          (props.on.get(cell.day)?.length ?? 0) +
+          segments.filter((segment) => segment.from <= column && column <= segment.to).length;
+        return (
+          <td
+            key={cell.day}
+            className={cx(
+              "sc-calendar-cell",
+              !cell.inMonth && "sc-calendar-cell-outside",
+              cell.day === now && "sc-calendar-cell-today",
+              props.picked === cell.day && "sc-calendar-cell-picked",
+            )}
+          >
+            {props.onPick === undefined ? (
+              <span className="sc-calendar-day">{number}</span>
+            ) : (
+              <button
+                type="button"
+                className="sc-calendar-day"
+                aria-pressed={props.picked === cell.day}
+                aria-label={words.onDay(formatDay(cell.day, tag))}
+                onClick={() => props.onPick?.(cell.day)}
               >
-                {segment.from === column && (
-                  <>
-                    {props.markOf?.(task)}
-                    {who(task)}
-                    <span
-                      className={cx(
-                        "sc-calendar-task-title",
-                        spanning && "sc-calendar-task-title-spanning",
-                      )}
+                {number}
+              </button>
+            )}
+            {props.goalHref !== undefined &&
+              (props.goalsOn?.get(cell.day) ?? []).map((goal) => (
+                <a
+                  key={goal.id}
+                  className={cx(
+                    "sc-calendar-goal",
+                    `sc-category-${goal.category?.color ?? "gray"}`,
+                    goal.state === "done" && "sc-calendar-over",
+                  )}
+                  href={props.goalHref?.(goal)}
+                >
+                  <span className="sc-calendar-flag" aria-hidden="true" />
+                  <span className="sc-calendar-task-title">{goal.title}</span>
+                </a>
+              ))}
+            {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;
+              // The first piece carries the title; with more days in the week, the title runs along
+              // the bar as far as they reach, over the pieces after it, instead of stopping at the
+              // first day's edge.
+              const span = segment.to - segment.from + 1;
+              const spanning = segment.from === column && span > 1;
+              // Every piece of the task under the pointer lights together, in every week it crosses.
+              const pointed = props.pointed !== null && props.pointed.task.id === task.id;
+              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",
+                    spanning && "sc-calendar-bar-spanning",
+                    pointed && "sc-calendar-bar-pointed",
+                    tone(task, now),
+                  )}
+                  style={spanning ? spanStyle(span) : undefined}
+                  href={props.taskHref(task)}
+                  {...pointing(task, cell.day)}
+                >
+                  {segment.from === column && (
+                    <>
+                      {props.markOf?.(task)}
+                      {who(task)}
+                      <span
+                        className={cx(
+                          "sc-calendar-task-title",
+                          spanning && "sc-calendar-task-title-spanning",
+                        )}
+                      >
+                        {task.title}
+                      </span>
+                    </>
+                  )}
+                  {tipIn(task, cell.day)}
+                </a>
+              );
+            })}
+            {(() => {
+              const all = props.on.get(cell.day) ?? [];
+              const open = opened.has(cell.day);
+              const shown = open || all.length <= DAY_SHOWN + 1 ? all : all.slice(0, DAY_SHOWN);
+              return (
+                <>
+                  {shown.map((task) => {
+                    const mark = props.markOf?.(task);
+                    return (
+                      <a
+                        key={task.id}
+                        className={cx("sc-calendar-task", tone(task, now))}
+                        href={props.taskHref(task)}
+                        {...pointing(task, cell.day)}
+                      >
+                        {mark === undefined || mark === null ? (
+                          <span
+                            className={cx(
+                              "sc-calendar-dot",
+                              `sc-category-${task.category?.color ?? "gray"}`,
+                            )}
+                          />
+                        ) : (
+                          mark
+                        )}
+                        {who(task)}
+                        <span className="sc-calendar-task-title">{task.title}</span>
+                        {tipIn(task, cell.day)}
+                      </a>
+                    );
+                  })}
+                  {all.length > DAY_SHOWN + 1 && (
+                    <button
+                      type="button"
+                      className="sc-calendar-more"
+                      aria-expanded={open}
+                      onClick={() => toggle(cell.day)}
                     >
-                      {task.title}
-                    </span>
-                  </>
-                )}
-                {tipIn(task, cell.day)}
-              </a>
-            );
-          })}
-          {(props.on.get(cell.day) ?? []).map((task) => {
-            const mark = props.markOf?.(task);
-            return (
-              <a
-                key={task.id}
-                className={cx("sc-calendar-task", tone(task, now))}
-                href={props.taskHref(task)}
-                {...pointing(task, cell.day)}
-              >
-                {mark === undefined || mark === null ? (
-                  <span
-                    className={cx(
-                      "sc-calendar-dot",
-                      `sc-category-${task.category?.color ?? "gray"}`,
-                    )}
-                  />
-                ) : (
-                  mark
-                )}
-                {who(task)}
-                <span className="sc-calendar-task-title">{task.title}</span>
-                {tipIn(task, cell.day)}
-              </a>
-            );
-          })}
-        </td>
-      ))}
+                      {open ? words.fewer : words.more(all.length - DAY_SHOWN)}
+                    </button>
+                  )}
+                </>
+              );
+            })()}
+            {total > DAY_SHOWN && (
+              <span className="sc-calendar-count" aria-hidden="true">
+                {total}
+              </span>
+            )}
+          </td>
+        );
+      })}
     </tr>
   );
 }
@@ -496,9 +573,12 @@ export function Calendar(props: CalendarProps) {
   const words = useWords().calendar;
   const { tag } = useLanguage();
   const [pointed, point, leave] = usePointed();
+  // The day whose tasks are listed under the month, once its number is pressed.
+  const [picked, setPicked] = useState<string | null>(null);
   const now = props.today ?? todayOf();
   const firstDay = firstDayOfWeek(deviceLanguage(tag), props.weekStart);
   const weeks = monthGrid(props.month, firstDay);
+  const onPicked = picked === null ? [] : tasksOn(picked, props.tasks);
   const on = onDays(props.tasks);
   const goalsOn = props.goalHref === undefined ? undefined : goalsOnDays(props.goals ?? []);
   const inMonth = (day: string) => monthOf(day) === props.month;
@@ -563,10 +643,35 @@ export function Calendar(props: CalendarProps) {
               onPoint={point}
               onLeave={leave}
               people
+              picked={picked}
+              onPick={(day) => setPicked((before) => (before === day ? null : day))}
             />
           ))}
         </tbody>
       </table>
+      {picked !== null && (
+        <section className="sc-calendar-day-list" aria-label={words.onDay(formatDay(picked, tag))}>
+          <div className="sc-calendar-day-list-head">
+            <h3 className="sc-calendar-day-list-title">
+              {formatDay(picked, tag)} <span className="sc-column-count">{onPicked.length}</span>
+            </h3>
+            <button
+              type="button"
+              className="sc-button sc-button-ghost sc-button-sm"
+              onClick={() => setPicked(null)}
+            >
+              {words.close}
+            </button>
+          </div>
+          <TaskList
+            tasks={onPicked}
+            taskHref={props.taskHref}
+            today={now}
+            showState
+            empty={<p className="sc-muted">{words.nothingOnDay}</p>}
+          />
+        </section>
+      )}
       {(props.categories ?? []).length > 0 && (
         <dl className="sc-calendar-legend" aria-label={words.legend.title}>
           {(props.categories ?? []).map((category) => (

package/src/components/decision-form.tsx

@@ -1,4 +1,4 @@
-import { type FormEvent, useState } from "react";
+import { type FormEvent, useMemo, useState } from "react";
 import {
   MAX_BODY_LENGTH,
   MAX_OPTION_LABEL_LENGTH,
@@ -6,31 +6,60 @@ import {
   MAX_QUESTION_LENGTH,
   MIN_OPTIONS,
   type RestDecisionInput,
+  type RestPerson,
   type RestTask,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Button } from "./ui.js";
+import { Picker, type PickerSearch } from "./picker.js";
+import { type TaskSearch, taskLabel } from "./task-form.js";
+import { Button, PersonChip, personName } from "./ui.js";
 
-// Raising a decision: the question, what a person needs to know, and the options to choose from.
+// Raising a decision: the question, what a person needs to know, the options to choose from,
+// and who is to answer (ADR-0042): the person raising it, unless they name another of the
+// project. The task it is about is the page's, when raised from a task; otherwise it is found
+// by searching the board a page at a time (ADR-0037), never picked from the board whole.
 
 export interface DecisionFormProps {
-  /** The tasks the decision may be about. */
-  readonly tasks: readonly RestTask[];
-  /** The task it is about from the start, when raised from a task's page. */
+  /** The task it is about from the start, when raised from a task's page; the field is not shown then. */
   readonly taskId?: string | undefined;
+  /** What words find among the tasks of the project, a page at a time; left out, the decision is about no task in particular. */
+  readonly findTasks?: TaskSearch | undefined;
+  /** Who may be named to answer: the people of the project; left out, the field is not shown and the raiser answers. */
+  readonly deciders?: readonly RestPerson[] | undefined;
+  /** Whoever raises it: who answers unless another is named. */
+  readonly me?: RestPerson | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
   readonly onSubmit: (input: RestDecisionInput) => void;
   readonly onCancel?: (() => void) | undefined;
 }
 
+/** The people of the project found by the words typed, a page at a time, as a picker searches. */
+export function peopleSearch(people: readonly RestPerson[]): PickerSearch<RestPerson> {
+  return async (query, page) => {
+    const words = query.trim().toLowerCase();
+    const found = people.filter(
+      (person) =>
+        words.length === 0 ||
+        personName(person).toLowerCase().includes(words) ||
+        person.login.toLowerCase().includes(words),
+    );
+    return {
+      items: found.slice(page.offset, page.offset + page.limit),
+      more: found.length > page.offset + page.limit,
+    };
+  };
+}
+
 export function DecisionForm(props: DecisionFormProps) {
   const words = useWords();
   const form = words.decisions.form;
   const [question, setQuestion] = useState("");
   const [body, setBody] = useState("");
-  const [taskId, setTaskId] = useState(props.taskId ?? "");
+  const [about, setAbout] = useState<RestTask | undefined>(undefined);
   const [options, setOptions] = useState<readonly string[]>(["", ""]);
+  const [decider, setDecider] = useState<RestPerson | undefined>(props.me);
+  const findDeciders = useMemo(() => peopleSearch(props.deciders ?? []), [props.deciders]);
 
   const labels = options.map((option) => option.trim()).filter((option) => option.length > 0);
   const ready = question.trim().length > 0 && labels.length >= MIN_OPTIONS;
@@ -41,7 +70,8 @@ export function DecisionForm(props: DecisionFormProps) {
       question: question.trim(),
       body,
       options: labels.map((label) => ({ label })),
-      taskId: taskId === "" ? null : taskId,
+      taskId: props.taskId ?? about?.id ?? null,
+      ...(decider === undefined || decider.id === props.me?.id ? {} : { deciderId: decider.id }),
     });
   };
 
@@ -68,22 +98,40 @@ export function DecisionForm(props: DecisionFormProps) {
           onChange={(event) => setBody(event.target.value)}
         />
       </label>
-      {props.taskId === undefined && props.tasks.length > 0 && (
-        <label className="sc-field">
+      {props.taskId === undefined && props.findTasks !== undefined && (
+        <div className="sc-field">
           <span className="sc-field-label">{form.about}</span>
-          <select
-            className="sc-input"
-            value={taskId}
-            onChange={(event) => setTaskId(event.target.value)}
-          >
-            <option value="">{form.noTask}</option>
-            {props.tasks.map((task) => (
-              <option key={task.id} value={task.id}>
-                #{task.number} {task.title}
-              </option>
-            ))}
-          </select>
-        </label>
+          <Picker
+            value={about}
+            search={props.findTasks}
+            keyOf={(task) => task.id}
+            render={taskLabel}
+            label={form.about}
+            placeholder={form.noTask}
+            disabled={props.busy}
+            onChange={setAbout}
+          />
+        </div>
+      )}
+      {props.deciders !== undefined && (
+        <div className="sc-field">
+          <span className="sc-field-label">{form.decider}</span>
+          <Picker
+            value={decider}
+            search={findDeciders}
+            keyOf={(person) => person.id}
+            render={(person) => (
+              <>
+                <PersonChip person={person} size="sm" />
+                {person.id === props.me?.id && <span className="sc-muted"> {form.me}</span>}
+              </>
+            )}
+            label={form.decider}
+            placeholder={form.deciderPlaceholder}
+            disabled={props.busy}
+            onChange={(person) => setDecider(person ?? props.me)}
+          />
+        </div>
       )}
       <fieldset className="sc-field sc-options">
         <legend className="sc-field-label">{form.options}</legend>

package/src/components/decision-list.tsx

@@ -12,7 +12,7 @@ import {
 import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
 import { Pager, pageOf, RECORD_PAGE_SIZE } from "./paged.js";
-import { Badge, Button, cx, PersonChip, Time } from "./ui.js";
+import { Badge, Button, cx, PersonChip, personName, Time } from "./ui.js";
 
 // 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
@@ -29,6 +29,8 @@ export interface DecisionCardProps {
   readonly docHref?: ((path: string) => string) | undefined;
   /** Where the decision's own page is; given, the question leads to it. */
   readonly href?: string | undefined;
+  /** The project the decision is in, named where a page shows the decisions of several. */
+  readonly project?: React.ReactNode;
   /** Called with the person's answer. Left out, a waiting decision cannot be answered here. */
   readonly onAnswer?: ((decision: RestDecision, input: RestAnswerInput) => void) | undefined;
   /** Called to grow the record, with what followed. Left out, it cannot be written here. */
@@ -36,7 +38,10 @@ export interface DecisionCardProps {
   readonly busy?: boolean | undefined;
 }
 
-/** Who asked, and when: the person, through their agent when a run asked. */
+/**
+ * Who asked, and when: the person, through their agent when a run asked; and whom the decision
+ * is for, where that is someone else (ADR-0042).
+ */
 function Asked(props: { readonly decision: RestDecision; readonly day?: boolean }) {
   const words = useWords();
   const { decision } = props;
@@ -47,6 +52,20 @@ function Asked(props: { readonly decision: RestDecision; readonly day?: boolean
         ? words.decisions.asked
         : words.decisions.askedThrough(agentLabel(decision.run.agent))}{" "}
       <Time iso={decision.createdAt} precision={props.day === true ? "day" : "minute"} />
+      {decision.decider.id !== decision.raisedBy.id && (
+        <span className="sc-decision-for">
+          <span className="sc-visually-hidden">
+            {words.decisions.peopleLabel(
+              personName(decision.raisedBy),
+              personName(decision.decider),
+            )}
+          </span>
+          <span className="sc-decision-arrow" aria-hidden="true">
+            →
+          </span>{" "}
+          <PersonChip person={decision.decider} />
+        </span>
+      )}
     </>
   );
 }
@@ -264,6 +283,7 @@ export function DecisionCard(props: DecisionCardProps) {
               )}
             </>
           )}
+          {props.project}
         </p>
       </header>
       {decision.body.length > 0 && (
@@ -288,7 +308,9 @@ export function DecisionCard(props: DecisionCardProps) {
           </p>
         </div>
       ) : props.onAnswer === undefined ? (
-        <p className="sc-decision-waiting">{words.decisions.waitingForPerson}</p>
+        <p className="sc-decision-waiting">
+          {words.decisions.waitingFor(personName(decision.decider))}
+        </p>
       ) : (
         <AnswerForm decision={decision} onAnswer={props.onAnswer} busy={props.busy} />
       )}
@@ -334,6 +356,8 @@ export interface DecisionLogProps {
   readonly page?: number | undefined;
   /** Where each page of the record is, so that a page has an address; left out, the pages turn in place. */
   readonly pageHref?: ((page: number) => string) | undefined;
+  /** The project a decision is in, named where the record holds the decisions of several. */
+  readonly projectOf?: ((decision: RestDecision) => React.ReactNode) | undefined;
 }
 
 /** One row of the record: what was asked, by whom and when; what was answered, with the word given, by whom and when. */
@@ -343,6 +367,7 @@ function RecordRow(props: {
   readonly taskHref: ((task: RestTask) => string) | undefined;
   readonly href: string | undefined;
   readonly docHref: ((path: string) => string) | undefined;
+  readonly project?: React.ReactNode;
 }) {
   const words = useWords();
   const { decision, task } = props;
@@ -367,6 +392,7 @@ function RecordRow(props: {
         </p>
         <p className="sc-decision-record-meta">
           <Asked decision={decision} day />
+          {props.project}
         </p>
       </div>
       {answer !== null && (
@@ -412,6 +438,7 @@ export function DecisionLog(props: DecisionLogProps) {
             taskHref={props.taskHref}
             href={props.decisionHref?.(decision)}
             docHref={props.docHref}
+            project={props.projectOf?.(decision)}
           />
         ))}
       </ol>