Fix: Updated hourly weather time to respect military clock setting (#937)

src/components/menus/calendar/weather/hourly/time/index.tsx

@@ -1,12 +1,12 @@
+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 => {
-    return (
+    const weatherBinding = Variable.derive([bind(globalWeatherVar), bind(military)], (weather, military) => {
-        <label
-            className={'hourly-weather-time'}
-            label={bind(globalWeatherVar).as((weather) => {
         if (!Object.keys(weather).length) {
             return '-';
         }
@@ -15,12 +15,23 @@ export const HourlyTime = ({ hoursFromNow }: HourlyTimeProps): JSX.Element => {
         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={weatherBinding()}
+            onDestroy={() => {
+                weatherBinding.drop();
+            }}
         />
     );
 };