ZDDC/browse
ZDDC 0b382716e3 feat(browse): TOC pane + FS-API saves in the markdown plugin
Completes the markdown plugin's deferred v2 items:

1. TOC pane

A third pane to the right of the Toast UI editor lists every heading
in the current document, hierarchically indented by level. Click an
item → editor scrolls to that heading (markdown-mode uses
setSelection + preview scroll; WYSIWYG mode uses DOM text matching;
the target heading flashes briefly via primary-light background).
The TOC re-renders on every editor change (debounced 250ms) so it
stays in sync with edits.

Heading parser supports ATX-style `^#{1,6}\s+` lines, strips inline
markdown emphasis/code/links/strike from the displayed label.
Empty file → "Empty file." Headingless file → "No headings."

2. FS-API writes

Saves now route to whichever source the file came from:

  - node.handle + createWritable available → FileSystemWritableFileStream
    (local folder picker). The user's chosen file gets overwritten
    via the browser's File System Access API.
  - node.url + server source → PUT to the server URL (as before).
  - zip-virtual file → save disabled (no writable stream from JSZip).
  - Anything else → save disabled with a tooltip.

Save status surfaces via the existing toolbar (`Saved 10:42:18`) AND
a shared toast notification ("Saved readme.md" / "Save failed: …")
so the success/failure is visible regardless of whether the user is
looking at the toolbar.

Source-hint chip on the toolbar shows "local" / "server" /
"read-only (inside zip)" so the user knows which write path is
active before they make changes.

CSS additions in browse/css/tree.css for .md-toolbar, .md-split,
.md-editor-host, .md-toc-pane, .toc-list, and the .toc-level-1..6
indentation rules.

A new Playwright test exercises the markdown plugin end-to-end:
mounts the editor on a .md click, asserts the three DOM regions are
visible, verifies the TOC contains the three expected headings from
the test fixture's markdown content, and confirms the source hint
reads "local" for FS-API mode.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-10 19:02:32 -05:00
..
css feat(browse): TOC pane + FS-API saves in the markdown plugin 2026-05-10 19:02:32 -05:00
js feat(browse): TOC pane + FS-API saves in the markdown plugin 2026-05-10 19:02:32 -05:00
build.sh feat(browse): two-pane shell + markdown plugin + grid mode (Phases A/B/C/D) 2026-05-10 15:46:51 -05:00
README.md feat(browse): generic directory listing tool — default at folder URLs 2026-05-03 19:56:51 -05:00
template.html feat(browse): two-pane shell + markdown plugin + grid mode (Phases A/B/C/D) 2026-05-10 15:46:51 -05:00

browse — directory listing tool

Generic file browser for any directory. Designed to work with ZDDC archives but useful for any folder. Single-file HTML, no install.

How it's used

Two modes, auto-detected at page load:

  1. Online (zddc-server backed). When this HTML is served by zddc-server at a folder URL — which it is by default for any directory under ZDDC_ROOT that doesn't have an index.html — the JS queries the same URL with Accept: application/json to load the directory's listing and renders it as a sortable, filterable table.

  2. Local (FileSystemAccessAPI). Click "Select Directory" in the header to pick any folder on your computer. Works in Chromium-based browsers (Chrome, Edge, Brave, etc.). No server required; the directory is read directly from disk.

What it does

  • Lists files and folders with name, size, type (extension), and modified date.
  • Click a folder to expand inline. Children load lazily on first expand.
  • Click a column header to sort by that column. Click again to reverse.
  • Type in the filter to narrow to entries whose name contains the substring.
  • Click any file to open it in a new tab — for server-backed pages, this routes through zddc-server's normal handler (so an .archive redirect, an apps cascade override, etc. all work as expected).

Design notes

  • No ZDDC-specific filtering. This tool is intentionally domain-agnostic. The companion archive tool layers ZDDC parsing (project / status / revision filters, tracking-number resolution) on top of the same listing API. Use archive when you want ZDDC semantics; use browse when you just want to see what's in a folder.
  • Default at directory URLs. zddc-server's directory.go serves the embedded browse.html bytes for any directory request with Accept: text/html and no index.html present. This means a user navigating to any folder under ZDDC_ROOT gets a usable browser without anyone having to drop a file into the archive.
  • Apps cascade override. Like every other ZDDC tool, the served browse.html can be overridden per-folder via a .zddc apps: entry. The default is the embedded copy from the binary; operators can pin a specific version or URL if they want.