From c4001df74d1359dfa7dd519294a175f35383b799 Mon Sep 17 00:00:00 2001
From: Test User <test@example.com>
Date: Fri, 24 Jul 2026 12:23:20 +0200
Subject: [PATCH] web: show track times in mm:ss (or h:mm:ss), matching the TUI

The now-playing clock rendered raw milliseconds as seconds, so a 3:04
track read as 3070:32. TrackPosition carries milliseconds (the TUI wraps
it with Duration::from_millis); convert ms to seconds at both display
sites. The progress gauge already used a position/duration ratio, so it
was unaffected. format_seconds now zero-pads minutes and rolls into
h:mm:ss past an hour, matching the TUI's now-playing pane.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 cbd-web/src/app.rs   |  4 ++--
 cbd-web/src/state.rs | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/cbd-web/src/app.rs b/cbd-web/src/app.rs
index 6c736cb..e26d1ab 100644
--- a/cbd-web/src/app.rs
+++ b/cbd-web/src/app.rs
@@ -1068,7 +1068,7 @@ fn Transport(store: Store) -> impl IntoView {
                 </span>
                 <div class="progress">
                     <span class="time">
-                        {move || format_seconds(store.position.get().position)}
+                        {move || format_seconds(store.position.get().position / 1000)}
                     </span>
                     <div class="gauge">
                         <div
@@ -1088,7 +1088,7 @@ fn Transport(store: Store) -> impl IntoView {
                         ></div>
                     </div>
                     <span class="time">
-                        {move || format_seconds(store.position.get().duration)}
+                        {move || format_seconds(store.position.get().duration / 1000)}
                     </span>
                 </div>
             </div>
diff --git a/cbd-web/src/state.rs b/cbd-web/src/state.rs
index 1d89920..7072684 100644
--- a/cbd-web/src/state.rs
+++ b/cbd-web/src/state.rs
@@ -345,9 +345,17 @@ impl CaptureBoard {
     }
 }
 
-/// `mm:ss` for progress and duration displays.
+/// `mm:ss`, or `h:mm:ss` once past an hour — matching the TUI's now-playing
+/// clock so minutes zero-pad and roll into hours instead of counting past 60.
 pub fn format_seconds(total: u32) -> String {
-    format!("{}:{:02}", total / 60, total % 60)
+    let secs = total % 60;
+    let mins = (total / 60) % 60;
+    let hours = total / 3600;
+    if hours > 0 {
+        format!("{hours}:{mins:02}:{secs:02}")
+    } else {
+        format!("{mins:02}:{secs:02}")
+    }
 }
 
 /// The now-playing line for a track, `artist - title` falling back to
@@ -529,8 +537,11 @@ mod tests {
 
     #[test]
     fn time_formatting_is_mm_ss() {
-        assert_eq!(format_seconds(0), "0:00");
-        assert_eq!(format_seconds(61), "1:01");
+        assert_eq!(format_seconds(0), "00:00");
+        assert_eq!(format_seconds(61), "01:01");
         assert_eq!(format_seconds(3599), "59:59");
+        // Past an hour it rolls into h:mm:ss instead of counting past 60 min.
+        assert_eq!(format_seconds(3600), "1:00:00");
+        assert_eq!(format_seconds(3661), "1:01:01");
     }
 }