implemented endles scrolling on bookmark list page

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/bookmark/Index.svelte

@@ -10,6 +10,11 @@
     import Template    from './Template.svelte';
 
     let bookmarks    = $state(null);
+    let loader       = {
+        offset : 0,
+        limit  : 16,
+        active : true
+    }
     let new_bookmark = $state({
         comment:{
             source:null,
@@ -40,13 +45,18 @@
         }
     }
 
-    async function loadBookmarks(offset=0,limit=100){
+    async function loadBookmarks(){
-        const url  = api(`bookmark/list?offset=${offset}&limit=${limit}`);
+        const url  = api(`bookmark/list?offset=${loader.offset}&limit=${loader.limit}`);
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             const raw = await resp.json();
-            bookmarks = Object.values(raw).sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+            let merged = bookmarks ? bookmarks : {}
+            merged = { ...bookmarks , ...raw };
+            bookmarks = Object.values(merged).sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+            loader.offset += loader.limit;
+            loader.active  = false;
             error = false;
+            onscroll(null);
         } else {
             error = await resp.html();
         }
@@ -75,9 +85,17 @@
         }
     }
 
+    function onscroll(ev){
+        if (window.innerHeight + window.scrollY >= document.body.offsetHeight && !loader.active) {
+            loader.active = true;
+            loadBookmarks();
+        }
+    }
+
     onMount(loadBookmarks);
 </script>
 
+<svelte:window {onscroll} />
 <fieldset>
     <legend>{t('Bookmarks')}</legend>
     {#if error}