working on color customization

frontend/src/routes/project/Kanban.svelte

@@ -224,7 +224,7 @@
                 {#if stateList[state]}
                 {#each Object.values(stateList[state]).sort((a,b) => a.name.localeCompare(b.name)) as task}
                     {#if !filter || task.name.toLowerCase().includes(filter) || (task.tags && task.tags.filter(tag => tag.toLowerCase().includes(filter)).length)}
-                    <Card onclick={e => openTask(task.id)} ondragstart={ev => dragged=task} {task} />
+                    <Card onclick={e => openTask(task.id)} ondragstart={ev => dragged=task} {task} tag_colors={project.tag_colors} />
                     {/if}
                 {/each}
                 {/if}

frontend/src/routes/project/KanbanCard.svelte

@@ -1,8 +1,22 @@
 <script>
-    let { onclick, ondragstart, task } = $props();
+    let { onclick, ondragstart, tag_colors = {}, task } = $props();
+
+    function calcStyle(){
+        if (!task.tags || !tag_colors) return '';
+        for (let tag of task.tags){
+            let color = tag_colors[tag.toLowerCase()];
+            if (color) return `background: ${color}`;
+        }
+        return '';
+    }
+    let style = $derived.by(calcStyle)
+
 </script>
 
-<div draggable="true" class={`box prio_${task.total_prio} p${Math.floor(task.total_prio/10)*10} p${task.total_prio % 10}`} {onclick} {ondragstart} >
+<div
+        draggable="true"
+        class={`box prio_${task.total_prio} p${Math.floor(task.total_prio/10)*10} p${task.total_prio % 10}`}
+        {onclick} {ondragstart} style={style}>
     <span class="title">{task.name}</span>
     {#if task.estimated_time}
     <span class="estimate">

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>