ZDDC
53eb58b90b
The two filter rows (📄 file/ext + 📁 folder) didn't really earn their header real estate. Browse is for navigating directory structure; ad-hoc filters across a tree of mixed file types and depths weren't the right affordance, and the visual weight competed with the column headers and the breadcrumb. Removed entirely: - template.html: dropped both <tr class="filter-row"> rows in <thead>, the related "Filter rows" help section, and the empty-state copy that mentioned the 📄/📁 rows. - init.js: dropped state.filters (file/folder/ext slots). - events.js: dropped the .column-filter[data-filter] input wiring. - tree.js: dropped recomputeVisibility() and the n.visible plumbing in visibleIds() and updateCount(). Render is now a straight depth- first walk over expanded subtrees; the count is just total rows. setFilter is removed from the public API. - css/tree.css: dropped .filter-row*, .filter-row__icon, and the browse-local .column-filter rules (.column-filter is also defined in shared/base.css for tools that still use it; that stays). No test changes — tests/browse.spec.js never exercised filters. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
136 lines
6.3 KiB
HTML
136 lines
6.3 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">
|
|
<div class="empty-state__inner">
|
|
<h2>ZDDC Browse</h2>
|
|
<p>A simple directory listing for ZDDC archives — and any directory.
|
|
Pick how you want to browse:</p>
|
|
<ul>
|
|
<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 a folder to expand it, <b>shift-click</b>
|
|
to expand its entire subtree (or collapse it again),
|
|
click column headers to sort. Click any file to open it.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="browseRoot" class="browse-root hidden">
|
|
<div class="toolbar">
|
|
<nav class="breadcrumbs" id="breadcrumbs" aria-label="Path"></nav>
|
|
<span class="toolbar__count" id="entryCount"></span>
|
|
</div>
|
|
<div class="browse-table-wrap">
|
|
<table class="browse-table" id="browseTable">
|
|
<thead>
|
|
<tr class="header-row">
|
|
<th data-sort="name" class="col-name sortable">Name <span class="sort-arrow"></span></th>
|
|
<th data-sort="size" class="col-size sortable">Size <span class="sort-arrow"></span></th>
|
|
<th data-sort="ext" class="col-ext sortable">Type <span class="sort-arrow"></span></th>
|
|
<th data-sort="date" class="col-date sortable">Modified <span class="sort-arrow"></span></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="browseTbody"></tbody>
|
|
</table>
|
|
</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 a directory listing for ZDDC archives — and any directory. It works in two modes:</p>
|
|
<dl>
|
|
<dt>Online</dt>
|
|
<dd>When the page is served by zddc-server, the listing for the current
|
|
URL directory loads automatically. Breadcrumbs link to ancestor folders.</dd>
|
|
<dt>Local</dt>
|
|
<dd>Click <strong>Add Local Directory</strong> to pick any folder on your
|
|
computer. Local mode requires a Chromium-based browser (File System
|
|
Access API).</dd>
|
|
</dl>
|
|
|
|
<h3>Tree navigation</h3>
|
|
<dl>
|
|
<dt>Click a folder</dt>
|
|
<dd>Toggle expand/collapse on that folder.</dd>
|
|
<dt>Double-click a folder</dt>
|
|
<dd>Navigate into the folder — it becomes the new root of the
|
|
view. Server mode loads the folder's URL; local mode re-roots
|
|
onto that folder's handle.</dd>
|
|
<dt>Shift-click a folder</dt>
|
|
<dd>Recursive expand or collapse — applies to the whole subtree.</dd>
|
|
<dt>Click a file</dt>
|
|
<dd>Open in the preview popup. Modifier-click (Ctrl/Cmd) or middle-click
|
|
opens in a new tab.</dd>
|
|
<dt>ZIP files</dt>
|
|
<dd>Behave as folders — click to inspect contents inline. JSZip is
|
|
bundled, so this works offline.</dd>
|
|
<dt>Column headers</dt>
|
|
<dd>Click to sort; click again to reverse.</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>
|