implemented archiving tasks from kanban

frontend/src/routes/project/Kanban.svelte

@@ -25,6 +25,24 @@
 
     $effect(() => updateUrl(filter_input));
 
+    async function do_archive(ex){
+        ex.preventDefault();
+        var task = dragged;
+        const url  = api(`task/${task.id}`);
+        const resp = await fetch(url,{
+            credentials : 'include',
+            method      : 'PATCH',
+            body        : JSON.stringify({no_index:true})
+        });
+        delete highlight.archive;
+        if (resp.ok){
+            yikes();
+            delete tasks[task.assignee][task.status][task.id]
+        } else {
+            error(resp);
+        }
+    }
+
     function updateUrl(){
         let url = window.location.origin + window.location.pathname;
         if (filter_input) url += '?filter=' + encodeURI(filter_input);
@@ -149,6 +167,11 @@
         highlight = {user:user_id,state:state};
     }
 
+    function hover_archive(ev){
+        ev.preventDefault();
+        highlight.archive = true;
+    }
+
     function openTask(task_id){
         controller.abort();
         router.navigate(`/task/${task_id}/view`)
@@ -180,7 +203,7 @@
     {#each Object.entries(tasks) as [uid,stateList]}
         <div class="user">{users[uid]}</div>
         {#each Object.entries(project.allowed_states) as [state,name]}
-            <div class={['state_'+state, highlight.user == uid && highlight.state == state ? 'highlight':'']} ondragover={ev => hover(ev,uid,state)} ondrop={ev => drop(uid,state)} >
+            <div class={['state_'+state, highlight.user == uid && highlight.state == state ? 'highlight':'']} ondragover={ev => hover(ev,uid,state)} ondragleave={e => delete highlight.user} ondrop={ev => drop(uid,state)} >
                 {#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)}
@@ -195,5 +218,7 @@
         {/each}
     {/each}
 </div>
-<div class="archive">{t('archive')}</div>
-{/if}
+<div class="archive {highlight.archive?'hover':''}" ondragover={hover_archive} ondragleave={e => delete highlight.archive} ondrop={do_archive} >
+{t('archive')}
+</div>
+{/if}

web/src/main/resources/web/css/default-color.css

@@ -45,6 +45,15 @@ textarea{
     background-color: #333;
 }
 
+.archive{
+  background: black;
+}
+
+.archive.hover{
+    background: orange;
+    color: black;
+}
+
 .em {
     background: rgba(255, 215, 0, 0.09);
 }

web/src/main/resources/web/css/default.css

@@ -53,16 +53,6 @@ nav {
   border-bottom: 1px solid;
 }
 
-.error {
-  padding: 5px;
-  border-radius: 6px;
-}
-
-.warn {
-    padding: 5px;
-    border-radius: 6px;
-}
-
 fieldset[tabindex="0"]{
     max-height: 55px;
     overflow: hidden;
@@ -74,6 +64,29 @@ fieldset[tabindex="0"]:focus-within{
 td, tr{
     vertical-align: baseline;
 }
+
+.archive {
+  position: fixed;
+  top: 10px;
+  right: 10px;
+  width: 200px;
+  height: 30px;
+  z-index: 100;
+  border-radius: 5px;
+  text-align: center;
+  border: 1px solid;
+}
+
+.error {
+  padding: 5px;
+  border-radius: 6px;
+}
+
+.warn {
+    padding: 5px;
+    border-radius: 6px;
+}
+
 .customer,
 .sender,
 .invoice_meta{
@@ -369,15 +382,3 @@ a.wikilink{
 
 
 
-.archive {
-  position: fixed;
-  top: 10px;
-  right: 10px;
-  width: 250px;
-  height: 40px;
-  z-index: 100;
-  border-radius: 5px;
-  background: black;
-  text-align: center;
-  border: 1px solid;
-}