@skillcdn/console 0.4.3 → 0.4.5

package/src/components/projects.tsx

@@ -23,6 +23,8 @@ import {
   type RestProjectPatch,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { Picker } from "./picker.js";
+import { peopleSearch } from "./searches.js";
 import { Badge, Button, cx, PersonChip, personName, Time } from "./ui.js";
 
 /**
@@ -99,61 +101,6 @@ export function ProjectRoleBadge(props: { readonly role: ProjectRole }) {
   );
 }
 
-export interface ProjectListProps {
-  readonly projects: readonly RestProject[];
-  /** The link to a project's board, as the composition routes it. */
-  readonly projectHref: (project: RestProject) => string;
-  readonly onOpen: (project: RestProject) => void;
-  readonly empty?: ReactNode;
-}
-
-export function ProjectList(props: ProjectListProps) {
-  const words = useWords().projects;
-  if (props.projects.length === 0) {
-    return <>{props.empty ?? null}</>;
-  }
-  return (
-    <ul className="sc-projects" aria-label={words.list}>
-      {props.projects.map((project) => (
-        <li key={project.id} className="sc-project">
-          <div className="sc-project-head">
-            <ProjectMark project={project} size="md" />
-            <a
-              className="sc-project-name"
-              href={props.projectHref(project)}
-              onClick={(event) => {
-                if (event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey) {
-                  event.preventDefault();
-                  props.onOpen(project);
-                }
-              }}
-            >
-              {project.name}
-            </a>
-            <code className="sc-project-key">{project.key}</code>
-            <ProjectRoleBadge role={project.role} />
-            {project.visibility === "private" ? (
-              <Badge tone="neutral">{words.private}</Badge>
-            ) : (
-              <Badge tone="warning">{words.public}</Badge>
-            )}
-          </div>
-          {project.description.length > 0 && (
-            <p className="sc-project-description">{project.description}</p>
-          )}
-          {project.openDecisions > 0 && (
-            <p className="sc-project-meta">
-              <Badge tone="warning" kind="count">
-                {words.decisionsWaiting(project.openDecisions)}
-              </Badge>
-            </p>
-          )}
-        </li>
-      ))}
-    </ul>
-  );
-}
-
 export interface ProjectFormProps {
   /** The project to change; left out, the form makes a new one, with a key. */
   readonly project?: RestProject | undefined;
@@ -517,21 +464,19 @@ export function MemberList(props: MemberListProps) {
           }}
         >
           <div className="sc-field-row">
-            <label className="sc-field">
+            <div className="sc-field">
               <span className="sc-field-label">{members.person}</span>
-              <select
-                className="sc-input"
-                value={personId}
-                onChange={(event) => setPersonId(event.target.value)}
-              >
-                <option value="">{members.chooseSomeone}</option>
-                {candidates.map((person) => (
-                  <option key={person.id} value={person.id}>
-                    {personName(person)}
-                  </option>
-                ))}
-              </select>
-            </label>
+              <Picker
+                value={candidates.find((person) => person.id === personId)}
+                search={peopleSearch(candidates)}
+                keyOf={(person) => person.id}
+                render={(person) => <PersonChip person={person} size="sm" />}
+                label={members.person}
+                placeholder={members.chooseSomeone}
+                disabled={props.busy === true}
+                onChange={(person) => setPersonId(person?.id ?? "")}
+              />
+            </div>
             <label className="sc-field">
               <span className="sc-field-label">{members.as}</span>
               <select

package/src/components/searches.ts

