@skillcdn/console 0.4.0 → 0.4.2

package/src/components/remote-pictures.ts

@@ -0,0 +1,19 @@
+import { createContext, useContext } from "react";
+import { REST_ROUTES } from "../routes.js";
+
+// Where a picture from elsewhere is read (ADR-0048): through the console, which fetches it and
+// keeps it a while, so that the person's browser reaches nobody's server and the pages load
+// nothing from elsewhere. The composition provides the client's way to it; a component outside
+// one reads it at the API's own path, which a console served beside its API answers.
+
+/** The address a picture from elsewhere is read at, given the https URL that names it. */
+export type RemotePictureSrc = (url: string) => string;
+
+export const defaultRemotePictureSrc: RemotePictureSrc = (url) =>
+  `${REST_ROUTES.pictures}?src=${encodeURIComponent(url)}`;
+
+export const RemotePicturesContext = createContext<RemotePictureSrc>(defaultRemotePictureSrc);
+
+export function useRemotePictureSrc(): RemotePictureSrc {
+  return useContext(RemotePicturesContext);
+}

package/src/components/shell.tsx

@@ -13,6 +13,8 @@ export interface NavItem {
   readonly current: boolean;
   /** A count beside the label: the decisions waiting, for example. */
   readonly count?: number | undefined;
+  /** The pages the tab opens a list of, as a group of plugins does (ADR-0054); the tab itself leads to the first. */
+  readonly children?: readonly NavItem[] | undefined;
 }
 
 /** The addresses of a brand's marks (ADR-0013): shown beside the workspace's name, and above it when signing in. */
