style: change about me rendering in profile modals

also simplifies the radio button code, making it easier to parse

classes/Message.ts

@@ -12,4 +12,8 @@ export default class Message {
 		this.userUuid = user_uuid;
 		this.message = message;
 	}
+
+	getTimestamp() {
+		return uuidToTimestamp(this.uuid);
+	}
 }

components/Avatar.vue

@@ -6,7 +6,7 @@
 	<DefaultIcon v-else
 		class="display-avatar"
 		:name="displayName"
-		:seed="user.uuid"
+		:seed="getUserUuid(props.profile)"
 		:alt="displayName" />
 </template>
 
@@ -14,25 +14,14 @@
 import { NuxtImg } from '#components';
 import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
 
-const { getDisplayName } = useProfile()
+const { getDisplayName, getAvatarUrl, getUserUuid } = useProfile()
 
 const props = defineProps<{
 	profile: UserResponse | GuildMemberResponse,
 }>();
 
 const displayName = getDisplayName(props.profile)
-let user: UserResponse
-let displayAvatar: string | null
-
-if ("username" in props.profile) {
-	// assume it's a UserResponse
-	displayAvatar = props.profile.avatar
-	user = props.profile
-} else {
-	// assume it's a GuildMemberResponse
-	displayAvatar = props.profile.user.avatar
-	user = props.profile.user
-}
+const displayAvatar = getAvatarUrl(props.profile)
 
 </script>
 

components/DefaultIcon.vue

@@ -17,6 +17,7 @@ const props = defineProps<{
 }>();
 
 let previewName = "";
