@skillcdn/console 0.3.2 → 0.4.1

package/src/components/shell.tsx

@@ -186,6 +186,41 @@ function PersonMenu(props: {
 
 export function Shell(props: ShellProps) {
   const words = useWords();
+  // Where the tabs scroll sideways, the current one is brought into the bar's view.
+  const tabs = useRef<HTMLElement>(null);
+  const current = props.nav.find((item) => item.current)?.href;
+  useEffect(() => {
+    const bar = tabs.current;
+    if (current === undefined || bar === null) {
+      return;
+    }
+    const bring = () => {
+      const tab = bar.querySelector<HTMLElement>(".sc-tab-current");
+      if (tab === null) {
+        return;
+      }
+      const left = tab.offsetLeft - bar.offsetLeft;
+      // The last part of the bar fades where it scrolls (the stylesheet's mask): a tab there
+      // counts as out of view.
+      const seen = bar.scrollWidth > bar.clientWidth ? bar.clientWidth * 0.85 : bar.clientWidth;
+      if (left < bar.scrollLeft || left + tab.offsetWidth > bar.scrollLeft + seen) {
+        bar.scrollLeft = left - (bar.clientWidth - tab.offsetWidth) / 2;
+      }
+    };
+    bring();
+    // The tabs grow once the page's face has loaded, and the bar narrows with the window: either
+    // may put the current tab out of view again.
+    if (typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const watch = new ResizeObserver(bring);
+    watch.observe(bar);
+    const inner = bar.firstElementChild;
+    if (inner !== null) {
+      watch.observe(inner);
+    }
+    return () => watch.disconnect();
+  }, [current]);
   const follow = (href: string) => (event: React.MouseEvent) => {
     if (isPlainClick(event)) {
       event.preventDefault();
@@ -259,7 +294,7 @@ export function Shell(props: ShellProps) {
           </div>
         </div>
         {props.nav.length > 0 && (
-          <nav className="sc-tabs" aria-label={words.shell.pages}>
+          <nav ref={tabs} className="sc-tabs" aria-label={words.shell.pages}>
             <div className="sc-tabs-inner">
               {props.nav.map((item) => (
                 <a

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/task-list.tsx

@@ -45,7 +45,7 @@ export function TaskList(props: TaskListProps) {
                 {task.category !== null && <CategoryBadge category={task.category} />}
                 {props.showState === true && <StateBadge state={task.state} />}
                 {task.openDecisions > 0 && (
-                  <Badge tone="warning" title={words.board.decisionsTitle}>
+                  <Badge tone="warning" kind="count" title={words.board.decisionsTitle}>
                     {words.board.decisions(task.openDecisions)}
                   </Badge>
                 )}

package/src/components/task-view.tsx

@@ -142,26 +142,56 @@ export function TaskView(props: TaskViewProps) {
   return (
     <div className="sc-task">
       <header className="sc-task-header">
-        {parent !== undefined && (
-          <p className="sc-task-parent">
-            {words.task.partOf}{" "}
-            <a href={props.taskHref(parent)}>
-              #{parent.number} {parent.title}
-            </a>
-          </p>
-        )}
-        <h1 className="sc-task-title">
-          <span className="sc-card-number">#{task.number}</span> {task.title}
-        </h1>
-        <div className="sc-task-badges">
-          <StateBadge state={task.state} />
-          {task.archivedAt !== null && <Badge tone="neutral">{words.task.archived}</Badge>}
-          {task.category !== null && <CategoryBadge category={task.category} />}
-          <PriorityBadge priority={task.priority} />
-          {task.dueOn !== null && (
-            <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+        <div className="sc-task-heading">
+          {parent !== undefined && (
+            <p className="sc-task-parent">
+              {words.task.partOf}{" "}
+              <a href={props.taskHref(parent)}>
+                #{parent.number} {parent.title}
+              </a>
+            </p>
           )}
+          <h1 className="sc-task-title">
+            <span className="sc-card-number">#{task.number}</span> {task.title}
+          </h1>
+          <div className="sc-task-badges">
+            <StateBadge state={task.state} />
+            {task.archivedAt !== null && <Badge tone="neutral">{words.task.archived}</Badge>}
+            {task.category !== null && <CategoryBadge category={task.category} />}
+            <PriorityBadge priority={task.priority} />
+            {task.dueOn !== null && (
+              <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
+            )}
+          </div>
         </div>
+        {props.formHref !== undefined && (
+          <div className="sc-task-actions">
+            <a className="sc-button sc-button-secondary" href={props.formHref("edit")}>
+              {words.common.edit}
+            </a>
+            <a className="sc-button sc-button-secondary" href={props.formHref("ask")}>
+              {words.task.raiseDecision}
+            </a>
+            {props.onArchive !== undefined && task.archivedAt === null && (
+              <Button
+                variant="secondary"
+                disabled={props.busy === true}
+                onClick={() => props.onArchive?.(task)}
+              >
+                {words.task.archive}
+              </Button>
+            )}
+            {props.onRestore !== undefined && task.archivedAt !== null && (
+              <Button
+                variant="secondary"
+                disabled={props.busy === true}
+                onClick={() => props.onRestore?.(task)}
+              >
+                {words.task.restore}
+              </Button>
+            )}
+          </div>
+        )}
       </header>
       <div className="sc-task-body">
         <div className="sc-task-main">
@@ -193,7 +223,6 @@ export function TaskView(props: TaskViewProps) {
             <section className="sc-task-section" aria-label={words.task.raiseDecision}>
               <h2 className="sc-section-title">{words.task.raiseDecision}</h2>
               <DecisionForm
-                tasks={props.tasks}
                 taskId={task.id}
                 busy={props.busy}
                 onSubmit={props.onRaiseDecision}
@@ -360,34 +389,6 @@ export function TaskView(props: TaskViewProps) {
               </dd>
             </div>
           </dl>
-          {props.formHref !== undefined && (
-            <div className="sc-task-actions">
-              <a className="sc-button sc-button-secondary" href={props.formHref("edit")}>
-                {words.common.edit}
-              </a>
-              <a className="sc-button sc-button-secondary" href={props.formHref("ask")}>
-                {words.task.raiseDecision}
-              </a>
-              {props.onArchive !== undefined && task.archivedAt === null && (
-                <Button
-                  variant="secondary"
-                  disabled={props.busy === true}
-                  onClick={() => props.onArchive?.(task)}
-                >
-                  {words.task.archive}
-                </Button>
-              )}
-              {props.onRestore !== undefined && task.archivedAt !== null && (
-                <Button
-                  variant="secondary"
-                  disabled={props.busy === true}
-                  onClick={() => props.onRestore?.(task)}
-                >
-                  {words.task.restore}
-                </Button>
-              )}
-            </div>
-          )}
         </aside>
       </div>
     </div>

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
@@ -43,11 +44,23 @@ export function Button(
 
 export function Badge(props: {
   readonly tone?: "neutral" | "accent" | "point" | "success" | "warning" | "danger";
+  /** What the badge says, which the stylesheet shows in its shape: a state carries a dot, a priority is outlined, a due day is a square-cornered tag, a count is figures. */
+  readonly kind?: "state" | "priority" | "due" | "count" | undefined;
+  /** A class of the badge's own beside the tone's and the kind's, for a step within a kind. */
+  readonly className?: string | undefined;
   readonly title?: string;
   readonly children: ReactNode;
 }) {
   return (
-    <span className={cx("sc-badge", `sc-badge-${props.tone ?? "neutral"}`)} title={props.title}>
+    <span
+      className={cx(
+        "sc-badge",
+        `sc-badge-${props.tone ?? "neutral"}`,
+        props.kind !== undefined && `sc-badge-kind-${props.kind}`,
+        props.className,
+      )}
+      title={props.title}
+    >
       {props.children}
     </span>
   );
@@ -84,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) {
@@ -106,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"
@@ -195,7 +210,7 @@ export const ROLE_LABELS: Readonly<Record<PersonRole, string>> = {
 export function RoleBadge(props: { readonly role: PersonRole }) {
   const words = useWords();
   return (
-    <Badge tone={props.role === "admin" ? "point" : "neutral"}>
+    <Badge tone={props.role === "admin" ? "accent" : "neutral"}>
       {words.vocabulary.role[props.role]}
     </Badge>
   );
@@ -211,7 +226,11 @@ export function StateBadge(props: { readonly state: TaskState }) {
         : props.state === "in_progress" || props.state === "in_review"
           ? "accent"
           : "neutral";
-  return <Badge tone={tone}>{words.vocabulary.state[props.state]}</Badge>;
+  return (
+    <Badge tone={tone} kind="state">
+      {words.vocabulary.state[props.state]}
+    </Badge>
+  );
 }
 
 export function PriorityBadge(props: { readonly priority: TaskPriority }) {
@@ -221,7 +240,11 @@ export function PriorityBadge(props: { readonly priority: TaskPriority }) {
   }
   const tone =
     props.priority === "urgent" ? "danger" : props.priority === "high" ? "point" : "neutral";
-  return <Badge tone={tone}>{words.vocabulary.priority[props.priority]}</Badge>;
+  return (
+    <Badge tone={tone} kind="priority">
+      {words.vocabulary.priority[props.priority]}
+    </Badge>
+  );
 }
 
 /** A category as a badge, in its colour: a class the stylesheet paints, never a value typed by hand. */
@@ -245,7 +268,11 @@ export function GoalStateBadge(props: { readonly state: GoalState }) {
         : props.state === "dropped"
           ? "neutral"
           : "neutral";
-  return <Badge tone={tone}>{words.vocabulary.goalState[props.state]}</Badge>;
+  return (
+    <Badge tone={tone} kind="state">
+      {words.vocabulary.goalState[props.state]}
+    </Badge>
+  );
 }
 
 /**
@@ -266,29 +293,45 @@ export function DueBadge(props: {
   const days = daysBetween(now, props.dueOn);
   const day = formatDay(props.dueOn, tag);
   if (!open) {
-    return <Badge tone="neutral">{words.board.due.on(day)}</Badge>;
+    return (
+      <Badge tone="neutral" kind="due">
+        {words.board.due.on(day)}
+      </Badge>
+    );
   }
   if (days < 0) {
     return (
-      <Badge tone="danger" title={day}>
+      <Badge tone="danger" kind="due" title={day}>
         {words.board.due.overdue(-days)}
       </Badge>
     );
   }
   if (days === 0) {
-    return <Badge tone="warning">{words.board.due.today}</Badge>;
+    return (
+      <Badge tone="point" kind="due" className="sc-badge-due-today">
+        {words.board.due.today}
+      </Badge>
+    );
   }
   if (days === 1) {
-    return <Badge tone="warning">{words.board.due.tomorrow}</Badge>;
+    return (
+      <Badge tone="point" kind="due">
+        {words.board.due.tomorrow}
+      </Badge>
+    );
   }
   if (days <= 7) {
     return (
-      <Badge tone="point" title={day}>
+      <Badge tone="warning" kind="due" title={day}>
         {words.board.due.inDays(days)}
       </Badge>
     );
   }
-  return <Badge tone="neutral">{words.board.due.on(day)}</Badge>;
+  return (
+    <Badge tone="neutral" kind="due">
+      {words.board.due.on(day)}
+    </Badge>
+  );
 }
 
 /** How far a goal is, read from its tasks: the done ones, the ones at work, and the rest. */
@@ -402,3 +445,16 @@ export function Time(props: {
     </time>
   );
 }
+
+/** A link that reads as a button: where a form is, for instance. */
+export function LinkButton(props: {
+  readonly href: string;
+  readonly variant?: "primary" | "secondary";
+  readonly children: ReactNode;
+}) {
+  return (
+    <a className={`sc-button sc-button-${props.variant ?? "secondary"}`} href={props.href}>
+      {props.children}
+    </a>
+  );
+}