Add an option to display 12h times

client/components/Message.vue

@@ -100,12 +100,19 @@ export default {
 		isPreviousSource: Boolean,
 	},
 	computed: {
-		messageTime() {
-			const format = this.$store.state.settings.showSeconds
-				? constants.timeFormats.msgWithSeconds
-				: constants.timeFormats.msgDefault;
+		timeFormat() {
+			let format;
 
-			return dayjs(this.message.time).format(format);
+			if (this.$store.state.settings.use12hClock) {
+				format = this.$store.state.settings.showSeconds ? "msg12hWithSeconds" : "msg12h";
+			} else {
+				format = this.$store.state.settings.showSeconds ? "msgWithSeconds" : "msgDefault";
+			}
+
+			return constants.timeFormats[format];
+		},
+		messageTime() {
+			return dayjs(this.message.time).format(this.timeFormat);
 		},
 		messageTimeLocale() {
 			return localetime(this.message.time);

client/components/Windows/Settings.vue

@@ -88,6 +88,16 @@
 					Show seconds in timestamp
 				</label>
 			</div>
+			<div>
+				<label class="opt">
+					<input
+						:checked="$store.state.settings.use12hClock"
+						type="checkbox"
+						name="use12hClock"
+					/>
+					Show 12-hour timestamps
+				</label>
+			</div>
 			<div v-if="!$store.state.serverConfiguration.public && $store.state.settings.advanced">
 				<h2>Automatic away message</h2>
 

client/js/constants.js

@@ -24,6 +24,8 @@ const condensedTypes = new Set(["chghost", "join", "part", "quit", "nick", "kick
 const timeFormats = {
 	msgDefault: "HH:mm",
 	msgWithSeconds: "HH:mm:ss",
+	msg12h: "hh:mm A",
+	msg12hWithSeconds: "hh:mm:ss A",
 };
 
 // This file is required by server, can't use es6 export

client/js/settings.js

@@ -64,6 +64,9 @@ export const config = normalizeConfig({
 	showSeconds: {
 		default: false,
 	},
+	use12hClock: {
+		default: false,
+	},
 	statusMessages: {
 		default: "condensed",
 	},