components/Settings/AppSettings/Appearance.vue

@@ -45,27 +45,15 @@
     <!-- <p class="subtitle">Icons</p>
     <div class="icons">
     </div> -->
-
-    <p class="subtitle">TIME FORMAT</p>
-    <div class="icons">
-      <RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
-          :default-button-index="settingsLoad().timeFormat?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
-    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
-import type { TimeFormat } from '~/types/settings';
-import { settingSave, settingsLoad } from '#imports';
-
 const runtimeConfig = useRuntimeConfig()
 const baseURL = runtimeConfig.app.baseURL;
 const styleFolder = `${baseURL}/themes/style`
 const layoutFolder = `${baseURL}/themes/layout`
 
-const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
-
 enum StyleLayout {
   Style,
   Layout
@@ -171,21 +159,6 @@ function changeTheme(themeType: StyleLayout, theme: Theme) {
   }
   loadPreferredThemes()
 }
-
-async function onTimeFormatClicked(index: number) {
-  let format: "auto" | "12" | "24" = "auto"
-
-  if (index == 0) {
-    format = "auto"
-  } else if (index == 1) {
-    format = "12"
-  } else if (index == 2) {
-    format = "24"
-  }
-
-  const timeFormat: TimeFormat = {index, format}
-  settingSave("timeFormat", timeFormat)
-}
 </script>
 
 <style scoped>

components/Settings/AppSettings/Language.vue

@@ -1,10 +1,27 @@
 <template>
   <div>
-    <h1>Language (TBA)</h1>
+    <h1>Language</h1>
+
+    <p class="subtitle">TIME FORMAT</p>
+    <div class="icons">
+      <RadioButtons
+        :button-count="3"
+        :text-strings="timeFormatTextStrings"
+        :default-button-index="timeFormatSelectedIndex"
+        :callback="(index: number) => {settingSave('timeFormat', timeFormatTextStrings[index])}"
+      />
+    </div>
+
   </div>
 </template>
 
 <script lang="ts" setup>
+import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
+import type { TimeFormat } from '~/types/settings';
+
+const timeFormatTextStrings: TimeFormat[] = ["Auto", "4:18 PM", "16:18"]
+const timeFormatSelectedIndex = timeFormatTextStrings.indexOf(settingsLoad().timeFormat ?? "Auto")
+
 </script>
 
 <style scoped>

types/settings.ts

@@ -4,7 +4,4 @@ export interface ClientSettings {
 	selectedThemeLayout?: string // URL
 }
 
-export interface TimeFormat {
-	index: number,
-	format: "auto" | "12" | "24"
-}
+export type TimeFormat = "Auto" | "4:18 PM" | "16:18"

utils/getPreferredTimeFormat.ts

@@ -1,9 +1,9 @@
 export default (): "12" | "24" => {
-	const format = settingsLoad().timeFormat?.format ?? "auto"
+	const format = settingsLoad().timeFormat ?? "Auto"
 
-	if (format == "12") {
+	if (format == "4:18 PM") {
 		return "12"
-	} else if (format == "24") {
+	} else if (format == "16:18") {
 		return "24"
 	}