working on color customization

frontend/src/routes/project/View.svelte

@@ -21,6 +21,7 @@
     let showSettings   = $state(false);
     let tasks          = $state(null);
     let show_closed    = $state(false);
+    let new_color      = $state({tag:null,color:'#00aa00'})
 
     let new_state = $state({code:null,name:null})
     let state_available=$derived(new_state.name && new_state.code && !project.allowed_states[new_state.code]);
@@ -55,6 +56,11 @@
         loadTasks();
     }
 
+    async function dropColor(tag){
+        delete project.tag_colors[tag];
+        update({tag_colors:project.tag_colors});
+    }
+
     async function dropMember(member){
         update({drop_member:member.user.id});
     }
@@ -112,6 +118,15 @@
         }
     }
 
+    function saveTagColor(){
+        project.tag_colors[new_color.tag] = new_color.color;
+        update({tag_colors:project.tag_colors});
+    }
+
+    function toggleSettings(){
+        showSettings = !showSettings;
+    }
+
     async function update(data){
         const url  = api(`project/${id}`);
         const resp = await fetch(url,{
@@ -129,11 +144,6 @@
         }
     }
 
-    function toggleSettings(){
-        showSettings = !showSettings;
-    }
-
-
     function updatePermission(user_id,permission){
         let members      = {};
         members[user_id] = permission.code;
@@ -188,8 +198,8 @@
         <input type="checkbox" bind:checked={project.show_closed} onchange={changeClosed} />
         {t('display_closed_tasks')}
     </label>
-    <div>{t('members')}</div>
-    <div>
+    <div class="em">{t('members')}</div>
+    <div class="em">
         <PermissionEditor members={project.members} {updatePermission} {addMember} {dropMember} {getCandidates} />
     </div>
     {#if project.allowed_states}
@@ -212,7 +222,25 @@
         {/if}
     </div>
     {/if}
-    {/if}
+    <div class="em">
+        {t('custom_tag_colors')}
+        <input type="color" bind:value={new_color.color} >
+    </div>
+    <div class="em">
+        <label>
+            {t('tag_name')}:
+            <input type="text" bind:value={new_color.tag} />
+        </label>
+        <button onclick={saveTagColor}>{t('add_object',{object:t('color')})}</button>
+    </div>
+    {#each Object.entries(project.tag_colors) as [k,v]}
+    <div style="background: {v}">{k}</div>
+    <div class="em">
+        <button onclick={e => dropColor(k)}>{t('delete')}</button>
+    </div>
+    {/each}
+    {/if} <!-- settings -->
+
     {#if estimated_time.sum}
     <div>{t('estimated_time')}</div>
     <div class="estimated_time">{estimated_time.sum} h</div>