@skillcdn/console 0.4.3 → 0.4.5

package/src/components/picker.tsx

@@ -62,10 +62,18 @@ export interface PickerProps<T> {
   readonly onChange: (item: T | undefined) => void;
   /** The field's name, for the input and the list. */
   readonly label: string;
+  /** The input's id, where a label points at it. */
+  readonly id?: string | undefined;
   readonly placeholder: string;
   readonly disabled?: boolean | undefined;
   /** What the search may answer with but cannot be chosen: a task, as its own parent. */
   readonly exclude?: ((item: T) => boolean) | undefined;
+  /**
+   * A class of the picker's own beside `sc-picker`: `sc-picker-quiet`, a picker that reads as
+   * what it holds until the pointer or the focus is on it, a fact changed in place; or
+   * `sc-picker-add`, the way to add one more at the end of a row of chips, as low as a chip.
+   */
+  readonly className?: string | undefined;
 }
 
 export function Picker<T>(props: PickerProps<T>) {
@@ -204,7 +212,7 @@ export function Picker<T>(props: PickerProps<T>) {
 
   if (props.value !== undefined || props.held !== undefined) {
     return (
-      <div className="sc-picker sc-picker-chosen">
+      <div className={cx("sc-picker", "sc-picker-chosen", props.className)}>
         <span className="sc-picker-value">
           {props.value === undefined ? props.held : props.render(props.value)}
         </span>
@@ -222,9 +230,10 @@ export function Picker<T>(props: PickerProps<T>) {
   }
 
   return (
-    <div className="sc-picker">
+    <div className={cx("sc-picker", props.className)}>
       <input
         ref={field}
+        id={props.id}
         className="sc-input"
         type="text"
         role="combobox"

package/src/components/plugin-frame.tsx

@@ -1,17 +1,24 @@
 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,
   type BridgeToFrame,
   isBridgePath,
   isBridgeToPage,
+  isOpenableFrom,
   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 +36,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 +136,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");
@@ -146,6 +161,20 @@ export async function performBridgeCall(
 }
 
 /** The console's computed design tokens, as the page's root has them: what a frame is told to look like. */
+/**
+ * Whether a person pressed something a moment ago, as the browser keeps it: a link in a frame
+ * gives the page this too, which is what lets the page open a tab for it; a browser without the
+ * API is left to decide for itself, as it does for any page.
+ */
+function recentlyPressed(): boolean {
+  if (typeof navigator === "undefined") {
+    return false;
+  }
+  const activation = (navigator as Navigator & { userActivation?: { isActive: boolean } })
+    .userActivation;
+  return activation === undefined || activation.isActive;
+}
+
 export function readTheme(): Record<string, string> {
   if (typeof document === "undefined" || typeof getComputedStyle === "undefined") {
     return {};
@@ -161,8 +190,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 +209,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 +238,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 +261,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 +272,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 +281,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 +308,7 @@ export function PluginFrame(props: PluginFrameProps) {
                 t: "result",
                 id: message.id,
                 ok: false,
-                error: errorOf(error),
+                error: errorOf(error, pack),
               }),
             );
           return;
@@ -266,15 +318,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") {
@@ -289,6 +336,14 @@ export function PluginFrame(props: PluginFrameProps) {
           anchor.click();
           return;
         }
+        case "open":
+          // A link a person pressed in the frame (ADR-0067): a web or a mail address, opened in a
+          // new tab with no opener and no referrer, and only while the press is recent, which a
+          // press in the frame gives this page too.
+          if (isOpenableFrom(message.url, window.location.origin) && recentlyPressed()) {
+            window.open(message.url, "_blank", "noopener,noreferrer");
+          }
+          return;
         case "subscribe":
           subscribed.current = new Set(message.kinds);
           return;
@@ -315,6 +370,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 +438,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>
-  );
-}