@@ -67,6 +69,68 @@ export function isPlainClick(event: {
   return event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey && !event.altKey;
 }
 
+/** A tab that opens a list of pages, as a group of several plugins does: a details, as the person's menu is. Closes once used. */
+function TabGroup(props: { readonly item: NavItem; readonly onNavigate: (href: string) => void }) {
+  const details = useRef<HTMLDetailsElement>(null);
+  useEffect(() => {
+    const onClick = (event: MouseEvent) => {
+      const element = details.current;
+      if (
+        element?.open === true &&
+        !(event.target instanceof Node && element.contains(event.target))
+      ) {
+        element.open = false;
+      }
+    };
+    document.addEventListener("click", onClick);
+    return () => document.removeEventListener("click", onClick);
+  }, []);
+  const { item } = props;
+  return (
+    <details className="sc-tab-group" ref={details}>
+      <summary
+        className={cx("sc-tab", "sc-tab-summary", item.current && "sc-tab-current")}
+        aria-current={item.current ? "page" : undefined}
+      >
+        {item.label}
+        <svg className="sc-menu-caret" viewBox="0 0 16 16" aria-hidden="true">
+          <path
+            d="M4 6l4 4 4-4"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+      </summary>
+      <div className="sc-menu-panel sc-tab-group-panel">
+        <div className="sc-menu-list">
+          {(item.children ?? []).map((child) => (
+            <a
+              key={child.href}
+              href={child.href}
+              className="sc-menu-link"
+              aria-current={child.current ? "page" : undefined}
+              onClick={(event) => {
+                if (isPlainClick(event)) {
+                  event.preventDefault();
+                  if (details.current !== null) {
+                    details.current.open = false;
+                  }
+                  props.onNavigate(child.href);
+                }
+              }}
+            >
+              {child.label}
+            </a>
+          ))}
+        </div>
+      </div>
+    </details>
+  );
+}
+
 /** The person's menu: who they are, the workspace's pages, the languages, and the way out. Closes once used. */
 function PersonMenu(props: {
   readonly person: RestPerson;
@@ -296,20 +360,24 @@ export function Shell(props: ShellProps) {
         {props.nav.length > 0 && (
           <nav ref={tabs} className="sc-tabs" aria-label={words.shell.pages}>
             <div className="sc-tabs-inner">
-              {props.nav.map((item) => (
-                <a
-                  key={item.href}
-                  href={item.href}
-                  className={cx("sc-tab", item.current && "sc-tab-current")}
-                  aria-current={item.current ? "page" : undefined}
-                  onClick={follow(item.href)}
-                >
-                  {item.label}
-                  {item.count !== undefined && item.count > 0 && (
-                    <span className="sc-nav-count">{item.count}</span>
-                  )}
-                </a>
-              ))}
+              {props.nav.map((item) =>
+                item.children !== undefined && item.children.length > 0 ? (
+                  <TabGroup key={item.href} item={item} onNavigate={props.onNavigate} />
+                ) : (
+                  <a
+                    key={item.href}
+                    href={item.href}
+                    className={cx("sc-tab", item.current && "sc-tab-current")}
+                    aria-current={item.current ? "page" : undefined}
+                    onClick={follow(item.href)}
+                  >
+                    {item.label}
+                    {item.count !== undefined && item.count > 0 && (
+                      <span className="sc-nav-count">{item.count}</span>
+                    )}
+                  </a>
+                ),
+              )}
             </div>
           </nav>
         )}

package/src/components/sign-in.tsx

@@ -1,10 +1,11 @@
-import { loginPath, type RestProvider, type SignInFailure } from "../api.js";
+import { type MouseEvent, useEffect, useState } from "react";
+import { loginPath, type ProviderKey, type RestProvider, type SignInFailure } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import type { Brand } from "./shell.js";
-import { Callout } from "./ui.js";
+import { Callout, cx } from "./ui.js";
 
 // The page a person sees before they are anyone: the way to each provider the deployment has,
-// and what went wrong the last time, when something did.
+// who gets in through it, and what went wrong the last time, when something did.
 
 export interface SignInProps {
   readonly title: string;
@@ -19,6 +20,35 @@ export interface SignInProps {
 
 export function SignIn(props: SignInProps) {
   const words = useWords().signIn;
+  // The way being taken: its button says so from the click until the page leaves, and says so
+  // no more when the browser brings this page back from its cache, as on the way back.
+  const [taken, setTaken] = useState<ProviderKey | undefined>(undefined);
+  useEffect(() => {
+    const shown = (event: PageTransitionEvent): void => {
+      if (event.persisted) {
+        setTaken(undefined);
+      }
+    };
+    window.addEventListener("pageshow", shown);
+    return () => window.removeEventListener("pageshow", shown);
+  }, []);
+  const take = (provider: ProviderKey) => (event: MouseEvent<HTMLAnchorElement>) => {
+    if (taken !== undefined) {
+      // One way at a time: a second click, on any of the buttons, goes nowhere.
+      event.preventDefault();
+      return;
+    }
+    setTaken(provider);
+  };
+  const admitsOf = (admits: NonNullable<RestProvider["admits"]>): string => {
+    if (admits.organization !== null) {
+      return words.admits.organization(admits.organization);
+    }
+    if (admits.domains.length > 0) {
+      return words.admits.domains(admits.domains.join(", "));
+    }
+    return words.admits.listed;
+  };
   return (
     <div className="sc-sign-in">
       {props.brand?.symbol !== undefined && (
@@ -44,18 +74,89 @@ export function SignIn(props: SignInProps) {
         </Callout>
       ) : (
         <div className="sc-sign-in-ways">
-          {props.providers.map((provider) => (
-            // A real navigation: signing in happens at the provider, not in this page.
-            <a
-              key={provider.key}
-              className="sc-button sc-button-primary sc-sign-in-button"
-              href={loginPath(provider.key, props.returnTo)}
-            >
-              {words.continueWith(provider.label)}
-            </a>
-          ))}
+          {props.providers.map((provider) => {
+            const going = taken === provider.key;
+            return (
+              <div key={provider.key} className="sc-sign-in-way">
+                {/* A real navigation: signing in happens at the provider, not in this page. */}
+                <a
+                  className={cx(
+                    "sc-button sc-button-primary sc-sign-in-button",
+                    going && "sc-sign-in-button-going",
+                  )}
+                  href={loginPath(provider.key, props.returnTo)}
+                  aria-busy={going ? true : undefined}
+                  aria-disabled={taken !== undefined && !going ? true : undefined}
+                  onClick={take(provider.key)}
+                >
+                  <ProviderMark provider={provider.key} />
+                  <span className="sc-sign-in-button-label">
+                    {going ? words.going(provider.label) : words.signInWith(provider.label)}
+                  </span>
+                  {going && (
+                    <span className="sc-spinner sc-sign-in-spinner" aria-hidden="true">
+                      <span className="sc-spinner-ring" />
+                    </span>
+                  )}
+                </a>
+                {provider.admits !== undefined && (
+                  <p className="sc-sign-in-admits">{admitsOf(provider.admits)}</p>
+                )}
+              </div>
+            );
+          })}
         </div>
       )}
     </div>
   );
 }
+
+/**
+ * The provider's mark, as people know it from sign-in buttons elsewhere, beside the label and
+ * decorative: the host's own mark in the button's text color, Google's lettermark on a light
+ * tile, since its colors are its own. A provider without a mark shows the label alone.
+ */
+function ProviderMark(props: { readonly provider: ProviderKey }) {
+  if (props.provider === "gh") {
+    return (
+      <svg
+        className="sc-sign-in-mark"
+        viewBox="0 0 16 16"
+        width="20"
+        height="20"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <path
+          fill="currentColor"
+          d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"
+        />
+      </svg>
+    );
+  }
+  if (props.provider === "google") {
+    return (
+      <span className="sc-sign-in-mark sc-sign-in-mark-tile" aria-hidden="true">
+        <svg viewBox="0 0 48 48" width="16" height="16" aria-hidden="true" focusable="false">
+          <path
+            fill="#FFC107"
+            d="M43.611 20.083H42V20H24v8h11.303c-1.649 4.657-6.08 8-11.303 8-6.627 0-12-5.373-12-12s5.373-12 12-12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 12.955 4 4 12.955 4 24s8.955 20 20 20 20-8.955 20-20c0-1.341-.138-2.65-.389-3.917z"
+          />
+          <path
+            fill="#FF3D00"
+            d="M6.306 14.691l6.571 4.819C14.655 15.108 18.961 12 24 12c3.059 0 5.842 1.154 7.961 3.039l5.657-5.657C34.046 6.053 29.268 4 24 4 16.318 4 9.656 8.337 6.306 14.691z"
+          />
+          <path
+            fill="#4CAF50"
+            d="M24 44c5.166 0 9.86-1.977 13.409-5.192l-6.19-5.238A11.91 11.91 0 0 1 24 36c-5.202 0-9.619-3.317-11.283-7.946l-6.522 5.025C9.505 39.556 16.227 44 24 44z"
+          />
+          <path
+            fill="#1976D2"
+            d="M43.611 20.083H42V20H24v8h11.303a12.04 12.04 0 0 1-4.087 5.571l.003-.002 6.19 5.238C36.971 39.205 44 34 44 24c0-1.341-.138-2.65-.389-3.917z"
+          />
+        </svg>
+      </span>
+    );
+  }
+  return null;
+}

package/src/components/ui.tsx

@@ -11,6 +11,7 @@ import {
 } from "../api.js";
 import { dayOf, daysBetween, formatDay, today } from "../dates.js";
 import { useLanguage, useWords } from "../i18n/index.js";
+import { useRemotePictureSrc } from "./remote-pictures.js";
 
 // Small building blocks. Each one is a class in styles/console.css and nothing more. Classes
 // are prefixed `sc-` so that a custom console's own styles never collide with them. The words
@@ -96,13 +97,15 @@ export function personName(person: {
 }
 
 /**
- * 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 name instead.
+ * A person's picture as the git host serves it, read through the console (ADR-0048): loaded
+ * lazily, without a referrer, and gone as 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?: "xs" | "sm" | "md" | "lg";
 }) {
+  const remote = useRemotePictureSrc();
   const size = props.size ?? "md";
   const initial = personName(props.person).slice(0, 1).toUpperCase();
   if (props.person.avatar === null) {
@@ -118,7 +121,7 @@ export function Avatar(props: {
   return (
     <img
       className={cx("sc-avatar", `sc-avatar-${size}`)}
-      src={props.person.avatar}
+      src={remote(props.person.avatar)}
       alt=""
       loading="lazy"
       decoding="async"

package/src/components/workspace.tsx

@@ -2,6 +2,7 @@ import { type FormEvent, useId, useMemo, useState } from "react";
 import {
   PEOPLE_VISIBILITIES,
   type PeopleVisibility,
+  type RestMe,
   type RestWorkspace,
   type RestWorkspacePatch,
   WEEK_STARTS,
@@ -117,6 +118,12 @@ const labelOf = (zone: TimeZoneOption): string =>
 
 export interface WorkspaceSettingsViewProps {
   readonly workspace: RestWorkspace;
+  /**
+   * The console's version with the range of command versions it takes, as `GET /api/v1/me`
+   * says them (ADR-0025): shown first, so that whoever keeps the agents' commands up to date
+   * reads here which console they must match. Left out, nothing is said.
+   */
+  readonly console?: RestMe["console"];
 }
 
 /** The settings as they stand, one row each; where they are changed is the page's business. */
@@ -128,6 +135,17 @@ export function WorkspaceSettingsView(props: WorkspaceSettingsViewProps) {
   const offset = zone === undefined ? undefined : offsetOf(zone, new Date());
   return (
     <dl className="sc-settings-list">
+      {props.console !== undefined && (
+        <div className="sc-settings-item">
+          <dt>{settings.consoleVersion}</dt>
+          <dd>
+            {props.console.version}
+            <span className="sc-settings-note">
+              {settings.consoleTakes(props.console.clientRange)}
+            </span>
+          </dd>
+        </div>
+      )}
       <div className="sc-settings-item">
         <dt>{settings.peopleVisibility}</dt>
         <dd>{words.vocabulary.peopleVisibility[peopleVisibilityOf(props.workspace)]}</dd>