@@ -0,0 +1,47 @@
+import type { RestGoal, RestPerson, RestProject } from "../api.js";
+import type { PickerSearch } from "./picker.js";
+import { personName } from "./ui.js";
+
+// What a picker asks for, answered from a listing the page already holds (ADR-0037): the people,
+// the projects or the goals the page was given, found by the words typed, a page at a time, so
+// that choosing one among many is the same wherever one is chosen, and the board's filters, a
+// setting, a manager or a worker never offer a list too long to read.
+
+/** A page of `items` found by the words typed, as a picker searches; everything while the words are empty. */
+export function listSearch<T>(
+  items: readonly T[],
+  matches: (item: T, words: string) => boolean,
+): PickerSearch<T> {
+  return async (query, page) => {
+    const words = query.trim().toLowerCase();
+    const found = words.length === 0 ? items : items.filter((item) => matches(item, words));
+    return {
+      items: found.slice(page.offset, page.offset + page.limit),
+      more: found.length > page.offset + page.limit,
+    };
+  };
+}
+
+/** The people given, found by name or login. */
+export function peopleSearch(people: readonly RestPerson[]): PickerSearch<RestPerson> {
+  return listSearch(
+    people,
+    (person, words) =>
+      personName(person).toLowerCase().includes(words) ||
+      person.login.toLowerCase().includes(words),
+  );
+}
+
+/** The projects given, found by name or key. */
+export function projectsSearch(projects: readonly RestProject[]): PickerSearch<RestProject> {
+  return listSearch(
+    projects,
+    (project, words) =>
+      project.name.toLowerCase().includes(words) || project.key.toLowerCase().includes(words),
+  );
+}
+
+/** The goals given, found by title. */
+export function goalsSearch(goals: readonly RestGoal[]): PickerSearch<RestGoal> {
+  return listSearch(goals, (goal, words) => goal.title.toLowerCase().includes(words));
+}

package/src/components/task-form.tsx

