From 92c82a0a34246f7691cb9aaa9ccc107f07a2a419 Mon Sep 17 00:00:00 2001
From: Henry Jameson <me@hjkos.com>
Date: Mon, 27 Jan 2025 12:00:28 +0200
Subject: [PATCH] 24h option

---
 src/components/settings_modal/tabs/general_tab.js |  5 +++++
 .../settings_modal/tabs/general_tab.vue           | 10 ++++++++++
 src/components/timeago/timeago.vue                | 15 +++++++++++----
 src/i18n/en.json                                  |  3 +++
 src/modules/config.js                             |  1 +
 src/modules/instance.js                           |  1 +
 6 files changed, 31 insertions(+), 4 deletions(-)

diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
index 3ccf025c8..517f54eb1 100644
--- a/src/components/settings_modal/tabs/general_tab.js
+++ b/src/components/settings_modal/tabs/general_tab.js
@@ -30,6 +30,11 @@ const GeneralTab = {
         value: mode,
         label: this.$t(`settings.conversation_display_${mode}`)
       })),
+      absoluteTime12hOptions: ['24h', '12h'].map(mode => ({
+        key: mode,
+        value: mode,
+        label: this.$t(`settings.absolute_time_format_12h_${mode}`)
+      })),
       conversationOtherRepliesButtonOptions: ['below', 'inside'].map(mode => ({
         key: mode,
         value: mode,
diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
index b5346592a..83ab5e3ac 100644
--- a/src/components/settings_modal/tabs/general_tab.vue
+++ b/src/components/settings_modal/tabs/general_tab.vue
@@ -249,6 +249,16 @@
               {{ $t('settings.absolute_time_format_min_age') }}
             </UnitSetting>
           </li>
+          <li>
+            <ChoiceSetting
+              id="absoluteTime12h"
+              path="absoluteTime12h"
+              :options="absoluteTime12hOptions"
+              :expert="1"
+            >
+              {{ $t('settings.absolute_time_format_12h') }}
+            </ChoiceSetting>
+          </li>
         </ul>
         <h3>{{ $t('settings.attachments') }}</h3>
         <li>
diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue
index d0b86e7d4..bc779e801 100644
--- a/src/components/timeago/timeago.vue
+++ b/src/components/timeago/timeago.vue
@@ -28,6 +28,9 @@ export default {
       }
       return DateUtils.durationStrToMs(this.$store.getters.mergedConfig.absoluteTimeFormatMinAge) <= this.relativeTimeMs
     },
+    time12hFormat () {
+      return this.$store.getters.mergedConfig.absoluteTimeFormat12h === '12h'
+    },
     browserLocale () {
       return localeService.internalToBrowserLocale(this.$i18n.locale)
     },
@@ -57,22 +60,26 @@ export default {
         if (DateUtils.isSameDay(this.timeAsDate, now)) {
           return new Intl.DateTimeFormat(this.browserLocale, {
             minute: 'numeric',
-            hour: 'numeric'
+            hour: 'numeric',
+            hour12: this.time12hFormat
           })
         } else if (DateUtils.isSameMonth(this.timeAsDate, now)) {
           return new Intl.DateTimeFormat(this.browserLocale, {
             month: 'short',
-            day: 'numeric'
+            day: 'numeric',
+            hour12: this.time12hFormat
           })
         } else if (DateUtils.isSameYear(this.timeAsDate, now)) {
           return new Intl.DateTimeFormat(this.browserLocale, {
             month: 'short',
-            day: 'numeric'
+            day: 'numeric',
+            hour12: this.time12hFormat
           })
         } else {
           return new Intl.DateTimeFormat(this.browserLocale, {
             year: 'numeric',
-            month: 'short'
+            month: 'short',
+            hour12: this.time12hFormat
           })
         }
       })()
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 13872d0e6..01590c61f 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -532,6 +532,9 @@
     "emoji_reactions_scale": "Reactions scale factor",
     "absolute_time_format": "Use absolute time format",
     "absolute_time_format_min_age": "Only use for time older than this amount of time",
+    "absolute_time_format_12h": "Time format",
+    "absolute_time_format_12h_12h": "12 hour format (i.e. 10:00 PM)",
+    "absolute_time_format_12h_24h": "24 hour format (i.e. 22:00)",
     "export_theme": "Save preset",
     "filtering": "Filtering",
     "wordfilter": "Wordfilter",
diff --git a/src/modules/config.js b/src/modules/config.js
index c42fc8c12..ebc8b9311 100644
--- a/src/modules/config.js
+++ b/src/modules/config.js
@@ -193,6 +193,7 @@ export const defaultState = {
   autoSaveDraft: undefined, // instance default
   useAbsoluteTimeFormat: undefined, // instance default
   absoluteTimeFormatMinAge: undefined, // instance default
+  absoluteTime12h: undefined, // instance default
   imageCompression: true
 }
 
diff --git a/src/modules/instance.js b/src/modules/instance.js
index 408aaef16..2c0246695 100644
--- a/src/modules/instance.js
+++ b/src/modules/instance.js
@@ -131,6 +131,7 @@ const defaultState = {
   autoSaveDraft: false,
   useAbsoluteTimeFormat: false,
   absoluteTimeFormatMinAge: '0d',
+  absoluteTime12h: '24h',
 
   // Nasty stuff
   customEmoji: [],