chore: CI thingy

the CI server was down during the last commit

README.md

@@ -1,5 +1,7 @@
 # Nuxt Minimal Starter
 
+
+
 Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
 
 ## Setup

app.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <Banner v-if="banner" />
-    <NuxtPage />
+    <NuxtPage :keepalive="true" />
   </div>
 </template>
 
@@ -12,6 +12,12 @@ const banner = useState("banner", () => false);
 </script>
 
 <style>
+:root {
+  --background-color: rgb(30, 30, 30);
+  --main-text-color: rgb(190, 190, 190);
+  --outline-border: 1px solid rgb(150, 150, 150);
+}
+
 html,
 body {
   font-family: Arial, Helvetica, sans-serif;
@@ -22,7 +28,7 @@ body {
 }
 
 *:focus-visible {
-	outline: 1px solid rgb(150, 150, 150);
+	outline: var(--outline-border);
 }
 
 a {

components/Button.vue

@@ -0,0 +1,44 @@
+<template>
+	<div @click="props.callback()" class="button" :class="props.variant + '-button'">
+		{{ props.text }}
+	</div>
+</template>
+
+<script lang="ts" setup>
+
+const props = defineProps<{
+	text: string,
+	callback: CallableFunction,
+	variant?: "normal" | "scary" | "neutral",
+}>();
+
+</script>
+
+<style scoped>
+.button {
+	cursor: pointer;
+
+	background-color: #b35719;
+	color: #ffffff;
+
+	padding: 0.7dvh 1.2dvw;
+	font-size: 1.1em;
+	transition: background-color 0.2s;
+
+	border-radius: 0.7rem;
+	text-decoration: none;
+	display: inline-block;
+}
+
+.scary-button {
+	background-color: red;
+}
+
+.neutral-button {
+	background-color: grey;
+}
+
+.button:hover {
+	background-color: #934410;
+}
+</style>

components/Channel.vue

@@ -1,11 +1,11 @@
 <template>
-  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
-	<NuxtLink class="channel-list-link" :href="props.href">
+	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container rounded-corners">
+  <div v-else class="channel-list-link-container rounded-corners" tabindex="0">
-	<NuxtLink class="channel-list-link" :href="props.href">
+	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
   </div>

components/InvitePopup.vue

@@ -20,7 +20,7 @@ const route = useRoute();
 
 async function generateInvite(): Promise<void> {
   const createdInvite: InviteResponse | undefined = await fetchWithApi(
-    `/servers/${route.params.serverId}/invites`,
+    `/guilds/${route.params.serverId}/invites`,
     { method: "POST", body: { custom_id: "oijewfoiewf" } }
   );
 

components/Message.vue

@@ -1,40 +1,37 @@
 <template>
-	<div v-if="props.type == 'normal'" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
+	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
 		<div class="left-column">
-			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username">
+			<img v-if="props.img" class="message-author-avatar" :src="props.img" :alt="username" />
 			<Icon v-else name="lucide:user" class="message-author-avatar" />
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username">
+				<span class="message-author-username" tabindex="0">
 					{{ username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
-					{{ messageDate }}
+					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text">
+			<div class="message-text" v-html="sanitized" tabindex="0"></div>
-				{{ text }}
-			</div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" class="message compact-message">
+	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
 		<div class="left-column">
-			<div>
+			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
-				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
+				{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
-					{{ messageDate }}
+			</span>
-				</span>
-			</div>
 		</div>
 		<div class="message-data">
-			<div class="message-text">
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
-				{{ text }}
-			</div>
 		</div>
 	</div>
 </template>
 
 <script lang="ts" setup>
+import DOMPurify from 'dompurify';
+import { parse } from 'marked';
+
 const props = defineProps<{
 	class?: string,
 	img?: string | null,
@@ -42,47 +39,35 @@ const props = defineProps<{
 	text: string,
 	timestamp: number,
 	format: "12" | "24",
-	type: "normal" | "compact",
+	type: "normal" | "grouped",
-	marginBottom: boolean
+	marginBottom: boolean,
+	last: boolean
 }>();
 
-const messageDate = ref<string>();
-
 const messageElement = ref<HTMLDivElement>();
 
 const dateHidden = ref<boolean>(true);
 
 const date = new Date(props.timestamp);
 
-console.log("Message.vue: message:", props.text);
+console.log("message:", props.text);
-console.log("Message.vue: message type:", props.type);
+console.log("author:", props.username);
 
-let dateHour = date.getHours();
+const sanitized = ref<string>();
-let dateMinute = date.getMinutes();
-if (props.format == "12") {
-	if (dateHour > 12) {
-		dateHour = dateHour - 12;
-		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} PM`
-	} else {
-		if (dateHour == 0) {
-			dateHour = 12;
-		}
-		messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute} ${dateHour >= 0 && dateHour < 13 ? "AM" : "PM"}`
-	}
-} else {
-	messageDate.value = `${dateHour}:${dateMinute < 10 ? "0" + dateMinute : dateMinute}`
-}
 
-onMounted(() => {
+onMounted(async () => {
+	const parsed = await parse(props.text, { gfm: true });
+	sanitized.value = DOMPurify.sanitize(parsed, { ALLOWED_TAGS: ["strong", "em", "br", "blockquote", "code", "ul", "ol", "li", "a", "h1", "h2", "h3", "h4", "h5", "h6"] });
+	console.log("adding listeners")
+	await nextTick();
 	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
-		console.log("mouse enter");
 		dateHidden.value = false;
 	});
 
 	messageElement.value?.addEventListener("mouseleave", (e: Event) => {
-		console.log("mouse leave");
 		dateHidden.value = true;
 	});
+	console.log("added listeners");
 });
 
 //function toggleTooltip(e: Event) {
@@ -96,12 +81,26 @@ onMounted(() => {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 1fr 19fr;
+	grid-template-columns: 2dvw 1fr;
 	align-items: center;
+	column-gap: 1dvw;
+	width: 100%;
 }
 
-.message-margin-bottom {
+.message:hover {
-	margin-bottom: 1dvh;
+	background-color: rgb(20, 20, 20);
+}
+
+.normal-message {
+	margin-top: 1dvh;
+}
+
+.grouped-message {
+	margin-top: .3em;
+}
+
+#last-message {
+	margin-bottom: 2dvh;
 }
 
 .message-metadata {
@@ -115,8 +114,8 @@ onMounted(() => {
 	margin-left: .5dvw;
 	display: flex;
 	flex-direction: column;
-	gap: 1dvh;
+	height: fit-content;
-	height: 100%;
+	width: 100%;
 }
 
 .message-author {
@@ -125,15 +124,15 @@ onMounted(() => {
 }
 
 .message-author-avatar {
-	height: 2.3em;
+	width: 100%;
-	width: 2.3em;
 	border-radius: 50%;
 }
 
 .left-column {
-	margin-right: .5dvw;
+	display: flex;
 	text-align: center;
-	align-content: center;
+	white-space: nowrap;
+	
 }
 
 .author-username {
@@ -147,10 +146,29 @@ onMounted(() => {
 	cursor: default;
 }
 
+.side-message-date {
+	font-size: .625em;
+	display: flex;
+	align-items: center;
+	align-content: center;
+}
+
 /*
 .message-date-tooltip {
 	height: 20px;;
 	width: 20px;
 }
 */
-</style>
+</style>
+
+<style module>
+.message-text ul, h1, h2, h3, h4, h5, h6 {
+	padding-top: 1dvh;
+	padding-bottom: 1dvh;
+	margin: 0;
+}
+
+.message-text ul  {
+	padding-left: 2dvw;
+}
+</style>

components/MessageArea.vue

@@ -1,12 +1,11 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<div v-for="(message, i) of messages">
+			<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
-				<Message :username="message.user.display_name ?? message.user.username"
+				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
-					:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
+				format="12" :type="messagesType[message.uuid]"
-					format="12" :type="messagesType[message.uuid]"
+				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-					:margin-bottom="messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal'" />
+				:last="i == messages.length - 1" />
-			</div>
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
@@ -21,64 +20,90 @@
 </template>
 
 <script lang="ts" setup>
-import type { MessageResponse } from '~/types/interfaces';
+import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';
 
 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();
 
 const messageTimestamps = ref<Record<string, number>>({});
-const messagesType = ref<Record<string, "normal" | "compact">>({});
+const messagesType = ref<Record<string, "normal" | "grouped">>({});
+const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
 
 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
 	{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
 );
-if (messagesRes) {
-	messagesRes.reverse();
-	console.log("messages res:", messagesRes.map(msg => msg.message));
-	const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
-	for (const message of messagesRes) {
-		messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
 
-		console.log("message:", message.message);
+const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
-		const firstByUser = firstMessageByUsers.value[message.user.uuid];
+const previousMessage = ref<MessageResponse>();
-		if (firstByUser) {
+
-			console.log("first by user exists");
+function groupMessage(message: MessageResponse, options?: { prevMessage?: MessageResponse, reverse?: boolean }) {
-			if (message.user.uuid != firstByUser.user.uuid) {
+	messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
-				console.log("message is by new user, setting their first message")
+	console.log("message:", message.message);
-				firstMessageByUsers.value[message.user.uuid] = message;
+	console.log("author:", message.user.username, `(${message.user.uuid})`);
-				console.log("RETURNING FALSE");
+
-				messagesType.value[message.uuid] = "normal";
+	if (!previousMessage.value || previousMessage.value && message.user.uuid != previousMessage.value.user.uuid) {
-				continue;
+		console.log("no previous message or author is different than last messsage's");
-			}
+		messagesType.value[message.uuid] = "normal";
-		} else {
+		previousMessage.value = message;
-			console.log("first by user doesn't exist");
+		console.log("set previous message to:", previousMessage.value.message);
-			console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
+		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
+		firstMessageByUsers.value[message.user.uuid] = message;
+		return;
+	}
+
+
+	const firstByUser = firstMessageByUsers.value[message.user.uuid];
+	if (firstByUser) {
+		console.log("first by user exists:", firstByUser);
+		if (message.user.uuid != firstByUser.user.uuid) {
+			console.log("message is by new user, setting their first message")
 			firstMessageByUsers.value[message.user.uuid] = message;
 			console.log("RETURNING FALSE");
 			messagesType.value[message.uuid] = "normal";
-			continue;
+			return;
 		}
-		const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference;
+	} else {
-		const prevTimestamp = messageTimestamps.value[firstByUser.uuid];
+		console.log("first by user doesn't exist");
-		const timestamp = messageTimestamps.value[message.uuid];
+		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`);
-		console.log("first message timestamp:", prevTimestamp);
+		firstMessageByUsers.value[message.user.uuid] = message;
-		console.log("timestamp:", timestamp);
+		console.log("RETURNING FALSE");
-		const diff = (timestamp - prevTimestamp);
+		messagesType.value[message.uuid] = "normal";
-		console.log("min diff:", messageGroupingMaxDifference);
+		return;
-		console.log("diff:", diff);
-		const lessThanMax = diff <= messageGroupingMaxDifference;
-		console.log("group?", lessThanMax);
-		if (!lessThanMax) {
-			console.log("diff exceeds max");
-			console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
-			firstMessageByUsers.value[message.user.uuid] = message;
-			messagesType.value[message.uuid] = "normal";
-			continue;
-		}
-		console.log("RETURNING " + lessThanMax.toString().toUpperCase());
-		messagesType.value[message.uuid] = "compact";
 	}
+	
+	const prevTimestamp = messageTimestamps.value[firstByUser.uuid];
+	const timestamp = messageTimestamps.value[message.uuid];
+	
+	console.log("first message timestamp:", prevTimestamp);
+	console.log("timestamp:", timestamp);
+	const diff = Math.abs(timestamp - prevTimestamp);
+	console.log("min diff:", messageGroupingMaxDifference);
+	console.log("diff:", diff);
+	const lessThanMax = diff <= messageGroupingMaxDifference;
+	console.log("group?", lessThanMax);
+	if (!lessThanMax) {
+		console.log("diff exceeds max");
+		console.log(`setting first post by user ${message.user.username} to "${message.message}" with timestamp ${messageTimestamps.value[message.uuid]}`)
+		firstMessageByUsers.value[message.user.uuid] = message;
+		messagesType.value[message.uuid] = "normal";
+		return;
+	}
+	console.log("RETURNING " + lessThanMax.toString().toUpperCase());
+	messagesType.value[message.uuid] = "grouped";
+}
+
+if (messagesRes) {
+	messagesRes.reverse();
+	console.log("messages res:", messagesRes.map(msg => msg.message));
+	for (const message of messagesRes) {
+		groupMessage(message);
+	}
+}
+
+function pushMessage(message: MessageResponse) {
+	groupMessage(message);
+	messages.value.push(message);
 }
 
 const messages = ref<MessageResponse[]>([]);
@@ -92,6 +117,7 @@ if (messagesRes) messages.value = messagesRes;
 const accessToken = useCookie("access_token").value;
 const apiBase = useCookie("api_base").value;
 const { refresh } = useAuth();
+const { fetchMessages } = useApi();
 
 let ws: WebSocket;
 
@@ -115,12 +141,14 @@ if (accessToken && apiBase) {
 		console.log("event data:", event.data);
 		console.log("message uuid:", event.data.uuid);
 		const parsedData = JSON.parse(event.data);
-		messageTimestamps.value[parsedData.uuid] = uuidToTimestamp(parsedData.uuid);
+		
-		messages.value.push(parsedData);
+		console.log("parsed message type:", messagesType.value[parsedData.uuid]);
+		console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
+		pushMessage(parsedData);
 		await nextTick();
 		if (messagesElement.value) {
 			console.log("scrolling to bottom");
-			scrollToBottom(messagesElement);
+			scrollToBottom(messagesElement.value);
 		}
 	});
 
@@ -139,20 +167,80 @@ function sendMessage(e: Event) {
 	}
 }
 
+const route = useRoute();
+
 onMounted(async () => {
+	if (import.meta.server) return;
 	if (messagesElement.value) {
-		scrollToBottom(messagesElement);
+		scrollToBottom(messagesElement.value);
+		let fetched = false;
+		const amount = messages.value.length;
+		let offset = messages.value.length;
+		messagesElement.value.addEventListener("scroll", async (e) => {
+			if (e.target) {
+				const target = e.target as HTMLDivElement;
+				if (target.scrollTop <= target.scrollHeight * 0.1) {
+					if (fetched) return;
+					fetched = true;
+					console.log("scroll height is at 10% or less");
+					//console.log("current oldest:", currentOldestMessage);
+					const olderMessages = await fetchMessages(route.params.channelId as string, { amount, offset });
+					if (olderMessages) {
+						olderMessages.reverse();
+						console.log("older messages:", olderMessages);
+						if (olderMessages.length == 0) return;
+						olderMessages.reverse();
+						for (const [i, oldMessage] of olderMessages.entries()) {
+							console.log("old message:", oldMessage);
+							messages.value.unshift(oldMessage);
+							for (const message of messages.value) {
+								groupMessage(message);
+							}
+						}
+						offset += offset;
+					}
+				} else {
+					fetched = false;
+				}
+			}
+		});
 	}
 });
 
+let scrollPosition = ref<Record<string, ScrollPosition>>({});
+
+onActivated(async () => {
+	await nextTick();
+	console.log("scroll activated");
+	if (messagesElement.value) {
+		if (scrollPosition.value[route.params.channelId as string]) {
+			console.log("saved scroll position:", scrollPosition.value);
+			setScrollPosition(messagesElement.value, scrollPosition.value[route.params.channelId as string]);
+			console.log("scrolled to saved scroll position");
+		} else {
+			scrollToBottom(messagesElement.value);
+			console.log("scrolled to bottom");
+		}
+	}
+});
+
+const router = useRouter();
+
+router.beforeEach((to, from, next) => {
+	console.log("scroll hi");
+  	if (messagesElement.value && from.params.channelId) {
+    	scrollPosition.value[from.params.channelId as string] = getScrollPosition(messagesElement.value)
+		console.log("set saved scroll position to:", scrollPosition.value);
+  	}
+  	next()
+})
+
 </script>
 
 <style scoped>
 #message-area {
 	display: grid;
-	grid-template-columns: 1fr;
 	grid-template-rows: 8fr 1fr;
-	justify-content: space-between;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
@@ -167,7 +255,8 @@ onMounted(async () => {
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
-	margin-top: 2dvh;
+	margin-left: 1dvw;
+	margin-right: 1dvw;
 }
 
 #message-form {
@@ -188,7 +277,8 @@ onMounted(async () => {
 	overflow-y: scroll;
 	display: flex;
 	flex-direction: column;
-	gap: 1dvh;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
 }
 
 #submit-button {

components/Settings/AppSettings/Appearance.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>hi</h1>
+    <h5>TEST</h5>
+    <h5>TEST</h5>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/Settings/AppSettings/Keybinds.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Keybinds (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/Settings/AppSettings/Language.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Language (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/Settings/AppSettings/Notifications.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Notifications (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/Settings/UserSettings/Account.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <h1>My Account</h1>
+
+    <div class="profile-container">
+      <div class="user-data-fields" v-if="user">
+        <p class="subtitle">AVATAR</p>
+        <Button text="Change Avatar" :callback="changeAvatar" style="margin-right: 0.8dvw;"></Button>
+        <Button text="Remove Avatar" :callback="removeAvatar" variant="neutral"></Button>
+        
+        <label for="profile-display-name-input" class="subtitle">DISPLAY NAME</label>
+        <input id="profile-display-name-input" class="profile-data-input" type="text" v-model="user.display_name" placeholder="Enter display name" />
+        <label for="profile-username-input" class="subtitle">USERNAME</label>
+        <input id="profile-username-input" class="profile-data-input" type="text" v-model="user.username" placeholder="Enter username" />
+        <label for="profile-pronouns-input" class="subtitle">PRONOUNS</label>
+        <input id="profile-pronouns-input" class="profile-data-input" type="text" v-model="user.pronouns" placeholder="Enter pronouns" />
+        <label for="profile-about-me-input" class="subtitle">ABOUT ME</label>
+        <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.about" placeholder="About me" />
+
+        <br>
+        <Button style="margin-top: 1dvh" text="Save Changes" :callback="saveChanges"></Button>
+      </div>
+
+      <UserPopup v-if="user" :user="user" class="profile-popup"></UserPopup>
+    </div>
+
+    <h2 style="margin-top: 8duservh">Password (and eventually authenticator)</h2>
+    <Button text="Reset Password (tbd)" :callback=resetPassword></Button>
+    
+    <h2>Account Deletion</h2>
+    <Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/Button.vue';
+import type { UserResponse } from '~/types/interfaces';
+
+const { fetchUser } = useAuth();
+
+const user: UserResponse | undefined = await fetchUser()
+if (!user) {
+  alert("could not fetch user info, aborting :(")
+}
+
+let newPfpFile: File;
+
+const saveChanges = async () => {
+  if (!user) return;
+  
+  const formData = new FormData()
+  
+  if (newPfpFile) {
+    formData.append("avatar", newPfpFile)
+  }
+  
+  const bytes = new TextEncoder().encode(JSON.stringify({
+    display_name: user.display_name,
+    username: user.username,
+    pronouns: user.pronouns,
+    about: user.about,
+  }));
+  formData.append('json', new Blob([bytes], { type: 'application/json' }));
+  
+  try {
+    await fetchWithApi('/me', {
+      method: 'PATCH',
+      body: formData
+    })
+
+    alert('success!!')
+  } catch (error: any) {
+    if (error?.response?.status !== 200) {
+      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
+    }
+  }
+};
+
+
+const removeAvatar = async () => {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+const changeAvatar = async () => {
+  if (!user) return;
+
+  const input = document.createElement('input');
+  input.type = 'file';
+  input.accept = 'image/*';
+
+  input.addEventListener("change", (e: Event) => {
+    if (input.files?.length && input.files.length > 0) {
+      const file = input.files[0];
+      if (!file) return;
+
+      newPfpFile = file
+      
+      const reader = new FileReader();
+      reader.addEventListener("onload", () => {
+        if (reader.result && typeof reader.result === 'string') {
+          user.avatar = reader.result;
+        }
+      });
+      reader.readAsDataURL(file);
+    }
+  })
+
+  input.click()
+}
+
+const resetPassword = async () => {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+const deleteAccount = async () => {
+  alert("TBD")
+}
+</script>
+
+<style scoped>
+.profile-container {
+  display: flex;
+}
+
+.subtitle {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 1.5dvh 0 0.5dvh 0.25dvw;
+}
+
+.user-data-fields {
+  min-width: 35dvw;
+  max-width: 35dvw;
+}
+
+.profile-data-input {
+  min-width: 30dvw;
+  margin: 0.07dvh;
+  padding: 0.1dvh 0.7dvw;
+  height: 2.5em;
+  font-size: 1em;
+  border-radius: 8px;
+  border: none;
+  color: white;
+  background-color: #54361b;
+}
+
+.profile-popup {
+  margin-left: 2dvw;
+}
+</style>

components/Settings/UserSettings/Connections.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Connections (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/Settings/UserSettings/Devices.vue

@@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Devices (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>

components/Settings/UserSettings/Privacy.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <h1>Privacy (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/Button.vue';
+</script>
+
+<style scoped>
+
+</style>

components/UserPopup.vue

@@ -0,0 +1,85 @@
+<template>
+  <div id="profile-popup">
+    <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
+    <div id="cover-colour"></div>
+    <div id="main-body">
+      <p id="display-name">
+        <strong>{{ props.user.display_name }}</strong>
+      </p>
+      <p id="username-and-pronouns">
+        {{ props.user.username }}
+        <span v-if="props.user.pronouns"> - {{ props.user.pronouns }}</span>
+      </p>
+      <div id="about-me" v-if="props.user.about">
+        {{ props.user.about }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UserResponse } from '~/types/interfaces';
+
+const { fetchMembers } = useApi();
+
+const props = defineProps<{
+	user: UserResponse
+}>();
+
+</script>
+
+<style scoped>
+#profile-popup {
+  min-width: 300px;
+  max-width: 300px;
+  border-radius: 8px;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+}
+
+#cover-colour {
+  border-radius: 12px 12px 0 0;
+  min-height: 60px;
+  background-color: #442505;
+}
+
+#main-body {
+  border-radius: 0 0 12px 12px;
+  padding: 12px;
+  min-height: 280px;
+  background-color: #4b3018;
+  overflow-wrap: break-word;
+  hyphens: manual;
+}
+
+#avatar {
+  width: 96px;
+  height: 96px;
+  border: 5px solid #4b3018;
+  border-radius: 100%;
+  position: absolute;
+  left: 16px;
+  top: 16px;
+}
+
+#display-name {
+  margin-top: 60px;
+  margin-bottom: 0;
+  font-size: 28px;
+}
+
+#username-and-pronouns {
+  margin: 2px;
+  font-size: 16px;
+}
+
+#about-me {
+  background-color: #34200f;
+  border-radius: 12px;
+
+  margin-top: 32px;
+  padding: 16px;
+  font-size: 16px;
+}
+</style>

composables/api.ts

@@ -0,0 +1,56 @@
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
+
+export const useApi = () => {
+	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
+		return await fetchWithApi(`/guilds`);
+	}
+	
+	async function fetchGuild(guildId: string): Promise<GuildResponse | undefined> {
+		return await fetchWithApi(`/guilds/${guildId}`);
+	}
+
+	async function fetchChannels(guildId: string): Promise<ChannelResponse[] | undefined> {
+		return await fetchWithApi(`/guilds/${guildId}/channels`);
+	}
+
+	async function fetchChannel(channelId: string): Promise<ChannelResponse | undefined> {
+		return await fetchWithApi(`/channels/${channelId}`)
+	}
+
+	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[] | undefined> {
+		return await fetchWithApi(`/guilds/${guildId}/members`);
+	}
+
+	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {
+		return await fetchWithApi(`/guilds/${guildId}/members/${memberId}`);
+	}
+
+	async function fetchUsers() {
+		return await fetchWithApi(`/users`);
+	}
+
+	async function fetchUser(userId: string) {
+		return await fetchWithApi(`/users/${userId}`);
+	}
+
+	async function fetchMessages(channelId: string, options?: { amount?: number, offset?: number }): Promise<MessageResponse[] | undefined> {
+		return await fetchWithApi(`/channels/${channelId}/messages`, { query: { amount: options?.amount ?? 100, offset: options?.offset ?? 0 } });
+	}
+
+	async function fetchMessage(channelId: string, messageId: string): Promise<MessageResponse | undefined> {
+		return await fetchWithApi(`/channels/${channelId}/messages/${messageId}`);
+	}
+
+	return {
+		fetchGuilds,
+		fetchGuild,
+		fetchChannels,
+		fetchChannel,
+		fetchMembers,
+		fetchMember,
+		fetchUsers,
+		fetchUser,
+		fetchMessages,
+		fetchMessage
+	}
+}

composables/auth.ts

@@ -75,7 +75,7 @@ export const useAuth = () => {
   async function fetchUser() {
     if (!accessToken.value) return;
     console.log("fetchuser access token:", accessToken.value);
-    const res = await fetchWithApi("/users/me") as UserResponse;
+    const res = await fetchWithApi("/me") as UserResponse;
     user.value = res;
     return user.value;
   }
@@ -88,6 +88,20 @@ export const useAuth = () => {
     return user.value;
   }
 
+  
+  // as in email the password link
+  async function resetPassword() {
+    // ...
+  }
+
+  async function disableAccount() {
+    // ...
+  }
+
+  async function deleteAccount() {
+    // ...
+  }
+
   return {
     accessToken,
     register,

layouts/auth.vue

@@ -51,28 +51,17 @@
 
 <script lang="ts" setup>
 import { FetchError } from 'ofetch';
+import type { StatsResponse } from '~/types/interfaces';
 
 const instanceUrl = ref<string | null | undefined>(null);
 const instanceUrlInput = ref<string>();
 const instanceError = ref<string>();
-const requestUrl = useRequestURL();
+const apiVersion = useRuntimeConfig().public.apiVersion;
 const apiBase = useCookie("api_base");
-const gorbTxtError = ref<string>("");
+const registrationEnabled = useState("registrationEnabled", () => true);
 
 const auth = useAuth();
 
-const { status, data: gorbTxt } = await useFetch(`${requestUrl.protocol}//${requestUrl.host}/.well-known/gorb.txt`, { responseType: "text" });
-if (status.value == "success" && gorbTxt.value) {
-	console.log("got gorb.txt:", gorbTxt.value);
-	const parsed = parseWellKnown(gorbTxt.value as string);
-	if (parsed.ApiBaseUrl) {
-		apiBase.value = parsed.ApiBaseUrl;
-		console.log("set apiBase to:", parsed.ApiBaseUrl);
-	}
-} else {
-	gorbTxtError.value = "Failed to find that instance.";
-}
-
 onMounted(async () => {
 	const cookie = useCookie("instance_url").value;
 	instanceUrl.value = cookie;
@@ -92,12 +81,17 @@ async function selectInstance(e: Event) {
 			const parsed = parseWellKnown(res._data as string);
 			console.log("parsed:", parsed);
 			if (parsed.ApiBaseUrl) {
-				apiBase.value = parsed.ApiBaseUrl;
+				apiBase.value = `${parsed.ApiBaseUrl}/v${apiVersion}`;
 				console.log("set apiBase to:", parsed.ApiBaseUrl);
 				const origin = new URL(res.url).origin;
 				instanceUrl.value = origin;
 				useCookie("instance_url").value = origin;
 				console.log("set instance url to:", origin);
+				const { status, data, error } = await useFetch<StatsResponse>(`${apiBase.value}/stats`);
+				if (status.value == "success" && data.value) {
+					registrationEnabled.value = data.value.registration_enabled;
+					console.log("set registration enabled value to:", data.value.registration_enabled);
+				}
 				return;
 			}
 			instanceError.value = "That URL is not a valid instance.";

layouts/client.vue

@@ -11,7 +11,7 @@
 				<Icon name="lucide:house" class="white" size="2rem" />
 			</NuxtLink>
 			<div id="servers-list">
-				<NuxtLink v-for="server of servers" :href="`/servers/${server.uuid}`">
+				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
 					<Icon name="lucide:server" class="white" size="2rem" />
 				</NuxtLink>
 			</div>
@@ -23,10 +23,9 @@
 <script lang="ts" setup>
 import type { GuildResponse } from '~/types/interfaces';
 
-
 const loading = useState("loading", () => false);
 
-const servers: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("servers:", servers);
@@ -124,30 +123,6 @@ const members = [
 	grid-row: 1;
 }
 
-#test {
-	grid-column: 3;
-	grid-row: 1;
-}
-
-.member-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-#message-history,
-#members-list {
-	padding-top: 3dvh;
-}
-
-#message-history {
-	display: flex;
-	flex-direction: column;
-	justify-content: space-between;
-	padding-left: 3dvw;
-	padding-right: 3dvw;
-}
-
 #left-column {
 	display: flex;
 	flex-direction: column;

middleware/auth.global.ts

@@ -3,6 +3,25 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 	const loading = useState("loading");
 	const accessToken = useCookie("access_token").value;
 	if (["/login", "/register"].includes(to.path)) {
+		console.log("path is login or register");
+		const apiBase = useCookie("api_base");
+		console.log("apiBase gotten:", apiBase.value);
+		if (!apiBase.value) {
+			const requestUrl = useRequestURL();
+			console.log("request url:", requestUrl.href);
+			const apiVersion = useRuntimeConfig().public.apiVersion;
+			console.log("api version:", apiVersion);
+			console.log("apiBase not set");
+			const { status, data: gorbTxt } = await useFetch(`${requestUrl.protocol}//${requestUrl.host}/.well-known/gorb.txt`, { responseType: "text" });
+			if (status.value == "success" && gorbTxt.value) {
+				console.log("got gorb.txt:", gorbTxt.value);
+				const parsed = parseWellKnown(gorbTxt.value as string);
+				if (parsed.ApiBaseUrl) {
+					apiBase.value = `${parsed.ApiBaseUrl}/v${apiVersion}`;
+					console.log("set apiBase to:", parsed.ApiBaseUrl);
+				}
+			}
+		}
 		if (accessToken) {
 			return await navigateTo("/");
 		}

middleware/server.ts

@@ -0,0 +1,15 @@
+import type { ChannelResponse } from "~/types/interfaces";
+
+export default defineNuxtRouteMiddleware(async (to, from) => {
+	const { fetchChannels } = useApi();
+
+	const guildId = to.params.serverId as string;
+
+	const channels: ChannelResponse[] | undefined = await fetchChannels(guildId);
+	console.log("channels:", channels);
+
+	if (channels && channels.length > 0) {
+		console.log("wah");
+		return await navigateTo(`/servers/${guildId}/channels/${channels[0].uuid}`, { replace: true });
+	}
+})

package.json

@@ -14,6 +14,8 @@
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
+    "dompurify": "^3.2.6",
+    "marked": "^15.0.12",
     "nuxt": "^3.17.0",
     "pinia": "^3.0.2",
     "pinia-plugin-persistedstate": "^4.2.0",

pages/login.vue

@@ -43,6 +43,7 @@ const registrationEnabled = ref<boolean>(true);
 const apiBase = useCookie("api_base");
 
 if (apiBase.value) {
+	console.log("apiBase:", apiBase.value);
 	const statsUrl = new URL("/stats", apiBase.value).href;
 	const { status, data } = await useFetch<StatsResponse>(statsUrl);
 	if (status.value == "success" && data.value) {
@@ -62,9 +63,9 @@ async function formLogin(e: Event) {
 		console.log("logged in");
 		if (query.redirect_to) {
 			console.log("redirecting to:", query.redirect_to);
-			return await navigateTo(query.redirect_to);
+			return await navigateTo(query.redirect_to, { replace: true });
 		}
-		return await navigateTo("/");
+		return await navigateTo("/", { replace: true });
 	} catch (error) {
 		console.error("Error logging in:", error);
 	}

pages/register.vue

@@ -47,14 +47,17 @@ definePageMeta({
   layout: "auth"
 })
 
-const instanceUrl = useCookie("instance_url").value;
+const registrationEnabled = useState("registrationEnabled", () => true);
-const registrationEnabled = ref<boolean>(false);
 
-if (instanceUrl) {
+console.log("wah");
-	const statsUrl = new URL("/stats", instanceUrl).href;
+console.log("weoooo")
-	const { status, data, error } = await useFetch<StatsResponse>(statsUrl);
+const apiBase = useCookie("api_base");
+console.log("apiBase:", apiBase.value);
+if (apiBase.value) {
+	const { status, data, error } = await useFetch<StatsResponse>(`${apiBase.value}/stats`);
 	if (status.value == "success" && data.value) {
 		registrationEnabled.value = data.value.registration_enabled;
+		console.log("set registration enabled value to:", data.value.registration_enabled);
 	}
 }
 
@@ -92,12 +95,6 @@ const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
 const loginUrl = `/login?${searchParams}`
 
-onMounted(() => {
-  if (auth.accessToken.value) {
-    //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
-  }
-});
-
 /*
 watch(() => form.username, (newValue) => {
   console.log("username change:", newValue);

pages/servers/[serverId]/channels/[channelId].vue

@@ -5,7 +5,7 @@
 				<h3>
 					{{ server?.name }}
 					<span>
-						<button @click="showServerSettings">
+						<button @click="showGuildSettings">
 							<Icon name="lucide:settings" />
 						</button>
 					</span>
@@ -20,15 +20,17 @@
 			<div id="channels-list">
 				<Channel v-for="channel of channels" :name="channel.name"
 					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-					:href="`/guilds/${route.params.serverId}/channels/${channel.uuid}`" />
+					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
-		<div id="members-list">
+		<div id="members-container">
-			<div class="member-item" v-for="member of members">
+			<div id="members-list">
-				<img v-if="member.avatar" :src="member.avatar" :alt="member.displayName" height="30" />
+				<div class="member-item" v-for="member of members" tabindex="0">
-				<Icon v-else name="lucide:user" size="30" />
+					<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
-				<span class="member-display-name">{{ member.displayName }}</span>
+					<Icon v-else class="member-avatar" name="lucide:user" />
+					<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
+				</div>
 			</div>
 		</div>
 	</NuxtLayout>
@@ -40,7 +42,7 @@ const route = useRoute();
 
 const loading = useState("loading");
 
-const channelUrlPath = `/channels/${route.params.channelId}`;
+const channelUrlPath = `channels/${route.params.channelId}`;
 
 const server = ref<GuildResponse | undefined>();
 const channels = ref<ChannelResponse[] | undefined>();
@@ -52,68 +54,25 @@ import type { ChannelResponse, GuildResponse, MessageResponse } from "~/types/in
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
-const members = [
+
-	{
+const { fetchMembers } = useApi();
-		id: "3287484395",
+const members = await fetchMembers(route.params.serverId as string);
-		displayName: "SauceyRed",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "JustTemmie",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "GOIN!!!!!!",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "Hatsune Miku Official",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "Hatsune Miku Official",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "Hatsune Miku Official",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed",
-		avatar: ""
-	},
-	{
-		id: "3287484395",
-		displayName: "SauceyRed",
-		avatar: ""
-	}
-];
 
 onMounted(async () => {
 	console.log("channelid: set loading to true");
-	server.value = await fetchWithApi(`servers/${route.params.serverId}`);
+	const guildUrl = `guilds/${route.params.serverId}`;
+	server.value = await fetchWithApi(guildUrl);
 
-	channels.value = await fetchWithApi(`/channels`);
+	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);
-	channel.value = await fetchWithApi(route.path);
+	channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
 	console.log("channel:", channel.value);
 
 	console.log("channelid: channel:", channel);
 	console.log("channelid: set loading to false");
 });
 
-function showServerSettings() { }
+function showGuildSettings() { }
 
 function toggleInvitePopup(e: Event) {
 	e.preventDefault();
@@ -122,17 +81,6 @@ function toggleInvitePopup(e: Event) {
 </script>
 
 <style>
-.member-item {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	margin-top: .5em;
-	margin-bottom: .5em;
-}
-
-#members-list {
-	padding-top: 3dvh;
-}
 
 #middle-left-column {
 	padding-left: 1dvw;
@@ -140,16 +88,48 @@ function toggleInvitePopup(e: Event) {
 	border-right: 1px solid rgb(70, 70, 70);
 }
 
-#members-list {
+#members-container {
+	padding-top: 1dvh;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	border-left: 1px solid rgb(70, 70, 70);
 }
 
+#members-list {
+	display: flex;
+	flex-direction: column;
+	overflow-y: scroll;
+	padding-left: 1dvw;
+	padding-right: 1dvw;
+	margin-top: 1dvh;
+}
+
+.member-item {
+	display: grid;
+	grid-template-columns: 2dvw 1fr;
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: 1em;
+	align-items: center;
+	text-align: left;
+	
+}
+
 #channels-list {
 	display: flex;
 	flex-direction: column;
 	gap: 1dvh;
 }
 
+.member-avatar {
+	height: 2.3em;
+	width: 2.3em;
+	border-radius: 50%;
+}
+
+.member-display-name {
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
 </style>

pages/servers/[serverId]/index.vue

@@ -5,8 +5,9 @@
 </template>
 
 <script lang="ts" setup>
-const server = await fetchWithApi(`/guilds/${useRoute().params.serverId}`);
+definePageMeta({
-console.log("server:", server);
+	middleware: "server"
+});
 
 </script>
 

pages/settings.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="settings-page-container">
+    <div id="settings-page">
+      <div id="sidebar">
+        <h4>(Search bar here)</h4>
+        <ul>
+          <div v-for="category in categories" :key="category.displayName">
+            <h2>{{ category.displayName }}</h2>
+            <li v-for="page in category.pages" :key="page.displayName" @click="selectCategory(page)"
+              :class="{ 'sidebar-focus': selectedPage === page.displayName }">
+              {{ page.displayName }}
+            </li>
+            <span class="spacer"></span>
+          </div>
+
+          <Button text="Log Out" :callback=logout variant="scary"></Button>
+        </ul>
+      </div>
+      <div id="sub-page">
+        <component :is="currentPage.pageData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import Button from '~/components/Button.vue';
+
+const { logout } = useAuth()
+
+interface Page {
+  displayName: string;
+  pageData: any; // is actually Component but TS is yelling at me :(
+}
+  
+interface Category {
+  displayName: string;
+  pages: Page[];
+}
+
+import Account from '~/components/Settings/UserSettings/Account.vue';
+import Privacy from '~/components/Settings/UserSettings/Privacy.vue';
+import Devices from '~/components/Settings/UserSettings/Devices.vue';
+import Connections from '~/components/Settings/UserSettings/Connections.vue';
+
+import Appearance from '~/components/Settings/AppSettings/Appearance.vue';
+import Notifications from '~/components/Settings/AppSettings/Notifications.vue';
+import Keybinds from '~/components/Settings/AppSettings/Keybinds.vue';
+import Language from '~/components/Settings/AppSettings/Language.vue';
+
+const settingsCategories = {
+  userSettings: {
+    displayName: "User Settings",
+    pages: [
+      { displayName: "My Account", pageData: Account },
+      { displayName: "Privacy", pageData: Privacy },
+      { displayName: "Devices", pageData: Devices },
+      { displayName: "Connections", pageData: Connections },
+    ]
+  },
+  appSettings: {
+    displayName: "App Settings",
+    pages: [
+      { displayName: "Appearance", pageData: Appearance },
+      { displayName: "Notifications", pageData: Notifications },
+      { displayName: "Keybinds", pageData: Keybinds },
+      { displayName: "Language", pageData: Language },
+    ]
+  },
+};
+
+const categories = Object.values(settingsCategories);
+
+let currentPage = ref(categories[0].pages[0]);
+let selectedPage = ref(currentPage.value.displayName); // used to highlight the current channel
+
+function selectCategory(page: Page) {
+  currentPage.value = page;
+  selectedPage.value = page.displayName;
+};
+
+</script>
+
+<style scoped>
+#settings-page-container {
+  height: 100%;
+  align-content: center;
+  overflow-y: hidden;
+  margin: 0;
+}
+
+#settings-page {
+  height: 100vh;
+  display: flex;
+}
+
+#sidebar {
+  min-width: 25dvw;
+  max-width: 25dvw;
+  background-color: #2f3136;
+  color: white;
+  padding: 1dvh 1dvw;
+  margin-left: auto;
+
+  overflow-y: auto;
+  height: 100vh;
+}
+
+#sidebar h2 {
+  font-size: 0.95em;
+  padding: 0 0.8dvw;
+}
+
+#sidebar ul {
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+}
+
+#sidebar li {
+  border-radius: 8px;
+  padding: 0.8dvh 0.8dvw;
+  font-size: 1.4em;
+  cursor: pointer;
+  transition: background-color 0.3s;
+}
+
+.sidebar-focus {
+  background-color: #383B41;
+}
+
+#sidebar li:hover {
+  background-color: #40444b;
+}
+
+#sub-page {
+  flex-grow: 1;
+  min-width: 70dvw;
+  max-width: 70dvw;
+  padding-left: 1.5rem;
+  margin-right: auto;
+
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.spacer {
+  height: 0.2dvh;
+  display: block;
+  margin: 0.8dvh 1dvw;
+  background-color: #2c2e32;
+}
+
+/* applies to child pages too */
+:deep(h5) {
+  color: red;
+}
+</style>

pnpm-lock.yaml

@@ -20,6 +20,12 @@ importers:
       '@pinia/nuxt':
         specifier: 0.11.0
         version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
+      dompurify:
+        specifier: ^3.2.6
+        version: 3.2.6
+      marked:
+        specifier: ^15.0.12
+        version: 15.0.12
       nuxt:
         specifier: ^3.17.0
         version: 3.17.0(@netlify/blobs@8.2.0)(@parcel/watcher@2.5.1)(@types/node@22.15.3)(db0@0.3.2)(eslint@9.25.1(jiti@2.4.2))(ioredis@5.6.1)(lightningcss@1.29.2)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.40.1)(terser@5.39.0)(typescript@5.8.3)(vite@6.3.3(@types/node@22.15.3)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.1))(yaml@2.7.1)
@@ -1199,6 +1205,9 @@ packages:
   '@types/triple-beam@1.3.5':
     resolution: {integrity: sha512-6WaYesThRMCl19iryMYP7/x2OVgCtbIVflDGFpWnb9irXI3UjYE4AzmYuiUKY1AJstGijoY+MgUszMgRxIYTYw==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/yauzl@2.10.3':
     resolution: {integrity: sha512-oJoftv0LSuaDZE3Le4DbKX+KS9G36NzOeSap90UIK0yMA/NhKJhqlSGtNDORNRaIbQfzjXDrQa0ytJ6mNRGz/Q==}
 
@@ -2113,6 +2122,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.2.6:
+    resolution: {integrity: sha512-/2GogDQlohXPZe6D6NOgQvXLPSYBqIWMnZ8zzOhn09REE4eyAzb+Hed3jhoM9OkuaJ8P6ZGTTVWQKAi8ieIzfQ==}
+
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
@@ -3092,6 +3104,11 @@ packages:
     resolution: {integrity: sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==}
     engines: {node: '>=8'}
 
+  marked@15.0.12:
+    resolution: {integrity: sha512-8dD6FusOQSrpv9Z1rdNMdlSgQOIP880DHqnohobOmYLElGEqAL/JvxvuxZO16r4HtjTlfPRDC1hbvxC9dPN2nA==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   math-intrinsics@1.1.0:
     resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
     engines: {node: '>= 0.4'}
@@ -6094,6 +6111,9 @@ snapshots:
 
   '@types/triple-beam@1.3.5': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/yauzl@2.10.3':
     dependencies:
       '@types/node': 22.15.3
@@ -7082,6 +7102,10 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.2.6:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
@@ -8170,6 +8194,8 @@ snapshots:
     dependencies:
       semver: 6.3.1
 
+  marked@15.0.12: {}
+
   math-intrinsics@1.1.0: {}
 
   mdn-data@2.0.28: {}

types/interfaces.ts

@@ -23,6 +23,14 @@ export interface GuildResponse {
     member_count: number
 }
 
+export interface GuildMemberResponse {
+	uuid: string,
+	nickname: string,
+	user_uuid: string,
+	guild_uuid: string,
+	user: UserResponse
+}
+
 export interface ChannelResponse {
 	uuid: string,
 	guild_uuid: string,
@@ -50,6 +58,8 @@ export interface UserResponse {
 	username: string,
 	display_name: string | null,
 	avatar: string | null,
+	pronouns: string | null,
+	about: string | null,
 	email?: string,
 	email_verified?: boolean
   }
@@ -62,3 +72,14 @@ export interface StatsResponse {
     email_verification_required: boolean,
     build_number: string
 }
+
+export interface ScrollPosition {
+	scrollHeight: number,
+	scrollWidth: number,
+	scrollTop: number,
+	scrollLeft: number
+	offsetHeight: number,
+	offsetWidth: number,
+	offsetTop: number,
+	offsetLeft: number
+}

utils/fetchMember.ts

@@ -1,6 +0,0 @@
-import type { UserResponse } from "~/types/interfaces"
-
-export default async (serverId: string, memberId: string): Promise<UserResponse> => {
-	const user = await fetchWithApi(`/guilds/${serverId}/members/${memberId}`) as UserResponse;
-	return user;
-}

utils/fetchUser.ts

@@ -1,6 +0,0 @@
-import type { UserResponse } from "~/types/interfaces"
-
-export default async (serverId: string, userId: string): Promise<UserResponse> => {
-	const user = await fetchWithApi(`/users/${userId}`) as UserResponse;
-	return user;
-}

utils/fetchWithApi.ts

@@ -9,8 +9,6 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
     path = path.slice(0, path.lastIndexOf("/"));
   }
   console.log("formatted path:", path);
-  const accessToken = useCookie("access_token");
-  console.log("access token:", accessToken.value);
   const apiBase = useCookie("api_base").value;
   const apiVersion = useRuntimeConfig().public.apiVersion;
   console.log("heyoooo")
@@ -21,23 +19,24 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
   }
   console.log("path:", path)
   const { revoke, refresh } = useAuth();
-  console.log("access token 2:", accessToken.value);
+  
-
   let headers: HeadersInit = {};
-
+  
-  if (accessToken.value) {
+  
-    headers = {
-      ...options.headers,
-      "Authorization": `Bearer ${accessToken.value}`
-    };
-  } else {
-    headers = {
-      ...options.headers
-    };
-  }
-
   let reauthFailed = false;
   while (!reauthFailed) {
+    const accessToken = useCookie("access_token");
+    console.log("access token:", accessToken.value);
+    if (accessToken.value) {
+      headers = {
+        ...options.headers,
+        "Authorization": `Bearer ${accessToken.value}`
+      };
+    } else {
+      headers = {
+        ...options.headers
+      };
+    }
     try {
       console.log("fetching:", URL.parse(apiBase + path));
       const res = await $fetch<T>(URL.parse(apiBase + path)!.href, {
@@ -74,9 +73,10 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
           console.log("Path is refresh endpoint, throwing error");
           throw error;
         }
+      } else {
+        console.log("throwing error:", error);
+        throw error;
       }
-      console.log("throwing error");
-      throw error;
     }
   }
 }

utils/getScrollPosition.ts

@@ -0,0 +1,14 @@
+import type { ScrollPosition } from "~/types/interfaces";
+
+export default (element: HTMLElement): ScrollPosition => {
+  return {
+    scrollHeight: element.scrollHeight,
+    scrollWidth: element.scrollWidth,
+    scrollTop: element.scrollTop,
+    scrollLeft: element.scrollLeft,
+    offsetHeight: element.offsetHeight,
+    offsetWidth: element.offsetWidth,
+    offsetTop: element.offsetTop,
+    offsetLeft: element.offsetLeft
+  };
+}

utils/scrollToBottom.ts

@@ -1,6 +1,6 @@
-export default (element: Ref<HTMLElement | undefined, HTMLElement | undefined>) => {
+export default (element: HTMLElement) => {
-  if (element.value) {
+  if (element) {
-    element.value.scrollTo({ top: element.value.scrollHeight });
+    element.scrollTo({ top: element.scrollHeight });
     return;
   }
 }

utils/setScrollPosition.ts

@@ -0,0 +1,5 @@
+import type { ScrollPosition } from "~/types/interfaces";
+
+export default (element: HTMLElement, scrollPosition: ScrollPosition) => {
+  return element.scrollTo({ top: scrollPosition.scrollTop, left: scrollPosition.scrollLeft });
+}