- added a persistent 12 hour / 24 hour segmented control under the sidebar’s Time preferences.

Updated:
[public/index.php](/Users/tyemeclifford/Documents/GH/weather/public/index.php)
[public/assets/js/app.js](/Users/tyemeclifford/Documents/GH/weather/public/assets/js/app.js)
[public/assets/css/styles.css](/Users/tyemeclifford/Documents/GH/weather/public/assets/css/styles.css)
[README.md](/Users/tyemeclifford/Documents/GH/weather/README.md)

public/assets/js/app.js

@@ -3,6 +3,7 @@
 
     const DEFAULT_PREFS = {
         theme: "dark",
+        timeFormat: "12",
         locationQuery: "New York, NY",
         sections: {
             current: true,
@@ -110,6 +111,17 @@
 
         $("refreshButton").addEventListener("click", () => loadWeather(true));
         $("themeButton").addEventListener("click", toggleTheme);
+        document.querySelectorAll("[data-time-format]").forEach((button) => {
+            button.addEventListener("click", () => {
+                state.prefs.timeFormat = button.dataset.timeFormat === "24" ? "24" : "12";
+                savePrefs();
+                applyPreferences();
+                if (state.dashboard) {
+                    renderDashboard();
+                    renderArchives();
+                }
+            });
+        });
         $("exportPrefs").addEventListener("click", exportPreferences);
         $("importPrefsButton").addEventListener("click", () => $("importPrefsFile").click());
         $("importPrefsFile").addEventListener("change", importPreferences);
@@ -635,11 +647,17 @@
     function applyPreferences() {
         document.body.classList.toggle("light", state.prefs.theme === "light");
         $("themeLabel").textContent = state.prefs.theme === "light" ? "Dark" : "Light";
+        state.prefs.timeFormat = state.prefs.timeFormat === "24" ? "24" : "12";
 
         document.querySelectorAll("[data-pref]").forEach((input) => {
             input.checked = Boolean(getPath(state.prefs, input.dataset.pref));
         });
 
+        document.querySelectorAll("[data-time-format]").forEach((button) => {
+            const isActive = button.dataset.timeFormat === state.prefs.timeFormat;
+            button.setAttribute("aria-pressed", isActive ? "true" : "false");
+        });
+
         Object.entries(state.prefs.sections).forEach(([name, visible]) => {
             document.querySelectorAll(`[data-section="${name}"]`).forEach((section) => {
                 section.classList.toggle("is-hidden", !visible);
@@ -827,7 +845,8 @@
             month: "short",
             day: "numeric",
             hour: "numeric",
-            minute: "2-digit"
+            minute: "2-digit",
+            hour12: useTwelveHourClock()
         }).format(date);
     }
 
@@ -841,10 +860,16 @@
         }
         return new Intl.DateTimeFormat(undefined, {
             weekday: "short",
-            hour: "numeric"
+            hour: "numeric",
+            minute: "2-digit",
+            hour12: useTwelveHourClock()
         }).format(date);
     }
 
+    function useTwelveHourClock() {
+        return state.prefs.timeFormat !== "24";
+    }
+
     function formatDay(value) {
         if (!value) {
             return "--";