37 changed files with 276 additions and 1030 deletions
--- a/README.md
+++ b/README.md
@ -1,7 +1,5 @@
 # Nuxt Minimal Starter

-
-
 Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

 ## Setup
--- a/app.vue
+++ b/app.vue
@ -1,7 +1,7 @@
 <template>
  <div>
    <Banner v-if="banner" />
-    <NuxtPage :keepalive="true" />
+    <NuxtPage />
  </div>
 </template>

@ -12,12 +12,6 @@ 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;
@ -28,7 +22,7 @@ body {
 }

 *:focus-visible {
-	outline: var(--outline-border);
+	outline: 1px solid rgb(150, 150, 150);
 }

 a {
--- a/components/Button.vue
+++ b/components/Button.vue
@ -1,44 +0,0 @@
-<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>
--- a/components/Channel.vue
+++ b/components/Channel.vue
@ -1,11 +1,11 @@
 <template>
-  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
-	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel">
+	<NuxtLink class="channel-list-link" :href="props.href">
 		# {{ props.name }}
 	</NuxtLink>
  </div>
-  <div v-else class="channel-list-link-container rounded-corners" tabindex="0">
-	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
+  <div v-else class="channel-list-link-container rounded-corners">
+	<NuxtLink class="channel-list-link" :href="props.href">
 		# {{ props.name }}
 	</NuxtLink>
  </div>
--- a/components/InvitePopup.vue
+++ b/components/InvitePopup.vue
@ -20,7 +20,7 @@ const route = useRoute();

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

--- a/components/Message.vue
+++ b/components/Message.vue
@ -1,37 +1,40 @@
 <template>
-	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
+	<div v-if="props.type == 'normal'" class="message normal-message" :class="{ 'message-margin-bottom': props.marginBottom }">
 		<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" tabindex="0">
+				<span class="message-author-username">
 					{{ username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
-					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
+					{{ messageDate }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized" tabindex="0"></div>
+			<div class="message-text">
+				{{ text }}
+			</div>
 		</div>
 	</div>
-	<div v-else ref="messageElement" :id="props.last ? 'last-message' : undefined" class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom }">
+	<div v-else ref="messageElement" class="message compact-message">
 		<div class="left-column">
-			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
-				{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
-			</span>
+			<div>
+				<span :class="{ 'invisible': dateHidden }" class="message-date" :title="date.toString()">
+					{{ messageDate }}
+				</span>
+			</div>
 		</div>
 		<div class="message-data">
-			<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
+			<div class="message-text">
+				{{ 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,
@ -39,35 +42,47 @@ const props = defineProps<{
 	text: string,
 	timestamp: number,
 	format: "12" | "24",
-	type: "normal" | "grouped",
-	marginBottom: boolean,
-	last: boolean
+	type: "normal" | "compact",
+	marginBottom: boolean
 }>();

+const messageDate = ref<string>();
+
 const messageElement = ref<HTMLDivElement>();

 const dateHidden = ref<boolean>(true);

 const date = new Date(props.timestamp);

-console.log("message:", props.text);
-console.log("author:", props.username);
+console.log("Message.vue: message:", props.text);
+console.log("Message.vue: message type:", props.type);

-const sanitized = ref<string>();
+let dateHour = date.getHours();
+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(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();
+onMounted(() => {
 	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) {
@ -81,26 +96,12 @@ onMounted(async () => {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 2dvw 1fr;
+	grid-template-columns: 1fr 19fr;
 	align-items: center;
-	column-gap: 1dvw;
-	width: 100%;
 }

-.message:hover {
-	background-color: rgb(20, 20, 20);
-}
-
-.normal-message {
-	margin-top: 1dvh;
-}
-
-.grouped-message {
-	margin-top: .3em;
-}
-
-#last-message {
-	margin-bottom: 2dvh;
+.message-margin-bottom {
+	margin-bottom: 1dvh;
 }

 .message-metadata {
@ -114,8 +115,8 @@ onMounted(async () => {
 	margin-left: .5dvw;
 	display: flex;
 	flex-direction: column;
-	height: fit-content;
-	width: 100%;
+	gap: 1dvh;
+	height: 100%;
 }

 .message-author {
@ -124,15 +125,15 @@ onMounted(async () => {
 }

 .message-author-avatar {
-	width: 100%;
+	height: 2.3em;
+	width: 2.3em;
 	border-radius: 50%;
 }

 .left-column {
-	display: flex;
+	margin-right: .5dvw;
 	text-align: center;
-	white-space: nowrap;
-	
+	align-content: center;
 }

 .author-username {
@ -146,29 +147,10 @@ onMounted(async () => {
 	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 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>
+</style>
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@ -1,11 +1,12 @@
 <template>
 	<div id="message-area">
 		<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]"
-				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-				:last="i == messages.length - 1" />
+			<div v-for="(message, i) of messages">
+				<Message :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]"
+					:margin-bottom="messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal'" />
+			</div>
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
@ -20,90 +21,64 @@
 </template>

 <script lang="ts" setup>
-import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
+import type { MessageResponse } 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" | "grouped">>({});
-const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
+const messagesType = ref<Record<string, "normal" | "compact">>({});

 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
 	{ query: { "amount": props.amount ?? 100, "offset": props.offset ?? 0 } }
 );
-
-const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
-const previousMessage = ref<MessageResponse>();
-
-function groupMessage(message: MessageResponse, options?: { prevMessage?: MessageResponse, reverse?: boolean }) {
-	messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);
-	console.log("message:", message.message);
-	console.log("author:", message.user.username, `(${message.user.uuid})`);
-
-	if (!previousMessage.value || previousMessage.value && message.user.uuid != previousMessage.value.user.uuid) {
-		console.log("no previous message or author is different than last messsage's");
-		messagesType.value[message.uuid] = "normal";
-		previousMessage.value = message;
-		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]}`);
-		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";
-			return;
-		}
-	} else {
-		console.log("first by user doesn't exist");
-		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;
-		console.log("RETURNING FALSE");
-		messagesType.value[message.uuid] = "normal";
-		return;
-	}
-	
-	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));
+	const firstMessageByUsers = ref<Record<string, MessageResponse | undefined>>({});
 	for (const message of messagesRes) {
-		groupMessage(message);
-	}
-}
+		messageTimestamps.value[message.uuid] = uuidToTimestamp(message.uuid);

-function pushMessage(message: MessageResponse) {
-	groupMessage(message);
-	messages.value.push(message);
+		console.log("message:", message.message);
+		const firstByUser = firstMessageByUsers.value[message.user.uuid];
+		if (firstByUser) {
+			console.log("first by user exists");
+			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;
+			}
+		} else {
+			console.log("first by user doesn't exist");
+			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;
+			console.log("RETURNING FALSE");
+			messagesType.value[message.uuid] = "normal";
+			continue;
+		}
+		const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference;
+		const prevTimestamp = messageTimestamps.value[firstByUser.uuid];
+		const timestamp = messageTimestamps.value[message.uuid];
+		console.log("first message timestamp:", prevTimestamp);
+		console.log("timestamp:", timestamp);
+		const diff = (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";
+			continue;
+		}
+		console.log("RETURNING " + lessThanMax.toString().toUpperCase());
+		messagesType.value[message.uuid] = "compact";
+	}
 }

 const messages = ref<MessageResponse[]>([]);
@ -117,7 +92,6 @@ 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;

@ -141,14 +115,12 @@ if (accessToken && apiBase) {
 		console.log("event data:", event.data);
 		console.log("message uuid:", event.data.uuid);
 		const parsedData = JSON.parse(event.data);
-		
-		console.log("parsed message type:", messagesType.value[parsedData.uuid]);
-		console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
-		pushMessage(parsedData);
+		messageTimestamps.value[parsedData.uuid] = uuidToTimestamp(parsedData.uuid);
+		messages.value.push(parsedData);
 		await nextTick();
 		if (messagesElement.value) {
 			console.log("scrolling to bottom");
-			scrollToBottom(messagesElement.value);
+			scrollToBottom(messagesElement);
 		}
 	});

@ -167,80 +139,20 @@ function sendMessage(e: Event) {
 	}
 }

-const route = useRoute();
-
 onMounted(async () => {
-	if (import.meta.server) return;
 	if (messagesElement.value) {
-		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;
-				}
-			}
-		});
+		scrollToBottom(messagesElement);
 	}
 });

-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;
@ -255,8 +167,7 @@ router.beforeEach((to, from, next) => {
 	padding-bottom: 1dvh;
 	padding-top: 1dvh;
 	margin-bottom: 1dvh;
-	margin-left: 1dvw;
-	margin-right: 1dvw;
+	margin-top: 2dvh;
 }

 #message-form {
@ -277,8 +188,7 @@ router.beforeEach((to, from, next) => {
 	overflow-y: scroll;
 	display: flex;
 	flex-direction: column;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	gap: 1dvh;
 }

 #submit-button {
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@ -1,14 +0,0 @@
-<template>
-  <div>
-    <h1>hi</h1>
-    <h5>TEST</h5>
-    <h5>TEST</h5>
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style scoped>
-
-</style>
--- a/components/Settings/AppSettings/Keybinds.vue
+++ b/components/Settings/AppSettings/Keybinds.vue
@ -1,12 +0,0 @@
-<template>
-  <div>
-    <h1>Keybinds (TBA)</h1>
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style scoped>
-
-</style>
--- a/components/Settings/AppSettings/Language.vue
+++ b/components/Settings/AppSettings/Language.vue
@ -1,12 +0,0 @@
-<template>
-  <div>
-    <h1>Language (TBA)</h1>
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style scoped>
-
-</style>
--- a/components/Settings/AppSettings/Notifications.vue
+++ b/components/Settings/AppSettings/Notifications.vue
@ -1,12 +0,0 @@
-<template>
-  <div>
-    <h1>Notifications (TBA)</h1>
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style scoped>
-
-</style>
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@ -1,155 +0,0 @@
-<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>
--- a/components/Settings/UserSettings/Connections.vue
+++ b/components/Settings/UserSettings/Connections.vue
@ -1,12 +0,0 @@
-<template>
-  <div>
-    <h1>Connections (TBA)</h1>
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style scoped>
-
-</style>
--- a/components/Settings/UserSettings/Devices.vue
+++ b/components/Settings/UserSettings/Devices.vue
@ -1,12 +0,0 @@
-<template>
-  <div>
-    <h1>Devices (TBA)</h1>
-  </div>
-</template>
-
-<script lang="ts" setup>
-</script>
-
-<style scoped>
-
-</style>
--- a/components/Settings/UserSettings/Privacy.vue
+++ b/components/Settings/UserSettings/Privacy.vue
@ -1,13 +0,0 @@
-<template>
-  <div>
-    <h1>Privacy (TBA)</h1>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import Button from '~/components/Button.vue';
-</script>
-
-<style scoped>
-
-</style>
--- a/components/UserPopup.vue
+++ b/components/UserPopup.vue
@ -1,85 +0,0 @@
-<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>
--- a/composables/api.ts
+++ b/composables/api.ts
@ -1,56 +0,0 @@
-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
-	}
-}
--- a/composables/auth.ts
+++ b/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("/me") as UserResponse;
+    const res = await fetchWithApi("/users/me") as UserResponse;
    user.value = res;
    return user.value;
  }
@ -88,20 +88,6 @@ export const useAuth = () => {
    return user.value;
  }

-  
-  // as in email the password link
-  async function resetPassword() {
-    // ...
-  }
-
-  async function disableAccount() {
-    // ...
-  }
-
-  async function deleteAccount() {
-    // ...
-  }
-
  return {
    accessToken,
    register,
--- a/layouts/auth.vue
+++ b/layouts/auth.vue
@ -51,17 +51,28 @@

 <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 apiVersion = useRuntimeConfig().public.apiVersion;
+const requestUrl = useRequestURL();
 const apiBase = useCookie("api_base");
-const registrationEnabled = useState("registrationEnabled", () => true);
+const gorbTxtError = ref<string>("");

 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;
@ -81,17 +92,12 @@ async function selectInstance(e: Event) {
 			const parsed = parseWellKnown(res._data as string);
 			console.log("parsed:", parsed);
 			if (parsed.ApiBaseUrl) {
-				apiBase.value = `${parsed.ApiBaseUrl}/v${apiVersion}`;
+				apiBase.value = parsed.ApiBaseUrl;
 				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.";
--- a/layouts/client.vue
+++ b/layouts/client.vue
@ -11,7 +11,7 @@
 				<Icon name="lucide:house" class="white" size="2rem" />
 			</NuxtLink>
 			<div id="servers-list">
-				<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+				<NuxtLink v-for="server of servers" :href="`/servers/${server.uuid}`">
 					<Icon name="lucide:server" class="white" size="2rem" />
 				</NuxtLink>
 			</div>
@ -23,9 +23,10 @@
 <script lang="ts" setup>
 import type { GuildResponse } from '~/types/interfaces';

+
 const loading = useState("loading", () => false);

-const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+const servers: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");

 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("servers:", servers);
@ -123,6 +124,30 @@ 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;
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@ -3,25 +3,6 @@ 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("/");
 		}
--- a/middleware/server.ts
+++ b/middleware/server.ts
@ -1,15 +0,0 @@
-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 });
-	}
-})
--- a/package.json
+++ b/package.json
@ -14,8 +14,6 @@
    "@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",
--- a/pages/login.vue
+++ b/pages/login.vue
@ -43,7 +43,6 @@ 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) {
@ -63,9 +62,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, { replace: true });
+			return await navigateTo(query.redirect_to);
 		}
-		return await navigateTo("/", { replace: true });
+		return await navigateTo("/");
 	} catch (error) {
 		console.error("Error logging in:", error);
 	}
--- a/pages/register.vue
+++ b/pages/register.vue
@ -47,17 +47,14 @@ definePageMeta({
  layout: "auth"
 })

-const registrationEnabled = useState("registrationEnabled", () => true);
+const instanceUrl = useCookie("instance_url").value;
+const registrationEnabled = ref<boolean>(false);

-console.log("wah");
-console.log("weoooo")
-const apiBase = useCookie("api_base");
-console.log("apiBase:", apiBase.value);
-if (apiBase.value) {
-	const { status, data, error } = await useFetch<StatsResponse>(`${apiBase.value}/stats`);
+if (instanceUrl) {
+	const statsUrl = new URL("/stats", instanceUrl).href;
+	const { status, data, error } = await useFetch<StatsResponse>(statsUrl);
 	if (status.value == "success" && data.value) {
 		registrationEnabled.value = data.value.registration_enabled;
-		console.log("set registration enabled value to:", data.value.registration_enabled);
 	}
 }

@ -95,6 +92,12 @@ 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);
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@ -5,7 +5,7 @@
 				<h3>
 					{{ server?.name }}
 					<span>
-						<button @click="showGuildSettings">
+						<button @click="showServerSettings">
 							<Icon name="lucide:settings" />
 						</button>
 					</span>
@ -20,17 +20,15 @@
 			<div id="channels-list">
 				<Channel v-for="channel of channels" :name="channel.name"
 					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
+					:href="`/guilds/${route.params.serverId}/channels/${channel.uuid}`" />
 			</div>
 		</div>
 		<MessageArea :channel-url="channelUrlPath" />
-		<div id="members-container">
-			<div id="members-list">
-				<div class="member-item" v-for="member of members" tabindex="0">
-					<img v-if="member.user.avatar" class="member-avatar" :src="member.user.avatar" :alt="member.user.display_name ?? member.user.username" />
-					<Icon v-else class="member-avatar" name="lucide:user" />
-					<span class="member-display-name">{{ member.user.display_name ?? member.user.username }}</span>
-				</div>
+		<div id="members-list">
+			<div class="member-item" v-for="member of members">
+				<img v-if="member.avatar" :src="member.avatar" :alt="member.displayName" height="30" />
+				<Icon v-else name="lucide:user" size="30" />
+				<span class="member-display-name">{{ member.displayName }}</span>
 			</div>
 		</div>
 	</NuxtLayout>
@ -42,7 +40,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>();
@ -54,25 +52,68 @@ 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 { fetchMembers } = useApi();
-const members = await fetchMembers(route.params.serverId as string);
+const members = [
+	{
+		id: "3287484395",
+		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");
-	const guildUrl = `guilds/${route.params.serverId}`;
-	server.value = await fetchWithApi(guildUrl);
+	server.value = await fetchWithApi(`servers/${route.params.serverId}`);

-	channels.value = await fetchWithApi(`${guildUrl}/channels`);
+	channels.value = await fetchWithApi(`/channels`);
 	console.log("channels:", channels.value);
-	channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
+	channel.value = await fetchWithApi(route.path);
 	console.log("channel:", channel.value);

 	console.log("channelid: channel:", channel);
 	console.log("channelid: set loading to false");
 });

-function showGuildSettings() { }
+function showServerSettings() { }

 function toggleInvitePopup(e: Event) {
 	e.preventDefault();
@ -81,6 +122,17 @@ 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;
@ -88,48 +140,16 @@ function toggleInvitePopup(e: Event) {
 	border-right: 1px solid rgb(70, 70, 70);
 }

-#members-container {
-	padding-top: 1dvh;
+#members-list {
 	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>
--- a/pages/servers/[serverId]/index.vue
+++ b/pages/servers/[serverId]/index.vue
@ -5,9 +5,8 @@
 </template>

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

 </script>

--- a/pages/settings.vue
+++ b/pages/settings.vue
@ -1,159 +0,0 @@
-<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>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -20,12 +20,6 @@ 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)
@ -1205,9 +1199,6 @@ 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==}

@ -2122,9 +2113,6 @@ 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==}

@ -3104,11 +3092,6 @@ 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'}
@ -6111,9 +6094,6 @@ 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
@ -7102,10 +7082,6 @@ 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
@ -8194,8 +8170,6 @@ snapshots:
    dependencies:
      semver: 6.3.1

-  marked@15.0.12: {}
-
  math-intrinsics@1.1.0: {}

  mdn-data@2.0.28: {}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@ -23,14 +23,6 @@ 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,
@ -58,8 +50,6 @@ export interface UserResponse {
 	username: string,
 	display_name: string | null,
 	avatar: string | null,
-	pronouns: string | null,
-	about: string | null,
 	email?: string,
 	email_verified?: boolean
  }
@ -72,14 +62,3 @@ 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
-}
--- a/utils/fetchMember.ts
+++ b/utils/fetchMember.ts
@ -0,0 +1,6 @@
+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;
+}
--- a/utils/fetchUser.ts
+++ b/utils/fetchUser.ts
@ -0,0 +1,6 @@
+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;
+}
--- a/utils/fetchWithApi.ts
+++ b/utils/fetchWithApi.ts
@ -9,6 +9,8 @@ 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")
@ -19,24 +21,23 @@ 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, {
@ -73,10 +74,9 @@ 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;
    }
  }
 }
--- a/utils/getScrollPosition.ts
+++ b/utils/getScrollPosition.ts
@ -1,14 +0,0 @@
-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
-  };
-}
--- a/utils/scrollToBottom.ts
+++ b/utils/scrollToBottom.ts
@ -1,6 +1,6 @@
-export default (element: HTMLElement) => {
-  if (element) {
-    element.scrollTo({ top: element.scrollHeight });
+export default (element: Ref<HTMLElement | undefined, HTMLElement | undefined>) => {
+  if (element.value) {
+    element.value.scrollTo({ top: element.value.scrollHeight });
    return;
  }
 }
--- a/utils/setScrollPosition.ts
+++ b/utils/setScrollPosition.ts
@ -1,5 +0,0 @@
-import type { ScrollPosition } from "~/types/interfaces";
-
-export default (element: HTMLElement, scrollPosition: ScrollPosition) => {
-  return element.scrollTo({ top: scrollPosition.scrollTop, left: scrollPosition.scrollLeft });
-}