improved css, implemented setting task state directly in project tree

frontend/src/Components/ListTask.svelte

@@ -36,17 +36,24 @@
         router.navigate(`/task/${task.id}/view`);
     }
 
-    async function patchTask(newName){
-        console.log('patchTask('+newName+')');
+    async function patchTask(changeset){
         const url = api(`task/${task.id}`);
         const resp = await fetch(url,{
             credentials:'include',
             method: 'PATCH',
-            body: JSON.stringify({name:newName})
+            body: JSON.stringify(changeset)
         });
-        let ok = resp.ok;
-        console.log({ok:ok});
-        return ok;
+        if (resp.ok){
+            task = await resp.json();
+            return true;
+        } else {
+            error = await resp.text();
+            return false;
+        }
+    }
+
+    function setName(newName){
+        patchTask({name:newName});
     }
 
     if (task.estimated_time){
@@ -58,10 +65,16 @@
 </script>
 
 <li class="task {task.status.name.toLowerCase()}">
-    <LineEditor bind:value={task.name} onclick={openTask} editable={true} onSet={patchTask} type="span" />
+    <LineEditor bind:value={task.name} onclick={openTask} editable={true} onSet={setName} type="span" />
     {#if task.estimated_time}
     <span class="estimated_time">({+task.estimated_time}&nbsp;h)</span>
     {/if}
+    {#if task.status.code < 60}
+    <button class="symbol" title={t('complete')} onclick={() => patchTask({status:'COMPLETE'})}></button>
+    <button class="symbol" title={t('abort')} onclick={() => patchTask({status:'CANCELLED'})} ></button>
+    {:else}
+    <button class="symbol" title={t('do_open')} onclick={() => patchTask({status:'OPEN'})}></button>
+    {/if}
     {#if error}
     <span class="error">{error}</span>
     {/if}

frontend/src/routes/project/List.svelte

@@ -2,6 +2,7 @@
     import { useTinyRouter } from 'svelte-tiny-router';
     import { onMount } from 'svelte';
     import { t } from '../../translations.svelte.js';
+    import { api } from '../../urls.svelte.js';
 
     const router = useTinyRouter();
     let error = $state(null);
@@ -12,7 +13,7 @@
     let sortedProjects = $derived.by(() => Object.values(projects).sort((a, b) => a.name.localeCompare(b.name)));
 
     async function loadProjects(){
-        let url = `${location.protocol}//${location.host.replace('5173','8080')}/api/company/list`;
+        let url = api('company/list');
         let resp = await fetch(url,{credentials:'include'});
         if (resp.ok){
             companies = await resp.json();
@@ -33,7 +34,7 @@
     }
 
     async function setState(pid,state_name){
-        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/project/${pid}`;
+        const url = api(`project/${pid}`);
         const resp = await fetch(url,{
             credentials:'include',
             method:'PATCH',