@skillcdn/console 0.1.18 → 0.1.20

package/src/components/board.tsx

@@ -1,4 +1,13 @@
-import type { ReactNode } from "react";
+import {
+  type KeyboardEvent as ReactKeyboardEvent,
+  type ReactNode,
+  type PointerEvent as ReactPointerEvent,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import { createPortal } from "react-dom";
 import {
   type RestCategory,
   type RestGoal,
@@ -9,6 +18,8 @@ import {
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import type { BoardFilter } from "../router.js";
+import { OPEN_TASK_STATES } from "../vocabulary.js";
+import { isPlainClick } from "./shell.js";
 import {
   Avatar,
   Badge,
@@ -23,38 +34,104 @@ import {
 // The board: one column per state, the tasks in it, the sooner due first and the newest after.
 // A card says what a person needs at a glance and nothing more: the number and the title, the
 // category, what is due, who is on it, and what blocks it. Whether an agent is at it is not
-// said, since the board cannot know (ADR-0020); the task's page shows its runs. It takes its
-// data as props and nothing from the network; what it is told on a click goes back up.
+// said, since the board cannot know (ADR-0020); the task's page shows its runs. A card is moved
+// to another column by hand: pressed anywhere but on its title and its menu, then dragged, with
+// a mouse at once and under a finger once it has rested a moment, so that a finger that moves
+// at once scrolls as it always did. The card's menu holds the rest: the way to the task's form,
+// and the way to put the task away once it is done or dropped (ADR-0029). The keyboard changes a
+// state on the task's page. The board takes its data as props and nothing from the network;
+// what it is told on a click goes back up.
 
 export interface BoardProps {
   readonly tasks: readonly RestTask[];
   /** The link to a task's own page, as the composition routes it. */
   readonly taskHref: (task: RestTask) => string;
   readonly onOpen: (task: RestTask) => void;
-  /** Called when a person moves a task to another column. Left out, the board is read-only. */
+  /** Called when a person moves a task to another column. Left out, the cards stay where they are. */
   readonly onMove?: ((task: RestTask, state: TaskState) => void) | undefined;
   /** The day to count due days from; the browser's today when left out. */
   readonly today?: string | undefined;
   /** What a column shows when it has nothing; the way to write the first task, for example. */
   readonly empty?: ReactNode;
+  /** Where a task is edited, as the composition routes it; given, each card's menu leads there. */
+  readonly editHref?: ((task: RestTask) => string) | undefined;
+  /** Called when the menu's edit is chosen, to show the form without leaving the page; left out, the link is followed. */
+  readonly onEdit?: ((task: RestTask) => void) | undefined;
+  /** Called when a task done or dropped is put away from its card's menu (ADR-0029). Left out, the menu offers nothing of it. */
+  readonly onArchive?: ((task: RestTask) => void) | undefined;
+}
+
+/** How far a mouse travels on a card before the press is a drag and not a click. */
+const DRAG_SLACK = 4;
+/**
+ * How long a finger rests on a card before the card comes loose, and how far it may wander
+ * meanwhile; a finger that moves sooner is scrolling the page, not moving the card.
+ */
+const HOLD_MS = 300;
+const HOLD_SLACK = 8;
+/** How near the pointer comes to the board's edge before the board scrolls to show more columns. */
+const EDGE = 48;
+const EDGE_STEP = 12;
+
+/** The state a column stands for, read off its `data-column`; nothing for a value that is not one. */
+export function columnStateOf(value: string | null | undefined): TaskState | undefined {
+  return TASK_STATES.find((state) => state === value);
+}
+
+/** A card on its way to another column. */
+interface Drag {
+  readonly task: RestTask;
+  readonly from: { readonly x: number; readonly y: number };
+  readonly x: number;
+  readonly y: number;
+  /** Whether the card has come loose: the mouse has travelled, or the finger has rested. */
+  readonly moving: boolean;
+  /** Whether the press is a finger's, which must rest before the card comes loose. */
+  readonly hold: boolean;
+  /** The column under the pointer, or none. */
+  readonly over: TaskState | undefined;
 }
 
-export function TaskCard(props: {
+export interface TaskCardProps {
   readonly task: RestTask;
   readonly href: string;
   readonly onOpen: (task: RestTask) => void;
-  readonly onMove?: ((task: RestTask, state: TaskState) => void) | undefined;
   readonly today?: string | undefined;
-}) {
+  /** Called when the card is pressed anywhere but on its controls, to drag it to another column; left out, the card stays where it is. */
+  readonly onPress?: ((task: RestTask, event: ReactPointerEvent<HTMLElement>) => void) | undefined;
+  /** Whether the card is on its way to another column. */
+  readonly dragging?: boolean | undefined;
+  /** Where the task is edited; given, the card's menu leads there. */
+  readonly editHref?: string | undefined;
+  /** Called when the menu's edit is chosen, to show the form without leaving the page; left out, the link is followed. */
+  readonly onEdit?: ((task: RestTask) => void) | undefined;
+  /** Called when the task is put away from the card's menu; offered once the task is done or dropped (ADR-0029). */
+  readonly onArchive?: ((task: RestTask) => void) | undefined;
+}
+
+export function TaskCard(props: TaskCardProps) {
   const words = useWords();
-  const { task } = props;
+  const { task, onPress } = props;
+  const closed = !OPEN_TASK_STATES.includes(task.state);
+  const archive = closed ? props.onArchive : undefined;
   return (
-    <article className="sc-card" aria-label={`#${task.number} ${task.title}`}>
+    <article
+      className={cx(
+        "sc-card",
+        onPress !== undefined && "sc-card-movable",
+        props.dragging === true && "sc-card-dragging",
+      )}
+      aria-label={`#${task.number} ${task.title}`}
+      onPointerDown={onPress === undefined ? undefined : (event) => onPress(task, event)}
+    >
+      {(props.editHref !== undefined || archive !== undefined) && (
+        <CardMenu task={task} editHref={props.editHref} onEdit={props.onEdit} onArchive={archive} />
+      )}
       <a
         className="sc-card-title"
         href={props.href}
         onClick={(event) => {
-          if (event.button === 0 && !event.metaKey && !event.ctrlKey && !event.shiftKey) {
+          if (isPlainClick(event)) {
             event.preventDefault();
             props.onOpen(task);
           }
@@ -76,25 +153,179 @@ export function TaskCard(props: {
         <span className="sc-card-spacer" />
         {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
       </div>
-      {props.onMove !== undefined && (
-        <label className="sc-card-move">
-          <span className="sc-visually-hidden">{words.board.moveTo}</span>
-          <select
-            value={task.state}
-            onChange={(event) => props.onMove?.(task, event.target.value as TaskState)}
-          >
-            {TASK_STATES.map((state) => (
-              <option key={state} value={state}>
-                {words.vocabulary.state[state]}
-              </option>
-            ))}
-          </select>
-        </label>
-      )}
     </article>
   );
 }
 
+/** Where the menu stands: from the top and the right edge of the window, over everything. */
+interface MenuPlace {
+  readonly top: number;
+  readonly right: number;
+}
+
+const MENU_GAP = 4;
+const MENU_MARGIN = 8;
+
+/**
+ * The card's menu: three dots in its corner, which open the ways a card has beyond being moved,
+ * each given by the composition. The menu is rendered over the document, so that no column
+ * clips it; a press elsewhere, the escape key, a scroll or a change of the window closes it.
+ */
+function CardMenu(props: {
+  readonly task: RestTask;
+  readonly editHref: string | undefined;
+  readonly onEdit: ((task: RestTask) => void) | undefined;
+  readonly onArchive: ((task: RestTask) => void) | undefined;
+}) {
+  const words = useWords();
+  const [place, setPlace] = useState<MenuPlace | null>(null);
+  const button = useRef<HTMLButtonElement>(null);
+  const panel = useRef<HTMLDivElement>(null);
+  const open = place !== null;
+  const close = useCallback(() => setPlace(null), []);
+  const toggle = () => {
+    const rect = button.current?.getBoundingClientRect();
+    if (open || rect === undefined) {
+      close();
+      return;
+    }
+    setPlace({
+      top: rect.bottom + MENU_GAP,
+      right: Math.max(MENU_MARGIN, window.innerWidth - rect.right),
+    });
+  };
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    // Opened near the bottom of the window, the menu stands above its button instead.
+    const shown = panel.current?.getBoundingClientRect();
+    const anchor = button.current?.getBoundingClientRect();
+    if (
+      shown !== undefined &&
+      anchor !== undefined &&
+      shown.bottom > window.innerHeight - MENU_MARGIN
+    ) {
+      setPlace((current) =>
+        current === null
+          ? current
+          : { ...current, top: Math.max(MENU_MARGIN, anchor.top - MENU_GAP - shown.height) },
+      );
+    }
+    panel.current?.querySelector<HTMLElement>("[role='menuitem']")?.focus({ preventScroll: true });
+    const away = (event: PointerEvent) => {
+      const target = event.target;
+      if (
+        target instanceof Node &&
+        (panel.current?.contains(target) === true || button.current?.contains(target) === true)
+      ) {
+        return;
+      }
+      close();
+    };
+    const key = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        close();
+        button.current?.focus();
+      }
+    };
+    document.addEventListener("pointerdown", away);
+    document.addEventListener("keydown", key);
+    window.addEventListener("scroll", close, true);
+    window.addEventListener("resize", close);
+    return () => {
+      document.removeEventListener("pointerdown", away);
+      document.removeEventListener("keydown", key);
+      window.removeEventListener("scroll", close, true);
+      window.removeEventListener("resize", close);
+    };
+  }, [open, close]);
+  // The arrow keys walk the items, around the ends.
+  const walk = (event: ReactKeyboardEvent<HTMLDivElement>) => {
+    if (event.key !== "ArrowDown" && event.key !== "ArrowUp") {
+      return;
+    }
+    event.preventDefault();
+    const items = [...(panel.current?.querySelectorAll<HTMLElement>("[role='menuitem']") ?? [])];
+    if (items.length === 0) {
+      return;
+    }
+    const active = document.activeElement;
+    const at = active instanceof HTMLElement ? items.indexOf(active) : -1;
+    const step = event.key === "ArrowDown" ? 1 : -1;
+    items[(at + step + items.length) % items.length]?.focus();
+  };
+  const { task } = props;
+  return (
+    <>
+      <button
+        type="button"
+        ref={button}
+        className="sc-card-menu-button"
+        aria-label={words.board.menu}
+        aria-haspopup="menu"
+        aria-expanded={open}
+        onClick={toggle}
+      >
+        <svg viewBox="0 0 16 16" aria-hidden="true">
+          <circle cx="8" cy="3" r="1.5" fill="currentColor" />
+          <circle cx="8" cy="8" r="1.5" fill="currentColor" />
+          <circle cx="8" cy="13" r="1.5" fill="currentColor" />
+        </svg>
+      </button>
+      {place !== null &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div
+            ref={panel}
+            className="sc-card-menu"
+            role="menu"
+            aria-label={`#${task.number} ${task.title}`}
+            style={{ top: place.top, right: place.right }}
+            onKeyDown={walk}
+            onBlur={(event) => {
+              const next = event.relatedTarget;
+              if (!(next instanceof Node && panel.current?.contains(next) === true)) {
+                close();
+              }
+            }}
+          >
+            {props.editHref !== undefined && (
+              <a
+                role="menuitem"
+                className="sc-menu-link"
+                href={props.editHref}
+                onClick={(event) => {
+                  close();
+                  if (props.onEdit !== undefined && isPlainClick(event)) {
+                    event.preventDefault();
+                    props.onEdit(task);
+                  }
+                }}
+              >
+                {words.common.edit}
+              </a>
+            )}
+            {props.onArchive !== undefined && (
+              <button
+                type="button"
+                role="menuitem"
+                className="sc-menu-link"
+                onClick={() => {
+                  close();
+                  props.onArchive?.(task);
+                }}
+              >
+                {words.task.archive}
+              </button>
+            )}
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+}
+
 /** The order a column reads in: what is due soonest first, what has no day after, the newest first among those. */
 export function byDue(a: RestTask, b: RestTask): number {
   if (a.dueOn !== b.dueOn) {
@@ -111,15 +342,144 @@ export function byDue(a: RestTask, b: RestTask): number {
 
 export function Board(props: BoardProps) {
   const words = useWords();
+  const { onMove } = props;
+  const board = useRef<HTMLDivElement>(null);
+  const [drag, setDrag] = useState<Drag | null>(null);
+  // What the pointer's release reads, so that the move is made outside a state update.
+  const current = useRef<Drag | null>(null);
+  current.current = drag;
+  // Whether the held card has come loose, kept outside the state so that the touch that follows
+  // the hold at once is answered before the state has rendered.
+  const loose = useRef(false);
+
+  const press = useCallback((task: RestTask, event: ReactPointerEvent<HTMLElement>) => {
+    // The card's own controls, its title and its menu, are pressed for themselves.
+    if (
+      event.button !== 0 ||
+      (event.target instanceof Element && event.target.closest("a, button") !== null)
+    ) {
+      return;
+    }
+    const hold = event.pointerType !== "mouse";
+    if (!hold) {
+      // The press is the drag's beginning and nothing else: no text is selected on the way.
+      event.preventDefault();
+    }
+    const from = { x: event.clientX, y: event.clientY };
+    setDrag({ task, from, x: from.x, y: from.y, moving: false, hold, over: undefined });
+  }, []);
+
+  // While a card is held, the pointer is followed over the whole document: the column under it
+  // is marked, the board scrolls when the pointer nears its edge, and the release moves the task.
+  // A finger's hold is timed here, and once the card has come loose the page no longer scrolls
+  // under the finger, nor asks for the menu a long press would otherwise bring up.
+  const held = drag !== null;
+  useEffect(() => {
+    if (!held) {
+      return;
+    }
+    const columnUnder = (x: number, y: number) =>
+      columnStateOf(
+        document.elementFromPoint(x, y)?.closest<HTMLElement>("[data-column]")?.dataset.column,
+      );
+    const follow = (event: PointerEvent) => {
+      const { clientX: x, clientY: y } = event;
+      setDrag((before) => {
+        if (before === null) {
+          return before;
+        }
+        const travelled = Math.hypot(x - before.from.x, y - before.from.y);
+        if (!before.moving) {
+          // A finger that wanders before it has rested is scrolling, and lets the card go; a
+          // mouse that has barely moved is still only pressing.
+          if (before.hold) {
+            return travelled > HOLD_SLACK ? null : { ...before, x, y };
+          }
+          if (travelled <= DRAG_SLACK) {
+            return { ...before, x, y };
+          }
+          loose.current = true;
+        }
+        return { ...before, x, y, moving: true, over: columnUnder(x, y) };
+      });
+      const element = board.current;
+      if (element !== null && loose.current) {
+        const rect = element.getBoundingClientRect();
+        if (x < rect.left + EDGE) {
+          element.scrollLeft -= EDGE_STEP;
+        } else if (x > rect.right - EDGE) {
+          element.scrollLeft += EDGE_STEP;
+        }
+      }
+    };
+    const loosen = () => {
+      setDrag((before) => {
+        if (before === null || before.moving) {
+          return before;
+        }
+        loose.current = true;
+        return { ...before, moving: true, over: columnUnder(before.x, before.y) };
+      });
+    };
+    const release = (event: PointerEvent) => {
+      const last = current.current;
+      if (last?.moving === true && event.type === "pointerup") {
+        const over = columnUnder(event.clientX, event.clientY);
+        if (over !== undefined && over !== last.task.state) {
+          onMove?.(last.task, over);
+        }
+      }
+      loose.current = false;
+      setDrag(null);
+    };
+    const block = (event: TouchEvent) => {
+      if (loose.current) {
+        event.preventDefault();
+      }
+    };
+    const quiet = (event: Event) => event.preventDefault();
+    const timer = current.current?.hold === true ? window.setTimeout(loosen, HOLD_MS) : undefined;
+    window.addEventListener("pointermove", follow);
+    window.addEventListener("pointerup", release);
+    window.addEventListener("pointercancel", release);
+    document.addEventListener("touchmove", block, { passive: false });
+    document.addEventListener("contextmenu", quiet);
+    return () => {
+      if (timer !== undefined) {
+        window.clearTimeout(timer);
+      }
+      window.removeEventListener("pointermove", follow);
+      window.removeEventListener("pointerup", release);
+      window.removeEventListener("pointercancel", release);
+      document.removeEventListener("touchmove", block);
+      document.removeEventListener("contextmenu", quiet);
+      loose.current = false;
+    };
+  }, [held, onMove]);
+
+  /** The drag under way, once the card has come loose; nothing while a card is merely pressed. */
+  const dragging = drag?.moving === true ? drag : null;
   return (
-    <div className="sc-board">
+    <div
+      ref={board}
+      className={cx(
+        "sc-board",
+        onMove !== undefined && "sc-board-movable",
+        dragging !== null && "sc-board-dragging",
+      )}
+    >
       {TASK_STATES.map((state) => {
         const tasks = props.tasks.filter((task) => task.state === state).sort(byDue);
         return (
           <section
             key={state}
-            className={cx("sc-column", `sc-column-${state}`)}
+            className={cx(
+              "sc-column",
+              `sc-column-${state}`,
+              dragging?.over === state && "sc-column-over",
+            )}
             aria-label={words.vocabulary.state[state]}
+            data-column={state}
           >
             <header className="sc-column-header">
               <h2 className="sc-column-title">{words.vocabulary.state[state]}</h2>
@@ -132,8 +492,12 @@ export function Board(props: BoardProps) {
                   task={task}
                   href={props.taskHref(task)}
                   onOpen={props.onOpen}
-                  onMove={props.onMove}
                   today={props.today}
+                  onPress={onMove === undefined ? undefined : press}
+                  dragging={dragging?.task.id === task.id}
+                  editHref={props.editHref?.(task)}
+                  onEdit={props.onEdit}
+                  onArchive={props.onArchive}
                 />
               ))}
               {tasks.length === 0 && state === "idea" && props.empty}
@@ -141,6 +505,15 @@ export function Board(props: BoardProps) {
           </section>
         );
       })}
+      {dragging !== null && (
+        <div
+          className="sc-drag-ghost"
+          aria-hidden="true"
+          style={{ transform: `translate(${dragging.x + 12}px, ${dragging.y + 12}px)` }}
+        >
+          <span className="sc-card-number">#{dragging.task.number}</span> {dragging.task.title}
+        </div>
+      )}
     </div>
   );
 }

package/src/components/comments.tsx

@@ -11,31 +11,16 @@ import {
 } from "../api.js";
 import { useWords } from "../i18n/index.js";
 import { DecisionCard, type DecisionCardProps } from "./decision-list.js";
+import { isPicture, namedFile, placed, placing, unusedName } from "./files.js";
 import { Markdown } from "./markdown.js";
+import { Lightbox, PictureThumb, usePicture } from "./pictures.js";
 import { RunCard } from "./runs.js";
 import { Button, formatBytes, PersonChip, personName, Time } from "./ui.js";
 
 // The discussion on a task (ADR-0024): what people and agents said about it, each word with
 // the files put in it, read in one thread with the runs on the task and the decisions about
-// it, in the order they came. Takes its data as props and nothing from the network.
-
-/** The kinds of picture the pages show in place: what a browser renders and cannot run. */
-const PICTURE_TYPES: ReadonlySet<string> = new Set([
-  "image/png",
-  "image/jpeg",
-  "image/gif",
-  "image/webp",
-]);
-
-/** Whether a file is a picture the pages show in place, by the media type the console kept. */
-export function isPicture(contentType: string): boolean {
-  return PICTURE_TYPES.has(contentType);
-}
-
-/** Whether the text places a file by its name, as `![words](name)` or `![words](./name)`. */
-function placed(body: string, name: string): boolean {
-  return body.includes(`](${name})`) || body.includes(`](./${name})`);
-}
+// it, in the order they came. A picture is a thumbnail that opens large over the page. Takes
+// its data as props and nothing from the network.
 
 export interface CommentCardProps {
   readonly comment: RestComment;
@@ -48,11 +33,12 @@ export interface CommentCardProps {
 export function CommentCard(props: CommentCardProps) {
   const words = useWords();
   const { comment } = props;
+  const pictures = usePicture();
   const hrefOf = (file: RestCommentFile) => props.fileHref?.(file);
   // A picture the text names by its file name is shown where the text puts it; the rest of
   // the files follow the text, pictures in place and everything else as a link.
   const named = (source: string): string | undefined => {
-    const name = source.startsWith("./") ? source.slice(2) : source;
+    const name = namedFile(source);
     const file = comment.files.find(
       (candidate) => candidate.file.name === name && isPicture(candidate.file.contentType),
     );
@@ -77,7 +63,12 @@ export function CommentCard(props: CommentCardProps) {
         </span>
       </header>
       {comment.body.trim().length > 0 && (
-        <Markdown source={comment.body} docHref={props.docHref} fileSrc={named} />
+        <Markdown
+          source={comment.body}
+          docHref={props.docHref}
+          fileSrc={named}
+          onOpenPicture={pictures.open}
+        />
       )}
       {following.length > 0 && (
         <ul className="sc-comment-files" aria-label={words.comments.files}>
@@ -87,14 +78,15 @@ export function CommentCard(props: CommentCardProps) {
             if (href !== undefined && isPicture(file.contentType)) {
               return (
                 <li key={attached.id} className="sc-comment-picture">
-                  <a href={href} rel="noopener nofollow ugc" target="_blank">
-                    <img
-                      src={href}
-                      alt={words.comments.picture(file.name)}
-                      loading="lazy"
-                      decoding="async"
-                    />
-                  </a>
+                  <PictureThumb
+                    picture={{
+                      src: href,
+                      alt: words.comments.picture(file.name),
+                      name: file.name,
+                      size: file.size,
+                    }}
+                    onOpen={pictures.open}
+                  />
                   <span className="sc-muted">
                     {file.name}, {formatBytes(file.size)}
                   </span>
@@ -116,6 +108,7 @@ export function CommentCard(props: CommentCardProps) {
           })}
         </ul>
       )}
+      <Lightbox picture={pictures.shown} onClose={pictures.close} />
     </article>
   );
 }
@@ -131,23 +124,6 @@ export interface CommentFormProps {
   readonly busy?: boolean | undefined;
 }
 
-/** A name for a file among those chosen already: the same, or with a count before its extension. */
-function unusedName(name: string, taken: readonly File[]): string {
-  const names = new Set(taken.map((file) => file.name));
-  if (!names.has(name)) {
-    return name;
-  }
-  const dot = name.lastIndexOf(".");
-  const stem = dot > 0 ? name.slice(0, dot) : name;
-  const extension = dot > 0 ? name.slice(dot) : "";
-  for (let n = 2; ; n += 1) {
-    const candidate = `${stem}-${n}${extension}`;
-    if (!names.has(candidate)) {
-      return candidate;
-    }
-  }
-}
-
 export function CommentForm(props: CommentFormProps) {
   const words = useWords().comments;
   const [body, setBody] = useState("");
@@ -161,7 +137,10 @@ export function CommentForm(props: CommentFormProps) {
       if (held.length >= MAX_FILES_PER_COMMENT) {
         break;
       }
-      const name = unusedName(file.name, held);
+      const name = unusedName(
+        file.name,
+        held.map((kept) => kept.name),
+      );
       const kept = name === file.name ? file : new File([file], name, { type: file.type });
       held = [...held, kept];
       added.push(kept);
@@ -179,9 +158,11 @@ export function CommentForm(props: CommentFormProps) {
     event.preventDefault();
     const added = add(pasted);
     if (added.length > 0) {
-      const lines = added.map((file) => `![](${file.name})`).join("\n");
       setBody((current) =>
-        current.trim().length === 0 ? lines : `${current.trimEnd()}\n\n${lines}`,
+        placing(
+          current,
+          added.map((file) => file.name),
+        ),
       );
     }
   };