@skillcdn/console 0.4.2 → 0.4.4

package/src/components/people.tsx

@@ -14,7 +14,7 @@ import {
 import { useWords } from "../i18n/index.js";
 import { MAX_LOGIN_LENGTH } from "../limits.js";
 import { PERSON_ROLES } from "../vocabulary.js";
-import { Badge, Button, PersonChip, personName, RoleBadge, Time } from "./ui.js";
+import { Avatar, Badge, Button, PersonChip, personName, RoleBadge, Time, Workers } from "./ui.js";
 
 // The people of the board, with what each may do and whether they are in (ADR-0022): those in,
 // the logins let in that nobody has signed in with yet, and those deactivated. An administrator
@@ -37,6 +37,8 @@ export interface PeopleListProps {
    * with it.
    */
   readonly onChangeStatus?: ((person: RestPerson, status: PersonStatus) => void) | undefined;
+  /** Called with the manager an administrator chose for the person, or null for none. Left out, managers are read here, not changed. */
+  readonly onChangeManager?: ((person: RestPerson, managerId: string | null) => void) | undefined;
   /** Called when an administrator takes a listing away. Left out, listings are read here. */
   readonly onUnlist?: ((listing: RestListing) => void) | undefined;
   /** Where a person's work is seen; given to an administrator, or an owner of a project. */
@@ -57,6 +59,12 @@ export function PeopleList(props: PeopleListProps) {
     person.source !== "organization" &&
     props.me?.id !== person.id;
   const organization = props.organization ?? undefined;
+  const byId = new Map(props.people.map((person) => [person.id, person]));
+  /** The person's manager, where they have one that can be named here. */
+  const managerOf = (person: RestPerson): RestPerson | undefined =>
+    person.managerId === null || person.managerId === undefined
+      ? undefined
+      : byId.get(person.managerId);
   /** What let the person in, by its name: the organization, the domain of their login, or an administrator. */
   const noteOf = (person: RestPerson): string => {
     if (person.source === "organization") {
@@ -85,59 +93,133 @@ export function PeopleList(props: PeopleListProps) {
         </p>
       )}
       <ul className="sc-people" aria-label={people.list}>
-        {active.map((person) => (
-          <li key={person.id} className="sc-person-row">
-            <PersonChip person={person} size="md" />
-            {props.me?.id === person.id && (
-              <span className="sc-person-you">{words.common.you}</span>
-            )}
-            <span className="sc-person-name sc-muted">
-              {person.name !== null && <>{person.login} · </>}
-              <span className="sc-person-note">{noteOf(person)}</span>
-            </span>
-            {props.onChangeRole === undefined ? (
-              <RoleBadge role={person.role} />
-            ) : (
-              <label className="sc-field sc-field-inline">
-                <span className="sc-visually-hidden">{people.roleOf(personName(person))}</span>
-                <select
-                  className="sc-input"
-                  value={person.role}
-                  disabled={props.busy === true}
-                  onChange={(event) =>
-                    props.onChangeRole?.(person, event.target.value as PersonRole)
-                  }
-                >
-                  {PERSON_ROLES.map((role) => (
-                    <option key={role} value={role}>
-                      {words.vocabulary.role[role]}
-                    </option>
-                  ))}
-                </select>
-              </label>
-            )}
-            {props.workHref !== undefined && (
-              <a className="sc-button sc-button-ghost sc-button-sm" href={props.workHref(person)}>
-                {people.work}
-              </a>
-            )}
-            {props.agentsHref !== undefined && (
-              <a className="sc-button sc-button-ghost sc-button-sm" href={props.agentsHref(person)}>
-                {people.agents}
-              </a>
-            )}
-            {mayChange(person) && (
-              <Button
-                variant="ghost"
-                size="sm"
-                disabled={props.busy === true}
-                onClick={() => props.onChangeStatus?.(person, "deactivated")}
-              >
-                {people.deactivate}
-              </Button>
-            )}
-          </li>
-        ))}
+        {active.map((person) => {
+          const manager = managerOf(person);
+          const team = active.filter((other) => other.managerId === person.id);
+          const hasWays =
+            props.workHref !== undefined || props.agentsHref !== undefined || mayChange(person);
+          return (
+            <li key={person.id} className="sc-person-card">
+              <div className="sc-person-card-head">
+                <Avatar person={person} size="lg" />
+                <div className="sc-person-card-who">
+                  <span className="sc-person-card-name">
+                    {personName(person)}
+                    {props.me?.id === person.id && (
+                      <span className="sc-person-you">{words.common.you}</span>
+                    )}
+                  </span>
+                  <span className="sc-person-card-note">
+                    {person.name !== null && <>{person.login} · </>}
+                    {noteOf(person)}
+                  </span>
+                </div>
+              </div>
+              <dl className="sc-person-facts">
+                <div className="sc-person-fact">
+                  <dt>{people.role}</dt>
+                  <dd>
+                    {props.onChangeRole === undefined ? (
+                      <RoleBadge role={person.role} />
+                    ) : (
+                      <select
+                        className="sc-input sc-input-quiet"
+                        aria-label={people.roleOf(personName(person))}
+                        value={person.role}
+                        disabled={props.busy === true}
+                        onChange={(event) =>
+                          props.onChangeRole?.(person, event.target.value as PersonRole)
+                        }
+                      >
+                        {PERSON_ROLES.map((role) => (
+                          <option key={role} value={role}>
+                            {words.vocabulary.role[role]}
+                          </option>
+                        ))}
+                      </select>
+                    )}
+                  </dd>
+                </div>
+                <div className="sc-person-fact">
+                  <dt>{people.manager}</dt>
+                  <dd>
+                    {props.onChangeManager === undefined ? (
+                      manager === undefined ? (
+                        <span className="sc-muted">{people.nobody}</span>
+                      ) : (
+                        <PersonChip person={manager} />
+                      )
+                    ) : (
+                      <select
+                        className="sc-input sc-input-quiet"
+                        aria-label={people.managerOf(personName(person))}
+                        value={person.managerId ?? ""}
+                        disabled={props.busy === true}
+                        onChange={(event) =>
+                          props.onChangeManager?.(
+                            person,
+                            event.target.value === "" ? null : event.target.value,
+                          )
+                        }
+                      >
+                        <option value="">{people.nobody}</option>
+                        {props.people
+                          .filter(
+                            (candidate) =>
+                              candidate.id !== person.id &&
+                              (candidate.status === "active" || candidate.id === person.managerId),
+                          )
+                          .map((candidate) => (
+                            <option key={candidate.id} value={candidate.id}>
+                              {personName(candidate)}
+                            </option>
+                          ))}
+                      </select>
+                    )}
+                  </dd>
+                </div>
+                {team.length > 0 && (
+                  <div className="sc-person-fact">
+                    <dt>{people.team}</dt>
+                    <dd>
+                      <Workers workers={team} />
+                    </dd>
+                  </div>
+                )}
+              </dl>
+              {hasWays && (
+                <div className="sc-person-card-ways">
+                  {props.workHref !== undefined && (
+                    <a
+                      className="sc-button sc-button-ghost sc-button-sm"
+                      href={props.workHref(person)}
+                    >
+                      {people.work}
+                    </a>
+                  )}
+                  {props.agentsHref !== undefined && (
+                    <a
+                      className="sc-button sc-button-ghost sc-button-sm"
+                      href={props.agentsHref(person)}
+                    >
+                      {people.agents}
+                    </a>
+                  )}
+                  {mayChange(person) && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      disabled={props.busy === true}
+                      onClick={() => props.onChangeStatus?.(person, "deactivated")}
+                    >
+                      {people.deactivate}
+                    </Button>
+                  )}
+                </div>
+              )}
+            </li>
+          );
+        })}
       </ul>
       {listed.length > 0 && (
         <section className="sc-people-section" aria-label={people.notSignedIn}>

package/src/components/plugin-frame.tsx

@@ -1,5 +1,9 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { ConsoleClient, PluginClient } from "../client.js";
+import { firstDayOfWeek } from "../dates.js";
+import type { Messages } from "../i18n/en.js";
+import { useWords } from "../i18n/index.js";
+import type { PluginWidgetSizeName } from "../plugin/bridge.js";
 import {
   type BridgeCall,
   type BridgeEventKind,
@@ -8,10 +12,12 @@ import {
   isBridgeToPage,
   PLUGIN_BRIDGE_VERSION,
 } from "../plugin/bridge.js";
-import { MAX_PLUGIN_WIDGET_HEIGHT } from "../plugin/limits.js";
 import type { Navigation } from "../router.js";
 import type { RestEvent, RestMe, RestPlugin, RestProject } from "../schemas.js";
 import { CONSOLE_TOKENS } from "../tokens.js";
+import { wordsForFailure } from "../use-action.js";
+import { CONSOLE_LANGUAGES } from "../vocabulary.js";
+import { weekStartOf } from "./workspace.js";
 
 // A plugin's page or widget on the console's page (ADR-0054, docs/specs/plugins.md, "Pages"):
 // a sandboxed frame whose document the console serves, and the console's side of the bridge.
@@ -29,6 +35,8 @@ export interface PluginFrameProps {
   /** The page shown, or the widget; one of the two. */
   readonly page?: string | undefined;
   readonly widget?: string | undefined;
+  /** The size the widget has (ADR-0059), told to the frame at the start and when it changes. */
+  readonly size?: PluginWidgetSizeName | undefined;
   /** The project the page is on, or nothing on the workspace. */
   readonly project?: RestProject | undefined;
   /** What follows the page in the address, handed to the frame. */
@@ -127,6 +135,12 @@ export async function performBridgeCall(
         transfer: [bytes],
       };
     }
+    case "people.picture": {
+      const id = text(params.id, "id");
+      const picture = await plugin.personPicture(id);
+      const bytes = new Uint8Array(picture.bytes).buffer;
+      return { value: { type: picture.contentType, bytes }, transfer: [bytes] };
+    }
     case "files.put": {
       const name = text(params.name, "name");
       const type = text(params.type, "type");
@@ -161,8 +175,14 @@ export function readTheme(): Record<string, string> {
   return theme;
 }
 
-/** What a failure of a call says to the frame: the console's code and words, or the console's own failure. */
-function errorOf(error: unknown): { readonly code: string; readonly message: string } {
+/**
+ * What a failure of a call says to the frame: the code, with the console's own refusals in the
+ * person's language, a plugin's own in its own words; or the console's own failure.
+ */
+function errorOf(
+  error: unknown,
+  pack: Messages,
+): { readonly code: string; readonly message: string } {
   if (error instanceof BridgeRefusal) {
     return { code: error.code, message: error.message };
   }
@@ -174,16 +194,20 @@ function errorOf(error: unknown): { readonly code: string; readonly message: str
     "message" in error &&
     typeof error.message === "string"
   ) {
-    return { code: error.code, message: error.message };
+    return { code: error.code, message: wordsForFailure(error, pack) ?? error.message };
   }
   return { code: "plugin.failed", message: "the call failed" };
 }
 
 export function PluginFrame(props: PluginFrameProps) {
   const { plugin, page, widget, project, me, language, client, navigation, events } = props;
+  const pack = useWords();
+  const words = pack.plugins;
   const frame = useRef<HTMLIFrameElement>(null);
   const isWidget = widget !== undefined;
-  const [height, setHeight] = useState(isWidget ? 160 : 480);
+  const [height, setHeight] = useState(480);
+  /** Whether the console served the frame nothing to show: a plugin turned off since the page read it, say. */
+  const [unavailable, setUnavailable] = useState(false);
   const subscribed = useRef<Set<BridgeEventKind>>(new Set());
   const ready = useRef(false);
   const lastPluginEvent = useRef(0);
@@ -199,6 +223,8 @@ export function PluginFrame(props: PluginFrameProps) {
       }),
     [scoped, page, widget, project],
   );
+  // biome-ignore lint/correctness/useExhaustiveDependencies: another address is another document
+  useEffect(() => setUnavailable(false), [src]);
 
   const post = useCallback((message: BridgeToFrame, transfer?: Transferable[]) => {
     // The frame's origin is opaque, so the target is any: the frame itself checks the sender.
@@ -220,6 +246,9 @@ export function PluginFrame(props: PluginFrameProps) {
       }
       const message = event.data;
       switch (message.t) {
+        case "unavailable":
+          setUnavailable(true);
+          return;
         case "ready":
           ready.current = true;
           post({
@@ -228,6 +257,7 @@ export function PluginFrame(props: PluginFrameProps) {
             plugin: { key: plugin.key, version: plugin.version },
             ...(page === undefined ? {} : { page }),
             ...(widget === undefined ? {} : { widget }),
+            ...(props.size === undefined ? {} : { size: props.size }),
             project: project === undefined ? null : { key: project.key, name: project.name },
             person: {
               id: me.person?.id ?? "",
@@ -236,6 +266,13 @@ export function PluginFrame(props: PluginFrameProps) {
               language,
               admin: me.person?.role === "admin",
             },
+            workspace: {
+              name: me.workspace.name,
+              languages: [...CONSOLE_LANGUAGES],
+              timeZone: me.workspace.timeZone ?? "UTC",
+              weekStart: weekStartOf(me.workspace),
+              firstDay: firstDayOfWeek(language, weekStartOf(me.workspace)),
+            },
             roles: plugin.roles,
             path,
             language,
@@ -256,7 +293,7 @@ export function PluginFrame(props: PluginFrameProps) {
                 t: "result",
                 id: message.id,
                 ok: false,
-                error: errorOf(error),
+                error: errorOf(error, pack),
               }),
             );
           return;
@@ -266,15 +303,10 @@ export function PluginFrame(props: PluginFrameProps) {
           }
           return;
         case "resize":
-          setHeight(
-            Math.max(
-              40,
-              Math.min(
-                Math.ceil(message.height),
-                isWidget ? MAX_PLUGIN_WIDGET_HEIGHT : MAX_PAGE_HEIGHT,
-              ),
-            ),
-          );
+          // A widget fills the cells its size gives it (ADR-0059); a page is as tall as it asks.
+          if (!isWidget) {
+            setHeight(Math.max(40, Math.min(Math.ceil(message.height), MAX_PAGE_HEIGHT)));
+          }
           return;
         case "title":
           if (!isWidget && typeof document !== "undefined") {
@@ -315,6 +347,14 @@ export function PluginFrame(props: PluginFrameProps) {
     }
   }, [path, post]);
 
+  // The person gave the widget another size: the frame lays itself out for it.
+  const size = props.size;
+  useEffect(() => {
+    if (ready.current && size !== undefined) {
+      post({ v: PLUGIN_BRIDGE_VERSION, t: "size", size });
+    }
+  }, [size, post]);
+
   // The plugin's commands, as the project's feed tells of them: a frame that listens hears of each.
   useEffect(() => {
     if (events === undefined) {
@@ -375,63 +415,22 @@ export function PluginFrame(props: PluginFrameProps) {
       .catch(() => undefined);
   }, [scoped]);
 
+  if (unavailable) {
+    return <p className="sc-plugin-frame-unavailable">{words.frameUnavailable}</p>;
+  }
   return (
     <iframe
       ref={frame}
-      className={isWidget ? "sc-plugin-frame sc-plugin-frame-widget" : "sc-plugin-frame"}
+      className={
+        isWidget ? "sc-plugin-frame sc-plugin-frame-widget" : "sc-plugin-frame sc-plugin-frame-page"
+      }
       src={src}
       title={props.title}
       // As the document's own policy says: scripts, and forms firing their submit event, which
       // the policy's form-action 'none' keeps from going anywhere.
       sandbox="allow-scripts allow-forms"
       referrerPolicy="origin"
-      style={{ height: `${height}px` }}
+      style={isWidget ? undefined : { height: `${height}px` }}
     />
   );
 }
-
-export interface PluginWidgetsProps {
-  readonly plugins: readonly RestPlugin[];
-  readonly place: "home:top" | "home:bottom";
-  readonly me: RestMe;
-  readonly language: string;
-  readonly client: ConsoleClient;
-  readonly navigation: Navigation;
-  /** The widget's name in the person's language. */
-  readonly nameOf: (name: Readonly<Record<string, string>>) => string;
-}
-
-/** The widgets at a place of the front page, in a grid of six columns: a third takes two, a half three, the full six. */
-export function PluginWidgets(props: PluginWidgetsProps) {
-  const shown = props.plugins.flatMap((plugin) =>
-    plugin.widgets
-      .filter((widget) => widget.place === props.place)
-      .map((widget) => ({ plugin, widget })),
-  );
-  if (shown.length === 0) {
-    return null;
-  }
-  return (
-    <section
-      className={`sc-widgets ${props.place === "home:top" ? "sc-widgets-top" : "sc-widgets-bottom"}`}
-    >
-      {shown.map(({ plugin, widget }) => (
-        <article
-          key={`${plugin.key}:${widget.key}`}
-          className={`sc-widget sc-widget-${widget.size}`}
-        >
-          <h2 className="sc-widget-title">{props.nameOf(widget.name)}</h2>
-          <PluginFrame
-            plugin={plugin}
-            widget={widget.key}
-            me={props.me}
-            language={props.language}
-            client={props.client}
-            navigation={props.navigation}
-            title={props.nameOf(widget.name)}
-          />
-        </article>
-      ))}
-    </section>
-  );
-}