working on tag module

frontend/src/routes/tags/TagList.svelte

@@ -0,0 +1,85 @@
+<script>
+    import {onMount} from 'svelte';
+
+    import {api} from '../../urls.svelte.js';
+    import {t} from '../../translations.svelte.js';
+    import {user} from '../../user.svelte.js'
+
+    import Editor from '../../Components/LineEditor.svelte';
+
+    let { module, id, user_list = [] } = $props();
+    let error = $state(null);
+    let newTag = $state('');
+    let tags = $state([]);
+
+    async function addTag(tag){
+        const url = api(`tags/${module}/${id}`);
+        const resp = await fetch(url,{
+            credentials:'include',
+            method:'POST',
+            body: JSON.stringify({tag:tag,user_list:user_list})
+        });
+        if (resp.ok){
+            tag = await resp.text();
+            tags.push(tag);
+        } else {
+            error = await resp.text();
+        }
+        return false;
+    }
+
+    async function drop(tag){
+        const url = api(`tags/${module}/${id}`);
+        const resp = await fetch(url,{
+            credentials:'include',
+            method:'DELETE',
+            body: tag
+        });
+        if (resp.ok){
+            tag = await resp.text();
+            tags = tags.filter(item => item !== tag);
+        } else {
+            error = await resp.text();
+        }
+        return false;
+    }
+
+    async function loadTags(){
+        const url = api(`tags/${module}/${id}`);
+        const resp = await fetch(url,{credentials:'include'});
+        if (resp.ok) {
+            tags = await resp.json();
+        } else {
+            error = await resp.text();
+        }
+    }
+
+    onMount(loadTags);
+</script>
+
+<style>
+    .tag {
+        border: 1px solid orange;
+        border-radius: 5px;
+        padding: 5px;
+    }
+    .editor span {
+        min-width: 100px;
+    }
+</style>
+
+{#if error}
+<span class="error">{error}</span>
+{/if}
+
+<div class="taglist">
+    {#each tags as tag,idx}
+    <span class="tag">
+        {tag}
+        <button onclick={() => drop(tag)} class="symbol"></button>
+    </span>
+    {/each}
+    <span class="tag editor">
+        <Editor editable="true" bind:value={newTag} onSet={addTag} type="span" />
+    </span>
+</div>

frontend/src/routes/task/View.svelte

@@ -9,6 +9,7 @@
     import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
     import MemberEditor from '../../Components/MemberEditor.svelte';
     import StateSelector from '../../Components/StateSelector.svelte';
+    import TagList from '../tags/TagList.svelte';
     import TaskList from './TaskList.svelte';
 
     const router = useTinyRouter();
@@ -284,6 +285,14 @@
                 {/if}
             </td>
         </tr>
+        <tr>
+            <th>
+                {t('tags')}
+            </th>
+            <td class="tags">
+                <TagList module="task", {id} user_list={Object.keys(task.members).map(id => +id)} />
+            </td>
+        </tr>
     </tbody>
 </table>
 {/if}