feat(drag&drop): no drop zone on search page

This commit is contained in:
Edouard Vanbelle
2026-07-26 13:27:40 +02:00
parent 761a203d7c
commit 8637ccfc4c
+52
View File
@@ -11,6 +11,7 @@
import Icon from '$lib/icons/Icon.svelte';
import { t } from '$lib/i18n/index.svelte';
import { files as filesStore } from '$lib/stores/files.svelte';
import { ui } from '$lib/stores/ui.svelte';
import { formatBytes } from '$lib/utils/format';
import { formatDate, iconNameFromClass, fileIconKindClass } from '$lib/utils/display';
@@ -202,10 +203,61 @@
void dateFilter;
void run(query);
});
/**
* Page-wide OS drag/drop guard.
*
* `/search` has no upload path, but without capturing the drop the
* browser's default handler navigates to the dropped file — the tab
* REPLACES the app with the file itself, which is data-loss-esque
* (user loses their in-progress search + any unsaved UI state).
* The `ResourceList`-based views (`/photos`, `/shared`, `/trash`, …)
* already fire a "wrong drop zone" toast via their `.rl-root`
* wrapper when `enableSystemDrop` is false — this handler brings
* `/search` to the same contract, and covers the whole viewport
* (not just a list surface) so drops on the sticky header /
* result-card margins are caught too. Same toast copy + "Go to
* Files" action as `ResourceList` for a consistent recovery UX.
*/
function onWindowDragOver(e: DragEvent) {
if (!e.dataTransfer?.types?.includes('Files')) return;
if (e.defaultPrevented) return;
e.preventDefault();
// `dropEffect = 'none'` would tell the browser to REJECT the
// drop before `drop` fires — the toast path below never runs.
// Accept at the pointer level and let `onWindowDrop` decide.
if (e.dataTransfer) e.dataTransfer.dropEffect = 'copy';
}
function onWindowDrop(e: DragEvent) {
if (!e.dataTransfer?.types?.includes('Files')) return;
if (e.defaultPrevented) return;
e.preventDefault();
ui.notify(
t(
'resource_list.wrong_drop_zone_msg',
'Uploads only work in Files — open the Files section and drop there.'
),
'warning',
6000,
true,
{
action: {
label: t('resource_list.wrong_drop_zone_action', 'Go to Files'),
// Best-effort recovery — the drop's `DataTransfer` is
// discarded once this handler returns (browsers don't
// persist it across a navigation), so we land the
// user in `/files` where they can re-drag from the OS.
onClick: () => goto(resolve('/files'))
}
}
);
}
</script>
<svelte:head><title>{t('search.title', 'Search')} · OxiCloud</title></svelte:head>
<svelte:window ondragover={onWindowDragOver} ondrop={onWindowDrop} />
<div class="page-sticky-header search-head">
<h1 class="page-title">
{#if query}{t('search.results_for', { q: query }, 'Results for “{{q}}”')}{:else}{t(