VARASYS/ZDDC
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions
ZDDC/browse
History
ZDDC 677ac01b32 refactor(shared): consolidate empty-state into shared chrome (BEM) 
Three tools (archive, browse, classifier) independently implemented
an empty-state pattern with three different CSS class naming
conventions and slightly different rules:

  archive:    .empty-state + .empty-state-content (BEM-less)
  browse:     .empty-state + .empty-state__inner  (BEM)
  classifier: .empty-state + .empty-state-content (BEM-less)

Same visual intent ("nothing's loaded yet — here's a welcome card
with instructions"), implemented three times with subtly different
spacing, no shared body styling for h2/p/ul/li, and incompatible
class names that prevented a future tool from copy-pasting the
pattern.

Promote a single consolidated rule set to shared/base.css using
BEM naming throughout:

  .empty-state                       — base (flex centered, padding)
  .empty-state--overlay              — modifier: position absolute,
                                        top 50px to clear app-header,
                                        z-index 10. Used by archive
                                        and classifier (their empty
                                        states sit OVER the main
                                        layout).
  .empty-state__inner                — content card (left-aligned,
                                        text-muted, max-width 640)
  .empty-state__inner--centered      — modifier: tighter max-width
                                        500, centered text, 2rem
                                        padding. Used by tools whose
                                        welcome screen reads as a
                                        centered card.
  .empty-state__inner h2/p/ul/ol/li  — typography defaults
  .empty-state__inner .note          — italic small-print
  .welcome-list                      — bullet list with left-aligned
                                        text + auto margins; safe to
                                        nest inside a centered card.

Per-tool changes:

  - archive/template.html, archive/js/app.js: rename
    .empty-state-content → .empty-state__inner empty-state__inner--centered;
    add .empty-state--overlay to the outer .empty-state container.
    Also the runtime-injected unsupported-browser markup in
    showUnsupportedBrowserMessage() and the showHttpErrorState
    selector.
  - classifier/template.html: same renames.
  - archive/css/layout.css + components.css: delete .empty-state*
    and .welcome-list rules (now in shared).
  - classifier/css/layout.css: same. Keep .empty-state.drag-over
    locally — classifier is the only tool whose empty state acts
    as a drop target.
  - browse/css/base.css: delete .empty-state* (shared covers it).
    browse's template was already using .empty-state__inner so no
    template change needed.

LOC: shared/base.css gains ~70 lines; per-tool overrides lose ~85
combined. Net -15. More importantly, future tools can reuse the
pattern by adding two divs and (optionally) the --centered or
--overlay modifiers; no copy-paste required.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-10 14:21:07 -05:00
..
css refactor(shared): consolidate empty-state into shared chrome (BEM) 2026-05-10 14:21:07 -05:00
js refactor(browse): remove auto-filter rows from header 2026-05-09 21:50:58 -05:00
build.sh feat(shared): clickable logo links every tool's header to project home 2026-05-10 07:34:28 -05:00
README.md feat(browse): generic directory listing tool — default at folder URLs 2026-05-03 19:56:51 -05:00
template.html refactor(browse): remove auto-filter rows from header 2026-05-09 21:50:58 -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.