@skillcdn/console 0.1.19 → 0.1.20

package/src/components/board.tsx

@@ -1,4 +1,5 @@
 import {
+  type KeyboardEvent as ReactKeyboardEvent,
   type ReactNode,
   type PointerEvent as ReactPointerEvent,
   useCallback,
@@ -6,6 +7,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { createPortal } from "react-dom";
 import {
   type RestCategory,
   type RestGoal,
@@ -16,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,
@@ -31,27 +35,40 @@ import {
 // 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. A card is moved
-// to another column by its grip, with a mouse or a finger, and by the select on it with the
-// keyboard; either way the move goes back up and the board is told. It takes its data as props
-// and nothing from the network; what it is told on a click goes back up.
+// 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 the tasks put away are (ADR-0029); given, the done and dropped columns lead there. */
-  readonly archiveHref?: string | undefined;
+  /** 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 pointer travels on the grip before the card is dragged, and not pressed. */
+/** 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;
@@ -67,47 +84,54 @@ interface Drag {
   readonly from: { readonly x: number; readonly y: number };
   readonly x: number;
   readonly y: number;
-  /** Whether the pointer has travelled far enough for this to be a drag. */
+  /** 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's grip is pressed, to drag it to another column; left out, the card has no grip. */
-  readonly onGrip?: ((task: RestTask, event: ReactPointerEvent<HTMLElement>) => void) | 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={cx("sc-card", props.dragging === true && "sc-card-dragging")}
+      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.onGrip !== undefined && (
-        <button
-          type="button"
-          className="sc-card-grip"
-          title={words.board.grip}
-          aria-hidden="true"
-          tabIndex={-1}
-          onPointerDown={(event) => props.onGrip?.(task, event)}
-        >
-          ⋮⋮
-        </button>
+      {(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);
           }
@@ -129,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) {
@@ -170,43 +348,62 @@ export function Board(props: BoardProps) {
   // 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 grip = useCallback((task: RestTask, event: ReactPointerEvent<HTMLElement>) => {
-    if (event.pointerType === "mouse" && event.button !== 0) {
+  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;
     }
-    // The press is the drag's beginning and nothing else: no text is selected on the way.
-    event.preventDefault();
+    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, over: undefined });
+    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;
-      const under = document.elementFromPoint(x, y)?.closest<HTMLElement>("[data-column]");
       setDrag((before) => {
         if (before === null) {
           return before;
         }
-        const moving =
-          before.moving || Math.hypot(x - before.from.x, y - before.from.y) > DRAG_SLACK;
-        return {
-          ...before,
-          x,
-          y,
-          moving,
-          over: moving ? columnStateOf(under?.dataset.column) : undefined,
-        };
+        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) {
+      if (element !== null && loose.current) {
         const rect = element.getBoundingClientRect();
         if (x < rect.left + EDGE) {
           element.scrollLeft -= EDGE_STEP;
@@ -215,27 +412,62 @@ export function Board(props: BoardProps) {
         }
       }
     };
-    const release = () => {
+    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 && last.over !== undefined && last.over !== last.task.state) {
-        onMove?.(last.task, last.over);
+      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 pointer has travelled; nothing while a card is merely pressed. */
+  /** 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 ref={board} className={cx("sc-board", dragging !== null && "sc-board-dragging")}>
+    <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 (
@@ -251,14 +483,7 @@ export function Board(props: BoardProps) {
           >
             <header className="sc-column-header">
               <h2 className="sc-column-title">{words.vocabulary.state[state]}</h2>
-              <span className="sc-column-meta">
-                {props.archiveHref !== undefined && (state === "done" || state === "dropped") && (
-                  <a className="sc-column-archive" href={props.archiveHref}>
-                    {words.board.archive}
-                  </a>
-                )}
-                <span className="sc-column-count">{tasks.length}</span>
-              </span>
+              <span className="sc-column-count">{tasks.length}</span>
             </header>
             <div className="sc-column-body">
               {tasks.map((task) => (
@@ -267,10 +492,12 @@ export function Board(props: BoardProps) {
                   task={task}
                   href={props.taskHref(task)}
                   onOpen={props.onOpen}
-                  onMove={onMove}
                   today={props.today}
-                  onGrip={onMove === undefined ? undefined : grip}
+                  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}

package/src/components/comments.tsx

@@ -11,6 +11,7 @@ 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";
@@ -21,24 +22,6 @@ import { Button, formatBytes, PersonChip, personName, Time } from "./ui.js";
 // 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.
 
-/** 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})`);
-}
-
 export interface CommentCardProps {
   readonly comment: RestComment;
   /** Where a file put in the comment is read: the project's address for it. Left out, a file is named and not linked. */
@@ -55,7 +38,7 @@ export function CommentCard(props: CommentCardProps) {
   // 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),
     );
@@ -141,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("");
@@ -171,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);
@@ -189,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),
+        ),
       );
     }
   };