@skillcdn/console 0.1.12 → 0.1.14

package/src/components/calendar.tsx

@@ -1,8 +1,11 @@
+import type { ReactNode } from "react";
 import { OPEN_TASK_STATES, type RestCategory, type RestPerson, type RestTask } from "../api.js";
 import {
+  addDays,
   addMonths,
   daysBetween,
   firstDayOfWeek,
+  formatDays,
   formatMonth,
   formatWeekday,
   type GridDay,
@@ -10,15 +13,17 @@ import {
   monthOf,
   today as todayOf,
   weekdays,
+  weekOf,
 } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
 import { cx, PersonChip, personName } 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).
+// The calendar of a project (ADR-0019): the month as a grid, or one week on its own. 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 or the week
+// shown is the address's (ADR-0010).
 
 const isOpen = (task: RestTask): boolean => OPEN_TASK_STATES.includes(task.state);
 
@@ -99,15 +104,14 @@ function push(map: Map<string, RestTask[]>, day: string, task: RestTask): void {
   }
 }
 
-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);
+/** The tasks that sit on one day each: due on it, or beginning on it with no due day yet. */
+function onDays(tasks: readonly RestTask[]): {
+  readonly due: ReadonlyMap<string, readonly RestTask[]>;
+  readonly starting: ReadonlyMap<string, readonly RestTask[]>;
+} {
   const due = new Map<string, RestTask[]>();
   const starting = new Map<string, RestTask[]>();
-  for (const task of props.tasks) {
+  for (const task of tasks) {
     if (spans(task)) {
       continue;
     }
@@ -121,6 +125,121 @@ export function Calendar(props: CalendarProps) {
   for (const list of due.values()) {
     list.sort((a, b) => Number(isOpen(b)) - Number(isOpen(a)) || a.number - b.number);
   }
+  return { due, starting };
+}
+
+/** How a task reads on a day: struck through once it is over, and marked once it is late. */
+const tone = (task: RestTask, day: string, now: string): string =>
+  cx(!isOpen(task) && "sc-calendar-over", isOpen(task) && day < now && "sc-calendar-late");
+
+interface WeekRowProps {
+  readonly week: readonly GridDay[];
+  readonly segments: readonly WeekSegment[];
+  readonly due: ReadonlyMap<string, readonly RestTask[]>;
+  readonly starting: ReadonlyMap<string, readonly RestTask[]>;
+  readonly now: string;
+  readonly taskHref: (task: RestTask) => string;
+  /** What stands before a task's title where the tasks are of several projects: the project's mark. */
+  readonly markOf?: ((task: RestTask) => ReactNode) | undefined;
+}
+
+/** 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 words = useWords().calendar;
+  const { week, segments, now } = props;
+  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>
+          {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, now),
+                )}
+                href={props.taskHref(task)}
+                title={`#${task.number} ${task.title}`}
+              >
+                {segment.from === column && (
+                  <>
+                    {props.markOf?.(task)}
+                    <span className="sc-calendar-task-title">{task.title}</span>
+                  </>
+                )}
+              </a>
+            );
+          })}
+          {(props.due.get(cell.day) ?? []).map((task) => {
+            const mark = props.markOf?.(task);
+            return (
+              <a
+                key={task.id}
+                className={cx("sc-calendar-task", tone(task, cell.day, now))}
+                href={props.taskHref(task)}
+                title={`#${task.number} ${task.title}`}
+              >
+                {mark === undefined || mark === null ? (
+                  <span
+                    className={cx(
+                      "sc-calendar-dot",
+                      `sc-category-${task.category?.color ?? "gray"}`,
+                    )}
+                  />
+                ) : (
+                  mark
+                )}
+                <span className="sc-calendar-task-title">{task.title}</span>
+              </a>
+            );
+          })}
+          {(props.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}`}
+            >
+              {props.markOf?.(task)}
+              <span className="sc-calendar-task-title">{task.title}</span>
+            </a>
+          ))}
+        </td>
+      ))}
+    </tr>
+  );
+}
+
+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, starting } = onDays(props.tasks);
   const inMonth = (day: string) => monthOf(day) === props.month;
   const monthWeeks = weeks.map((week) => ({ week, segments: weekSegments(week, props.tasks) }));
   const nothing =
@@ -131,8 +250,6 @@ export function Calendar(props: CalendarProps) {
         (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">
@@ -171,83 +288,17 @@ export function Calendar(props: CalendarProps) {
           </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>
-            );
-          })}
+          {monthWeeks.map(({ week, segments }) => (
+            <WeekRow
+              key={week[0]?.day}
+              week={week}
+              segments={segments}
+              due={due}
+              starting={starting}
+              now={now}
+              taskHref={props.taskHref}
+            />
+          ))}
         </tbody>
       </table>
       {(props.categories ?? []).length > 0 && (
@@ -267,6 +318,83 @@ export function Calendar(props: CalendarProps) {
   );
 }
 
+export interface WeekProps {
+  readonly tasks: readonly RestTask[];
+  /** A day of the week shown; today's week when left out. */
+  readonly day?: string | undefined;
+  /** The day to count from; the browser's today when left out. */
+  readonly today?: string | undefined;
+  readonly taskHref: (task: RestTask) => string;
+  /** Where the week of a day is shown. */
+  readonly weekHref: (day: string) => string;
+  /** What stands before a task's title where the tasks are of several projects: the project's mark. */
+  readonly markOf?: ((task: RestTask) => ReactNode) | undefined;
+}
+
+/** One week on its own: the days as columns, the tasks on them, and the weeks around a step away. */
+export function Week(props: WeekProps) {
+  const words = useWords().calendar.week;
+  const { tag } = useLanguage();
+  const now = props.today ?? todayOf();
+  const firstDay = firstDayOfWeek(tag);
+  const days = weekOf(props.day ?? now, firstDay);
+  const first = days[0] ?? now;
+  const last = days[days.length - 1] ?? now;
+  const week: GridDay[] = days.map((day) => ({ day, inMonth: true }));
+  const { due, starting } = onDays(props.tasks);
+  const segments = weekSegments(week, props.tasks);
+  const nothing = segments.length === 0 && days.every((day) => !due.has(day) && !starting.has(day));
+  return (
+    <div className="sc-calendar sc-week">
+      <div className="sc-calendar-head">
+        <h2 className="sc-calendar-month">{formatDays(first, last, tag)}</h2>
+        <nav className="sc-calendar-nav" aria-label={words.title}>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.weekHref(addDays(first, -7))}
+            aria-label={words.previous}
+          >
+            {"<"}
+          </a>
+          <a className="sc-button sc-button-ghost sc-button-sm" href={props.weekHref(now)}>
+            {words.thisWeek}
+          </a>
+          <a
+            className="sc-button sc-button-ghost sc-button-sm"
+            href={props.weekHref(addDays(first, 7))}
+            aria-label={words.next}
+          >
+            {">"}
+          </a>
+        </nav>
+      </div>
+      <table className="sc-calendar-grid" aria-label={words.title}>
+        <thead>
+          <tr>
+            {weekdays(firstDay).map((weekday) => (
+              <th key={weekday} scope="col">
+                {formatWeekday(weekday, tag)}
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          <WeekRow
+            week={week}
+            segments={segments}
+            due={due}
+            starting={starting}
+            now={now}
+            taskHref={props.taskHref}
+            markOf={props.markOf}
+          />
+        </tbody>
+      </table>
+      {nothing && <p className="sc-muted">{words.nothing}</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. */

package/src/components/decision-list.tsx

@@ -326,7 +326,6 @@ export function DecisionList(props: DecisionListProps) {
           <h2 className="sc-section-title">
             {words.decisions.record} <span className="sc-column-count">{answered.length}</span>
           </h2>
-          <p className="sc-lead">{words.decisions.recordLead}</p>
           <DecisionLog
             decisions={answered}
             tasks={props.tasks}

package/src/components/skills.tsx

@@ -30,7 +30,6 @@ export function SkillList(props: SkillListProps) {
       <a href={skills.page} target="_blank" rel="noopener noreferrer">
         <code>{skills.address}</code>
       </a>
-      {words.howLoaded}
     </p>
   );
   if (skills.status !== "ready") {

package/src/components/work.tsx

@@ -1,20 +1,26 @@
 import type { RestTask, RestWork } from "../api.js";
 import { addDays, today as todayOf } from "../dates.js";
 import { useWords } from "../i18n/index.js";
+import { Week } from "./calendar.js";
 import { ProjectMark } from "./projects.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.
+// What is on a person's plate (ADR-0019), across the projects they may see: the week at the
+// top, with the open tasks assigned to them on its days; below, the same tasks by when they
+// are due, and the decisions that wait for a person. Takes its data as props and nothing from
+// the network; the week shown is the address's (ADR-0010).
 
 export interface WorkListProps {
   readonly work: RestWork;
   /** The day to count from; the browser's today when left out. */
   readonly today?: string | undefined;
+  /** A day of the week shown at the top; today's week when left out. */
+  readonly week?: string | undefined;
   readonly taskHref: (projectKey: string, task: RestTask) => string;
   readonly decisionHref: (projectKey: string, decisionId: string) => string;
+  /** Where the page is with the week of a day at the top. */
+  readonly weekHref: (day: string) => string;
 }
 
 export function WorkList(props: WorkListProps) {
@@ -25,6 +31,10 @@ export function WorkList(props: WorkListProps) {
   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 markOf = (task: RestTask) => {
+    const project = projectOf.get(task.id);
+    return project === undefined ? undefined : <ProjectMark project={project} size="sm" />;
+  };
   const nameOf = (task: RestTask) => {
     const project = projectOf.get(task.id);
     return project === undefined ? undefined : (
@@ -45,49 +55,59 @@ export function WorkList(props: WorkListProps) {
   }
   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">
-                  <ProjectMark project={project} size="sm" /> {work.inProject(project.name)}
-                </span>
-                <span className="sc-decision-row-meta">
-                  <PersonChip person={decision.raisedBy} /> <Time iso={decision.createdAt} />
-                </span>
-              </li>
-            ))}
-          </ol>
-        )}
-      </section>
+      <Week
+        tasks={tasks.map((item) => item.task)}
+        day={props.week}
+        today={now}
+        taskHref={hrefOf}
+        weekHref={props.weekHref}
+        markOf={markOf}
+      />
+      <div className="sc-work-lists">
+        {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">
+                    <ProjectMark project={project} size="sm" /> {work.inProject(project.name)}
+                  </span>
+                  <span className="sc-decision-row-meta">
+                    <PersonChip person={decision.raisedBy} /> <Time iso={decision.createdAt} />
+                  </span>
+                </li>
+              ))}
+            </ol>
+          )}
+        </section>
+      </div>
     </div>
   );
 }

package/src/connect-page.tsx

@@ -70,7 +70,6 @@ export function ConnectPage(props: ConnectPageProps) {
   );
   const ask = (
     <>
-      <p className="sc-lead">{words.lead}</p>
       <section className="sc-panel" aria-label={words.aria}>
         <ConnectCodeForm busy={busy} onSubmit={(typed) => navigation.go(connectHref(typed))} />
       </section>