refactor: use cursors instead of pages

web/src/routes/admin/maintenance/integrity-report/[type]/+page.svelte

@@ -13,6 +13,7 @@
     ManualJobName,
   } from '@immich/sdk';
   import {
+    Button,
     HStack,
     IconButton,
     menuManager,
@@ -21,14 +22,7 @@
     type ContextMenuBaseProps,
     type MenuItems,
   } from '@immich/ui';
-  import {
-    mdiChevronLeft,
-    mdiChevronRight,
-    mdiDotsVertical,
-    mdiDownload,
-    mdiPageFirst,
-    mdiTrashCanOutline,
-  } from '@mdi/js';
+  import { mdiDotsVertical, mdiDownload, mdiTrashCanOutline } from '@mdi/js';
   import { onDestroy, onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import { SvelteSet } from 'svelte/reactivity';
@@ -41,18 +35,18 @@
   let { data }: Props = $props();
 
   let deleting = new SvelteSet();
-  let page = $state(1);
   let integrityReport = $state(data.integrityReport);
 
-  async function loadPage(target: number) {
-    integrityReport = await getIntegrityReport({
+  async function loadMore() {
+    const { items, nextCursor } = await getIntegrityReport({
       integrityGetReportDto: {
         type: data.type,
-        page: target,
+        cursor: integrityReport.nextCursor,
       },
     });
 
-    page = target;
+    integrityReport.items.push(...items);
+    integrityReport.nextCursor = nextCursor;
   }
 
   async function removeAll() {
@@ -108,7 +102,7 @@
   }
 
   function download(reportId: string) {
-    location.href = `${getBaseUrl()}/admin/maintenance/integrity/report/${reportId}/file`;
+    location.href = `${getBaseUrl()}/admin/integrity/report/${reportId}/file`;
   }
 
   const handleOpen = async (event: Event, props: Partial<ContextMenuBaseProps>, reportId: string) => {
@@ -150,7 +144,11 @@
       if (jobs.integrityCheck.queueStatus.isActive) {
         expectingUpdate = true;
       } else if (expectingUpdate) {
-        await loadPage(page);
+        integrityReport = await getIntegrityReport({
+          integrityGetReportDto: {
+            type: data.type,
+          },
+        });
         expectingUpdate = false;
       }
 
@@ -195,9 +193,7 @@
             <th class="w-1/8"></th>
           </tr>
         </thead>
-        <tbody
-          class="block max-h-80 w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg"
-        >
+        <tbody class="block w-full rounded-md border dark:border-immich-dark-gray dark:text-immich-dark-fg">
           {#each integrityReport.items as { id, path } (id)}
             <tr
               class={`flex py-1 w-full place-items-center even:bg-subtle/20 odd:bg-subtle/80 ${deleting.has(id) || deleting.has('all') ? 'text-gray-500' : ''}`}
@@ -216,31 +212,13 @@
             </tr>
           {/each}
         </tbody>
-        <tfoot>
-          <HStack class="mt-4 items-center justify-end">
-            <IconButton
-              disabled={page === 1}
-              color="primary"
-              icon={mdiPageFirst}
-              aria-label={$t('first_page')}
-              onclick={() => loadPage(1)}
-            />
-            <IconButton
-              disabled={page === 1}
-              color="primary"
-              icon={mdiChevronLeft}
-              aria-label={$t('previous_page')}
-              onclick={() => loadPage(page - 1)}
-            />
-            <IconButton
-              disabled={!integrityReport.hasNextPage}
-              color="primary"
-              icon={mdiChevronRight}
-              aria-label={$t('next_page')}
-              onclick={() => loadPage(page + 1)}
-            />
-          </HStack>
-        </tfoot>
+        {#if integrityReport.nextCursor}
+          <tfoot>
+            <HStack class="mt-4 items-center justify-center">
+              <Button color="primary" onclick={() => loadMore()}>Load More</Button>
+            </HStack>
+          </tfoot>
+        {/if}
       </table>
     </section>
   </section>