ZDDC/browse/js/app.js
ZDDC e2179d167b feat(browse): capability/role/tier-driven, context-correct menu system
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>
2026-06-04 07:21:02 -05:00

163 lines
7.6 KiB
JavaScript

// app.js — bootstrap. Runs after every other module's IIFE has
// registered its functions on window.app.modules.
(function () {
'use strict';
var state = window.app.state;
var loader = window.app.modules.loader;
var tree = window.app.modules.tree;
var events = window.app.modules.events;
// Walk a `?file=` path segment-by-segment from the current root.
// Each non-leaf segment is matched against the parent's children
// by name; if found and it's a folder, expand+load it (so its
// children populate state.nodes) and recurse into them. The leaf
// segment becomes the selected/previewed entry. Silently no-ops
// when any segment doesn't resolve — deep links aren't a hard
// contract, just an affordance.
async function openDeepLink(path) {
var segs = path.split('/').filter(Boolean);
if (segs.length === 0) return;
var tree = window.app.modules.tree;
var prev = window.app.modules.preview;
// Lookup helper: find a node by name within a given parent's
// immediate children. Top-level walk uses state.rootIds.
function findChild(parentIds, name) {
for (var i = 0; i < parentIds.length; i++) {
var n = window.app.state.nodes.get(parentIds[i]);
if (n && n.name === name) return n;
}
return null;
}
var ids = window.app.state.rootIds;
for (var i = 0; i < segs.length; i++) {
var node = findChild(ids, segs[i]);
if (!node) return; // segment not present in this listing
if (i === segs.length - 1) {
// Leaf — select + preview.
window.app.state.selectedId = node.id;
window.app.state.lastPreviewedNodeId = node.id;
tree.render();
if (prev && !node.isDir) prev.showFilePreview(node);
return;
}
// Intermediate — must be a folder we can expand into.
if (!(node.isDir || node.isZip)) return;
if (!node.loaded) {
await tree.toggleFolder(node.id); // loads + sets expanded
} else if (!node.expanded) {
node.expanded = true;
}
ids = node.childIds;
}
}
async function bootstrap() {
events.init();
// Honor ?file=<path> deep links: external clients (the profile
// page's "edit your .zddc files" list, future bookmarks, etc.)
// can link directly to "open browse at <dir>, with this entry
// selected and previewed". Single-segment names (?file=foo.md)
// match in the current directory; multi-segment paths
// (?file=a/b/foo.md) walk into a/ then b/ then open foo.md,
// loading intermediate directories on the way.
//
// When the LEAF (or any intermediate segment) is hidden
// (.zddc, .form.yaml, …), flip showHidden ON BEFORE the
// initial listing fetch so dotfiles appear in the tree.
var qs = new URLSearchParams(location.search);
var deepFile = qs.get('file');
// Explicit ?hidden=1 in the URL: restore the show-hidden toggle
// on reload (the URL is the persistence layer for this flag —
// see events.js syncURLToSelection).
if (qs.get('hidden') === '1') state.showHidden = true;
if (deepFile) {
var segs = deepFile.split('/').filter(Boolean);
for (var si = 0; si < segs.length; si++) {
var c = segs[si].charAt(0);
if (c === '.' || c === '_') { state.showHidden = true; break; }
}
}
// Try server auto-detect. If this page is served by zddc-server
// (or any server with a Caddy-shaped JSON listing), load the
// current directory automatically. Otherwise show the empty
// state with the "Select Directory" button.
var detected = await loader.autoDetectServerMode();
if (detected) {
tree.setRoot(detected.entries);
events.showBrowseRoot();
tree.render();
if (events.prefetchScopeAccess) events.prefetchScopeAccess();
events.statusInfo('Loaded ' + detected.entries.length + ' item'
+ (detected.entries.length === 1 ? '' : 's')
+ ' from ' + detected.path);
// The initial events.init() applied view mode before the
// cascade headers were available (no fetch yet). Now that
// state.scopeDefaultTool is set from the detection
// response, re-resolve so an /incoming URL auto-activates
// grid mode.
if (events.applyResolvedViewMode) events.applyResolvedViewMode();
// Final step of the deep link: walk the path segment by
// segment, expanding + loading intermediate directories
// before opening the leaf. Single-segment names use the
// same code path with one iteration.
if (deepFile) {
await openDeepLink(deepFile);
}
}
// Else: empty state stays visible; user can click Select Directory.
// Browser back / forward: client-side rescope when the URL
// changes via popstate. We can't tell server-vs-fs mode from
// popstate alone, so only honor it in server mode.
window.addEventListener('popstate', async function () {
if (window.app.state.source !== 'server') return;
var path = location.pathname;
if (!path.endsWith('/')) path += '/';
var popQS = new URLSearchParams(location.search);
if (popQS.get('hidden') === '1') window.app.state.showHidden = true;
else window.app.state.showHidden = false;
// Join the shared nav token: rapid back/forward (or back/forward
// while an in-tool rescope is mid-flight) must not apply a stale
// listing on top of a newer one.
var seq = events.beginNav ? events.beginNav() : 0;
try {
var es = await loader.fetchServerChildren(path);
if (events.isCurrentNav && !events.isCurrentNav(seq)) return;
window.app.state.currentPath = path;
window.app.state.selectedId = null;
window.app.state.lastPreviewedNodeId = null;
tree.setRoot(es);
tree.render();
if (events.prefetchScopeAccess) events.prefetchScopeAccess();
// Route through clearPreview so a live editor is disposed
// (not leaked) when back/forward swaps scope.
var pmod = window.app.modules.preview;
if (pmod && pmod.clearPreview) pmod.clearPreview();
else {
var previewBody = document.getElementById('previewBody');
if (previewBody) previewBody.innerHTML = '';
}
var previewTitle = document.getElementById('previewTitle');
if (previewTitle) previewTitle.textContent = 'No file selected';
// Reapply view mode for the new URL (incoming/ → grid, etc).
if (events.applyResolvedViewMode) events.applyResolvedViewMode();
// Re-walk ?file= so back/forward restores selection +
// expansion, not just scope.
var popFile = popQS.get('file');
if (popFile) await openDeepLink(popFile);
} catch (_e) { /* swallow — leave the tree as-is */ }
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', bootstrap);
} else {
bootstrap();
}
})();