time tracking and display of elapsed time no working

frontend/src/Components/Login.svelte

@@ -11,7 +11,6 @@
     let services    = $state([]);
 
 
-
     function doLogin(ev){
         ev.preventDefault();
         tryLogin(credentials);
@@ -21,7 +20,7 @@
         element.focus();
     }
 
-    onMount(async () => {
+    async function load(){
         await checkUser();
         const url  = api('user/oidc/buttons');
         const resp = await fetch(url,{credentials:'include'});
@@ -29,7 +28,8 @@
             const json = await resp.json();
             for (let service of json) services.push(service);
         }
-    });
+    }
+
 
     async function redirectTo(service){
         const url  = api(`user/oidc/redirect/${service}`);
@@ -49,7 +49,12 @@
         router.navigate('/user/reset/pw');
     }
 
-    if (router.fullPath.endsWith('/openid_login') && router.query.service) redirectTo(router.query.service);
+    if (router.fullPath.endsWith('/openid_login') && router.query.service) {
+        redirectTo(router.query.service);
+    } else {
+        onMount(load);
+    }
+
 </script>
 
 <style>

frontend/src/Components/Menu.svelte

@@ -1,9 +1,11 @@
 <script>
-import { onMount }       from 'svelte';
+import { onDestroy, onMount }       from 'svelte';
 import { useTinyRouter } from 'svelte-tiny-router';
 
+import { api }           from '../urls.svelte.js';
 import { logout, user }  from '../user.svelte.js';
 import { t }             from '../translations.svelte.js';
+import { timetrack }     from '../user.svelte.js';
 
 let key = $state(null);
 const router  = useTinyRouter();
@@ -28,13 +30,61 @@ function go(path){
     return false;
 }
 
+function msToTime(ms) {
+    const days = Math.floor(ms / (24 * 60 * 60 * 1000));
+    ms %= 24 * 60 * 60 * 1000;
+    const hours = Math.floor(ms / (60 * 60 * 1000));
+    ms %= 60 * 60 * 1000;
+    const minutes = Math.floor(ms / (60 * 1000));
+    ms %= 60 * 1000;
+    const seconds = Math.floor(ms / 1000);
+
+    let daysStr = days > 0 ? padTo2Digits(days) + ':' : '';
+    return `${daysStr}${padTo2Digits(hours)}:${padTo2Digits(minutes)}:${padTo2Digits(seconds)}`;
+}
+
+function padTo2Digits(num) {
+    return num.toString().padStart(2, '0');
+}
+
 async function search(e){
     e.preventDefault();
     router.navigate(`/search?key=${key}`);
     return false;
 }
 
+async function stopTrack(){
+    if (timetrack.running.id){
+        const url = api(`time/${timetrack.running.id}/stop`);
+        const res = await fetch(url,{credentials:'include'});
+        if (res.ok){
+            timetrack.running = null;
+            timetrack.elapsed = null;
+            timetrack.start   = null;
+            router.navigate('/time');
+        }
+    }
+}
+
+let interval = null;
+
+$effect(() => {
+    if (timetrack.running) {
+        console.log('effect!');
+        timetrack.start = Date.parse(timetrack.running.start_time);
+        interval = setInterval(() => { timetrack.elapsed = msToTime(Date.now() - timetrack.start); },1000);
+    } else {
+        clearInterval(interval);
+        timetrack.elapsed = null;
+        interval = null;
+    }
+});
+
 onMount(fetchModules);
+
+onDestroy(() => {
+    if (interval) clearInterval(interval);
+});
 </script>
 
 <style>
@@ -63,4 +113,9 @@ onMount(fetchModules);
     {#if user.name }
     <a onclick={logout}>{t('logout')}</a>
     {/if}
+    {#if timetrack.running}
+    <span class="timetracking">{timetrack.elapsed} {timetrack.running.subject}
+        <button onclick={stopTrack} title={t('stop')} class="symbol"></button>
+    </span>
+    {/if}
 </nav>