From 1e2e66ecf776c0ec9a1b215d2bdb90f1b3d87e65 Mon Sep 17 00:00:00 2001
From: Oliver Mitchell <oliver@polymerlabs.dev>
Date: Tue, 29 Oct 2024 00:00:37 +1030
Subject: [PATCH 1/3] fix: non-whole-hour timezones now correctly shown on
 Clock

Timezones that used non-whole-hour definitions (ie. Australia/ACDT) not correctly shown on the Clock widget. This fix changes how the difference is calculated to account for both minutes, and hours.

Due to the change, the text shown for relative timezone differences also had to be changed.
---
 internal/assets/static/js/main.js | 23 +++++++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/internal/assets/static/js/main.js b/internal/assets/static/js/main.js
index ffa7eb7..13c9e40 100644
--- a/internal/assets/static/js/main.js
+++ b/internal/assets/static/js/main.js
@@ -502,9 +502,24 @@ function timeInZone(now, zone) {
         timeInZone = now
     }
 
-    const diffInHours = Math.round((timeInZone.getTime() - now.getTime()) / 1000 / 60 / 60);
+    const diffInMinutes = Math.round((timeInZone.getTime() - now.getTime()) / 1000 / 60);
 
-    return { time: timeInZone, diffInHours: diffInHours };
+    return { time: timeInZone, diffInMinutes: diffInMinutes };
+}
+
+function zoneDiffText(diffInMinutes) {
+    if (diffInMinutes == 0) {
+        return "";
+    }
+
+    const sign = diffInMinutes < 0 ? "-" : "+";
+
+    diffInMinutes = Math.abs(diffInMinutes);
+    
+    const hours = `${Math.floor(diffInMinutes / 60)}`.padStart(2, '0');
+    const minutes = `${diffInMinutes % 60}`.padStart(2, '0');
+
+    return `${sign}${hours}:${minutes}`;
 }
 
 function setupClocks() {
@@ -547,9 +562,9 @@ function setupClocks() {
             );
 
             updateCallbacks.push((now) => {
-                const { time, diffInHours } = timeInZone(now, timeZoneContainer.dataset.timeInZone);
+                const { time, diffInMinutes } = timeInZone(now, timeZoneContainer.dataset.timeInZone);
                 setZoneTime(time);
-                diffElement.textContent = (diffInHours <= 0 ? diffInHours : '+' + diffInHours) + 'h';
+                diffElement.textContent = zoneDiffText(diffInMinutes);
             });
         }
     }

From 2e3ed896ccf130d905b64ad91cc504c0fc5c163a Mon Sep 17 00:00:00 2001
From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com>
Date: Wed, 30 Oct 2024 15:25:30 +0000
Subject: [PATCH 2/3] Give clock time min width to avoid inconsistent layout
 for 12 hour format

---
 internal/assets/static/main.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/internal/assets/static/main.css b/internal/assets/static/main.css
index d5ab9bb..ab8a8aa 100644
--- a/internal/assets/static/main.css
+++ b/internal/assets/static/main.css
@@ -1339,6 +1339,10 @@ details[open] .summary::after {
     transform: translate(-50%, -50%);
 }
 
+.clock-time {
+    min-width: 8ch;
+}
+
 .clock-time span {
     color: var(--color-text-highlight);
 }

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 3/3] 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;
             });
         }
     }