From c6c02f0f3038daa3bf547c8d550e1c34b5102e78 Mon Sep 17 00:00:00 2001
From: "Konrad M." <github@0bs.de>
Date: Tue, 21 Apr 2026 21:56:41 +0200
Subject: [PATCH] fix(dashboard): show external calendar name and location in
 upcoming events

Imports fmtLocation; renderUpcomingEvents adds event-item__cal span for
cal_name and shows location with normalized ICS escapes via fmtLocation().
Event color dot gets filter: saturate(0.4) to match calendar view style.
---
 public/pages/dashboard.js   | 7 ++++---
 public/styles/dashboard.css | 8 ++++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/public/pages/dashboard.js b/public/pages/dashboard.js
index 8c66f13..1e02ced 100644
--- a/public/pages/dashboard.js
+++ b/public/pages/dashboard.js
@@ -6,7 +6,7 @@
 
 import { api } from '/api.js';
 import { t, formatDate, formatTime, getLocale } from '/i18n.js';
-import { esc } from '/utils/html.js';
+import { esc, fmtLocation } from '/utils/html.js';
 import { openModal, closeModal } from '/components/modal.js';
 
 // Hält den AbortController des aktuellen FAB-Listeners - wird bei jedem render() erneuert.
@@ -236,13 +236,14 @@ function renderUpcomingEvents(events) {
     const timeStr = e.all_day ? t('dashboard.allDay') : `${formatTime(d)}${_suffix ? ' ' + _suffix : ''}`.trim();
     return `
       <div class="event-item" data-route="/calendar" role="button" tabindex="0">
-        <div class="event-item__bar" style="background-color:${esc(e.color) || 'var(--color-accent)'}"></div>
+        <div class="event-item__bar" style="background-color:${esc(e.cal_color || e.color) || 'var(--color-accent)'}"></div>
         <div class="event-item__content">
           <div class="event-item__title">${esc(e.title)}</div>
           <div class="event-item__time">
             <span class="event-time-badge ${isToday ? 'event-time-badge--today' : ''}">${isToday ? t('common.today') : formatDateTime(e.start_datetime).split(',')[0]}</span>
             ${timeStr}
-            ${e.location ? ` · ${esc(e.location)}` : ''}
+            ${e.location ? ` · ${esc(fmtLocation(e.location))}` : ''}
+            ${e.cal_name ? `<span class="event-item__cal">${esc(e.cal_name)}</span>` : ''}
           </div>
         </div>
       </div>
diff --git a/public/styles/dashboard.css b/public/styles/dashboard.css
index 6045eca..7969263 100644
--- a/public/styles/dashboard.css
+++ b/public/styles/dashboard.css
@@ -369,6 +369,7 @@
   border-radius: var(--radius-full);
   flex-shrink: 0;
   background-color: var(--color-accent);
+  filter: saturate(0.4);
 }
 
 .event-item__content {
@@ -392,9 +393,16 @@
   margin-top: 1px;
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
   gap: var(--space-1);
 }
 
+.event-item__cal {
+  width: 100%;
+  font-size: var(--text-xs);
+  color: var(--color-text-disabled);
+}
+
 .event-time-badge {
   font-size: var(--text-xs);
   font-weight: var(--font-weight-semibold);