Time Chooser: Follow system clock format

src/preferences/TimeChooser.js

@@ -1,16 +1,21 @@
 // SPDX-FileCopyrightText: Night Theme Switcher Contributors
 // SPDX-License-Identifier: GPL-3.0-or-later
 
+import GDesktopEnums from 'gi://GDesktopEnums';
+import Gio from 'gi://Gio';
 import GObject from 'gi://GObject';
 import Gtk from 'gi://Gtk';
 
 
-export class TimeChooser extends Gtk.Box {
+export class TimeChooser extends Gtk.Widget {
+    #clockFormat;
+    #interfaceSettings;
+
     static {
         GObject.registerClass({
             GTypeName: 'TimeChooser',
             Template: 'resource:///org/gnome/Shell/Extensions/nightthemeswitcher/preferences/ui/TimeChooser.ui',
-            InternalChildren: ['hours', 'minutes'],
+            InternalChildren: ['clock_format_stack', 'hours_12', 'minutes_12', 'hours_24', 'minutes_24', 'am_toggle_button', 'pm_toggle_button'],
             Properties: {
                 time: GObject.ParamSpec.double(
                     'time',
@@ -25,17 +30,64 @@ export class TimeChooser extends Gtk.Box {
         }, this);
     }
 
-    onTimeChanged(chooser) {
-        const hours = Math.trunc(chooser.time);
-        const minutes = Math.round((chooser.time - hours) * 60);
-        chooser._hours.value = hours;
-        chooser._minutes.value = minutes;
+    constructor({ ...params } = {}) {
+        super(params);
+        this.#interfaceSettings = new Gio.Settings({ schema: 'org.gnome.desktop.interface' });
+        this.#interfaceSettings.connect('changed::clock-format', this.#onClockFormatChanged.bind(this));
+        this.#onClockFormatChanged();
     }
 
-    onValueChanged(_spin) {
-        const hours = this._hours.value;
-        const minutes = this._minutes.value / 60;
-        this.time = hours + minutes;
+    #onClockFormatChanged(_settings) {
+        this.#clockFormat = this.#interfaceSettings.get_enum('clock-format');
+        this.#syncClockFormatStack();
+    }
+
+    #syncClockFormatStack() {
+        this._clock_format_stack.set_visible_child_name(this.#clockFormat === GDesktopEnums.ClockFormat['12H'] ? '12h' : '24h');
+    }
+
+    #convertTimeTo24hFormat(time) {
+        const hours = Math.trunc(time);
+        const minutes = Math.round((time - hours) * 60);
+        return { hours, minutes };
+    }
+
+    #convertTimeTo12hFormat(time) {
+        const { hours: hours24, minutes } = this.#convertTimeTo24hFormat(time);
+        const hours = hours24 % 12;
+        const isPm = hours24 > 12;
+        return { hours, minutes, isPm };
+    }
+
+    #convert24hFormatToTime({ hours, minutes }) {
+        return hours + minutes / 60;
+    }
+
+    #convert12hFormatToTime({ hours, minutes, isPm }) {
+        return this.#convert24hFormatToTime({
+            hours: hours + Number(isPm) * 12,
+            minutes,
+        });
+    }
+
+    onTimeChanged(_chooser) {
+        const time = this.time;
+
+        const clock12 = this.#convertTimeTo12hFormat(time);
+        this._hours_12.value = clock12.hours;
+        this._minutes_12.value = clock12.minutes;
+        this._am_toggle_button.active = !clock12.isPm;
+        this._pm_toggle_button.active = clock12.isPm;
+
+        const clock24 = this.#convertTimeTo24hFormat(time);
+        this._hours_24.value = clock24.hours;
+        this._minutes_24.value = clock24.minutes;
+    }
+
+    onValueChanged(_widget) {
+        this.time = this.#clockFormat === GDesktopEnums.ClockFormat['12H']
+            ? this.#convert12hFormatToTime({ hours: this._hours_12.value, minutes: this._minutes_12.value, isPm: this._pm_toggle_button.active })
+            : this.#convert24hFormatToTime({ hours: this._hours_24.value, minutes: this._minutes_24.value });
     }
 
     onOutputChanged(spin) {