pagination workiegit add . with infinite scroll

identity-web/src/routes/dashboard/+page.svelte

@@ -1,13 +1,37 @@
 <script lang="ts">
 	import { entryPage } from "$lib/api";
     import { account, credentials } from "$lib/stores";
+	import { onMount } from "svelte";
 	import Entries from "./Entries.svelte";
     import Overview from "./Overview.svelte"
 
     credentials.subscribe((v) => v == null && (setTimeout(() => window.location.pathname = '/auth/login', 200)))
-    let entries = entryPage($credentials!, 0, 20);
+    let throtle = false;
+    let currentOffset = 10;
+    let step = 5;
+    let entries = entryPage($credentials!, 0, currentOffset);
     let overview = Promise.allSettled([entryPage($credentials!, 0, 3), entryPage($credentials!, 20, 3)])
 
+    onMount(() => {
+        function handleScroll() {
+            if (!throtle && window.innerHeight + window.scrollY >= document.body.offsetHeight) {
+                throtle = true
+                entries.then(async (page) => {
+                    console.log("new page requested")
+                    let secondPage = await entryPage($credentials!, currentOffset, step);
+                    page = [...page, ...secondPage];
+                    
+                    currentOffset += step
+                    throtle = false
+                    entries = new Promise((resolve) => resolve(page))
+                })
+            }
+        }
+
+        window.addEventListener('scroll', handleScroll)
+        return () => window.removeEventListener('scroll', handleScroll);
+    })
+
     function refreshEntries() {
         entries = entryPage($credentials!, 0, 20);
     }

identity-web/src/routes/dashboard/Entries.svelte

@@ -10,10 +10,21 @@
     let dispatch = createEventDispatcher()
 
     export let entries: EntryType[]
+    let extended: string[] = []
 </script>
 
 {#each entries as entry (entry.id)}
-    <Entry on:deleted={(event) => { dispatch('deleted',event.detail) }} id={entry.id} kind={entry.base.kind} creationDate={new Date(entry.creationDate)} title={entry.base.kind === "date" ? new Date(entry.base.referencedDate).toLocaleDateString() : entry.title}>
+    <Entry
+        on:extended={() => extended = [entry.id, ...extended]}
+        on:contracted={() => extended = extended.filter(v => v !== entry.id)}
+        on:deleted={(event) => { dispatch('deleted', event.detail) }}
+
+        id={entry.id}
+        kind={entry.base.kind}
+        creationDate={new Date(entry.creationDate)}
+        title={entry.base.kind === "date" ? new Date(entry.base.referencedDate).toLocaleDateString() : entry.title}
+        isExtended={extended.includes(entry.id)}
+    >
         <div slot="contracted">
             {#if entry.base.kind === "song" || entry.base.kind === "album"}
                 <ExternalLink href={entry.base.link[0]}>{entry.base.artist} &dash; {entry.base.title}</ExternalLink>

identity-web/src/routes/dashboard/utils/Entry.svelte

@@ -13,6 +13,11 @@
     export let title: string | undefined;
 
     export let isExtended = false;
+    let prevExtended = isExtended
+
+    $: if (prevExtended !== isExtended) {
+        dispatch(isExtended ? 'extended' : 'contracted')
+    }
 
     async function processDeletion(id: string) {
         await deleteEntry($credentials!, id);