implemented /bookmark/<ID>/view

frontend/src/App.svelte

@@ -7,6 +7,7 @@
 
     import AddDoc      from "./routes/document/Add.svelte";
     import AddTask     from "./routes/task/Add.svelte";
+    import Bookmark    from "./routes/bookmark/View.svelte";
     import Bookmarks   from "./routes/bookmark/Index.svelte";
     import Callback    from "./routes/user/OidcCallback.svelte";
     import DocList     from "./routes/document/List.svelte";
@@ -52,6 +53,7 @@
             <Menu />
             <Route path="/"                            component={User} />
             <Route path="/bookmark"                    component={Bookmarks} />
+            <Route path="/bookmark/:id/view"           component={Bookmark} />
             <Route path="/document"                    component={DocList} />
             <Route path="/document/add"                component={AddDoc} />
             <Route path="/document/:id/send"           component={SendDoc} />

frontend/src/routes/bookmark/Index.svelte

@@ -6,6 +6,7 @@
 
     import Editor      from '../../Components/MarkdownEditor.svelte';
     import Tags        from '../tags/TagList.svelte';
+    import Template    from './Template.svelte';
 
     let bookmarks    = $state(null);
     let new_bookmark = $state({
@@ -75,16 +76,7 @@
     <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}
-        <Tags module="bookmark" id={bookmark.id} />
-    </fieldset>
+    <Template {bookmark} />
     {/each}
     {/if}
 </fieldset>

frontend/src/routes/bookmark/Template.svelte

@@ -0,0 +1,18 @@
+<script>
+    import Tags        from '../tags/TagList.svelte';
+
+    let { bookmark } = $props();
+</script>
+
+{#if 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>
+    {@html bookmark.comment.rendered}
+    <Tags module="bookmark" id={bookmark.id} />
+</fieldset>
+{/if}

frontend/src/routes/bookmark/View.svelte

@@ -0,0 +1,32 @@
+<script>
+    import { onMount } from 'svelte';
+
+    import Bookmark from './Template.svelte';
+
+    import { api }     from '../../urls.svelte.js';
+    import { t }       from '../../translations.svelte.js';
+
+    import Editor      from '../../Components/MarkdownEditor.svelte';
+    import Template        from './Template.svelte';
+
+    let bookmark = $state(null);
+    let error = $state(null);
+    let { id } = $props();
+
+    async function load(){
+        const url  = api(`bookmark/${id}`);
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok){
+            bookmark = await resp.json();
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    onMount(load);
+</script>
+
+{#if error}
+<span class="error">{error}</span>
+{/if}
+<Template {bookmark} />