@skillcdn/console 0.4.3 → 0.4.4

package/src/components/projects.tsx

@@ -99,61 +99,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;

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)}
     />
   );
 }

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">

package/src/console.tsx

@@ -22,6 +22,7 @@ import {
   type RestDecisionInput,
   type RestDecisionPatch,
   type RestEvent,
+  type RestMe,
   type RestMyDecisions,
   type RestPluginDetail,
   type RestProject,
@@ -47,18 +48,17 @@ import { DecisionForm } from "./components/decision-form.js";
 import { DecisionCard, DecisionList, type DecisionListProps } from "./components/decision-list.js";
 import { EventFeed, type EventFeedProps } from "./components/event-feed.js";
 import { GoalForm, GoalList, type GoalListProps, GoalView, goalMonth } from "./components/goals.js";
+import { HomeGrid, type HomeGridProps } from "./components/home.js";
 import { MyDecisions } from "./components/my-decisions.js";
 import { PackTokenWays } from "./components/pack-token.js";
 import { PAGE_SIZE } from "./components/paged.js";
 import { ListingForm, PeopleList, type PeopleListProps } from "./components/people.js";
-import { PluginFrame, PluginWidgets } from "./components/plugin-frame.js";
+import { PluginFrame } from "./components/plugin-frame.js";
 import { PluginSettingsList, PluginSettingsView } from "./components/plugin-settings.js";
 import {
   MemberList,
   type MemberListProps,
   ProjectForm,
-  ProjectList,
-  type ProjectListProps,
   ProjectMark,
 } from "./components/projects.js";
 import { type RemotePictureSrc, RemotePicturesContext } from "./components/remote-pictures.js";
@@ -100,6 +100,7 @@ import { type ConsoleData, useConsoleData } from "./data.js";
 import { monthOf, today } from "./dates.js";
 import { DocsPage } from "./docs-page.js";
 import {
+  browserPack,
   chooseLanguage,
   DEFAULT_LANGUAGES,
   LanguageContext,
@@ -157,7 +158,7 @@ export interface ConsoleComponents {
   readonly TokenList: ComponentType<TokenListProps>;
   readonly PeopleList: ComponentType<PeopleListProps>;
   readonly SkillList: ComponentType<SkillListProps>;
-  readonly ProjectList: ComponentType<ProjectListProps>;
+  readonly HomeGrid: ComponentType<HomeGridProps>;
   readonly MemberList: ComponentType<MemberListProps>;
   readonly Calendar: ComponentType<CalendarProps>;
   readonly GoalList: ComponentType<GoalListProps>;
@@ -175,7 +176,7 @@ export const DEFAULT_COMPONENTS: ConsoleComponents = {
   TokenList,
   PeopleList,
   SkillList,
-  ProjectList,
+  HomeGrid,
   MemberList,
   Calendar,
   GoalList,
@@ -384,6 +385,21 @@ function holdsToken(data: ConsoleData): boolean {
   return data.me !== undefined && data.me.agent !== null;
 }
 
+/**
+ * The language to keep for a person the pages see for the first time (ADR-0065): the one their
+ * browser asks for, so that a plugin or an agent can write for them while they are away. Nothing
+ * for a person who has a language, for nobody, and where the pages only fall back on a language.
+ */
+export function languageToKeep(
+  me: RestMe | undefined,
+  browser: readonly string[],
+  packs: readonly LanguagePack[],
+): string | undefined {
+  return me?.person !== null && me?.person !== undefined && me.language === null
+    ? browserPack(browser, packs)?.tag
+    : undefined;
+}
+
 /**
  * The pages a console that holds a token does not offer: the tokens themselves, and the
  * approval of an agent's connection, which makes one; a person's own doing on the console's
@@ -413,21 +429,11 @@ function ProjectsPage(props: {
   readonly making: boolean;
 }) {
   const words = useWords().projects;
+  const homeWords = useWords().home;
   const { data, components, navigation, client, language } = props;
   const me = data.me;
-  /** The plugins' widgets at a place of this page (ADR-0054), for the person's roles. */
-  const widgets = (place: "home:top" | "home:bottom") =>
-    me === undefined ? null : (
-      <PluginWidgets
-        plugins={data.plugins}
-        place={place}
-        me={me}
-        language={language}
-        client={client}
-        navigation={navigation}
-        nameOf={(name) => pluginWordOf(name, language)}
-      />
-    );
+  // The person arranges the page (ADR-0061): the projects and the widgets, tiles on one grid.
+  const [arranging, setArranging] = useState(false);
   const { busy, error, act } = useAction();
   const href = (project: RestProject) => projectHref(project.key);
   // A project is made by an administrator (ADR-0045): a member sees the list alone, the form's
@@ -438,14 +444,22 @@ function ProjectsPage(props: {
     <>
       <div className="sc-page-head">
         <h1 className="sc-page-title">{words.title}</h1>
-        {administrator && !making && (
-          <LinkButton href={PATHS.newProject} variant="primary">
-            {words.newProject}
-          </LinkButton>
+        {!arranging && (
+          <div className="sc-page-actions">
+            {me !== undefined && me.person !== null && (
+              <Button size="sm" variant="ghost" onClick={() => setArranging(true)}>
+                {homeWords.edit}
+              </Button>
+            )}
+            {administrator && !making && (
+              <LinkButton href={PATHS.newProject} variant="primary">
+                {words.newProject}
+              </LinkButton>
+            )}
+          </div>
         )}
       </div>
       {error !== undefined && <Callout tone="danger">{error}</Callout>}
-      {widgets("home:top")}
       {making && (
         <section className="sc-panel sc-panel-form" aria-label={words.form.aria}>
           <ProjectForm
@@ -465,10 +479,30 @@ function ProjectsPage(props: {
           />
         </section>
       )}
-      <components.ProjectList
+      <components.HomeGrid
         projects={data.projects}
+        plugins={data.plugins}
+        home={me?.home}
+        editing={arranging}
+        onSave={(home) => data.actions.updateMe({ home })}
+        onDone={() => setArranging(false)}
         projectHref={href}
         onOpen={(project) => navigation.go(href(project))}
+        nameOf={(name) => pluginWordOf(name, language)}
+        renderWidget={(tile, size) =>
+          me === undefined ? null : (
+            <PluginFrame
+              plugin={tile.plugin}
+              widget={tile.widget.key}
+              size={size}
+              me={me}
+              language={language}
+              client={client}
+              navigation={navigation}
+              title={pluginWordOf(tile.widget.name, language)}
+            />
+          )
+        }
         empty={
           <EmptyState
             title={words.empty.title}
@@ -481,7 +515,6 @@ function ProjectsPage(props: {
           />
         }
       />
-      {widgets("home:bottom")}
     </>
   );
 }
@@ -516,7 +549,7 @@ function PluginPage(props: {
   return (
     <>
       {pages.length > 1 && (
-        <nav className="sc-subtabs" aria-label={pluginWordOf(plugin.name, language)}>
+        <nav className="sc-page-tabs" aria-label={pluginWordOf(plugin.name, language)}>
           {pages.map((candidate) => (
             <a
               key={candidate.key}
@@ -572,9 +605,9 @@ function PluginSettingsPage(props: {
       setDetail(await client.plugin(key).get());
       setFailure(undefined);
     } catch (error) {
-      setFailure(error instanceof ApiError ? error.message : words.common.somethingWentWrong);
+      setFailure(errorWords(error, words.common.somethingWentWrong, words));
     }
-  }, [client, key, words.common.somethingWentWrong]);
+  }, [client, key, words]);
   useEffect(() => {
     setDetail(undefined);
     void read();
@@ -2506,6 +2539,12 @@ function WorkspacePage(props: {
               ? (person, status) => void act(() => data.actions.updatePerson(person.id, { status }))
               : undefined
           }
+          onChangeManager={
+            administrator
+              ? (person, managerId) =>
+                  void act(() => data.actions.updatePerson(person.id, { managerId }))
+              : undefined
+          }
           onUnlist={
             administrator
               ? (listing) => void act(() => data.actions.removeListing(listing.id))
@@ -2592,7 +2631,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
     const failure = signInFailureOf(location.search);
     const title = data.me?.workspace.name ?? fallbackTitle;
     const viaToken = holdsToken(data);
-    // The language: the person's choice, else the browser's, else the first the console speaks.
+    // The language: the person's own, else the browser's, else the first the console speaks.
     const chosen = data.me?.language;
     const pack = useMemo(
       () =>
@@ -2605,6 +2644,17 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
     );
     const words = pack.messages;
 
+    const toKeep = languageToKeep(
+      data.me,
+      typeof navigator === "undefined" ? [] : navigator.languages,
+      languages,
+    );
+    useEffect(() => {
+      if (toKeep !== undefined) {
+        void data.actions.updateMe({ language: toKeep }).catch(() => undefined);
+      }
+    }, [toKeep, data.actions]);
+
     // An address that moved is shown at its new one, in its place.
     useEffect(() => {
       if (route.name === "moved") {
@@ -2632,7 +2682,7 @@ export function createConsole(config: ConsoleConfig = {}): ConsoleApp {
                 title={words.common.couldNotReach}
                 action={<Button onClick={data.reload}>{words.common.tryAgain}</Button>}
               >
-                {data.error}
+                {errorWords(data.failure, data.error, words)}
               </Callout>
             )}
           </div>

package/src/data.ts

@@ -173,7 +173,7 @@ export interface ConsoleActions {
   createListing(input: RestListingInput): Promise<RestListing>;
   /** Takes a listing away that nobody signed in with; for an administrator. */
   removeListing(id: string): Promise<void>;
-  /** Keeps the person's own choice of language (ADR-0012). */
+  /** Keeps the person's language (ADR-0065) or their front page. */
   updateMe(patch: RestMePatch): Promise<RestMe>;
   /** Changes the workspace's settings (ADR-0035); for an administrator. `me` says them from then on. */
   updateWorkspace(patch: RestWorkspacePatch): Promise<RestWorkspace>;
@@ -214,8 +214,10 @@ export interface ConsoleActions {
 export interface ConsoleData {
   /** Who is signed in and what the board is called; `undefined` until the server has answered. */
   readonly me: RestMe | undefined;
-  /** What went wrong asking who is signed in, for a person. */
+  /** What went wrong asking who is signed in, for a person, in English. */
   readonly error: string | undefined;
+  /** The failure itself, for a page to say in the person's language (`errorWords`). */
+  readonly failure?: unknown;
   /** True once the workspace has been loaded for the first time: the projects, the people, the tokens. */
   readonly loaded: boolean;
   /** The projects the person may see, by name. */
@@ -357,6 +359,7 @@ const wordsOf = (failure: unknown, fallback: string): string =>
 export function useConsoleData(client: ConsoleClient, projectKey: string | undefined): ConsoleData {
   const [me, setMe] = useState<RestMe | undefined>(undefined);
   const [error, setError] = useState<string | undefined>(undefined);
+  const [failure, setFailure] = useState<unknown>(undefined);
   const [loaded, setLoaded] = useState(false);
   const [projects, setProjects] = useState<readonly RestProject[]>([]);
   const [people, setPeople] = useState<readonly RestPerson[]>([]);
@@ -461,12 +464,14 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
     const controller = new AbortController();
     const { signal } = controller;
     setError(undefined);
+    setFailure(undefined);
     const run = async () => {
       let answer: RestMe;
       try {
         answer = await client.me(signal);
       } catch (failure) {
         if (!signal.aborted) {
+          setFailure(failure);
           setError(wordsOf(failure, "The server could not be reached."));
         }
         return;
@@ -492,6 +497,7 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
         setLoaded(true);
       } catch (failure) {
         if (!signal.aborted) {
+          setFailure(failure);
           setError(wordsOf(failure, "The workspace could not be loaded."));
         }
       }
@@ -862,6 +868,7 @@ export function useConsoleData(client: ConsoleClient, projectKey: string | undef
   return {
     me,
     error,
+    failure,
     loaded,
     projects,
     people,

package/src/docs-page.tsx

@@ -30,7 +30,7 @@ import {
   taskHref,
 } from "./router.js";
 import { projectPath } from "./routes.js";
-import { useAction } from "./use-action.js";
+import { errorWords, useAction } from "./use-action.js";
 
 // The Docs page of a project (ADR-0009): the folder or the page the path names, read on its
 // own since the tree may be large, and read again whenever the project's feed grows; and the
@@ -51,7 +51,8 @@ export interface DocsPageProps {
 type Found = RestDocument | null | undefined;
 
 export function DocsPage(props: DocsPageProps) {
-  const words = useWords().docs;
+  const pack = useWords();
+  const words = pack.docs;
   const { project, path, view, data, navigation } = props;
   const [listing, setListing] = useState<RestDocuments | undefined>(undefined);
   const [document, setDocument] = useState<Found>(undefined);
@@ -105,7 +106,7 @@ export function DocsPage(props: DocsPageProps) {
     };
     load().catch((failure: unknown) => {
       if (!signal.aborted) {
-        setProblem(failure instanceof ApiError ? failure.message : words.couldNotLoad);
+        setProblem(errorWords(failure, words.couldNotLoad, pack));
       }
     });
     return () => controller.abort();
@@ -145,11 +146,11 @@ export function DocsPage(props: DocsPageProps) {
       })
       .catch((failure: unknown) => {
         if (!controller.signal.aborted) {
-          setProblem(failure instanceof ApiError ? failure.message : words.searchFailed);
+          setProblem(errorWords(failure, words.searchFailed, pack));
         }
       });
     return () => controller.abort();
-  }, [actions, query, words]);
+  }, [actions, pack, query, words]);
 
   const toDoc = (target: string) => docHref(key, target);
   const toFolder = (folder: string) => docHref(key, folder);