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>
163 lines
7.6 KiB
JavaScript
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();
|
|
}
|
|
})();
|