Merge branch 'guild-settings' into guild-joining

2025-07-13 01:44:43 +02:00 · 2025-07-13 01:44:43 +02:00 · cf32b62ae7
commit cf32b62ae7
parent 21fcbc8cac 76bef24a9a
67 changed files with 2621 additions and 255 deletions
--- a/README.md
+++ b/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
--- a/app.vue
+++ b/app.vue
@ -6,24 +6,62 @@
 </template>

 <script lang="ts" setup>
+import ContextMenu from '~/components/ContextMenu.vue';
+import { render } from 'vue';

 const banner = useState("banner", () => false);

+onMounted(() => {
+	document.removeEventListener("contextmenu", contextMenuHandler);
+	document.addEventListener("contextmenu", (e) => {
+		contextMenuHandler(e);
+	});
+	document.addEventListener("mousedown", (e) => {
+		if (e.target instanceof HTMLDivElement && e.target.closest("#context-menu")) return;
+		console.log("click");
+		console.log("target:", e.target);
+		console.log(e.target instanceof HTMLDivElement);
+		removeContextMenu();
+		if (e.target instanceof HTMLElement && e.target.classList.contains("message-text") && e.target.contentEditable) {
+			e.target.contentEditable = "false";
+		}
+	});
+	document.addEventListener("keyup", (e) => {
+		const messageReply = document.getElementById("message-reply") as HTMLDivElement;
+		if (e.key == "Escape" && messageReply) {
+			e.preventDefault();
+			messageReply.remove();
+		}
+	});
+});
+
+function contextMenuHandler(e: MouseEvent) {
+	e.preventDefault();
+	//console.log("Opened context menu");
+	//createContextMenu(e, [
+	//	{ name: "Wah", callback: () => { return } }
+	//]);
+}
+
+const currentTheme = settingsLoad().selectedThemeId ?? "dark"
+const baseURL = useRuntimeConfig().app.baseURL;
+
+useHead({
+  link: [{
+		rel: "stylesheet",
+		href: `${baseURL}themes/${currentTheme}.css`
+	}]
+})
 </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;
  box-sizing: border-box;
-  color: rgb(190, 190, 190);
-  background-color: rgb(30, 30, 30);
+  color: var(--text-color);
+	background: var(--optional-body-background);
+  background-color: var(--chat-background-color);
  margin: 0;
 }

@ -40,15 +78,15 @@ a {
 }

 .bottom-border {
-	border-bottom: 1px solid rgb(70, 70, 70);
+	border-bottom: 1px solid var(--padding-color);
 }

 .left-border {
-	border-left: 1px solid rgb(70, 70, 70);
+	border-left: 1px solid var(--padding-color);
 }

 .right-border {
-	border-right: 1px solid rgb(70, 70, 70);
+	border-right: 1px solid var(--padding-color);
 }

 .rounded-corners {
--- a/components/ContextMenu.vue
+++ b/components/ContextMenu.vue
@ -0,0 +1,44 @@
+<template>
+	<div v-for="item of props.menuItems" class="context-menu-item" @click="runCallback(item)">
+		{{ item.name }}
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ContextMenuItem } from '~/types/interfaces';
+
+const props = defineProps<{ menuItems: ContextMenuItem[], cursorX: number, cursorY: number }>();
+
+onMounted(() => {
+	const contextMenu = document.getElementById("context-menu");
+	if (contextMenu) {
+		contextMenu.style.left = props.cursorX.toString() + "px";
+		contextMenu.style.top = props.cursorY.toString() + "px";
+	}
+});
+
+
+function runCallback(item: ContextMenuItem) {
+	removeContextMenu();
+	item.callback();
+}
+
+</script>
+
+<style>
+
+#context-menu {
+	position: absolute;
+	display: flex;
+	flex-direction: column;
+	width: 10dvw;
+	border: .15rem solid cyan;
+	background-color: var(--background-color);
+	text-align: center;
+}
+
+.context-menu-item:hover {
+	background-color: rgb(50, 50, 50);
+}
+
+</style>
--- a/components/Guild/ChannelEntry.vue
+++ b/components/Guild/ChannelEntry.vue
@ -23,19 +23,19 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 .channel-list-link {
 	text-decoration: none;
 	color: inherit;
-	padding-left: .5dvw;
-	padding-right: .5dvw;
+	padding-left: .25em;
+	padding-right: .25em;
 }

 .channel-list-link-container {
 	text-align: left;
 	display: flex;
-	height: 4dvh;
+	height: 1.5em;
 	white-space: nowrap;
 	align-items: center;
 }

 .current-channel {
-	background-color: rgb(70, 70, 70);
+	background-color: var(--sidebar-highlighted-background-color);
 }
 </style>
--- a/components/Me/AddFriend.vue
+++ b/components/Me/AddFriend.vue
@ -0,0 +1,63 @@
+<template>
+	<div style="text-align: left;">
+		<h3>Add a Friend</h3>
+		Enter a friend's Gorb username to send them a friend request.
+	</div>
+	
+	<div id="add-friend-search-bar">
+		<input id="add-friend-search-input" ref="inputField"
+				placeholder="blahaj.enjoyer" maxlength="32" @keypress.enter="sendRequest"/> <!-- REMEMBER TO CHANGE THIS WHEN WE ADD FEDERATION--> 
+		<Button id="friend-request-button" :callback="sendRequest" text="Send Friend Request"></Button>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import Button from '../UserInterface/Button.vue';
+
+const inputField = ref<HTMLInputElement>();
+const { addFriend } = useApi();
+
+
+async function sendRequest() {
+	if (inputField.value) {
+		try {
+			await addFriend(inputField.value.value)
+			alert("Friend request sent!")
+		} catch {
+			alert("Request failed :(")
+		} 
+	}
+}
+</script>
+<style>
+
+#add-friend-search-bar {
+	display: flex;
+
+	text-align: left;
+	margin-top: .8em;
+	padding: .3em .3em;
+
+	border-radius: 1em;
+	border: 1px solid var(--accent-color);
+}
+
+#add-friend-search-input {
+	border: none;
+	box-sizing: border-box;
+
+	margin: 0 .2em;
+
+	flex-grow: 1;
+	
+	color: inherit;
+	background-color: unset;
+	font-weight: medium;
+	letter-spacing: .04em;
+}
+
+#add-friend-search-input:empty:before {
+	content: attr(placeholder);
+	color: gray;
+}
+</style>
--- a/components/Me/DirectMessagesSidebar.vue
+++ b/components/Me/DirectMessagesSidebar.vue
@ -0,0 +1,41 @@
+<template>
+	<div id="middle-left-column">
+		<div id="friend-sidebar">
+			<div>
+				<h3>Direct Messages</h3>
+			</div>
+			<VerticalSpacer />
+
+			<NuxtLink class="user-item" :href="`/me/friends`" tabindex="0">
+				<Icon class="user-avatar" name="lucide:user" />
+				<span class="user-display-name">Friends</span>
+			</NuxtLink>
+			<VerticalSpacer />
+			
+			<div id="direct-message-list">
+				<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+						:href="`/me/${user.uuid}`"/> 
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+
+const { fetchFriends } = useApi();
+
+const friends = await fetchFriends()
+</script>
+
+<style>
+#middle-left-column {
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+}
+
+#friend-sidebar {
+	padding-left: .5em;
+	padding-right: .5em;
+}
+</style>
--- a/components/Me/FriendsList.vue
+++ b/components/Me/FriendsList.vue
@ -0,0 +1,58 @@
+<template>
+	<input id="search-friend-bar" placeholder="search"/>
+
+	<!-- we aren't checking for the "all" variant, since this is the default and fallback one -->
+
+	<p v-if="props.variant === 'online'" style="text-align: left;">Online – 0</p>
+	<p v-else-if="props.variant === 'pending'" style="text-align: left;">Friend Requests – 0</p>
+	<p v-else style="text-align: left;">Friends – {{ friends?.length || 0 }}</p>
+
+	<div id="friends-list">
+		<div v-if="props.variant === 'online'">
+			Not Implemented
+		</div>
+
+		<div v-else-if="props.variant === 'pending'">
+			Not Implemented
+		</div>
+
+		<div v-else>
+			<UserEntry v-for="user of friends" :user="user" :name="user.display_name || user.username"
+			:href="`/me/${user.uuid}`"/> 
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+const { fetchFriends } = useApi();
+
+const friends = await fetchFriends()
+
+const props = defineProps<{
+    variant: string
+}>();
+</script>
+
+<style>
+#search-friend-bar {
+	text-align: left;
+	margin-top: .8em;
+	padding: .3em .5em;
+	width: 100%;
+
+	border-radius: 1em;
+	border: 1px solid var(--accent-color);
+
+	box-sizing: border-box;
+	
+	color: inherit;
+	background-color: unset;
+	font-weight: medium;
+	letter-spacing: .04em;
+}
+
+#search-friend-bar:empty:before {
+	content: attr(placeholder);
+	color: gray;
+}
+</style>
--- a/components/Member/MemberEntry.vue
+++ b/components/Member/MemberEntry.vue
@ -0,0 +1,34 @@
+<template>
+    <div class="member-item" @click="togglePopup" @blur="hidePopup" tabindex="0">
+        <img v-if="props.member.user.avatar" class="member-avatar" :src="props.member.user.avatar" :alt="props.member.user.display_name ?? props.member.user.username" />
+        <Icon v-else class="member-avatar" name="lucide:user" />
+        <span class="member-display-name">{{ props.member.user.display_name || props.member.user.username }}</span>
+        <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { GuildMemberResponse } from '~/types/interfaces';
+
+const props = defineProps<{
+    member: GuildMemberResponse
+}>();
+
+const isPopupVisible = ref(false);
+
+const togglePopup = () => {
+    isPopupVisible.value = false;
+    // isPopupVisible.value = !isPopupVisible.value;
+};
+
+const hidePopup = () => {
+    isPopupVisible.value = false;
+};
+</script>
+
+<style>
+.member-item {
+    position: relative; /* Set the position to relative for absolute positioning of the popup */
+}
+</style>
--- a/components/Message.vue
+++ b/components/Message.vue
@ -1,22 +1,61 @@
 <template>
-	<div v-if="props.type == 'normal'" :id="props.last ? 'last-message' : undefined" class="message normal-message">
+	<div v-if="props.type == 'normal' || props.replyMessage" ref="messageElement" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
+			class="message normal-message" :class="{ 'mentioned': (props.replyMessage || props.isMentioned) && props.message.user.uuid != props.me.uuid && props.replyMessage?.user.uuid == props.me.uuid }" :data-message-id="props.messageId"
+			:editing.sync="props.editing" :replying-to.sync="props.replyingTo">
+		<div v-if="props.replyMessage" class="message-reply-svg">
+			<svg
+				width="1.5em"
+				height="1.5em"
+				viewBox="0 0 151.14355 87.562065"
+				version="1.1"
+				id="svg1"
+				xmlns="http://www.w3.org/2000/svg"
+				xmlns:svg="http://www.w3.org/2000/svg"
+				style="overflow: visible;">
+				<defs
+					id="defs1" />
+				<g
+					id="layer1"
+					transform="translate(40,-35)">
+					<g
+					id="g3"
+					transform="translate(-35,-20)">
+					<path
+						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
+						d="m 120.02168,87.850978 100.76157,2.4e-5"
+						id="path3-5" />
+					<path
+						style="stroke:var(--reply-text-color);stroke-width:8;stroke-opacity:1"
+						d="M 69.899501,174.963 120.2803,87.700931"
+						id="path3-5-2" />
+					</g>
+				</g>
+			</svg>
+		</div>
+		<MessageReply v-if="props.replyMessage" :author="props.replyMessage.user.display_name || props.replyMessage.user.username" :text="props.replyMessage?.message"
+			:id="props.message.uuid" :reply-id="props.replyMessage.uuid" max-width="reply" />
 		<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="author?.display_name || author?.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">
-					{{ username }}
+					{{ author?.display_name || author?.username }}
 				</span>
 				<span class="message-date" :title="date.toString()">
-					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
+					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
+					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
+
+					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
 			<div class="message-text" v-html="sanitized" tabindex="0"></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" @contextmenu="createContextMenu($event, menuItems)" :id="props.last ? 'last-message' : undefined"
