improved easylist

Signed-off-by: Stephan Richter <s.richter@srsoftware.de>

frontend/src/routes/task/EasyList.svelte

@@ -5,8 +5,11 @@
     import { error, yikes }    from '../../warn.svelte';
     import { t }               from '../../translations.svelte';
 
+    import Detail from './EasyListDetail.svelte';
+
     let { tag } = $props();
     let filter  = $state(null);
+    let highlight = $state(null);
     let search  = $derived(filter ? filter.toLowerCase() : null);
     let input;
     let tasks   = $state(null);
@@ -24,6 +27,14 @@
         update(task,60);
     }
 
+    function goTag(e,newTag){
+        e.preventDefault();
+        e.stopPropagation();
+        router.navigate(`/tags/easylist/${newTag}`);
+        tag = newTag;
+        load();
+    }
+
     async function load(){
         const url = api(`task/tagged/${tag}`);
         const res = await get(url);
@@ -39,14 +50,10 @@
         return !task.no_index;
     }
 
-    function oncontextmenu(e){
+    function extend(e,task){
-        e.stopPropagation();
         e.preventDefault();
-        console.log(e);
+        e.stopPropagation();
-        var target = e.target;
+        highlight = task;
-        while (target && !target.href) target=target.parentNode;
-        let href = target.getAttribute('href');
-        if (href) router.navigate(href);
         return false;
     }
 
@@ -57,6 +64,7 @@
     }
 
     async function update(task,newState){
+        highlight = null;
         const url = api(`task/${task.id}`);
         const res = await patch(url,{status:newState});
         if (res.ok){
@@ -71,20 +79,21 @@
     onMount(load);
 </script>
 
-<div class="easylist">
+<h2>{tag}</h2>
-    <div class="filter">
-        {t('filter')}: <input type="text" bind:value={filter} bind:this={input} />
-    </div>
 
+<div class="easylist">
     <fieldset class="open">
         <legend>{t('state_open')}</legend>
         {#if sorted}
         {#each sorted as task}
             {#if task.status == 20 && (!filter || task.name.toLowerCase().includes(search))}
-            <a href={`/task/${task.id}/view`} title={task.description.source} onclick={e => close(e,task)} {oncontextmenu} >
+            <a href={`/task/${task.id}/view`} title={task.description.source} onclick={e => close(e,task)} oncontextmenu={e => extend(e,task)} >
                 {task.name}
             </a>
+            {#if highlight == task}
+            <Detail task={task} goTag={goTag} />
             {/if}
+        {/if}
         {/each}
         {/if}
     </fieldset>
@@ -94,11 +103,18 @@
         {#if sorted}
         {#each sorted as task}
         {#if task.status > 20 && (!filter || task.name.toLowerCase().includes(search))}
-        <a href={`/task/${task.id}/view`} title={task.description.source} onclick={e => open(e,task)} {oncontextmenu} >
+        <a href={`/task/${task.id}/view`} title={task.description.source} onclick={e => open(e,task)} oncontextmenu={e => extend(e,task)} >
         {task.name}
         </a>
+        {#if highlight == task}
+        <Detail task={task} goTag={goTag} />
+        {/if}
         {/if}
         {/each}
         {/if}
     </fieldset>
-</div>
+
+    <div class="filter">
+        {t('filter')}: <input type="text" bind:value={filter} bind:this={input} />
+    </div>
+</div>

frontend/src/routes/task/EasyListDetail.svelte

@@ -0,0 +1,28 @@
+<script>
+    import { onMount } from 'svelte';
+    import { api, get, patch } from '../../urls.svelte';
+    import { error, yikes }    from '../../warn.svelte';
+    import { t }               from '../../translations.svelte';
+
+    let { goTag, task } = $props();
+
+    async function load(){
+        const url = api(`tags/task/${task.id}`);
+        const res = await get(url);
+        if (res.ok){
+            yikes();
+            task.tags = await res.json();
+        } else error(res);
+    }
+
+    onMount(load);
+</script>
+
+{@html task.description.rendered}
+{#if task.tags}
+{t('other_tags')}:
+{#each task.tags as tag}
+<button onclick={e => goTag(e,tag)}>{tag}</button>
+{/each}
+<hr />
+{/if}

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

@@ -495,7 +495,7 @@ a.wikilink{
 }
 .easylist .filter{
 	position: sticky;
-	top: 40px;
+	bottom: 22px;
 	z-index: 10;
 }
 
@@ -527,9 +527,6 @@ a.wikilink{
 	.easylist input{
 		font-size: 20px;
 	}
-	.easylist .filter{
-    	top: 95px;
-    }
 }
 
 fieldset.vcard{