From 01651ee0a6aa9f66f12a18bea19b4096010f1c36 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 23 Oct 2024 00:51:27 -0700
Subject: [PATCH] enh: feedback history pagination

---
 src/lib/components/admin/Evaluations.svelte | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/lib/components/admin/Evaluations.svelte b/src/lib/components/admin/Evaluations.svelte
index 7a4a81e0d..82d5a1347 100644
--- a/src/lib/components/admin/Evaluations.svelte
+++ b/src/lib/components/admin/Evaluations.svelte
@@ -12,12 +12,17 @@
 	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import Badge from '../common/Badge.svelte';
+	import Pagination from '../common/Pagination.svelte';
 
 	const i18n = getContext('i18n');
 
 	let rankedModels = [];
 	let feedbacks = [];
 
+	let page = 1;
+
+	$: paginatedFeedbacks = feedbacks.slice((page - 1) * 10, page * 10);
+
 	type Feedback = {
 		model_id: string;
 		sibling_model_ids?: string[];
@@ -229,6 +234,10 @@
 	<div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between">
 		<div class="flex md:self-center text-lg font-medium px-0.5">
 			{$i18n.t('Feedback History')}
+
+			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
+
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{feedbacks.length}</span>
 		</div>
 	</div>
 
@@ -267,7 +276,7 @@
 					</tr>
 				</thead>
 				<tbody class="">
-					{#each feedbacks as feedback (feedback.id)}
+					{#each paginatedFeedbacks as feedback (feedback.id)}
 						<tr class="bg-white dark:bg-gray-900 dark:border-gray-850 text-xs">
 							<td class=" py-0.5 text-right font-semibold">
 								<div class="flex justify-center">
@@ -346,5 +355,7 @@
 		{/if}
 	</div>
 
+	<Pagination bind:page count={feedbacks.length} perPage={10} />
+
 	<div class="pb-8"></div>
 {/if}