+// include the entire name if it's 3 chars or less, use the first char of the first 3 words otherwise
 if (props.name.length > 3) {
 	let guildName: string[] = props.name.split(' ')
 	for (let i = 0; i < 3; i ++) {

components/Message.vue

@@ -1,22 +1,24 @@
 <template>
-	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
-			class="message normal-message" :class="{ 'highlighted': (props.isMentioned || (props.replyMessage && props.message.member.user.uuid != me!.uuid && props.replyMessage?.member.user.uuid == me!.uuid)) }"
-			:data-message-id="props.message.uuid" :editing.sync="props.editing">
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
+			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.member.user.uuid != props.me.uuid && props.replyMessage?.member.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
+			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div v-if="props.replyMessage" class="message-reply-svg">
 			<svg
 				width="1.5em" height="1.5em"
 				viewBox="0 0 150 87.5" version="1.1" id="svg1"
 				style="overflow: visible;">
 				<defs id="defs1" />
-				<g id="layer1" transform="translate(40,-35)">
-					<g id="g3" transform="translate(-35,-20)">
+				<g id="layer1"
+					transform="translate(40,-35)">
+					<g id="g3"
+						transform="translate(-35,-20)">
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
-						d="m 120,87.5 100,2.5e-5"
+						d="m 120.02168,87.850978 100.76157,2.4e-5"
 						id="path3-5" />
 					<path
 						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
-						d="M 70,150 120,87.5"
+						d="M 69.899501,174.963 120.2803,87.700931"
 						id="path3-5-2" />
 					</g>
 				</g>
@@ -27,36 +29,36 @@
 			:text="props.replyMessage?.message"
 			:reply-id="props.replyMessage.uuid" max-width="reply" />
 		<div class="left-column">
-			<Avatar :profile="props.message.member" class="message-author-avatar"/>
+			<Avatar :profile="props.author" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username" tabindex="0" :style="`color: ${generateIrcColor(props.message.member.user.uuid)}`">
-					{{ getDisplayName(props.message.member) }}
+				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
+					{{ getDisplayName(props.author) }}
 				</span>
 				<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: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
+					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
-			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
+			<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
 		</div>
+		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
-	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)"
-			class="message grouped-message" :class="{ 'mentioned': props.replyMessage || props.isMentioned }"
-			:data-message-id="props.message.uuid" :editing.sync="props.editing">
+	<div v-else ref="messageElement" @contextmenu="showContextMenu($event, contextMenu, menuItems)" :id="props.last ? 'last-message' : undefined"
+			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
+			:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div class="left-column">
 			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
-				{{ date.toLocaleTimeString(undefined, { hour12: getPreferredTimeFormat() == "12", timeStyle: "short" }) }}
+				{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
 			</span>
 		</div>
 		<div class="message-data">
-			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hideText" tabindex="0"></div>
-			<MessageMedia v-if="mediaLinks.length" :links="mediaLinks"/>
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
 		</div>
+		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 </template>
 
@@ -69,37 +71,33 @@ import MessageReply from './UserInterface/MessageReply.vue';
 import type { ContextMenuInterface, ContextMenuItem } from '~/types/interfaces';
 
 const { getDisplayName } = useProfile()
-const { getUser } = useAuth()
 
 const props = defineProps<MessageProps>();
 
-const me = await getUser()
-
 const contextMenu = useState<ContextMenuInterface>("contextMenu", () => ({ show: false, pointerX: 0, pointerY: 0, items: [] }));
 
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
 
-const date = uuidToDate(props.message.uuid);
-
+const date = new Date(props.timestamp);
 const currentDate: Date = new Date()
 
 console.log("[MSG] message to render:", props.message);
-console.log("author:", props.message.member);
+console.log("author:", props.author);
 console.log("[MSG] reply message:", props.replyMessage);
 
 const linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
 const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
-const mediaLinks = ref<string[]>([]);
+const mediaLinks: string[] = [];
 console.log("link matches:", linkMatches);
 
-const hideText = ref(false);
+const hasEmbed = ref(false);
 
 const sanitized = ref<string>();
 
 onMounted(async () => {
-	const parsed = await parse(props.message.message, { gfm: true });
+	const parsed = await parse(props.text, { gfm: true });
 	sanitized.value = DOMPurify.sanitize(parsed, {
 		ALLOWED_TAGS: [
 			"strong", "em", "br", "blockquote",
@@ -123,35 +121,23 @@ onMounted(async () => {
 		console.log("added listeners");
 	}
 
-	const links: string[] = [];
 	for (const link of linkMatches) {
-		console.log("link:", link);
-		try {
-			const res = await $fetch.raw(link);
-			if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
-				console.log("link is image");
-				links.push(link);
-			}
-		} catch (error) {
-			console.error(error);
+	console.log("link:", link);
+	try {
+		const res = await $fetch.raw(link);
+		if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
+			console.log("link is image");
+			mediaLinks.push(link);
 		}
-
-		mediaLinks.value = [...links];
+		if (mediaLinks.length) {
+			hasEmbed.value = true
+		};
+	} catch (error) {
+		console.error(error);
 	}
+}
 
-	if (mediaLinks.value.length) {
-		const nonLinks = props.message.message.split(linkRegex);
-		let invalidContent = false;
-		for (const nonLink of nonLinks) {
-			if (nonLink != "" && nonLink != "\n" && nonLink != "<br>") {
-				invalidContent = true;
-				break;
-			}
-		}
-		hideText.value = !invalidContent;
-	};
-
-	console.log("media links:", mediaLinks);
+console.log("media links:", mediaLinks);
 });
 
 //function toggleTooltip(e: Event) {
@@ -162,13 +148,13 @@ const menuItems: ContextMenuItem[] = [
 	{ name: "Reply", icon: "lucide:reply", type: "normal", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
 ]
 
-console.log("me:", me);
-if (props.message.member.user.uuid == me!.uuid) {
+console.log("me:", props.me);
+if (props.author?.user.uuid == props.me.uuid) {
 	// Inserts "edit" option at index 1 (below the "reply" option)
 	menuItems.splice(1, 0, { name: "Edit (WIP)", icon: "lucide:square-pen", type: "normal", callback: () => { /* if (messageElement.value) editMessage(messageElement.value, props) */ } });
 }
 
-if (props.message.member.user.uuid == me!.uuid /* || check message delete permission*/) {
+if (props.author?.user.uuid == props.me.uuid /* || check message delete permission*/) {
 	// Inserts "edit" option at index 2 (below the "edit" option)
 	menuItems.splice(2, 0, { name: "Delete (WIP)", icon: "lucide:trash", type: "danger", callback: () => {} });
 }
@@ -188,20 +174,14 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style scoped>
 .message {
-	display: grid;
-	grid-template-columns: 4rem 1fr;
-	align-items: center;
-
 	text-align: left;
-	/* -4 dvw due to 2dvw of padding on both sides */
-	width: calc(100% - 4dvw);
+	/* border: 1px solid lightcoral; */
+	display: grid;
+	grid-template-columns: 2rem 1fr;
+	align-items: center;
+	column-gap: 1dvw;
+	width: 100%;
 	overflow-wrap: anywhere;
-
-	padding-top: .2rem;
-	padding-bottom: .2rem;
-	padding-left: 2dvw;
-	padding-right: 1dvw;
-	border-radius: 0 var(--minor-radius) var(--minor-radius) 0;
 }
 
 .message-reply-preview {
@@ -217,6 +197,14 @@ function getDayDifference(date1: Date, date2: Date) {
 	margin-top: 1dvh;
 }
 
+.grouped-message {
+	margin-top: .3em;
+}
+
+#last-message {
+	margin-bottom: 2dvh;
+}
+
 .message-metadata {
 	display: flex;
 	gap: .5dvw;
@@ -225,9 +213,10 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-data {
 	/* border: 1px solid white; */
+	margin-left: .5dvw;
 	display: flex;
 	flex-direction: column;
-	height: 100%;
+	height: fit-content;
 	width: 100%;
 	grid-row: 2;
 	grid-column: 2;
@@ -239,10 +228,10 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 
 .message-author-avatar {
-	min-height: 2.5em;
-	max-height: 2.5em;
-	min-width: 2.5em;
-	max-width: 2.5em;
+	min-height: 2em;
+	max-height: 2em;
+	min-width: 2em;
+	max-width: 2em;
 }
 
 .left-column {
@@ -253,11 +242,8 @@ function getDayDifference(date1: Date, date2: Date) {
 	white-space: nowrap;
 	grid-row: 2;
 	grid-column: 1;
-	height: 100%;
-	align-items: start;
 }
 
-
 .author-username {
 	margin-right: .5dvw;
 	color: white;
@@ -271,7 +257,9 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .side-message-date {
 	font-size: .625em;
-	margin-top: .4em;
+	display: flex;
+	align-items: center;
+	align-content: center;
 }
 
 /*
@@ -281,11 +269,11 @@ function getDayDifference(date1: Date, date2: Date) {
 }
 */
 
-.highlighted {
+.mentioned {
 	background-color: var(--chat-important-background-color);
 }
 
-.highlighted:hover {
+.mentioned:hover {
 	background-color: var(--chat-important-highlighted-background-color);
 }
 
@@ -310,7 +298,6 @@ function getDayDifference(date1: Date, date2: Date) {
 
 <style>
 
-/* class used in utils/replyToMessage.ts */
 .replying-to {
 	background-color: var(--chat-featured-message-color);
 }

components/MessageArea.vue

@@ -1,12 +1,14 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :key="message.uuid"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.member.user)" :key="message.uuid"
+				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.member.user.avatar"
+				: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.member" :me="me"
 				:message="message" :is-reply="message.reply_to"
-				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined"
-				:type="messagesType[message.uuid]"
-				:editing="false"
-				:is-mentioned="false" />
+				:author-color="`${generateIrcColor(message.member.user.uuid)}`"
+				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
@@ -318,6 +320,8 @@ router.beforeEach((to, from, next) => {
 #message-area {
 	display: flex;
 	flex-direction: column;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 	overflow: hidden;
 	flex-grow: 1;
 }
@@ -325,8 +329,8 @@ router.beforeEach((to, from, next) => {
 #message-box {
 	margin-top: auto; /* force it to the bottom of the screen */
 	margin-bottom: 2dvh;
-	margin-left: 2dvw;
-	margin-right: 2dvw;
+	margin-left: 1dvw;
+	margin-right: 1dvw;
 
 	padding-left: 2%;
 	padding-right: 2%;
@@ -378,7 +382,8 @@ router.beforeEach((to, from, next) => {
 	overflow-y: scroll;
 	display: flex;
 	flex-direction: column;
-	padding-bottom: 1em;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 }
 
 .message-box-button {

components/MessageMedia.vue

@@ -1,9 +1,6 @@
 <template>
 	<div class="media-container">
-		<NuxtImg v-for="link of props.links"
-			class="media-item"
-			:src="link"
-			@click.prevent="createModal(link)" />
+		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
 	</div>
 </template>
 
@@ -11,6 +8,7 @@
 import { ModalBase } from '#components';
 import { render } from 'vue';
 
+
 const props = defineProps<{ links: string[] }>();
 
 function createModal(link: string) {
@@ -36,14 +34,14 @@ function createModal(link: string) {
 <style scoped>
 
 .media-container {
-	display: flex;
-	flex-wrap: wrap;
-	gap: .2rem;
-	max-width: 100%;
+	grid-column: 2;
+	grid-row: 3;
+	margin-left: .5dvw;
 }
 
 .media-item {
 	cursor: pointer;
 	max-width: 15dvw;
 }
+
 </style>

components/Modal/ProfilePopup.vue

@@ -27,15 +27,17 @@
 			</div>
 			<VerticalSpacer />
 
-			<div v-if="aboutMe" id="profile-body">
-				<div v-if="aboutMe" id="about-me-container">
-					<div><Icon name="lucide:info" size="1.1em"/></div>
-					<div id="about-me-text">
-						{{ " " + aboutMe }}
+			<div v-if="aboutMe">
+				<div id="profile-body">
+					<div id="about-me-container">
+						<div><Icon name="lucide:info" size="1.1em"/></div>
+						<div id="about-me-text">
+							{{ " " + aboutMe }}
+						</div>
 					</div>
 				</div>
+				<VerticalSpacer />
 			</div>
-			<VerticalSpacer v-if="aboutMe" />
 
 			<div id="profile-footer">
 				<div id="dates">
@@ -62,7 +64,7 @@ import type { GuildMemberResponse, ModalProps, UserResponse } from '~/types/inte
 import VerticalSpacer from '../UserInterface/VerticalSpacer.vue';
 import Button from '../UserInterface/Button.vue';
 
-const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUuid } = useProfile()
+const { getDisplayName, getUsername, getPronouns, getAboutMe, getRegistrationDate, getGuildJoinDate, getFriendsSince, getUserUuid } = useProfile()
 const { addFriend, fetchMe } = useApi();
 
 const props = defineProps<ModalProps & {
@@ -81,7 +83,7 @@ const registrationDate = getRegistrationDate(props.profile)
 const joinDate = getGuildJoinDate(props.profile)
 const friendsSince = await getFriendsSince(props.profile)
 
-const uuid = getUuid(props.profile)
+const uuid = getUserUuid(props.profile)
 
 
 function toDateString(date: Date): string {

components/Settings/AppSettings/Appearance.vue

@@ -45,26 +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"]
+const styleFolder = `${baseURL}themes/style`
+const layoutFolder = `${baseURL}themes/layout`
 
 enum StyleLayout {
   Style,
@@ -171,21 +160,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,25 @@
 <template>
   <div>
-    <h1>Language (TBA)</h1>
+    <h1>Language</h1>
+
+    <p class="subtitle">TIME FORMAT</p>
+    <div class="icons">
+      <RadioButtons
+        :text-strings="timeFormatTextStrings"
+        :default-button-key='settingsLoad().timeFormat ?? "Auto"'
+        :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"]
+
 </script>
 
 <style scoped>

components/UserInterface/RadioButtons.vue

@@ -1,8 +1,10 @@
 <template>
 	<div class="radio-buttons-container" ref="radioButtonsContainer">
-		<div v-for="index in indices" :key="index" class="radio-button" @click="onClick(index)">
+		<div v-for="(textString, index) in props.textStrings"
+				class="radio-button"
+				@click="onClick(index)">
 			<span class="radio-button-radio"></span>
-			<span class="radio-button-text">{{ textStrings[index] }}</span>
+			<span class="radio-button-text">{{ textString }}</span>
 		</div>
 	</div>
 </template>
@@ -13,42 +15,65 @@ const radioButtonsContainer = ref<HTMLDivElement>()
 
 const props = defineProps<{
 	textStrings: string[],
-	buttonCount: number,
-	defaultButtonIndex: number,
+	defaultButtonKey?: string,
+	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) {
+	// select default selected button
+	if (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")
+
+		// set the button based on key
+		if (props.defaultButtonKey != undefined) {
+			const newIndex = props.textStrings.indexOf(props.defaultButtonKey)
+			const defaultButton = children.item(newIndex)
+			if (defaultButton) {
+				selectButton(defaultButton)
+				return // note the return if you're extending this
+			}
+		}
+		// if that fails, set it based on index, defaulting to 0
+		const defaultButton = children.item(props.defaultButtonIndex ?? 0)
+		if (defaultButton) {
+			selectButton(defaultButton)
+		}
 	}
 })
 
 
 function onClick(clickedIndex: number) {
-	// remove selected-radio-button class from all buttons except the clicked one	
 	if (radioButtonsContainer.value) {
+		// remove selected-radio-button class from all buttons except the clicked one	
 		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")
+			const button = children.item(i)
+			if (button) {
+				unSelectButton(button)
+			}
 		}
 
-		children.item(clickedIndex)?.classList.add("selected-radio-button")
-		children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
+		const button = children.item(clickedIndex)
+		if (button) {
+			selectButton(button)
+		}
 	}
 	
 	props.callback(clickedIndex)
 }
+
+function unSelectButton(button: Element) {
+	button.classList.remove("selected-radio-button")
+	button.children.item(0)?.classList.remove("selected-radio-button-radio")	
+}
+
+function selectButton(button: Element) {
+	button.classList.add("selected-radio-button")
+	button.children.item(0)?.classList.add("selected-radio-button-radio")
+}
 </script>
 
 <style scoped>

composables/profile.ts

@@ -3,7 +3,7 @@ import type { GuildMemberResponse, UserResponse } from "~/types/interfaces"
 const { fetchFriends } = useApi();
 
 export const useProfile = () => {
-	function getAboutMe (profile: UserResponse | GuildMemberResponse): string | null {
+	function getAboutMe(profile: UserResponse | GuildMemberResponse): string | null {
 		if ("username" in profile) {
 			return profile.about
 		} else {
@@ -11,7 +11,7 @@ export const useProfile = () => {
 		}
 	}
 
-	function getDisplayName (profile: UserResponse | GuildMemberResponse): string  {
+	function getDisplayName(profile: UserResponse | GuildMemberResponse): string  {
 		if ("username" in profile) {
 			// assume it's a UserResponse
 			if (profile.display_name) return profile.display_name
@@ -24,7 +24,15 @@ export const useProfile = () => {
 		}
 	}
 
-	async function getFriendsSince (profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
+	function getAvatarUrl(profile: UserResponse | GuildMemberResponse): string | null {
+		if ("username" in profile) {
+			return profile.avatar
+		} else {
+			return profile.user.avatar
+		}
+	}
+
+	async function getFriendsSince(profile: UserResponse | GuildMemberResponse): Promise<Date | null> {
 		let user_uuid: string;
 
 		if ("username" in profile) {
@@ -42,15 +50,15 @@ export const useProfile = () => {
 		return null
 	}
 
-	function getGuildJoinDate (profile: UserResponse | GuildMemberResponse): Date | null {
+	function getGuildJoinDate(profile: UserResponse | GuildMemberResponse): Date | undefined {
 		if ("username" in profile) {
-			return null
+			return undefined
 		} else {
 			return uuidToDate(profile.uuid)
 		}
 	}
 
-	function getPronouns (profile: UserResponse | GuildMemberResponse): string | null  {
+	function getPronouns(profile: UserResponse | GuildMemberResponse): string | null {
 		if ("username" in profile) {
 			return profile.pronouns
 		} else {
@@ -58,7 +66,7 @@ export const useProfile = () => {
 		}
 	}
 
-	function getRegistrationDate (profile: UserResponse | GuildMemberResponse): Date | null {
+	function getRegistrationDate(profile: UserResponse | GuildMemberResponse): Date {
 		if ("username" in profile) {
 			return uuidToDate(profile.uuid)
 		} else {
@@ -66,7 +74,7 @@ export const useProfile = () => {
 		}
 	}
 
-	function getUsername (profile: UserResponse | GuildMemberResponse): string {
+	function getUsername(profile: UserResponse | GuildMemberResponse): string {
 		if ("username" in profile) {
 			return profile.username
 		} else {
@@ -74,22 +82,32 @@ export const useProfile = () => {
 		}
 	}
 
-	function getUuid (profile: UserResponse | GuildMemberResponse): string | null {
+	function getUserUuid(profile: UserResponse | GuildMemberResponse): string {
 		if ("username" in profile) {
 			return profile.uuid
 		} else {
 			return profile.user.uuid
 		}
 	}
+
+	function getUser(profile: UserResponse | GuildMemberResponse): UserResponse {
+		if ("username" in profile) {
+			return profile
+		} else {
+			return profile.user
+		}
+	}
 	
 	return {
 		getAboutMe,
 		getDisplayName,
+		getAvatarUrl,
 		getFriendsSince,
 		getGuildJoinDate,
 		getRegistrationDate,
 		getPronouns,
 		getUsername,
-		getUuid		
+		getUserUuid,
+		getUser
 	}
 }

public/themes/layout/gorb.css

@@ -9,7 +9,6 @@ complementaryColor = white
 	--sidebar-icon-gap: .25em;
 	--sidebar-margin: .5em;
 	
-	--minor-radius: .35em;
 	--standard-radius: .5em;
 	--button-radius: .6em;
 	--guild-icon-radius: 15%;

public/themes/style/ash.css

@@ -10,15 +10,15 @@ complementaryColor = white
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-	--chat-background-color: #383432;
-    --chat-highlighted-background-color: #4c4a48;
+	--chat-background-color: #2f2e2d;
+    --chat-highlighted-background-color: #3f3b38;
 	--chat-important-background-color: #ffcf5f38;
 	--chat-important-highlighted-background-color: #ffa86f4f;
 	--chat-featured-message-color: #4f3f2f60;
 	--popup-background-color: #2f2828;
 	--popup-highlighted-background-color: #382f2f;
 
-	--sidebar-background-color: #322f2d;
+	--sidebar-background-color: #3e3a37;
 	--sidebar-highlighted-background-color: #46423b;
 	--topbar-background-color: #3a3733;
 	--chatbox-background-color: #3a3733;

public/themes/style/dark.css

@@ -10,16 +10,16 @@ complementaryColor = white
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-	--chat-background-color: #282624;
-    --chat-highlighted-background-color: #383430;
+	--chat-background-color: #1f1e1d;
+    --chat-highlighted-background-color: #2f2b28;
 	--chat-important-background-color: #ffc44f2f;
 	--chat-important-highlighted-background-color: #ffa45f4a;
 	--chat-featured-message-color: #4f2f1f58;
 	--popup-background-color: #2f1f1f;
 	--popup-highlighted-background-color: #3f2f2f;
 
-	--sidebar-background-color: #1f1e1d;
-	--sidebar-highlighted-background-color: #2f2b28;
+	--sidebar-background-color: #2e2a27;
+	--sidebar-highlighted-background-color: #36322b;
 	--topbar-background-color: #2a2723;
 	--chatbox-background-color: #1a1713;
 

public/themes/style/light.css

@@ -10,13 +10,13 @@ complementaryColor = black
 	--reply-text-color: #969696;
 	--danger-text-color: #ff0000;
 
-    --chat-background-color: #f0edeb;
-    --chat-highlighted-background-color: #aba8a4;
+    --chat-background-color: #f0ebe8;
+    --chat-highlighted-background-color: #e8e4e0;
     --chat-important-background-color: #df5f0b26;
     --chat-important-hightlighted-background-color: #df5f0b3d;
     --chat-featured-message-color: #e8ac841f;
-    --popup-background-color: #b8b4b0;
-    --popup-highlighted-background-color: #a6a4a2;
+    --popup-background-color: #e8e4e0;
+    --popup-highlighted-background-color: #dfdbd6;
 
 	--sidebar-background-color: #dbd8d4;
 	--sidebar-highlighted-background-color: #d4d0ca;

types/props.ts

@@ -1,9 +1,21 @@
-import type { MessageResponse, UserResponse } from "./interfaces";
+import type { GuildMemberResponse, MessageResponse, UserResponse } from "./interfaces";
 
 export interface MessageProps {
-	message: MessageResponse,
-	replyMessage?: MessageResponse,
+	class?: string,
+	img?: string | null,
+	author: GuildMemberResponse
+	text: string,
+	timestamp: number,
+	format: "12" | "24",
 	type: "normal" | "grouped",
+	marginBottom: boolean,
+	authorColor: string,
+	last: boolean,
+	messageId: string,
+	replyingTo?: boolean,
 	editing?: boolean,
+	me: UserResponse
+	message: MessageResponse,
+	replyMessage?: MessageResponse
 	isMentioned?: boolean,
 }

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"
 	}
 

utils/loadPreferredThemes.ts

@@ -2,20 +2,17 @@ let styleLinkElement: HTMLLinkElement | null;
 let layoutLinkElement: HTMLLinkElement | null;
 
 
-export default () => {
+export default () => {  
   const runtimeConfig = useRuntimeConfig()
   const baseURL = runtimeConfig.app.baseURL;
-  
-  let currentStyle = settingsLoad().selectedThemeStyle ?? undefined
-  let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
 
-  if (!currentStyle) {
-    if (prefersLight()) {
-      currentStyle = `${baseURL}themes/style/light.css`
-    } else {
-      currentStyle = `${baseURL}themes/style/dark.css`
-    }
-  }
+  let currentStyle = settingsLoad().selectedThemeStyle ?? (
+    prefersLight()
+      ? `${baseURL}themes/style/light.css`
+      : `${baseURL}themes/style/dark.css`
+  );
+
+  let currentLayout = settingsLoad().selectedThemeLayout ?? `${baseURL}themes/layout/gorb.css`
 
   if (styleLinkElement) {
     styleLinkElement.href = currentStyle;

utils/replyToMessage.ts

@@ -9,7 +9,7 @@ export default (element: HTMLDivElement, props: MessageProps) => {
 	const messageBox = document.getElementById("message-box") as HTMLDivElement;
 	if (messageBox) {
 		const div = document.createElement("div");
-		const messageReply = h(MessageReply, { author: getDisplayName(props.message.member), text: props.message.message || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		const messageReply = h(MessageReply, { author: getDisplayName(props.author), text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
 		messageBox.prepend(div);
 		render(messageReply, div);
 		const message = document.querySelector(`.message[data-message-id='${props.message.uuid}']`);