@skillcdn/console 0.3.2 → 0.4.0

package/src/components/documents.tsx

@@ -440,12 +440,21 @@ export function DocumentFiles(props: DocumentFilesProps) {
             }
           }}
         >
-          <input
-            className="sc-input"
-            type="file"
-            aria-label={words.fileToAttach}
-            onChange={(event) => setChosen(event.target.files?.[0] ?? undefined)}
-          />
+          <div className="sc-doc-attach-file">
+            <label className="sc-button sc-button-secondary sc-file-choice">
+              {words.chooseFile}
+              <input
+                key={chosen === undefined ? "none" : "some"}
+                className="sc-file-input"
+                type="file"
+                aria-label={words.fileToAttach}
+                onChange={(event) => setChosen(event.target.files?.[0] ?? undefined)}
+              />
+            </label>
+            <span className={cx("sc-doc-attach-chosen", chosen === undefined && "sc-muted")}>
+              {chosen === undefined ? words.noFileChosen : chosen.name}
+            </span>
+          </div>
           <input
             className="sc-input"
             placeholder={words.labelPlaceholder}
@@ -453,7 +462,11 @@ export function DocumentFiles(props: DocumentFilesProps) {
             value={label}
             onChange={(event) => setLabel(event.target.value)}
           />
-          <Button type="submit" size="sm" disabled={chosen === undefined || props.busy === true}>
+          <Button
+            type="submit"
+            variant="primary"
+            disabled={chosen === undefined || props.busy === true}
+          >
             {words.attach}
           </Button>
         </form>
@@ -555,7 +568,7 @@ export function DocumentView(props: DocumentViewProps) {
               </dd>
             </div>
             <div>
-              <dt>{docs.writtenBy}</dt>
+              <dt>{docs.author}</dt>
               <dd>
                 <Writer by={shown.author} agent={shown.agent} /> <Time iso={shown.createdAt} />
               </dd>
@@ -641,9 +654,12 @@ export function DocumentView(props: DocumentViewProps) {
                       >
                         {docs.version(entry.number)}
                       </a>
-                    )}{" "}
-                    {entry.title} · <Writer by={entry.author} agent={entry.agent} />{" "}
-                    <Time iso={entry.createdAt} />
+                    )}
+                    <span className="sc-version-title">{entry.title}</span>
+                    <span className="sc-version-meta">
+                      <Writer by={entry.author} agent={entry.agent} />{" "}
+                      <Time iso={entry.createdAt} />
+                    </span>
                   </li>
                 ))}
               </ol>

package/src/components/event-feed.tsx

@@ -1,9 +1,10 @@
 import type { ReactNode } from "react";
 import { agentLabel, type RestEvent } from "../api.js";
+import { dayOf } from "../dates.js";
 import { en, type Messages } from "../i18n/en.js";
-import { useWords } from "../i18n/index.js";
+import { useLanguage, useWords } from "../i18n/index.js";
 import { ShowMore, usePaged } from "./paged.js";
-import { PersonChip, Time } from "./ui.js";
+import { formatInstant, PersonChip } from "./ui.js";
 
 // The feed: one line per event, newest first, as a sentence a person reads at a glance: who,
 // as which agent when through one, and what. It takes its data as props and nothing from the
@@ -103,7 +104,9 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
         ? feed.event.runFinished(task)
         : data.status === "failed"
           ? feed.event.runFailed(task)
-          : feed.event.runAbandoned(task);
+          : data.reason === "unheard"
+            ? feed.event.runUnheard(task, data.agent ?? feed.someone)
+            : feed.event.runAbandoned(task);
     case "document.written":
       return feed.event.documentWritten(page, data.version);
     case "document.archived":
@@ -123,8 +126,65 @@ export interface EventFeedProps {
   readonly empty?: ReactNode;
 }
 
