Add time format preference with system, 12, and 24 options

Author: larouxn

_locales/en/messages.json

@@ -2948,6 +2948,22 @@
     "messageformat": "System",
     "description": "Label text for system theme"
   },
+  "icu:Preferences--time-format": {
+    "messageformat": "Time format",
+    "description": "Header for time format settings"
+  },
+  "icu:timeFormatSystem": {
+    "messageformat": "System",
+    "description": "Label text for system locale based time format"
+  },
+  "icu:timeFormat12Hour": {
+    "messageformat": "12-hour",
+    "description": "Label text for 12-hour time format"
+  },
+  "icu:timeFormat24Hour": {
+    "messageformat": "24-hour",
+    "description": "Label text for 24-hour time format"
+  },
   "icu:noteToSelf": {
     "messageformat": "Note to Self",
     "description": "Name for the conversation with your own phone number"

app/main.main.ts

@@ -360,6 +360,21 @@ async function getResolvedThemeSetting(
   return ThemeType[theme];
 }
 
+type HourCycleSettingType = 'system' | '12' | '24';
+
+async function getHourCycleSetting(): Promise<HourCycleSettingType> {
+  const value = ephemeralConfig.get('hour-cycle-preference');
+  if (value === '12' || value === '24' || value === 'system') {
+    log.info('got fast hour-cycle-preference value', value);
+    return value;
+  }
+
+  // Default to 'system' if setting doesn't exist or is invalid
+  ephemeralConfig.set('hour-cycle-preference', 'system');
+  log.info('initializing hour-cycle-preference setting', 'system');
+  return 'system';
+}
+
 type GetBackgroundColorOptionsType = GetThemeSettingOptionsType &
   Readonly<{
     signalColors?: boolean;
@@ -470,16 +485,28 @@ function getResolvedMessagesLocale(): LocaleType {
   return resolvedTranslationsLocale;
 }
 
-function getHourCyclePreference(): HourCyclePreference {
-  if (process.platform !== 'darwin') {
-    return HourCyclePreference.UnknownPreference;
+async function getHourCyclePreference(): Promise<HourCyclePreference> {
+  const userSetting = await getHourCycleSetting();
+  if (userSetting === '12') {
+    return HourCyclePreference.Prefer12;
   }
-  if (systemPreferences.getUserDefault('AppleICUForce24HourTime', 'boolean')) {
+  if (userSetting === '24') {
     return HourCyclePreference.Prefer24;
   }
-  if (systemPreferences.getUserDefault('AppleICUForce12HourTime', 'boolean')) {
-    return HourCyclePreference.Prefer12;
+
+  if (OS.isMacOS()) {
+    if (
+      systemPreferences.getUserDefault('AppleICUForce24HourTime', 'boolean')
+    ) {
+      return HourCyclePreference.Prefer24;
+    }
+    if (
+      systemPreferences.getUserDefault('AppleICUForce12HourTime', 'boolean')
+    ) {
+      return HourCyclePreference.Prefer12;
+    }
   }
+
   return HourCyclePreference.UnknownPreference;
 }
 
@@ -2063,7 +2090,7 @@ app.on('ready', async () => {
 
     localeOverride = await getLocaleOverrideSetting();
 
-    const hourCyclePreference = getHourCyclePreference();
+    const hourCyclePreference = await getHourCyclePreference();
     log.info(`app.ready: hour cycle preference: ${hourCyclePreference}`);
 
     log.info('app.ready: preferred system locales:', preferredSystemLocales);

ts/components/Preferences.dom.stories.tsx

@@ -495,6 +495,7 @@ export default {
     sentMediaQualitySetting: 'standard',
     shouldShowUpdateDialog: false,
     themeSetting: 'system',
+    hourCyclePreference: 'system',
     theme: ThemeType.light,
     universalExpireTimer: DurationInSeconds.HOUR,
     whoCanFindMe: PhoneNumberDiscoverability.Discoverable,
@@ -592,6 +593,7 @@ export default {
     onStartUpdate: action('onStartUpdate'),
     onTextFormattingChange: action('onTextFormattingChange'),
     onThemeChange: action('onThemeChange'),
+    onHourCycleChange: action('onHourCycleChange'),
     onToggleNavTabsCollapse: action('onToggleNavTabsCollapse'),
     onUniversalExpireTimerChange: action('onUniversalExpireTimerChange'),
     onWhoCanSeeMeChange: action('onWhoCanSeeMeChange'),
@@ -667,6 +669,16 @@ export const Appearance = Template.bind({});
 Appearance.args = {
   settingsLocation: { page: SettingsPage.Appearance },
 };
+export const Appearance12HourFormat = Template.bind({});
+Appearance12HourFormat.args = {
+  settingsLocation: { page: SettingsPage.Appearance },
+  hourCyclePreference: '12',
+};
+export const Appearance24HourFormat = Template.bind({});
+Appearance24HourFormat.args = {
+  settingsLocation: { page: SettingsPage.Appearance },
+  hourCyclePreference: '24',
+};
 export const Chats = Template.bind({});
 Chats.args = {
   settingsLocation: { page: SettingsPage.Chats },

ts/components/Preferences.dom.tsx

@@ -77,6 +77,7 @@ import type {
   SentMediaQualityType,
   ThemeType,
 } from '../types/Util.std.js';
+import type { HourCycleSettingType } from '../util/preload.preload.js';
 import type {
   BackupMediaDownloadStatusType,
   BackupsSubscriptionType,
@@ -162,6 +163,7 @@ export type PropsDataType = {
   selectedSpeaker?: AudioDevice;
   sentMediaQualitySetting: SentMediaQualitySettingType;
   themeSetting: ThemeSettingType | undefined;
+  hourCyclePreference: HourCycleSettingType | undefined;
   universalExpireTimer: DurationInSeconds;
   whoCanFindMe: PhoneNumberDiscoverability;
   whoCanSeeMe: PhoneNumberSharingMode;
@@ -320,6 +322,7 @@ type PropsFunctionType = {
   onSpellCheckChange: CheckboxChangeHandlerType;
   onTextFormattingChange: CheckboxChangeHandlerType;
   onThemeChange: SelectChangeHandlerType<ThemeType>;
+  onHourCycleChange: SelectChangeHandlerType<HourCycleSettingType>;
   onToggleNavTabsCollapse: (navTabsCollapsed: boolean) => void;
   onUniversalExpireTimerChange: SelectChangeHandlerType<number>;
   onWhoCanSeeMeChange: SelectChangeHandlerType<PhoneNumberSharingMode>;
@@ -486,6 +489,7 @@ export function Preferences({
   onSpellCheckChange,
   onTextFormattingChange,
   onThemeChange,
+  onHourCycleChange,
   onToggleNavTabsCollapse,
   onUniversalExpireTimerChange,
   onWhoCanSeeMeChange,
@@ -526,6 +530,7 @@ export function Preferences({
   localeOverride,
   theme,
   themeSetting,
+  hourCyclePreference,
   universalExpireTimer = DurationInSeconds.ZERO,
   validateBackup,
   whoCanFindMe,
@@ -539,6 +544,7 @@ export function Preferences({
 }: PropsType): JSX.Element {
   const storiesId = useId();
   const themeSelectId = useId();
+  const hourCycleSelectId = useId();
   const zoomSelectId = useId();
   const languageId = useId();
 
@@ -1035,6 +1041,36 @@ export function Preferences({
             {i18n('icu:Preferences__LanguageModal__Restart__Description')}
           </ConfirmationDialog>
         )}
+        <Control
+          icon
+          left={
+            <label htmlFor={hourCycleSelectId}>
+              {i18n('icu:Preferences--time-format')}
+            </label>
+          }
+          right={
+            <Select
+              id={hourCycleSelectId}
+              disabled={hourCyclePreference === undefined}
+              onChange={onHourCycleChange}
+              options={[
+                {
+                  text: i18n('icu:timeFormatSystem'),
+                  value: 'system',
+                },
+                {
+                  text: i18n('icu:timeFormat12Hour'),
+                  value: '12',
+                },
+                {
+                  text: i18n('icu:timeFormat24Hour'),
+                  value: '24',
+                },
+              ]}
+              value={hourCyclePreference}
+            />
+          }
+        />
         <Control
           icon
           left={

ts/main/settingsChannel.main.ts

@@ -49,6 +49,7 @@ export class SettingsChannel extends EventEmitter {
     this.#installEphemeralSetting('localeOverride');
     this.#installEphemeralSetting('spellCheck');
     this.#installEphemeralSetting('contentProtection');
+    this.#installEphemeralSetting('hourCyclePreference');
 
     installPermissionsHandler({ session: session.defaultSession, userConfig });
 

ts/state/smart/Preferences.preload.tsx

@@ -44,6 +44,7 @@ import OS from '../../util/os/osPreload.preload.js';
 import { themeChanged } from '../../shims/themeChanged.dom.js';
 import * as Settings from '../../types/Settings.std.js';
 import * as universalExpireTimerUtil from '../../util/universalExpireTimer.preload.js';
+import type { HourCycleSettingType } from '../../util/preload.preload.js';
 import {
   parseSystemTraySetting,
   shouldMinimizeToSystemTray,
@@ -392,6 +393,8 @@ export function SmartPreferences(): JSX.Element | null {
     React.useState<boolean>();
   const [hasSpellCheck, setSpellCheck] = React.useState<boolean>();
   const [themeSetting, setThemeSetting] = React.useState<ThemeType>();
+  const [hourCyclePreference, setHourCyclePreference] =
+    React.useState<HourCycleSettingType>();
 
   useEffect(() => {
     let canceled = false;
@@ -438,6 +441,15 @@ export function SmartPreferences(): JSX.Element | null {
     };
     drop(loadThemeSetting());
 
+    const loadHourCyclePreference = async () => {
+      const value = await window.Events.getHourCyclePreference();
+      if (canceled) {
+        return;
+      }
+      setHourCyclePreference(value);
+    };
+    drop(loadHourCyclePreference());
+
     return () => {
       canceled = true;
     };
@@ -478,6 +490,10 @@ export function SmartPreferences(): JSX.Element | null {
     drop(window.Events.setThemeSetting(value));
     drop(themeChanged());
   };
+  const onHourCycleChange = (value: HourCycleSettingType) => {
+    setHourCyclePreference(value);
+    drop(window.Events.setHourCyclePreference(value));
+  };
 
   // Async IPC for electron configuration, all can be modified
 
@@ -906,6 +922,7 @@ export function SmartPreferences(): JSX.Element | null {
           onSpellCheckChange={onSpellCheckChange}
           onTextFormattingChange={onTextFormattingChange}
           onThemeChange={onThemeChange}
+          onHourCycleChange={onHourCycleChange}
           onToggleNavTabsCollapse={toggleNavTabsCollapse}
           onUniversalExpireTimerChange={onUniversalExpireTimerChange}
           onWhoCanFindMeChange={onWhoCanFindMeChange}
@@ -951,6 +968,7 @@ export function SmartPreferences(): JSX.Element | null {
           startPlaintextExport={startPlaintextExport}
           theme={theme}
           themeSetting={themeSetting}
+          hourCyclePreference={hourCyclePreference}
           universalExpireTimer={universalExpireTimer}
           validateBackup={validateBackup}
           whoCanFindMe={whoCanFindMe}

ts/test-electron/util/formatTimestamp_test.preload.ts

@@ -84,6 +84,52 @@ describe('formatTimestamp', () => {
   testCase('ja', HourCyclePreference.Prefer24, min, '0:00:00');
   testCase('ja', HourCyclePreference.Prefer24, max, '23:00:00');
 
+  describe('user preference override', () => {
+    it('forces 12-hour format when user selects 12-hour', () => {
+      localesStub.returns(['nb']); // Norwegian Bokmål normally uses 24-hour
+      localeOverrideStub.returns(null);
+      hourCycleStub.returns(HourCyclePreference.Prefer12);
+      assert.equal(
+        formatTimestamp(min, { timeStyle: 'medium' }),
+        '12:00:00 a.m.'
+      );
+      assert.equal(
+        formatTimestamp(max, { timeStyle: 'medium' }),
+        '11:00:00 p.m.'
+      );
+    });
+
+    it('forces 24-hour format when user selects 24-hour', () => {
+      localesStub.returns(['en']); // English normally uses 12-hour
+      localeOverrideStub.returns(null);
+      hourCycleStub.returns(HourCyclePreference.Prefer24);
+      assert.equal(formatTimestamp(min, { timeStyle: 'medium' }), '00:00:00');
+      assert.equal(formatTimestamp(max, { timeStyle: 'medium' }), '23:00:00');
+    });
+
+    it('respects locale default when user leaves it as system (24-hour)', () => {
+      localesStub.returns(['nb']);
+      localeOverrideStub.returns(null);
+      hourCycleStub.returns(HourCyclePreference.UnknownPreference);
+      assert.equal(formatTimestamp(min, { timeStyle: 'medium' }), '00:00:00');
+      assert.equal(formatTimestamp(max, { timeStyle: 'medium' }), '23:00:00');
+    });
+
+    it('respects locale default when user leaves it as system (12-hour)', () => {
+      localesStub.returns(['en']);
+      localeOverrideStub.returns(null);
+      hourCycleStub.returns(HourCyclePreference.UnknownPreference);
+      assert.equal(
+        formatTimestamp(min, { timeStyle: 'medium' }),
+        '12:00:00 AM'
+      );
+      assert.equal(
+        formatTimestamp(max, { timeStyle: 'medium' }),
+        '11:00:00 PM'
+      );
+    });
+  });
+
   describe('formatDate', () => {
     beforeEach(() => {
       localesStub.returns(['en']);

ts/test-node/util/hourCyclePreference_test.std.ts

@@ -0,0 +1,21 @@
+// Copyright 2025 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { assert } from 'chai';
+import { HourCyclePreference } from '../../types/I18N.std.js';
+
+describe('HourCyclePreference', () => {
+  describe('enum values', () => {
+    it('should have Prefer24 value', () => {
+      assert.equal(HourCyclePreference.Prefer24, 'Prefer24');
+    });
+
+    it('should have Prefer12 value', () => {
+      assert.equal(HourCyclePreference.Prefer12, 'Prefer12');
+    });
+
+    it('should have UnknownPreference value', () => {
+      assert.equal(HourCyclePreference.UnknownPreference, 'UnknownPreference');
+    });
+  });
+});

ts/test-node/util/hourCycleSetting_test.std.ts

@@ -0,0 +1,32 @@
+// Copyright 2025 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import { assert } from 'chai';
+import type { HourCycleSettingType } from '../../util/preload.preload.js';
+
+describe('HourCycleSettingType', () => {
+  describe('valid setting values', () => {
+    it('should accept "system" as a valid setting', () => {
+      const setting: HourCycleSettingType = 'system';
+      assert.equal(setting, 'system');
+    });
+
+    it('should accept "12" as a valid setting', () => {
+      const setting: HourCycleSettingType = '12';
+      assert.equal(setting, '12');
+    });
+
+    it('should accept "24" as a valid setting', () => {
+      const setting: HourCycleSettingType = '24';
+      assert.equal(setting, '24');
+    });
+
+    it('should distinguish between all three settings', () => {
+      const settings: Array<HourCycleSettingType> = ['system', '12', '24'];
+      assert.lengthOf(settings, 3);
+      assert.include(settings, 'system');
+      assert.include(settings, '12');
+      assert.include(settings, '24');
+    });
+  });
+});