implemented loading of bookmarks and bookmark list

frontend/src/routes/bookmark/Index.svelte

@@ -1,12 +1,31 @@
 <script>
-    import { api } from '../../urls.svelte.js';
-    import { t }   from '../../translations.svelte.js';
+    import { onMount } from 'svelte';
 
-    import Editor from '../../Components/MarkdownEditor.svelte';
+    import { api }     from '../../urls.svelte.js';
+    import { t }       from '../../translations.svelte.js';
 
-    let comment = $state({source:null,rendered:null});
-    let error   = $state(null);
-    let link    = $state(null);
+    import Editor      from '../../Components/MarkdownEditor.svelte';
+
+    let bookmarks = $state(null);
+    let comment   = $state({source:null,rendered:null});
+    let error     = $state(null);
+    let link      = $state(null);
+
+    async function loadBookmarks(){
+        const url  = api('bookmark/list');
+        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)
+                );
+
+            error = false;
+        } else {
+            error = await resp.html();
+        }
+    }
 
     async function onclick(ev){
         let data    = {
@@ -17,13 +36,17 @@
         const resp = await fetch(url,{
             credentials : 'include',
             method      : 'POST',
-            body       : JSON.stringify(data)
+            body        : JSON.stringify(data)
         });
         if (resp.ok) {
+            const bookmark = await resp.json();
+            bookmarks.unshift(bookmark);
         } else {
             error = await resp.text();
         }
     }
+
+    onMount(loadBookmarks);
 </script>
 
 <fieldset>
@@ -40,4 +63,17 @@
         <Editor simple={true} bind:value={comment} />
     </label>
     <button {onclick}>{t('save')}</button>
+    {#if bookmarks}
+    {#each bookmarks as bookmark}
+    <fieldset class="bookmark">
+        <legend>
+            <a href={bookmark.url} target="_blank" class="url">{bookmark.url}</a>
+        </legend>
+        <legend class="date">
+            {bookmark.timestamp.replace('T',' ')}
+        </legend>
+        {bookmark.comment}
+    </fieldset>
+    {/each}
+    {/if}
 </fieldset>