+/** The day an event fell on, by this machine's clock, as the calendar spells a day. */
+function dayOfEvent(event: RestEvent): string {
+  const date = new Date(event.createdAt);
+  return Number.isNaN(date.getTime()) ? event.createdAt : dayOf(date);
+}
+
+/** A day as the feed heads it: the weekday and the date, with the year where it is not this one. */
+function formatFeedDay(day: string, language: string, now: Date = new Date()): string {
+  const date = new Date(`${day}T00:00:00`);
+  if (Number.isNaN(date.getTime())) {
+    return day;
+  }
+  return date.toLocaleDateString(language, {
+    weekday: "short",
+    month: "long",
+    day: "numeric",
+    ...(date.getFullYear() === now.getFullYear() ? {} : { year: "numeric" }),
+  });
+}
+
+/** Whether two events were done by the same person as the same agent, so the name is said once. */
+function sameHands(a: RestEvent, b: RestEvent): boolean {
+  return (a.actor?.id ?? null) === (b.actor?.id ?? null) && a.agent === b.agent;
+}
+
+/** The hour of an event, for a row whose day is in the heading above it. */
+function formatClock(iso: string, language: string): string {
+  const date = new Date(iso);
+  return Number.isNaN(date.getTime())
+    ? iso
+    : date.toLocaleTimeString(language, { hour: "2-digit", minute: "2-digit", hourCycle: "h23" });
+}
+
+type FeedRun = { readonly actor: RestEvent; readonly events: RestEvent[] };
+type FeedDay = { readonly day: string; readonly runs: FeedRun[] };
+
+/** The events by the day they fell on, and within a day by runs of the same hands; newest first. */
+function groupFeed(events: readonly RestEvent[]): FeedDay[] {
+  const days: FeedDay[] = [];
+  for (const event of events) {
+    const day = dayOfEvent(event);
+    let last = days[days.length - 1];
+    if (last === undefined || last.day !== day) {
+      last = { day, runs: [] };
+      days.push(last);
+    }
+    const run = last.runs[last.runs.length - 1];
+    if (run !== undefined && sameHands(run.actor, event)) {
+      run.events.push(event);
+    } else {
+      last.runs.push({ actor: event, events: [event] });
+    }
+  }
+  return days;
+}
+
 export function EventFeed(props: EventFeedProps) {
   const words = useWords();
+  const { tag } = useLanguage();
   const newestFirst = [...props.events].reverse();
   const { shown, rest, more } = usePaged(newestFirst);
   if (props.events.length === 0) {
@@ -132,37 +192,60 @@ export function EventFeed(props: EventFeedProps) {
   }
   return (
     <>
-      <ol className="sc-feed" aria-label={words.feed.list}>
-        {shown.map((event) => {
-          const href = props.href?.(event);
-          const said = describeEvent(event, words);
-          return (
-            <li key={event.id} className="sc-feed-item">
-              <span className="sc-feed-actor">
-                {event.actor === null ? (
-                  <span className="sc-person-login">{words.feed.console}</span>
-                ) : (
-                  <PersonChip person={event.actor} />
-                )}
-                {event.agent !== null && (
-                  <span
-                    className="sc-feed-agent"
-                    title={
-                      agentLabel(event.agent) === event.agent ? words.feed.asTitle : event.agent
-                    }
-                  >
-                    {words.feed.as(agentLabel(event.agent))}
+      <section className="sc-feed" aria-label={words.feed.list}>
+        {groupFeed(shown).map((group) => (
+          <section key={group.day} className="sc-feed-day">
+            <h3 className="sc-feed-day-title">
+              <time dateTime={group.day}>{formatFeedDay(group.day, tag)}</time>
+            </h3>
+            <ol className="sc-feed-day-list">
+              {group.runs.map((run) => (
+                <li key={run.actor.id} className="sc-feed-run">
+                  <span className="sc-feed-actor">
+                    {run.actor.actor === null ? (
+                      <span className="sc-person-login">{words.feed.console}</span>
+                    ) : (
+                      <PersonChip person={run.actor.actor} />
+                    )}
+                    {run.actor.agent !== null && (
+                      <span
+                        className="sc-feed-agent"
+                        title={
+                          agentLabel(run.actor.agent) === run.actor.agent
+                            ? words.feed.asTitle
+                            : run.actor.agent
+                        }
+                      >
+                        {words.feed.as(agentLabel(run.actor.agent))}
+                      </span>
+                    )}
                   </span>
-                )}
-              </span>
-              <span className="sc-feed-words">
-                {href === undefined ? said : <a href={href}>{said}</a>}
-              </span>
-              <Time iso={event.createdAt} />
-            </li>
-          );
-        })}
-      </ol>
+                  <ol className="sc-feed-run-list">
+                    {run.events.map((event) => {
+                      const href = props.href?.(event);
+                      const said = describeEvent(event, words);
+                      return (
+                        <li key={event.id} className="sc-feed-item">
+                          <time
+                            className="sc-time sc-feed-clock"
+                            dateTime={event.createdAt}
+                            title={formatInstant(event.createdAt, tag)}
+                          >
+                            {formatClock(event.createdAt, tag)}
+                          </time>
+                          <span className="sc-feed-words">
+                            {href === undefined ? said : <a href={href}>{said}</a>}
+                          </span>
+                        </li>
+                      );
+                    })}
+                  </ol>
+                </li>
+              ))}
+            </ol>
+          </section>
+        ))}
+      </section>
       <ShowMore rest={rest} onMore={more} />
     </>
   );

package/src/components/my-decisions.tsx

@@ -0,0 +1,138 @@
+import type { ReactNode } from "react";
+import type { RestAnswerInput, RestDecision, RestMyDecisions } from "../api.js";
+import { useWords } from "../i18n/index.js";
+import { DecisionCard, DecisionLog } from "./decision-list.js";
+import { ProjectMark } from "./projects.js";
+import { Button } from "./ui.js";
+
+// A person's decisions (ADR-0042), across the projects they may see, laid out as a project's
+// decisions page is: in the first column the decisions that wait for their answer, as cards
+// answered here, and under them the decisions they asked of someone else, as cards that say
+// whom they wait for; in the second the record, the answered ones of both kinds, newest first.
+// Every card and row names the project, and who asked and who answers, as the cards do
+// everywhere. Takes its data as props and nothing from the network; the page reads more when
+// asked.
+
+/** One kind of a person's decisions, a page at a time. */
+export interface DecisionsPage {
+  readonly items: RestMyDecisions["items"];
+  /** Whether there is more after what is shown; `onMore` reads it. */
+  readonly more?: boolean | undefined;
+  readonly onMore?: (() => void) | undefined;
+}
+
+export interface MyDecisionsProps {
+  /** The decisions addressed to the person: waiting and answered. */
+  readonly addressed: DecisionsPage;
+  /** The decisions the person asked of someone else: waiting and answered. */
+  readonly raised: DecisionsPage;
+  readonly decisionHref: (projectKey: string, decisionId: string) => string;
+  /** Called with the person's answer on a decision of theirs, in its project. Left out, a waiting decision is answered on its own page. */
+  readonly onAnswer?:
+    | ((projectKey: string, decision: RestDecision, input: RestAnswerInput) => void)
+    | undefined;
+  readonly busy?: boolean | undefined;
+}
+
+type Item = RestMyDecisions["items"][number];
+
+/** The project a decision is in, as the plate names one. */
+function InProject(props: { readonly project: Item["project"] }) {
+  const words = useWords();
+  return (
+    <span className="sc-task-row-project">
+      <ProjectMark project={props.project} size="sm" /> {words.work.inProject(props.project.name)}
+    </span>
+  );
+}
+
+function More(props: {
+  readonly page: DecisionsPage;
+  readonly label: string;
+  readonly busy?: boolean | undefined;
+}) {
+  const { page } = props;
+  if (page.more !== true || page.onMore === undefined) {
+    return null;
+  }
+  return (
+    <div className="sc-paged-more">
+      <Button variant="secondary" size="sm" disabled={props.busy} onClick={page.onMore}>
+        {props.label}
+      </Button>
+    </div>
+  );
+}
+
+export function MyDecisions(props: MyDecisionsProps) {
+  const words = useWords();
+  const own = words.myDecisions;
+  const { onAnswer } = props;
+  const waiting = props.addressed.items.filter(({ decision }) => decision.answer === null);
+  const asked = props.raised.items.filter(({ decision }) => decision.answer === null);
+  const record = [...props.addressed.items, ...props.raised.items]
+    .filter(({ decision }) => decision.answer !== null)
+    .sort((a, b) => (b.decision.answer?.at ?? "").localeCompare(a.decision.answer?.at ?? ""));
+  const projectOf = new Map(record.map((item) => [item.decision.id, item.project]));
+  const card = (item: Item, answerable: boolean): ReactNode => (
+    <DecisionCard
+      key={item.decision.id}
+      decision={item.decision}
+      href={props.decisionHref(item.project.key, item.decision.id)}
+      project={<InProject project={item.project} />}
+      onAnswer={
+        answerable && onAnswer !== undefined
+          ? (decision, input) => onAnswer(item.project.key, decision, input)
+          : undefined
+      }
+      busy={props.busy}
+    />
+  );
+  return (
+    <div className="sc-decisions">
+      <div className="sc-decisions-waiting">
+        <section aria-label={own.waiting}>
+          <h2 className="sc-section-title">
+            {own.waiting} <span className="sc-column-count">{waiting.length}</span>
+          </h2>
+          {waiting.length === 0 ? (
+            <p className="sc-muted">{own.noneWaiting}</p>
+          ) : (
+            waiting.map((item) => card(item, true))
+          )}
+          <More page={props.addressed} label={own.more} busy={props.busy} />
+        </section>
+        <section aria-label={own.raised}>
+          <h2 className="sc-section-title">
+            {own.raised} <span className="sc-column-count">{asked.length}</span>
+          </h2>
+          {asked.length === 0 ? (
+            <p className="sc-muted">{own.noneRaised}</p>
+          ) : (
+            asked.map((item) => card(item, false))
+          )}
+          <More page={props.raised} label={own.more} busy={props.busy} />
+        </section>
+      </div>
+      <section aria-label={words.decisions.record}>
+        <h2 className="sc-section-title">
+          {words.decisions.record} <span className="sc-column-count">{record.length}</span>
+        </h2>
+        {record.length === 0 ? (
+          <p className="sc-muted">{own.noneAnswered}</p>
+        ) : (
+          <DecisionLog
+            decisions={record.map((item) => item.decision)}
+            decisionHref={(decision) =>
+              props.decisionHref(projectOf.get(decision.id)?.key ?? "", decision.id)
+            }
+            projectOf={(decision) => {
+              const project = projectOf.get(decision.id);
+              return project === undefined ? undefined : <InProject project={project} />;
+            }}
+          />
+        )}
+      </section>
+    </div>
+  );
+}

package/src/components/people.tsx

@@ -75,9 +75,11 @@ export function PeopleList(props: PeopleListProps) {
         {active.map((person) => (
           <li key={person.id} className="sc-person-row">
             <PersonChip person={person} size="md" />
+            {props.me?.id === person.id && (
+              <span className="sc-person-you">{words.common.you}</span>
+            )}
             <span className="sc-person-name sc-muted">
               {person.name === null ? "" : person.login}
-              {props.me?.id === person.id && <span> {words.common.you}</span>}
               <span className="sc-person-note"> {people.source[person.source]}</span>
             </span>
             {props.onChangeRole === undefined ? (

package/src/components/projects.tsx

@@ -93,7 +93,7 @@ export const VISIBILITY_LABELS: Readonly<Record<ProjectVisibility, string>> = {
 export function ProjectRoleBadge(props: { readonly role: ProjectRole }) {
   const words = useWords();
   return (
-    <Badge tone={props.role === "owner" ? "point" : "neutral"}>
+    <Badge tone={props.role === "owner" ? "accent" : "neutral"}>
       {words.vocabulary.projectRole[props.role]}
     </Badge>
   );
@@ -143,7 +143,9 @@ export function ProjectList(props: ProjectListProps) {
           )}
           {project.openDecisions > 0 && (
             <p className="sc-project-meta">
-              <Badge tone="warning">{words.decisionsWaiting(project.openDecisions)}</Badge>
+              <Badge tone="warning" kind="count">
+                {words.decisionsWaiting(project.openDecisions)}
+              </Badge>
             </p>
           )}
         </li>
@@ -444,11 +446,11 @@ export function MemberList(props: MemberListProps) {
           {props.members.map((member) => (
             <li key={member.person.id} className="sc-person-row">
               <PersonChip person={member.person} size="md" />
+              {props.me?.id === member.person.id && (
+                <span className="sc-person-you">{words.common.you}</span>
+              )}
               <span className="sc-person-name">
                 {member.person.name ?? ""}
-                {props.me?.id === member.person.id && (
-                  <span className="sc-muted"> {words.common.you}</span>
-                )}
                 <span className="sc-muted">
                   {" "}
                   {members.since} <Time iso={member.addedAt} />

package/src/components/roadmap.tsx

@@ -157,7 +157,7 @@ export function GoalTimeline(props: GoalTimelineProps) {
           return (
             <div key={goal.id} className={cx("sc-timeline-row", `sc-goal-${goal.state}`)}>
               <div className="sc-timeline-label">
-                <a className="sc-timeline-goal" href={props.goalHref(goal)}>
+                <a className="sc-timeline-goal" href={props.goalHref(goal)} title={goal.title}>
                   {goal.title}
                 </a>
                 <GoalStateBadge state={goal.state} />

package/src/components/runs.tsx

@@ -32,7 +32,11 @@ export function RunStatusBadge(props: { readonly status: RunStatus }) {
           : props.status === "failed"
             ? "danger"
             : "neutral";
-  return <Badge tone={tone}>{words.vocabulary.runStatus[props.status]}</Badge>;
+  return (
+    <Badge tone={tone} kind="state">
+      {words.vocabulary.runStatus[props.status]}
+    </Badge>
+  );
 }
 
 export interface RunCardProps {

package/src/components/shell.tsx

@@ -186,6 +186,41 @@ function PersonMenu(props: {
 
 export function Shell(props: ShellProps) {
   const words = useWords();
+  // Where the tabs scroll sideways, the current one is brought into the bar's view.
+  const tabs = useRef<HTMLElement>(null);
+  const current = props.nav.find((item) => item.current)?.href;
+  useEffect(() => {
+    const bar = tabs.current;
+    if (current === undefined || bar === null) {
+      return;
+    }
+    const bring = () => {
+      const tab = bar.querySelector<HTMLElement>(".sc-tab-current");
+      if (tab === null) {
+        return;
+      }
+      const left = tab.offsetLeft - bar.offsetLeft;
+      // The last part of the bar fades where it scrolls (the stylesheet's mask): a tab there
+      // counts as out of view.
+      const seen = bar.scrollWidth > bar.clientWidth ? bar.clientWidth * 0.85 : bar.clientWidth;
+      if (left < bar.scrollLeft || left + tab.offsetWidth > bar.scrollLeft + seen) {
+        bar.scrollLeft = left - (bar.clientWidth - tab.offsetWidth) / 2;
+      }
+    };
+    bring();
+    // The tabs grow once the page's face has loaded, and the bar narrows with the window: either
+    // may put the current tab out of view again.
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const watch = new ResizeObserver(bring);
+    watch.observe(bar);
+    const inner = bar.firstElementChild;
+    if (inner !== null) {
+      watch.observe(inner);
+    }
+    return () => watch.disconnect();
+  }, [current]);
   const follow = (href: string) => (event: React.MouseEvent) => {
     if (isPlainClick(event)) {
       event.preventDefault();
@@ -259,7 +294,7 @@ export function Shell(props: ShellProps) {
           </div>
         </div>
         {props.nav.length > 0 && (
-          <nav className="sc-tabs" aria-label={words.shell.pages}>
+          <nav ref={tabs} className="sc-tabs" aria-label={words.shell.pages}>
             <div className="sc-tabs-inner">
               {props.nav.map((item) => (
                 <a

package/src/components/task-list.tsx

@@ -45,7 +45,7 @@ export function TaskList(props: TaskListProps) {
                 {task.category !== null && <CategoryBadge category={task.category} />}
                 {props.showState === true && <StateBadge state={task.state} />}
                 {task.openDecisions > 0 && (
-                  <Badge tone="warning" title={words.board.decisionsTitle}>
+                  <Badge tone="warning" kind="count" title={words.board.decisionsTitle}>
                     {words.board.decisions(task.openDecisions)}
                   </Badge>
                 )}

package/src/components/task-view.tsx

@@ -142,26 +142,56 @@ export function TaskView(props: TaskViewProps) {
   return (
     <div className="sc-task">
       <header className="sc-task-header">
-        {parent !== undefined && (
-          <p className="sc-task-parent">
-            {words.task.partOf}{" "}
-            <a href={props.taskHref(parent)}>
-              #{parent.number} {parent.title}
-            </a>
-          </p>
-        )}
-        <h1 className="sc-task-title">
-          <span className="sc-card-number">#{task.number}</span> {task.title}
-        </h1>
-        <div className="sc-task-badges">
-          <StateBadge state={task.state} />
-          {task.archivedAt !== null && <Badge tone="neutral">{words.task.archived}</Badge>}
-          {task.category !== null && <CategoryBadge category={task.category} />}
-          <PriorityBadge priority={task.priority} />
-          {task.dueOn !== null && (
-            <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+        <div className="sc-task-heading">
+          {parent !== undefined && (
+            <p className="sc-task-parent">
+              {words.task.partOf}{" "}
+              <a href={props.taskHref(parent)}>
+                #{parent.number} {parent.title}
+              </a>
+            </p>
           )}
+          <h1 className="sc-task-title">
+            <span className="sc-card-number">#{task.number}</span> {task.title}
+          </h1>
+          <div className="sc-task-badges">
+            <StateBadge state={task.state} />
+            {task.archivedAt !== null && <Badge tone="neutral">{words.task.archived}</Badge>}
+            {task.category !== null && <CategoryBadge category={task.category} />}
+            <PriorityBadge priority={task.priority} />
+            {task.dueOn !== null && (
+              <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+            )}
+          </div>
         </div>
+        {props.formHref !== undefined && (
+          <div className="sc-task-actions">
+            <a className="sc-button sc-button-secondary" href={props.formHref("edit")}>
+              {words.common.edit}
+            </a>
+            <a className="sc-button sc-button-secondary" href={props.formHref("ask")}>
+              {words.task.raiseDecision}
+            </a>
+            {props.onArchive !== undefined && task.archivedAt === null && (
+              <Button
+                variant="secondary"
+                disabled={props.busy === true}
+                onClick={() => props.onArchive?.(task)}
+              >
+                {words.task.archive}
+              </Button>
+            )}
+            {props.onRestore !== undefined && task.archivedAt !== null && (
+              <Button
+                variant="secondary"
+                disabled={props.busy === true}
+                onClick={() => props.onRestore?.(task)}
+              >
+                {words.task.restore}
+              </Button>
+            )}
+          </div>
+        )}
       </header>
       <div className="sc-task-body">
         <div className="sc-task-main">
@@ -193,7 +223,6 @@ export function TaskView(props: TaskViewProps) {
             <section className="sc-task-section" aria-label={words.task.raiseDecision}>
               <h2 className="sc-section-title">{words.task.raiseDecision}</h2>
               <DecisionForm
-                tasks={props.tasks}
                 taskId={task.id}
                 busy={props.busy}
                 onSubmit={props.onRaiseDecision}
@@ -360,34 +389,6 @@ export function TaskView(props: TaskViewProps) {
               </dd>
             </div>
           </dl>
-          {props.formHref !== undefined && (
-            <div className="sc-task-actions">
-              <a className="sc-button sc-button-secondary" href={props.formHref("edit")}>
-                {words.common.edit}
-              </a>
-              <a className="sc-button sc-button-secondary" href={props.formHref("ask")}>
-                {words.task.raiseDecision}
-              </a>
-              {props.onArchive !== undefined && task.archivedAt === null && (
-                <Button
-                  variant="secondary"
-                  disabled={props.busy === true}
-                  onClick={() => props.onArchive?.(task)}
-                >
-                  {words.task.archive}
-                </Button>
-              )}
-              {props.onRestore !== undefined && task.archivedAt !== null && (
-                <Button
-                  variant="secondary"
-                  disabled={props.busy === true}
-                  onClick={() => props.onRestore?.(task)}
-                >
-                  {words.task.restore}
-                </Button>
-              )}
-            </div>
-          )}
         </aside>
       </div>
     </div>