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>
251 lines
15 KiB
HTML
251 lines
15 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 Classifier</title>
|
|
<link rel="icon" type="image/svg+xml" href="{{FAVICON}}">
|
|
<style>
|
|
{{CSS_PLACEHOLDER}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="app">
|
|
<!-- Main Application -->
|
|
<div id="mainApp" class="main-app">
|
|
<!-- Header -->
|
|
<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 Classifier</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 and rescan directory" aria-label="Refresh" style="font-size:1.1rem;">⟳</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">?</button>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Main Content -->
|
|
<div class="main-content">
|
|
<!-- Folder Tree -->
|
|
<aside class="folder-tree-pane" id="folderTreePane">
|
|
<div class="pane-header">
|
|
<div class="pane-header-title">
|
|
<button class="btn btn-sm collapse-tree-btn" id="collapseTreeBtn" title="Collapse folder tree">◀</button>
|
|
<h3>Folder Tree</h3>
|
|
</div>
|
|
<div class="pane-header-controls">
|
|
<label class="checkbox-label" title="Auto-scroll folder tree when hovering files">
|
|
<input type="checkbox" id="autoScrollCheckbox" checked>
|
|
Auto-scroll
|
|
</label>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="hideCompliantCheckbox">
|
|
Hide Compliant
|
|
</label>
|
|
<span id="selectedFoldersCount" class="folder-count">0 folders selected</span>
|
|
</div>
|
|
</div>
|
|
<div id="folderTree" class="folder-tree">
|
|
<!-- Dynamically populated -->
|
|
</div>
|
|
<div class="resize-handle" id="treeResizeHandle"></div>
|
|
</aside>
|
|
|
|
<!-- Spreadsheet Table -->
|
|
<main class="spreadsheet-pane">
|
|
<div class="pane-header">
|
|
<div class="pane-header-left">
|
|
<h3>Files</h3>
|
|
<div class="file-stats">
|
|
<span id="totalFiles">0 files</span>
|
|
<span id="modifiedFiles">0 modified</span>
|
|
<span id="errorFiles" class="hidden">0 errors</span>
|
|
</div>
|
|
</div>
|
|
<div class="pane-header-right">
|
|
<button id="saveAllBtn" class="btn btn-success btn-sm" disabled>Save All</button>
|
|
<button id="cancelAllBtn" class="btn btn-secondary btn-sm" disabled>Cancel All</button>
|
|
<span class="header-divider">|</span>
|
|
<label class="checkbox-label">
|
|
<input type="checkbox" id="sha256Checkbox">
|
|
SHA256
|
|
</label>
|
|
<button id="exportHashesBtn" class="btn btn-secondary btn-sm" disabled title="Export SHA256 hashes in sha256sum format">💾 Export Hashes</button>
|
|
<span class="header-divider">|</span>
|
|
<button id="togglePreviewBtn" class="btn btn-secondary btn-sm" title="Toggle file preview panel">👁 Preview</button>
|
|
</div>
|
|
</div>
|
|
<div class="spreadsheet-container">
|
|
<table id="spreadsheet" class="spreadsheet">
|
|
<thead>
|
|
<tr>
|
|
<th class="col-row-num">#</th>
|
|
<th class="col-original">Original Filename
|
|
<input type="text" class="column-filter" data-filter-field="original" placeholder="filter…" spellcheck="false" aria-label="Filter by original filename">
|
|
</th>
|
|
<th class="col-extension">Ext
|
|
<input type="text" class="column-filter" data-filter-field="extension" placeholder="filter…" spellcheck="false" aria-label="Filter by extension">
|
|
</th>
|
|
<th class="col-new">New Filename
|
|
<input type="text" class="column-filter" data-filter-field="newFilename" placeholder="filter…" spellcheck="false" aria-label="Filter by new filename">
|
|
</th>
|
|
<th class="col-trackingNumber">Tracking
|
|
<input type="text" class="column-filter" data-filter-field="trackingNumber" placeholder="filter…" spellcheck="false" aria-label="Filter by tracking number">
|
|
</th>
|
|
<th class="col-revision">Rev
|
|
<input type="text" class="column-filter" data-filter-field="revision" placeholder="filter…" spellcheck="false" aria-label="Filter by revision">
|
|
</th>
|
|
<th class="col-status">Status
|
|
<input type="text" class="column-filter" data-filter-field="status" placeholder="filter…" spellcheck="false" aria-label="Filter by status">
|
|
</th>
|
|
<th class="col-title">Title
|
|
<input type="text" class="column-filter" data-filter-field="title" placeholder="filter…" spellcheck="false" aria-label="Filter by title">
|
|
</th>
|
|
<th class="col-sha256 hidden" id="sha256Column">SHA256
|
|
<input type="text" class="column-filter" data-filter-field="sha256" placeholder="filter…" spellcheck="false" aria-label="Filter by SHA256">
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="spreadsheetBody">
|
|
<!-- Dynamically populated -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</main>
|
|
|
|
</div>
|
|
|
|
<!-- Empty State — shown until a directory is selected -->
|
|
<div id="welcomeScreen" class="empty-state empty-state--overlay">
|
|
<div class="empty-state__inner empty-state__inner--centered">
|
|
<h2>ZDDC Classifier</h2>
|
|
<p style="background:var(--bg-secondary);padding:0.75rem 1rem;border-left:3px solid var(--warning);text-align:left;font-size:0.9rem;color:var(--text-muted);margin-bottom:1rem;">
|
|
<strong>This standalone tool is being absorbed into the Browse app.</strong>
|
|
Browse's <em>Grid</em> view-mode now provides the same spreadsheet
|
|
workflow alongside file navigation. This standalone build remains
|
|
available for offline use and air-gapped environments.
|
|
</p>
|
|
<p>Rename a folder of files to ZDDC format using a spreadsheet interface.</p>
|
|
<p>Open a directory, fill in tracking number, revision, status, and title for each file, then save — the files are renamed on disk.</p>
|
|
|
|
<!-- Browser Compatibility Warning -->
|
|
<div id="browserWarning" class="browser-warning hidden">
|
|
<h3>⚠️ Browser Not Supported</h3>
|
|
<p>This application requires the File System Access API, available only in Chromium-based browsers (Chrome, Edge, Brave, Opera).</p>
|
|
</div>
|
|
|
|
<ul class="welcome-list">
|
|
<li>Files already named to ZDDC format are parsed automatically</li>
|
|
<li>Edit cells directly, or copy columns to and from Excel</li>
|
|
<li>Real-time validation highlights non-compliant names</li>
|
|
<li>Rename one file or all modified files at once</li>
|
|
</ul>
|
|
|
|
<p>Click <strong>Add Local Directory</strong> to begin.</p>
|
|
|
|
<p class="note">This application works entirely in your browser. No data is transmitted to any server.</p>
|
|
</div>
|
|
</div>
|
|
</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 Classifier</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 the Classifier?</h3>
|
|
<p>The Classifier is a spreadsheet-based tool for renaming files to ZDDC naming conventions. It reads a folder of files and presents them in an editable grid where you can set tracking number, revision, status, and title — then saves the renamed files back to disk.</p>
|
|
|
|
<h3>Getting Started</h3>
|
|
<ol>
|
|
<li>Click <strong>Add Local Directory</strong> to open a folder containing files to rename.</li>
|
|
<li>The folder tree on the left shows all sub-folders. Click a folder to load its files.</li>
|
|
<li>Edit cells in the spreadsheet to set the new filename components.</li>
|
|
<li>Click <strong>Save All</strong> (or save individual rows) to rename the files on disk.</li>
|
|
</ol>
|
|
|
|
<h3>Folder Tree</h3>
|
|
<dl>
|
|
<dt>Multi-select</dt>
|
|
<dd>Hold <kbd>Ctrl</kbd> and click to select multiple folders. Hold <kbd>Shift</kbd> to select a range. Files from all selected folders are shown together.</dd>
|
|
<dt>Hide Compliant</dt>
|
|
<dd>Hides folders where all files already have valid ZDDC names, letting you focus on work remaining.</dd>
|
|
<dt>Auto-scroll</dt>
|
|
<dd>When enabled, the folder tree scrolls to highlight the folder containing the row you are editing.</dd>
|
|
</dl>
|
|
|
|
<h3>Spreadsheet Editing</h3>
|
|
<dl>
|
|
<dt>Direct cell editing</dt>
|
|
<dd>Click any cell in the New Filename, Tracking, Rev, Status, or Title columns to edit it. Press <kbd>Enter</kbd> to confirm, <kbd>Escape</kbd> to cancel.</dd>
|
|
<dt>RC References</dt>
|
|
<dd>Type a formula like <code>=R[-1]C</code> to copy the value from the cell one row above in the same column — similar to Excel relative references.</dd>
|
|
<dt>Regex capture groups</dt>
|
|
<dd>Type a formula like <code>=RE(RC[-3], "(\w+)-(\d+)", "$1")</code> to extract a pattern from another cell using a regular expression.</dd>
|
|
<dt>Validation</dt>
|
|
<dd>Cells are validated automatically. Invalid values are highlighted in red. The New Filename column shows the composed result.</dd>
|
|
<dt>Column Filters</dt>
|
|
<dd>Each column header has a filter input. Supported syntax:</dd>
|
|
</dl>
|
|
<dl>
|
|
<dt><code>term</code></dt>
|
|
<dd>Contains "term" (case-insensitive)</dd>
|
|
<dt><code>!term</code></dt>
|
|
<dd>Does not contain "term"</dd>
|
|
<dt><code>^term</code></dt>
|
|
<dd>Starts with "term"</dd>
|
|
<dt><code>term$</code></dt>
|
|
<dd>Ends with "term"</dd>
|
|
<dt><code>a b</code></dt>
|
|
<dd>Matches both (AND)</dd>
|
|
<dt><code>a | b</code></dt>
|
|
<dd>Matches either (OR)</dd>
|
|
<dt><code>^IFA | ^IFB</code></dt>
|
|
<dd>Starts with IFA or IFB</dd>
|
|
<dt><code>!^~</code></dt>
|
|
<dd>Does not start with ~ (excludes drafts)</dd>
|
|
<dt><code>el.*spc</code></dt>
|
|
<dd>Regex: contains "el" followed by "spc" (use <code>.</code> for any char, <code>.*</code> for any sequence)</dd>
|
|
<dt><code>[ei]fa</code></dt>
|
|
<dd>Regex character class: matches "efa" or "ifa"</dd>
|
|
</dl>
|
|
|
|
<h3>Saving Files</h3>
|
|
<dl>
|
|
<dt>Save All</dt>
|
|
<dd>Renames all modified files in one operation. Confirms before proceeding.</dd>
|
|
<dt>Cancel All</dt>
|
|
<dd>Reverts all unsaved edits back to the original filenames.</dd>
|
|
<dt>SHA256</dt>
|
|
<dd>Enable to compute a cryptographic hash of each file. Use <strong>Export Hashes</strong> to save a <code>sha256sum</code>-compatible file.</dd>
|
|
</dl>
|
|
|
|
<h3>ZDDC Filename Format</h3>
|
|
<p>The required format is:</p>
|
|
<p><code>TRACKINGNUMBER_REVISION (STATUS) - Title.ext</code></p>
|
|
<p>Example: <code>123456-EL-SPC-2623_A (IFR) - Electrical Specification.pdf</code></p>
|
|
<p>Valid statuses: IFA, IFB, IFC, IFD, IFI, IFP, IFR, IFU, REC, RSA, RSB, RSC, RSD, RSI, ---</p>
|
|
</div>
|
|
</aside>
|
|
</div>
|
|
|
|
<script>
|
|
{{JS_PLACEHOLDER}}
|
|
</script>
|
|
</body>
|
|
</html>
|