@skillcdn/console 0.1.10 → 0.1.12

package/src/components/projects.tsx

@@ -1,13 +1,20 @@
-import { type FormEvent, type ReactNode, useState } from "react";
+import { type FormEvent, type ReactNode, useEffect, useMemo, useState } from "react";
 import {
+  COLOR_NAMES,
+  type ColorName,
   MAX_PROJECT_DESCRIPTION_LENGTH,
   MAX_PROJECT_KEY_LENGTH,
   MAX_PROJECT_NAME_LENGTH,
+  MAX_PROJECT_SYMBOL_LENGTH,
   MAX_SKILLS_ADDRESS_LENGTH,
+  PROJECT_ICON_TYPES,
   PROJECT_ROLES,
   PROJECT_VISIBILITIES,
   type ProjectRole,
   type ProjectVisibility,
+  projectColorOf,
+  projectIconPath,
+  projectSymbolOf,
   type RestMember,
   type RestMemberInput,
   type RestPerson,
@@ -16,7 +23,44 @@ import {
   type RestProjectPatch,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Badge, Button, PersonChip, Time } from "./ui.js";
+import { Badge, Button, cx, PersonChip, personName, Time } from "./ui.js";
+
+/** A project's mark: its symbol on its colour, so that projects tell apart at a glance. */
+export function ProjectMark(props: {
+  readonly project: {
+    readonly key: string;
+    readonly name: string;
+    readonly color: ColorName | null;
+    readonly symbol: string | null;
+    /** The project's own image, when it has one; the symbol on the colour otherwise. */
+    readonly icon?: { readonly sha256: string } | null | undefined;
+  };
+  readonly size?: "sm" | "md" | "lg";
+  /** Where the image is read from; the console's own path for it when left out. */
+  readonly iconSrc?: string | undefined;
+}) {
+  const size = props.size ?? "md";
+  const icon = props.project.icon ?? null;
+  const src =
+    props.iconSrc ?? (icon === null ? undefined : projectIconPath(props.project.key, icon));
+  return (
+    <span
+      className={cx(
+        "sc-mark",
+        `sc-mark-${size}`,
+        `sc-category-${projectColorOf(props.project)}`,
+        src !== undefined && "sc-mark-pictured",
+      )}
+      aria-hidden="true"
+    >
+      {src === undefined ? (
+        projectSymbolOf(props.project)
+      ) : (
+        <img className="sc-mark-image" src={src} alt="" />
+      )}
+    </span>
+  );
+}
 
 // The projects of the workspace (ADR-0008): the list a person may see, the way to make one,
 // a project's settings for its owners, and those listed in it. Each takes its data as props
@@ -60,6 +104,7 @@ export function ProjectList(props: ProjectListProps) {
       {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)}
@@ -79,14 +124,11 @@ export function ProjectList(props: ProjectListProps) {
           {project.description.length > 0 && (
             <p className="sc-project-description">{project.description}</p>
           )}
-          <p className="sc-project-meta">
-            {project.openDecisions > 0 && (
+          {project.openDecisions > 0 && (
+            <p className="sc-project-meta">
               <Badge tone="warning">{words.decisionsWaiting(project.openDecisions)}</Badge>
-            )}
-            {project.openRuns > 0 && (
-              <Badge tone="accent">{words.agentsAtWork(project.openRuns)}</Badge>
-            )}
-          </p>
+            </p>
+          )}
         </li>
       ))}
     </ul>
@@ -98,7 +140,11 @@ export interface ProjectFormProps {
   readonly project?: RestProject | undefined;
   readonly busy?: boolean | undefined;
   readonly error?: string | undefined;
-  readonly onSubmit: (input: RestProjectInput | RestProjectPatch) => void;
+  /**
+   * Called with the settings as they are to be, and the image for the mark: a file chosen,
+   * `null` to take the image away, or nothing to keep what the project has.
+   */
+  readonly onSubmit: (input: RestProjectInput | RestProjectPatch, icon?: File | null) => void;
   readonly onCancel?: (() => void) | undefined;
 }
 
