From c203ffe80f4e7b68e22ba3fde0598622500f5add Mon Sep 17 00:00:00 2001
From: Karol Stawowski <kstawowski@gmail.com>
Date: Sun, 18 May 2025 03:28:41 +0200
Subject: [PATCH] Fix: Updated hourly weather time to respect military clock
 setting (#937)

---
 .../calendar/weather/hourly/time/index.tsx    | 43 ++++++++++++-------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/components/menus/calendar/weather/hourly/time/index.tsx b/src/components/menus/calendar/weather/hourly/time/index.tsx
index 04f5797..a0a0b4b 100644
--- a/src/components/menus/calendar/weather/hourly/time/index.tsx
+++ b/src/components/menus/calendar/weather/hourly/time/index.tsx
@@ -1,26 +1,37 @@
+import options from 'src/options';
 import { globalWeatherVar } from 'src/shared/weather';
 import { getNextEpoch } from '../helpers';
-import { bind } from 'astal';
+import { bind, Variable } from 'astal';
+
+const { military } = options.menus.clock.time;
 
 export const HourlyTime = ({ hoursFromNow }: HourlyTimeProps): JSX.Element => {
+    const weatherBinding = Variable.derive([bind(globalWeatherVar), bind(military)], (weather, military) => {
+        if (!Object.keys(weather).length) {
+            return '-';
+        }
+
+        const nextEpoch = getNextEpoch(weather, hoursFromNow);
+        const dateAtEpoch = new Date(nextEpoch * 1000);
+
+        let hours = dateAtEpoch.getHours();
+
+        if (military) {
+            return `${hours}:00`;
+        }
+
+        const ampm = hours >= 12 ? 'PM' : 'AM';
+        hours = hours % 12 || 12;
+        return `${hours}${ampm}`;
+    });
+
     return (
         <label
             className={'hourly-weather-time'}
-            label={bind(globalWeatherVar).as((weather) => {
-                if (!Object.keys(weather).length) {
-                    return '-';
-                }
-
-                const nextEpoch = getNextEpoch(weather, hoursFromNow);
-                const dateAtEpoch = new Date(nextEpoch * 1000);
-
-                let hours = dateAtEpoch.getHours();
-                const ampm = hours >= 12 ? 'PM' : 'AM';
-
-                hours = hours % 12 || 12;
-
-                return `${hours}${ampm}`;
-            })}
+            label={weatherBinding()}
+            onDestroy={() => {
+                weatherBinding.drop();
+            }}
         />
     );
 };