VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ZDDC/browse
History
ZDDC 94b2e29448 feat(browse): SPA overhaul — context menu, YAML editor, icons, hovercard, deep links, autofilter 
Major upgrade to the browse tool's UX, plus a few shared modules other
tools can adopt.

User-facing:
- Right-click context menu on tree rows AND empty pane space. Traditional
  file-manager grouping (Open / Download / New / Rename-Delete / Copy /
  Tree ops / View). Items stay visible but disabled when not applicable
  so muscle memory carries. Generic shared/context-menu.js framework
  supports normal items, toggles, submenus, separators, danger styling.
- YAML editor for .yaml / .yml / .zddc files (CodeMirror 5 vendored at
  shared/vendor/codemirror-yaml.min.*). js-yaml lint on every change
  for parse errors. For .zddc cascade files, an additional schema-aware
  lint pass flags unknown keys, bad enum values, and wrong types.
- Per-row drag-drop upload using webkitGetAsEntry (folder uploads work
  recursively). Per-row drop indicator; doc-level overlay still fires
  for blank-space drops at drop_target scopes.
- New folder / New markdown file context-menu items (server mode).
  Rename + Delete with native confirm() dialog. File-API helpers
  removeNode / renameNode use the existing PUT/POST/DELETE endpoints.
- Hover info card with the row's full metadata (ZDDC fields + filesystem
  info + path/URL). Interactive — mouse into it, drag-select text,
  Ctrl/Cmd-C or right-click → Copy. 200ms grace before dismiss.
- Autofilter input at the top of the tree pane. Same grammar as
  archive's column filters (zddc.filter.parse / matches). Filters
  files; folders without matches collapse out. Non-matching folders
  force-open visually when descendants match, without mutating the
  user's actual expand state.
- Two-line ZDDC label: title-first, tracking/rev/status as monospace
  meta below. Icon column anchors to the title line. Chevron is a
  Lucide outline `chevron-right` SVG, rotated 90° on `.expanded`.
- File-type Lucide icon sprite (shared/icons.js — 16 outline glyphs,
  ~5 KB). PDF / Word / Spreadsheet / Slides / Image / Video / Audio /
  CAD / Web / Config / Code / Archive get distinct icons; folders
  tinted with --primary.
- Header wraps gracefully at narrow viewports (shared/base.css
  flex-wrap + title min-width:0 ellipsis). Body becomes flex column
  in browse so a wrapping header doesn't break #appMain height.
- Markdown editor opens in WYSIWYG mode by default. YAML front-matter
  + TOC sidebar reworked: flexbox layout (single visible resizer
  between FM and TOC), both bodies overflow:auto for X+Y scrollbars.
- `?file=<path>` deep links open browse pre-positioned at a specific
  file. Multi-segment paths walk into subdirectories on the way.
  Auto-flips Show hidden when a segment is dot/underscore-prefixed.
- Refresh + show-hidden toggle preserve expansion / selection /
  preview pinning. Path-keyed snapshot survives a re-fetched listing.
- "Add Local Directory" → "Use Local Directory" across the four tools
  that have it (browse, archive, classifier, +transmittal comment).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-14 12:12:42 -05:00
..
css feat(browse): SPA overhaul — context menu, YAML editor, icons, hovercard, deep links, autofilter 2026-05-14 12:12:42 -05:00
js feat(browse): SPA overhaul — context menu, YAML editor, icons, hovercard, deep links, autofilter 2026-05-14 12:12:42 -05:00
build.sh feat(browse): SPA overhaul — context menu, YAML editor, icons, hovercard, deep links, autofilter 2026-05-14 12:12:42 -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): SPA overhaul — context menu, YAML editor, icons, hovercard, deep links, autofilter 2026-05-14 12:12:42 -05:00

README.md

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.