started to implement project tagging, was interrupted.

next on: saving tags for user = null

frontend/src/routes/project/Create.svelte

@@ -5,19 +5,21 @@
 
     import CompanySelector from '../../Components/CompanySelector.svelte';
     import MarkdownEditor from '../../Components/MarkdownEditor.svelte';
-
     import Settings from './Settings.svelte';
-    let showSettings = $state(false);
-    let ready = $derived(!!project.name.trim())
+    import Tags from '../tags/TagList.svelte';
+
     let error = $state(null);
+    let ready = $derived(!!project.name.trim())
     const router = useTinyRouter();
+    let showSettings = $state(false);
 
     let project = $state({
         name:'',
         description : { source : '', rendered : '' },
         settings:{
             show_closed:false
-        }
+        },
+        tags: []
     });
 
     async function onsubmit(ev){
@@ -40,6 +42,11 @@
         project.company_id = company.id;
         console.log(project);
     }
+
+    function toggleSettings(ev){
+        ev.preventDefault();
+        showSettings = !showSettings;
+    }
 </script>
 
 <style>
@@ -82,22 +89,39 @@
                             <MarkdownEditor bind:value={project.description} simple={true} />
                         </td>
                     </tr>
-                    {#if !showSettings}
+                    {#if showSettings}
                     <tr>
                         <th>
                             {t('settings')}
                         </th>
                         <td>
-                            <button onclick={() => showSettings = true}>{t('extended_settings')}</button>
+                            <label>
+                                <input type="checkbox" bind:checked={project.settings.show_closed} />
+                                {t('display_closed_tasks')}
+                            </label>
+                        </td>
+                    </tr>
+                    {:else}
+                    <tr>
+                        <th>
+                            {t('settings')}
+                        </th>
+                        <td>
+                            <button onclick={toggleSettings} >{t('extended_settings')}</button>
                         </td>
                     </tr>
                     {/if}
+                    <tr>
+                        <th>
+                            {t('tags')}
+                        </th>
+                        <td>
+                            <Tags module="project" bind:tags={project.tags} />
+                        </td>
+                    </tr>
                 </tbody>
             </table>
         </fieldset>
-        {#if showSettings}
-            <Settings bind:settings={project.settings}/>
-        {/if}
         <button type="submit" disabled={!ready}>{t('create')}</button>
     </fieldset>
 </form>

frontend/src/routes/project/Settings.svelte

@@ -6,8 +6,4 @@
 </script>
 <fieldset>
     <legend>{t('settings')}</legend>
-    <label>
-        <input type="checkbox" bind:checked={settings.show_closed} />
-        {t('display_closed_tasks')}
-    </label>
 </fieldset>

frontend/src/routes/tags/TagList.svelte

@@ -7,12 +7,22 @@
 
     import Editor from '../../Components/LineEditor.svelte';
 
-    let { module, id, user_list = [] } = $props();
+    let {
+        id = null,
+        module,
+        tags = $bindable([]),
+        user_list = [],
+    } = $props();
     let error = $state(null);
     let newTag = $state('');
-    let tags = $state([]);
 
     async function addTag(tag){
+        if (!id) {
+            // when creating elements, they don`t have an id, yet
+            tags.push(tag);
+            tags = tags.sort();
+            return;
+        }
         const url = api(`tags/${module}/${id}`);
         const resp = await fetch(url,{
             credentials:'include',
@@ -30,6 +40,10 @@
     }
 
     async function drop(tag){
+        if (!id){ // then creating new elements, the don`t have an id, yet
+            tags = tags.filter(item => item !== tag);
+            return;
+        }
         const url = api(`tags/${module}/${id}`);
         const resp = await fetch(url,{
             credentials:'include',
@@ -46,6 +60,7 @@
     }
 
     async function loadTags(entityId){
+        if (!entityId) return; // when crating elements, they dont`t have an id, yet.
         const url = api(`tags/${module}/${entityId}`);
         const resp = await fetch(url,{credentials:'include'});
         if (resp.ok) {