Add preference to force 12-hour or 24-hour clock

src/webpage/localuser.ts

@@ -40,6 +40,7 @@ import {AccountSwitcher} from "./utils/switcher.js";
 import {Favorites} from "./favorites.js";
 import {
 	AnimateTristateValues,
+	ClockFormatOverrideValues,
 	getPreferences,
 	setPreferences,
 	ThemeOption,
@@ -3190,6 +3191,19 @@ class Localuser {
 					},
 				);
 			}
+			{
+				tas.addSelect(
+					I18n.localuser["clockFormatOverride"](),
+					async (_) => {
+						prefs.clockFormatOverride = ClockFormatOverrideValues[_];
+						setPreferences(prefs);
+					},
+					ClockFormatOverrideValues.map((_) => I18n.localuser.clockFormatOverrideValues[_]()),
+					{
+						defaultIndex: ClockFormatOverrideValues.indexOf(prefs.clockFormatOverride),
+					},
+				);
+			}
 		}
 		{
 			const blog = settings.addButton(I18n.blog.blog(), {contained: true});

src/webpage/message.ts

@@ -27,7 +27,7 @@ import {Components} from "./interactions/compontents.js";
 import {ImagesDisplay} from "./disimg";
 import {ReportMenu} from "./reporting/report.js";
 import {getDeveloperSettings} from "./utils/storage/devSettings.js";
-import {getPreferences} from "./utils/storage/userPreferences.js";
+import {ClockFormatOverride, getPreferences} from "./utils/storage/userPreferences.js";
 import {TypeBox} from "./typeBox.js";
 class Message extends SnowFlake {
 	static contextmenu = new Contextmenu<Message, void>("message menu");
@@ -1807,8 +1807,16 @@ function formatTime(date: Date) {
 	const conf = getPreferences();
 	updateTimes();
 	const datestring = date.toLocaleDateString();
+
+	let hour12: boolean | undefined = undefined;
+	if (conf.clockFormatOverride == ClockFormatOverride.Show12Hour) {
+		hour12 = true;
+	} else if (conf.clockFormatOverride == ClockFormatOverride.Show24Hour) {
+		hour12 = false;
+	}
+
 	const formatTime = (date: Date) =>
-		date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit"});
+		date.toLocaleTimeString([], {hour: "2-digit", minute: "2-digit", hour12: hour12});
 
 	if (datestring === now) {
 		return conf.showToday ? I18n.todayAt(formatTime(date)) : formatTime(date);

src/webpage/utils/storage/userPreferences.ts

@@ -26,6 +26,16 @@ export const ThemeOptionValues = [
 	ThemeOption.NightSky,
 	ThemeOption.NightSkyAccent,
 ];
+export const enum ClockFormatOverride {
+	Default = "default",
+	Show12Hour = "12hour",
+	Show24Hour = "24hour",
+}
+export const ClockFormatOverrideValues = [
+	ClockFormatOverride.Default,
+	ClockFormatOverride.Show12Hour,
+	ClockFormatOverride.Show24Hour,
+];
 
 export class UserPreferences {
 	showBlogUpdates?: boolean;
@@ -43,6 +53,7 @@ export class UserPreferences {
 	checkMemberList = false;
 	gifProvidor?: string;
 	showToday = true;
+	clockFormatOverride: ClockFormatOverride = ClockFormatOverride.Default;
 
 	constructor(init?: Partial<UserPreferences>) {
 		Object.assign(this, init);

translations/en.json

@@ -527,6 +527,12 @@
 		"2faDisable": "Disable 2FA",
 		"2faEnable": "Enable 2FA",
 		"CheckUpdate": "Check for updates",
+		"clockFormatOverride": "Clock format override:",
+		"clockFormatOverrideValues": {
+			"default": "Automatic",
+			"12hour": "Use AM/PM",
+			"24hour": "Use 24-hour"
+		},
 		"PasswordsNoMatch": "Passwords don't match",
 		"TOSURL": "Terms of Service link:",
 		"VoiceWarning": "Are you sure you want to enable this? It's very experimental and is likely to cause issues. (this feature is for devs, please don't enable if you don't know what you're doing)",