ZDDC
7d4d2dc9a2
Reshape browse from "tree-as-table with popup preview" into a unified
file-experience tool with three layered behaviors:
Phase A — Two-pane shell
Phase B — Markdown plugin (Toast UI inline)
Phase C — Grid mode (classifier workflow)
Phase D — Deprecation banners on standalone classifier + mdedit
= Phase A: two-pane shell + lightweight preview plugins =
Browse's table view becomes a tree-pane on the left + preview-pane on
the right with a draggable resizer. Click a folder → expand inline.
Click a file → render in the right pane. The previous popup window
becomes an explicit "⤴ Pop out" button in the right-pane header for
users with a second monitor.
Preview rendering reuses shared/preview-lib.js (PDF iframe, image
<img>, TIFF, ZIP listing, text <pre>). Unknown types show a download
link. browse/js/preview.js refactored into renderInline (default) +
renderInPopup (Pop out button); both share the same plugin
dispatch logic.
Filter rows were already removed earlier this session. Sort columns
likewise — the tree is alphabetical by default; the underlying
setSort API still exists for future re-introduction.
= Phase B: markdown plugin =
New browse/js/preview-markdown.js: when a .md or .markdown file is
clicked, the right pane mounts a Toast UI editor (initial-value =
file contents) with a small toolbar containing Save + dirty indicator
+ status text. Save sends PUT through the file API for server-mode
files; non-server sources are read-only for now (deferred to a
follow-up that wires zddc-source.js writes too). Ctrl+S / Cmd+S
inside the editor saves.
Toast UI Editor (~700 KB JS + ~160 KB CSS) was previously bundled
only in mdedit/vendor/. Moved to shared/vendor/ so browse and mdedit
both pull from one location.
= Phase C: grid mode =
View-mode toggle [Browse | Grid] in the toolbar. Grid mode loads the
classifier tool as an iframe scoped to the current directory (server
mode at working/staging/incoming locations) — classifier's full
bulk-rename workflow without leaving browse. v1 implementation; a
future iteration could bundle classifier's modules directly into
browse for tighter integration. Hostile cases (file:// origin, paths
outside working/staging/incoming) show a friendly explanation
instead of a blank iframe.
new browse/js/grid.js handles the activation logic.
= Phase D: deprecation banners =
mdedit and classifier standalones gain a "this tool is being absorbed
into Browse" advisory banner. Both standalones remain fully
functional and continue to ship — they're useful for offline single-
file editing and air-gapped environments. The banner just points
users toward the unified browse experience.
= Files =
+ browse/js/preview-markdown.js (markdown plugin)
+ browse/js/grid.js (grid-mode plugin)
M browse/template.html (two-pane layout, view toggle, banners)
M browse/css/tree.css (two-pane CSS, replaces table styles)
M browse/js/init.js (state additions: selectedId, viewMode)
M browse/js/tree.js (rowHtml: <tr>+<td> → <div>)
M browse/js/preview.js (renderInline / renderInPopup split)
M browse/js/events.js (toggle wiring, resizer, click handlers
adapted from <table> to <div>)
M browse/build.sh (Toast UI vendor + new modules)
R mdedit/vendor/toastui-* → shared/vendor/ (one bundle, two tools)
M mdedit/build.sh (paths)
M mdedit/template.html (deprecation banner)
M classifier/template.html (deprecation banner)
M tests/browse.spec.js (selectors updated for new layout +
new "click file → preview" test)
Bundle sizes after this commit:
browse: ~1020 KB (was ~290 KB; added Toast UI ~700 KB)
classifier: ~1470 KB (unchanged from prior baseline)
mdedit: ~2140 KB (unchanged; vendor location moved but not added)
What's deferred:
- TOC + front-matter pane in browse's markdown plugin (mdedit has
these; browse v1 uses just the editor).
- FS-API writes from browse's markdown plugin (server PUT works).
- Classifier modules bundled directly into browse (v1 uses iframe).
- Sort UI in the new tree (model still supports it; no widget yet).
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
149 lines
7.1 KiB
HTML
149 lines
7.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ZDDC Browse</title>
|
|
<link rel="icon" type="image/svg+xml" href="{{FAVICON}}">
|
|
<style>
|
|
{{CSS_PLACEHOLDER}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header class="app-header">
|
|
<div class="header-left">
|
|
<svg class="app-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" aria-hidden="true">
|
|
<rect width="64" height="64" rx="12" fill="#1e3a5f"/>
|
|
<g fill="#fff">
|
|
<rect x="14" y="18" width="36" height="7"/>
|
|
<polygon points="43,25 50,25 21,43 14,43"/>
|
|
<rect x="14" y="43" width="36" height="7"/>
|
|
</g>
|
|
</svg>
|
|
<div class="header-title-group">
|
|
<span class="app-header__title">ZDDC Browse</span>
|
|
<span class="build-timestamp">{{BUILD_LABEL}}</span>
|
|
</div>
|
|
<button id="addDirectoryBtn" class="btn btn-primary">Add Local Directory</button>
|
|
<button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh listing" aria-label="Refresh listing">⟳</button>
|
|
</div>
|
|
<div class="header-right">
|
|
<button id="theme-btn" class="btn btn-secondary" title="Theme: auto (follows OS)" aria-label="Theme: auto (follows OS)">◐</button>
|
|
<button id="help-btn" class="btn btn-secondary" title="Help" aria-label="Help">?</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main id="appMain">
|
|
<div id="emptyState" class="empty-state empty-state--overlay">
|
|
<div class="empty-state__inner empty-state__inner--centered">
|
|
<h2>ZDDC Browse</h2>
|
|
<p>A two-pane file browser for ZDDC archives — and any directory.</p>
|
|
<ul class="welcome-list">
|
|
<li><b>Online</b> — when this page is served by zddc-server, the
|
|
listing for the current directory loads automatically.</li>
|
|
<li><b>Local</b> — click <i>Add Local Directory</i> to pick any folder
|
|
on your computer (Chromium-based browsers).</li>
|
|
</ul>
|
|
<p>Once loaded: click folders to expand, click files to preview them in
|
|
the right pane. Markdown files open in a full editor with TOC.
|
|
Switch to <b>Grid</b> mode to bulk-rename ZDDC files
|
|
spreadsheet-style.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="browseRoot" class="browse-root hidden">
|
|
<div class="browse-toolbar">
|
|
<div class="view-mode-toggle" role="tablist" aria-label="View mode">
|
|
<button id="viewModeBrowse" class="btn btn-sm" role="tab" aria-selected="true">Browse</button>
|
|
<button id="viewModeGrid" class="btn btn-sm" role="tab" aria-selected="false">Grid</button>
|
|
</div>
|
|
<nav class="breadcrumbs" id="breadcrumbs" aria-label="Path"></nav>
|
|
<span class="toolbar__count" id="entryCount"></span>
|
|
</div>
|
|
|
|
<!-- Browse mode (default): two-pane tree + preview -->
|
|
<div id="browseView" class="browse-view">
|
|
<div class="pane tree-pane" id="treePane">
|
|
<div class="tree-pane__body" id="treeBody" role="tree" aria-label="Files"></div>
|
|
</div>
|
|
<div class="pane-resizer" data-resizer-for="tree-pane" aria-hidden="true"></div>
|
|
<div class="pane preview-pane" id="previewPane">
|
|
<div class="preview-pane__header">
|
|
<span class="preview-pane__title" id="previewTitle">No file selected</span>
|
|
<span class="preview-pane__meta" id="previewMeta"></span>
|
|
<button id="previewPopout" class="btn btn-sm btn-secondary hidden" title="Pop out into a separate window" aria-label="Pop out into a separate window">⤴ Pop out</button>
|
|
</div>
|
|
<div class="preview-pane__body" id="previewBody">
|
|
<div class="preview-empty">Click a file in the tree to preview it.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grid mode: classifier-style spreadsheet rooted at the current dir -->
|
|
<div id="gridView" class="grid-view hidden">
|
|
<div class="grid-empty">
|
|
Grid view is loading…
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div id="statusBar" class="status-bar"></div>
|
|
|
|
<!-- Help Panel -->
|
|
<aside id="help-panel" class="help-panel" hidden aria-labelledby="help-panel-title">
|
|
<div class="help-panel__header">
|
|
<h2 id="help-panel-title" class="help-panel__title">Help — ZDDC Browse</h2>
|
|
<button type="button" class="help-panel__close" id="help-panel-close" aria-label="Close">×</button>
|
|
</div>
|
|
<div class="help-panel__body">
|
|
<h3>What is Browse?</h3>
|
|
<p>Browse is the ZDDC file experience. Two top-level modes:</p>
|
|
<dl>
|
|
<dt>Browse mode</dt>
|
|
<dd>File tree on the left, preview on the right. Click a folder to
|
|
expand, click a file to preview. Markdown files open in a full editor;
|
|
PDF, image, ZIP, XLSX, DOCX, TIFF all render inline.</dd>
|
|
<dt>Grid mode</dt>
|
|
<dd>Spreadsheet view of the current subtree's files for bulk
|
|
ZDDC renaming. Edit cells directly, copy/paste with Excel,
|
|
save back to disk.</dd>
|
|
</dl>
|
|
|
|
<h3>Tree navigation (Browse mode)</h3>
|
|
<dl>
|
|
<dt>Click a folder</dt>
|
|
<dd>Expand or collapse it inline.</dd>
|
|
<dt>Shift-click a folder</dt>
|
|
<dd>Recursive expand or collapse — the whole subtree.</dd>
|
|
<dt>Click a file</dt>
|
|
<dd>Preview it in the right pane.</dd>
|
|
<dt>⤴ Pop out</dt>
|
|
<dd>Open the current preview in a separate window — useful for a second
|
|
monitor.</dd>
|
|
<dt>ZIP files</dt>
|
|
<dd>Behave as folders — click to inspect contents inline. JSZip is
|
|
bundled, so this works offline.</dd>
|
|
<dt>Refresh</dt>
|
|
<dd>Re-fetches the current directory listing — works for both
|
|
local (re-enumerates the FS handle) and online (re-fetches the JSON).</dd>
|
|
</dl>
|
|
|
|
<h3>Header buttons</h3>
|
|
<dl>
|
|
<dt>Add Local Directory</dt>
|
|
<dd>Pick a folder from your computer. Works in both modes; in online
|
|
mode it's de-emphasized but still available.</dd>
|
|
<dt>⟳ Refresh</dt>
|
|
<dd>Re-load the current directory listing.</dd>
|
|
<dt>◐ Theme</dt>
|
|
<dd>Cycle auto / light / dark.</dd>
|
|
</dl>
|
|
</div>
|
|
</aside>
|
|
|
|
<script>
|
|
{{JS_PLACEHOLDER}}
|
|
</script>
|
|
</body>
|
|
</html>
|