From 70cbb45b0102382290ded24a7443f3dc12407993 Mon Sep 17 00:00:00 2001
From: Masahiko AMANO <hiko-19@ya.ru>
Date: Tue, 7 Apr 2026 00:06:45 +0300
Subject: [PATCH] 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>
---
 frontend/src/routes/files/+page.svelte | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/frontend/src/routes/files/+page.svelte b/frontend/src/routes/files/+page.svelte
index f261f8a..82840e3 100644
--- a/frontend/src/routes/files/+page.svelte
+++ b/frontend/src/routes/files/+page.svelte
@@ -13,10 +13,13 @@
 	import { selectionStore, selectionActive } from '$lib/stores/selection';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import BulkTagEditor from '$lib/components/file/BulkTagEditor.svelte';
+	import { tick } from 'svelte';
 	import { parseDslFilter } from '$lib/utils/dsl';
 	import type { File, FileCursorPage, Pool, PoolOffsetPage } from '$lib/api/types';
 	import { appSettings } from '$lib/stores/appSettings';
 
+	let scrollContainer = $state<HTMLElement | undefined>();
+
 	let uploader = $state<{ open: () => void } | undefined>();
 	let confirmDeleteFiles = $state(false);
 
@@ -121,6 +124,12 @@
 		} finally {
 			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) {
@@ -244,7 +253,7 @@
 	{/if}
 
 	<FileUpload bind:this={uploader} onUploaded={handleUploaded}>
-		<main>
+		<main bind:this={scrollContainer}>
 			{#if error}
 				<p class="error" role="alert">{error}</p>
 			{/if}