preparing to list uses of tag

frontend/src/App.svelte

@@ -22,6 +22,7 @@
     import ResetPw     from "./routes/user/ResetPw.svelte";
     import Search      from "./routes/search/Search.svelte";
     import SendDoc     from "./routes/document/Send.svelte";
+    import TagUses     from "./routes/tags/TagUses.svelte";
     import User        from "./routes/user/User.svelte";
     import ViewDoc     from "./routes/document/View.svelte";
     import ViewPrj     from "./routes/project/View.svelte";
@@ -61,6 +62,7 @@
             <Route path="/project/:id/kanban"          component={Kanban} />
             <Route path="/project/:id/view"            component={ViewPrj} />
             <Route path="/search"                      component={Search} />
+            <Route path="/tags/use/:tag"                component={TagUses} />
             <Route path="/task/:parent_task_id/add_subtask" component={AddTask} />
             <Route path="/task/:id/view"               component={ViewTask} />
             <Route path="/user"                        component={User} />

frontend/src/routes/tags/TagList.svelte

@@ -1,11 +1,10 @@
 <script>
-    import {onMount} from 'svelte';
+    import {onMount}         from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }   from '../../urls.svelte.js';
+    import { api }           from '../../urls.svelte.js';
-    import { t }     from '../../translations.svelte.js';
+    import { t }             from '../../translations.svelte.js';
-    import { user }  from '../../user.svelte.js'
+    import { user }          from '../../user.svelte.js'
-
-    import Editor    from '../../Components/LineEditor.svelte';
 
     let {
         id        = null,
@@ -15,11 +14,12 @@
     } = $props();
     let error  = $state(null);
     let newTag = $state('');
+    let router = useTinyRouter();
 
-    async function addTag(tag){
+    async function addTag(){
         if (!id) {
             // when creating elements, they don`t have an id, yet
-            tags.push(tag);
+            tags.push(newTag);
             tags = tags.sort();
             return;
         }
@@ -27,13 +27,14 @@
         const resp = await fetch(url,{
             credentials : 'include',
             method      : 'POST',
-            body        : JSON.stringify({tag:tag,user_list:user_list})
+            body        : JSON.stringify({tag:newTag,user_list:user_list})
         });
         if (resp.ok){
-            tag = await resp.text();
+            newTag = await resp.text();
-            tags.push(tag);
+            tags.push(newTag);
             tags  = tags.sort();
             error = null;
+            newTag = '';
         } else {
             error = await resp.text();
         }
@@ -72,6 +73,14 @@
         }
     }
 
+    function show(tag){
+        router.navigate(`/tags/use/${tag}`);
+    }
+
+    function typed(ev){
+        if (ev.keyCode == 13) addTag();
+    }
+
     $effect(() => loadTags(id));
 </script>
 
@@ -93,11 +102,11 @@
 <div class="taglist">
     {#each tags as tag,idx}
     <span class="tag">
-        {tag}
+        <span onclick={() => show(tag)}>{tag}</span>
         <button onclick={() => drop(tag)} class="symbol"></button>
     </span>
     {/each}
     <span class="tag editor">
-        <Editor editable="true" bind:value={newTag} onSet={addTag} type="span" />
+        <input type="text" bind:value={newTag} onkeyup={typed} autofocus />
     </span>
 </div>

frontend/src/routes/tags/TagUses.svelte

@@ -0,0 +1,30 @@
+<script>
+    import {onMount}         from 'svelte';
+    import { useTinyRouter } from 'svelte-tiny-router';
+
+    import { api }           from '../../urls.svelte.js';
+    import { t }             from '../../translations.svelte.js';
+
+    let { tag } = $props();
+    let error   = $state(null);
+    let uses    = $state(null);
+
+    async function loadUses(){
+        const url  = api(`tags/uses/${tag}`);
+        const resp = await fetch(api,{credentials:'include'});
+        if (resp.ok){
+            uses = await resp.json;
+            error = null;
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    onMount(loadUses);
+</script>
+<fieldset>
+    <legend>{t('tag_uses',{tag:tag})}</legend>
+    {#if error}
+    <span class="error">{error}</span>
+    {/if}
+</fieldset>

translations/src/main/resources/de.json

@@ -214,6 +214,7 @@
   "subject": "Betreff",
   "subtasks": "Unteraufgaben",
 
+  "tag_uses": "Verwendung des Tags „{tag}“",
   "tags": "Tags",
   "task": "Aufgabe",
   "tasks": "Aufgaben",