feat: add radio buttons and start integrating them into time format setting

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="12" :type="messagesType[message.uuid]"
+				:format="timeFormat" :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,6 +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 messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,

components/RadioButtons.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="radio-button-container" ref="radioButtonContainer">
+		<span v-for="index in incidies" :key="index"
+				class="radio-button" @click="onClick(index)">
+			{{ textStrings[index] }}
+		</span>
+	</div>
+</template>
+
+<script lang="ts" setup>
+
+const radioButtonContainer = ref<HTMLDivElement>()
+
+const props = defineProps<{
+	textStrings: string[],
+	buttonCount: number,
+	defaultButtonIndex: number,
+	callback: CallableFunction,
+}>();
+
+// makes an array from 0 to buttonCount - 1
+const incidies = Array.from({ length: props.buttonCount }, (_, i) => i) 
+
+function onClick(clickedIndex: number) {
+	// remove selected-radio-button class from all buttons except the clicked one	
+	if (radioButtonContainer.value) {
+		const children = radioButtonContainer.value.children
+		for (let i = 0; i < children.length; i++) {
+			children.item(i)?.classList.remove("selected-radio-button")
+		}
+
+		children.item(clickedIndex)?.classList.add("selected-radio-button")
+	}
+	
+	props.callback(clickedIndex)
+}
+</script>
+
+<style scoped>
+.radio-button-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.radio-button {
+	cursor: pointer;
+
+	border-radius: 1em;
+	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(--primary-color);
+}
+
+.selected-radio-button:hover {
+	background-color: var(--primary-highlighted-color);
+}
+
+</style>

components/Settings/AppSettings/Appearance.vue

@@ -17,11 +17,15 @@
       </div>
     </div>
 
-    <p class="subtitle">ICONS</p>
-    <div class="themes">
+    <!-- <p class="subtitle">Icons</p>
+    <div class="icons">
+    </div> -->
+
+    <p class="subtitle">TIME FORMAT</p>
+    <div class="icons">
+      <RadioButtons :button-count="3" :text-strings="['Auto', '12-hour', '24-hour']"
+          default-button-index="0" :callback="onTimeFormatClicked"></RadioButtons>
     </div>
-
-
   </div>
 </template>
 
@@ -70,6 +74,11 @@ async function fetchThemes() {
 }
 
 await fetchThemes()
+
+
+async function onTimeFormatClicked(index: number) {
+    console.log(index)
+}
 </script>
 
 <style scoped>