From 92166cea6ec42a4eae6aaa2e72a6bb360ab9bedf Mon Sep 17 00:00:00 2001
From: kyle <t72chevy@hotmail.com>
Date: Sun, 15 Feb 2026 19:57:53 +0100
Subject: [PATCH] feat: improve departure information hierarchy with clearer
 time display

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 public/css/components.css                 | 16 +----------
 public/js/components/DeparturesManager.js | 34 +++++++++--------------
 2 files changed, 14 insertions(+), 36 deletions(-)

diff --git a/public/css/components.css b/public/css/components.css
index 3dc7ff9..846e865 100644
--- a/public/css/components.css
+++ b/public/css/components.css
@@ -473,7 +473,6 @@ body.dark-mode #config-cancel-button:hover {
 .clock-time,
 .countdown-large,
 .next-departures,
-.time-display,
 #custom-weather .temperature,
 #custom-weather .forecast-hour .temp {
     font-variant-numeric: tabular-nums;
@@ -728,20 +727,10 @@ body.dark-mode .direction-destination {
     display: flex;
     flex-direction: column;
     align-items: flex-end;
-    gap: 3px;
-    min-width: 110px;
+    gap: 2px;
     flex-shrink: 0;
-    max-width: 110px;
 }
 
-/* Time display */
-.time-display {
-    display: flex;
-    align-items: baseline;
-    gap: 4px;
-    white-space: nowrap;
-    font-size: 0.95em;
-}
 
 /* Pulse animation for urgent and now states */
 @keyframes pulse-glow {
@@ -1462,9 +1451,6 @@ body.dark-mode .config-search-input:focus-visible {
         max-width: 90px;
     }
 
-    .time-display {
-        font-size: 0.85em;
-    }
 
     .direction-arrow-box {
         width: 24px;
diff --git a/public/js/components/DeparturesManager.js b/public/js/components/DeparturesManager.js
index 408cb37..27eea5c 100644
--- a/public/js/components/DeparturesManager.js
+++ b/public/js/components/DeparturesManager.js
@@ -359,33 +359,25 @@ class DeparturesManager {
                 timesContainer.className = 'times-container';
                 
                 const firstDeparture = direction.departures[0];
-                const secondDeparture = direction.departures[1];
-                
+
                 if (firstDeparture) {
-                    const displayTime = firstDeparture.display;
-                    const departureTime = this.getDepartureTime(firstDeparture);
-                    const timeDisplay = DeparturesManager.formatDateTime(departureTime);
-                    
                     const { countdownText, countdownClass } = this.getCountdownInfo(firstDeparture);
-                    
-                    const timeDisplayElement = document.createElement('div');
-                    timeDisplayElement.className = 'time-display';
-                    
+
+                    // Primary countdown - big and prominent
                     const countdownSpan = document.createElement('span');
                     countdownSpan.className = `countdown-large ${countdownClass}`;
                     countdownSpan.textContent = countdownText;
-                    
-                    timeDisplayElement.appendChild(countdownSpan);
-                    
-                    // Show next 2-3 absolute times as small text
-                    const nextTimesSpan = document.createElement('span');
-                    nextTimesSpan.className = 'next-departures';
-                    const upcomingTimes = direction.departures.slice(0, 3)
+                    timesContainer.appendChild(countdownSpan);
+
+                    // Next departures - separate line, excludes current departure
+                    const upcomingTimes = direction.departures.slice(1, 4)
                         .map(d => DeparturesManager.formatDateTime(this.getDepartureTime(d)));
-                    nextTimesSpan.textContent = upcomingTimes.join('  ');
-                    timeDisplayElement.appendChild(nextTimesSpan);
-                    
-                    timesContainer.appendChild(timeDisplayElement);
+                    if (upcomingTimes.length > 0) {
+                        const nextTimesDiv = document.createElement('div');
+                        nextTimesDiv.className = 'next-departures';
+                        nextTimesDiv.textContent = 'Sedan: ' + upcomingTimes.join('  ');
+                        timesContainer.appendChild(nextTimesDiv);
+                    }
                 }
                 
                 directionRow.appendChild(timesContainer);