+			class="message grouped-message" :class="{ 'message-margin-bottom': props.marginBottom, 'mentioned': props.replyMessage || props.isMentioned }"
+			:data-message-id="props.messageId" :editing.sync="props.editing" :replying-to.sync="props.replyingTo">
 		<div class="left-column">
 			<span :class="{ 'invisible': dateHidden }" class="message-date side-message-date" :title="date.toString()">
 				{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
@ -31,49 +70,73 @@
 <script lang="ts" setup>
 import DOMPurify from 'dompurify';
 import { parse } from 'marked';
+import type { MessageProps } from '~/types/props';

-const props = defineProps<{
-	class?: string,
-	img?: string | null,
-	username: string,
-	text: string,
-	timestamp: number,
-	format: "12" | "24",
-	type: "normal" | "grouped",
-	marginBottom: boolean,
-	last: boolean
-}>();
+const props = defineProps<MessageProps>();

 const messageElement = ref<HTMLDivElement>();

 const dateHidden = ref<boolean>(true);

 const date = new Date(props.timestamp);
+const currentDate: Date = new Date()

-console.log("message:", props.text);
-console.log("author:", props.username);
+console.log("[MSG] message to render:", props.message);
+console.log("author:", props.author);
+console.log("[MSG] reply message:", props.replyMessage);

 const sanitized = ref<string>();

 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"] });
+	sanitized.value = DOMPurify.sanitize(parsed, {
+		ALLOWED_TAGS: [
+			"strong", "em", "br", "blockquote",
+			"code", "ul", "ol", "li", "a", "h1",
+			"h2", "h3", "h4", "h5", "h6"
+		],
+		ALLOW_DATA_ATTR: false,
+		ALLOW_SELF_CLOSE_IN_ATTR: false,
+		ALLOWED_ATTR: []
+	});
 	console.log("adding listeners")
 	await nextTick();
-	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
-		dateHidden.value = false;
-	});
-
-	messageElement.value?.addEventListener("mouseleave", (e: Event) => {
-		dateHidden.value = true;
-	});
-	console.log("added listeners");
+	if (messageElement.value?.classList.contains("grouped-message")) {
+		messageElement.value?.addEventListener("mouseenter", (e: Event) => {
+			dateHidden.value = false;
+		});
+	
+		messageElement.value?.addEventListener("mouseleave", (e: Event) => {
+			dateHidden.value = true;
+		});
+		console.log("added listeners");
+	}
 });

 //function toggleTooltip(e: Event) {
 //	showHover.value = !showHover.value;
 //}

+const menuItems = [
+	{ name: "Reply", callback: () => { if (messageElement.value) replyToMessage(messageElement.value, props) } }
+]
+
+console.log("me:", props.me);
+if (props.author?.uuid == props.me.uuid) {
+	menuItems.push({ name: "Edit", callback: () => { if (messageElement.value) editMessage(messageElement.value, props) } });
+}
+
+function getDayDifference(date1: Date, date2: Date) {
+    const midnight1 = new Date(date1.getFullYear(), date1.getMonth(), date1.getDate());
+    const midnight2 = new Date(date2.getFullYear(), date2.getMonth(), date2.getDate());
+
+    const timeDifference = midnight2.getTime() - midnight1.getTime();
+
+    const dayDifference = timeDifference / (1000 * 60 * 60 * 24);
+
+    return Math.round(dayDifference);
+}
+
 </script>

 <style scoped>
