geometryview 0.1.2 → 0.3.0

package/web/gallery.css

@@ -0,0 +1,94 @@
+/* The gallery: a folder's display list, laid out by the core (gallery-core.js) and painted by
+   gallery-view.js as absolutely placed elements over the style's sheet. Nothing here moves
+   anything: every position comes from the core, so the Mac and the browser agree. */
+
+.gallery {
+  position: fixed;
+  inset: 0;
+  z-index: 0;
+  font-family: "Plex Mono", ui-monospace, monospace;
+  font-variant-ligatures: none;
+  font-kerning: none;
+}
+.gallery[hidden] { display: none; }
+.gallery-sheet { position: absolute; inset: 0; }
+/* The view's area: what scrolls, what is fixed over it (Peek), and, during a move, a copy of the
+   old view beneath; a zoom stays inside it. */
+.gallery-stage { position: absolute; overflow: hidden; }
+.gallery-clip {
+  position: absolute;
+  inset: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  overscroll-behavior: contain;
+}
+.gallery-fixed, .gallery-ghost { position: absolute; inset: 0; pointer-events: none; }
+/* Each layer stacks its own items: the old view's copy, then the content, then Peek over both. */
+.gallery-ghost, .gallery-clip { z-index: 0; }
+.gallery-fixed { z-index: 1; }
+.gallery-ghost { overflow: hidden; }
+.gallery-ghost-inner { position: absolute; inset: 0; }
+.gallery-content { position: relative; width: 100%; }
+.gallery-content > *, .gallery-fixed > *, .g-lane-content > * {
+  position: absolute;
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  pointer-events: none;
+}
+.gallery-content > [hidden], .gallery-fixed > [hidden], .g-lane-content > [hidden] { display: none; }
+/* A lane: a band that scrolls sideways on its own, its items placed in content points inside. */
+.g-lane { overflow: hidden; }
+.g-lane-content { position: absolute; width: 0; height: 0; }
+.g-text { white-space: pre; line-height: 1.3; overflow: visible; }
+.g-probe { display: inline-block; width: 0; height: 0; vertical-align: baseline; }
+.g-picture { image-rendering: auto; }
+
+/* The gallery's toolbar (gallery-toolbar.js), in the viewer toolbar's place. */
+/* One line: the bar is sized from its contents, and a label that could wrap would narrow it. */
+.gallery-toolbar { white-space: nowrap; }
+.gallery-toolbar .group { display: flex; align-items: center; gap: 8px; }
+.gallery-toolbar .group.off, .gallery-toolbar .views button[hidden] { display: none; }
+.gallery-toolbar .tlabel {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  color: var(--muted);
+  padding: 0 2px 0 4px;
+}
+.gallery-toolbar .views button { display: inline-flex; align-items: baseline; gap: 6px; padding: 0 9px; }
+.gallery-toolbar .views button .glyph { display: inline-flex; align-self: center; }
+.gallery-toolbar .views button .nm, .gallery-toolbar .views button .k { line-height: 28px; }
+.gallery-toolbar .views button .k { font-size: 9.5px; font-weight: 500; color: var(--faint); }
+.gallery-toolbar .views button.on .k { color: var(--muted); }
+.gallery-toolbar .slider { width: 110px; }
+/* Short of room (gallery-toolbar.js #fit): the view switch's keys go, then two pills' titles. */
+.gallery-toolbar.tight .views button .k { display: none; }
+.gallery-toolbar.tighter .pill.fold > span { display: none; }
+.gallery-toolbar.tighter .pill.fold { padding: 0 9.5px; }
+body.phone .gallery-toolbar .nm, body.phone .gallery-toolbar .k, body.phone .gallery-toolbar .tlabel { display: none; }
+
+/* While a poster shows: its two buttons in the top right margin, outside the printed picture. */
+.gallery-poster-bar {
+  position: fixed;
+  top: 6px;
+  right: 30px;
+  z-index: 5;
+  display: flex;
+  gap: 6px;
+  padding: 3px;
+}
+.gallery-poster-bar[hidden] { display: none; }
+.gallery-poster-bar .pill { height: 24px; min-width: 24px; padding: 0 8px; font-size: var(--text-xs); }
+
+/* On a phone: the view between the masthead and the toolbar, edge to edge but for 8 pt, and the
+   toolbar's buttons as icons. */
+body.phone .gallery-stage {
+  left: 8px !important;
+  right: 8px !important;
+  top: calc(58px + env(safe-area-inset-top)) !important;
+  bottom: calc(66px + env(safe-area-inset-bottom)) !important;
+}
+body.phone .gallery-toolbar .pill > span { display: none; }
+body.phone .gallery-toolbar .pill { padding: 0; width: var(--pill); }

