feat(ui:files): ensure conext menu is build on click + stick action bar & breadcrumb
ensure conext menu is build on click: API call to determine if user has access to item's parent folder is done only if user request context menu
(lazy API call)
This commit is contained in:
@@ -206,6 +206,21 @@
|
|||||||
* `contextActions` are provided, `oncontextmenu` wins.
|
* `contextActions` are provided, `oncontextmenu` wins.
|
||||||
*/
|
*/
|
||||||
oncontextmenu?: (e: MouseEvent, item: FileItem | FolderItem) => void;
|
oncontextmenu?: (e: MouseEvent, item: FileItem | FolderItem) => void;
|
||||||
|
/**
|
||||||
|
* Optional async pre-open hook. When provided, ResourceList
|
||||||
|
* awaits it before the built-in context menu appears — so a
|
||||||
|
* page can lazily prime any per-item cache the menu's
|
||||||
|
* `visible?` predicates depend on WITHOUT the page having to
|
||||||
|
* pre-warm every row at load time (which would fire N HTTP
|
||||||
|
* calls for a feature the user may never invoke).
|
||||||
|
*
|
||||||
|
* Reference use: `/recent` / `/favorites` probe folder-access
|
||||||
|
* for the row's parent inside `menuPrepare` so the "Open parent
|
||||||
|
* folder" entry shows up on the first right-click of a
|
||||||
|
* previously-unseen row. Short-typically-cached call; typical
|
||||||
|
* menu-open latency stays well under a UI frame.
|
||||||
|
*/
|
||||||
|
menuPrepare?: (item: FileItem | FolderItem, ctx?: ItemContext) => Promise<void>;
|
||||||
/**
|
/**
|
||||||
* Per-item action cell (renders at the end of a row). Kept as a
|
* Per-item action cell (renders at the end of a row). Kept as a
|
||||||
* distinct slot from the action-bar snippets below so callers
|
* distinct slot from the action-bar snippets below so callers
|
||||||
@@ -350,6 +365,7 @@
|
|||||||
onfavorite,
|
onfavorite,
|
||||||
onselectionchange,
|
onselectionchange,
|
||||||
oncontextmenu: onContextMenuOverride,
|
oncontextmenu: onContextMenuOverride,
|
||||||
|
menuPrepare,
|
||||||
itemActions,
|
itemActions,
|
||||||
actions,
|
actions,
|
||||||
batchActions,
|
batchActions,
|
||||||
@@ -787,13 +803,30 @@
|
|||||||
let ctxY = $state(0);
|
let ctxY = $state(0);
|
||||||
let ctxItem = $state<FileItem | FolderItem | null>(null);
|
let ctxItem = $state<FileItem | FolderItem | null>(null);
|
||||||
|
|
||||||
function openContext(e: MouseEvent, item: FileItem | FolderItem) {
|
async function openContext(e: MouseEvent, item: FileItem | FolderItem) {
|
||||||
if (!contextActions?.length) return;
|
if (!contextActions?.length) return;
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
// Snapshot the pointer coords now — after an `await menuPrepare`
|
||||||
|
// tick the event object may be reused / stale, and reading
|
||||||
|
// `e.clientX` post-await could pin the menu to the wrong spot.
|
||||||
|
const x = Math.min(e.clientX, window.innerWidth - 220);
|
||||||
|
const y = Math.min(e.clientY, window.innerHeight - (contextActions.length * 44 + 24));
|
||||||
|
// Give the page a chance to prime any per-item cache the
|
||||||
|
// `visible?` predicates read (e.g. folder-access on /recent +
|
||||||
|
// /favorites for the "Open parent folder" entry). Awaited so the
|
||||||
|
// menu opens with the final visibility state — avoids a
|
||||||
|
// flash-of-hidden-then-shown when the probe resolves.
|
||||||
|
if (menuPrepare) {
|
||||||
|
try {
|
||||||
|
await menuPrepare(item, ctxOf(item.id));
|
||||||
|
} catch {
|
||||||
|
/* prepare failures degrade to the sync-only visibility */
|
||||||
|
}
|
||||||
|
}
|
||||||
ctxItem = item;
|
ctxItem = item;
|
||||||
ctxX = Math.min(e.clientX, window.innerWidth - 220);
|
ctxX = x;
|
||||||
ctxY = Math.min(e.clientY, window.innerHeight - (contextActions.length * 44 + 24));
|
ctxY = y;
|
||||||
ctxOpen = true;
|
ctxOpen = true;
|
||||||
}
|
}
|
||||||
function closeContext() {
|
function closeContext() {
|
||||||
@@ -930,7 +963,7 @@
|
|||||||
oncontextmenu={onContextMenuOverride
|
oncontextmenu={onContextMenuOverride
|
||||||
? (e) => onContextMenuOverride(e, item)
|
? (e) => onContextMenuOverride(e, item)
|
||||||
: contextActions?.length
|
: contextActions?.length
|
||||||
? (e) => openContext(e, item)
|
? (e) => void openContext(e, item)
|
||||||
: undefined}
|
: undefined}
|
||||||
>
|
>
|
||||||
{#if selectable}
|
{#if selectable}
|
||||||
@@ -1057,7 +1090,7 @@
|
|||||||
onclick={(e) => {
|
onclick={(e) => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
if (onContextMenuOverride) onContextMenuOverride(e, item);
|
if (onContextMenuOverride) onContextMenuOverride(e, item);
|
||||||
else openContext(e, item);
|
else void openContext(e, item);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Icon name="ellipsis-v" />
|
<Icon name="ellipsis-v" />
|
||||||
@@ -1096,11 +1129,16 @@
|
|||||||
ondragleave={onSystemDragLeave}
|
ondragleave={onSystemDragLeave}
|
||||||
ondrop={onSystemDrop}
|
ondrop={onSystemDrop}
|
||||||
>
|
>
|
||||||
<div class="page-sticky-header">
|
<!--
|
||||||
|
Title sits OUTSIDE `.page-sticky-header` so it scrolls away on
|
||||||
|
descent — pinning it would waste the always-scarce top-of-viewport
|
||||||
|
strip. What stays sticky (defined by `.page-sticky-header`'s
|
||||||
|
`position: sticky` in shared CSS): the action bar and, when
|
||||||
|
provided, the breadcrumb — the two controls the user reaches for
|
||||||
|
while scrolling.
|
||||||
|
-->
|
||||||
<h1 class="page-title">{title}</h1>
|
<h1 class="page-title">{title}</h1>
|
||||||
{#if breadcrumb}
|
<div class="page-sticky-header">
|
||||||
<div class="rl-breadcrumb">{@render breadcrumb()}</div>
|
|
||||||
{/if}
|
|
||||||
<ActionBar>
|
<ActionBar>
|
||||||
{#snippet start()}
|
{#snippet start()}
|
||||||
<!--
|
<!--
|
||||||
@@ -1154,6 +1192,15 @@
|
|||||||
/>
|
/>
|
||||||
{/snippet}
|
{/snippet}
|
||||||
</ActionBar>
|
</ActionBar>
|
||||||
|
{#if breadcrumb}
|
||||||
|
<!--
|
||||||
|
Breadcrumb sits BELOW the action bar (same sticky block) so
|
||||||
|
the two travel together as the sticky top strip: bar +
|
||||||
|
breadcrumb pin, everything above (title) and below (list)
|
||||||
|
scrolls normally.
|
||||||
|
-->
|
||||||
|
<div class="rl-breadcrumb">{@render breadcrumb()}</div>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{#if error}
|
{#if error}
|
||||||
|
|||||||
@@ -75,22 +75,3 @@ export async function probeFolderAccess(id: string): Promise<boolean> {
|
|||||||
return p;
|
return p;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
|
||||||
* Bulk pre-warm. Deduplicates the input and skips ids already in the
|
|
||||||
* cache or in flight, then fires background probes for the rest. Does
|
|
||||||
* not await — the promises populate the cache asynchronously.
|
|
||||||
*
|
|
||||||
* Used by list surfaces (/recent, /favorites, /shared-with-me) that
|
|
||||||
* want to gate a per-row "Open parent folder" affordance on whether
|
|
||||||
* the caller can actually navigate there. Calling this on every
|
|
||||||
* `load()` (initial + infinite-scroll page) is cheap: probes for
|
|
||||||
* already-known ids no-op.
|
|
||||||
*/
|
|
||||||
export function warmFolderAccess(ids: Iterable<string | null | undefined>): void {
|
|
||||||
const seen = new Set<string>();
|
|
||||||
for (const id of ids) {
|
|
||||||
if (!id || seen.has(id) || cache.has(id) || inflight.has(id)) continue;
|
|
||||||
seen.add(id);
|
|
||||||
void probeFolderAccess(id);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -28,7 +28,7 @@
|
|||||||
type ItemContext
|
type ItemContext
|
||||||
} from '$lib/components/ResourceList.svelte';
|
} from '$lib/components/ResourceList.svelte';
|
||||||
import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
|
import { confirmDialog, promptDialog } from '$lib/stores/dialogs.svelte';
|
||||||
import { folderAccessCached, warmFolderAccess } from '$lib/utils/folderAccess';
|
import { folderAccessCached, probeFolderAccess } from '$lib/utils/folderAccess';
|
||||||
import { t } from '$lib/i18n/index.svelte';
|
import { t } from '$lib/i18n/index.svelte';
|
||||||
|
|
||||||
let raw = $state<FavoritesResourceItem[]>([]);
|
let raw = $state<FavoritesResourceItem[]>([]);
|
||||||
@@ -124,16 +124,6 @@
|
|||||||
]);
|
]);
|
||||||
cursor = page.next_cursor;
|
cursor = page.next_cursor;
|
||||||
void owners.resolve(page.items.map((i) => i.resource.created_by));
|
void owners.resolve(page.items.map((i) => i.resource.created_by));
|
||||||
// Pre-warm the folder-access cache for each row's parent
|
|
||||||
// folder — the "Open parent folder" context-menu entry
|
|
||||||
// gates on the cached boolean. Fire-and-forget: probes for
|
|
||||||
// already-cached ids no-op.
|
|
||||||
warmFolderAccess(
|
|
||||||
page.items.map((i) => {
|
|
||||||
const r = i.resource as FileItem | FolderItem;
|
|
||||||
return isFile(r) ? r.folder_id : r.parent_id;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('favorites: load error', e);
|
console.error('favorites: load error', e);
|
||||||
error = t('errors_loadFailed', 'Failed to load items');
|
error = t('errors_loadFailed', 'Failed to load items');
|
||||||
@@ -345,6 +335,14 @@
|
|||||||
showPath
|
showPath
|
||||||
selectable
|
selectable
|
||||||
{contextActions}
|
{contextActions}
|
||||||
|
menuPrepare={async (item) => {
|
||||||
|
// Lazy folder-access probe — fires only when the user actually
|
||||||
|
// opens the context menu on a row, not proactively for every
|
||||||
|
// row on load. Cached in the LRU (see `folderAccess.ts`) so
|
||||||
|
// subsequent right-clicks on the same folder are instant.
|
||||||
|
const pid = parentFolderId(item);
|
||||||
|
if (pid) await probeFolderAccess(pid);
|
||||||
|
}}
|
||||||
{groupBys}
|
{groupBys}
|
||||||
bind:groupBy
|
bind:groupBy
|
||||||
bind:reversed
|
bind:reversed
|
||||||
|
|||||||
@@ -35,7 +35,7 @@
|
|||||||
// filter is inside ResourceList (gated on `showDotfileToggle`).
|
// filter is inside ResourceList (gated on `showDotfileToggle`).
|
||||||
import { preferences } from '$lib/stores/preferences.svelte';
|
import { preferences } from '$lib/stores/preferences.svelte';
|
||||||
import { isDotfile } from '$lib/utils/dotfileFilter';
|
import { isDotfile } from '$lib/utils/dotfileFilter';
|
||||||
import { folderAccessCached, warmFolderAccess } from '$lib/utils/folderAccess';
|
import { folderAccessCached, probeFolderAccess } from '$lib/utils/folderAccess';
|
||||||
import { t } from '$lib/i18n/index.svelte';
|
import { t } from '$lib/i18n/index.svelte';
|
||||||
import Icon from '$lib/icons/Icon.svelte';
|
import Icon from '$lib/icons/Icon.svelte';
|
||||||
|
|
||||||
@@ -120,16 +120,6 @@
|
|||||||
]);
|
]);
|
||||||
cursor = page.next_cursor;
|
cursor = page.next_cursor;
|
||||||
void owners.resolve(page.items.map((i) => i.resource.updated_by));
|
void owners.resolve(page.items.map((i) => i.resource.updated_by));
|
||||||
// Pre-warm the folder-access cache for each row's parent
|
|
||||||
// folder so the "Open parent folder" context-menu entry has
|
|
||||||
// a resolved boolean by the time the user right-clicks. Fire-
|
|
||||||
// and-forget: probes for already-cached ids no-op.
|
|
||||||
warmFolderAccess(
|
|
||||||
page.items.map((i) => {
|
|
||||||
const r = i.resource as FileItem | FolderItem;
|
|
||||||
return isFile(r) ? r.folder_id : r.parent_id;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.error('recent: load error', e);
|
console.error('recent: load error', e);
|
||||||
error = t('errors_loadFailed', 'Failed to load items');
|
error = t('errors_loadFailed', 'Failed to load items');
|
||||||
@@ -387,6 +377,14 @@
|
|||||||
showDotfileToggle
|
showDotfileToggle
|
||||||
selectable
|
selectable
|
||||||
{contextActions}
|
{contextActions}
|
||||||
|
menuPrepare={async (item) => {
|
||||||
|
// Lazy folder-access probe — fires only when the user actually
|
||||||
|
// opens the context menu on a row, not proactively for every
|
||||||
|
// row on load. Cached in the LRU forever after (per-session);
|
||||||
|
// subsequent right-clicks on the same folder are instant.
|
||||||
|
const pid = parentFolderId(item);
|
||||||
|
if (pid) await probeFolderAccess(pid);
|
||||||
|
}}
|
||||||
{groupBys}
|
{groupBys}
|
||||||
bind:groupBy
|
bind:groupBy
|
||||||
bind:reversed
|
bind:reversed
|
||||||
|
|||||||
Reference in New Issue
Block a user