@@ -121,6 +167,31 @@ export function ProjectForm(props: ProjectFormProps) {
   const [description, setDescription] = useState(project?.description ?? "");
   const [visibility, setVisibility] = useState<ProjectVisibility>(project?.visibility ?? "private");
   const [skillsAddress, setSkillsAddress] = useState(project?.skillsAddress ?? "");
+  const [color, setColor] = useState<ColorName | "">(project?.color ?? "");
+  const [symbol, setSymbol] = useState(project?.symbol ?? "");
+  /** The image for the mark: a file chosen, `null` for none any more, nothing to keep the project's. */
+  const [icon, setIcon] = useState<File | null | undefined>(undefined);
+  const chosenSrc = useMemo(
+    () => (icon instanceof File ? URL.createObjectURL(icon) : undefined),
+    [icon],
+  );
+  useEffect(
+    () => () => {
+      if (chosenSrc !== undefined) {
+        URL.revokeObjectURL(chosenSrc);
+      }
+    },
+    [chosenSrc],
+  );
+  const kept = icon === undefined ? (project?.icon ?? null) : null;
+  /** The mark as it will be, from what is typed and chosen so far. */
+  const preview = {
+    key: key.trim() === "" ? keyOf(name) : key.trim(),
+    name: name.trim() === "" ? "?" : name.trim(),
+    color: color === "" ? null : color,
+    symbol: symbol.trim() === "" ? null : symbol.trim(),
+    icon: icon instanceof File ? { sha256: "chosen" } : kept,
+  };
 
   const submit = (event: FormEvent) => {
     event.preventDefault();
@@ -129,9 +200,12 @@ export function ProjectForm(props: ProjectFormProps) {
       description: description.trim(),
       visibility,
       skillsAddress: skillsAddress.trim() === "" ? null : skillsAddress.trim(),
+      color: preview.color,
+      symbol: preview.symbol,
     };
     props.onSubmit(
       project === undefined ? { key: key.trim(), ...settings, name: name.trim() } : settings,
+      icon,
     );
   };
 
@@ -207,6 +281,50 @@ export function ProjectForm(props: ProjectFormProps) {
           />
         </label>
       </div>
+      <div className="sc-field-row sc-mark-row">
+        <ProjectMark project={preview} size="lg" iconSrc={chosenSrc} />
+        <label className="sc-field">
+          <span className="sc-field-label">{form.symbol}</span>
+          <input
+            className="sc-input"
+            value={symbol}
+            maxLength={MAX_PROJECT_SYMBOL_LENGTH}
+            pattern="\S*"
+            placeholder={projectSymbolOf({ name: preview.name, symbol: null })}
+            onChange={(event) => setSymbol(event.target.value)}
+          />
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.color}</span>
+          <select
+            className="sc-input"
+            value={color}
+            onChange={(event) => setColor(event.target.value as ColorName | "")}
+          >
+            <option value="">{form.colorAuto}</option>
+            {COLOR_NAMES.map((candidate) => (
+              <option key={candidate} value={candidate}>
+                {words.vocabulary.categoryColor[candidate]}
+              </option>
+            ))}
+          </select>
+        </label>
+        <label className="sc-field">
+          <span className="sc-field-label">{form.image}</span>
+          <input
+            key={icon === null ? "none" : "some"}
+            className="sc-input sc-input-file"
+            type="file"
+            accept={PROJECT_ICON_TYPES.join(",")}
+            onChange={(event) => setIcon(event.target.files?.[0] ?? undefined)}
+          />
+        </label>
+        {(icon instanceof File || kept !== null) && (
+          <Button variant="ghost" size="sm" onClick={() => setIcon(null)}>
+            {form.imageRemove}
+          </Button>
+        )}
+      </div>
       {props.error !== undefined && (
         <p className="sc-form-error" role="alert">
           {props.error}
@@ -274,7 +392,9 @@ export function MemberList(props: MemberListProps) {
                 <ProjectRoleBadge role={member.role} />
               ) : (
                 <label className="sc-field sc-field-inline">
-                  <span className="sc-visually-hidden">{members.roleOf(member.person.login)}</span>
+                  <span className="sc-visually-hidden">
+                    {members.roleOf(personName(member.person))}
+                  </span>
                   <select
                     className="sc-input"
                     value={member.role}
@@ -328,7 +448,7 @@ export function MemberList(props: MemberListProps) {
                 <option value="">{members.chooseSomeone}</option>
                 {candidates.map((person) => (
                   <option key={person.id} value={person.id}>
-                    {person.login}
+                    {personName(person)}
                   </option>
                 ))}
               </select>

package/src/components/runs.tsx

@@ -2,14 +2,14 @@ import type { ReactNode } from "react";
 import type { RestArtifact, RestRun, RunStatus } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { Markdown } from "./markdown.js";
-import { Badge, Button, formatBytes, PersonChip, Time } from "./ui.js";
+import { Badge, Button, formatBytes, PersonChip, personName, Time } from "./ui.js";
 
 // A run: one agent at work on one task for one person, with what it reported, what it handed
 // in, and what it waits for. Takes its data as props and nothing from the network.
 
 /** The words of a run's status in English: the default pack's. */
 export const RUN_STATUS_LABELS: Readonly<Record<RunStatus, string>> = {
-  running: "At work",
+  running: "Open",
   waiting: "Waiting for a decision",
   finished: "Finished",
   failed: "Failed",
@@ -49,7 +49,7 @@ export function RunCard(props: RunCardProps) {
   const { run } = props;
   const open = run.status === "running" || run.status === "waiting";
   return (
-    <article className="sc-run" aria-label={words.label(run.agent, run.person.login)}>
+    <article className="sc-run" aria-label={words.label(run.agent, personName(run.person))}>
       <header className="sc-run-header">
         <span className="sc-run-agent">{run.agent}</span>
         <RunStatusBadge status={run.status} />
@@ -61,6 +61,12 @@ export function RunCard(props: RunCardProps) {
               {words.until} <Time iso={run.endedAt} />
             </>
           )}
+          {open && (
+            <>
+              {" "}
+              · {words.lastHeard} <Time iso={run.lastHeardAt} />
+            </>
+          )}
         </span>
         {open && props.onAbandon !== undefined && (
           <Button

package/src/components/shell.tsx

@@ -1,7 +1,7 @@
 import { type ReactNode, useEffect, useRef } from "react";
 import type { RestPerson } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Avatar, cx } from "./ui.js";
+import { Avatar, cx, personName } from "./ui.js";
 
 // The frame every page sits in (ADR-0010): a header that names the workspace and the project the
 // page is on, with the person's menu at its end; a row of tabs below it with the pages of the
@@ -34,8 +34,10 @@ export interface ShellProps {
   readonly title: string;
   /** The marks to show beside the name; none shows the name alone. */
   readonly brand?: Brand | undefined;
-  /** The project the page is on, named after the workspace, or nothing on the workspace's own pages. */
-  readonly project?: { readonly name: string; readonly href: string } | undefined;
+  /** The project the page is on, named after the workspace, with its mark when the page has it, or nothing on the workspace's own pages. */
+  readonly project?:
+    | { readonly name: string; readonly href: string; readonly mark?: ReactNode }
+    | undefined;
   /** The pages of the level the person is on, as tabs: the project's, or the workspace's. */
   readonly nav: readonly NavItem[];
   /** The workspace's pages, reached from anywhere through the person's menu. */
@@ -107,9 +109,9 @@ function PersonMenu(props: {
   const { person } = props;
   return (
     <details className="sc-menu" ref={details}>
-      <summary className="sc-menu-summary" aria-label={words.shell.menu(person.login)}>
+      <summary className="sc-menu-summary" aria-label={words.shell.menu(personName(person))}>
         <Avatar person={person} size="sm" />
-        <span className="sc-person-login">{person.login}</span>
+        <span className="sc-person-login">{personName(person)}</span>
         <svg className="sc-menu-caret" viewBox="0 0 16 16" aria-hidden="true">
           <path
             d="M4 6l4 4 4-4"
@@ -228,6 +230,7 @@ export function Shell(props: ShellProps) {
                 href={props.project.href}
                 onClick={follow(props.project.href)}
               >
+                {props.project.mark}
                 {props.project.name}
               </a>
             </span>

package/src/components/task-form.tsx

@@ -14,7 +14,7 @@ import {
   TASK_STATES,
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
-import { Button } from "./ui.js";
+import { Button, personName } 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
@@ -151,7 +151,7 @@ export function TaskForm(props: TaskFormProps) {
             <option value="">{words.common.nobody}</option>
             {props.people.map((person) => (
               <option key={person.id} value={person.id}>
-                {person.login}
+                {personName(person)}
               </option>
             ))}
           </select>

package/src/components/task-list.tsx

@@ -1,11 +1,13 @@
 import type { ReactNode } from "react";
 import type { RestTask } from "../api.js";
 import { useWords } from "../i18n/index.js";
+import { ShowMore, usePaged } from "./paged.js";
 import { Avatar, Badge, CategoryBadge, DueBadge, StateBadge } from "./ui.js";
 
 // A list of tasks as rows, where the board's columns are not the point: the calendar's late
 // and unscheduled tasks, a goal's tasks, a person's own work. Each row says what a card says,
-// in one line. Takes its data as props and nothing from the network.
+// in one line; a long list shows a page at a time. Takes its data as props and nothing from
+// the network.
 
 export interface TaskListProps {
   readonly tasks: readonly RestTask[];
@@ -13,7 +15,7 @@ export interface TaskListProps {
   /** Whether each row says the task's state: where the rows are not grouped by it. */
   readonly showState?: boolean | undefined;
   /** What the row says the task belongs to, where tasks of several projects are listed together. */
-  readonly projectOf?: ((task: RestTask) => string | undefined) | undefined;
+  readonly projectOf?: ((task: RestTask) => ReactNode) | undefined;
   /** The day to count due days from; the browser's today when left out. */
   readonly today?: string | undefined;
   readonly label?: string | undefined;
@@ -22,40 +24,41 @@ export interface TaskListProps {
 
 export function TaskList(props: TaskListProps) {
   const words = useWords();
+  const { shown, rest, more } = usePaged(props.tasks);
   if (props.tasks.length === 0) {
     return <>{props.empty ?? null}</>;
   }
   return (
-    <ul className="sc-task-rows" aria-label={props.label}>
-      {props.tasks.map((task) => {
-        const project = props.projectOf?.(task);
-        return (
-          <li key={task.id} className="sc-task-row">
-            <a className="sc-task-row-title" href={props.taskHref(task)}>
-              <span className="sc-card-number">#{task.number}</span> {task.title}
-            </a>
-            {project !== undefined && <span className="sc-task-row-project">{project}</span>}
-            <span className="sc-task-row-meta">
-              {task.category !== null && <CategoryBadge category={task.category} />}
-              {props.showState === true && <StateBadge state={task.state} />}
-              {task.openDecisions > 0 && (
-                <Badge tone="warning" title={words.board.decisionsTitle}>
-                  {words.board.decisions(task.openDecisions)}
-                </Badge>
+    <>
+      <ul className="sc-task-rows" aria-label={props.label}>
+        {shown.map((task) => {
+          const project = props.projectOf?.(task);
+          return (
+            <li key={task.id} className="sc-task-row">
+              <a className="sc-task-row-title" href={props.taskHref(task)}>
+                <span className="sc-card-number">#{task.number}</span> {task.title}
+              </a>
+              {project !== undefined && project !== null && (
+                <span className="sc-task-row-project">{project}</span>
               )}
-              {task.openRuns > 0 && (
-                <Badge tone="accent" title={words.board.agentAtWorkTitle}>
-                  {words.board.agentAtWork}
-                </Badge>
-              )}
-              {task.dueOn !== null && (
-                <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
-              )}
-              {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
-            </span>
-          </li>
-        );
-      })}
-    </ul>
+              <span className="sc-task-row-meta">
+                {task.category !== null && <CategoryBadge category={task.category} />}
+                {props.showState === true && <StateBadge state={task.state} />}
+                {task.openDecisions > 0 && (
+                  <Badge tone="warning" title={words.board.decisionsTitle}>
+                    {words.board.decisions(task.openDecisions)}
+                  </Badge>
+                )}
+                {task.dueOn !== null && (
+                  <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+                )}
+                {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
+              </span>
+            </li>
+          );
+        })}
+      </ul>
+      <ShowMore rest={rest} onMore={more} />
+    </>
   );
 }

package/src/components/task-view.tsx

@@ -177,7 +177,7 @@ export function TaskView(props: TaskViewProps) {
           )}
           {runs.length > 0 && (
             <section className="sc-task-section" aria-label={words.task.runs}>
-              <h2 className="sc-section-title">{words.task.agentsAtWork}</h2>
+              <h2 className="sc-section-title">{words.task.runs}</h2>
               <RunList
                 runs={runs}
                 decisionHref={props.decisionHref}

package/src/components/ui.tsx

@@ -74,13 +74,22 @@ export function Callout(props: {
   );
 }
 
+/** What a person is called on the pages: the name the host gives, or the login where there is none. */
+export function personName(person: {
+  readonly login: string;
+  readonly name: string | null;
+}): string {
+  const name = person.name?.trim() ?? "";
+  return name === "" ? person.login : name;
+}
+
 /**
  * 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 login instead.
+ * 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" }) {
   const size = props.size ?? "md";
-  const initial = props.person.login.slice(0, 1).toUpperCase();
+  const initial = personName(props.person).slice(0, 1).toUpperCase();
   if (props.person.avatar === null) {
     return (
       <span
@@ -103,12 +112,12 @@ export function Avatar(props: { readonly person: RestPerson; readonly size?: "sm
   );
 }
 
-/** A person, as a picture and a name, wherever one is named. */
+/** 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 (
-    <span className="sc-person" title={props.person.name ?? props.person.login}>
+    <span className="sc-person" title={props.person.login}>
       <Avatar person={props.person} size={props.size ?? "sm"} />
-      <span className="sc-person-login">{props.person.login}</span>
+      <span className="sc-person-login">{personName(props.person)}</span>
     </span>
   );
 }

package/src/components/work.tsx

@@ -1,6 +1,7 @@
 import type { RestTask, RestWork } from "../api.js";
 import { addDays, today as todayOf } from "../dates.js";
 import { useWords } from "../i18n/index.js";
+import { ProjectMark } from "./projects.js";
 import { TaskList } from "./task-list.js";
 import { PersonChip, Time } from "./ui.js";
 
@@ -24,7 +25,14 @@ 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 nameOf = (task: RestTask) => projectOf.get(task.id)?.name;
+  const nameOf = (task: RestTask) => {
+    const project = projectOf.get(task.id);
+    return project === undefined ? undefined : (
+      <>
+        <ProjectMark project={project} size="sm" /> {project.name}
+      </>
+    );
+  };
   const groups: { readonly title: string; readonly tasks: RestTask[] }[] = [
     { title: work.overdue, tasks: [] },
     { title: work.thisWeek, tasks: [] },
@@ -69,7 +77,9 @@ export function WorkList(props: WorkListProps) {
                 >
                   {decision.question}
                 </a>
-                <span className="sc-task-row-project">{work.inProject(project.name)}</span>
+                <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>