@skillcdn/console 0.3.0 → 0.3.2

package/src/components/projects.tsx

@@ -305,7 +305,7 @@ export function ProjectForm(props: ProjectFormProps) {
               onChange={(event) => setSkillsAddress(event.target.value)}
             />
           </span>
-          <span className="sc-muted">
+          <span className="sc-field-hint">
             {form.skillsAddressHint(props.organizationAddress ?? null)}
           </span>
         </label>
@@ -383,8 +383,19 @@ export interface MemberListProps {
   readonly people: readonly RestPerson[];
   /** Whoever is looking, so that their own row says so. */
   readonly me?: RestPerson | undefined;
+  /**
+   * Whether the project is open to the workspace (ADR-0035): everyone of it is a member, the
+   * list is everyone, nobody is added or removed, and an owner is made from a row.
+   */
+  readonly open?: boolean | undefined;
   /** Called with a person to list, and what they are to be. Left out, the list is read here, not changed. */
   readonly onAdd?: ((input: RestMemberInput) => void) | undefined;
+  /**
+   * Finds a person of the workspace by their exact login, or nobody: given to an owner whose
+   * People page shows only whom they share a project with, so that they list someone it does
+   * not show (ADR-0035). With `onAdd` only.
+   */
+  readonly lookup?: ((login: string) => Promise<RestPerson | undefined>) | undefined;
   readonly onChangeRole?: ((member: RestMember, role: ProjectRole) => void) | undefined;
   readonly onRemove?: ((member: RestMember) => void) | undefined;
   /** Where a member's work is seen; given to the project's owners. */
@@ -400,6 +411,30 @@ export function MemberList(props: MemberListProps) {
   const candidates = props.people.filter((person) => !listed.has(person.id));
   const [personId, setPersonId] = useState("");
   const [role, setRole] = useState<ProjectRole>("member");
+  const [login, setLogin] = useState("");
+  const [notFound, setNotFound] = useState<string | undefined>(undefined);
+  const [looking, setLooking] = useState(false);
+  const addByLogin = async () => {
+    const wanted = login.trim();
+    if (wanted === "" || props.lookup === undefined) {
+      return;
+    }
+    setLooking(true);
+    try {
+      const found = await props.lookup(wanted);
+      if (found === undefined) {
+        setNotFound(wanted);
+        return;
+      }
+      setNotFound(undefined);
+      setLogin("");
+      props.onAdd?.({ personId: found.id, role });
+    } catch {
+      setNotFound(wanted);
+    } finally {
+      setLooking(false);
+    }
+  };
   return (
     <div className="sc-members">
       {props.members.length === 0 ? (
@@ -419,8 +454,14 @@ export function MemberList(props: MemberListProps) {
                   {members.since} <Time iso={member.addedAt} />
                 </span>
               </span>
-              {props.onChangeRole === undefined ? (
-                <ProjectRoleBadge role={member.role} />
+              {props.onChangeRole === undefined || member.person.role === "admin" ? (
+                // An administrator owns every project by office: nothing here changes that.
+                <span className="sc-member-role">
+                  <ProjectRoleBadge role={member.role} />
+                  {member.person.role === "admin" && (
+                    <span className="sc-muted"> {words.vocabulary.role.admin}</span>
+                  )}
+                </span>
               ) : (
                 <label className="sc-field sc-field-inline">
                   <span className="sc-visually-hidden">
@@ -447,7 +488,7 @@ export function MemberList(props: MemberListProps) {
                   {words.people.work}
                 </a>
               )}
-              {props.onRemove !== undefined && (
+              {props.onRemove !== undefined && props.open !== true && (
                 <Button
                   variant="danger"
                   size="sm"
@@ -461,7 +502,7 @@ export function MemberList(props: MemberListProps) {
           ))}
         </ul>
       )}
-      {props.onAdd !== undefined && candidates.length > 0 && (
+      {props.onAdd !== undefined && props.open !== true && candidates.length > 0 && (
         <form
           className="sc-form sc-member-form"
           aria-label={members.addAria}
@@ -515,6 +556,57 @@ export function MemberList(props: MemberListProps) {
           </div>
         </form>
       )}
+      {props.onAdd !== undefined && props.lookup !== undefined && props.open !== true && (
+        <form
+          className="sc-form sc-member-form sc-member-lookup"
+          aria-label={members.addByLoginAria}
+          onSubmit={(event) => {
+            event.preventDefault();
+            void addByLogin();
+          }}
+        >
+          <div className="sc-field-row">
+            <label className="sc-field">
+              <span className="sc-field-label">{members.login}</span>
+              <input
+                className="sc-input"
+                value={login}
+                autoComplete="off"
+                onChange={(event) => {
+                  setLogin(event.target.value);
+                  setNotFound(undefined);
+                }}
+              />
+            </label>
+            <label className="sc-field">
+              <span className="sc-field-label">{members.as}</span>
+              <select
+                className="sc-input"
+                value={role}
+                onChange={(event) => setRole(event.target.value as ProjectRole)}
+              >
+                {PROJECT_ROLES.map((candidate) => (
+                  <option key={candidate} value={candidate}>
+                    {words.vocabulary.projectRole[candidate]}
+                  </option>
+                ))}
+              </select>
+            </label>
+            <div className="sc-form-actions">
+              <Button
+                type="submit"
+                variant="primary"
+                disabled={props.busy === true || looking || login.trim() === ""}
+              >
+                {members.addByLogin}
+              </Button>
+            </div>
+          </div>
+          <p className="sc-field-hint">
+            {notFound === undefined ? members.lookupHint : members.nobodyCalled(notFound)}
+          </p>
+        </form>
+      )}
     </div>
   );
 }
@@ -522,6 +614,8 @@ export function MemberList(props: MemberListProps) {
 export interface PackTokenFormProps {
   /** Whether the project holds a pack token now, so that it can be taken away. */
   readonly set: boolean;
+  /** When the token held now was set, so that an owner knows what they replace. */
+  readonly setAt?: string | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
   /** Called with the token as typed or pasted; it travels to the console once and is shown nowhere after. */
@@ -539,8 +633,8 @@ export function PackTokenForm(props: PackTokenFormProps) {
   const ready = typed.length >= 8 && !/\s/.test(typed);
   return (
     <form
-      className="sc-form"
-      aria-label={pack.aria}
+      className="sc-form sc-pack-token-form"
+      aria-label={pack.pasteAria}
       onSubmit={(event: FormEvent) => {
         event.preventDefault();
         if (ready && props.busy !== true) {
@@ -550,6 +644,11 @@ export function PackTokenForm(props: PackTokenFormProps) {
       }}
     >
       <p className="sc-field-hint">{pack.hint}</p>
+      {props.set && props.setAt !== undefined && (
+        <p className="sc-muted">
+          {pack.setSince} <Time iso={props.setAt} />
+        </p>
+      )}
       <label className="sc-field">
         <span className="sc-field-label">{pack.label}</span>
         <input
@@ -569,8 +668,8 @@ export function PackTokenForm(props: PackTokenFormProps) {
         </p>
       )}
       <div className="sc-form-actions">
-        <Button type="submit" variant="primary" disabled={!ready || props.busy === true}>
-          {pack.set}
+        <Button type="submit" variant="secondary" disabled={!ready || props.busy === true}>
+          {props.set ? pack.replace : pack.set}
         </Button>
         {props.set && props.onRemove !== undefined && (
           <Button variant="danger" disabled={props.busy === true} onClick={props.onRemove}>

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>

package/src/components/ui.tsx

@@ -145,6 +145,31 @@ export function PersonChip(props: { readonly person: RestPerson; readonly size?:
   );
 }
 
+/** How many of a task's workers are shown as pictures before the rest are a count. */
+const WORKERS_SHOWN = 3;
+
+/** The people at work on a task (ADR-0037), as pictures side by side with a count of the rest; nothing while nobody is. */
+export function Workers(props: {
+  readonly workers: readonly RestPerson[];
+  readonly size?: "xs" | "sm";
+  /** How many are shown as pictures; the rest are a count. */
+  readonly shown?: number;
+}) {
+  if (props.workers.length === 0) {
+    return null;
+  }
+  const shown = props.shown ?? WORKERS_SHOWN;
+  const rest = props.workers.length - shown;
+  return (
+    <span className="sc-workers" title={props.workers.map(personName).join(", ")}>
+      {props.workers.slice(0, shown).map((worker) => (
+        <Avatar key={worker.id} person={worker} size={props.size ?? "sm"} />
+      ))}
+      {rest > 0 && <span className="sc-workers-more">+{rest}</span>}
+    </span>
+  );
+}
+
 /** The words of the vocabulary as people read them, in English: the default pack's. */
 export const STATE_LABELS: Readonly<Record<TaskState, string>> = {
   idea: "Idea",

package/src/components/work.tsx

@@ -1,13 +1,13 @@
-import type { RestTask, RestWork } from "../api.js";
-import { addDays, today as todayOf } from "../dates.js";
-import { useWords } from "../i18n/index.js";
+import type { RestTask, RestWork, WeekStart } from "../api.js";
+import { deviceLanguage, firstDayOfWeek, today as todayOf, weekOf } from "../dates.js";
+import { useLanguage, 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 week at the
-// top, with the open tasks assigned to them on its days, and what of theirs was done or
+// top, with the open tasks they work on on its days, and what of theirs was done or
 // dropped on them, as a project's calendar shows it; below, the open 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).
@@ -28,13 +28,17 @@ export interface WorkListProps {
   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;
+  /** The day the week begins on, as the workspace says (ADR-0035); the language's when left out. */
+  readonly weekStart?: WeekStart | undefined;
 }
 
 export function WorkList(props: WorkListProps) {
   const words = useWords();
   const work = words.work;
+  const { tag } = useLanguage();
   const now = props.today ?? todayOf();
-  const weekEnd = addDays(now, 6);
+  // This week ends with the week's last day, as the workspace begins its weeks (ADR-0039).
+  const weekEnd = weekOf(now, firstDayOfWeek(deviceLanguage(tag), props.weekStart)).at(-1) ?? now;
   const { tasks, decisions } = props.work;
   const closed = props.work.closed ?? [];
   const projectOf = new Map([...tasks, ...closed].map((item) => [item.task.id, item.project]));
@@ -70,6 +74,7 @@ export function WorkList(props: WorkListProps) {
         taskHref={hrefOf}
         weekHref={props.weekHref}
         markOf={markOf}
+        weekStart={props.weekStart}
       />
       <div className="sc-work-lists">
         {groups