@skillcdn/console 0.1.10 → 0.1.11

package/src/components/event-feed.tsx

@@ -2,6 +2,7 @@ import type { ReactNode } from "react";
 import type { RestEvent } from "../api.js";
 import { en, type Messages } from "../i18n/en.js";
 import { useWords } from "../i18n/index.js";
+import { ShowMore, usePaged } from "./paged.js";
 import { PersonChip, Time } from "./ui.js";
 
 // The feed: one line per event, newest first, as a sentence a person reads at a glance: who,
@@ -79,6 +80,8 @@ export function describeEvent(event: RestEvent, words: Messages = en): string {
       return feed.event.runReported(task, data.excerpt);
     case "run.handed_in":
       return feed.event.runHandedIn(data.label ?? feed.something, task);
+    case "run.taken_over":
+      return feed.event.runTakenOver(task, data.agent ?? feed.someone);
     case "run.ended":
       return data.status === "finished"
         ? feed.event.runFinished(task)
@@ -106,36 +109,40 @@ export interface EventFeedProps {
 
 export function EventFeed(props: EventFeedProps) {
   const words = useWords();
+  const newestFirst = [...props.events].reverse();
+  const { shown, rest, more } = usePaged(newestFirst);
   if (props.events.length === 0) {
     return <div className="sc-feed">{props.empty ?? null}</div>;
   }
-  const newestFirst = [...props.events].reverse();
   return (
-    <ol className="sc-feed" aria-label={words.feed.list}>
-      {newestFirst.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={words.feed.asTitle}>
-                  {words.feed.as(event.agent)}
-                </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" 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={words.feed.asTitle}>
+                    {words.feed.as(event.agent)}
+                  </span>
+                )}
+              </span>
+              <span className="sc-feed-words">
+                {href === undefined ? said : <a href={href}>{said}</a>}
+              </span>
+              <Time iso={event.createdAt} />
+            </li>
+          );
+        })}
+      </ol>
+      <ShowMore rest={rest} onMore={more} />
+    </>
   );
 }

package/src/components/paged.tsx

@@ -0,0 +1,39 @@
+import { useState } from "react";
+import { useWords } from "../i18n/index.js";
+import { Button } from "./ui.js";
+
+// A long list shown a page at a time, from what the page already holds: the record of the
+// decisions, the feed, the tasks with no day. The next page is a click away and nothing is
+// asked of the server; the API's own pages (`limit`, `offset`) are for the command and scripts.
+
+/** How many items a list shows before it asks to be told to show more. */
+export const PAGE_SIZE = 50;
+
+/** The first `shown` items of a list, and the way to show the next page of it. */
+export function usePaged<T>(
+  items: readonly T[],
+  pageSize = PAGE_SIZE,
+): { readonly shown: readonly T[]; readonly rest: number; readonly more: () => void } {
+  const [pages, setPages] = useState(1);
+  const shown = items.slice(0, pages * pageSize);
+  return {
+    shown,
+    rest: items.length - shown.length,
+    more: () => setPages((current) => current + 1),
+  };
+}
+
+/** The button under a paged list, saying how many more there are; nothing when there are none. */
+export function ShowMore(props: { readonly rest: number; readonly onMore: () => void }) {
+  const words = useWords();
+  if (props.rest <= 0) {
+    return null;
+  }
+  return (
+    <div className="sc-show-more">
+      <Button variant="secondary" size="sm" onClick={props.onMore}>
+        {words.common.showMore(Math.min(props.rest, PAGE_SIZE), props.rest)}
+      </Button>
+    </div>
+  );
+}

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, 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}

package/src/components/runs.tsx

@@ -9,7 +9,7 @@ import { Badge, Button, formatBytes, PersonChip, Time } from "./ui.js";
 
 /** 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",
@@ -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

@@ -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. */
@@ -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-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/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>

package/src/console.tsx

