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>