app.vue

@@ -15,6 +15,7 @@
 <script lang="ts" setup>
 import ContextMenu from '~/components/ContextMenu.vue';
 import { render } from 'vue';
+import settingLoad from './utils/settingLoad';
 
 const banner = useState("banner", () => false);
 
@@ -50,7 +51,7 @@ function contextMenuHandler(e: MouseEvent) {
 	//]);
 }
 
-const currentTheme = settingsLoad().selectedThemeId ?? "dark"
+const currentTheme = settingLoad("selectedThemeId") ?? "dark"
 const baseURL = useRuntimeConfig().app.baseURL;
 
 useHead({

components/Message.vue

@@ -46,8 +46,7 @@
 				<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, { hour12: props.format == "12", timeStyle: "short" }) }}
+					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
 				</span>
 			</div>
 			<div class="message-text" v-html="sanitized" tabindex="0"></div>

components/MessageArea.vue

@@ -3,7 +3,7 @@
 		<div id="messages" ref="messagesElement">
 			<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
-				:format="timeFormat" :type="messagesType[message.uuid]"
+				format="12" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
 				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
 				:message="message" :is-reply="message.reply_to"
@@ -49,7 +49,6 @@ 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 = getPreferredTimeFormat()
 
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,

components/Settings/AppSettings/Appearance.vue

@@ -17,27 +17,20 @@
       </div>
     </div>
 
-    <!-- <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>
+    <p class="subtitle">ICONS</p>
+    <div class="themes">
     </div>
+
+
   </div>
 </template>
 
 <script lang="ts" setup>
-import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
-import type { TimeFormat } from '~/types/settings';
 import settingSave from '~/utils/settingSave';
 
 const runtimeConfig = useRuntimeConfig()
 const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
-const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
 let themeLinkElement: HTMLLinkElement | null = null;
 
 const themes: Array<Theme> = []
@@ -77,21 +70,6 @@ async function fetchThemes() {
 }
 
 await fetchThemes()
-
-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/UserInterface/RadioButtons.vue

@@ -1,111 +0,0 @@
-<template>
-	<div class="radio-buttons-container" ref="radioButtonsContainer">
-		<div v-for="index in indices" :key="index" class="radio-button" @click="onClick(index)">
-			<span class="radio-button-radio"></span>
-			<span class="radio-button-text">{{ textStrings[index] }}</span>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-
-const radioButtonsContainer = ref<HTMLDivElement>()
-
-const props = defineProps<{
-	textStrings: string[],
-	buttonCount: number,
-	defaultButtonIndex: number,
-	callback: CallableFunction,
-}>();
-
-// makes an array from 0 to buttonCount - 1
-const indices = Array.from({ length: props.buttonCount }, (_, i) => i) 
-
-// select default selected button
-onMounted(async () => {
-	await nextTick()
-	
-	if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) {
-		const children = radioButtonsContainer.value.children
-		const defaultButton = children.item(props.defaultButtonIndex)
-		defaultButton?.classList.add("selected-radio-button")
-		defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio")
-	}
-})
-
-
-function onClick(clickedIndex: number) {
-	// remove selected-radio-button class from all buttons except the clicked one	
-	if (radioButtonsContainer.value) {
-		const children = radioButtonsContainer.value.children
-		for (let i = 0; i < children.length; i++) {
-			children.item(i)?.classList.remove("selected-radio-button")
-			children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio")
-		}
-
-		children.item(clickedIndex)?.classList.add("selected-radio-button")
-		children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
-	}
-	
-	props.callback(clickedIndex)
-}
-</script>
-
-<style scoped>
-.radio-buttons-container {
-	display: flex;
-	flex-direction: column;
-}
-
-.radio-button {
-	cursor: pointer;
-
-	display: flex;
-	align-items: center;
-
-	border-radius: .66em;
-	background-color: unset;
-	color: var(--text-color);
-
-	padding: 0.4em 0.75em;
-	margin: 0.4em 0em;
-	font-size: 1.1em;
-	transition: background-color 0.2s;
-}
-
-.radio-button:hover {
-	background-color: var(--secondary-highlighted-color);
-}
-
-.selected-radio-button {
-	background-color: var(--accent-color);
-}
-
-.selected-radio-button:hover {
-	background-color: var(--accent-highlighted-color);
-}
-
-.radio-button-radio, .selected-radio-button-radio {
-	position: relative;
-	
-	display: inline-block;
-	border-radius: 1em;
-}
-
-.radio-button-radio {
-	height: 1em;
-	width: 1em;
-	border: .15em solid var(--primary-color);
-}
-
-.selected-radio-button-radio {
-    height: 1em;
-    width: 1em;
-	border: 0.15em solid var(--primary-color);
-	background-color: var(--primary-highlighted-color);
-}
-
-.radio-button-text {
-	margin-left: .5em;
-}
-</style>

types/settings.ts

@@ -1,9 +0,0 @@
-export interface ClientSettings {
-	selectedThemeId?: string, // the ID of the theme, not the URL, for example "dark"
-	timeFormat?: TimeFormat
-}
-
-export interface TimeFormat {
-	index: number,
-	format: "auto" | "12" | "24"
-}

utils/getPreferredTimeFormat.ts

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

utils/settingLoad.ts

@@ -1,12 +1,10 @@
-import type { ClientSettings } from "~/types/settings"
-
-export default (): ClientSettings => {
+export default (key: string): any => {
 	let clientSettingsItem: string | null = localStorage.getItem("clientSettings")
 	if (typeof clientSettingsItem != "string") {
 		clientSettingsItem = "{}"
 	}
 
-	let clientSettings: ClientSettings = {}
+	let clientSettings: { [key: string]: any } = {}
 	try {
 		clientSettings = JSON.parse(clientSettingsItem)
 	} catch {
@@ -17,5 +15,5 @@ export default (): ClientSettings => {
 		clientSettings = {}
 	}
 
-	return clientSettings
+	return clientSettings[key]
 }