fix(frontend): auto-fill viewport on file list load

After each batch, check if the scroll container is still shorter than
the viewport (scrollHeight <= clientHeight) and keep loading until the
scrollbar appears or there are no more files.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Masahiko AMANO 2026-04-07 00:06:45 +03:00
parent 012c6f9c48
commit 70cbb45b01

View File

@ -13,10 +13,13 @@
import { selectionStore, selectionActive } from '$lib/stores/selection'; import { selectionStore, selectionActive } from '$lib/stores/selection';
import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte'; import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
import BulkTagEditor from '$lib/components/file/BulkTagEditor.svelte'; import BulkTagEditor from '$lib/components/file/BulkTagEditor.svelte';
import { tick } from 'svelte';
import { parseDslFilter } from '$lib/utils/dsl'; import { parseDslFilter } from '$lib/utils/dsl';
import type { File, FileCursorPage, Pool, PoolOffsetPage } from '$lib/api/types'; import type { File, FileCursorPage, Pool, PoolOffsetPage } from '$lib/api/types';
import { appSettings } from '$lib/stores/appSettings'; import { appSettings } from '$lib/stores/appSettings';
let scrollContainer = $state<HTMLElement | undefined>();
let uploader = $state<{ open: () => void } | undefined>(); let uploader = $state<{ open: () => void } | undefined>();
let confirmDeleteFiles = $state(false); let confirmDeleteFiles = $state(false);
@ -121,6 +124,12 @@
} finally { } finally {
loading = false; loading = false;
} }
// If the loaded content doesn't fill the viewport yet (no scrollbar),
// keep loading until it does or there's nothing left.
await tick();
if (hasMore && scrollContainer && scrollContainer.scrollHeight <= scrollContainer.clientHeight) {
void loadMore();
}
} }
function applyFilter(filter: string | null) { function applyFilter(filter: string | null) {
@ -244,7 +253,7 @@
{/if} {/if}
<FileUpload bind:this={uploader} onUploaded={handleUploaded}> <FileUpload bind:this={uploader} onUploaded={handleUploaded}>
<main> <main bind:this={scrollContainer}>
{#if error} {#if error}
<p class="error" role="alert">{error}</p> <p class="error" role="alert">{error}</p>
{/if} {/if}