@@ -3,6 +3,7 @@ import { createRoot, type Root } from "react-dom/client";
 import {
   type ConsoleClient,
   createClient,
+  type FileUpload,
   OPEN_TASK_STATES,
   type RestAnswerInput,
   type RestDecision,
@@ -34,6 +35,7 @@ import {
   ProjectForm,
   ProjectList,
   type ProjectListProps,
+  ProjectMark,
 } from "./components/projects.js";
 import {
   type Brand,
@@ -354,9 +356,12 @@ function ProjectsPage(props: {
         <section className="sc-panel sc-panel-form" aria-label={words.form.aria}>
           <ProjectForm
             busy={busy}
-            onSubmit={(input) =>
+            onSubmit={(input, icon) =>
               void act(async () => {
-                const made = await data.actions.createProject(input as RestProjectInput);
+                const made = await data.actions.createProject(
+                  input as RestProjectInput,
+                  icon instanceof File ? uploadOf(icon) : undefined,
+                );
                 navigation.replace(projectHref(made.key));
               })
             }
@@ -532,7 +537,6 @@ function ProjectPage(props: {
         )}
         <components.Board
           tasks={shown}
-          runs={data.runs}
           taskHref={href}
           onOpen={(task) => navigation.go(href(task))}
           onMove={onMove}
@@ -592,7 +596,9 @@ function ProjectPage(props: {
   if (route.name === "calendar") {
     const now = today();
     const month = route.month ?? monthOf(now);
-    const open = data.tasks.filter((task) => OPEN_TASK_STATES.includes(task.state));
+    const me = data.me?.person ?? undefined;
+    const shown = filterTasks(data.tasks, route.filter, me);
+    const open = shown.filter((task) => OPEN_TASK_STATES.includes(task.state));
     const overdue = open.filter((task) => task.dueOn !== null && task.dueOn < now).sort(byDue);
     const unscheduled = open.filter((task) => task.dueOn === null).sort(byDue);
     const calendar = words.calendar;
@@ -605,12 +611,25 @@ function ProjectPage(props: {
           </LinkButton>
         </div>
         <p className="sc-lead">{calendar.lead}</p>
+        {data.tasks.length > 0 && (
+          <BoardFilters
+            filter={route.filter}
+            categories={data.categories}
+            goals={data.goals}
+            people={data.people}
+            me={me}
+            shown={shown.length}
+            total={data.tasks.length}
+            onChange={(filter) => navigation.replace(calendarHref(key, route.month, filter))}
+          />
+        )}
         <components.Calendar
-          tasks={data.tasks}
+          tasks={shown}
           month={month}
           today={now}
+          categories={data.categories}
           taskHref={href}
-          monthHref={(wanted) => calendarHref(key, wanted)}
+          monthHref={(wanted) => calendarHref(key, wanted, route.filter)}
         />
         <div className="sc-calendar-below">
           <section className="sc-task-section" aria-label={calendar.overdue}>
@@ -643,7 +662,7 @@ function ProjectPage(props: {
             <h2 className="sc-section-title">{calendar.workload.title}</h2>
             <p className="sc-lead">{calendar.workload.lead}</p>
             <Workload
-              tasks={data.tasks}
+              tasks={shown}
               today={now}
               personHref={(person) =>
                 boardHref(key, person === undefined ? {} : { person: person.id })
@@ -950,8 +969,15 @@ function ProjectPage(props: {
           <ProjectForm
             project={project}
             busy={busy}
-            onSubmit={(input) =>
-              void act(() => data.actions.updateProject(input as RestProjectPatch))
+            onSubmit={(input, icon) =>
+              void act(async () => {
+                await data.actions.updateProject(input as RestProjectPatch);
+                if (icon === null) {
+                  await data.actions.removeProjectIcon();
+                } else if (icon !== undefined) {
+                  await data.actions.setProjectIcon(uploadOf(icon));
+                }
+              })
             }
           />
         </section>
@@ -961,6 +987,13 @@ function ProjectPage(props: {
   return <NothingHere />;
 }
 
+/** A file a person chose, as the client sends it: its name, its bytes and the type the browser says. */
+const uploadOf = (file: File): FileUpload => ({
+  name: file.name,
+  bytes: file,
+  ...(file.type === "" ? {} : { contentType: file.type }),
+});
+
 function NothingHere() {
   const words = useWords();
   return (
@@ -1324,16 +1357,12 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                 current: route.name === "agents" || route.name === "new-token",
               },
             ]),
-        // The categories are read by everyone and kept by an administrator; only they need the page.
-        ...(data.me.person.role === "admin" && !viaToken
-          ? [
-              {
-                href: PATHS.categories,
-                label: words.nav.categories,
-                current: route.name === "categories",
-              },
-            ]
-          : []),
+        // The categories are read by everyone, for what the colours mean, and kept by an administrator.
+        {
+          href: PATHS.categories,
+          label: words.nav.categories,
+          current: route.name === "categories",
+        },
       ];
       const nav: NavItem[] =
         projectKey === undefined
@@ -1454,7 +1483,12 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
           project={
             projectKey === undefined
               ? undefined
-              : { name: project?.name ?? projectKey, href: projectHref(projectKey) }
+              : {
+                  name: project?.name ?? projectKey,
+                  href: projectHref(projectKey),
+                  mark:
+                    project === undefined ? undefined : <ProjectMark project={project} size="sm" />,
+                }
           }
           nav={nav}
           menu={workspaceNav}