@heycys/gallery 0.1.2 → 0.2.1

package/packs/gallery/todos/kit.js

@@ -10,37 +10,51 @@
 // wrote is the one edited last, which the facts would put first: once a box is checked here the groups keep
 // the order they were drawn in, a document new to the card first). A click on an item's words opens its
 // document there, at the item's block where it has an id, else at the document (context.workspace.open:
-// the workbench goes there); a click on a group's title opens the document. It reads again whenever the workspace says its to-dos changed (the `data` signal, "todos":
-// a to-do added, checked or taken out in any document, a document renamed or gone) and when its settings
-// do (`source`). Its two settings, the card's form (the grip at its top right › 设置…), are kept in its data part `settings`,
-// which the board writes and this block only reads: `document` (a document's slug: its to-dos alone) and
-// `done` (the done ones too, checked and struck through). Where the workspace cannot be read (an exported
-// file, where it has no server; a server that does not answer) it says so in a line; where nothing writes
-// it (an exported file: no setTodo) its boxes are only drawn. The words are the page's language (the UI's
-// where Gallery says it, else the page's lang). Its head is the cards' (the kit's card tokens): the chip,
-// a checked list, before its title, how many to-dos there are its quiet note at the end (共 6 项); under it,
-// where there are any, how many are done of all (of the document asked, or of every one): a ring of the
-// share done, its percent in the middle, and a key of the two counts. An item's headings are said after it
-// but for the document's own title (its first heading, as often), which the group's title above says. The
-// face says by `data-state` what it shows: items, every one done (the ring then its picture in the middle
-// of the room, 待办都完成了 under it, no key) or none.
+// the workbench goes there); a click on a group's title opens the document. It reads again whenever the
+// workspace says its to-dos changed (the `data` signal, "todos": a to-do added, checked or taken out in any
+// document, a document renamed or gone) and when its settings do (`source`). Its two settings, the card's
+// form (the grip at its top right › 设置…), are kept in its data part `settings`, which the board writes and
+// this block only reads: `document` (a document's slug: its to-dos alone) and `done` (the done ones too,
+// checked and struck through). Where the workspace cannot be read (an exported file, where it has no
+// server; a server that does not answer) it says so; where nothing writes it (an exported file: no
+// setTodo) its boxes are only drawn. The words are the page's language (the UI's where Gallery says it,
+// else the page's lang).
+//
+// Its face (the pack's design B, in the kit's card tokens), laid out by the card's cells (`data-layout`, by
+// context.size, read again on `layout`): a head of the chip (a checked list), 我的待办 and its quiet meta;
+// how many are done of all (of the document asked, or of every one); and the list, grouped under each
+// document's icon and title (small, gray, its open count after it), each item a box, its words and, under
+// them (beside them on a wide card), the headings it stands under, faint, but for the document's own
+// title (its first heading, as often), which the group's says; the list fades at its foot while there is
+// more under it. The share done is drawn by the room: on a 4 × 4 card ("default") a line (已完成 19 / 27,
+// the percent at its end) over a row of ticks, one an item (a bar past 48); on a 4 × 6 ("tall") a ring
+// of the share, its percent in the middle, beside the open count large (8 项没完成) and 已完成 19 / 27; on
+// an 8 × 4 ("wide") a ring at the left over a key (已完成, 未完成, 来自文档). The head's meta says how many are
+// open (8 项; 来自 4 篇文档 on a tall card). The face says by `data-state` what it shows: items, every one
+// done (a full green ring with a tick, 待办都完成了), none, or the workspace not read.
 
 const WORDS = {
   zh: {
     title: "我的待办",
-    empty: "所有文档里的待办会出现在这里",
+    empty: ["还没有待办", "所有文档里的待办会出现在这里", "在文档里输入 [] 就能新建一项"],
+    noneIn: ["这篇文档里没有待办", "在文档里输入 [] 就能新建一项"],
     allDone: "待办都完成了",
-    noneIn: "这篇文档里没有待办",
-    offline: "在 Gallery 里打开时，这里列出所有文档里的待办",
-    failed: "读不到工作区的待办",
+    allDoneSaid: (/** @type {number} */ all) => `${all} 项，全都勾掉了`,
+    offline: ["在 Gallery 里打开时显示", "现在读不到工作区"],
+    failed: ["读不到工作区的待办", "过一会儿会再读"],
     open: (/** @type {string} */ title) => `打开「${title}」`,
     path: (/** @type {string[]} */ path) => path.join(" › "),
     check: "标记为完成",
     uncheck: "标记为未完成",
     done: "已完成",
     left: "未完成",
+    from: "来自文档",
+    progress: (/** @type {number} */ done, /** @type {number} */ all) => ["已完成 ", String(done), ` / ${all}`],
+    openUnit: "项没完成",
     share: (/** @type {number} */ done, /** @type {number} */ all) => `${all} 项待办完成了 ${done} 项`,
+    openCount: (/** @type {number} */ count) => `${count} 项`,
     all: (/** @type {number} */ count) => `共 ${count} 项`,
+    documents: (/** @type {number} */ count) => `来自 ${count} 篇文档`,
     refused: {
       changed: "这一项刚被改过，已重新读取",
       ambiguous: "文档里有几项一样的待办，请在文档里勾选",
@@ -53,19 +67,25 @@ const WORDS = {
   },
   en: {
     title: "My to-dos",
-    empty: "The to-dos of every document will show here",
+    empty: ["No to-dos yet", "The to-dos of every document show here", "Type [] in a document to make one"],
+    noneIn: ["This document has no to-dos", "Type [] in it to make one"],
     allDone: "Every to-do is done",
-    noneIn: "This document has no to-dos",
-    offline: "Opened in Gallery, this lists the to-dos of every document",
-    failed: "The workspace's to-dos could not be read",
+    allDoneSaid: (/** @type {number} */ all) => `All ${all} checked off`,
+    offline: ["Shown when opened in Gallery", "The workspace cannot be read now"],
+    failed: ["The workspace's to-dos could not be read", "It reads them again in a while"],
     open: (/** @type {string} */ title) => `Open “${title}”`,
     path: (/** @type {string[]} */ path) => path.join(" › "),
     check: "Mark as done",
     uncheck: "Mark as not done",
     done: "Done",
     left: "Open",
+    from: "Documents",
+    progress: (/** @type {number} */ done, /** @type {number} */ all) => ["", String(done), ` of ${all} done`],
+    openUnit: "open",
     share: (/** @type {number} */ done, /** @type {number} */ all) => `${done} of ${all} to-dos done`,
+    openCount: (/** @type {number} */ count) => `${count} open`,
     all: (/** @type {number} */ count) => `${count} in all`,
+    documents: (/** @type {number} */ count) => `from ${count} ${count === 1 ? "document" : "documents"}`,
     refused: {
       changed: "This to-do just changed: read again",
       ambiguous: "The document has several to-dos alike: check it in the document",
@@ -80,6 +100,8 @@ const WORDS = {
 
 /** How long a line saying why a check was refused stays, in ms. */
 const SAID_FOR = 4000;
+/** The most items the ticks draw one each; past them, a bar. */
+const MOST_TICKS = 48;
 
 /** The language the page speaks: the UI's where Gallery says it (data-ge-language), else its lang's. */
 function languageOf(/** @type {HTMLElement} */ root) {
@@ -97,7 +119,7 @@ function askedOf(settings) {
   return { document: typeof table.document === "string" && table.document ? table.document : null, done: table.done === true };
 }
 
-/** @typedef {{ ref: DocTodoRef, text: string, done: boolean, slug: string, title: string, path: string[] }} Todo */
+/** @typedef {{ ref: DocTodoRef, text: string, done: boolean, slug: string, title: string, icon?: string | null, path: string[] }} Todo */
 
 /**
  * An item by its document, its headings and its words: what names it while the card lives, whether it has
@@ -108,10 +130,11 @@ const itemKey = (todo) => JSON.stringify([todo.slug, todo.path, todo.text]);
 
 /**
  * The to-dos (workspace.query("todos")'s data) as the card shows them, of `asked`: { groups, open,
- * all }, groups [{ slug, title, items }] in the order the documents come (the one edited last first),
- * items those shown (not done, or all with `asked.done`, and the ones checked on this card: `kept`);
- * `open` how many are not done, `all` how many there are of the document asked or of the workspace.
- * `order` (the slugs as drawn before, or null): the groups keep that order, a document not in it before them.
+ * all, documents }, groups [{ slug, title, icon, items }] in the order the documents come (the one edited
+ * last first), items those shown (not done, or all with `asked.done`, and the ones checked on this card:
+ * `kept`); `open` how many are not done, `all` how many there are of the document asked or of the
+ * workspace, `documents` how many documents hold one open. `order` (the slugs as drawn before, or null):
+ * the groups keep that order, a document not in it before them.
  * @param {Todo[]} todos
  * @param {{ document: string | null, done: boolean }} asked
  * @param {Set<string>} kept
@@ -119,21 +142,21 @@ const itemKey = (todo) => JSON.stringify([todo.slug, todo.path, todo.text]);
  */
 function groupsOf(todos, asked, kept, order = null) {
   const mine = todos.filter((todo) => asked.document === null || todo.slug === asked.document);
-  /** @type {Map<string, { slug: string, title: string, items: Todo[] }>} */
+  /** @type {Map<string, { slug: string, title: string, icon: string | null, items: Todo[] }>} */
   const groups = new Map();
   for (const todo of mine) {
     if (todo.done && !asked.done && !kept.has(itemKey(todo))) continue;
-    if (!groups.has(todo.slug)) groups.set(todo.slug, { slug: todo.slug, title: todo.title, items: [] });
+    if (!groups.has(todo.slug)) groups.set(todo.slug, { slug: todo.slug, title: todo.title, icon: todo.icon ?? null, items: [] });
     groups.get(todo.slug)?.items.push(todo);
   }
   const placed = [...groups.values()];
   if (order) placed.sort((a, b) => order.indexOf(a.slug) - order.indexOf(b.slug)); // stable: those not in it keep the order they came in
-  return { groups: placed, open: mine.filter((todo) => !todo.done).length, all: mine.length };
+  return { groups: placed, open: mine.filter((todo) => !todo.done).length, all: mine.length, documents: new Set(mine.filter((todo) => !todo.done).map((todo) => todo.slug)).size };
 }
 
 /**
- * The line the card says where it shows no item, or null where it shows some: none in the workspace,
- * none in the one document asked, all done.
+ * What the card says where it shows no item, or null where it shows some: none in the workspace, none in
+ * the one document asked, all done.
  * @param {{ groups: unknown[], all: number }} shown
  * @param {{ document: string | null }} asked
  * @param {"zh" | "en"} language
@@ -142,7 +165,15 @@ function emptyLine(shown, asked, language) {
   if (shown.groups.length > 0) return null;
   const words = WORDS[language];
   if (shown.all > 0) return words.allDone;
-  return asked.document === null ? words.empty : words.noneIn;
+  return asked.document === null ? words.empty[1] : words.noneIn[0];
+}
+
+/** What a document's icon is, as Gallery writes its value: a glyph (/icons/…), a picture of its folder (assets/…), an emoji, or none. @param {string | null | undefined} value */
+function iconKindOf(value) {
+  if (typeof value !== "string" || !value) return null;
+  if (value.startsWith("/icons/")) return "glyph";
+  if (value.startsWith("assets/")) return "image";
+  return "emoji";
 }
 
 /**
@@ -159,9 +190,34 @@ function made(tag, kind, text) {
   return node;
 }
 
+// A document's icon, as the sidebar draws it: its picture from the server's icon route, a glyph masked
+// in the muted color, or none (style.css draws a page).
+function iconFor(/** @type {string} */ slug, /** @type {string | null} */ value) {
+  const kind = iconKindOf(value);
+  const icon = made("span", "icon");
+  icon.setAttribute("aria-hidden", "true");
+  if (!kind || value === null) return icon;
+  const address = `/__gallery/edit/icon?value=${encodeURIComponent(value)}&slug=${encodeURIComponent(slug)}`;
+  if (kind === "glyph") {
+    icon.classList.add("gallery-todos-glyph");
+    icon.style.setProperty("--gallery-todos-icon", `url("${address}")`);
+    return icon;
+  }
+  const picture = document.createElement("img");
+  picture.alt = "";
+  picture.src = address;
+  picture.decoding = "async";
+  icon.classList.add("gallery-todos-picture");
+  icon.append(picture);
+  return icon;
+}
+
+const CHIP = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="6.5" height="6.5" rx="1.8"/><path d="M5.2 7.3l1.3 1.3 2-2.1"/><rect x="3.5" y="13.5" width="6.5" height="6.5" rx="1.8"/><path d="M13.5 7.2h7M13.5 16.8h7"/></svg>';
+const TICK = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5.5 12.5l4 4 9-9"/></svg>';
+
 DocKit.component({
   id: "gallery/todos",
-  on: ["source", "data"],
+  on: ["source", "data", "layout"],
   mount(host, context) {
     const language = languageOf(document.documentElement);
     const words = WORDS[language];
@@ -170,34 +226,58 @@ DocKit.component({
     const count = made("span", "count");
     const chip = made("span", "chip");
     chip.setAttribute("aria-hidden", "true");
-    chip.innerHTML = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5.5L5 7l2.5-2.5M3.5 11.5L5 13l2.5-2.5M3.5 17.5L5 19l2.5-2.5M11 6h9M11 12h9M11 18h9"/></svg>';
+    chip.innerHTML = CHIP;
     head.append(chip, made("span", "title", words.title), count);
-    // How many are done of all: a ring of the share done (the good green once all are) and a key of the two counts.
+    // How many are done of all: a line and its ticks, a ring and its percent, the open count large, a key.
     const summary = made("div", "summary");
     summary.hidden = true;
     summary.setAttribute("role", "img");
+    const progress = made("p", "progress");
+    const progressWords = made("span", "progress-words");
+    const sharePercent = made("span", "share");
+    progress.append(progressWords, sharePercent);
+    const ticks = made("span", "ticks");
+    ticks.setAttribute("aria-hidden", "true");
     const ring = made("span", "ring");
-    ring.innerHTML = '<svg viewBox="0 0 100 100" aria-hidden="true"><circle class="gallery-todos-track" cx="50" cy="50" r="42"/><circle class="gallery-todos-arc" cx="50" cy="50" r="42" pathLength="100" transform="rotate(-90 50 50)"/></svg>';
-    const percent = made("span", "percent");
-    ring.append(percent);
+    ring.innerHTML = '<svg aria-hidden="true"><circle class="gallery-todos-track"/><circle class="gallery-todos-arc" pathLength="100"/></svg><span class="gallery-todos-percent"></span>';
+    const percent = /** @type {HTMLElement} */ (ring.querySelector(".gallery-todos-percent"));
+    const big = made("div", "big");
+    const bigLine = made("p", "big-line");
+    const openNumber = made("span", "open");
+    bigLine.append(openNumber, made("span", "open-unit", words.openUnit));
+    const bigDone = made("p", "big-done");
+    big.append(bigLine, bigDone);
     const key = made("dl", "key");
-    const doneCount = made("dd", "key-count");
-    const leftCount = made("dd", "key-count");
-    const doneRow = made("div", "key-row");
-    doneRow.dataset.kind = "done";
-    doneRow.append(made("dt", "key-name", words.done), doneCount);
-    const leftRow = made("div", "key-row");
-    leftRow.dataset.kind = "left";
-    leftRow.append(made("dt", "key-name", words.left), leftCount);
-    key.append(doneRow, leftRow);
-    summary.append(ring, key);
+    const keyRow = (/** @type {string} */ kind, /** @type {string} */ name) => {
+      const row = made("div", "key-row");
+      row.dataset.kind = kind;
+      const value = made("dd", "key-count");
+      row.append(made("dt", "key-name", name), value);
+      key.append(row);
+      return value;
+    };
+    const doneCount = keyRow("done", words.done);
+    const leftCount = keyRow("left", words.left);
+    const fromCount = keyRow("from", words.from);
+    summary.append(progress, ticks, ring, big, key);
     const list = made("div", "list");
+    // Where it shows no item: the cards' empty face (a soft square with the list's picture, or the full ring).
+    const empty = made("div", "empty");
+    const emptyPicture = made("span", "empty-picture");
+    emptyPicture.setAttribute("aria-hidden", "true");
     const line = made("p", "line");
+    const hint = made("p", "hint");
+    empty.append(emptyPicture, line, hint);
+    empty.hidden = true;
     const note = made("p", "note");
     note.hidden = true;
     note.setAttribute("role", "status");
-    face.append(head, summary, list, line, note);
+    face.append(head, summary, list, empty, note);
     host.append(face);
+    // The list fades at its foot while there is more under it.
+    const fade = () => list.toggleAttribute("data-more", list.scrollHeight - list.scrollTop - list.clientHeight > 1);
+    list.addEventListener("scroll", fade, { passive: true });
+    context.signal?.addEventListener("abort", () => list.removeEventListener("scroll", fade), { once: true });
     const workspace = context.workspace;
     if (!workspace) return void context.fail(new Error("its manifest's needs hold \"workspace\": context.workspace is not there"));
     const open = (/** @type {{ slug: string, block?: string | null }} */ target) => workspace.open(target);
@@ -212,13 +292,37 @@ DocKit.component({
     /** @type {string[] | null} */
     let held = null; // that order as it was when the first box was checked here: the groups keep it from then on
 
-    const say = (/** @type {string | null} */ words) => {
-      line.hidden = words === null;
-      line.textContent = words ?? "";
+    const layoutOf = () => {
+      const size = context.size;
+      return !size ? "default" : size.w >= 8 ? "wide" : size.h >= 6 ? "tall" : "default";
+    };
+    // A ring of `size` px, its stroke `width` px, the share done (`share`, 0 to 1).
+    const drawRing = (/** @type {number} */ size, /** @type {number} */ width, /** @type {number} */ share) => {
+      const svg = /** @type {SVGSVGElement} */ (ring.querySelector("svg"));
+      svg.setAttribute("viewBox", `0 0 ${size} ${size}`);
+      svg.setAttribute("width", String(size));
+      svg.setAttribute("height", String(size));
+      for (const circle of svg.querySelectorAll("circle")) {
+        circle.setAttribute("cx", String(size / 2));
+        circle.setAttribute("cy", String(size / 2));
+        circle.setAttribute("r", String((size - width) / 2));
+        circle.setAttribute("stroke-width", String(width));
+      }
+      svg.querySelector(".gallery-todos-arc")?.setAttribute("stroke-dasharray", `${Math.max(0, Math.min(1, share)) * 100} 100`);
+    };
+    // The empty face: its words, and its picture (the list's, or the full green ring with a tick).
+    const sayEmpty = (/** @type {string[] | null} */ said, /** @type {"list" | "done"} */ picture = "list") => {
+      empty.hidden = said === null;
+      list.hidden = said !== null;
+      if (said === null) return;
+      empty.dataset.picture = picture;
+      emptyPicture.innerHTML = picture === "done" ? `<svg viewBox="0 0 72 72"><circle class="gallery-todos-done-ring" cx="36" cy="36" r="32.5"/></svg>${TICK}` : CHIP;
+      line.textContent = said[0];
+      hint.replaceChildren(...said.slice(1).flatMap((piece, index) => (index === 0 ? [piece] : [document.createElement("br"), piece])));
     };
     let noteTimer = 0;
-    const tell = (/** @type {string} */ words) => {
-      note.textContent = words;
+    const tell = (/** @type {string} */ said) => {
+      note.textContent = said;
       note.hidden = false;
       clearTimeout(noteTimer);
       noteTimer = context.timeout(() => { note.hidden = true; }, SAID_FOR);
@@ -248,29 +352,61 @@ DocKit.component({
 
     // The list drawn anew of what was read, scrolled where it was.
     const draw = () => {
+      const layout = layoutOf();
+      face.dataset.layout = layout;
       if (!last) return;
       const asked = lastAsked;
       const shown = groupsOf(last, asked, kept, held);
       order = shown.groups.map((group) => group.slug);
       const top = list.scrollTop;
-      count.textContent = shown.all > 0 ? words.all(shown.all) : "";
-      // The summary of all the to-dos asked (of one document, or of every one), none where there are none.
       const done = shown.all - shown.open;
-      summary.hidden = shown.all === 0;
-      summary.toggleAttribute("data-all", shown.all > 0 && done === shown.all);
-      summary.style.setProperty("--gallery-todos-share", String(shown.all > 0 ? done / shown.all : 0));
+      const allDone = shown.groups.length === 0 && shown.all > 0;
+      count.textContent = shown.all === 0 ? "" : allDone ? words.all(shown.all) : layout === "tall" ? words.documents(shown.documents) : words.openCount(shown.open);
+      // The summary of all the to-dos asked (of one document, or of every one), none where there are none.
+      summary.hidden = shown.all === 0 || allDone;
       summary.setAttribute("aria-label", words.share(done, shown.all));
-      if (shown.all > 0) percent.replaceChildren(String(Math.floor((100 * done) / shown.all)), made("span", "percent-sign", "%"));
-      else percent.replaceChildren();
+      const share = shown.all > 0 ? done / shown.all : 0;
+      const whole = shown.all > 0 ? String(Math.floor(100 * share)) : "";
+      const [before, middle, after] = words.progress(done, shown.all);
+      const bold = document.createElement("b");
+      bold.textContent = middle;
+      progressWords.replaceChildren(before, bold, after);
+      sharePercent.textContent = shown.all > 0 ? `${whole}%` : "";
+      const value = made("span", "percent-value", whole);
+      value.append(made("span", "percent-sign", "%"));
+      percent.replaceChildren(value);
+      drawRing(layout === "wide" ? 96 : 64, layout === "wide" ? 9 : 7, share);
+      openNumber.textContent = String(shown.open);
+      const [doneBefore, doneMiddle, doneAfter] = words.progress(done, shown.all);
+      bigDone.textContent = `${doneBefore}${doneMiddle}${doneAfter}`;
       doneCount.textContent = String(done);
       leftCount.textContent = String(shown.open);
+      fromCount.textContent = String(shown.documents);
+      // A tick an item (done first), or one bar past MOST_TICKS.
+      if (shown.all > MOST_TICKS) {
+        const on = made("i", "tick");
+        on.classList.add("gallery-todos-on");
+        on.style.flex = String(done);
+        const off = made("i", "tick");
+        off.style.flex = String(shown.open);
+        ticks.replaceChildren(on, off);
+      } else {
+        ticks.replaceChildren(...Array.from({ length: shown.all }, (_, index) => {
+          const tick = made("i", "tick");
+          tick.classList.toggle("gallery-todos-on", index < done);
+          return tick;
+        }));
+      }
       face.dataset.state = shown.groups.length > 0 ? "items" : shown.all > 0 ? "done" : "none";
       list.replaceChildren(...shown.groups.map((group) => {
         const section = made("section", "group");
-        const title = made("button", "doc", group.title);
-        title.type = "button";
-        title.title = words.open(group.title);
-        title.addEventListener("click", () => open({ slug: group.slug }));
+        const title = made("div", "group-head");
+        const doc = made("button", "doc");
+        doc.type = "button";
+        doc.title = words.open(group.title);
+        doc.append(iconFor(group.slug, group.icon), group.title);
+        doc.addEventListener("click", () => open({ slug: group.slug }));
+        title.append(doc, made("span", "group-count", String(group.items.filter((todo) => !todo.done).length)));
         const items = made("ul", "items");
         for (const todo of group.items) {
           const item = made("li", "item");
@@ -289,14 +425,21 @@ DocKit.component({
             box.setAttribute("aria-checked", String(todo.done));
             box.title = todo.done ? words.uncheck : words.check;
             box.setAttribute("aria-label", `${todo.done ? words.uncheck : words.check}: ${todo.text}`);
-            box.append(made("span", "box"));
+            const square = made("span", "box");
+            if (todo.done) square.innerHTML = TICK;
+            box.append(square);
             box.addEventListener("click", (event) => {
               event.stopPropagation();
               check(todo);
             });
             item.append(box);
             button.append(text);
-          } else button.append(made("span", "box"), text);
+          } else {
+            const square = made("span", "box");
+            if (todo.done) square.innerHTML = TICK;
+            item.append(square);
+            button.append(text);
+          }
           // Its headings, but for the document's title the group's title above says (its first heading, as often).
           const path = todo.path[0] === group.title ? todo.path.slice(1) : todo.path;
           if (path.length > 0) button.append(made("span", "path", words.path(path)));
@@ -308,7 +451,10 @@ DocKit.component({
         return section;
       }));
       list.scrollTop = top;
-      say(emptyLine(shown, asked, language));
+      if (shown.groups.length > 0) sayEmpty(null);
+      else if (shown.all > 0) sayEmpty([words.allDone, words.allDoneSaid(shown.all)], "done");
+      else sayEmpty(asked.document === null ? words.empty : words.noneIn);
+      fade();
     };
 
     let asking = 0; // the last read asked: an older answer that comes after it is dropped
@@ -327,15 +473,16 @@ DocKit.component({
         last = null;
         count.textContent = "";
         summary.hidden = true;
-        face.dataset.state = "none";
+        face.dataset.state = "unread";
         list.replaceChildren();
-        say(error?.code === "offline" ? words.offline : words.failed);
+        sayEmpty(error?.code === "offline" ? words.offline : words.failed);
       });
     };
     read();
     return {
       update(reason, detail) {
         if (reason === "source" || (reason === "data" && detail === "todos")) read();
+        else if (reason === "layout") draw();
       },
     };
   },

package/packs/gallery/todos/preview.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="16.5" y="12.5" width="207" height="95" rx="12" fill="#ffffff" stroke="#e7e6e3"/><rect x="30" y="24" width="14" height="14" rx="4.5" fill="#ebf2fa"/><g transform="translate(32 26) scale(.4167)" fill="none" stroke="#2e7cd1" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 5.5L5 7l2.5-2.5M3.5 11.5L5 13l2.5-2.5M3.5 17.5L5 19l2.5-2.5M11 6h9M11 12h9M11 18h9"/></g><rect x="50" y="28" width="40" height="6" rx="3" fill="#3b3a37"/><rect x="186" y="28.5" width="24" height="5" rx="2.5" fill="#c4c2bd"/><circle cx="40" cy="55" r="8.5" fill="none" stroke="#ecebe8" stroke-width="3.2"/><circle cx="40" cy="55" r="8.5" fill="none" stroke="#2e7cd1" stroke-width="3.2" stroke-linecap="round" stroke-dasharray="32.0 53.4" transform="rotate(-90 40 55)"/><circle cx="59" cy="50.5" r="2" fill="#2e7cd1"/><rect x="64" y="48.5" width="20" height="4" rx="2" fill="#c4c2bd"/><rect x="98" y="48.5" width="7" height="4" rx="2" fill="#3b3a37"/><circle cx="59" cy="59.5" r="2" fill="#ecebe8"/><rect x="64" y="57.5" width="20" height="4" rx="2" fill="#c4c2bd"/><rect x="98" y="57.5" width="7" height="4" rx="2" fill="#3b3a37"/><rect x="30" y="70" width="180" height="1" fill="#efeeec"/><rect x="30" y="76" width="10" height="10" rx="3" fill="#2e7cd1"/><path d="M32.12 81.18l1.98 1.98 3.96-4.14" fill="none" stroke="#fff" stroke-width="1.44" stroke-linecap="round" stroke-linejoin="round"/><rect x="47" y="78.5" width="92" height="5" rx="2.5" fill="#c4c2bd"/><rect x="144" y="78.5" width="16" height="5" rx="2.5" fill="#e9e8e5"/><rect x="30.75" y="91.75" width="8.5" height="8.5" rx="2.6" fill="none" stroke="#a9a7a2" stroke-width="1.3"/><rect x="47" y="93.5" width="70" height="5" rx="2.5" fill="#3b3a37"/><rect x="122" y="93.5" width="16" height="5" rx="2.5" fill="#e9e8e5"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 240 120"><rect width="240" height="120" rx="8" fill="#f3f3f1"/><rect x="60.5" y="6.5" width="119" height="107" rx="8" fill="#ffffff" stroke="#e6e6e3"/><rect x="70" y="14" width="10" height="10" rx="3" fill="#efefed"/><rect x="84" y="16.5" width="30" height="5" rx="2.5" fill="#37352f"/><rect x="118" y="16.5" width="12" height="5" rx="2.5" fill="#d4d3cf"/><rect x="70" y="32" width="34" height="4" rx="2" fill="#a6a5a1"/><rect x="70" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="77.2" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="84.4" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="91.6" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="98.8" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="106" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="113.2" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="120.4" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="127.6" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="134.8" y="40" width="6" height="3" rx="1.5" fill="#4084cf"/><rect x="142" y="40" width="6" height="3" rx="1.5" fill="#e7e7e5"/><rect x="149.2" y="40" width="6" height="3" rx="1.5" fill="#e7e7e5"/><rect x="156.4" y="40" width="6" height="3" rx="1.5" fill="#e7e7e5"/><rect x="163.60000000000002" y="40" width="6" height="3" rx="1.5" fill="#e7e7e5"/><rect x="70" y="52" width="50" height="4" rx="2" fill="#a6a5a1"/><rect x="70.5" y="62.5" width="7" height="7" rx="2" fill="none" stroke="#bdbcb8"/><rect x="82" y="63" width="56" height="5" rx="2.5" fill="#37352f"/><rect x="82" y="71" width="30" height="3" rx="1.5" fill="#d4d3cf"/><rect x="70.5" y="78.5" width="7" height="7" rx="2" fill="none" stroke="#bdbcb8"/><rect x="82" y="79" width="44" height="5" rx="2.5" fill="#37352f"/><rect x="82" y="87" width="22" height="3" rx="1.5" fill="#d4d3cf"/><rect x="70.5" y="94.5" width="7" height="7" rx="2" fill="#4084cf" stroke="#4084cf"/><rect x="82" y="95" width="50" height="5" rx="2.5" fill="#d4d3cf"/><rect x="82" y="103" width="26" height="3" rx="1.5" fill="#d4d3cf"/></svg>