@skillcdn/console 0.1.14 → 0.1.16

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

@@ -12,7 +12,11 @@ import { PersonChip, Time } from "./ui.js";
 // 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. */
@@ -80,33 +84,35 @@ export function WorkList(props: WorkListProps) {
               />
             </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>
+        {decisions !== undefined && (
+          <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>
   );