From de2db71e54b1b987b1b866a106ea95aef115531e Mon Sep 17 00:00:00 2001
From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com>
Date: Wed, 30 Oct 2024 15:30:34 +0000
Subject: [PATCH] Simplify clock zone diff text and add title for more details

---
 internal/assets/static/js/main.js | 22 +++++++++++++++++-----
 1 file changed, 17 insertions(+), 5 deletions(-)

diff --git a/internal/assets/static/js/main.js b/internal/assets/static/js/main.js
index 13c9e40..0c2a4d4 100644
--- a/internal/assets/static/js/main.js
+++ b/internal/assets/static/js/main.js
@@ -513,13 +513,23 @@ function zoneDiffText(diffInMinutes) {
     }
 
     const sign = diffInMinutes < 0 ? "-" : "+";
+    const signText = diffInMinutes < 0 ? "behind" : "ahead";
 
     diffInMinutes = Math.abs(diffInMinutes);
-    
-    const hours = `${Math.floor(diffInMinutes / 60)}`.padStart(2, '0');
-    const minutes = `${diffInMinutes % 60}`.padStart(2, '0');
 
-    return `${sign}${hours}:${minutes}`;
+    const hours = Math.floor(diffInMinutes / 60);
+    const minutes = diffInMinutes % 60;
+    const hourSuffix = hours == 1 ? "" : "s";
+
+    if (minutes == 0) {
+        return { text: `${sign}${hours}h`, title: `${hours} hour${hourSuffix} ${signText}` };
+    }
+
+    if (hours == 0) {
+        return { text: `${sign}${minutes}m`, title: `${minutes} minutes ${signText}` };
+    }
+
+    return { text: `${sign}${hours}h~`, title: `${hours} hour${hourSuffix} and ${minutes} minutes ${signText}` };
 }
 
 function setupClocks() {
@@ -564,7 +574,9 @@ function setupClocks() {
             updateCallbacks.push((now) => {
                 const { time, diffInMinutes } = timeInZone(now, timeZoneContainer.dataset.timeInZone);
                 setZoneTime(time);
-                diffElement.textContent = zoneDiffText(diffInMinutes);
+                const { text, title } = zoneDiffText(diffInMinutes);
+                diffElement.textContent = text;
+                diffElement.title = title;
             });
         }
     }