implemented tag cloud

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

frontend/src/App.svelte

@@ -28,6 +28,7 @@
     import ResetPw     from "./routes/user/ResetPw.svelte";
     import Search      from "./routes/search/Search.svelte";
     import SendDoc     from "./routes/document/Send.svelte";
+    import TagList     from "./routes/tags/Index.svelte";
     import TagUses     from "./routes/tags/TagUses.svelte";
     import TaskList    from "./routes/task/Index.svelte";
     import Times       from "./routes/time/Index.svelte";
@@ -96,6 +97,7 @@
         <Route path="/project/:id/kanban"          component={Kanban} />
         <Route path="/project/:id/view"            component={ViewPrj} />
         <Route path="/search"                      component={Search} />
+        <Route path="/tags"                        component={TagList} />
         <Route path="/tags/use/:tag"               component={TagUses} />
         <Route path="/task"                        component={TaskList} />
         <Route path="/task/:parent_task_id/add_subtask" component={AddTask} />

frontend/src/Components/Menu.svelte

@@ -56,6 +56,7 @@ onMount(fetchModules);
     <a href="/company"  {onclick}>{t('companies')}</a>
     <a href="/project"  {onclick}>{t('projects')}</a>
     <a href="/task"     {onclick}>{t('tasks')}</a>
+    <a href="/tags"     {onclick}>{t('tags')}</a>
     <a href="/document" {onclick}>{t('documents')}</a>
     <a href="/bookmark" {onclick}>{t('bookmarks')}</a>
     <a href="/notes"    {onclick}>{t('notes')}</a>

frontend/src/routes/tags/Index.svelte

@@ -0,0 +1,40 @@
+<script>
+    import { useTinyRouter } from 'svelte-tiny-router';
+    import { onMount }       from 'svelte';
+    import { api }           from '../../urls.svelte';
+    import { error, yikes }  from '../../warn.svelte';
+    import { t }             from '../../translations.svelte';
+
+    let router = useTinyRouter();
+    let tags = $state(null);
+
+    function onclick(e){
+        e.preventDefault();
+        var target = e.target;
+        while (target && !target.href) target=target.parentNode;
+        let href = target.getAttribute('href');
+        if (href) router.navigate(href);
+        return false;
+    }
+
+    async function loadTags(){
+        const url = api('tags');
+        const res = await fetch(url,{credentials:'include'});
+        if (res.ok){
+            yikes();
+            tags = await res.json();
+        } else error(res);
+    }
+
+    onMount(loadTags)
+</script>
+
+<h1>{t('tags')}</h1>
+
+<div class="cloud">
+{#if tags}
+{#each tags as entry}
+<a href="/tags/use/{encodeURIComponent(entry.tag)}" class="tag" style="font-size: {40 - 28/entry.count}px" title={t('count_of_occurrences',entry)} {onclick} >{entry.tag}</a>
+{/each}
+{/if}
+</div>