components/Message.vue

@@ -46,7 +46,8 @@
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
 					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
-					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
+
+					{{ date.toLocaleTimeString(undefined, { hour12: props.format=="12", timeStyle: "short" }) }}
 				</span>
 			</div>
 			<div class="message-text" v-html="sanitized" tabindex="0"></div>

components/MessageArea.vue

@@ -49,7 +49,7 @@ const me = await fetchWithApi("/me") as UserResponse;
 const messageTimestamps = ref<Record<string, number>>({});
 const messagesType = ref<Record<string, "normal" | "grouped">>({});
 const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
-const timeFormat = settingLoad("timeFormat") ?? "24"
+const timeFormat = getPreferredTimeFormat()
 
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,

utils/getPreferredTimeFormat.ts

@@ -0,0 +1,11 @@
+export default (): "12" | "24" => {
+	const format = settingLoad("timeFormat").timeFormat ?? "auto"
+
+	if (format == "12-hour") {
+		return "12"
+	} else if (format == "24-hour") {
+		return "24"
+	}
+
+	return "24"
+}