@@ -16,7 +16,8 @@ import {
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Picker, type PickerSearch } from "./picker.js";
-import { Button, GoalStateBadge, PersonChip, personName, StateBadge } from "./ui.js";
+import { peopleSearch } from "./searches.js";
+import { Button, Chip, 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
@@ -222,37 +223,31 @@ export function TaskForm(props: TaskFormProps) {
         <legend className="sc-field-label">{form.workers}</legend>
         <div className="sc-chips">
           {chosenWorkers.map((person) => (
-            <span key={person.id} className="sc-chip">
+            <Chip
+              key={person.id}
+              onRemove={() => setWorkerIds(workerIds.filter((id) => id !== person.id))}
+              removeLabel={`${words.common.remove}: ${personName(person)}`}
+            >
               <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>
+            </Chip>
           ))}
-          {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]);
+          {otherPeople.length > 0 && workerIds.length < MAX_WORKERS ? (
+            <Picker
+              className="sc-picker-add"
+              value={undefined}
+              search={peopleSearch(otherPeople)}
+              keyOf={(person) => person.id}
+              render={(person) => <PersonChip person={person} size="sm" />}
+              label={form.addWorker}
+              placeholder={form.addWorker}
+              onChange={(person) => {
+                if (person !== undefined) {
+                  setWorkerIds([...workerIds, person.id]);
                 }
               }}
-            >
-              <option value="">{form.addWorker}</option>
-              {otherPeople.map((person) => (
-                <option key={person.id} value={person.id}>
-                  {personName(person)}
-                </option>
-              ))}
-            </select>
+            />
+          ) : (
+            chosenWorkers.length === 0 && <span className="sc-muted">{words.common.nobody}</span>
           )}
         </div>
       </fieldset>

package/src/components/task-view.tsx

@@ -1,3 +1,4 @@
+import { agentLabel } from "../agent-name.js";
 import type {
   RestAnswerInput,
   RestCategory,
@@ -326,6 +327,12 @@ export function TaskView(props: TaskViewProps) {
                 <PersonChip person={task.owner} />
               </dd>
             </div>
+            {task.agent != null && (
+              <div>
+                <dt>{words.task.writtenThrough}</dt>
+                <dd>{agentLabel(task.agent)}</dd>
+              </div>
+            )}
             <div>
               <dt>{words.task.workers}</dt>
               <dd>

package/src/components/ui.tsx

@@ -108,7 +108,10 @@ export function Avatar(props: {
   const remote = useRemotePictureSrc();
   const size = props.size ?? "md";
   const initial = personName(props.person).slice(0, 1).toUpperCase();
-  if (props.person.avatar === null) {
+  const src = props.person.avatar === null ? undefined : remote(props.person.avatar);
+  // A picture that would not load gives way to the initial, and never to a broken image.
+  const [failed, setFailed] = useState<string | undefined>(undefined);
+  if (src === undefined || src === failed) {
     return (
       <span
         className={cx("sc-avatar", "sc-avatar-initial", `sc-avatar-${size}`)}
@@ -121,11 +124,12 @@ export function Avatar(props: {
   return (
     <img
       className={cx("sc-avatar", `sc-avatar-${size}`)}
-      src={remote(props.person.avatar)}
+      src={src}
       alt=""
       loading="lazy"
       decoding="async"
       referrerPolicy="no-referrer"
+      onError={() => setFailed(src)}
     />
   );
 }
@@ -160,6 +164,42 @@ export function PersonChip(props: { readonly person: RestPerson; readonly size?:
   );
 }
 
+/**
+ * A thing named among others in a row (`sc-chips`): a person (a `PersonChip` inside), a team, an
+ * item of a list, a holder of a role. Given `onRemove`, it carries the way to take it out, named
+ * for a screen reader by `removeLabel`; left out, the chip is read, not changed. Every row of
+ * things a person adds to and takes from is made of these, so that they read alike everywhere.
+ */
+export function Chip(props: {
+  readonly children: ReactNode;
+  readonly onRemove?: (() => void) | undefined;
+  /** What the way out says to a screen reader: the word for removing, and what the chip names. */
+  readonly removeLabel?: string | undefined;
+  readonly disabled?: boolean | undefined;
+  readonly title?: string | undefined;
+  /** A class of the chip's own beside `sc-chip`. */
+  readonly className?: string | undefined;
+}) {
+  const words = useWords().common;
+  return (
+    <span className={cx("sc-chip", props.className)} title={props.title}>
+      <span className="sc-chip-label">{props.children}</span>
+      {props.onRemove !== undefined && (
+        <button
+          type="button"
+          className="sc-chip-remove"
+          aria-label={props.removeLabel ?? words.remove}
+          title={props.removeLabel ?? words.remove}
+          disabled={props.disabled}
+          onClick={props.onRemove}
+        >
+          <span aria-hidden="true">&times;</span>
+        </button>
+      )}
+    </span>
+  );
+}
+
 /** How many of a task's workers are shown as pictures before the rest are a count. */
 const WORKERS_SHOWN = 3;
 

package/src/connect-page.tsx

@@ -10,7 +10,7 @@ import { Callout, Spinner } from "./components/ui.js";
 import type { ConsoleData } from "./data.js";
 import { useWords } from "./i18n/index.js";
 import { connectHref, type Navigation, PATHS } from "./router.js";
-import { useAction } from "./use-action.js";
+import { errorWords, useAction } from "./use-action.js";
 
 // The page where a person connects their agent (ADR-0011): the code typed when the address
 // does not carry one, what asks under it, the approval, and what came of it. Part of the
@@ -24,7 +24,8 @@ export interface ConnectPageProps {
 }
 
 export function ConnectPage(props: ConnectPageProps) {
-  const words = useWords().connect;
+  const pack = useWords();
+  const words = pack.connect;
   const { data, navigation } = props;
   const code = props.code === undefined ? undefined : normalizeConnectCode(props.code);
   const [request, setRequest] = useState<RestConnectRequest | undefined>(undefined);
@@ -55,13 +56,11 @@ export function ConnectPage(props: ConnectPageProps) {
         setProblem(
           failure instanceof ApiError && failure.code === "connect.not_found"
             ? words.noSuchCode
-            : failure instanceof ApiError
-              ? failure.message
-              : words.couldNotAsk,
+            : errorWords(failure, words.couldNotAsk, pack),
         );
       });
     return () => controller.abort();
-  }, [code, connectRequest, words]);
+  }, [code, connectRequest, pack, words]);
 
   const head = (
     <div className="sc-page-head">