From 62dc486c8577bef6d0c65fd3777b9425bd85a06d Mon Sep 17 00:00:00 2001
From: Aryan Kothari <87589047+thearyadev@users.noreply.github.com>
Date: Thu, 1 Aug 2024 15:19:14 -0400
Subject: [PATCH] add: add paginated scroll handler

---
 src/lib/components/layout/Sidebar.svelte | 77 +++++++++++++++++++++---
 1 file changed, 70 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 49a0e2ebb..d8434e6a2 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -11,7 +11,10 @@
 		showSidebar,
 		mobile,
 		showArchivedChats,
-		pinnedChats
+		pinnedChats,
+		pageSkip,
+		pageLimit,
+		scrollPaginationEnabled
 	} from '$lib/stores';
 	import { onMount, getContext, tick } from 'svelte';
 
@@ -49,6 +52,12 @@
 	let showDropdown = false;
 
 	let filteredChatList = [];
+	let paginationScrollThreashold = 0.6;
+	let nextPageLoading = false;
+	let tagView = false;
+	let chatPagniationComplete = false;
+
+	pageLimit.set(20);
 
 	$: filteredChatList = $chats.filter((chat) => {
 		if (search === '') {
@@ -84,7 +93,7 @@
 		showSidebar.set(window.innerWidth > BREAKPOINT);
 
 		await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
-		await chats.set(await getChatList(localStorage.token));
+		await chats.set(await getChatList(localStorage.token, $pageSkip, $pageLimit));
 
 		let touchstart;
 		let touchend;
@@ -185,7 +194,9 @@
 				await tick();
 				goto('/');
 			}
-			await chats.set(await getChatList(localStorage.token));
+			await chats.set(
+				await getChatList(localStorage.token, 0, $pageSkip * $pageLimit || $pageLimit)
+			);
 			await pinnedChats.set(await getChatListByTagName(localStorage.token, 'pinned'));
 		}
 	};
@@ -235,6 +246,9 @@
 			? ''
 			: 'invisible'}"
 	>
+		<h1 class="text-red-400 text-bold text-xl">
+			Chats loaded: {$chats.length}
+		</h1>
 		<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
 			<a
 				id="sidebar-new-chat-button"
@@ -410,7 +424,15 @@
 						class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
 						placeholder={$i18n.t('Search')}
 						bind:value={search}
-						on:focus={() => {
+						on:focus={async () => {
+							// loading all chats. disable pagination on scrol.
+							scrollPaginationEnabled.set(false);
+							// subsequent queries will calculate page size to rehydrate the ui.
+							// since every chat is already loaded, the calculation should now load all chats.
+							pageSkip.set(0);
+							pageLimit.set(-1);
+							await chats.set(await getChatList(localStorage.token)); // when searching, load all chats
+
 							enrichChatsWithContent($chats);
 						}}
 					/>
@@ -422,7 +444,13 @@
 					<button
 						class="px-2.5 text-xs font-medium bg-gray-50 dark:bg-gray-900 dark:hover:bg-gray-800 transition rounded-full"
 						on:click={async () => {
-							await chats.set(await getChatList(localStorage.token));
+							scrollPaginationEnabled.set(false);
+							pageSkip.set(0);
+							pageLimit.set(-1);
+
+							await chats.set(
+								await getChatList(localStorage.token, $pageSkip * $pageLimit, $pageLimit)
+							);
 						}}
 					>
 						{$i18n.t('all')}
@@ -433,9 +461,18 @@
 							on:click={async () => {
 								let chatIds = await getChatListByTagName(localStorage.token, tag.name);
 								if (chatIds.length === 0) {
+									// no chats found in the tag
 									await tags.set(await getAllChatTags(localStorage.token));
-									chatIds = await getChatList(localStorage.token);
+									scrollPaginationEnabled.set(false);
+									pageSkip.set(0);
+									pageLimit.set(-1);
+									chatIds = await getChatList(
+										localStorage.token,
+										$pageSkip * $pageLimit,
+										$pageLimit
+									);
 								}
+								tagView = true;
 								await chats.set(chatIds);
 							}}
 						>
@@ -477,7 +514,33 @@
 				</div>
 			{/if}
 
-			<div class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden">
+			<div
+				class="pl-2 my-2 flex-1 flex flex-col space-y-1 overflow-y-auto scrollbar-hidden"
+				on:scroll={async (e) => {
+					if (!$scrollPaginationEnabled) return;
+					if (tagView) return;
+					if (nextPageLoading) return;
+					if (chatPagniationComplete) return;
+
+					const maxScroll = e.target.scrollHeight - e.target.clientHeight;
+					const currentPos = e.target.scrollTop;
+					const ratio = currentPos / maxScroll;
+					if (ratio >= paginationScrollThreashold) {
+						nextPageLoading = true;
+						pageSkip.set($pageSkip + 1);
+						// extend existing chats
+						const nextPageChats = await getChatList(
+							localStorage.token,
+							$pageSkip * $pageLimit,
+							$pageLimit
+						);
+						// once the bottom of the list has been reached (no results) there is no need to continue querying
+						chatPagniationComplete = nextPageChats.length === 0;
+						await chats.set([...$chats, ...nextPageChats]);
+						nextPageLoading = false;
+					}
+				}}
+			>
 				{#each filteredChatList as chat, idx}
 					{#if idx === 0 || (idx > 0 && chat.time_range !== filteredChatList[idx - 1].time_range)}
 						<div