@ -81,14 +144,20 @@ onMounted(async () => {
 	text-align: left;
 	/* border: 1px solid lightcoral; */
 	display: grid;
-	grid-template-columns: 2dvw 1fr;
+	grid-template-columns: 2rem 1fr;
 	align-items: center;
 	column-gap: 1dvw;
 	width: 100%;
+	overflow-wrap: anywhere;
+}
+
+.message-reply-preview {
+	grid-row: 1;
+	grid-column: 2;
 }

 .message:hover {
-	background-color: rgb(20, 20, 20);
+	background-color: var(--chat-highlighted-background-color);
 }

 .normal-message {
@ -116,6 +185,8 @@ onMounted(async () => {
 	flex-direction: column;
 	height: fit-content;
 	width: 100%;
+	grid-row: 2;
+	grid-column: 2;
 }

 .message-author {
@ -129,10 +200,13 @@ onMounted(async () => {
 }

 .left-column {
+	min-width: 2rem;
 	display: flex;
+	justify-content: center;
 	text-align: center;
 	white-space: nowrap;
-	
+	grid-row: 2;
+	grid-column: 1;
 }

 .author-username {
@ -142,7 +216,7 @@ onMounted(async () => {

 .message-date {
 	font-size: .7em;
-	color: rgb(150, 150, 150);
+	color: var(--secondary-text-color);
 	cursor: default;
 }

@ -159,16 +233,30 @@ onMounted(async () => {
 	width: 20px;
 }
 */
+
+.mentioned {
+	background-color: rgba(0, 255, 166, 0.123);
+}
+
+.mentioned:hover {
+	background-color: rgba(90, 255, 200, 0.233);
+}
+
+.message-reply-svg {
+	display: flex;
+	justify-content: center;
+}
+
 </style>

 <style module>
 .message-text ul, h1, h2, h3, h4, h5, h6 {
-	padding-top: 1dvh;
-	padding-bottom: 1dvh;
+	padding-top: .5em;
+	padding-bottom: .5em;
 	margin: 0;
 }

 .message-text ul  {
-	padding-left: 2dvw;
+	padding-left: 1em;
 }
 </style>
--- a/components/MessageArea.vue
+++ b/components/MessageArea.vue
@ -3,31 +3,53 @@
 		<div id="messages" ref="messagesElement">
 			<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
 				:text="message.message" :timestamp="messageTimestamps[message.uuid]" :img="message.user.avatar"
-				format="12" :type="messagesType[message.uuid]"
+				:format="timeFormat" :type="messagesType[message.uuid]"
 				:margin-bottom="(messages[i + 1] && messagesType[messages[i + 1].uuid] == 'normal') ?? false"
-				:last="i == messages.length - 1" />
+				:last="i == messages.length - 1" :message-id="message.uuid" :author="message.user" :me="me"
+				:message="message" :is-reply="message.reply_to"
+				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
-				<input v-model="messageInput" id="message-box-input" class="rounded-corners" type="text"
-					name="message-input" autocomplete="off">
-				<button id="submit-button" type="submit">
-					<Icon name="lucide:send" />
-				</button>
+				<div id="message-box-left-elements">
+					<span class="message-box-button">
+						<Icon name="lucide:file-plus-2" />
+					</span>
+				</div>
+
+				<div id="message-textarea">
+					<div id="message-textbox-input"
+							role="textbox" ref="messageTextboxInput"
+							autocorrect="off" spellcheck="true" contenteditable="true"
+							@keydown="handleTextboxKeyDown" @input="handleTextboxInput">
+					</div>
+				</div>
+				
+				<div id="message-box-right-elements">
+					<button class="message-box-button" type="submit">
+						<Icon name="lucide:send" />
+					</button>
+					<span class="message-box-button">
+						<Icon name="lucide:image-play" />
+					</span>
+				</div>
 			</form>
 		</div>
 	</div>
 </template>

 <script lang="ts" setup>
-import type { MessageResponse, ScrollPosition } from '~/types/interfaces';
+import type { MessageResponse, ScrollPosition, UserResponse } from '~/types/interfaces';
 import scrollToBottom from '~/utils/scrollToBottom';

 const props = defineProps<{ channelUrl: string, amount?: number, offset?: number }>();

+const me = await fetchWithApi("/me") as UserResponse;
+
 const messageTimestamps = ref<Record<string, number>>({});
 const messagesType = ref<Record<string, "normal" | "grouped">>({});
 const messageGroupingMaxDifference = useRuntimeConfig().public.messageGroupingMaxDifference
+const timeFormat = getPreferredTimeFormat()

 const messagesRes: MessageResponse[] | undefined = await fetchWithApi(
 	`${props.channelUrl}/messages`,
@ -97,6 +119,7 @@ if (messagesRes) {
 	messagesRes.reverse();
 	console.log("messages res:", messagesRes.map(msg => msg.message));
 	for (const message of messagesRes) {
+		console.log("[MSG] processing message:", message);
 		groupMessage(message);
 	}
 }
@ -106,11 +129,38 @@ function pushMessage(message: MessageResponse) {
 	messages.value.push(message);
 }

+function handleTextboxKeyDown(event: KeyboardEvent) {
+	if (event.key === "Enter" && event.shiftKey && messageTextboxInput.value) {
+		// this enters a newline, due to not preventing default
+	} else if (event.key === "Enter") {
+		event.preventDefault()
+		sendMessage(event)
+	}
+	
+	adjustTextboxHeight()
+}
+
+function handleTextboxInput() {
+	if (messageTextboxInput.value) {
+        messageInput.value = messageTextboxInput.value.innerText;
+    }
+
+	adjustTextboxHeight()
+}
+
+// this technically uses pixel units, but it's still set using dynamic units
+function adjustTextboxHeight() {
+	if (messageTextboxInput.value && messageTextboxDisplay.value) {
+		messageTextboxInput.value.style.height = "auto"
+		messageTextboxInput.value.style.height = `${messageTextboxInput.value.scrollHeight}px`
+	}
+}
+
 const messages = ref<MessageResponse[]>([]);
-
-const messageInput = ref<string>();
-
+const messageInput = ref<string>("");
 const messagesElement = ref<HTMLDivElement>();
+const messageTextboxInput = ref<HTMLDivElement>();
+const messageTextboxDisplay = ref<HTMLDivElement>();

 if (messagesRes) messages.value = messagesRes;

@ -141,6 +191,7 @@ if (accessToken && apiBase) {
 		console.log("event data:", event.data);
 		console.log("message uuid:", event.data.uuid);
 		const parsedData = JSON.parse(event.data);
+		console.log("[MSG] parsed message:", parsedData);
 		
 		console.log("parsed message type:", messagesType.value[parsedData.uuid]);
 		console.log("parsed message timestamp:", messageTimestamps.value[parsedData.uuid]);
@ -158,12 +209,39 @@ if (accessToken && apiBase) {

 function sendMessage(e: Event) {
 	e.preventDefault();
-	const text = messageInput.value;
-	console.log("text:", text);
-	if (text) {
-		ws.send(text);
-		messageInput.value = "";
-		console.log("MESSAGE SENT!!!");
+	if (messageInput.value && messageInput.value.trim() !== "") {
+		const message: Record<string, string> = {
+			message: messageInput.value.trim().replace(/\n/g, "<br>") // trim, and replace \n with <br>
+		}
+
+		const messageReply = document.getElementById("message-reply") as HTMLDivElement;
+		console.log("[MSG] message reply:", messageReply);
+		if (messageReply && messageReply.dataset.messageId) {
+			console.log("[MSG] message is a reply");
+			message.reply_to = messageReply.dataset.messageId;
+		}
+
+		console.log("[MSG] sent message:", message);
+		ws.send(JSON.stringify(message));
+
+		// reset input field
+		messageInput.value = ""
+		if (messageTextboxInput.value) {
+			messageTextboxInput.value.innerText = ""
+		}
+
+		adjustTextboxHeight()
+	}
+}
+
+function getReplyMessage(id: string) {
+	console.log("[REPLYMSG] id:", id);
+	const messagesValues = Object.values(messages.value);
+	console.log("[REPLYMSG] messages values:", messagesValues);
+	for (const message of messagesValues) {
+		console.log("[REPLYMSG] message:", message);
+		console.log("[REPLYMSG] IDs match?", message.uuid == id);
+		if (message.uuid == id) return message;
 	}
 }

@ -171,6 +249,7 @@ const route = useRoute();

 onMounted(async () => {
 	if (import.meta.server) return;
+	console.log("[MSG] messages keys:", Object.values(messages.value));
 	if (messagesElement.value) {
 		scrollToBottom(messagesElement.value);
 		let fetched = false;
@ -239,38 +318,64 @@ router.beforeEach((to, from, next) => {

 <style scoped>
 #message-area {
-	display: grid;
-	grid-template-rows: 8fr 1fr;
+	display: flex;
+	flex-direction: column;
 	padding-left: 1dvw;
 	padding-right: 1dvw;
 	overflow: hidden;
+	flex-grow: 1;
 }

 #message-box {
-	display: flex;
-	flex-direction: column;
-	justify-content: center;
-	align-content: center;
-	border: 1px solid rgb(70, 70, 70);
-	padding-bottom: 1dvh;
-	padding-top: 1dvh;
-	margin-bottom: 1dvh;
+	margin-top: auto; /* force it to the bottom of the screen */
+	margin-bottom: 2dvh;
 	margin-left: 1dvw;
 	margin-right: 1dvw;
+
+	padding-left: 2%;
+	padding-right: 2%;
+	
+	align-items: center;
+	
+	color: var(--text-color);
+	border: 1px solid var(--padding-color);
+	background-color: var(--chatbox-background-color);
 }

 #message-form {
 	display: flex;
-	justify-content: center;
+	flex-direction: row;
+	gap: .55em;
 }

-#message-box-input {
-	width: 80%;
-	background-color: rgb(50, 50, 50);
+#message-textarea {
+	flex-grow: 1;
+	min-height: 2.35em;
+}
+
+#message-textbox-input {
+	width: 100%;
+	max-height: 50dvh;
+
+	padding: 0.5em 0;
+	user-select: text;
+
+	font-family: inherit;
+	font-size: inherit;
+	line-height: normal;
 	border: none;
-	color: inherit;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
+	background-color: #40404000; /* completely transparent colour */
+
+	text-align: left;
+	word-break: break-word;
+	overflow-wrap: break-word;
+	
+	overflow-y: auto;
+}
+
+#message-box-left-elements, #message-box-right-elements {
+	display: flex;
+	align-items: end;
 }

 #messages {
@ -281,14 +386,16 @@ router.beforeEach((to, from, next) => {
 	padding-right: 1dvw;
 }

-#submit-button {
+.message-box-button {
 	background-color: inherit;
 	border: none;
-	color: rgb(200, 200, 200);
+	color: var(--primary-color);
+	transition: color 100ms;
 	font-size: 1.5em;
 }

-#submit-button:hover {
-	color: rgb(255, 255, 255);
+.message-box-button:hover {
+	color: var(--primary-highlighted-color);
+	cursor: pointer;
 }
 </style>
--- a/components/MessageReply.vue
+++ b/components/MessageReply.vue
@ -0,0 +1,92 @@
+<template>
+  <div :id="props.maxWidth == 'full' ? 'message-reply' : undefined" :class="{ 'message-reply-preview' : props.maxWidth == 'reply' }"
+  		:data-message-id="props.id" @click="scrollToReply">
+    <span id="reply-text">Replying to <span id="reply-author-field">{{ props.author }}:</span> <span v-html="sanitized"></span></span>
+	<!-- <span id="message-reply-cancel"><Icon name="lucide:x" /></span> -->
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+import DOMPurify from "dompurify";
+import { parse } from "marked";
+
+const props = defineProps<{ author: string, text: string, id: string, replyId: string, maxWidth: "full" | "reply" }>();
+
+const existingReply = document.getElementById("message-reply");
+
+if (existingReply) {
+	existingReply.remove();
+}
+
+console.log("text:", props.text);
+
+const sanitized = ref<string>();
+
+onMounted(async () => {
+	
+	const parsed = await parse(props.text.trim().replaceAll("<br>", " "), { gfm: true });
+	
+	sanitized.value = DOMPurify.sanitize(parsed, {
+		ALLOWED_TAGS: [],
+		ALLOW_DATA_ATTR: false,
+		ALLOW_SELF_CLOSE_IN_ATTR: false,
+		ALLOWED_ATTR: [],
+		KEEP_CONTENT: true
+	});
+	
+	console.log("sanitized:", sanitized.value);
+
+	const messageBoxInput = document.getElementById("message-textbox-input") as HTMLDivElement;
+	if (messageBoxInput) {
+		messageBoxInput.focus();
+	}
+});
+
+function scrollToReply(e: MouseEvent) {
+	e.preventDefault();
+	console.log("clicked on reply box");
+	const reply = document.querySelector(`.message[data-message-id="${props.replyId}"]`);
+	if (reply) {
+		console.log("reply:", reply);
+		console.log("scrolling into view");
+		reply.scrollIntoView({ behavior: "smooth", block: "center" });
+	}
+}
+
+</script>
+
+<style scoped>
+
+#message-reply, .message-reply-preview {
+	display: flex;
+	text-align: left;
+	margin-bottom: .5rem;
+	cursor: pointer;
+	overflow: hidden;
+}
+
+#message-reply {
+	width: 100%;
+}
+
+.message-reply-preview {
+	margin-left: .5dvw;
+}
+
+#reply-text {
+	color: var(--reply-text-color);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	margin-bottom: 0;
+	margin-top: .2rem;
+	border-bottom: 1px solid var(--padding-color);
+
+}
+
+#reply-author-field {
+	color: var(--text-color);
+}
+
+</style>
--- a/components/Popups/CropPopup.vue
+++ b/components/Popups/CropPopup.vue
@ -0,0 +1,93 @@
+<template>
+  <div id="fullscreen-container">
+    <div id="crop-preview">
+      <img ref="image" :src="imageSrc" style="min-height: 35dvh;">
+      <Button text="Crop" :callback="cropImage"></Button>
+      <Button text="Cancel" :callback="closePopup"></Button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Cropper from 'cropperjs';
+
+const props = defineProps({
+  imageSrc: String,
+  onCrop: Function,
+  onClose: Function,
+});
+
+const image = ref<HTMLImageElement | null>(null);
+const cropper = ref<Cropper | null>(null);
+
+watch(image, (newValue) => {
+  if (newValue) {
+    cropper.value = new Cropper(newValue)
+    const cropperCanvas = cropper.value.getCropperCanvas()
+    const cropperSelection = cropper.value.getCropperSelection()
+    
+    if (cropperCanvas) {
+      cropperCanvas.background = false
+    }
+
+    if (cropperSelection) {
+      cropperSelection.precise = true
+      cropperSelection.aspectRatio = 1
+      cropperSelection.initialCoverage = 1
+    }
+  }
+});
+
+async function cropImage() {
+  if (cropper) {
+    const selection = cropper.value?.getCropperSelection();
+    if (selection) {
+      const canvas = await selection.$toCanvas({width: 256, height: 256})
+
+      canvas.toBlob((blob) => {
+        if (blob && props.onCrop) {
+          const reader = new FileReader();
+          reader.addEventListener("load", () => {
+            if (reader.result && typeof reader.result === 'string') {
+              if (props.onCrop) {
+                props.onCrop(blob, reader.result)
+              }
+            }
+          });
+          const file = new File([blob], 'preview.png', { type: 'image/png' })
+          reader.readAsDataURL(file)
+        }
+      });
+    }
+  }
+}
+
+function closePopup() {
+  if (props.onClose) {
+    props.onClose();
+  }
+}
+</script>
+
+<style scoped>
+.button {
+  margin: 0.2em
+}
+
+#fullscreen-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+  background: rgba(0, 0, 0, 0.5);
+}
+
+#crop-preview {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>
--- a/components/Popups/Loading.vue
+++ b/components/Popups/Loading.vue
--- a/components/Settings/AppSettings/Appearance.vue
+++ b/components/Settings/AppSettings/Appearance.vue
@ -0,0 +1,124 @@
+<template>
+  <div>
+    <h1>Appearance</h1>
+    
+    <p class="subtitle">THEMES</p>
+    <div class="themes">
+      <div v-for="theme of themes" class="theme-preview-container">
+        <span class="theme-preview"
+          :title="theme.displayName"
+          :style="{background:`linear-gradient(${theme.previewGradient})`}"
+          @click="changeTheme(theme.id, theme.themeUrl)"
+        >
+          <span class="theme-title" :style="{color:`${theme.complementaryColor}`}">
+            {{ theme.displayName }}
+          </span>
+        </span>
+      </div>
+    </div>
+
+    <!-- <p class="subtitle">Icons</p>
+    <div class="icons">
+    </div> -->
+
+    <p class="subtitle">TIME FORMAT</p>
+    <div class="icons">
+      <RadioButtons :button-count="3" :text-strings="timeFormatTextStrings"
+          :default-button-index="settingsLoad().timeFormat?.index ?? 0" :callback="onTimeFormatClicked"></RadioButtons>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import RadioButtons from '~/components/UserInterface/RadioButtons.vue';
+import type { TimeFormat } from '~/types/settings';
+import settingSave from '~/utils/settingSave';
+
+const runtimeConfig = useRuntimeConfig()
+const defaultThemes = runtimeConfig.public.defaultThemes
+const baseURL = runtimeConfig.app.baseURL;
+const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
+let themeLinkElement: HTMLLinkElement | null = null;
+
+const themes: Array<Theme> = []
+
+interface Theme {
+  id: string
+  displayName: string
+  previewGradient: string
+  complementaryColor: string
+  themeUrl: string
+}
+
+function changeTheme(id: string, url: string) {
+  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
+    return;
+  }
+
+  settingSave("selectedThemeId", id)
+
+  // if the theme didn't originally load for some reason, create it
+  if (!themeLinkElement) {
+    themeLinkElement = document.createElement('link');
+    themeLinkElement.rel = 'stylesheet';
+    document.head.appendChild(themeLinkElement);
+  }
+
+  themeLinkElement.href = `${baseURL}themes/${url}`;
+}
+
+async function fetchThemes() {
+  for (const theme of defaultThemes) {
+    const themeConfig = await $fetch(`${baseURL}themes/${theme}.json`) as Theme
+    themeConfig.id = theme
+
+    themes.push(themeConfig)
+  }
+}
+
+await fetchThemes()
+
+async function onTimeFormatClicked(index: number) {
+  let format: "auto" | "12" | "24" = "auto"
+
+  if (index == 0) {
+    format = "auto"
+  } else if (index == 1) {
+    format = "12"
+  } else if (index == 2) {
+    format = "24"
+  }
+
+  const timeFormat: TimeFormat = {index, format}
+  settingSave("timeFormat", timeFormat)
+}
+</script>
+
+<style scoped>
+.themes {
+  display: flex;
+}
+
+.theme-preview-container {
+  margin: .5em;
+  width: 5em;
+  height: 5em;
+}
+
+.theme-preview {
+  width: 5em;
+  height: 5em;
+  border-radius: 100%;
+  border: .1em solid var(--primary-color);
+
+  display: inline-block;
+  text-align: center;
+  align-content: center;
+  cursor: pointer;
+}
+
+.theme-title {
+  font-size: .8em;
+  line-height: 5em; /* same height as the parent to centre it vertically */
+}
+</style>
--- a/components/Settings/AppSettings/Keybinds.vue
+++ b/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>
--- a/components/Settings/AppSettings/Language.vue
+++ b/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>
--- a/components/Settings/AppSettings/Notifications.vue
+++ b/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>
--- a/components/Settings/UserSettings/Account.vue
+++ b/components/Settings/UserSettings/Account.vue
@ -0,0 +1,97 @@
+<template>
+  <div v-if="user">
+    <h1>Account</h1>
+
+    <p class="subtitle">E-MAIL</p>
+    <input id="profile-about-me-input" class="profile-data-input" type="text" v-model="user.email" placeholder="john@example.org" />
+    <br>
+    <Button text="Submit" :callback=changeEmail style="margin-top: .4em"></Button>
+    
+    <p class="subtitle">PASSWORD</p>
+    <Button text="Reset Password" :callback=resetPassword></Button>
+    
+    <p class="subtitle">ACCOUNT DELETION</p>
+    <Button text="Delete Account (tbd)" :callback=deleteAccount variant="scary"></Button>
+
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/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 :(")
+}
+
+async function changeEmail() {
+  if (!user) return;
+
+
+  const formData = new FormData()
+  const bytes = new TextEncoder().encode(JSON.stringify({
+    email: user.email,
+  }));
+  formData.append('json', new Blob([bytes], { type: 'application/json' }));
+  
+  try {
+    await fetchWithApi('/me', {
+      method: 'PATCH',
+      body: formData
+    })
+
+	const apiBase = useCookie("api_base").value;
+
+	if (apiBase) {
+		const stats = await useApi().fetchInstanceStats(apiBase);
+		if (stats.email_verification_required) {
+			return window.location.reload();
+		}
+	}
+    alert('success!!')
+  } catch (error: any) {
+    if (error?.response?.status !== 200) {
+      alert(`error ${error?.response?.status} met whilst trying to update profile info`)
+    }
+  }
+};
+
+
+async function resetPassword () {
+  await fetchWithApi("/auth/reset-password", {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    query: {
+      identifier: user?.username
+    }
+  });
+}
+
+async function deleteAccount() {
+  alert("TBD")
+}
+</script>
+
+<style scoped>
+.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: var(--text-color);
+  background-color: var(--accent-color);
+}
+</style>
--- a/components/Settings/UserSettings/Connections.vue
+++ b/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>
--- a/components/Settings/UserSettings/Devices.vue
+++ b/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>
--- a/components/Settings/UserSettings/Privacy.vue
+++ b/components/Settings/UserSettings/Privacy.vue
@ -0,0 +1,12 @@
+<template>
+  <div>
+    <h1>Privacy (TBA)</h1>
+  </div>
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style scoped>
+
+</style>
--- a/components/Settings/UserSettings/Profile.vue
+++ b/components/Settings/UserSettings/Profile.vue
@ -0,0 +1,154 @@
+<template>
+  <div>
+    <h1>Profile</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" />
+
+        <Button style="margin-top: 2dvh" text="Save Changes" :callback="saveChanges"></Button>
+      </div>
+
+      <UserPopup v-if="user" :user="user" id="profile-popup"></UserPopup>
+
+    </div>
+  </div>
+  <CropPopup
+    v-if="isCropPopupVisible"
+    :imageSrc="cropImageSrc"
+    :onCrop="handleCrop"
+    :onClose="closeCropPopup"
+  />
+</template>
+
+<script lang="ts" setup>
+import UserPopup from '~/components/User/UserPopup.vue';
+import Button from '~/components/UserInterface/Button.vue';
+
+import type { UserResponse } from '~/types/interfaces';
+
+let newPfpFile: File;
+const isCropPopupVisible = ref(false);
+const cropImageSrc = ref("")
+;
+const { fetchUser } = useAuth();
+
+const user: UserResponse | undefined = await fetchUser()
+if (!user) {
+  alert("could not fetch user info, aborting :(")
+}
+
+async function saveChanges() {
+  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\n"${error?.response._data?.message}"`)
+    }
+  }
+};
+
+
+async function removeAvatar() {
+  alert("TBD")
+  // await fetchWithApi(`/auth/reset-password`);
+}
+
+async function changeAvatar() {
+  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;
+
+      const reader = new FileReader();
+      reader.addEventListener("load", () => {
+        if (reader.result && typeof reader.result === 'string') {
+          cropImageSrc.value = reader.result;
+          isCropPopupVisible.value = true;
+        }
+      });
+      reader.readAsDataURL(file);
+    }
+  })
+
+  input.click()
+}
+
+
+function handleCrop(blob: Blob, url: string) {
+  if (!user) return;
+
+  user.avatar = url;
+  newPfpFile = new File([blob], 'avatar.png', { type: 'image/png' })
+  closeCropPopup()
+}
+
+function closeCropPopup() {
+  isCropPopupVisible.value = false
+}
+</script>
+
+<style scoped>
+.profile-container {
+  display: flex;
+}
+
+.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: var(--text-color);
+  background-color: var(--accent-color);
+}
+
+#profile-popup {
+  margin-left: 2dvw;
+}
+</style>
--- a/components/User/UserEntry.vue
+++ b/components/User/UserEntry.vue
@ -0,0 +1,40 @@
+<template>
+    <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
+        <img v-if="props.user.avatar" class="user-avatar" :src="props.user.avatar" :alt="props.user.display_name ?? props.user.username" />
+        <Icon v-else class="user-avatar" name="lucide:user" />
+        <span class="user-display-name">{{ props.user.display_name || props.user.username }}</span>
+	</NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import type { UserResponse } from '~/types/interfaces';
+
+const props = defineProps<{
+    user: UserResponse
+}>();
+</script>
+
+<style>
+.user-item {
+    display: flex;
+	align-items: center;
+	text-align: left;
+
+	margin-top: .5em;
+	margin-bottom: .5em;
+	gap: .5em;
+    
+    text-decoration: none;
+    color: inherit;
+}
+
+.user-item:hover {
+    background-color: #00000020
+}
+
+.user-avatar {
+    width: 2.3em;
+    height: 2.3em;
+    border-radius: 50%;
+}
+</style>
--- a/components/User/UserPopup.vue
+++ b/components/User/UserPopup.vue
@ -0,0 +1,89 @@
+<template>
+  <div id="profile-popup">
+    <img v-if="props.user.avatar" id="avatar" :src="props.user.avatar" alt="profile avatar">
+    <Icon v-else id="avatar" name="lucide:user" />
+
+    <div id="cover-color"></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-color {
+  border-radius: 12px 12px 0 0;
+  min-height: 60px;
+  background-color: var(--primary-color);
+}
+
+#main-body {
+  border-radius: 0 0 12px 12px;
+  padding: 12px;
+  min-height: 280px;
+  background-color: var(--accent-color);
+  overflow-wrap: break-word;
+  hyphens: manual;
+}
+
+#avatar {
+  width: 96px;
+  height: 96px;
+  border: 5px solid #4b3018;
+  background-color: var(--secondary-color);
+  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: var(--secondary-color);
+  border-radius: 12px;
+
+  margin-top: 32px;
+  padding: 16px;
+  font-size: 16px;
+}
+</style>
--- a/components/UserInterface/Button.vue
+++ b/components/UserInterface/Button.vue
@ -0,0 +1,51 @@
+<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: var(--primary-color);
+	color: var(--text-color);
+
+	padding: 0.4em 0.75em;
+	font-size: 1.1em;
+	transition: background-color 0.2s;
+
+	border-radius: 0.7rem;
+	text-decoration: none;
+	display: inline-block;
+}
+
+.button:hover {
+	background-color: var(--primary-highlighted-color);
+}
+
+.scary-button {
+	background-color: red;
+}
+.scary-button:hover {
+	background-color: red;
+}
+
+.neutral-button {
+	background-color: var(--accent-color);
+}
+.neutral-button:hover {
+	background-color: var(--accent-highlighted-color);
+}
+
+</style>
--- a/components/UserInterface/RadioButtons.vue
+++ b/components/UserInterface/RadioButtons.vue
@ -0,0 +1,111 @@
+<template>
+	<div class="radio-buttons-container" ref="radioButtonsContainer">
+		<div v-for="index in indices" :key="index" class="radio-button" @click="onClick(index)">
+			<span class="radio-button-radio"></span>
+			<span class="radio-button-text">{{ textStrings[index] }}</span>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+
+const radioButtonsContainer = ref<HTMLDivElement>()
+
+const props = defineProps<{
+	textStrings: string[],
+	buttonCount: number,
+	defaultButtonIndex: number,
+	callback: CallableFunction,
+}>();
+
+// makes an array from 0 to buttonCount - 1
+const indices = Array.from({ length: props.buttonCount }, (_, i) => i) 
+
+// select default selected button
+onMounted(async () => {
+	await nextTick()
+	
+	if (props.defaultButtonIndex != undefined && radioButtonsContainer.value) {
+		const children = radioButtonsContainer.value.children
+		const defaultButton = children.item(props.defaultButtonIndex)
+		defaultButton?.classList.add("selected-radio-button")
+		defaultButton?.children.item(0)?.classList.add("selected-radio-button-radio")
+	}
+})
+
+
+function onClick(clickedIndex: number) {
+	// remove selected-radio-button class from all buttons except the clicked one	
+	if (radioButtonsContainer.value) {
+		const children = radioButtonsContainer.value.children
+		for (let i = 0; i < children.length; i++) {
+			children.item(i)?.classList.remove("selected-radio-button")
+			children.item(i)?.children.item(0)?.classList.remove("selected-radio-button-radio")
+		}
+
+		children.item(clickedIndex)?.classList.add("selected-radio-button")
+		children.item(clickedIndex)?.children.item(0)?.classList.add("selected-radio-button-radio")
+	}
+	
+	props.callback(clickedIndex)
+}
+</script>
+
+<style scoped>
+.radio-buttons-container {
+	display: flex;
+	flex-direction: column;
+}
+
+.radio-button {
+	cursor: pointer;
+
+	display: flex;
+	align-items: center;
+
+	border-radius: .66em;
+	background-color: unset;
+	color: var(--text-color);
+
+	padding: 0.4em 0.75em;
+	margin: 0.4em 0em;
+	font-size: 1.1em;
+	transition: background-color 0.2s;
+}
+
+.radio-button:hover {
+	background-color: var(--secondary-highlighted-color);
+}
+
+.selected-radio-button {
+	background-color: var(--accent-color);
+}
+
+.selected-radio-button:hover {
+	background-color: var(--accent-highlighted-color);
+}
+
+.radio-button-radio, .selected-radio-button-radio {
+	position: relative;
+	
+	display: inline-block;
+	border-radius: 1em;
+}
+
+.radio-button-radio {
+	height: 1em;
+	width: 1em;
+	border: .15em solid var(--primary-color);
+}
+
+.selected-radio-button-radio {
+    height: 1em;
+    width: 1em;
+	border: 0.15em solid var(--primary-color);
+	background-color: var(--primary-highlighted-color);
+}
+
+.radio-button-text {
+	margin-left: .5em;
+}
+</style>
--- a/components/UserInterface/VerticalSpacer.vue
+++ b/components/UserInterface/VerticalSpacer.vue
@ -0,0 +1,12 @@
+<template>
+  <span class="spacer"></span>
+</template>
+
+<style scoped>
+.spacer {
+  height: 0.2dvh;
+  display: block;
+  margin: 0.8dvh 0.2dvw;
+  background-color: var(--padding-color);
+}
+</style>
--- a/composables/api.ts
+++ b/composables/api.ts
@ -1,4 +1,4 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";

 export const useApi = () => {
 	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
@ -24,14 +24,26 @@ export const useApi = () => {
 	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 fetchFriends(): Promise<UserResponse[] | undefined> {
+		return await fetchWithApi('/me/friends')
+	}
+
+	async function addFriend(username: string): Promise<void> {
+		return await fetchWithApi('/me/friends', { method: "POST", body: { username } });
+	}
+
+	async function removeFriend(userId: string): Promise<void> {
+		return await fetchWithApi(`/me/friends/${userId}`, { method: "DELETE" });
+	}

 	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 } });
@ -52,6 +64,15 @@ export const useApi = () => {
 	async function createChannel(guildId: string, name: string, description?: string): Promise<void> {
 		return await fetchWithApi(`/guilds/${guildId}/channels`, { method: "POST", body: { name, description } });
 	}
+	
+	async function fetchInstanceStats(apiBase: string): Promise<StatsResponse> {
+		return await $fetch(`${apiBase}/stats`, { method: "GET" });
+	}
+
+	async function sendVerificationEmail(): Promise<void> {
+		const email = useAuth().user.value?.email;
+		await fetchWithApi("/auth/verify-email", { method: "POST", body: { email } });
+	}

 	return {
 		fetchGuilds,
@ -62,10 +83,15 @@ export const useApi = () => {
 		fetchMember,
 		fetchUsers,
 		fetchUser,
+		fetchFriends,
+		addFriend,
+		removeFriend,
 		fetchMessages,
 		fetchMessage,
 		createGuild,
 		joinGuild,
-		createChannel
+		createChannel,
+		fetchInstanceStats,
+		sendVerificationEmail
 	}
 }
--- a/composables/auth.ts
+++ b/composables/auth.ts
@ -7,6 +7,7 @@ export const useAuth = () => {
  async function clearAuth() {
    accessToken.value = null;
    user.value = null;
+	await navigateTo("/login");
  }

  async function register(username: string, email: string, password: string) {
@ -37,13 +38,19 @@ export const useAuth = () => {
    //await fetchUser();
  }

-  async function logout(password: string) {
-    console.log("password:", password);
+  async function logout() {
    console.log("access:", accessToken.value);
-    const hashedPass = await hashPassword(password);
-    console.log("hashed");

-    const res = await fetchWithApi("/auth/revoke", {
+    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
+    clearAuth();
+
+	  return await navigateTo("/login");
+  }
+
+  async function revoke(password: string) {
+    const hashedPass = await hashPassword(password);
+
+    await fetchWithApi("/auth/revoke", {
      method: "POST",
      body:
      {
@ -54,10 +61,6 @@ export const useAuth = () => {
    clearAuth();
  }

-  async function revoke() {
-    clearAuth();
-  }
-
  async function refresh() {
    console.log("refreshing");
    const res = await fetchWithApi("/auth/refresh", {
@ -75,7 +78,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,8 +91,22 @@ export const useAuth = () => {
    return user.value;
  }

+  
+  // as in email the password link
+  async function resetPassword() {
+    // ...
+  }
+
+  async function disableAccount() {
+    // ...
+  }
+
+  async function deleteAccount() {
+    // ...
+  }
+
  return {
-    accessToken,
+	clearAuth,
    register,
    login,
    logout,
--- a/layouts/auth.vue
+++ b/layouts/auth.vue
@ -20,30 +20,7 @@
 				<slot />
 			</div>
 			<div v-if="instanceUrl">
-				Instance URL is set to {{ instanceUrl }}
-			</div>
-			<div v-if="auth.accessToken.value">
-				You're logged in!
-				<form @submit="logout">
-					<div>
-						<label for="logout-password">Password</label>
-						<br>
-						<input type="password" name="logout-password" id="logout-password" v-model="form.password"
-							required>
-					</div>
-					<div>
-						<button type="submit">Log out</button>
-					</div>
-				</form>
-				<div>
-					<button @click="refresh">Refresh</button>
-				</div>
-				<div>
-					<button @click="showUser">Show user</button>
-				</div>
-				<div>
-					<button @click="getUser">Get me</button>
-				</div>
+				Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
 			</div>
 		</div>
 	</div>
@ -51,7 +28,6 @@

 <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>();
@ -63,9 +39,7 @@ const registrationEnabled = useState("registrationEnabled", () => true);
 const auth = useAuth();

 onMounted(async () => {
-	const cookie = useCookie("instance_url").value;
-	instanceUrl.value = cookie;
-	console.log(cookie);
+	instanceUrl.value = useCookie("instance_url").value;
 	console.log("set instance url to:", instanceUrl.value);
 });

@ -73,8 +47,8 @@ async function selectInstance(e: Event) {
 	e.preventDefault();
 	console.log("trying input instance");
 	if (instanceUrlInput.value) {
-		console.log("input has value");
 		const gorbTxtUrl = new URL(`/.well-known/gorb.txt`, instanceUrlInput.value);
+		console.log("input has value");
 		try {
 			console.log("trying to get gorb.txt:", gorbTxtUrl);
 			const res = await $fetch.raw(gorbTxtUrl.href, { responseType: "text" });
@ -87,10 +61,10 @@ async function selectInstance(e: Event) {
 				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);
+				const stats = await useApi().fetchInstanceStats(apiBase.value);
+				if (stats) {
+					registrationEnabled.value = stats.registration_enabled;
+					console.log("set registration enabled value to:", stats.registration_enabled);
 				}
 				return;
 			}
@ -114,30 +88,6 @@ async function selectInstance(e: Event) {
 const form = reactive({
 	password: ""
 });
-
-async function logout(e: Event) {
-	e.preventDefault();
-	await auth.logout(form.password);
-	console.log("logout");
-}
-
-async function refresh(e: Event) {
-	e.preventDefault();
-	await auth.refresh();
-	console.log("refreshed");
-}
-
-async function getUser(e: Event) {
-	e.preventDefault();
-	await auth.getUser();
-	console.log("user:", auth.user.value);
-}
-
-async function showUser(e: Event) {
-	e.preventDefault();
-	console.log("user:", auth.user.value);
-}
-
 </script>

 <style>
@ -148,18 +98,22 @@ async function showUser(e: Event) {
 	align-items: center;
 }

-#auth-form-container,
-#auth-form-container form {
+#auth-form-container {
 	display: flex;
-	width: 50dvw;
+	width: 20dvw;
 	flex-direction: column;
 	align-items: center;
+	text-align: center;
 	gap: 1em;
+	margin-bottom: 2dvh;
 }

 #auth-form-container form {
+	display: flex;
+	flex-direction: column;
 	text-align: left;
 	margin-top: 10dvh;
+	gap: 1em;
 }

 #instance-error-container {
--- a/layouts/client.vue
+++ b/layouts/client.vue
@ -3,27 +3,33 @@
 	<div :class="{ hidden: loading, visible: !loading }" id="client-root">
 		<div id="homebar">
 			<div class="homebar-item">
-				main bar
+				<marquee>
+					gorb!!!!!
+				</marquee>
 			</div>
-			</div>
-		<div id="left-column">
-			<div id="left-column-top">
-				<NuxtLink id="home-button" href="/">
-					<Icon name="lucide:house" class="white" size="2rem" />
+		</div>
+		<div id = "page-content">
+			<div id="left-column">
+				<NuxtLink id="home-button" href="/me">
+					<img class="sidebar-icon" src="/public/icon.svg"/>
 				</NuxtLink>
 				<div id="servers-list">
 					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-						<Icon name="lucide:server" class="white" size="2rem" />
+						<img v-if="guild.icon" class="sidebar-icon" :src="guild.icon" :alt="guild.name"/>
+						<Icon v-else name="lucide:server" class="sidebar-icon white" :alt="guild.name" />
 					</NuxtLink>
 				</div>
+				<div ref="joinServerButton" id="left-column-bottom">
+					<button id="join-server-button" @click.prevent="createDropdown">
+						<Icon id="join-server-icon" name="lucide:square-plus" />
+					</button>
+				</div>
+				<NuxtLink id="settings-menu" href="/settings">
+					<Icon name="lucide:settings" class="sidebar-icon" alt="Settings menu" />
+				</NuxtLink>
 			</div>
-			<div ref="joinServerButton" id="left-column-bottom">
-				<button id="join-server-button" @click.prevent="createDropdown">
-					<Icon id="join-server-icon" name="lucide:square-plus" />
-				</button>
-			</div>
+			<slot />
 		</div>
-		<slot />
 	</div>
 </template>

@ -184,13 +190,11 @@ function createDropdown() {

 <style>
 #client-root {
-	/* border: 1px solid white; */
 	height: 100dvh;
-	display: grid;
-	grid-template-columns: 1fr 4fr 18fr 4fr;
-	grid-template-rows: 4dvh auto;
+	width: 100dvw;
+	display: flex;
+	flex-direction: column;
 	text-align: center;
-	
 }

 .hidden {
@ -199,49 +203,42 @@ function createDropdown() {

 .visible {
 	opacity: 100%;
-	transition-duration: 500ms;
+	transition: opacity 500ms;
 }

 #homebar {
-	grid-row: 1;
-	grid-column: 1 / -1;
+	min-height: 4dvh;
 	display: flex;
 	justify-content: space-evenly;
 	align-items: center;
+	background: var(--optional-topbar-background);
+	background-color: var(--topbar-background-color);
+	border-bottom: 1px solid var(--padding-color);
 	padding-left: 5dvw;
 	padding-right: 5dvw;
 }

-#client-root>div:nth-child(-n+4) {
-	border-bottom: 1px solid rgb(70, 70, 70);
+.homebar-item {
+	width: 100dvw;
 }

-#__nuxt {
+#page-content {
 	display: flex;
-	flex-flow: column;
-}
-
-.grid-column {
-	padding-top: 1dvh;
-}
-
-#home {
-	padding-left: .5dvw;
-	padding-right: .5dvw;
-}
-
-#current-info {
-	grid-column: 2;
-	grid-row: 1;
+	flex-direction: row;
+	flex-grow: 1;
+    overflow: auto;
 }

 #left-column {
-	display: grid;
-	grid-template-rows: 1fr auto;
-	overflow-y: hidden;
-	border-right: 1px solid rgb(70, 70, 70);
-	padding-top: 1dvh;
-	padding-bottom: 1dvh;
+	display: flex;
+	flex-direction: column;
+	gap: .75em;
+	padding-left: .25em;
+	padding-right: .25em;
+	padding-top: .5em;
+	border-right: 1px solid var(--padding-color);
+	background: var(--optional-sidebar-background);
+	background-color: var(--sidebar-background-color);
 }

 #left-column-top {
@ -270,8 +267,9 @@ function createDropdown() {
 #servers-list {
 	display: flex;
 	flex-direction: column;
-	gap: 1dvh;
-	overflow-y: scroll;
+	gap: 1em;
+	width: 3.2rem;	
+	padding-top: .5em;
 }

 #join-server-button {
@ -288,4 +286,37 @@ function createDropdown() {
 	float: left;
 }

+#middle-left-column {
+	padding-left: .25em;
+	padding-right: .25em;
+	border-right: 1px solid var(--padding-color);
+	min-width: 13em;
+	max-width: 13em;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+.sidebar-icon {
+	width: 3rem;
+	height: 3rem;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+
+#home-button {
+	border-bottom: 1px solid var(--padding-color);
+	padding-bottom: .375em;
+}
+
+#settings-menu {
+	position: absolute;
+	bottom: .25em;
+
+	color: var(--primary-color)
+}
+
+#settings-menu:hover {
+	color: var(--primary-highlighted-color)
+}
+
 </style>
--- a/middleware/auth.global.ts
+++ b/middleware/auth.global.ts
@ -2,7 +2,21 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 	console.log("to.fullPath:", to.fullPath);
 	const loading = useState("loading");
 	const accessToken = useCookie("access_token").value;
-	if (["/login", "/register"].includes(to.path)) {
+	const apiBase = useCookie("api_base").value;
+	const { fetchInstanceStats } = useApi();
+	
+	console.log("[AUTH] instance url:", apiBase);
+	if (apiBase && !Object.keys(to.query).includes("special") && to.path != "/verify-email") {
+		const user = await useAuth().getUser();
+		const stats = await fetchInstanceStats(apiBase);
+		console.log("[AUTH] stats:", stats);
+		console.log("[AUTH] email verification check:", user?.email && !user.email_verified && stats.email_verification_required);
+		if (user?.email && !user.email_verified && stats.email_verification_required) {
+			return await navigateTo("/register?special=verify_email");
+		}
+	}
+
+	if (["/login", "/register"].includes(to.path) && !Object.keys(to.query).includes("special")) {
 		console.log("path is login or register");
 		const apiBase = useCookie("api_base");
 		console.log("apiBase gotten:", apiBase.value);
@ -19,6 +33,14 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 				if (parsed.ApiBaseUrl) {
 					apiBase.value = `${parsed.ApiBaseUrl}/v${apiVersion}`;
 					console.log("set apiBase to:", parsed.ApiBaseUrl);
+					console.log("hHEYOO");
+					const instanceUrl = useCookie("instance_url");
+					console.log("hHEYOO 2");
+					console.log("instance url:", instanceUrl.value);
+					if (!instanceUrl.value) {
+						instanceUrl.value = `${requestUrl.protocol}//${requestUrl.host}`;
+						console.log("set instance url to:", instanceUrl.value);
+					}
 				}
 			}
 		}
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@ -27,7 +27,12 @@ export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiVersion: 1,
-      messageGroupingMaxDifference: 300000
+      messageGroupingMaxDifference: 300000,
+      buildTimeString: new Date().toISOString(),
+      gitHash: process.env.GIT_SHORT_REV || "N/A",
+      defaultThemes: [
+        "light", "ash", "dark", "rainbow-capitalism"
+      ]
    }
  },
  /* nitro: {
--- a/package.json
+++ b/package.json
@ -14,6 +14,7 @@
    "@nuxt/icon": "1.13.0",
    "@nuxt/image": "1.10.0",
    "@pinia/nuxt": "0.11.0",
+    "cropperjs": "^2.0.0",
    "dompurify": "^3.2.6",
    "marked": "^15.0.12",
    "nuxt": "^3.17.0",
--- a/pages/index.vue
+++ b/pages/index.vue
@ -5,6 +5,7 @@
 </template>

 <script lang="ts" setup>
+await navigateTo("/me/", { replace: true })

 definePageMeta({
 	layout: "client"
--- a/pages/login.vue
+++ b/pages/login.vue
@ -44,10 +44,9 @@ 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) {
-		registrationEnabled.value = data.value.registration_enabled;
+	const stats = await useApi().fetchInstanceStats(apiBase.value);
+	if (stats) {
+		registrationEnabled.value = stats.registration_enabled;
 	}
 }

--- a/pages/me/[userId].vue
+++ b/pages/me/[userId].vue
@ -0,0 +1,15 @@
+<template>
+  <NuxtLayout name="client">
+	<DirectMessagesSidebar />
+	<MessageArea channel-url="channels/01970e8c-a09c-76a0-9c98-80a43364bea7"/> <!-- currently just links to the default channel -->
+
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+</script>
+
+<style>
+
+</style>
--- a/pages/me/friends.vue
+++ b/pages/me/friends.vue
@ -0,0 +1,56 @@
+<template>
+  <NuxtLayout name="client">
+	<DirectMessagesSidebar />
+	<div :id="$style['page-content']">
+		<div :id="$style['navigation-bar']">
+			<Button :text="`All Friends – ${friends?.length}`" variant="neutral" :callback="() => updateFilter('all')" />
+			<Button :text="`Online – ${0}`" variant="neutral" :callback="() => updateFilter('online')" />
+			<Button :text="`Pending – ${0}`" variant="neutral" :callback="() => updateFilter('pending')" />
+			<Button text="Add Friend" variant="normal" :callback="() => updateFilter('add')" />
+		</div>
+		
+		<div>
+			<AddFriend v-if="filter == 'add'"></AddFriend>
+			<FriendsList v-else :variant="filter"></FriendsList>
+		</div>
+
+	</div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+import Button from '~/components/UserInterface/Button.vue';
+import AddFriend from '~/components/Me/AddFriend.vue';
+import FriendsList from '~/components/Me/FriendsList.vue';
+
+const { fetchFriends } = useApi();
+
+let filter = ref("all");
+
+const friends = await fetchFriends()
+
+function updateFilter(newFilter: string) {
+	filter.value = newFilter;
+}
+</script>
+
+<style module>
+#page-content {
+	display: flex;
+	flex-direction: column;
+	
+	flex-grow: 1;
+
+	margin: .75em;
+}
+
+#navigation-bar {
+	display: flex;
+	align-items: left;
+	text-align: left;
+	flex-direction: row;
+
+	gap: .5em;
+}
+</style>
--- a/pages/me/index.vue
+++ b/pages/me/index.vue
@ -0,0 +1,13 @@
+<template>
+  <NuxtLayout name="client">
+	<DirectMessagesSidebar />
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import DirectMessagesSidebar from '~/components/Me/DirectMessagesSidebar.vue';
+</script>
+
+<style>
+
+</style>
--- a/pages/register.vue
+++ b/pages/register.vue
@ -1,6 +1,6 @@
 <template>
  <NuxtLayout>
-    <form v-if="registrationEnabled" @submit="register">
+    <form v-if="registrationEnabled && !registrationSubmitted && !showEmailVerificationScreen" @submit="register">
      <div>
        <!--
        <span class="form-error" v-if="errors.username.length > 0">
@ -32,32 +32,87 @@
        <button type="submit">Register</button>
      </div>
    </form>
+	<div v-else-if="registrationEnabled && (registrationSubmitted || showEmailVerificationScreen) && !emailSent">
+		<p v-if="emailVerificationRequired">
+			This instance requires email verification to use it.
+			<br><br>
+			<span v-if="registrationSubmitted">
+				Please open the link sent to your email.
+			</span>
+			<span v-else-if="showEmailVerificationScreen">
+				Please click on the link you've already received, or click on the button below to receive a new email.
+			</span>
+		</p>
+		<p v-else>
+			Would you like to verify your email?
+			<!--
+			<br>
+			This is required for resetting your password and making other important changes.
+			-->
+		</p>
+		<Button v-if="(!emailVerificationRequired || showEmailVerificationScreen) && !emailSent" text="Send email" variant="neutral" :callback="sendEmail"></Button>
+	</div>
+	<div v-else-if="emailSent">
+		<p>
+			An email has been sent and should arrive soon.
+			<br>
+			If you don't see it in your inbox, try checking the spam folder.
+		</p>
+	</div>
    <div v-else>
      <h3>This instance has disabled registration.</h3>
    </div>
-    <div>
-      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+    <div v-if="loggedIn">
+	  <Button text="Log out" variant="scary" :callback="() => {}"></Button>
+	</div>
+    <div v-else>
+	  Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
    </div>
  </NuxtLayout>
 </template>

 <script lang="ts" setup>
-import type { StatsResponse } from '~/types/interfaces';
 definePageMeta({
  layout: "auth"
-})
+});

 const registrationEnabled = useState("registrationEnabled", () => true);
+const emailVerificationRequired = useState("emailVerificationRequired", () => false);
+const registrationSubmitted = ref(false);
+const emailSent = ref(false);
+
+const auth = useAuth();
+
+const loggedIn = ref(await auth.getUser());
+
+const query = new URLSearchParams(useRoute().query as Record<string, string>);
+
+const user = await useAuth().getUser();
+
+if (user?.email_verified) {
+	if (query.get("redirect_to")) {
+		await navigateTo(query.get("redirect_to"));
+	} else {
+		await navigateTo("/");
+	}
+}
+
+const showEmailVerificationScreen = query.get("special") == "verify_email";
+console.log("show email verification screen?", showEmailVerificationScreen);
+
+const { fetchInstanceStats, sendVerificationEmail } = useApi();

 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 (status.value == "success" && data.value) {
-		registrationEnabled.value = data.value.registration_enabled;
-		console.log("set registration enabled value to:", data.value.registration_enabled);
+	const stats = await fetchInstanceStats(apiBase.value);
+	if (stats) {
+		registrationEnabled.value = stats.registration_enabled;
+		console.log("set registration enabled value to:", stats.registration_enabled);
+		emailVerificationRequired.value = stats.email_verification_required;
+		console.log("set email verification required value to:", stats.email_verification_required);
 	}
 }

@ -90,8 +145,6 @@ const errorMessages = reactive({
 */

 //const authStore = useAuthStore();
-const auth = useAuth();
-const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
 const loginUrl = `/login?${searchParams}`

@ -133,13 +186,22 @@ async function register(e: Event) {
  console.log("Sending registration data");
  try {
    await auth.register(form.username, form.email, form.password);
-    return await navigateTo(query.redirect_to);
+	if (!emailVerificationRequired.value) {
+		return await navigateTo(query.get("redirect_to"));
+	}
+	await sendVerificationEmail();
+	registrationSubmitted.value = true;
  } catch (error) {
    console.error("Error registering:", error);
  }
  //return navigateTo(redirectTo ? redirectTo as string : useAppConfig().baseURL as string);
 }

+async function sendEmail() {
+	await sendVerificationEmail();
+	emailSent.value = true;
+}
+
 </script>

 <style></style>
--- a/pages/servers/[serverId]/channels/[channelId].vue
+++ b/pages/servers/[serverId]/channels/[channelId].vue
@ -9,7 +9,7 @@
 				<GuildOptionsMenu v-if="showGuildSettings" />
 			</div>
 			<div id="channels-list">
-				<Channel v-for="channel of channels" :name="channel.name"
+				<ChannelEntry 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}`" />
 			</div>
@ -17,17 +17,14 @@
 		<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>
+				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
 			</div>
 		</div>
 	</NuxtLayout>
 </template>

 <script lang="ts" setup>
+import ChannelEntry from "~/components/Guild/ChannelEntry.vue";

 const route = useRoute();

@ -44,7 +41,7 @@ const members = ref<GuildMemberResponse[]>();
 const showInvitePopup = ref(false);
 const showGuildSettings = ref(false);

-import { type ChannelResponse, type GuildMemberResponse, type GuildResponse, type MessageResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";

 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
@ -83,46 +80,53 @@ function toggleInvitePopup(e: Event) {
 	e.preventDefault();
 	showInvitePopup.value = !showInvitePopup.value;
 }
+
+function handleMemberClick(member: GuildMemberResponse) {
+}
 </script>

 <style>
 #middle-left-column {
-	padding-left: 1dvw;
-	padding-right: 1dvw;
-	border-right: 1px solid rgb(70, 70, 70);
+	padding-left: .5em;
+	padding-right: .5em;
+	border-right: 1px solid var(--padding-color);
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
 }

 #members-container {
-	padding-top: 1dvh;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
-	border-left: 1px solid rgb(70, 70, 70);
+	min-width: 15rem;
+	max-width: 15rem;
+	border-left: 1px solid var(--padding-color);
+	background: var(--optional-member-list-background);
 }

 #members-list {
 	display: flex;
 	flex-direction: column;
+	overflow-x: hidden;
 	overflow-y: scroll;
-	padding-left: 1dvw;
-	padding-right: 1dvw;
-	margin-top: 1dvh;
+	padding-left: 1.25em;
+	padding-right: 1.25em;
+	padding-top: 0.75em;
+	padding-bottom: 0.75em;
+	max-height: calc(100% - 0.75em * 2); /* 100% - top and bottom */
 }

 .member-item {
-	display: grid;
-	grid-template-columns: 2dvw 1fr;
+	display: flex;
 	margin-top: .5em;
 	margin-bottom: .5em;
-	gap: 1em;
+	gap: .5em;
 	align-items: center;
 	text-align: left;
-
+	cursor: pointer;
 }

 #channels-list {
 	display: flex;
 	flex-direction: column;
-	gap: 1dvh;
+	gap: .5em;
 }

 .member-avatar {
--- a/pages/settings.vue
+++ b/pages/settings.vue
@ -0,0 +1,209 @@
+<template>
+  <div id="settings-page-container">
+    <div id="settings-page">
+      <div id="sidebar">
+        <ul>
+          <p>
+            <span @click="$router.go(-1)">
+              <Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
+            </span>
+          </p>
+          <VerticalSpacer />
+
+          <!-- categories and dynamic settings pages -->
+          <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>
+            <VerticalSpacer />
+          </div>
+          
+          <p>
+            <Button text="Log Out" :callback=logout variant="scary"></Button>
+          </p>
+          <VerticalSpacer />
+
+          <p id="links-and-socials">
+            <NuxtLink href="https://git.gorb.app/gorb/frontend" title="Source"><Icon name="lucide:git-branch-plus" /></NuxtLink>
+            <NuxtLink href="https://docs.gorb.app" title="Backend Documentation"><Icon name="lucide:book-open-text" /></NuxtLink>
+          </p>
+          
+          <p style="font-size: .8em; color: var(--secondary-text-color)">
+            Version Hash: {{ appConfig.public.gitHash }}
+            <br>
+            Build Time: {{ appConfig.public.buildTimeString }}
+          </p>
+        </ul>
+      </div>
+      <div id="sub-page">
+        <component :is="currentPage.pageData" />
+      </div>
+    </div>
+  </div>
+</template>
+
+
+<script lang="ts" setup>
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import Button from '~/components/UserInterface/Button.vue';
+
+const { logout } = useAuth()
+const appConfig = useRuntimeConfig()
+
+interface Page {
+  displayName: string;
+  pageData: any; // is actually Component but TS is yelling at me :(
+}
+  
+interface Category {
+  displayName: string;
+  pages: Page[];
+}
+
+import Profile from '~/components/Settings/UserSettings/Profile.vue';
+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: "Profile", pageData: Profile },
+      { displayName: "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;
+};
+
+// redirects to you privacy if you go to settings#privacy
+onMounted(() => {
+  const hash = window.location.hash.substring(1).toLowerCase();
+  const foundPage = categories.flatMap(category => category.pages).find(page => page.displayName.toLowerCase() === hash);
+
+  if (foundPage) {
+    currentPage.value = foundPage;
+    selectedPage.value = foundPage.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: var(--optional-channel-list-background);
+  background-color: var(--sidebar-background-color);
+  color: var(--text-color);
+  padding: 1dvh 1dvw;
+  margin-left: 0;
+
+  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 p {
+  margin: 2dvh 0.8dvw;
+}
+
+.sidebar-focus {
+  background-color: var(--sidebar-highlighted-background-color);
+}
+
+#sidebar li:hover {
+  background-color: var(--sidebar-highlighted-background-color);
+}
+
+#sub-page {
+  flex-grow: 1;
+  min-width: 70dvw;
+  max-width: 70dvw;
+  padding-left: 1.5rem;
+  margin-right: auto;
+
+  overflow-y: auto;
+  height: 100vh;
+}
+
+.back-button {
+  cursor: pointer;
+  color: var(--primary-color);
+  transition: color 100ms;
+}
+
+.back-button:hover{
+  color: var(--primary-highlighted-color);
+}
+
+#links-and-socials * {
+  margin-right: 0.2em;
+}
+
+/* applies to child pages too */
+:deep(.subtitle) {
+  display: block;
+  font-size: 0.8em;
+  font-weight: 800;
+  margin: 4dvh 0 0.5dvh 0.25dvw;
+}
+</style>
--- a/pages/verify-email.vue
+++ b/pages/verify-email.vue
@ -15,6 +15,12 @@ const token = useRoute().query.token;
 try {
 	const res = await fetchWithApi("/auth/verify-email", { query: { token } });
 	console.log("hi");
+	const query = useRoute().query;
+	if (query.redirect_to) {
+		await navigateTo(`/?redirect_to=${query.redirect_to}`);
+	} else {
+		await navigateTo("/");
+	}
 } catch (error) {
 	console.error("Error verifying email:", error);
 	errorMessage.value = error;
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -20,6 +20,9 @@ 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)))
+      cropperjs:
+        specifier: ^2.0.0
+        version: 2.0.0
      dompurify:
        specifier: ^3.2.6
        version: 3.2.6
@ -205,6 +208,39 @@ packages:
    resolution: {integrity: sha512-Ir+AOibqzrIsL6ajt3Rz3LskB7OiMVHqltZmspbW/TJuTVuyOMirVqAkjfY6JISiLHgyNqicAC8AyHHGzNd/dA==}
    engines: {node: '>=0.1.90'}

+  '@cropper/element-canvas@2.0.0':
+    resolution: {integrity: sha512-GPtGJgSm92crJhhhwUsaMw3rz2KfJWWSz7kRAlufFEV/EHTP5+6r6/Z1BCGRna830i+Avqbm435XLOtA7PVJwA==}
+
+  '@cropper/element-crosshair@2.0.0':
+    resolution: {integrity: sha512-KfPfyrdeFvUC31Ws7ATtcalWWSaMtrC6bMoCipZhqbUOE7wZoL4ecDSL6BUOZxPa74awZUqfzirCDjHvheBfyw==}
+
+  '@cropper/element-grid@2.0.0':
+    resolution: {integrity: sha512-i78SQ0IJTLFveKX6P7svkfMYVdgHrQ8ZmmEw8keFy9n1ZVbK+SK0UHK5FNMRNI/gtVhKJOGEnK/zeyjUdj4Iyw==}
+
+  '@cropper/element-handle@2.0.0':
+    resolution: {integrity: sha512-ZJvW+0MkK9E8xYymGdoruaQn2kwjSHFpNSWinjyq6csuVQiCPxlX5ovAEDldmZ9MWePPtWEi3vLKQOo2Yb0T8g==}
+
+  '@cropper/element-image@2.0.0':
+    resolution: {integrity: sha512-9BxiTS/aHRmrjopaFQb9mQQXmx4ruhYHGkDZMVz24AXpMFjUY6OpqrWse/WjzD9tfhMFvEdu17b3VAekcAgpeg==}
+
+  '@cropper/element-selection@2.0.0':
+    resolution: {integrity: sha512-ensNnbIfJsJ8bhbJTH/RXtk2URFvTOO4TvfRk461n2FPEC588D7rwBmUJxQg74IiTi4y1JbCI+6j+4LyzYBLCQ==}
+
+  '@cropper/element-shade@2.0.0':
+    resolution: {integrity: sha512-jv/2bbNZnhU4W+T4G0c8ADocLIZvQFTXgCf2RFDNhI5UVxurzWBnDdb8Mx8LnVplnkTqO+xUmHZYve0CwgWo+Q==}
+
+  '@cropper/element-viewer@2.0.0':
+    resolution: {integrity: sha512-zY+3VRN5TvpM8twlphYtXw0tzJL2VgzeK7ufhL1BixVqOdRxwP13TprYIhqwGt9EW/SyJZUiaIu396T89kRX8A==}
+
+  '@cropper/element@2.0.0':
+    resolution: {integrity: sha512-lsthn0nQq73GExUE7Mg/ss6Q3RXADGDv055hxoLFwvl/wGHgy6ZkYlfLZ/VmgBHC6jDK5IgPBFnqrPqlXWSGBA==}
+
+  '@cropper/elements@2.0.0':
+    resolution: {integrity: sha512-PQkPo1nUjxLFUQuHYu+6atfHxpX9B41Xribao6wpvmvmNIFML6LQdNqqWYb6LyM7ujsu71CZdBiMT5oetjJVoQ==}
+
+  '@cropper/utils@2.0.0':
+    resolution: {integrity: sha512-cprLYr+7kK3faGgoOsTW9gIn5sefDr2KwOmgyjzIXk+8PLpW8FgFKEg5FoWfRD5zMAmkCBuX6rGKDK3VdUEGrg==}
+
  '@dabh/diagnostics@2.0.3':
    resolution: {integrity: sha512-hrlQOIi7hAfzsMqlGSFyVucrx38O+j6wiGOf//H2ecvIEqYN4ADBSS2iLMh5UFyDunCNniUIPk/q3riFv45xRA==}

@ -1900,6 +1936,9 @@ packages:
    resolution: {integrity: sha512-onMB0OkDjkXunhdW9htFjEhqrD54+M94i6ackoUkjHKbRnXdyEyKRelp4nJ1kAz32+s27jP1FsebpJCVl0BsvA==}
    engines: {node: '>=18.0'}

+  cropperjs@2.0.0:
+    resolution: {integrity: sha512-TO2j0Qre01kPHbow4FuTrbdEB4jTmGRySxW49jyEIqlJZuEBfrvCTT0vC3eRB2WBXudDfKi1Onako6DKWKxeAQ==}
+
  cross-spawn@7.0.6:
    resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
    engines: {node: '>= 8'}
@ -4965,6 +5004,72 @@ snapshots:

  '@colors/colors@1.6.0': {}

+  '@cropper/element-canvas@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-crosshair@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-grid@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-handle@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-image@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-selection@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-image': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-shade@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-selection': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element-viewer@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-image': 2.0.0
+      '@cropper/element-selection': 2.0.0
+      '@cropper/utils': 2.0.0
+
+  '@cropper/element@2.0.0':
+    dependencies:
+      '@cropper/utils': 2.0.0
+
+  '@cropper/elements@2.0.0':
+    dependencies:
+      '@cropper/element': 2.0.0
+      '@cropper/element-canvas': 2.0.0
+      '@cropper/element-crosshair': 2.0.0
+      '@cropper/element-grid': 2.0.0
+      '@cropper/element-handle': 2.0.0
+      '@cropper/element-image': 2.0.0
+      '@cropper/element-selection': 2.0.0
+      '@cropper/element-shade': 2.0.0
+      '@cropper/element-viewer': 2.0.0
+
+  '@cropper/utils@2.0.0': {}
+
  '@dabh/diagnostics@2.0.3':
    dependencies:
      colorspace: 1.1.4
@ -6895,6 +7000,11 @@ snapshots:

  croner@9.0.0: {}

+  cropperjs@2.0.0:
+    dependencies:
+      '@cropper/elements': 2.0.0
+      '@cropper/utils': 2.0.0
+
  cross-spawn@7.0.6:
    dependencies:
      path-key: 3.1.1
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/icon.svg
+++ b/public/icon.svg
@ -0,0 +1,121 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="512"
+   height="512"
+   viewBox="0 0 512 512"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.4.2 (ebf0e940d0, 2025-05-08)"
+   sodipodi:docname="drawing.svg"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#000000"
+     borderopacity="0.25"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="px"
+     inkscape:zoom="0.35399828"
+     inkscape:cx="2.8248725"
+     inkscape:cy="731.64198"
+     inkscape:window-width="1440"
+     inkscape:window-height="863"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1" />
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="matrix(0.93746412,0,0,0.93746412,18.749279,18.749282)">
+    <g
+       id="g1543"
+       style="display:inline"
+       transform="matrix(3.7794744,0,0,3.7794744,-150.52528,-298.33565)">
+      <circle
+         style="fill:#000000;stroke-width:0.264583"
+         id="path60"
+         cx="106.78797"
+         cy="145.89536"
+         r="72.25267" />
+      <circle
+         style="fill:#f4741f;fill-opacity:1;stroke-width:0.257596"
+         id="path899"
+         cx="106.78797"
+         cy="145.89536"
+         r="65.485863" />
+    </g>
+    <g
+       id="g1460-1"
+       transform="matrix(4.1481001,0,0,4.1481002,45.149918,-354.52402)"
+       style="display:inline">
+      <circle
+         style="fill:#000000;fill-opacity:1;stroke-width:0.29496"
+         id="path1129-3"
+         cx="78.140816"
+         cy="136.65092"
+         r="17.372646" />
+      <circle
+         style="fill:#f4741f;fill-opacity:1;stroke-width:0.294225"
+         id="path1354-0"
+         cx="86.078323"
+         cy="136.65092"
+         r="11.576728" />
+    </g>
+    <g
+       id="g1460-1-3"
+       transform="matrix(4.1481001,0,0,4.1481002,-187.26754,-354.52402)"
+       style="display:inline">
+      <circle
+         style="fill:#000000;fill-opacity:1;stroke-width:0.29496"
+         id="path1129-3-4"
+         cx="78.140816"
+         cy="136.65092"
+         r="17.372646" />
+      <circle
+         style="fill:#f4741f;fill-opacity:1;stroke-width:0.294225"
+         id="path1354-0-6"
+         cx="86.078323"
+         cy="136.65092"
+         r="11.576728" />
+    </g>
+    <g
+       id="g3530"
+       transform="matrix(3.7794744,0,0,3.7794744,-150.52528,-294.3357)">
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 c 0,0 -17.461156,15.02392 -28.153795,0.49121"
+         id="path1817" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 c 0,0 17.46116,15.02392 28.15379,0.49121"
+         id="path1817-6" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 -5.74494,-9.7603"
+         id="path2191"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 106.78797,168.1205 5.74494,-9.7603"
+         id="path2191-6"
+         sodipodi:nodetypes="cc" />
+      <path
+         style="fill:none;stroke:#000000;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         d="m 101.04303,158.3602 h 11.48988"
+         id="path2675"
+         sodipodi:nodetypes="cc" />
+    </g>
+  </g>
+</svg>
--- a/public/themes/ash.css
+++ b/public/themes/ash.css
@ -0,0 +1,21 @@
+:root {
+	--text-color: #f0e5e0;
+	--secondary-text-color: #e8e0db;
+	--reply-text-color: #969696;
+
+	--chat-background-color: #2f2e2d;
+    --chat-highlighted-background-color: #3f3b38;
+	--sidebar-background-color: #3e3a37;
+	--sidebar-highlighted-background-color: #46423b;
+	--topbar-background-color: #3a3733;
+	--chatbox-background-color: #3a3733;
+
+    --padding-color: #e0e0e0;
+    
+	--primary-color: #f07028;
+	--primary-highlighted-color: #f28f4b;
+	--secondary-color: #683820;
+	--secondary-highlighted-color: #885830;
+	--accent-color: #a04b24;
+	--accent-highlighted-color: #b86038;
+}
--- a/public/themes/ash.json
+++ b/public/themes/ash.json
@ -0,0 +1,6 @@
+{
+	"displayName": "Ash",
+	"previewGradient": "45deg, #2f2e2d, #46423b",
+	"complementaryColor": "white",
+	"themeUrl": "ash.css"
+}
--- a/public/themes/dark.css
+++ b/public/themes/dark.css
@ -0,0 +1,21 @@
+:root {
+	--text-color: #f7eee8;
+	--secondary-text-color: #f0e8e4;
+	--reply-text-color: #969696;
+
+	--chat-background-color: #1f1e1d;
+    --chat-highlighted-background-color: #2f2b28;
+	--sidebar-background-color: #2e2a27;
+	--sidebar-highlighted-background-color: #36322b;
+	--topbar-background-color: #2a2723;
+	--chatbox-background-color: #1a1713;
+
+    --padding-color: #484848;
+    
+	--primary-color: #f4741f;
+	--primary-highlighted-color: #f68a3f;
+	--secondary-color: #7c4018;
+	--secondary-highlighted-color: #8f5b2c;
+	--accent-color: #b35719;
+	--accent-highlighted-color: #c76a2e;
+}
--- a/public/themes/dark.json
+++ b/public/themes/dark.json
@ -0,0 +1,6 @@
+{
+	"displayName": "Dark",
+	"previewGradient": "45deg, #1f1e1d, #36322b",
+	"complementaryColor": "white",
+	"themeUrl": "dark.css"
+}
--- a/public/themes/description.css
+++ b/public/themes/description.css
@ -0,0 +1,30 @@
+/* this is not a real theme, but rather a template for themes */
+:root {
+	--text-color: #161518;
+	--secondary-text-color: #2b2930;
+	--reply-text-color: #969696;
+
+    --chat-background-color: #80808000;
+    --chat-highlighted-background-color: #ffffff20;
+	--sidebar-background-color: #80808000;
+	--sidebar-highlighted-background-color: #ffffff20;
+	--topbar-background-color: #80808000;
+	--chatbox-background-color: #80808000;
+
+    --padding-color: #80808000;
+    
+    --primary-color: #21b1ff80;
+    --primary-highlighted-color: #18a0df80;
+    --secondary-color: #ffd80080;
+    --secondary-highlighted-color: #dfb80080;
+    --accent-color: #ff218c80;
+    --accent-highlighted-color: #df1b6f80;
+
+    --optional-body-background: ; /* background element for the body */
+    --optional-chat-background: ; /* background element for the chat box */
+	--optional-topbar-background: ; /* background element for the topbar */
+	--optional-sidebar-background: ; /* background element for left server sidebar */
+	--optional-channel-list-background: ; /* background element for channel list and settings list */
+	--optional-member-list-background: ; /* background element for member list */
+	--optional-message-box-background: ; /* background element for message box */
+}
--- a/public/themes/light.css
+++ b/public/themes/light.css
@ -0,0 +1,21 @@
+:root {
+	--text-color: #170f08;
+	--secondary-text-color: #2f2b28;
+	--reply-text-color: #969696;
+
+    --chat-background-color: #f0ebe8;
+    --chat-highlighted-background-color: #e8e4e0;
+	--sidebar-background-color: #dbd8d4;
+	--sidebar-highlighted-background-color: #d4d0ca;
+	--topbar-background-color: #dfdbd6;
+	--chatbox-background-color: #dfdbd6;
+
+    --padding-color: #484848;
+    
+    --primary-color: #df5f0b;
+    --primary-highlighted-color: #ef6812;
+    --secondary-color: #e8ac84;
+    --secondary-highlighted-color: #f8b68a;
+    --accent-color: #e68b4e;
+    --accent-highlighted-color: #f69254;
+}
--- a/public/themes/light.json
+++ b/public/themes/light.json
@ -0,0 +1,6 @@
+{
+	"displayName": "Light",
+	"previewGradient": "45deg, #f0ebe8, #d4d0ca",
+	"complementaryColor": "black",
+	"themeUrl": "light.css"
+}
--- a/public/themes/rainbow-capitalism.css
+++ b/public/themes/rainbow-capitalism.css
@ -0,0 +1,29 @@
+:root {
+	--text-color: #161518;
+	--secondary-text-color: #2b2930;
+	--reply-text-color: #969696;
+
+    --chat-background-color: #80808000;
+    --chat-highlighted-background-color: #ffffff20;
+	--sidebar-background-color: #80808000;
+	--sidebar-highlighted-background-color: #ffffff20;
+	--topbar-background-color: #80808000;
+	--chatbox-background-color: #80808040;
+
+    --padding-color: #80808000;
+    
+    --primary-color: #21b1ff80;
+    --primary-highlighted-color: #18a0df80;
+    --secondary-color: #ffd80080;
+    --secondary-highlighted-color: #dfb80080;
+    --accent-color: #ff218c80;
+    --accent-highlighted-color: #df1b6f80;
+
+    /* --optional-body-background: background */
+    --optional-body-background: linear-gradient(45deg, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #ed222480, #f35b2280, #f9962180, #f5c11e80, #f1eb1b80, #f1eb1b80, #f1eb1b80, #63c72080, #0c9b4980, #21878d80, #3954a580, #61379b80, #93288e80);
+	--optional-topbar-background: linear-gradient(-12.5deg, cyan, pink, white, pink, cyan);
+	--optional-sidebar-background: linear-gradient(90deg, #55cdfcd0, #f7a8b8d0, #ffffffd0, #f7a8b8d0, #55cdfcd0);
+	--optional-channel-list-background: linear-gradient(82deg, #d52c00b0, #e29688b0, #ffffffb0, #d27fa4b0, #a20062b0);
+	--optional-member-list-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
+    --optional-message-box-background: linear-gradient(3deg, #ff0080, #c8259d, #8c4799, #442e9f, #0032a0);
+}
--- a/public/themes/rainbow-capitalism.json
+++ b/public/themes/rainbow-capitalism.json
@ -0,0 +1,6 @@
+{
+	"displayName": "Woke",
+	"previewGradient": "45deg, #ed2224, #ed2224, #f35b22, #f99621, #f5c11e, #f1eb1b 27%, #f1eb1b, #f1eb1b 33%, #63c720, #0c9b49, #21878d, #3954a5, #61379b, #93288e, #93288e",
+	"complementaryColor": "white",
+	"themeUrl": "rainbow-capitalism.css"
+}
--- a/types/hooks.ts
+++ b/types/hooks.ts
@ -0,0 +1,7 @@
+import type { RuntimeNuxtHooks } from 'nuxt/schema';
+
+declare module "nuxt/schema" {
+	interface RuntimeNuxtHooks {
+		"app:message:right-clicked": (payload: { messageId: string }) => void
+	}
+}
--- a/types/interfaces.ts
+++ b/types/interfaces.ts
@ -44,7 +44,8 @@ export interface MessageResponse {
 	channel_uuid: string,
 	user_uuid: string,
 	message: string,
-	user: UserResponse
+	reply_to: string | null,
+	user: UserResponse,
 }

 export interface InviteResponse {
@ -58,9 +59,12 @@ export interface UserResponse {
 	username: string,
 	display_name: string | null,
 	avatar: string | null,
+	pronouns: string | null,
+	about: string | null,
 	email?: string,
-	email_verified?: boolean
-  }
+	email_verified?: boolean,
+	friends_since: string | null,
+}

 export interface StatsResponse {
 	accounts: number,
@ -94,3 +98,8 @@ export interface ModalProps {
 	onClose?: () => void,
 	onCancel?: () => void
 }
+
+export interface ContextMenuItem {
+	name: string,
+	callback: (...args: any[]) => any;
+}
--- a/types/props.ts
+++ b/types/props.ts
@ -0,0 +1,20 @@
+import type { MessageResponse, UserResponse } from "./interfaces";
+
+export interface MessageProps {
+	class?: string,
+	img?: string | null,
+	author?: UserResponse
+	text: string,
+	timestamp: number,
+	format: "12" | "24",
+	type: "normal" | "grouped",
+	marginBottom: boolean,
+	last: boolean,
+	messageId: string,
+	replyingTo?: boolean,
+	editing?: boolean,
+	me: UserResponse
+	message: MessageResponse,
+	replyMessage?: MessageResponse
+	isMentioned?: boolean,
+}
--- a/types/settings.ts
+++ b/types/settings.ts
@ -0,0 +1,9 @@
+export interface ClientSettings {
+	selectedThemeId?: string, // the ID of the theme, not the URL, for example "dark"
+	timeFormat?: TimeFormat
+}
+
+export interface TimeFormat {
+	index: number,
+	format: "auto" | "12" | "24"
+}
--- a/utils/createContextMenu.ts
+++ b/utils/createContextMenu.ts
@ -0,0 +1,17 @@
+import { render } from "vue";
+import ContextMenu from "~/components/ContextMenu.vue";
+import type { ContextMenuItem } from "~/types/interfaces";
+
+export default (e: MouseEvent, menuItems: ContextMenuItem[]) => {
+  console.log("Rendering new context menu");
+  const menuContainer = document.createElement("div");
+  menuContainer.id = "context-menu";
+  document.body.appendChild(menuContainer);
+  const contextMenu = h(ContextMenu, {
+  	menuItems,
+  	cursorX: e.clientX,
+  	cursorY: e.clientY 
+  });
+  render(contextMenu, menuContainer);
+  console.log("Rendered");
+}
--- a/utils/editMessage.ts
+++ b/utils/editMessage.ts
@ -0,0 +1,24 @@
+import type { MessageProps } from "~/types/props";
+
+export default async (element: HTMLDivElement, props: MessageProps) => {
+	console.log("message:", element);
+	const me = await fetchWithApi("/me") as any;
+	if (props.author?.uuid == me.uuid) {
+		const text = element.getElementsByClassName("message-text")[0] as HTMLDivElement;
+		text.contentEditable = "true";
+		text.focus();
+		const range = document.createRange();
+		range.selectNodeContents(text);
+		range.collapse(false);
+		const selection = window.getSelection();
+		selection?.removeAllRanges();
+		selection?.addRange(range);
+		element.addEventListener("keyup", (e) => {
+			console.log("key released:", e.key);
+			if (e.key == "Escape") {
+				text.contentEditable = "false";
+			}
+			text.blur();
+		}, { once: true });
+	}
+}
--- a/utils/fetchWithApi.ts
+++ b/utils/fetchWithApi.ts
@ -18,7 +18,7 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
    return;
  }
  console.log("path:", path)
-  const { revoke, refresh } = useAuth();
+  const { clearAuth, refresh } = useAuth();
  
  let headers: HeadersInit = {};
  
@ -61,8 +61,7 @@ export default async <T>(path: string, options: NitroFetchOptions<string> = {})
            if (error?.response?.status === 401) {
              console.log("Refresh returned 401");
              reauthFailed = true;
-              console.log("Revoking");
-              await revoke();
+              await clearAuth()
              console.log("Redirecting to login");
              await navigateTo("/login");
              console.log("redirected");
--- a/utils/getPreferredTimeFormat.ts
+++ b/utils/getPreferredTimeFormat.ts
@ -0,0 +1,11 @@
+export default (): "12" | "24" => {
+	const format = settingsLoad().timeFormat?.format ?? "auto"
+
+	if (format == "12") {
+		return "12"
+	} else if (format == "24") {
+		return "24"
+	}
+
+	return "24"
+}
--- a/utils/removeContextMenu.ts
+++ b/utils/removeContextMenu.ts
@ -0,0 +1,6 @@
+export default () => {
+	const contextMenu = document.getElementById("context-menu");
+	if (contextMenu) {
+		contextMenu.remove();
+	}
+}
--- a/utils/replyToMessage.ts
+++ b/utils/replyToMessage.ts
@ -0,0 +1,14 @@
+import { render } from "vue";
+import MessageReply from "~/components/MessageReply.vue";
+import type { MessageProps } from "~/types/props";
+
+export default (element: HTMLDivElement, props: MessageProps) => {
+	console.log("element:", element);
+	const messageBox = document.getElementById("message-box") as HTMLDivElement;
+	if (messageBox) {
+		const div = document.createElement("div");
+		const messageReply = h(MessageReply, { author: props.author?.display_name || props.author!.username, text: props.text || "", id: props.message.uuid, replyId: props.replyMessage?.uuid || element.dataset.messageId!, maxWidth: "full" });
+		messageBox.prepend(div);
+		render(messageReply, div);
+	}
+}
--- a/utils/settingSave.ts
+++ b/utils/settingSave.ts
@ -0,0 +1,21 @@
+export default (key: string, value: any): void => {
+	let clientSettingsItem: string | null = localStorage.getItem("clientSettings")
+	if (typeof clientSettingsItem != "string") {
+		clientSettingsItem = "{}"
+	}
+
+	let clientSettings: { [key: string]: any } = {}
+	try {
+		clientSettings = JSON.parse(clientSettingsItem)
+	} catch {
+		clientSettings = {}
+	}
+
+	if (typeof clientSettings !== "object") {
+		clientSettings = {}
+	}
+
+	clientSettings[key] = value
+
+	localStorage.setItem("clientSettings", JSON.stringify(clientSettings))
+}
--- a/utils/settingsLoad.ts
+++ b/utils/settingsLoad.ts
@ -0,0 +1,21 @@
+import type { ClientSettings } from "~/types/settings"
+
+export default (): ClientSettings => {
+	let clientSettingsItem: string | null = localStorage.getItem("clientSettings")
+	if (typeof clientSettingsItem != "string") {
+		clientSettingsItem = "{}"
+	}
+
+	let clientSettings: ClientSettings = {}
+	try {
+		clientSettings = JSON.parse(clientSettingsItem)
+	} catch {
+		clientSettings = {}
+	}
+
+	if (typeof clientSettings !== "object") {
+		clientSettings = {}
+	}
+
+	return clientSettings
+}