ZDDC
e2179d167b
Reworks the browse menu/tree interaction into a declarative, contextually honest model and moves view settings onto a toolbar — the menu is the UI to the system, so it should be familiar, inviting, and only ever offer what applies. New declarative menu model (browse/js/menu-model.js): - Every action is one descriptor with a TYPE predicate (appliesTo) and a CAPABILITY predicate (enabled)+tooltip. Row/pane menus are projections over it; separators are derived from group changes. Designed data-shaped so a future server-sourced manifest (zddc.zip) can supply/extend it. - Hybrid visibility: type-inapplicable actions are OMITTED (New folder on a file, Expand on a file); permission/role/tier-gated actions are SHOWN DISABLED with a reason — so a lower tier sees what a higher role unlocks. - Roles are NOT hardcoded: ordinary actions gate on the verbs the server returns (node.verbs / path_verbs), so any operator-defined role works. Only the two intrinsically-special tiers are recognised by name — site admin (is_super_admin) and project/subtree admin (path_is_admin), surfaced as the "Edit access rules…" item; both come from the existing /.profile/access. - The headline fix: New folder / New markdown file no longer appear on file rows (they target a folder or the current dir). events.js: deletes the ~350-line inline buildTreeRowMenu/buildPaneMenu/ SORT_BY_ITEMS; opens menus via menuModel projections through one openRowMenuFor /openPaneMenu path shared by right-click, the hover kebab, and the keyboard menu key (ContextMenu / Shift+F10). Injects action impls via menuModel.configure to avoid a circular dep. Prefetches the scope /.profile/access (memoised) on load/rescope/refresh/popstate so menus never fetch at open time. Discoverability + a11y: a per-row ⋯ kebab (tree.js + new icon-ellipsis sprite, revealed on hover/selection/focus) opens the same menu; keyboard menu key supported. Toolbar: Sort + Show-hidden moved OUT of per-row right-click menus into the tree-pane toolbar, plus New folder / New file buttons (act on the current dir, greyed with a reason when create access is lacking). Help copy updated. Icons: dropped the 3 stray emoji from menu items (consistent, VS Code/Finder style); only new sprite is the kebab's icon-ellipsis. Tests: +5 browse specs (file row omits New-folder; folder row shows it; a read-only server node greys Rename with a "write access" tooltip via a pure menuModel unit; toolbar Sort/Show-hidden drive state + New buttons present; kebab and Shift+F10 both open the menu). All 23 browse+conflict+diff green. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
192 lines
10 KiB
HTML
192 lines
10 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">Use Local Directory</button>
|
|
<button id="refreshHeaderBtn" class="btn btn-secondary hidden" title="Refresh listing" aria-label="Refresh listing">⟳</button>
|
|
</div>
|
|
<div class="header-right">
|
|
<!-- Elevation toggle slot. shared/elevation.js fills it
|
|
when /.profile/access reports the user has admin
|
|
authority; stays empty + hidden for non-admins so
|
|
the chrome is quiet for the common case. -->
|
|
<span id="elevation-toggle" class="elevation-toggle hidden"
|
|
title="Opt into your admin powers for the next 30 minutes (sudo-style)."></span>
|
|
<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>Use 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">
|
|
<nav class="breadcrumbs" id="breadcrumbs" aria-label="Path"></nav>
|
|
</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__toolbar">
|
|
<input type="search"
|
|
id="treeFilter"
|
|
class="tree-filter"
|
|
placeholder="Filter files…"
|
|
aria-label="Filter the tree by name, tracking number, status, revision, or title"
|
|
autocomplete="off"
|
|
spellcheck="false">
|
|
<div class="tree-pane__controls">
|
|
<button type="button" id="newFolderBtn" class="btn btn-sm btn--subtle"
|
|
title="New folder in the current directory">New folder</button>
|
|
<button type="button" id="newFileBtn" class="btn btn-sm btn--subtle"
|
|
title="New markdown file in the current directory">New file</button>
|
|
<label class="tp-control" title="Sort order">
|
|
<span class="tp-control__label">Sort</span>
|
|
<select id="sortSelect" aria-label="Sort order">
|
|
<option value="name:1">Name</option>
|
|
<option value="date:-1">Modified</option>
|
|
<option value="size:-1">Size</option>
|
|
<option value="ext:1">Type</option>
|
|
</select>
|
|
</label>
|
|
<label class="tp-control tp-control--check" title="Show hidden files (dot/underscore names)">
|
|
<input type="checkbox" id="showHiddenChk">
|
|
<span class="tp-control__label">Hidden</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<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>
|
|
|
|
<!-- 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>Row actions — right-click, ⋯, or the menu key</dt>
|
|
<dd>Right-click a row, click the ⋯ button that appears on hover, or
|
|
press the menu key (or Shift+F10) on the selected row. The menu only
|
|
lists actions that apply to that item; actions you can see but can't
|
|
use yet (you lack write/create access, or they're for project or site
|
|
administrators) appear greyed with a reason — so you can see what a
|
|
higher role unlocks.</dd>
|
|
<dt>Toolbar (above the tree)</dt>
|
|
<dd>Filter, New folder / New file (created in the current directory),
|
|
Sort order, and Show hidden files all live here.</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>Download / Download ZIP</dt>
|
|
<dd>Right-click a file for <b>Download</b>, or a folder for
|
|
<b>Download ZIP</b> (everything under it that you're allowed to see,
|
|
bundled into one archive). Online, the server streams it; locally,
|
|
the browser bundles the picked folder (a confirmation appears if it's
|
|
very large).</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>Use 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>
|