working on project tree update upon task creation/deletion/update

frontend/src/routes/project/Kanban.svelte

@@ -2,7 +2,7 @@
     import { onDestroy, onMount } from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api, eventStream, target }   from '../../urls.svelte.js';
+    import { api, eventStream, target } from '../../urls.svelte.js';
     import { error, messages, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte.js';
     import { user }          from '../../user.svelte.js';
@@ -11,12 +11,12 @@
     import LineEditor        from '../../Components/LineEditor.svelte';
     import MarkdownEditor    from '../../Components/MarkdownEditor.svelte';
 
-	let eventSource = null;
+	let eventSource      = null;
     let connectionStatus = 'disconnected';
-    let { id } = $props();
-    let descr = $state(false);
-    let filter_input = $state('');
-    let router       = useTinyRouter();
+    let { id }           = $props();
+    let descr            = $state(false);
+    let filter_input     = $state('');
+    let router           = useTinyRouter();
     if (router.hasQueryParam('filter')) filter_input = router.getQueryParam('filter');
     let dragged      = null;
     let highlight    = $state({});

frontend/src/routes/project/View.svelte

@@ -1,8 +1,8 @@
 <script>
-    import { onMount }       from 'svelte';
+    import { onMount, onDestroy }       from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api }           from '../../urls.svelte';
+    import { api, eventStream } from '../../urls.svelte';
     import { error, yikes }  from '../../warn.svelte';
     import { t }             from '../../translations.svelte';
 
@@ -14,7 +14,9 @@
     import Tags              from '../tags/TagList.svelte';
     import TaskList          from '../task/TaskList.svelte';
 
+	let eventSource    = null;
     let { id }         = $props();
+    let lastEvent      = $state(null);
     let estimated_time = $state({sum:0});
     let project        = $state(null);
     let router         = useTinyRouter();
@@ -80,10 +82,33 @@
         }
     }
 
+    function handleCreate(evt){
+        let json = JSON.parse(evt.data);
+        json.event = 'create';
+        lastEvent = json;
+    }
+
+    function handleDelete(evt){
+        let json = JSON.parse(evt.data);
+        json.event = 'delete';
+        lastEvent = json;
+    }
+
+    function handleUpdate(evt){
+        let json = JSON.parse(evt.data);
+        json.event = 'update';
+        lastEvent = json;
+    }
+
     function kanban(){
         router.navigate(`/project/${id}/kanban`);
     }
 
+    function load(){
+		eventSource = eventStream(handleCreate,handleUpdate,handleDelete);
+        loadProject();
+    }
+
     async function loadProject(){
         const url  = api(`project/${id}`);
         const resp = await fetch(url,{credentials:'include'});
@@ -162,7 +187,10 @@
         window.open(`/time?project=${id}`, '_blank').focus();
     }
 
-    onMount(loadProject);
+    onMount(load);
+	onDestroy(() => {
+		if (eventSource) eventSource.close();
+	});
 </script>
 
 <svelte:head>
@@ -265,7 +293,7 @@
     </div>
     <div class="tasks">
         {#if tasks}
-        <TaskList {tasks} {estimated_time} states={project?.allowed_states} show_closed={show_closed || project.show_closed} />
+        <TaskList {tasks} {estimated_time} {lastEvent} states={project?.allowed_states} show_closed={show_closed || project.show_closed} />
         {/if}
     </div>
 </div>

frontend/src/routes/task/ListTask.svelte

@@ -14,6 +14,7 @@
 
     let {
         estimated_time,
+        lastEvent,
         show_closed,
         siblings,
         states = {},
@@ -141,6 +142,18 @@
         estimated_time.sum += task.estimated_time;
     }
 
+    $effect(() => {
+		if (lastEvent && lastEvent.task) {
+			if (children && lastEvent.task.parent_task_id == task.id) {
+				if (lastEvent.event == 'delete'){
+					delete children[lastEvent.task.id];
+				} else {
+					children[lastEvent.task.id] = lastEvent.task;
+				}
+			}
+		}
+	});
+
     onMount(loadChildren);
 </script>
 
@@ -170,7 +183,7 @@
     <button class="symbol" title={t('add_object',{object:t('subtask')})} onclick={addSubtask}></button>
     <button class="symbol" title={t('timetracking')} onclick={addTime}></button>
     {#if children}
-    <TaskList {states} tasks={children} {estimated_time} {show_closed} />
+    <TaskList {states} {lastEvent} tasks={children} {estimated_time} {show_closed} />
     {/if}
 </li>
 {/if}

frontend/src/routes/task/TaskList.svelte

@@ -2,14 +2,13 @@
     import { t }    from '../../translations.svelte.js';
     import ListTask from './ListTask.svelte';
 
-    let { estimated_time, show_closed, states = {}, tasks } = $props();
+    let { estimated_time, lastEvent, show_closed, states = {}, tasks } = $props();
 
     let sortedTasks = $derived.by(() => Object.values(tasks).sort((a, b) => a.name.localeCompare(b.name)));
-
 </script>
 
 <ul>
     {#each sortedTasks as task}
-    <ListTask {states} {task} siblings={tasks} {estimated_time} show_closed={show_closed || task.show_closed} />
+    <ListTask {states} {task} {lastEvent} siblings={tasks} {estimated_time} show_closed={show_closed || task.show_closed} />
     {/each}
 </ul>