first working version with event reception in kanban

frontend/src/App.svelte

@@ -79,7 +79,7 @@
         <span class="error">{@html messages.error}</span>
         {/if}
         {#if messages.warning}
-        <span class="error">{@html messages.warning}</span>
+        <span class="warn">{@html messages.warning}</span>
         {/if}
         <Route path="/"                            component={User} />
         <Route path="/bookmark"                    component={Bookmarks} />
@@ -130,7 +130,7 @@
             <span class="error">{@html messages.error}</span>
             {/if}
             {#if messages.warning}
-            <span class="error">{@html messages.warning}</span>
+            <span class="warn">{@html messages.warning}</span>
             {/if}
             <Route path="/user/reset/pw"  component={ResetPw} />
             <Route path="/oidc_callback"  component={Callback} />

frontend/src/routes/project/Kanban.svelte

@@ -2,8 +2,8 @@
     import { onDestroy, onMount } from 'svelte';
     import { useTinyRouter } from 'svelte-tiny-router';
 
-    import { api, target }   from '../../urls.svelte.js';
-    import { error, yikes }  from '../../warn.svelte';
+    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';
 
@@ -25,6 +25,7 @@
     let tasks        = $state({});
     let users        = [];
     let columns      = $derived(project.allowed_states?Object.keys(project.allowed_states).length+1:1);
+    let info         = $state(null);
 
     let stateList = {};
     $effect(() => updateUrl(filter_input));
@@ -57,12 +58,6 @@
         return a.name.localeCompare(b.name);
     }
 
-    function connectToEventStream(){
-		eventSource = new EventSource(api('bus'));
-		eventSource.onmessage = (m) => { console.log(m); } // https://stackoverflow.com/questions/57650830/sse-onmessage-never-gets-called#comment104961222_59383080
-		eventSource.addEventListener('UPDATE', (event) => console.log(JSON.parse(event.data)) );
-    }
-
     async function create(name,user_id,state){
         var url = api('task/add');
         let task = {
@@ -120,9 +115,25 @@
         }
     }
 
+    function handleUpdateEvent(evt){
+        let json = JSON.parse(evt.data);
+        if (json.task && json.user){
+            for (let uid in tasks){
+                if (!uid) continue;
+                for (let state in tasks[uid]) delete tasks[uid][state][json.task.id];
+            }
+            processTask(json.task);
+            if (json.user.id != user.id) {
+                info = t("user_updated_entity",{user:json.user.name,entity:json.task.name});
+                setTimeout(() => { info = null; },2500);
+            }
+        }
+
+    }
+
     async function load(){
         try {
-            connectToEventStream();
+			eventSource = eventStream(handleUpdateEvent);
             await loadProject();
             loadTasks({project_id:+id,parent_task_id:0});
         } catch (ignored) {}
@@ -164,28 +175,32 @@
             var json = await resp.json();
             for (var task_id of Object.keys(json)) {
                 let task     = json[task_id];
-                if (task.no_index) continue;
-
-                let state    = +task.status;
-                let owner    = null;
-                let assignee = null;
-
-                for (var user_id of Object.keys(task.members)){
-                    var member = task.members[user_id];
-                    if (member.permission.name == 'OWNER')    owner    = +user_id;
-                    if (member.permission.name == 'ASSIGNEE') assignee = +user_id;
-                }
-                if (!assignee) assignee = owner;
-                task.assignee = assignee;
-                if (!tasks[assignee]) tasks[assignee] = {};
-                if (!tasks[assignee][state]) tasks[assignee][state] = {};
-                tasks[assignee][state][task_id] = task;
+                processTask(task);
             }
         } else {
             error(resp);
         }
     }
 
+    function processTask(task){
+			if (task.no_index) return;
+
+            let state    = +task.status;
+            let owner    = null;
+            let assignee = null;
+
+            for (var user_id of Object.keys(task.members)){
+                var member = task.members[user_id];
+                if (member.permission.name == 'OWNER')    owner    = +user_id;
+                if (member.permission.name == 'ASSIGNEE') assignee = +user_id;
+            }
+            if (!assignee) assignee = owner;
+            task.assignee = assignee;
+            if (!tasks[assignee]) tasks[assignee] = {};
+            if (!tasks[assignee][state]) tasks[assignee][state] = {};
+            tasks[assignee][state][task.id] = task;
+    }
+
     function hover(ev,user_id,state){
         ev.preventDefault();
         highlight = {user:user_id,state:state};
@@ -241,7 +256,9 @@
 {#if project}
 <h1 onclick={ev => router.navigate(`/project/${project.id}/view`)}>{project.name}</h1>
 {/if}
-
+{#if info}
+<div class="info">{info}</div>
+{/if}
 {#if project}
 <fieldset class="kanban description {descr?'active':''}" onclick={e => descr = !descr}>
     <legend>{t('description')} – {t('expand_on_click')}</legend>

frontend/src/urls.svelte.js

@@ -15,6 +15,12 @@ export function drop(url){
     });
 }
 
+export function eventStream(updateHandler){
+	const es = new EventSource(api('bus'), {withCredentials: true});
+	if (updateHandler) es.addEventListener('UPDATE', updateHandler);
+	return es;
+}
+
 export function patch(url,data){
     return fetch(url,{
         credentials : 'include',