@skillcdn/console 0.3.1 → 0.4.0

package/src/components/ui.tsx

@@ -43,11 +43,23 @@ export function Button(
 
 export function Badge(props: {
   readonly tone?: "neutral" | "accent" | "point" | "success" | "warning" | "danger";
+  /** What the badge says, which the stylesheet shows in its shape: a state carries a dot, a priority is outlined, a due day is a square-cornered tag, a count is figures. */
+  readonly kind?: "state" | "priority" | "due" | "count" | undefined;
+  /** A class of the badge's own beside the tone's and the kind's, for a step within a kind. */
+  readonly className?: string | undefined;
   readonly title?: string;
   readonly children: ReactNode;
 }) {
   return (
-    <span className={cx("sc-badge", `sc-badge-${props.tone ?? "neutral"}`)} title={props.title}>
+    <span
+      className={cx(
+        "sc-badge",
+        `sc-badge-${props.tone ?? "neutral"}`,
+        props.kind !== undefined && `sc-badge-kind-${props.kind}`,
+        props.className,
+      )}
+      title={props.title}
+    >
       {props.children}
     </span>
   );
@@ -145,6 +157,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",
@@ -170,7 +207,7 @@ export const ROLE_LABELS: Readonly<Record<PersonRole, string>> = {
 export function RoleBadge(props: { readonly role: PersonRole }) {
   const words = useWords();
   return (
-    <Badge tone={props.role === "admin" ? "point" : "neutral"}>
+    <Badge tone={props.role === "admin" ? "accent" : "neutral"}>
       {words.vocabulary.role[props.role]}
     </Badge>
   );
@@ -186,7 +223,11 @@ export function StateBadge(props: { readonly state: TaskState }) {
         : props.state === "in_progress" || props.state === "in_review"
           ? "accent"
           : "neutral";
-  return <Badge tone={tone}>{words.vocabulary.state[props.state]}</Badge>;
+  return (
+    <Badge tone={tone} kind="state">
+      {words.vocabulary.state[props.state]}
+    </Badge>
+  );
 }
 
 export function PriorityBadge(props: { readonly priority: TaskPriority }) {
@@ -196,7 +237,11 @@ export function PriorityBadge(props: { readonly priority: TaskPriority }) {
   }
   const tone =
     props.priority === "urgent" ? "danger" : props.priority === "high" ? "point" : "neutral";
-  return <Badge tone={tone}>{words.vocabulary.priority[props.priority]}</Badge>;
+  return (
+    <Badge tone={tone} kind="priority">
+      {words.vocabulary.priority[props.priority]}
+    </Badge>
+  );
 }
 
 /** A category as a badge, in its colour: a class the stylesheet paints, never a value typed by hand. */
@@ -220,7 +265,11 @@ export function GoalStateBadge(props: { readonly state: GoalState }) {
         : props.state === "dropped"
           ? "neutral"
           : "neutral";
-  return <Badge tone={tone}>{words.vocabulary.goalState[props.state]}</Badge>;
+  return (
+    <Badge tone={tone} kind="state">
+      {words.vocabulary.goalState[props.state]}
+    </Badge>
+  );
 }
 
 /**
@@ -241,29 +290,45 @@ export function DueBadge(props: {
   const days = daysBetween(now, props.dueOn);
   const day = formatDay(props.dueOn, tag);
   if (!open) {
-    return <Badge tone="neutral">{words.board.due.on(day)}</Badge>;
+    return (
+      <Badge tone="neutral" kind="due">
+        {words.board.due.on(day)}
+      </Badge>
+    );
   }
   if (days < 0) {
     return (
-      <Badge tone="danger" title={day}>
+      <Badge tone="danger" kind="due" title={day}>
         {words.board.due.overdue(-days)}
       </Badge>
     );
   }
   if (days === 0) {
-    return <Badge tone="warning">{words.board.due.today}</Badge>;
+    return (
+      <Badge tone="point" kind="due" className="sc-badge-due-today">
+        {words.board.due.today}
+      </Badge>
+    );
   }
   if (days === 1) {
-    return <Badge tone="warning">{words.board.due.tomorrow}</Badge>;
+    return (
+      <Badge tone="point" kind="due">
+        {words.board.due.tomorrow}
+      </Badge>
+    );
   }
   if (days <= 7) {
     return (
-      <Badge tone="point" title={day}>
+      <Badge tone="warning" kind="due" title={day}>
         {words.board.due.inDays(days)}
       </Badge>
     );
   }
-  return <Badge tone="neutral">{words.board.due.on(day)}</Badge>;
+  return (
+    <Badge tone="neutral" kind="due">
+      {words.board.due.on(day)}
+    </Badge>
+  );
 }
 
 /** How far a goal is, read from its tasks: the done ones, the ones at work, and the rest. */
@@ -377,3 +442,16 @@ export function Time(props: {
     </time>
   );
 }
+
+/** A link that reads as a button: where a form is, for instance. */
+export function LinkButton(props: {
+  readonly href: string;
+  readonly variant?: "primary" | "secondary";
+  readonly children: ReactNode;
+}) {
+  return (
+    <a className={`sc-button sc-button-${props.variant ?? "secondary"}`} href={props.href}>
+      {props.children}
+    </a>
+  );
+}

package/src/components/work.tsx

@@ -1,13 +1,13 @@
 import type { RestTask, RestWork, WeekStart } from "../api.js";
-import { addDays, today as todayOf } from "../dates.js";
-import { useWords } from "../i18n/index.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).
@@ -35,8 +35,10 @@ export interface WorkListProps {
 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]));

package/src/console.tsx

@@ -22,6 +22,7 @@ import {
   type RestDecisionInput,
   type RestDecisionPatch,
   type RestEvent,
+  type RestMyDecisions,
   type RestProject,
   type RestProjectInput,
   type RestProjectPatch,
@@ -45,6 +46,7 @@ import { DecisionForm } from "./components/decision-form.js";
 import { DecisionCard, DecisionList, type DecisionListProps } from "./components/decision-list.js";
 import { EventFeed, type EventFeedProps } from "./components/event-feed.js";
 import { GoalForm, GoalList, type GoalListProps, GoalView, goalMonth } from "./components/goals.js";
+import { MyDecisions } from "./components/my-decisions.js";
 import { PackTokenWays } from "./components/pack-token.js";
 import { PAGE_SIZE } from "./components/paged.js";
 import { ListingForm, PeopleList, type PeopleListProps } from "./components/people.js";
@@ -76,6 +78,7 @@ import {
   Callout,
   CategoryBadge,
   EmptyState,
+  LinkButton,
   personName,
   Spinner,
   StateBadge,
@@ -385,19 +388,6 @@ function NotWithToken() {
   return <EmptyState title={words.title} body={words.body} />;
 }
 
-/** A link that reads as a button: where a form is, for instance. */
-function LinkButton(props: {
-  readonly href: string;
-  readonly variant?: "primary" | "secondary";
-  readonly children: React.ReactNode;
-}) {
-  return (
-    <a className={`sc-button sc-button-${props.variant ?? "secondary"}`} href={props.href}>
-      {props.children}
-    </a>
-  );
-}
-
 function ProjectsPage(props: {
   readonly data: ConsoleData;
   readonly components: ConsoleComponents;
@@ -600,6 +590,28 @@ function TaskPage(props: {
     (fetched !== undefined && (fetched.id === route.id || fetched.number === route.number)
       ? fetched
       : undefined);
+  // The task this one is part of: among the board's, or asked for by itself when it was put away.
+  const parentId = task?.parentId ?? null;
+  const parentOnBoard =
+    parentId === null ? undefined : data.tasks.find((candidate) => candidate.id === parentId);
+  const [parentFetched, setParentFetched] = useState<RestTask | undefined>(undefined);
+  const parentWanted =
+    parentId !== null && parentOnBoard === undefined && data.projectLoaded ? parentId : undefined;
+  useEffect(() => {
+    if (parentWanted === undefined) {
+      return;
+    }
+    const controller = new AbortController();
+    fetchTask(parentWanted, controller.signal)
+      .then((found) => {
+        if (!controller.signal.aborted) {
+          setParentFetched(found);
+        }
+      })
+      .catch(() => undefined);
+    return () => controller.abort();
+  }, [parentWanted, fetchTask]);
+  const parent = parentOnBoard ?? (parentFetched?.id === parentId ? parentFetched : undefined);
   const [history, setHistory] = useState<readonly RestEvent[] | undefined>(undefined);
   const [comments, setComments] = useState<readonly RestComment[] | undefined>(undefined);
   const { taskHistory, taskComments } = data.actions;
@@ -653,6 +665,9 @@ function TaskPage(props: {
       task={task}
       people={data.people.filter(inWorkspace)}
       tasks={data.tasks}
+      parent={parent}
+      findTasks={data.actions.findTasks}
+      findGoals={data.actions.findGoals}
       decisions={data.decisions}
       runs={data.runs}
       comments={comments}
@@ -805,9 +820,9 @@ function ProjectPage(props: {
         <section className="sc-panel sc-panel-form" aria-label={words.task.newAria}>
           <TaskForm
             people={data.people.filter(inWorkspace)}
-            parents={data.tasks}
+            findTasks={data.actions.findTasks}
             categories={data.categories}
-            goals={data.goals}
+            findGoals={data.actions.findGoals}
             busy={busy}
             onSubmit={(input: RestTaskInput) =>
               void act(async () => {
@@ -888,6 +903,19 @@ function ProjectPage(props: {
               empty={<p className="sc-muted">{calendar.nothingOverdue}</p>}
             />
           </section>
+          {open.length > 0 && (
+            <section className="sc-task-section" aria-label={calendar.workload.title}>
+              <h2 className="sc-section-title">{calendar.workload.title}</h2>
+              <Workload
+                tasks={shown}
+                today={now}
+                weekStart={weekStartOf(data.me?.workspace)}
+                personHref={(person) =>
+                  boardHref(key, person === undefined ? {} : { person: person.id })
+                }
+              />
+            </section>
+          )}
           <section className="sc-task-section" aria-label={calendar.unscheduled}>
             <h2 className="sc-section-title">
               {calendar.unscheduled} <span className="sc-column-count">{unscheduled.length}</span>
@@ -901,18 +929,6 @@ function ProjectPage(props: {
             />
           </section>
         </div>
-        {open.length > 0 && (
-          <section className="sc-task-section" aria-label={calendar.workload.title}>
-            <h2 className="sc-section-title">{calendar.workload.title}</h2>
-            <Workload
-              tasks={shown}
-              today={now}
-              personHref={(person) =>
-                boardHref(key, person === undefined ? {} : { person: person.id })
-              }
-            />
-          </section>
-        )}
       </>
     );
   }
@@ -1143,7 +1159,9 @@ function ProjectPage(props: {
         {error !== undefined && <Callout tone="danger">{error}</Callout>}
         <section className="sc-panel sc-panel-form" aria-label={words.decisions.raiseAria}>
           <DecisionForm
-            tasks={data.tasks}
+            findTasks={data.actions.findTasks}
+            deciders={data.members.map((member) => member.person)}
+            me={data.me?.person ?? undefined}
             busy={busy}
             onSubmit={(input: RestDecisionInput) =>
               void act(async () => {
@@ -1796,7 +1814,7 @@ function WorkspaceSettingsPage(props: {
 }
 
 /** A file a person chose, as the client sends it: its name, its bytes and the type the browser says. */
-/** Whether a person is in: who a picker of assignees and of members offers (ADR-0022). */
+/** Whether a person is in: who a picker of workers and of members offers (ADR-0022). */
 const inWorkspace = (person: { readonly status: "active" | "deactivated" }): boolean =>
   person.status === "active";
 
@@ -1986,6 +2004,108 @@ function PlatePage(props: {
 }
 
 /** What is on the person's own plate, across their projects. */
+/** How many of a person's decisions are read at a time. */
+const MY_DECISIONS_PAGE = 50;
+
+/** One kind of a person's decisions, read a page at a time, as the page shows it. */
+interface DecisionsRead {
+  readonly items: RestMyDecisions["items"] | undefined;
+  readonly more: boolean;
+  readonly busy: boolean;
+  readonly problem: string | undefined;
+  readonly readMore: () => void;
+  /** Reads the first page again, after an answer changed what waits. */
+  readonly reload: () => void;
+}
+
+/** The decisions addressed to the person, or, with `raised`, those they raised for someone else (ADR-0042). */
+function useMyDecisions(
+  myDecisions: ConsoleData["actions"]["myDecisions"],
+  raised: boolean,
+  couldNotLoad: string,
+): DecisionsRead {
+  const [items, setItems] = useState<RestMyDecisions["items"] | undefined>(undefined);
+  const [more, setMore] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [problem, setProblem] = useState<string | undefined>(undefined);
+  const read = useCallback(
+    async (offset: number, signal?: AbortSignal) => {
+      setBusy(true);
+      try {
+        const page = await myDecisions({ raised, limit: MY_DECISIONS_PAGE, offset }, signal);
+        if (signal?.aborted === true) {
+          return;
+        }
+        setItems((before) => (offset === 0 ? page.items : [...(before ?? []), ...page.items]));
+        setMore(page.more);
+      } catch (failure: unknown) {
+        if (signal?.aborted !== true) {
+          setProblem(errorWords(failure, couldNotLoad));
+        }
+      } finally {
+        if (signal?.aborted !== true) {
+          setBusy(false);
+        }
+      }
+    },
+    [myDecisions, raised, couldNotLoad],
+  );
+  useEffect(() => {
+    const controller = new AbortController();
+    setItems(undefined);
+    setProblem(undefined);
+    void read(0, controller.signal);
+    return () => controller.abort();
+  }, [read]);
+  const readMore = useCallback(() => void read(items?.length ?? 0), [read, items]);
+  const reload = useCallback(() => void read(0), [read]);
+  return { items, more, busy, problem, readMore, reload };
+}
+
+/**
+ * A person's decisions (ADR-0042), laid out as a project's decisions page is: those waiting for
+ * their answer, answered here, those they asked of others, and the record of both.
+ */
+function MyDecisionsPage(props: { readonly data: ConsoleData }) {
+  const words = useWords();
+  const { myDecisions, answerDecisionIn } = props.data.actions;
+  const addressed = useMyDecisions(myDecisions, false, words.myDecisions.couldNotLoad);
+  const raised = useMyDecisions(myDecisions, true, words.myDecisions.couldNotLoad);
+  const { busy, error, act } = useAction();
+  const problem = addressed.problem ?? raised.problem ?? error;
+  const onAnswer = (projectKey: string, decision: RestDecision, input: RestAnswerInput) =>
+    void act(async () => {
+      await answerDecisionIn(projectKey, decision.id, input);
+      addressed.reload();
+      raised.reload();
+    });
+  return (
+    <>
+      <div className="sc-page-head">
+        <h1 className="sc-page-title">{words.myDecisions.title}</h1>
+      </div>
+      {problem !== undefined && <Callout tone="danger">{problem}</Callout>}
+      {addressed.items === undefined || raised.items === undefined ? (
+        problem === undefined && (
+          <div className="sc-loading">
+            <Spinner label={words.myDecisions.loading} />
+          </div>
+        )
+      ) : addressed.items.length === 0 && raised.items.length === 0 ? (
+        <EmptyState title={words.myDecisions.empty.title} body={words.myDecisions.empty.body} />
+      ) : (
+        <MyDecisions
+          addressed={{ items: addressed.items, more: addressed.more, onMore: addressed.readMore }}
+          raised={{ items: raised.items, more: raised.more, onMore: raised.readMore }}
+          decisionHref={decisionHref}
+          onAnswer={onAnswer}
+          busy={busy || addressed.busy || raised.busy}
+        />
+      )}
+    </>
+  );
+}
+
 function WorkPage(props: {
   readonly data: ConsoleData;
   readonly components: ConsoleComponents;
@@ -2052,6 +2172,9 @@ function WorkspacePage(props: {
   if (route.name === "work") {
     return <WorkPage data={data} components={components} week={route.week} />;
   }
+  if (route.name === "my-decisions") {
+    return <MyDecisionsPage data={data} />;
+  }
   if (route.name === "person-work") {
     return <PersonWorkPage id={route.id} data={data} components={components} week={route.week} />;
   }
@@ -2295,6 +2418,11 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
           current: route.name === "projects" || route.name === "new-project",
         },
         { href: PATHS.work, label: words.nav.work, current: route.name === "work" },
+        {
+          href: PATHS.decisions,
+          label: words.nav.myDecisions,
+          current: route.name === "my-decisions",
+        },
         {
           href: PATHS.people,
           label: words.nav.people,

package/src/data.ts

@@ -24,6 +24,7 @@ import {
   type RestGoal,
   type RestGoalInput,
   type RestGoalPatch,
+  type RestGoals,
   type RestListing,
   type RestListingInput,
   type RestMe,
@@ -31,6 +32,7 @@ import {
   type RestMemberInput,
   type RestMemberPatch,
   type RestMePatch,
+  type RestMyDecisions,
   type RestOrganization,
   type RestPackConnect,
   type RestPackConnectStarted,
@@ -107,8 +109,22 @@ export interface ConsoleActions {
     page: { readonly limit: number; readonly offset: number },
     signal?: AbortSignal,
   ): Promise<RestTasks>;
+  /** What words find among the current tasks of the project, a page at a time, for a picker (ADR-0037); the first page of them for no words. */
+  findTasks(
+    query: string,
+    page: { readonly limit: number; readonly offset: number },
+    signal?: AbortSignal,
+  ): Promise<RestTasks>;
+  /** What words find among the open goals of the project, a page at a time, for a picker. */
+  findGoals(
+    query: string,
+    page: { readonly limit: number; readonly offset: number },
+    signal?: AbortSignal,
+  ): Promise<RestGoals>;
   raiseDecision(input: RestDecisionInput): Promise<RestDecision>;
   answerDecision(id: string, input: RestAnswerInput): Promise<RestDecision>;
+  /** Answers a decision of any project the person may see, by its project's key: for the person's own page of decisions (ADR-0042). */
+  answerDecisionIn(projectKey: string, id: string, input: RestAnswerInput): Promise<RestDecision>;
   /** Grows a decision's record: its context, or what followed. */
   updateDecision(id: string, patch: RestDecisionPatch): Promise<RestDecision>;
   /** Sets a goal on the roadmap of the project the page is on; for an owner. */
@@ -116,6 +132,17 @@ export interface ConsoleActions {
   updateGoal(id: string, patch: RestGoalPatch): Promise<RestGoal>;
   /** What is on the person's plate across their projects, read when the page asks. */
   work(signal?: AbortSignal): Promise<RestWork>;
+  /** The decisions addressed to the person (ADR-0042) across their projects, a page at a time, read when the page asks. */
+  myDecisions(
+    filter: {
+      readonly open?: boolean;
+      /** Those the person raised for someone else, in place of those addressed to them. */
+      readonly raised?: boolean;
+      readonly limit: number;
+      readonly offset: number;
+    },
+    signal?: AbortSignal,
+  ): Promise<RestMyDecisions>;
   /** The categories tasks are sorted into: kept by an administrator. */
   createCategory(input: RestCategoryInput): Promise<RestCategory>;
   updateCategory(key: string, patch: RestCategoryPatch): Promise<RestCategory>;
@@ -265,6 +292,32 @@ async function readTasks(
   return { items };
 }
 
+/** How many pages of the roadmap are read before it is shown as it stands. */
+const GOALS_MAX_PAGES = 20;
+
+/**
+ * The goals of a project, whole: page after page while the server says there is more, since
+ * the roadmap, the calendar and the filters draw them all.
+ */
+async function readGoals(
+  scope: ProjectClient,
+  signal: AbortSignal | undefined,
+): Promise<{ readonly items: RestGoal[] }> {
+  const items: RestGoal[] = [];
+  for (let page = 0; page < GOALS_MAX_PAGES; page += 1) {
+    const result = await scope.goals({ limit: LIST_LIMIT, offset: page * LIST_LIMIT }, signal);
+    items.push(...result.items);
+    if (!result.more) {
+      break;
+    }
+  }
+  return { items };
+}
+
+/** The words of a search as the API takes them: none for a blank. */
+const searchWordsOf = (query: string): { readonly q?: string } =>
+  query.trim() === "" ? {} : { q: query.trim() };
+
 /** How many pages of the decisions are read before the record is shown as it stands. */
 const DECISIONS_MAX_PAGES = 20;
 
@@ -353,7 +406,7 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
           scope.get(signal),
           readTasks(scope, signal),
           readDecisions(scope, signal),
-          scope.goals({}, signal),
+          readGoals(scope, signal),
           scope.runs(undefined, signal),
           scope.members(signal),
         ]);
@@ -608,11 +661,17 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
         return archived;
       },
       archivedTasks: (page, signal) => scope().tasks({ archived: true, ...page }, signal),
+      findTasks: (query, page, signal) =>
+        scope().tasks({ archived: false, ...searchWordsOf(query), ...page }, signal),
+      findGoals: (query, page, signal) =>
+        scope().goals({ open: true, ...searchWordsOf(query), ...page }, signal),
       async raiseDecision(input) {
         const decision = await scope().raiseDecision(input);
         await refreshProject();
         return decision;
       },
+      answerDecisionIn: (projectKey, id, input) =>
+        client.project(projectKey).answerDecision(id, input),
       async answerDecision(id, input) {
         const decision = await scope().answerDecision(id, input);
         await refreshProject();
@@ -636,6 +695,7 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
         return goal;
       },
       work: (signal) => client.work(signal),
+      myDecisions: (filter, signal) => client.myDecisions(filter, signal),
       async createCategory(input) {
         const category = await client.createCategory(input);
         setCategories((await client.categories()).items);