improved time display on time record list

frontend/src/routes/time/Index.svelte

@@ -13,7 +13,12 @@
     let tasks = {};
     let projects = {};
     let detail = $state(null);
-    let sortedTimes = $derived.by(() => Object.values(times).sort((b, a) => a.start_time - b.start_time));
+    let sortedTimes = $derived.by(() => Object.values(times).map(time => ({
+      ...time,
+      start: display(time.start_time),
+      end: display(time.end_time),
+      end_date: display(time.end_time)?.substring(0,10)
+    })).sort((b, a) => a.start_time - b.start_time));
     let selected = $state({});
     let ranges = {};
     let timeMap = $derived.by(calcYearMap);
@@ -32,9 +37,8 @@
         let monthIndex = 0;
         for (let idx in sortedTimes){
             const time  = sortedTimes[idx];
-            const start = display(time.start_time);
-            const year  = start.substring(0,4);
-            const month = start.substring(5,7);
+            const year  = time.start.substring(0,4);
+            const month = time.start.substring(5,7);
             if (year != lastYear){
                 lastYear = year;
                 if (yearCount) result.years[yearIndex] = yearCount;
@@ -96,8 +100,7 @@
     }
 
     function toggleRange(range){
-        console.log('toggleRange → '+range);
-        let affected = sortedTimes.filter(time => display(time.start_time).startsWith(range));
+        let affected = sortedTimes.filter(time => time.start.startsWith(range));
         if (ranges[range]){
             delete ranges[range];
             for (let time of affected){
@@ -166,13 +169,13 @@
         {#each sortedTimes as time,line}
         <tr class={selected[time.id]?'selected':''}>
             {#if timeMap.years[line]}
-            <td class="year" rowspan={timeMap.years[line]} onclick={e => toggleRange(display(time.start_time).substring(0,4))}>
-                {display(time.start_time).substring(0,4)}
+            <td class="year" rowspan={timeMap.years[line]} onclick={e => toggleRange(time.start.substring(0,4))}>
+                {time.start.substring(0,4)}
             </td>
             {/if}
             {#if timeMap.months[line]}
-            <td class="month" rowspan={timeMap.months[line]} onclick={e => toggleRange(display(time.start_time).substring(0,7))}>
-                {display(time.start_time).substring(5,7)}
+            <td class="month" rowspan={timeMap.months[line]} onclick={e => toggleRange(time.start.substring(0,7))}>
+                {time.start.substring(5,7)}
             </td>
             {/if}
             {#if detail == time.id}
@@ -181,7 +184,7 @@
             </td>
             {:else}
             <td class="start_end" onclick={e => toggleSelect(time.id)}>
-                {display(time.start_time)}{#if time.end_time}<wbr>…<wbr>{display(time.end_time)}{/if}
+                {time.start}{#if time.end_time}<wbr>…<wbr>{time.start.startsWith(time.end_date)?time.end.substring(11):time.end}{/if}
             </td>
             <td class="duration" onclick={e => {detail = time.id}}>
                 {#if time.duration}

frontend/src/time.svelte.js

@@ -1,11 +1,12 @@
 export function display(timestamp){
-      const date = new Date(timestamp * 1000);
-      const year = date.getFullYear();
-      const month = String(date.getMonth() + 1).padStart(2, '0');
-      const day = String(date.getDate()).padStart(2, '0');
-      const hours = String(date.getHours()).padStart(2, '0');
-      const minutes = String(date.getMinutes()).padStart(2, '0');
-      return `${year}-${month}-${day} ${hours}:${minutes}`;
+    if (timestamp == null) return null;
+    const date = new Date(timestamp * 1000);
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, '0');
+    const day = String(date.getDate()).padStart(2, '0');
+    const hours = String(date.getHours()).padStart(2, '0');
+    const minutes = String(date.getMinutes()).padStart(2, '0');
+    return `${year}-${month}-${day} ${hours}:${minutes}`;
 }
 
 function padTo2Digits(num) {