@skillcdn/console 0.3.1 → 0.4.0

package/src/components/board.tsx

@@ -20,7 +20,6 @@ import { useWords } from "../i18n/index.js";
 import type { BoardFilter } from "../router.js";
 import { isPlainClick } from "./shell.js";
 import {
-  Avatar,
   Badge,
   Button,
   CategoryBadge,
@@ -28,6 +27,7 @@ import {
   DueBadge,
   PriorityBadge,
   personName,
+  Workers,
 } from "./ui.js";
 
 // The board: one column per state, the tasks in it, the sooner due first and the newest after.
@@ -59,8 +59,17 @@ export interface BoardProps {
   readonly onEdit?: ((task: RestTask) => void) | undefined;
   /** Called when a task is put away from its card's menu (ADR-0029, ADR-0030). Left out, the menu offers nothing of it. */
   readonly onArchive?: ((task: RestTask) => void) | undefined;
+  /**
+   * The columns folded to a strip until a person opens them, with their count and the way to open
+   * them; a folded column still takes a card dragged onto it. What is finished, by default, so that
+   * the work at hand has the room; `[]` folds none.
+   */
+  readonly folded?: readonly TaskState[] | undefined;
 }
 
+/** The columns a board folds unless told otherwise: the work that is over. */
+export const FOLDED_STATES: readonly TaskState[] = ["done", "dropped"];
+
 /** How far a mouse travels on a card before the press is a drag and not a click. */
 const DRAG_SLACK = 4;
 /**
@@ -160,12 +169,12 @@ export function TaskCard(props: TaskCardProps) {
           <DueBadge dueOn={task.dueOn} state={task.state} today={props.today} />
         )}
         {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>
         )}
         <span className="sc-card-spacer" />
-        {task.assignee !== null && <Avatar person={task.assignee} size="sm" />}
+        <Workers workers={task.workers} size="sm" />
       </div>
     </article>
   );
@@ -364,6 +373,19 @@ export function Board(props: BoardProps) {
   const { onMove } = props;
   const board = useRef<HTMLDivElement>(null);
   const [drag, setDrag] = useState<Drag | null>(null);
+  // The foldable columns a person has opened on this board; the others of them stay folded.
+  const [opened, setOpened] = useState<ReadonlySet<TaskState>>(() => new Set());
+  const foldable = props.folded ?? FOLDED_STATES;
+  const toggle = (state: TaskState) =>
+    setOpened((before) => {
+      const after = new Set(before);
+      if (after.has(state)) {
+        after.delete(state);
+      } else {
+        after.add(state);
+      }
+      return after;
+    });
   // 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;
@@ -511,38 +533,65 @@ export function Board(props: BoardProps) {
     >
       {TASK_STATES.map((state) => {
         const tasks = props.tasks.filter((task) => task.state === state).sort(byDue);
+        const name = words.vocabulary.state[state];
+        const canFold = foldable.includes(state);
+        const folded = canFold && !opened.has(state);
         return (
           <section
             key={state}
             className={cx(
               "sc-column",
               `sc-column-${state}`,
+              folded && "sc-column-folded",
               dragging?.over === state && "sc-column-over",
             )}
-            aria-label={words.vocabulary.state[state]}
+            aria-label={name}
             data-column={state}
           >
             <header className="sc-column-header">
-              <h2 className="sc-column-title">{words.vocabulary.state[state]}</h2>
+              <h2 className="sc-column-title">{name}</h2>
               <span className="sc-column-count">{tasks.length}</span>
+              {canFold && (
+                <button
+                  type="button"
+                  className="sc-column-toggle"
+                  aria-expanded={!folded}
+                  aria-label={folded ? words.board.unfold(name) : words.board.fold(name)}
+                  title={folded ? words.board.unfold(name) : words.board.fold(name)}
+                  onClick={() => toggle(state)}
+                >
+                  <svg viewBox="0 0 16 16" aria-hidden="true">
+                    <path
+                      d={folded ? "M6 4l4 4-4 4" : "M10 4l-4 4 4 4"}
+                      fill="none"
+                      stroke="currentColor"
+                      strokeWidth="1.5"
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                    />
+                  </svg>
+                </button>
+              )}
             </header>
-            <div className="sc-column-body">
-              {tasks.map((task) => (
-                <TaskCard
-                  key={task.id}
-                  task={task}
-                  href={props.taskHref(task)}
-                  onOpen={props.onOpen}
-                  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}
-            </div>
+            {!folded && (
+              <div className="sc-column-body">
+                {tasks.map((task) => (
+                  <TaskCard
+                    key={task.id}
+                    task={task}
+                    href={props.taskHref(task)}
+                    onOpen={props.onOpen}
+                    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}
+              </div>
+            )}
           </section>
         );
       })}
@@ -571,23 +620,59 @@ export function Board(props: BoardProps) {
   );
 }
 
-/** What the filter keeps of the board: a category or none, a goal or none, a person, one's own. */
+/** What a task is found by: its title, its number, its owner and its workers, its category. */
+function wordsOf(task: RestTask): string {
+  return [
+    task.title,
+    `#${task.number}`,
+    personName(task.owner),
+    task.owner.login,
+    ...task.workers.flatMap((worker) => [personName(worker), worker.login]),
+    task.category?.name ?? "",
+  ]
+    .join("\n")
+    .toLowerCase();
+}
+
+/**
+ * What the filter keeps of the board: a category or none, a goal or none, a person, one's own,
+ * and the tasks that contain every word typed, whatever the case.
+ */
 export function filterTasks(
   tasks: readonly RestTask[],
   filter: BoardFilter,
   me?: RestPerson | undefined,
 ): RestTask[] {
+  const wanted =
+    filter.words === undefined
+      ? []
+      : filter.words
+          .toLowerCase()
+          .split(/\s+/)
+          .filter((word) => word.length > 0);
   return tasks.filter((task) => {
+    if (wanted.length > 0) {
+      const found = wordsOf(task);
+      if (!wanted.every((word) => found.includes(word))) {
+        return false;
+      }
+    }
     if (filter.category !== undefined && (task.category?.key ?? "") !== filter.category) {
       return false;
     }
     if (filter.goal !== undefined && (task.goalId ?? "") !== filter.goal) {
       return false;
     }
-    if (filter.person !== undefined && task.assignee?.id !== filter.person) {
+    if (
+      filter.person !== undefined &&
+      !task.workers.some((worker) => worker.id === filter.person)
+    ) {
       return false;
     }
-    if (filter.mine === true && (me === undefined || task.assignee?.id !== me.id)) {
+    if (
+      filter.mine === true &&
+      (me === undefined || !task.workers.some((worker) => worker.id === me.id))
+    ) {
       return false;
     }
     return true;
@@ -627,6 +712,20 @@ export function BoardFilters(props: BoardFiltersProps) {
       aria-label={words.aria}
       onSubmit={(event) => event.preventDefault()}
     >
+      <label className="sc-field sc-field-inline sc-filters-words">
+        <span className="sc-visually-hidden">{words.words}</span>
+        <input
+          className="sc-input"
+          type="search"
+          placeholder={words.words}
+          value={filter.words ?? ""}
+          onChange={(event) =>
+            event.target.value.trim() === ""
+              ? change({}, "words")
+              : change({ words: event.target.value })
+          }
+        />
+      </label>
       <label className="sc-field sc-field-inline">
         <span className="sc-visually-hidden">{words.anyCategory}</span>
         <select