@skillcdn/console 0.1.13 → 0.1.15

package/src/components/tokens.tsx

@@ -6,7 +6,7 @@ import {
   type RestTokenInput,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Button, Callout, Time } from "./ui.js";
+import { Button, Callout, CopyButton, Time } from "./ui.js";
 
 // The tokens a person holds for their agents, scripts and consoles of their own, shown as the
 // agents that hold them: the list, the way to make one by hand, and the one just made, whose
@@ -180,16 +180,6 @@ export interface NewTokenProps {
 export function NewToken(props: NewTokenProps) {
   const words = useWords();
   const fresh = words.agents.fresh;
-  const [copied, setCopied] = useState(false);
-  const copy = () => {
-    if (typeof navigator === "undefined" || navigator.clipboard === undefined) {
-      return;
-    }
-    void navigator.clipboard.writeText(props.secret).then(
-      () => setCopied(true),
-      () => setCopied(false),
-    );
-  };
   return (
     <Callout
       tone="warning"
@@ -203,9 +193,7 @@ export function NewToken(props: NewTokenProps) {
       <p>{fresh.copyNow}</p>
       <p className="sc-secret">
         <code className="sc-secret-value">{props.secret}</code>
-        <Button size="sm" onClick={copy}>
-          {copied ? fresh.copied : fresh.copy}
-        </Button>
+        <CopyButton text={props.secret} size="sm" />
       </p>
       <p>
         {fresh.useIt}{" "}

package/src/components/ui.tsx

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import { type ButtonHTMLAttributes, type ReactNode, useState } from "react";
 import {
   type CategoryColor,
   type GoalState,
@@ -87,7 +87,10 @@ export function personName(person: {
  * A person's picture as the git host serves it: loaded lazily, without a referrer, and gone as
  * a whole when there is none or it cannot be loaded, leaving the initial of the name instead.
  */
-export function Avatar(props: { readonly person: RestPerson; readonly size?: "sm" | "md" | "lg" }) {
+export function Avatar(props: {
+  readonly person: RestPerson;
+  readonly size?: "xs" | "sm" | "md" | "lg";
+}) {
   const size = props.size ?? "md";
   const initial = personName(props.person).slice(0, 1).toUpperCase();
   if (props.person.avatar === null) {
@@ -112,6 +115,26 @@ export function Avatar(props: { readonly person: RestPerson; readonly size?: "sm
   );
 }
 
+/** Puts a text on the clipboard, where the browser offers one, and says so once it is there. */
+export function CopyButton(props: { readonly text: string; readonly size?: "md" | "sm" }) {
+  const words = useWords().common;
+  const [copied, setCopied] = useState(false);
+  const copy = () => {
+    if (typeof navigator === "undefined" || navigator.clipboard === undefined) {
+      return;
+    }
+    void navigator.clipboard.writeText(props.text).then(
+      () => setCopied(true),
+      () => setCopied(false),
+    );
+  };
+  return (
+    <Button size={props.size ?? "md"} onClick={copy}>
+      {copied ? words.copied : words.copy}
+    </Button>
+  );
+}
+
 /** A person, as a picture and their name, wherever one is named; the login is there on hover. */
 export function PersonChip(props: { readonly person: RestPerson; readonly size?: "sm" | "md" }) {
   return (

package/src/components/work.tsx

@@ -1,20 +1,30 @@
 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 tasks on the plate; and the decisions waiting on the person's own plate, left out on another's. */
+  readonly work: {
+    readonly tasks: RestWork["tasks"];
+    readonly decisions?: RestWork["decisions"] | undefined;
+  };
   /** 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 +35,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 +59,61 @@ 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}>
+      <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>
+          ))}
+        {decisions !== undefined && (
+          <section className="sc-task-section" aria-label={work.decisions}>
             <h2 className="sc-section-title">
-              {group.title} <span className="sc-column-count">{group.tasks.length}</span>
+              {work.decisions} <span className="sc-column-count">{decisions.length}</span>
             </h2>
-            <TaskList
-              tasks={group.tasks}
-              taskHref={hrefOf}
-              projectOf={nameOf}
-              showState
-              today={now}
-            />
+            {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>
-        ))}
-      <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>