package/web/gallery.js

@@ -0,0 +1,563 @@
+// A connected folder's gallery in the page: its walk, the library drawing what is in view first, and
+// the view painting the layout as facts and pictures arrive. The page's counterpart of
+// App/Sources/Gallery/GalleryController.swift.
+
+import { pdfOfJpegs } from "./pdf.js";
+import { GalleryCore, Keys, Scales, Sorts } from "./gallery-core.js";
+import { GalleryLibrary, layoutFacts } from "./gallery-library.js";
+import { GalleryView } from "./gallery-view.js";
+import { Thumbnailer } from "./thumbs.js";
+
+export { Actions } from "./gallery-core.js";
+
+export class Gallery {
+  core;
+  view;
+  root = null; // { id, name }
+  #library;
+  #store;
+  #on;
+  #entries = new Map(); // path -> entry
+  #facts = new Map(); // path -> layout facts
+  #pictures = new Map(); // path -> { png, note }
+  #failures = new Map();
+  #phone = false;
+  // Detail pictures: the files drawn large, and how to stop asking for them.
+  #detailFiles = "";
+  #detailAbort = null;
+  // Peek's turntable: the file it is for, and how to stop it.
+  #turnFile = null;
+  #turnAbort = null;
+  #reloadScheduled = false;
+  #wantScheduled = false;
+  #walking = null;
+  #style = 0;
+  #sheet = { scale: Scales.Folder, cell: 128, sort: Sorts.Name };
+  #ladders = { shared: false };
+
+  /**
+   * `on` takes open(root, path) to open a file in the viewer, leave() when Esc reaches the top,
+   * folderChanged() for the masthead, changed() when the view or its controls changed, for the
+   * toolbar, and search(query, found) for the search box. `views` are those that may be shown, a bit
+   * each. With `probes`, texts carry baseline marks, for the checks.
+   */
+  constructor({ engine, store, importers, phone = false, probes = false, views = 0b11 }, on) {
+    this.#store = store;
+    this.#on = on;
+    this.core = new GalleryCore(engine.module);
+    this.core.setViews(views);
+    try {
+      Object.assign(this.#sheet, JSON.parse(localStorage.getItem("gallery.sheet") ?? "{}"));
+    } catch {
+      // A browser that keeps nothing starts from the defaults.
+    }
+    this.core.setSheet(this.#sheet.scale, this.#sheet.cell, this.#sheet.sort);
+    try {
+      Object.assign(this.#ladders, JSON.parse(localStorage.getItem("gallery.ladders") ?? "{}"));
+    } catch {
+      // The defaults.
+    }
+    this.core.setLadders(this.#ladders.shared);
+    this.view = new GalleryView(this.core, {
+      action: (action) => this.#act(action),
+      viewChanged: () => this.#scheduleWant(),
+      atlasMoved: () => this.#on.changed?.(),
+    }, { probes, phone });
+    this.view.element.hidden = true;
+    this.#phone = phone;
+    this.#library = new GalleryLibrary({ importers, thumbnailer: new Thumbnailer(phone ? { recycleMB: 128 } : {}),
+                                         version: engine.cacheVersion, phone, walkStats: store.kind === "shell" }, {
+      facts: (path, facts) => this.#receiveFacts(path, facts),
+      measured: (path, bytes, modified) => this.#measured(path, bytes, modified),
+      reading: (path, fraction) => {
+        const file = this.core.fileAt(path);
+        if (file === null) return;
+        this.core.setReading(file, fraction);
+        this.#scheduleReload();
+      },
+      picture: (path, png, note) => this.#receivePicture(path, png, note),
+      failed: (path, message) => this.#receiveFailure(path, message),
+    });
+  }
+
+  get title() { return this.core.title; }
+  get subtitle() { return this.core.subtitle; }
+  get walking() { return this.#walking !== null; }
+
+  /** Shows `path` inside the connected folder `root` ({ id, name }), walking the folder first. */
+  async show(root, path) {
+    if (this.root?.id !== root.id) {
+      this.root = root;
+      this.#facts.clear();
+      this.#pictures.clear();
+      this.#failures.clear();
+      this.view.clearImages();
+      this.#detailFiles = "";
+      this.#library.setRoot(this.#store.folders, root);
+      this.#load([]);
+      this.#walking = this.#walk(root);
+    }
+    this.core.setFolder(path);
+    this.view.scrollToTop();
+    this.view.reload();
+    this.#on.folderChanged?.();
+    await this.#walking;
+    this.core.setFolder(path);
+    this.view.reload();
+    this.#on.folderChanged?.();
+    this.#changed();
+    this.#scheduleWant();
+  }
+
+  /** The view in use, those enabled, Sheet's controls and the style: what the toolbar shows. */
+  get state() {
+    return { view: this.core.view, views: this.core.views, sheet: { ...this.#sheet }, style: this.#style,
+             ladders: { ...this.#ladders }, atlasLevel: this.core.atlasCamera.level, catalogue: this.core.catalogue };
+  }
+
+  /** Shows a view, if enabled: parts in both fly to their places. */
+  setView(view) {
+    if (!this.view.setView(view)) return false;
+    this.#changed();
+    this.#scheduleWant();
+    return true;
+  }
+
+  /** Changes Sheet's scale, picture size or order: { scale, cell, sort }, any of them. */
+  setSheet(change) {
+    Object.assign(this.#sheet, change);
+    try {
+      localStorage.setItem("gallery.sheet", JSON.stringify(this.#sheet));
+    } catch {
+      // Kept for this visit only.
+    }
+    this.core.setSheet(this.#sheet.scale, this.#sheet.cell, this.#sheet.sort);
+    this.view.reload();
+    this.#changed();
+    this.#scheduleWant();
+  }
+
+  /** Shows the view as a poster, dated today, or as the gallery again. */
+  setPoster(poster) {
+    const date = new Date().toLocaleDateString("en-GB", { day: "numeric", month: "long", year: "numeric" });
+    this.core.setPoster(poster, date);
+    this.view.scrollToTop();
+    this.view.reload();
+    this.#scheduleWant();
+  }
+
+  get poster() { return this.core.poster; }
+
+  /** Atlas: { level } goes to a level, { step } a level in (1) or out (−1). */
+  atlas({ level, step }) {
+    const now = this.core.atlasCamera.level;
+    this.core.atlasLevel(level ?? Math.min(2, Math.max(0, now + (step ?? 0))));
+    this.view.repaint();
+    this.view.reload();
+    this.#changed();
+    this.#scheduleWant();
+  }
+
+  /**
+   * The view as a PDF: the poster on one page, or in Catalogue the whole book, a spread a page,
+   * each drawn once its pictures have come (20 s at most a spread). `progress(page, pages)` is
+   * told each page as it is begun.
+   */
+  async posterPDF(progress) {
+    if (this.core.view !== 4) {
+      progress?.(1, 1);
+      return pdfOfJpegs([await this.view.posterJPEG()]);
+    }
+    const { spread: open, spreads } = this.core.catalogue;
+    const pages = [];
+    for (let spread = 0; spread < spreads; spread++) {
+      progress?.(spread + 1, spreads);
+      this.core.setCatalogueSpread(spread);
+      this.view.reload();
+      this.#scheduleWant();
+      const started = performance.now();
+      while (this.waitingInView > 0 && performance.now() - started < 20_000) {
+        await new Promise((resolve) => setTimeout(resolve, 150));
+      }
+      await new Promise(requestAnimationFrame);
+      pages.push(await this.view.posterJPEG());
+    }
+    this.core.setCatalogueSpread(open);
+    this.view.reload();
+    this.#changed();
+    return pdfOfJpegs(pages);
+  }
+
+  /** Catalogue: { step } turns a spread, { spread } goes to one, { index } to the index. */
+  catalogue({ step, spread, index }) {
+    if (index) this.core.catalogueIndex();
+    else this.core.setCatalogueSpread(spread ?? Math.max(0, this.core.catalogue.spread + (step ?? 0)));
+    this.view.reload();
+    this.#changed();
+    this.#scheduleWant();
+  }
+
+  /** Ladders' scale: { shared }. */
+  setLadders(change) {
+    Object.assign(this.#ladders, change);
+    try {
+      localStorage.setItem("gallery.ladders", JSON.stringify(this.#ladders));
+    } catch {
+      // Kept for this visit only.
+    }
+    this.core.setLadders(this.#ladders.shared);
+    this.view.reload();
+    this.#changed();
+    this.#scheduleWant();
+  }
+
+  /** Searches the folder in view; empty clears it. */
+  setSearch(query) {
+    if (query === this.core.search) return;
+    this.core.setSearch(query);
+    this.view.reload();
+    this.#syncSearch();
+  }
+
+  #changed() {
+    this.#on.changed?.();
+    this.#syncSearch();
+  }
+
+  #syncSearch() {
+    this.#on.search?.(this.core.search, this.core.matches);
+  }
+
+  async #walk(root) {
+    const entries = [];
+    let unreadable = false;
+    try {
+      for await (const entry of this.#store.folders.walk(root.id, "")) {
+        entries.push({ path: entry.path, folder: entry.kind === "folder", bytes: entry.bytes ?? 0,
+                       modified: entry.modified ?? 0 });
+      }
+    } catch {
+      unreadable = entries.length === 0;
+    }
+    if (this.root?.id === root.id) {
+      // A folder that cannot be read shows as last seen, faded, with Reconnect; else what was found.
+      const kept = unreadable ? keptListing(root.id) : null;
+      this.#setLost(Boolean(kept));
+      if (kept) {
+        this.#load(kept);
+      } else {
+        // Sizes and times already known stay with the new listing.
+        const known = new Map((keptListing(root.id) ?? []).map((e) => [e.path, e]));
+        for (const e of entries) {
+          const k = known.get(e.path);
+          if (k && !e.bytes) Object.assign(e, { bytes: k.bytes, modified: k.modified });
+        }
+        this.#load(entries);
+        this.#scheduleKeep();
+      }
+    }
+    this.#walking = null;
+  }
+
+  #lost = false;
+  #setLost(lost) {
+    this.#lost = lost;
+    this.core.setLost(lost);
+    this.#library.setLost(lost);
+  }
+
+  /** Permission given again: the folder is walked afresh. */
+  async reconnected() {
+    const root = this.root, folder = this.core.folder;
+    if (!root) return;
+    this.#setLost(false);
+    this.root = null;
+    await this.show(root, folder);
+  }
+
+  #measured(path, bytes, modified) {
+    const entry = this.#entries.get(path);
+    if (!entry || (entry.bytes === bytes && entry.modified === modified)) return;
+    Object.assign(entry, { bytes, modified });
+    this.#scheduleKeep();
+  }
+
+  // The listing, with every size and time known, kept for when the folder cannot be read.
+  #keepScheduled = null;
+  #scheduleKeep() {
+    if (this.#lost || !this.root) return;
+    clearTimeout(this.#keepScheduled);
+    const id = this.root.id;
+    this.#keepScheduled = setTimeout(() => keepListing(id, [...this.#entries.values()]), 2000);
+  }
+
+  setStyle(style) {
+    this.#style = style;
+    // A phone's pictures are smaller and drawn once: each is held decoded while it shows, and a
+    // phone shows its parts small.
+    const pixels = this.#phone ? 320 : this.core.picturePixels;
+    this.#library.setSpec({ style, colorMode: 1, pixels, pixelsPerPoint: 2,
+                            lineScale: Math.min(1, Math.max(0.5, pixels / 2 / 320)),
+                            supersample: this.#phone ? 1 : 2 });
+    this.#pictures.clear();
+    // Details in the old style go, and are asked for again in the new.
+    this.view.keepDetails(new Set());
+    this.#detailFiles = "";
+    this.view.setStyle(style);
+    this.#changed();
+    this.#scheduleWant();
+  }
+
+  /**
+   * A key while the gallery shows; true if it took it. ⌥1–⌥5 switch views (browsers keep ⌘1–⌘5);
+   * typing searches, digits too, and Backspace edits the search, never going up a folder. In the
+   * search box itself only Esc is the gallery's: it clears the search.
+   */
+  key(e) {
+    if (this.core.poster) {
+      // A poster takes no keys but Esc, which the page turns into putting it away.
+      if (e.key === "Escape") this.#on.leavePoster?.();
+      return true;
+    }
+    const field = e.target?.closest?.("input, textarea, select");
+    if (field) {
+      if (e.key !== "Escape" || field.type !== "search") return false;
+      this.setSearch("");
+      field.blur();
+      return true;
+    }
+    const mod = e.metaKey || e.ctrlKey;
+    if (e.altKey && !mod && e.code === "KeyP") {
+      this.#on.leavePoster?.(true);
+      return true;
+    }
+    if (e.altKey && !mod && /^Digit[1-5]$/.test(e.code)) {
+      this.setView(Number(e.code.slice(5)) - 1);
+      return true;
+    }
+    const keys = { ArrowLeft: Keys.Left, ArrowRight: Keys.Right, ArrowUp: Keys.Up, ArrowDown: Keys.Down,
+                   Enter: Keys.Enter, " ": Keys.Space, Escape: Keys.Escape };
+    let key = keys[e.key];
+    if (e.key === "ArrowUp" && mod) key = Keys.FolderUp;
+    // In Atlas, + and − go a level in and out, while nothing is being searched.
+    if (this.core.view === 3 && !mod && !this.core.search && (e.key === "+" || e.key === "=" || e.key === "-")) {
+      this.atlas({ step: e.key === "-" ? -1 : 1 });
+      return true;
+    }
+    if (key === undefined) {
+      if (e.key === "Backspace" && !mod) {
+        this.setSearch(Array.from(this.core.search).slice(0, -1).join(""));
+        return true;
+      }
+      if (e.key.length === 1 && !mod && !e.altKey) {
+        this.setSearch(this.core.search + e.key);
+        return true;
+      }
+      return false;
+    }
+    this.view.key(key);
+    this.#syncSearch();
+    this.#on.changed?.(); // a turned page, a level: the toolbar says so
+    return true;
+  }
+
+  /** Files in view still waiting for their picture, for the checks. */
+  get waitingInView() {
+    return this.core.wanted().filter((w) => {
+      const path = this.core.path(w.file);
+      return w.band <= 2 && !this.#pictures.has(path) && !this.#failures.has(path);
+    }).length;
+  }
+
+  #load(entries) {
+    const folder = this.core.folder;
+    this.#entries = new Map(entries.map((e) => [e.path, e]));
+    this.core.setEntries(this.root?.name ?? "", entries);
+    this.core.setFolder(folder);
+    for (const [path, facts] of this.#facts) {
+      const file = this.core.fileAt(path);
+      if (file !== null) this.core.setFacts(file, facts);
+    }
+    for (const [path, { png, note }] of this.#pictures) {
+      const file = this.core.fileAt(path);
+      if (file === null) continue;
+      this.core.setPicture(file, note);
+      this.view.setImage(file, URL.createObjectURL(png));
+    }
+    for (const [path, message] of this.#failures) {
+      const file = this.core.fileAt(path);
+      if (file !== null) this.core.setFailure(file, message);
+    }
+  }
+
+  // ---- The library ----
+
+  #scheduleWant() {
+    if (this.#wantScheduled) return;
+    this.#wantScheduled = true;
+    queueMicrotask(() => {
+      this.#wantScheduled = false;
+      this.#library.want(this.core.wanted().map((w) => {
+        const path = this.core.path(w.file);
+        const entry = this.#entries.get(path);
+        return { path, band: w.band, order: w.order, folderColor: w.folderColor, bytes: entry?.bytes ?? 0,
+                 modified: entry?.modified ?? 0 };
+      }));
+      this.#updateTurn();
+      this.#updateDetails();
+    });
+  }
+
+  #receiveFacts(path, facts) {
+    const file = this.core.fileAt(path);
+    if (file === null) return;
+    const f = layoutFacts(facts);
+    this.#facts.set(path, f);
+    this.core.setFacts(file, f);
+    this.#scheduleReload();
+  }
+
+  #receivePicture(path, png, note) {
+    const file = this.core.fileAt(path);
+    if (file === null) return;
+    this.#pictures.set(path, { png, note });
+    this.core.setPicture(file, note);
+    this.view.setImage(file, URL.createObjectURL(png));
+    this.#scheduleReload(true);
+  }
+
+  #receiveFailure(path, message) {
+    const file = this.core.fileAt(path);
+    if (file === null) return;
+    this.#failures.set(path, message);
+    this.core.setFailure(file, message);
+    this.#scheduleReload();
+  }
+
+  // Facts and pictures arrive in bursts: one layout a frame.
+  #scheduleReload(repaint = false) {
+    this.#repaint ||= repaint;
+    if (this.#reloadScheduled) return;
+    this.#reloadScheduled = true;
+    requestAnimationFrame(() => {
+      this.#reloadScheduled = false;
+      if (this.#repaint) {
+        this.#repaint = false;
+        this.view.repaint();
+      }
+      this.view.reload();
+      this.#syncSearch();
+    });
+  }
+  #repaint = false;
+
+  /** Files whose turntable frames have come in Peek, 24 a turn, 768 pixels square. */
+  static turnFrames = 24;
+  static turnPixels = 768;
+
+  // Asks for the detail pictures of what is drawn large, if that changed, one after another, and
+  // lets the others go.
+  #updateDetails() {
+    // A phone draws its parts small, and keeps its memory for them: no details there.
+    if (this.#phone) return;
+    const files = this.core.details();
+    const key = files.join(",");
+    if (key === this.#detailFiles) return;
+    this.#detailFiles = key;
+    this.#detailAbort?.abort();
+    const abort = new AbortController();
+    this.#detailAbort = abort;
+    this.view.keepDetails(new Set(files));
+    const colours = new Map(this.core.wanted().map((w) => [w.file, w.folderColor]));
+    (async () => {
+      for (const file of files) {
+        if (abort.signal.aborted) return;
+        const path = this.core.path(file);
+        const drawn = await this.#library.detail(path, colours.get(file) ?? -1, abort.signal, this.#entries.get(path))
+          .catch(() => null);
+        if (drawn && !abort.signal.aborted && this.core.fileAt(path) === file) this.view.setDetail(file, drawn.png);
+      }
+    })();
+  }
+
+  // Asks for the turntable of the file in Peek, if it changed, and puts the last one away. Once all
+  // its frames have come, Peek can turn.
+  #updateTurn() {
+    const peeking = this.core.peeking;
+    if (peeking === this.#turnFile) return;
+    this.#turnFile = peeking;
+    this.#turnAbort?.abort();
+    this.#turnAbort = null;
+    this.view.setTurntable(null);
+    if (peeking === null || !this.root) return;
+    const abort = new AbortController();
+    this.#turnAbort = abort;
+    const path = this.core.path(peeking);
+    const folderColor = this.core.wanted().find((w) => w.file === peeking)?.folderColor ?? -1;
+    const facts = this.#facts.get(path);
+    const frames = [];
+    let ink = null;
+    // A phone's turntable is smaller: its frames are held in the page's memory.
+    this.#library.turn(path, folderColor, Gallery.turnFrames, this.#phone ? 512 : Gallery.turnPixels,
+                       facts?.hasBox ? facts.size : null, (frame, bitmap, note) => {
+      frames[frame] = bitmap;
+      // The box holding every frame's ink, as its corners: x0, y0, x1, y1.
+      const [x, y, w, h] = note.ink;
+      ink = ink ? [Math.min(ink[0], x), Math.min(ink[1], y), Math.max(ink[2], x + w), Math.max(ink[3], y + h)]
+        : [x, y, x + w, y + h];
+    }, abort.signal, this.#entries.get(path)).then((done) => {
+      if (!done || abort.signal.aborted || this.#turnFile !== peeking || frames.length !== Gallery.turnFrames) {
+        for (const frame of frames) frame?.close?.();
+        return;
+      }
+      this.view.setTurntable({ file: peeking, frames, ink: [ink[0], ink[1], ink[2] - ink[0], ink[3] - ink[1]] });
+      this.core.setPeekTurnable(true);
+      this.view.reload();
+    }).catch(() => {
+      for (const frame of frames) frame?.close?.();
+    });
+  }
+
+  #act(action) {
+    this.#updateTurn(); // Peek opened, closed or moved: its turntable follows
+    switch (action.kind) {
+      case 2: // into a folder: it shows the view it last showed
+        this.#on.folderChanged?.();
+        this.#changed();
+        this.#scheduleWant();
+        break;
+      case 3: // open
+        this.#on.open?.(this.root, this.core.path(action.target));
+        break;
+      case 5:
+        this.#on.leave?.();
+        break;
+      case 1: // handled: a page turned from the book itself
+        if (this.core.view === 4) this.#on.changed?.();
+        break;
+      case 6: // Reconnect: asked in the click itself, as the browser wants
+        this.#on.reconnect?.(this.root);
+        break;
+    }
+  }
+}
+
+// A root's last listing, in this browser's storage: [path, folder, bytes, modified] for each entry.
+// A listing past 2 MB is not kept.
+function keepListing(id, entries) {
+  try {
+    const text = JSON.stringify(entries.map((e) => [e.path, e.folder ? 1 : 0, e.bytes ?? 0, e.modified ?? 0]));
+    if (text.length < 2_000_000) localStorage.setItem(`gallery.listing.${id}`, text);
+  } catch {
+    // Kept for this visit only.
+  }
+}
+
+function keptListing(id) {
+  try {
+    const rows = JSON.parse(localStorage.getItem(`gallery.listing.${id}`) ?? "null");
+    return rows?.map(([path, folder, bytes, modified]) => ({ path, folder: folder === 1, bytes, modified })) ?? null;
+  } catch {
+    return null;
+  }
+}

package/web/icons.js

@@ -30,6 +30,12 @@ export const iconMarkup = {
   parts: `<path d="M3 4h10M3 8h10M3 12h10"/>`,
   more: `<circle cx="3.5" cy="8" r="1.1" fill="currentColor" stroke="none"/><circle cx="8" cy="8" r="1.1" fill="currentColor" stroke="none"/><circle cx="12.5" cy="8" r="1.1" fill="currentColor" stroke="none"/>`,
   check: `<path d="M3.5 8.5l3 3 6-7"/>`,
+  plates: `<rect x="1.75" y="2.25" width="5.5" height="5" rx="1"/><rect x="8.75" y="2.25" width="5.5" height="5" rx="1"/><rect x="1.75" y="8.75" width="5.5" height="5" rx="1"/><rect x="8.75" y="8.75" width="5.5" height="5" rx="1"/><path d="M3 6h1M4.75 6h1M10 6h3M3 12.5h3M10 12.5h1"/>`,
+  sheet: `<path d="M2 3.5h12 M2 7h12 M2 10.5h12 M2 14h12"/><circle cx="4" cy="5.25" r=".6"/><circle cx="7" cy="5.25" r=".6"/><circle cx="10" cy="5.25" r=".6"/><circle cx="13" cy="5.25" r=".6"/><circle cx="4" cy="12.25" r=".6"/><circle cx="7" cy="12.25" r=".6"/>`,
+  ladders: `<path d="M1.5 12.5h13 M2.5 12.5v-1.5 M5.5 12.5v-3 M9 12.5v-5 M13 12.5v-8 M1.5 14.5v-2 M5 14.5v-2 M8.5 14.5v-2 M12 14.5v-2"/>`,
+  atlas: `<path d="M1.75 3.5l4-1.5 4.5 1.5 4-1.5v10.5l-4 1.5-4.5-1.5-4 1.5z M5.75 2v10.5 M10.25 3.5V14"/>`,
+  poster: `<rect x="2.5" y="1.75" width="11" height="12.5" rx="1"/><path d="M4.5 11h7 M4.5 5l2.5 3 2-2 2.5 3"/>`,
+  catalogue: `<path d="M8 3.5c-1.5-1-3.5-1.25-6-1v10c2.5-.25 4.5 0 6 1 1.5-1 3.5-1.25 6-1v-10c-2.5-.25-4.5 0-6 1z M8 3.5v10"/>`,
 };
 
 export const icons = Object.fromEntries(