ci: only run on push

prevents duplicate CIs from running at the same time

.woodpecker/build-and-publish.yml

@@ -8,7 +8,6 @@ steps:
       - pnpm build
     when:
     - event: push
-    - event: pull_request
 
   - name: container-build-and-publish
     image: docker
@@ -23,3 +22,17 @@ steps:
     when:
     - branch: main
       event: push
+
+  - name: container-build-and-publish (staging)
+    image: docker
+    commands:
+      - docker login --username radical --password $PASSWORD git.gorb.app
+      - docker buildx build --platform linux/amd64,linux/arm64 --rm --push -t git.gorb.app/gorb/frontend:staging .
+    environment:
+      PASSWORD:
+        from_secret: docker_password
+    volumes:
+      - /var/run/podman/podman.sock:/var/run/docker.sock
+    when:
+    - branch: staging
+      event: push

app.vue

@@ -1,36 +1,66 @@
 <template>
-  <div>
-    <Banner v-if="banner" />
-    <NuxtPage :keepalive="true" />
-  </div>
+	<div>
+		<Banner v-if="banner" />
+		<NuxtPage :keepalive="true" />
+	</div>
 </template>
 
 <script lang="ts" setup>
+import loadPreferredTheme from '~/utils/loadPreferredTheme';
 
 const banner = useState("banner", () => false);
 
-let currentTheme = "dark" // default theme
-const savedTheme = localStorage.getItem("selectedTheme");
-if (savedTheme) {
-	currentTheme = savedTheme;
+onMounted(() => {
+	loadPreferredTheme()
+
+	document.removeEventListener("contextmenu", contextMenuHandler);
+	document.addEventListener("contextmenu", (e) => {
+		if (e.target instanceof Element && e.target.classList.contains("default-contextmenu")) return;
+		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";
+		}
+		const destroyOnClick = document.getElementsByClassName("destroy-on-click");
+		for (const element of destroyOnClick) {
+			const closest = (e.target as HTMLElement).closest(".destroy-on-click");
+			if (element != closest) {
+				unrender(element);
+			}
+		}
+	});
+	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 baseURL = useRuntimeConfig().app.baseURL;
-
-useHead({
-  link: [
-    {
-      rel: "stylesheet",
-      href: `${baseURL}themes/${currentTheme}.css`
-    }
-  ]
-})
 </script>
 
 <style>
-html,
+html {
+	background-color: #1f1e1d;
+}
+
 body {
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--preferred-font), Arial, Helvetica, sans-serif;
   box-sizing: border-box;
   color: var(--text-color);
 	background: var(--optional-body-background);

components/Avatar.vue

@@ -0,0 +1,44 @@
+<template>
+	<NuxtImg v-if="displayAvatar" 
+		class="display-avatar"
+		:src="displayAvatar"
+		:alt="displayName" />
+	<Icon v-else
+		name="lucide:user"
+		:alt="displayName" />
+</template>
+
+<script lang="ts" setup>
+import { NuxtImg } from '#components';
+import type { GuildMemberResponse, UserResponse } from '~/types/interfaces';
+
+const props = defineProps<{
+	user?: UserResponse,
+	member?: GuildMemberResponse,
+}>();
+
+
+let displayName: string
+let displayAvatar: string | null
+
+const user = props.user || props.member?.user
+
+if (user) {
+	displayName = getDisplayName(user, props.member)
+	
+	if (user.avatar) {
+		displayAvatar = user.avatar
+	} else if (!isCanvasBlocked()){
+		displayAvatar = generateDefaultIcon(displayName, user.uuid)
+	} else {
+		displayAvatar = null
+	}
+}
+
+</script>
+
+<style scoped>
+.display-avatar {
+	border-radius: var(--pfp-radius);
+}
+</style>

components/Banner.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    
+  </div>
+</template>
+
+<script lang="ts" setup>
+
+</script>
+
+<style>
+
+</style>

components/Guild/ChannelEntry.vue

@@ -1,10 +1,10 @@
 <template>
-  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0">
+  <div v-if="isCurrentChannel" class="channel-list-link-container rounded-corners current-channel" tabindex="0" :title="props.name">
 	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
   </div>
-  <div v-else class="channel-list-link-container rounded-corners" tabindex="0">
+  <div v-else class="channel-list-link-container rounded-corners" tabindex="0" :title="props.name">
 	<NuxtLink class="channel-list-link" :href="props.href" tabindex="-1">
 		# {{ props.name }}
 	</NuxtLink>
@@ -25,6 +25,8 @@ const isCurrentChannel = props.uuid == props.currentUuid;
 	color: inherit;
 	padding-left: .25em;
 	padding-right: .25em;
+	overflow: hidden;
+	text-overflow: ellipsis;
 }
 
 .channel-list-link-container {

components/Guild/GuildDropdown.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="dropdown-body">
+    <div v-for="option of props.options" class="dropdown-option">
+      <button class="dropdown-button" :data-value="option.value" @click.prevent="option.callback" tabindex="0">{{ option.name }}</button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { DropdownOption } from '~/types/interfaces';
+
+const props = defineProps<{ options: DropdownOption[] }>();
+
+</script>
+
+<style scoped>
+
+.dropdown-body {
+  position: absolute;
+  z-index: 100;
+  left: 4dvw;
+  bottom: 4dvh;
+  background-color: var(--chat-background-color);
+  width: 8rem;
+  display: flex;
+  flex-direction: column;
+}
+
+.dropdown-option {
+  border: .09rem solid rgb(70, 70, 70);
+}
+
+.dropdown-button {
+  padding-top: .5dvh;
+  padding-bottom: .5dvh;
+  color: var(--text-color);
+  background-color: transparent;
+  width: 100%;
+  border: none;
+}
+
+.dropdown-button:hover {
+  background-color: var(--padding-color);
+}
+
+</style>

components/Guild/GuildOptionsMenu.vue

@@ -0,0 +1,56 @@
+<template>
+  <div id="guild-options-menu" class="destroy-on-click">
+    <div v-for="setting of settings" class="guild-option" tabindex="0">
+      <button class="guild-option-button" @click="setting.action" tabindex="0">{{ setting.name }}</button>
+    </div>
+  </div>
+  <ModalInvite v-if="showInviteModal" :guild-id="guildId" />
+</template>
+
+<script lang="ts" setup>
+
+const settings = [
+  { name: "Invite", icon: "lucide:letter", action: openInviteModal }
+]
+
+const guildId = useRoute().params.serverId as string;
+const showInviteModal = ref(false);
+
+function openInviteModal() {
+  showInviteModal.value = true;
+}
+
+</script>
+
+<style>
+#guild-options-menu {
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background-color: var(--chat-background-color);
+  top: 8dvh;
+  z-index: 10;
+  width: 100%;
+  position: absolute;
+}
+
+.guild-option {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 2em;
+  box-sizing: border-box;
+}
+
+.guild-option:hover {
+  background-color: var(--padding-color);
+}
+
+.guild-option-button {
+  border: 0;
+  background-color: transparent;
+  color: var(--main-text-color);
+  height: 100%;
+  width: 100%;
+}
+</style>

components/Guild/MemberEntry.vue

@@ -1,8 +1,7 @@
 <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>
+        <Avatar :member="props.member" class="member-avatar"/>
+        <span class="member-display-name">{{ getDisplayName(props.member.user, props.member) }}</span>
         <UserPopup v-if="isPopupVisible" :user="props.member.user" id="profile-popup" />
     </div>
 </template>
@@ -10,7 +9,6 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import type { GuildMemberResponse } from '~/types/interfaces';
-import UserPopup from './UserPopup.vue';
 
 const props = defineProps<{
     member: GuildMemberResponse

components/InvitePopup.vue

@@ -1,40 +0,0 @@
-<template>
-  <div id="invite-popup">
-    <div v-if="invite">
-      <p>{{ invite }}</p>
-      <button @click="copyInvite">Copy Link</button>
-    </div>
-    <div v-else>
-      <button @click="generateInvite">Generate Invite</button>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import type { InviteResponse } from '~/types/interfaces';
-
-
-const invite = ref<string>();
-
-const route = useRoute();
-
-async function generateInvite(): Promise<void> {
-  const createdInvite: InviteResponse | undefined = await fetchWithApi(
-    `/guilds/${route.params.serverId}/invites`,
-    { method: "POST", body: { custom_id: "oijewfoiewf" } }
-  );
-
-  invite.value = createdInvite?.id;
-  return;
-}
-
-function copyInvite() {
-  const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}`);
-  navigator.clipboard.writeText(inviteUrl!.href);
-}
-
-</script>
-
-<style>
-
-</style>

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 '~/components/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>

components/Me/DirectMessagesSidebar.vue

@@ -0,0 +1,44 @@
+<template>
+	<ResizableSidebar width="14rem" min-width="8rem" max-width="30rem" border-sides="right" local-storage-name="middleLeftColumn">
+		<div id="middle-left-column">
+			<div id="friend-sidebar">
+				<div>
+					<h3>Direct Messages</h3>
+				</div>
+				<VerticalSpacer />
+	
+				<NuxtLink class="user-item" :href="`/me`" 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"
+							:href="`/me/${user.uuid}`"/> 
+				</div>
+			</div>
+		</div>
+	</ResizableSidebar>
+</template>
+
+<script lang="ts" setup>
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import ResizableSidebar from '../UserInterface/ResizableSidebar.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>

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="getDisplayName(user)"
+			:href="`/me/${user.uuid}`"/> 
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+const { fetchFriends } = useApi();
+
+const friends = sortUsers(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>

components/Message.vue

@@ -1,50 +1,75 @@
 <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 150 87.5" version="1.1" id="svg1"
+				style="overflow: visible;">
+				<defs id="defs1" />
+				<g id="layer1"
+					transform="translate(40,-35)">
+					<g id="g3"
+						transform="translate(-35,-20)">
+					<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" :id="props.message.uuid"
+			:author="getDisplayName(props.replyMessage.user)"
+			:text="props.replyMessage?.message"
+			: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" />
-			<Icon v-else name="lucide:user" class="message-author-avatar" />
+			<Avatar :user="props.author" class="message-author-avatar"/>
 		</div>
 		<div class="message-data">
 			<div class="message-metadata">
-				<span class="message-author-username" tabindex="0">
-					{{ username }}
+				<span class="message-author-username" tabindex="0" :style="`color: ${props.authorColor}`">
+					{{ getDisplayName(props.author) }}
 				</span>
 				<span class="message-date" :title="date.toString()">
 					<span v-if="getDayDifference(date, currentDate) === 1">Yesterday at</span>
 					<span v-else-if="getDayDifference(date, currentDate) > 1 ">{{ date.toLocaleDateString(undefined) }},</span>
-					{{ date.toLocaleTimeString(undefined, { timeStyle: "short" }) }}
+
+					{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
 				</span>
 			</div>
-			<div class="message-text" v-html="sanitized" tabindex="0"></div>
+			<div class="message-text" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
 		</div>
+		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
-	<div v-else ref="messageElement" :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" }) }}
+				{{ date.toLocaleTimeString(undefined, { hour12: props.format == "12", timeStyle: "short" }) }}
 			</span>
 		</div>
 		<div class="message-data">
-			<div class="message-text" :class="$style['message-text']" v-html="sanitized" tabindex="0"></div>
+			<div class="message-text" :class="$style['message-text']" v-html="sanitized" :hidden="hasEmbed" tabindex="0"></div>
 		</div>
+		<MessageMedia v-if="mediaLinks.length" :links="mediaLinks" />
 	</div>
 </template>
 
 <script lang="ts" setup>
 import DOMPurify from 'dompurify';
 import { parse } from 'marked';
+import type { MessageProps } from '~/types/props';
+import MessageMedia from './MessageMedia.vue';
+import MessageReply from './UserInterface/MessageReply.vue';
 
-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>();
 
@@ -53,8 +78,16 @@ 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 linkRegex = /https?:\/\/(?:www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b(?:[-a-zA-Z0-9()@:%_\+.~#?&\/=]*)/g;
+const linkMatches = props.message.message.matchAll(linkRegex).map(link => link[0]);
+const mediaLinks: string[] = [];
+console.log("link matches:", linkMatches);
+
+const hasEmbed = ref(false);
 
 const sanitized = ref<string>();
 
@@ -68,24 +101,56 @@ onMounted(async () => {
 		],
 		ALLOW_DATA_ATTR: false,
 		ALLOW_SELF_CLOSE_IN_ATTR: false,
-		ALLOWED_ATTR: []
+		ALLOWED_ATTR: ["href"]
 	});
 	console.log("adding listeners")
 	await nextTick();
-	messageElement.value?.addEventListener("mouseenter", (e: Event) => {
-		dateHidden.value = false;
-	});
+	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");
+	}
 
-	messageElement.value?.addEventListener("mouseleave", (e: Event) => {
-		dateHidden.value = true;
-	});
-	console.log("added listeners");
+	for (const link of linkMatches) {
+	console.log("link:", link);
+	try {
+		const res = await $fetch.raw(link);
+		if (res.ok && res.headers.get("content-type")?.match(/^image\/(apng|gif|jpeg|png|webp)$/)) {
+			console.log("link is image");
+			mediaLinks.push(link);
+		}
+		if (mediaLinks.length) {
+			hasEmbed.value = true
+			setTimeout(() => {
+				scrollToBottom(document.getElementById("messages") as HTMLDivElement);
+			}, 500);
+		};
+	} catch (error) {
+		console.error(error);
+	}
+}
+
+console.log("media links:", mediaLinks);
 });
 
 //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());
@@ -111,6 +176,11 @@ function getDayDifference(date1: Date, date2: Date) {
 	overflow-wrap: anywhere;
 }
 
+.message-reply-preview {
+	grid-row: 1;
+	grid-column: 2;
+}
+
 .message:hover {
 	background-color: var(--chat-highlighted-background-color);
 }
@@ -140,6 +210,8 @@ function getDayDifference(date1: Date, date2: Date) {
 	flex-direction: column;
 	height: fit-content;
 	width: 100%;
+	grid-row: 2;
+	grid-column: 2;
 }
 
 .message-author {
@@ -149,7 +221,6 @@ function getDayDifference(date1: Date, date2: Date) {
 
 .message-author-avatar {
 	width: 100%;
-	border-radius: 50%;
 }
 
 .left-column {
@@ -158,6 +229,8 @@ function getDayDifference(date1: Date, date2: Date) {
 	justify-content: center;
 	text-align: center;
 	white-space: nowrap;
+	grid-row: 2;
+	grid-column: 1;
 }
 
 .author-username {
@@ -184,6 +257,20 @@ function getDayDifference(date1: Date, date2: Date) {
 	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>

components/MessageArea.vue

@@ -1,11 +1,14 @@
 <template>
 	<div id="message-area">
 		<div id="messages" ref="messagesElement">
-			<Message v-for="(message, i) of messages" :username="message.user.display_name ?? message.user.username"
+			<Message v-for="(message, i) of messages" :username="getDisplayName(message.user)"
 				: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"
+				:author-color="`${generateIrcColor(message.user.uuid)}`"
+				:reply-message="message.reply_to ? getReplyMessage(message.reply_to) : undefined" />
 		</div>
 		<div id="message-box" class="rounded-corners">
 			<form id="message-form" @submit="sendMessage">
@@ -37,14 +40,18 @@
 </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';
+import { generateIrcColor } from '#imports';
 
 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`,
@@ -114,6 +121,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);
 	}
 }
@@ -185,6 +193,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]);
@@ -203,11 +212,18 @@ if (accessToken && apiBase) {
 function sendMessage(e: Event) {
 	e.preventDefault();
 	if (messageInput.value && messageInput.value.trim() !== "") {
-		const message = {
+		const message: Record<string, string> = {
 			message: messageInput.value.trim().replace(/\n/g, "<br>") // trim, and replace \n with <br>
 		}
 
-		console.log("message:", message);
+		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
@@ -220,11 +236,25 @@ function sendMessage(e: Event) {
 	}
 }
 
+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;
+	}
+}
+
 const route = useRoute();
 
 onMounted(async () => {
 	if (import.meta.server) return;
+	console.log("[MSG] messages keys:", Object.values(messages.value));
 	if (messagesElement.value) {
+		await nextTick();
+		await nextTick();
 		scrollToBottom(messagesElement.value);
 		let fetched = false;
 		const amount = messages.value.length;

components/MessageMedia.vue

@@ -0,0 +1,47 @@
+<template>
+	<div class="media-container">
+		<NuxtImg v-for="link of props.links" class="media-item" :src="link" @click.prevent="createModal(link)" />
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { ModalBase } from '#components';
+import { render } from 'vue';
+
+
+const props = defineProps<{ links: string[] }>();
+
+function createModal(link: string) {
+	const div = document.createElement("div");
+	const modal = h(ModalBase, {
+		obscure: true,
+		onClose: () => unrender(div),
+		onCancel: () => unrender(div),
+	},
+	[
+		h("img", {
+			src: link,
+			class: "default-contextmenu"
+		})
+	]);
+	
+	document.body.appendChild(div);
+	render(modal, div);
+}
+
+</script>
+
+<style scoped>
+
+.media-container {
+	grid-column: 2;
+	grid-row: 3;
+	margin-left: .5dvw;
+}
+
+.media-item {
+	cursor: pointer;
+	max-width: 15dvw;
+}
+
+</style>

components/Modal/Base.vue

@@ -0,0 +1,84 @@
+<template>
+  <dialog ref="dialog" class="modal" :class="props.obscure ? 'modal-obscure' : 'modal-regular'">
+	<span class="modal-exit-button-container" style="position: absolute; right: 2em; top: .2em; width: .5em; height: .5em;">
+		<Button text="X" variant="neutral" :callback="() => dialog?.remove()" />
+	</span>
+	<div class="modal-content">
+		<h1 class="modal-title">{{ title }}</h1>
+		<slot />
+	</div>
+  </dialog>
+</template>
+
+<script lang="ts" setup>
+import type { ModalProps } from '~/types/interfaces';
+import Button from '~/components/UserInterface/Button.vue';
+
+const props = defineProps<ModalProps>();
+const dialog = ref<HTMLDialogElement>();
+
+console.log("props:", props);
+
+onMounted(() => {
+  if (dialog.value) {
+    dialog.value.showModal();
+    if (props.onClose) {
+      dialog.value.addEventListener("close", props.onClose);
+    }
+    if (props.onCancel) {
+      dialog.value.addEventListener("cancel", props.onCancel);
+    }
+  }
+});
+
+
+</script>
+
+<style>
+.modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 1em;
+  opacity: 100%;
+  padding: 1%;
+  background-color: var(--sidebar-highlighted-background-color);
+  color: var(--text-color);
+  overflow: hidden;
+}
+
+.modal-regular::backdrop {
+	background-color: var(--chat-background-color);
+	opacity: 0%;
+}
+
+.modal-obscure::backdrop {
+	background-color: var(--chat-background-color);
+	opacity: 80%;
+}
+
+.modal-top-container {
+  position: fixed;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+.modal-title {
+  font-size: 1.5rem;
+  padding: 0;
+}
+
+.modal-content {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	gap: 1em;
+	margin: 1em;
+	width: 100%;
+}
+
+</style>

components/Modal/Invite.vue

@@ -0,0 +1,70 @@
+<template>
+	<ModalBase v-bind="props" :title="props.title || 'Create an invite'">
+		<div v-if="invite" id="invite-body">
+			<div id="invite-label">{{ invite }}</div>
+			<div id="invite-buttons">
+				<Button text="Copy as link" variant="neutral" :callback="() => copyInvite('link')" />
+				<Button text="Copy as code" variant="neutral" :callback="() => copyInvite('code')" />
+			</div>
+		</div>
+		<div v-else>
+			<Button text="Generate Invite" variant="normal" :callback="generateInvite">Generate Invite</Button>
+		</div>
+	</ModalBase>
+</template>
+
+<script lang="ts" setup>
+import type { InviteResponse, ModalProps } from '~/types/interfaces';
+import Button from '~/components/UserInterface/Button.vue';
+
+const props = defineProps<ModalProps & { guildId: string }>();
+
+const invite = ref<string>();
+
+async function generateInvite(): Promise<void> {
+  const chars = "ABCDEFGHIJKLMNOQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890"
+  let randCode = "";
+  for (let i = 0; i < 6; i++) {
+    randCode += chars[Math.floor(Math.random() * chars.length)];
+  }
+  const createdInvite: InviteResponse | undefined = await fetchWithApi(
+    `/guilds/${props.guildId}/invites`,
+    { method: "POST", body: { custom_id: randCode } }
+  );
+
+  invite.value = createdInvite?.id;
+  return;
+}
+
+function copyInvite(type: "link" | "code") {
+  if (!invite.value) return;
+
+  if (type == "link") {
+    const inviteUrl = URL.parse(`invite/${invite.value}`, `${window.location.protocol}//${window.location.host}`);
+    if (inviteUrl) {
+      navigator.clipboard.writeText(inviteUrl.href);
+    }
+  } else {
+    navigator.clipboard.writeText(invite.value);
+  }
+}
+
+</script>
+
+<style scoped>
+
+#invite-body, #invite-buttons {
+	display: flex;
+	gap: 1em;
+}
+
+#invite-body {
+	flex-direction: column;
+}
+
+#invite-label {
+  text-align: center;
+  color: aquamarine;
+}
+
+</style>

components/Popups/CropPopup.vue

@@ -10,6 +10,7 @@
 
 <script lang="ts" setup>
 import Cropper from 'cropperjs';
+import Button from '../UserInterface/Button.vue';
 
 const props = defineProps({
   imageSrc: String,

components/Settings/AppSettings/Appearance.vue

@@ -17,19 +17,28 @@
       </div>
     </div>
 
-    <p class="subtitle">ICONS</p>
-    <div class="themes">
+    <!-- <p class="subtitle">Icons</p>
+    <div class="icons">
+    </div> -->
+
+    <p class="subtitle">TIME FORMAT</p>
+    <div class="icons">
+      <RadioButtons :button-count="3" :text-strings="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 loadPreferredTheme from '~/utils/loadPreferredTheme';
+import settingSave from '~/utils/settingSave';
+
 const runtimeConfig = useRuntimeConfig()
 const defaultThemes = runtimeConfig.public.defaultThemes
 const baseURL = runtimeConfig.app.baseURL;
-let themeLinkElement: HTMLLinkElement | null = null;
+const timeFormatTextStrings = ["Auto", "12-Hour", "24-Hour"]
 
 const themes: Array<Theme> = []
 
@@ -42,20 +51,8 @@ interface Theme {
 }
 
 function changeTheme(id: string, url: string) {
-  if (themeLinkElement && themeLinkElement.getAttribute('href') === `${baseURL}themes/${url}`) {
-    return;
-  }
-
-  localStorage.setItem("selectedTheme", 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}`;
+  settingSave("selectedThemeId", id)
+  loadPreferredTheme()
 }
 
 async function fetchThemes() {
@@ -68,6 +65,21 @@ async function fetchThemes() {
 }
 
 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>

components/Settings/AppSettings/index.ts

@@ -0,0 +1,11 @@
+import Appearance from './Appearance.vue';
+import Notifications from './Notifications.vue';
+import Keybinds from './Keybinds.vue';
+import Language from './Language.vue';
+
+export {
+	Appearance,
+	Notifications,
+	Keybinds,
+	Language,
+}

components/Settings/UserSettings/Account.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
+import Button from '~/components/UserInterface/Button.vue';
 import type { UserResponse } from '~/types/interfaces';
 
 const { fetchUser } = useAuth();

components/Settings/UserSettings/Privacy.vue

@@ -5,7 +5,6 @@
 </template>
 
 <script lang="ts" setup>
-import Button from '~/components/Button.vue';
 </script>
 
 <style scoped>

components/Settings/UserSettings/Profile.vue

@@ -33,12 +33,16 @@
 </template>
 
 <script lang="ts" setup>
+import CropPopup from '~/components/Popups/CropPopup.vue';
+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()

components/Settings/UserSettings/index.ts

@@ -0,0 +1,13 @@
+import Profile from './Profile.vue';
+import Account from './Account.vue';
+import Privacy from './Privacy.vue';
+import Devices from './Devices.vue';
+import Connections from './Connections.vue';
+
+export {
+	Profile,
+	Account,
+	Privacy,
+	Devices,
+	Connections,
+}

components/User/UserEntry.vue

@@ -0,0 +1,48 @@
+<template>
+    <NuxtLink class="user-item" :href="`/me/${user.uuid}`" tabindex="0">
+        <Avatar :user="props.user" class="user-avatar"/>
+
+        <span class="user-display-name">{{ getDisplayName(props.user) }}</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 {
+    min-width: 2.3em;
+    max-width: 2.3em;
+    min-width: 2.3em;
+    max-height: 2.3em;
+}
+
+.user-display-name {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+</style>

components/User/UserPopup.vue

@@ -1,12 +1,11 @@
 <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" />
+    <Avatar :user="props.user" id="avatar"/>
 
     <div id="cover-color"></div>
     <div id="main-body">
       <p id="display-name">
-        <strong>{{ props.user.display_name }}</strong>
+        <strong>{{ getDisplayName(props.user) }}</strong>
       </p>
       <p id="username-and-pronouns">
         {{ props.user.username }}
@@ -22,8 +21,6 @@
 <script lang="ts" setup>
 import type { UserResponse } from '~/types/interfaces';
 
-const { fetchMembers } = useApi();
-
 const props = defineProps<{
 	user: UserResponse
 }>();

components/UserArea.vue

@@ -1,20 +0,0 @@
-<template>
-	<div id="user-panel">
-		HELLO!!
-	</div>
-</template>
-
-<script lang="ts" setup>
-import type { UserResponse } from '~/types/interfaces';
-
-const props = defineProps<{
-	user: UserResponse,
-}>();
-
-</script>
-
-<style scoped>
-#user-panel {
-	width: 100%;
-}
-</style>

components/UserInterface/Button.vue

@@ -1,14 +1,14 @@
 <template>
-	<div @click="props.callback()" class="button" :class="props.variant + '-button'">
+	<button @click="props.callback ? props.callback() : null" class="button" :class="props.variant + '-button'">
 		{{ props.text }}
-	</div>
+	</button>
 </template>
 
 <script lang="ts" setup>
 
 const props = defineProps<{
 	text: string,
-	callback: CallableFunction,
+	callback?: CallableFunction,
 	variant?: "normal" | "scary" | "neutral",
 }>();
 
@@ -28,6 +28,8 @@ const props = defineProps<{
 	border-radius: 0.7rem;
 	text-decoration: none;
 	display: inline-block;
+
+	border: none;
 }
 
 .button:hover {

components/UserInterface/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[], pointerX: number, pointerY: number }>();
+
+onMounted(() => {
+	const contextMenu = document.getElementById("context-menu");
+	if (contextMenu) {
+		contextMenu.style.left = props.pointerX.toString() + "px";
+		contextMenu.style.top = props.pointerY.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>

components/UserInterface/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>

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>

components/UserInterface/ResizableSidebar.vue

@@ -0,0 +1,140 @@
+<template>
+	<div ref="resizableSidebar" class="resizable-sidebar"
+			:style="{
+				'width': storedWidth ? `${storedWidth}px` : props.width,
+				'min-width': props.minWidth,
+				'max-width': props.maxWidth,
+				'border': props.borderSides == 'all' ? borderStyling : undefined,
+				'border-top': props.borderSides?.includes('top') ? borderStyling : undefined,
+				'border-bottom': props.borderSides?.includes('bottom') ? borderStyling : undefined,
+			}">
+		<div v-if="props.borderSides != 'right'" class="width-resizer-bar">
+			<div ref="widthResizer" class="width-resizer"></div>
+		</div>
+		<div class="sidebar-content">
+			<slot />
+		</div>
+		<div v-if="props.borderSides == 'right'" class="width-resizer-bar">
+			<div ref="widthResizer" class="width-resizer"></div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import type { ContextMenuItem } from '~/types/interfaces';
+
+const props = defineProps<{ width?: string, minWidth: string, maxWidth: string, borderSides: "all" | "top" | "right" | "bottom" | "left" | ("top" | "right" | "bottom" | "left")[], localStorageName?: string }>();
+
+const borderStyling = ".1rem solid var(--padding-color)";
+
+const resizableSidebar = ref<HTMLDivElement>();
+const widthResizer = ref<HTMLDivElement>();
+const storedWidth = ref<number>();
+
+const menuItems: ContextMenuItem[] = [
+	{ name: "Reset", callback: () => { resizableSidebar.value!.style.width = props.width ?? props.minWidth } }
+]
+
+onMounted(() => {
+	loadStoredWidth();
+
+	if (resizableSidebar.value && widthResizer.value) {
+		widthResizer.value.addEventListener("pointerdown", (e) => {
+			e.preventDefault();
+			if (e.button == 2) {
+				createContextMenu(e, menuItems);
+				return
+			};
+			document.body.style.cursor = "ew-resize";
+			function handleMove(pointer: PointerEvent) {
+				if (resizableSidebar.value) {
+					console.log("moving");
+					console.log("pointer:", pointer);
+					console.log("width:", resizableSidebar.value.style.width);
+					let delta = 0;
+					if (props.borderSides == 'right') {
+						delta = resizableSidebar.value.getBoundingClientRect().left;
+						console.log("delta:", delta);
+						resizableSidebar.value.style.width = `${pointer.clientX - delta}px`;
+					} else {
+						delta = resizableSidebar.value.getBoundingClientRect().right;
+						console.log("delta:", delta);
+						resizableSidebar.value.style.width = `${delta - pointer.clientX}px`;
+					}
+				}
+			}
+
+			document.addEventListener("pointermove", handleMove);
+
+			document.addEventListener("pointerup", () => {
+				console.log("pointer up");
+				document.removeEventListener("pointermove", handleMove);
+				console.log("removed pointermove event listener");
+				document.body.style.cursor = "";
+				if (resizableSidebar.value && props.localStorageName) {
+					localStorage.setItem(props.localStorageName, resizableSidebar.value.style.width);
+				}
+			}, { once: true });
+		});
+	}
+});
+
+onActivated(() => {
+	console.log("[res] activated");
+	loadStoredWidth();
+});
+
+function loadStoredWidth() {
+	if (props.localStorageName) {
+		const storedWidthValue = localStorage.getItem(props.localStorageName);
+		if (storedWidthValue) {
+			storedWidth.value = parseInt(storedWidthValue) || undefined;
+			console.log("[res] loaded stored width");
+		}
+	}
+}
+
+</script>
+
+<style>
+.resizable-sidebar > * {
+	box-sizing: border-box;
+}
+
+.resizable-sidebar {
+	display: flex;
+	background: var(--optional-channel-list-background);
+	background-color: var(--sidebar-background-color);
+	height: 100%;
+	flex: 0 0 auto;
+}
+
+.width-resizer {
+	width: .5rem;
+	cursor: col-resize;
+	position: absolute;
+	height: 100%;
+}
+
+.width-resizer-bar {
+	display: flex;
+	justify-content: center;
+	position: relative;
+	height: 100%;
+	width: 1px;
+	background-color: var(--padding-color);
+}
+
+.sidebar-content {
+	width: 100%;
+	padding-left: .25em;
+	padding-right: .25em;
+}
+
+.sidebar-content > :first-child {
+	width: 100%;
+	height: 100%;
+	overflow-y: scroll;
+	overflow-x: hidden;
+}
+</style>

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>

composables/api.ts

@@ -1,37 +1,61 @@
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse } from "~/types/interfaces";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse, StatsResponse, UserResponse } from "~/types/interfaces";
+
+function ensureIsArray(list: any) {
+	if (Array.isArray(list)) {
+		return list
+	} else {
+		return []
+	}
+}
 
 export const useApi = () => {
-	async function fetchGuilds(): Promise<GuildResponse[] | undefined> {
-		return await fetchWithApi(`/guilds`);
+	async function fetchGuilds(): Promise<GuildResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/guilds`));
 	}
 	
 	async function fetchGuild(guildId: string): Promise<GuildResponse | undefined> {
 		return await fetchWithApi(`/guilds/${guildId}`);
 	}
 
-	async function fetchChannels(guildId: string): Promise<ChannelResponse[] | undefined> {
-		return await fetchWithApi(`/guilds/${guildId}/channels`);
+	async function fetchMyGuilds(): Promise<GuildResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/me/guilds`));
+	}
+
+	async function fetchChannels(guildId: string): Promise<ChannelResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/channels`));
 	}
 
 	async function fetchChannel(channelId: string): Promise<ChannelResponse | undefined> {
 		return await fetchWithApi(`/channels/${channelId}`)
 	}
 
-	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[] | undefined> {
-		return await fetchWithApi(`/guilds/${guildId}/members`);
+	async function fetchMembers(guildId: string): Promise<GuildMemberResponse[]> {
+		return ensureIsArray(await fetchWithApi(`/guilds/${guildId}/members`));
 	}
 
 	async function fetchMember(guildId: string, memberId: string): Promise<GuildMemberResponse | undefined> {
 		return await fetchWithApi(`/guilds/${guildId}/members/${memberId}`);
 	}
-
+	
 	async function fetchUsers() {
 		return await fetchWithApi(`/users`);
 	}
-
+	
 	async function fetchUser(userId: string) {
 		return await fetchWithApi(`/users/${userId}`);
 	}
+	
+	async function fetchFriends(): Promise<UserResponse[]> {
+		return ensureIsArray(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 } });
@@ -41,6 +65,18 @@ export const useApi = () => {
 		return await fetchWithApi(`/channels/${channelId}/messages/${messageId}`);
 	}
 
+	async function createGuild(name: string): Promise<GuildResponse | undefined> {
+		return await fetchWithApi(`/guilds`, { method: "POST", body: { name } });
+	}
+
+	async function joinGuild(invite: string): Promise<GuildResponse> {
+		return await fetchWithApi(`/invites/${invite}`, { method: "POST" }) as GuildResponse;
+	}
+
+	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" });
 	}
@@ -50,18 +86,40 @@ export const useApi = () => {
 		await fetchWithApi("/auth/verify-email", { method: "POST", body: { email } });
 	}
 
+	async function sendPasswordResetEmail(identifier: string): Promise<void> {
+		await fetchWithApi("/auth/reset-password", { method: "GET", query: { identifier } });
+	}
+
+	async function resetPassword(password: string, token: string) {
+		await fetchWithApi("/auth/reset-password", { method: "POST", body: { password, token } });
+	}
+
+	async function fetchInvite(id: string): Promise<GuildResponse | undefined> {
+		return await fetchWithApi(`/invites/${id}`);
+	}
+
 	return {
 		fetchGuilds,
 		fetchGuild,
+		fetchMyGuilds,
 		fetchChannels,
 		fetchChannel,
 		fetchMembers,
 		fetchMember,
 		fetchUsers,
 		fetchUser,
+		fetchFriends,
+		addFriend,
+		removeFriend,
 		fetchMessages,
 		fetchMessage,
+		createGuild,
+		joinGuild,
+		createChannel,
 		fetchInstanceStats,
-		sendVerificationEmail
+		sendVerificationEmail,
+		sendPasswordResetEmail,
+		resetPassword,
+		fetchInvite
 	}
 }

composables/auth.ts

@@ -41,10 +41,10 @@ export const useAuth = () => {
   async function logout() {
     console.log("access:", accessToken.value);
 
-    await fetchWithApi("/auth/logout", { method: "GET", credentials: "include" });
+    await fetchWithApi("/auth/logout", { method: "DELETE", credentials: "include" });
     clearAuth();
 
-	return await navigateTo("/login");
+	  return await navigateTo("/login");
   }
 
   async function revoke(password: string) {
@@ -106,7 +106,7 @@ export const useAuth = () => {
   }
 
   return {
-    accessToken,
+	clearAuth,
     register,
     login,
     logout,

layouts/auth.vue

@@ -18,6 +18,7 @@
 			</div>
 			<div v-else id="auth-form-container">
 				<slot />
+				<div v-if="!['/recover', '/reset-password'].includes(route.path)">Forgot password? Recover <NuxtLink href="/recover">here</NuxtLink>!</div>
 			</div>
 			<div v-if="instanceUrl">
 				Instance URL is set to <span style="color: var(--primary-color);">{{ instanceUrl }}</span>
@@ -36,7 +37,11 @@ const apiVersion = useRuntimeConfig().public.apiVersion;
 const apiBase = useCookie("api_base");
 const registrationEnabled = useState("registrationEnabled", () => true);
 
-const auth = useAuth();
+const route = useRoute();
+
+const query = route.query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+searchParams.delete("token");
 
 onMounted(async () => {
 	instanceUrl.value = useCookie("instance_url").value;
@@ -88,30 +93,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>
@@ -135,6 +116,7 @@ async function showUser(e: Event) {
 #auth-form-container form {
 	display: flex;
 	flex-direction: column;
+	align-items: center;
 	text-align: left;
 	margin-top: 10dvh;
 	gap: 1em;

layouts/client.vue

@@ -8,20 +8,41 @@
 				</marquee>
 			</div>
 		</div>
-		<div id = "page-content">
+		<div id="page-content">
 			<div id="left-column">
-				<NuxtLink id="home-button" href="/">
-					<img class="sidebar-icon" src="/public/icon.svg"/>
-				</NuxtLink>
-				<div id="servers-list">
-					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
-						<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" />
+				<div class="left-column-segment">
+					<NuxtLink id="home-button" href="/me">
+						<img class="sidebar-icon" src="/public/icon.svg"/>
+					</NuxtLink>
+				</div>
+				<VerticalSpacer />
+				<div class="left-column-segment" id="left-column-middle">
+					<NuxtLink v-for="guild of guilds" :href="`/servers/${guild.uuid}`">
+						<NuxtImg v-if="guild.icon"
+							class="sidebar-icon guild-icon"
+							:alt="guild.name"
+							:src="guild.icon" />
+						<NuxtImg v-else-if="!blockedCanvas"
+							class="sidebar-icon guild-icon"
+							:alt="guild.name"
+							:src="generateDefaultIcon(guild.name, guild.uuid)" />
+						<Icon v-else name="lucide:server"
+							:style="`color: ${generateIrcColor(guild.uuid, 50)}`"
+							class="sidebar-icon guild-icon"
+							:alt="guild.name" />
+					</NuxtLink>
+				</div>
+				<VerticalSpacer />
+				<div class="left-column-segment">
+					<div ref="createButtonContainer">
+						<button id="create-button" class="sidebar-bottom-buttons" @click.prevent="createDropdown">
+							<Icon id="create-icon" name="lucide:square-plus" alt="Create or join guild"/>
+						</button>
+					</div>
+					<NuxtLink id="settings-menu" class="sidebar-bottom-buttons" href="/settings">
+						<Icon name="lucide:settings" alt="Settings menu" />
 					</NuxtLink>
 				</div>
-				<NuxtLink id="settings-menu" href="/settings">
-					<Icon name="lucide:settings" class="sidebar-icon white" alt="Settings menu" />
-				</NuxtLink>
 			</div>
 			<slot />
 		</div>
@@ -29,11 +50,127 @@
 </template>
 
 <script lang="ts" setup>
+import { ModalBase } from '#components';
+import { render } from 'vue';
+import GuildDropdown from '~/components/Guild/GuildDropdown.vue';
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
 import type { GuildResponse } from '~/types/interfaces';
 
 const loading = useState("loading", () => false);
 
-const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
+const createButtonContainer = ref<HTMLButtonElement>();
+
+const api = useApi();
+
+const blockedCanvas = isCanvasBlocked()
+
+const options = [
+	{ name: "Join", value: "join", callback: async () => {
+			console.log("join guild!");
+			const div = document.createElement("div");
+			const guildJoinModal = h(ModalBase, {
+				title: "Join Guild",
+				id: "guild-join-modal",
+				onClose: () => {
+					unrender(div);
+				},
+				onCancel: () => {
+					unrender(div);
+				},
+				style: "height: 20dvh; width: 15dvw"
+			},
+			[
+				h("input", {
+					id: "guild-invite-input",
+					type: "text",
+					placeholder: "oyqICZ",
+				}),
+				h(Button, {
+					text: "Join",
+					variant: "normal",
+					callback: async () => {
+						const input = document.getElementById("guild-invite-input") as HTMLInputElement;
+						const invite = input.value;
+						if (invite.length == 6) {
+							try {
+								const joinedGuild = await api.joinGuild(invite);
+								guilds.push(joinedGuild);
+								return await navigateTo(`/servers/${joinedGuild.uuid}`);
+							} catch (error) {
+								alert(`Couldn't use invite: ${error}`);
+							}
+						}
+					}
+				})
+			]);
+			document.body.appendChild(div);
+			render(guildJoinModal, div);
+		}
+	},
+	{ name: "Create", value: "create", callback: async () => {
+			console.log("create guild");
+			const user = await useAuth().getUser();
+			const div = document.createElement("div");
+			const guildCreateModal = h(ModalBase, {
+				title: "Create a Guild",
+				id: "guild-join-modal",
+				onClose: () => {
+					unrender(div);
+				},
+				onCancel: () => {
+					unrender(div);
+				},
+				style: "height: 20dvh; width: 15dvw;"
+			},
+			[
+				h("input", {
+					id: "guild-name-input",
+					type: "text",
+					placeholder: `${getDisplayName(user!)}'s Awesome Bouncy Castle'`,
+					style: "width: 100%"
+				}),
+				h(Button, {
+					text: "Create!",
+					variant: "normal",
+					callback: async () => {
+						const input = document.getElementById("guild-name-input") as HTMLInputElement;
+						const name = input.value;
+						try {
+							const guild = (await api.createGuild(name)) as GuildResponse;
+							await api.createChannel(guild.uuid, "general");
+						} catch (error) {
+							alert(`Couldn't create guild: ${error}`);
+						}
+					}
+				})
+			]);
+			document.body.appendChild(div);
+			render(guildCreateModal, div);
+		}
+	}
+];
+
+const guilds = await api.fetchMyGuilds();
+
+function createDropdown() {
+	const dropdown = h(GuildDropdown, { options });
+	const div = document.createElement("div");
+	div.classList.add("dropdown", "destroy-on-click");
+	if (createButtonContainer.value) {
+		createButtonContainer.value.appendChild(div);
+	} else {
+		document.body.appendChild(div);
+	}
+	render(dropdown, div);
+	div.addEventListener("keyup", (e) => {
+		if (e.key == "Escape") {
+			unrender(div);
+		}
+	});
+	div.focus();
+}
+
 </script>
 
 <style>
@@ -80,48 +217,59 @@ const guilds: GuildResponse[] | undefined = await fetchWithApi("/me/guilds");
 #left-column {
 	display: flex;
 	flex-direction: column;
-	gap: .75em;
-	padding-left: .25em;
-	padding-right: .25em;
+
+	padding-left: var(--sidebar-margin);
+	padding-right: var(--sidebar-margin);
 	padding-top: .5em;
-	border-right: 1px solid var(--padding-color);
+	
 	background: var(--optional-sidebar-background);
 	background-color: var(--sidebar-background-color);
+
+	border-right: 1px solid var(--padding-color);
 }
 
-#servers-list {
+.left-column-segment {
 	display: flex;
 	flex-direction: column;
-	gap: 1em;
-	width: 3.2rem;	
-	padding-top: .5em;
+
+	scrollbar-width: none;
 }
 
-#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;
+.left-column-segment::-webkit-scrollbar {
+	display: none;
 }
 
-.sidebar-icon {
-	width: 3rem;
-	height: 3rem;
+#left-column-middle {
 	overflow-y: scroll;
-	overflow-x: hidden;
+	flex-grow: 1;
+	gap: var(--sidebar-icon-gap);
 }
 
 #home-button {
-	border-bottom: 1px solid var(--padding-color);
-	padding-bottom: .375em;
+	height: var(--sidebar-icon-width);
 }
 
-#settings-menu {
-	position: absolute;
-	bottom: .25em;
+.guild-icon {
+	border-radius: var(--guild-icon-radius);
 }
 
-</style>
+.sidebar-icon {
+	width: var(--sidebar-icon-width);
+	height: var(--sidebar-icon-width);
+}
+
+.sidebar-bottom-buttons {
+	color: var(--primary-color);
+	background-color: transparent;
+	border: none;
+	cursor: pointer;
+	font-size: 2.4rem;
+	padding: 0;
+	display: inline-block;
+}
+
+.sidebar-bottom-buttons:hover {
+	color: var(--primary-highlighted-color);
+}
+
+</style>

middleware/auth.global.ts

@@ -16,7 +16,7 @@ export default defineNuxtRouteMiddleware(async (to, from) => {
 		}
 	}
 
-	if (["/login", "/register"].includes(to.path) && !Object.keys(to.query).includes("special")) {
+	if (["/login", "/register", "/recover", "/reset-password"].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);

middleware/server.ts

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

package.json

@@ -14,7 +14,6 @@
     "@nuxt/icon": "1.13.0",
     "@nuxt/image": "1.10.0",
     "@pinia/nuxt": "0.11.0",
-    "@tauri-apps/plugin-http": "~2.5.0",
     "cropperjs": "^2.0.0",
     "dompurify": "^3.2.6",
     "marked": "^15.0.12",
@@ -23,13 +22,13 @@
     "pinia-plugin-persistedstate": "^4.2.0",
     "typescript": "^5.8.3",
     "vue": "^3.5.13",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "xxhash-wasm": "^1.1.0"
   },
   "packageManager": "pnpm@10.11.0",
   "license": "MIT",
   "devDependencies": {
     "@iconify-json/lucide": "^1.2.44",
-    "@tauri-apps/cli": "^2.6.2",
     "@types/node": "^22.15.3",
     "eslint-config-prettier": "^10.1.2",
     "eslint-plugin-prettier": "^5.2.6"

pages/index.vue

@@ -1,23 +1,11 @@
 <template>
   <NuxtLayout>
-    <div id="left-bar">
-    </div>
-	<div id="middle-bar">
-      <h1>
-        Welcome to gorb :3
-      </h1>
-	  <p>
-		Click on a guild to the left to view a guild.
-		<br>
-		Or click the button in the bottom left to join a guild.
-	  </p>
-    </div>
-	<div id="right-bar">
-    </div>
+
   </NuxtLayout>
 </template>
 
 <script lang="ts" setup>
+await navigateTo("/me/", { replace: true })
 
 definePageMeta({
 	layout: "client"

pages/invite/[inviteId].vue

@@ -0,0 +1,180 @@
+<template>
+  <div id="invite-root">
+	<div id="invite-container">
+		<div id="guild-container" v-if="guild">
+			<h1>You have been invited to {{ guild.name }}!</h1>
+			<div id="guild-card">
+				<div id="card-grid">
+					<div id="guild-details">
+						<div id="guild-name" title="Server name">
+							<span>{{ guild.name }}</span>
+						</div>
+						<div id="guild-member-count" :title="`${guild.member_count} members`">
+							<Icon name="lucide:users" />
+							<span>{{ guild.member_count }}</span>
+						</div>
+					</div>
+					<VerticalSpacer id="space" />
+					<div id="guild-description">
+						<span>{{ guild.description }}</span>
+					</div>
+					<div id="guild-icon">
+						<NuxtImg v-if="guild.icon" id="guild-icon-img" :src="guild.icon" :alt="`${guild.name} server icon`" />
+					</div>
+				</div>
+				<Button :text="isMember ? 'Joined' : 'Join'" variant="normal" :callback="acceptInvite" />
+			</div>
+		</div>
+		<div v-else-if="errorMessage">
+			<h1>{{ errorMessage }}</h1>
+		</div>
+	</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import type { GuildResponse } from '~/types/interfaces';
+
+
+const route = useRoute();
+const { fetchInvite, joinGuild, fetchMembers } = useApi();
+const { getUser } = useAuth();
+
+const inviteId = route.params.inviteId as string;
+
+const guild = ref<GuildResponse>();
+const errorMessage = ref<string>();
+const isMember = ref(false);
+
+const accessToken = useCookie("access_token");
+
+if (inviteId) {
+	try {
+		guild.value = await fetchInvite(inviteId);
+		console.log("invite guild:", guild.value);
+		if (accessToken.value && guild.value) {
+			const members = await fetchMembers(guild.value.uuid);
+			const me = await getUser();
+			if (me && members.find(member => member.user.uuid == me.uuid)) {
+				isMember.value = true;
+			}
+		} 
+	} catch (error: any) {
+		if (error.response) {
+			if (error.status == 404) {
+				errorMessage.value = "That invite doesn't exist or has expired.";
+			}
+		}
+		console.error(error);
+	}
+}
+
+async function acceptInvite() {
+	if (accessToken.value && guild.value) {		
+		await joinGuild(inviteId);
+		return await navigateTo(`/servers/${guild.value.uuid}`);
+	}
+
+	return await navigateTo(`/login?redirect_to=${route.fullPath}`);
+}
+
+</script>
+
+<style>
+
+#invite-root {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100dvh;
+}
+
+#invite-container {
+	border: .5rem solid var(--chat-highlighted-background-color);
+	border-radius: var(--standard-radius);
+	height: 50%;
+	width: 50%;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-container {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	width: 50%;
+	height: 60%;
+}
+
+#guild-card {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+	background-color: var(--sidebar-highlighted-background-color);
+	border: .5rem solid black;
+	border-radius: var(--standard-radius);
+	padding: .5rem;
+}
+
+#card-grid {
+	display: grid;
+	grid-template-columns: 1fr 1fr 1fr;
+	grid-template-rows: 5rem auto 1fr;
+	height: 100%;
+	width: 100%;
+}
+
+#guild-details {
+	grid-row: 1;
+	grid-column: span 2;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-name {
+	font-size: 2rem;
+	flex-direction: column;
+}
+
+#guild-member-count {
+	gap: .3rem;
+}
+
+#space {
+	grid-row: 2;
+	grid-column: span 3;
+}
+
+#guild-description {
+	grid-row: 3;
+	grid-column: span 3;
+	word-break: break-all;
+	padding: .3rem;
+}
+
+#guild-name, #guild-member-count {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+#guild-icon-img {
+	height: 100%;
+	width: 100%;
+	object-fit: scale-down;
+}
+
+</style>

pages/login.vue

@@ -22,8 +22,6 @@
 </template>
 
 <script lang="ts" setup>
-import type { StatsResponse } from '~/types/interfaces';
-
 
 definePageMeta({
 	layout: "auth"
@@ -38,6 +36,7 @@ const form = reactive({
 
 const query = useRoute().query as Record<string, string>;
 const searchParams = new URLSearchParams(query);
+searchParams.delete("token");
 
 const registrationEnabled = ref<boolean>(true);
 const apiBase = useCookie("api_base");
@@ -50,7 +49,7 @@ if (apiBase.value) {
 	}
 }
 
-const registerUrl = `/register?${searchParams}`
+const registerUrl = `/register?${searchParams}`;
 
 const { login } = useAuth();
 

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>

pages/me/index.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>

pages/recover.vue

@@ -0,0 +1,89 @@
+<template>
+  <NuxtLayout name="auth">
+    <div v-if="errorValue">{{ errorValue }}</div>
+      <form v-if="!emailFormSent" @submit.prevent="sendEmail">
+        <div>
+          <label for="identifier">Email or username</label>
+            <br>
+          <input type="text" name="identifier" id="identifier" v-model="emailForm.identifier">
+        </div>
+        <div>
+          <Button type="submit" text="Send email" variant="normal" />
+        </div>
+      </form>
+      <div v-else>
+        If an account with that username or email exists, an email will be sent to it shortly.
+      </div>
+    <div v-if="registrationEnabled">
+      Don't have an account? <NuxtLink :href="registerUrl">Register</NuxtLink> one!
+    </div>
+    <div>
+      Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+
+const emailForm = reactive({
+  identifier: ""
+});
+
+const emailFormSent = ref(false);
+
+const passwordForm = reactive({
+  password: ""
+});
+
+const errorValue = ref<string>();
+
+const registrationEnabled = ref<boolean>(true);
+const apiBase = useCookie("api_base");
+
+const query = useRoute().query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+
+const token = ref(searchParams.get("token"))
+searchParams.delete("token");
+const { resetPassword } = useApi();
+
+const registerUrl = `/register?${searchParams}`;
+const loginUrl = `/login?${searchParams}`;
+
+if (apiBase.value) {
+	console.log("apiBase:", apiBase.value);
+	const stats = await useApi().fetchInstanceStats(apiBase.value);
+	if (stats) {
+		registrationEnabled.value = stats.registration_enabled;
+	}
+}
+
+const { sendPasswordResetEmail } = useApi();
+
+async function sendEmail() {
+  try {
+    await sendPasswordResetEmail(emailForm.identifier);
+    emailFormSent.value = true;
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+async function sendPassword() {
+  try {
+    console.log("pass:", passwordForm.password);
+    const hashedPass = await hashPassword(passwordForm.password)
+    console.log("hashed pass:", hashedPass);
+    await resetPassword(hashedPass, token.value!);
+    return await navigateTo(`/login?${searchParams}`);
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+</script>
+
+<style>
+
+</style>

pages/register.vue

@@ -86,6 +86,7 @@ const auth = useAuth();
 const loggedIn = ref(await auth.getUser());
 
 const query = new URLSearchParams(useRoute().query as Record<string, string>);
+query.delete("token");
 
 const user = await useAuth().getUser();
 

pages/reset-password.vue

@@ -0,0 +1,56 @@
+<template>
+  <NuxtLayout name="auth">
+    <div v-if="errorValue">{{ errorValue }}</div>
+    <form @submit.prevent="sendPassword">
+      <div>
+        <label for="password">Password</label>
+        <br>
+        <input type="password" name="password" id="password" v-model="passwordForm.password">
+      </div>
+      <div>
+        <Button type="submit" text="Submit" variant="normal" />
+      </div>
+    </form>
+	<div>
+	  Already have an account? <NuxtLink :href="loginUrl">Log in</NuxtLink>!
+    </div>
+  </NuxtLayout>
+</template>
+
+<script lang="ts" setup>
+import Button from '~/components/UserInterface/Button.vue';
+
+const query = useRoute().query as Record<string, string>;
+const searchParams = new URLSearchParams(query);
+
+const loginUrl = `/login?${searchParams}`;
+
+const token = ref(searchParams.get("token"))
+
+if (!token.value) await navigateTo("/login");
+
+const passwordForm = reactive({
+  password: ""
+});
+
+const errorValue = ref<string>();
+
+const { resetPassword } = useApi();
+
+async function sendPassword() {
+  try {
+    console.log("pass:", passwordForm.password);
+    const hashedPass = await hashPassword(passwordForm.password)
+    console.log("hashed pass:", hashedPass);
+    await resetPassword(hashedPass, token.value!);
+    return await navigateTo("/login?");
+  } catch (error) {
+    errorValue.value = (error as any).toString();
+  }
+}
+
+</script>
+
+<style>
+
+</style>

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

@@ -1,38 +1,42 @@
 <template>
 	<NuxtLayout name="client">
-		<div id="middle-left-column" class="main-grid-row">
-			<div id="server-title">
-				<h3>
-					{{ server?.name }}
-					<span>
-						<button @click="showGuildSettings">
-							<Icon name="lucide:settings" />
-						</button>
-					</span>
-					<span>
-						<button @click="toggleInvitePopup">
-							<Icon name="lucide:share-2" />
-						</button>
-					</span>
-					<InvitePopup v-if="showInvitePopup" />
-				</h3>
+		<ResizableSidebar
+				width="14rem" min-width="8rem" max-width="30rem"
+				border-sides="right" local-storage-name="middleLeftColumn">
+			<div id="middle-left-column" class="main-grid-row">
+				<div id="server-name-container">
+					<span id="server-name" :title="server?.name">{{ server?.name }}</span>
+					<button id="server-settings-button" @click="toggleGuildSettings">
+						<Icon id="server-settings-icon" name="lucide:chevron-down" />
+					</button>
+					<GuildOptionsMenu v-if="showGuildSettings" />
+				</div>
+				<div id="channels-list">
+					<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>
 			</div>
-			<div id="channels-list">
-				<Channel v-for="channel of channels" :name="channel.name"
-					:uuid="channel.uuid" :current-uuid="(route.params.channelId as string)"
-					:href="`/servers/${route.params.serverId}/channels/${channel.uuid}`" />
-			</div>
-		</div>
+		</ResizableSidebar>
 		<MessageArea :channel-url="channelUrlPath" />
-		<div id="members-container">
-			<div id="members-list">
-				<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
+		<ResizableSidebar
+				width="14rem" min-width="5.5rem" max-width="30rem"
+				border-sides="left" local-storage-name="membersListWidth">
+			<div id="members-container">
+				<div id="members-list">
+					<MemberEntry v-for="member of members" :member="member" tabindex="0"/>
+				</div>
 			</div>
-		</div>
+		</ResizableSidebar>
 	</NuxtLayout>
 </template>
 
 <script lang="ts" setup>
+import ChannelEntry from "~/components/Guild/ChannelEntry.vue";
+import GuildOptionsMenu from "~/components/Guild/GuildOptionsMenu.vue";
+import MemberEntry from "~/components/Guild/MemberEntry.vue";
+import ResizableSidebar from "~/components/UserInterface/ResizableSidebar.vue";
+import type { ChannelResponse, GuildMemberResponse, GuildResponse } from "~/types/interfaces";
 
 const route = useRoute();
 
@@ -44,32 +48,47 @@ const server = ref<GuildResponse | undefined>();
 const channels = ref<ChannelResponse[] | undefined>();
 const channel = ref<ChannelResponse | undefined>();
 
-const showInvitePopup = ref(false);
+const members = ref<GuildMemberResponse[]>();
 
-import UserPopup from "~/components/UserPopup.vue";
-import type { ChannelResponse, GuildMemberResponse, GuildResponse, MessageResponse } from "~/types/interfaces";
+const showInvitePopup = ref(false);
+const showGuildSettings = ref(false);
 
 //const servers = await fetchWithApi("/servers") as { uuid: string, name: string, description: string }[];
 //console.log("channelid: servers:", servers);
 
 const { fetchMembers } = useApi();
-const members = await fetchMembers(route.params.serverId as string);
 
 onMounted(async () => {
-	console.log("channelid: set loading to true");
+	console.log("mounting");
 	const guildUrl = `guilds/${route.params.serverId}`;
 	server.value = await fetchWithApi(guildUrl);
+	console.log("fetched guild");
+	await setArrayVariables();
+	console.log("set array variables");
+});
 
+onActivated(async () => {
+	console.log("activating");
+	const guildUrl = `guilds/${route.params.serverId}`;
+	server.value = await fetchWithApi(guildUrl);
+	console.log("fetched guild");
+	await setArrayVariables();
+	console.log("set array variables");
+});
+
+async function setArrayVariables() {
+	members.value = sortMembers(await fetchMembers(route.params.serverId as string))
+	const guildUrl = `guilds/${route.params.serverId}`;
 	channels.value = await fetchWithApi(`${guildUrl}/channels`);
 	console.log("channels:", channels.value);
 	channel.value = await fetchWithApi(`/channels/${route.params.channelId}`);
 	console.log("channel:", channel.value);
+}
 
-	console.log("channelid: channel:", channel);
-	console.log("channelid: set loading to false");
-});
-
-function showGuildSettings() { }
+function toggleGuildSettings(e: Event) {
+	e.preventDefault();
+	showGuildSettings.value = !showGuildSettings.value;
+}
 
 function toggleInvitePopup(e: Event) {
 	e.preventDefault();
@@ -81,18 +100,7 @@ function handleMemberClick(member: GuildMemberResponse) {
 </script>
 
 <style>
-
-#middle-left-column {
-	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 {
-	width: 15rem;
-	border-left: 1px solid var(--padding-color);
 	background: var(--optional-member-list-background);
 }
 
@@ -122,12 +130,14 @@ function handleMemberClick(member: GuildMemberResponse) {
 	display: flex;
 	flex-direction: column;
 	gap: .5em;
+	text-overflow: ellipsis;
 }
 
 .member-avatar {
-	height: 2.3em;
-	width: 2.3em;
-	border-radius: 50%;
+    min-width: 2.3em;
+    max-width: 2.3em;
+    min-width: 2.3em;
+    max-height: 2.3em;
 }
 
 .member-display-name {
@@ -135,4 +145,25 @@ function handleMemberClick(member: GuildMemberResponse) {
 	text-overflow: ellipsis;
 }
 
+#server-name-container {
+	padding-top: 3dvh;
+	padding-bottom: 3dvh;
+	display: flex;
+	justify-content: center;
+	position: relative;
+}
+
+#server-name {
+	font-size: 1.5em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+#server-settings-button {
+	background-color: transparent;
+	font-size: 1em;
+	color: white;
+	border: none;
+	padding: 0%;
+}
 </style>

pages/settings.vue

@@ -8,7 +8,7 @@
               <Icon class="back-button" size="2em" name="lucide:circle-arrow-left" alt="Back"></Icon>
             </span>
           </p>
-          <span class="spacer"></span>
+          <VerticalSpacer />
 
           <!-- categories and dynamic settings pages -->
           <div v-for="category in categories" :key="category.displayName">
@@ -17,13 +17,13 @@
               :class="{ 'sidebar-focus': selectedPage === page.displayName }">
               {{ page.displayName }}
             </li>
-            <span class="spacer"></span>
+            <VerticalSpacer />
           </div>
           
           <p>
             <Button text="Log Out" :callback=logout variant="scary"></Button>
           </p>
-          <span class="spacer"></span>
+          <VerticalSpacer />
 
           <p id="links-and-socials">
             <NuxtLink href="https://git.gorb.app/gorb/frontend" title="Source"><Icon name="lucide:git-branch-plus" /></NuxtLink>
@@ -46,6 +46,13 @@
 
 
 <script lang="ts" setup>
+import { Profile, Account, Privacy, Devices, Connections } from '~/components/Settings/UserSettings';
+import { Appearance, Notifications, Keybinds, Language } from '~/components/Settings/AppSettings';
+
+import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
+import Button from '~/components/UserInterface/Button.vue';
+
+
 const { logout } = useAuth()
 const appConfig = useRuntimeConfig()
 
@@ -59,17 +66,6 @@ interface Category {
   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",
@@ -196,13 +192,6 @@ onMounted(() => {
   margin-right: 0.2em;
 }
 
-.spacer {
-  height: 0.2dvh;
-  display: block;
-  margin: 0.8dvh 1dvw;
-  background-color: var(--padding-color);
-}
-
 /* applies to child pages too */
 :deep(.subtitle) {
   display: block;

pnpm-lock.yaml

@@ -20,9 +20,6 @@ importers:
       '@pinia/nuxt':
         specifier: 0.11.0
         version: 0.11.0(magicast@0.3.5)(pinia@3.0.2(typescript@5.8.3)(vue@3.5.13(typescript@5.8.3)))
-      '@tauri-apps/plugin-http':
-        specifier: ~2.5.0
-        version: 2.5.0
       cropperjs:
         specifier: ^2.0.0
         version: 2.0.0
@@ -50,13 +47,13 @@ importers:
       vue-router:
         specifier: ^4.5.1
         version: 4.5.1(vue@3.5.13(typescript@5.8.3))
+      xxhash-wasm:
+        specifier: ^1.1.0
+        version: 1.1.0
     devDependencies:
       '@iconify-json/lucide':
         specifier: ^1.2.44
         version: 1.2.44
-      '@tauri-apps/cli':
-        specifier: ^2.6.2
-        version: 2.6.2
       '@types/node':
         specifier: ^22.15.3
         version: 22.15.3
@@ -561,12 +558,6 @@ packages:
     peerDependencies:
       eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
 
-  '@eslint-community/eslint-utils@4.7.0':
-    resolution: {integrity: sha512-dyybb3AcajC7uha6CvhdVRJqaKyn7w2YKqKyAN37NKYgZT36w+iRb0Dymmc5qEJ549c/S31cMMSFd75bteCpCw==}
-    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
-    peerDependencies:
-      eslint: ^6.0.0 || ^7.0.0 || >=8.0.0
-
   '@eslint-community/regexpp@4.12.1':
     resolution: {integrity: sha512-CCZCDJuduB9OUkFkY2IgppNZMi2lBQgD2qzwXkEia16cge2pijY/aXi96CJMquDMn3nJdlPV1A5KrJEXwfLNzQ==}
     engines: {node: ^12.0.0 || ^14.0.0 || >=16.0.0}
@@ -580,12 +571,12 @@ packages:
       eslint:
         optional: true
 
-  '@eslint/config-array@0.20.1':
-    resolution: {integrity: sha512-OL0RJzC/CBzli0DrrR31qzj6d6i6Mm3HByuhflhl4LOBiWxN+3i6/t/ZQQNii4tjksXi8r2CRW1wMpWA2ULUEw==}
+  '@eslint/config-array@0.20.0':
+    resolution: {integrity: sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@eslint/config-helpers@0.2.3':
-    resolution: {integrity: sha512-u180qk2Um1le4yf0ruXH3PYFeEZeYC3p/4wCTKrr2U1CmGdzGi3KtY0nuPDH48UJxlKCC5RDzbcbh4X0XlqgHg==}
+  '@eslint/config-helpers@0.2.1':
+    resolution: {integrity: sha512-RI17tsD2frtDu/3dmI7QRrD4bedNKPM08ziRYaC5AhkGrzIAJelm9kJU1TznK+apx6V+cqRz8tfpEeG3oIyjxw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
   '@eslint/config-inspector@1.0.2':
@@ -637,8 +628,8 @@ packages:
     resolution: {integrity: sha512-JBxkERygn7Bv/GbN5Rv8Ul6LVknS+5Bp6RgDC/O8gEBU/yeH5Ui5C/OlWrTb6qct7LjjfT6Re2NxB0ln0yYybA==}
     engines: {node: '>=18.18'}
 
-  '@humanwhocodes/retry@0.4.3':
-    resolution: {integrity: sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==}
+  '@humanwhocodes/retry@0.4.2':
+    resolution: {integrity: sha512-xeO57FpIu4p1Ri3Jq/EXq4ClRm86dVF2z/+kvFnyqVYRavTZmaFaUBbWCOuuTh0o/g7DSsk6kc2vrS4Vl5oPOQ==}
     engines: {node: '>=18.18'}
 
   '@iconify-json/lucide@1.2.44':
@@ -1225,83 +1216,6 @@ packages:
     peerDependencies:
       eslint: '>=9.0.0'
 
-  '@tauri-apps/api@2.6.0':
-    resolution: {integrity: sha512-hRNcdercfgpzgFrMXWwNDBN0B7vNzOzRepy6ZAmhxi5mDLVPNrTpo9MGg2tN/F7JRugj4d2aF7E1rtPXAHaetg==}
-
-  '@tauri-apps/cli-darwin-arm64@2.6.2':
-    resolution: {integrity: sha512-YlvT+Yb7u2HplyN2Cf/nBplCQARC/I4uedlYHlgtxg6rV7xbo9BvG1jLOo29IFhqA2rOp5w1LtgvVGwsOf2kxw==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [darwin]
-
-  '@tauri-apps/cli-darwin-x64@2.6.2':
-    resolution: {integrity: sha512-21gdPWfv1bP8rkTdCL44in70QcYcPaDM70L+y78N8TkBuC+/+wqnHcwwjzb+mUyck6UoEw2DORagSI/oKKUGJw==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [darwin]
-
-  '@tauri-apps/cli-linux-arm-gnueabihf@2.6.2':
-    resolution: {integrity: sha512-MW8Y6HqHS5yzQkwGoLk/ZyE1tWpnz/seDoY4INsbvUZdknuUf80yn3H+s6eGKtT/0Bfqon/W9sY7pEkgHRPQgA==}
-    engines: {node: '>= 10'}
-    cpu: [arm]
-    os: [linux]
-
-  '@tauri-apps/cli-linux-arm64-gnu@2.6.2':
-    resolution: {integrity: sha512-9PdINTUtnyrnQt9hvC4y1m0NoxKSw/wUB9OTBAQabPj8WLAdvySWiUpEiqJjwLhlu4T6ltXZRpNTEzous3/RXg==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tauri-apps/cli-linux-arm64-musl@2.6.2':
-    resolution: {integrity: sha512-LrcJTRr7FrtQlTDkYaRXIGo/8YU/xkWmBPC646WwKNZ/S6yqCiDcOMoPe7Cx4ZvcG6sK6LUCLQMfaSNEL7PT0A==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [linux]
-
-  '@tauri-apps/cli-linux-riscv64-gnu@2.6.2':
-    resolution: {integrity: sha512-GnTshO/BaZ9KGIazz2EiFfXGWgLur5/pjqklRA/ck42PGdUQJhV/Ao7A7TdXPjqAzpFxNo6M/Hx0GCH2iMS7IA==}
-    engines: {node: '>= 10'}
-    cpu: [riscv64]
-    os: [linux]
-
-  '@tauri-apps/cli-linux-x64-gnu@2.6.2':
-    resolution: {integrity: sha512-QDG3WeJD6UJekmrtVPCJRzlKgn9sGzhvD58oAw5gIU+DRovgmmG2U1jH9fS361oYGjWWO7d/KM9t0kugZzi4lQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tauri-apps/cli-linux-x64-musl@2.6.2':
-    resolution: {integrity: sha512-TNVTDDtnWzuVqWBFdZ4+8ZTg17tc21v+CT5XBQ+KYCoYtCrIaHpW04fS5Tmudi+vYdBwoPDfwpKEB6LhCeFraQ==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [linux]
-
-  '@tauri-apps/cli-win32-arm64-msvc@2.6.2':
-    resolution: {integrity: sha512-z77C1oa/hMLO/jM1JF39tK3M3v9nou7RsBnQoOY54z5WPcpVAbS0XdFhXB7sSN72BOiO3moDky9lQANQz6L3CA==}
-    engines: {node: '>= 10'}
-    cpu: [arm64]
-    os: [win32]
-
-  '@tauri-apps/cli-win32-ia32-msvc@2.6.2':
-    resolution: {integrity: sha512-TmD8BbzbjluBw8+QEIWUVmFa9aAluSkT1N937n1mpYLXcPbTpbunqRFiIznTwupoJNJIdtpF/t7BdZDRh5rrcg==}
-    engines: {node: '>= 10'}
-    cpu: [ia32]
-    os: [win32]
-
-  '@tauri-apps/cli-win32-x64-msvc@2.6.2':
-    resolution: {integrity: sha512-ItB8RCKk+nCmqOxOvbNtltz6x1A4QX6cSM21kj3NkpcnjT9rHSMcfyf8WVI2fkoMUJR80iqCblUX6ARxC3lj6w==}
-    engines: {node: '>= 10'}
-    cpu: [x64]
-    os: [win32]
-
-  '@tauri-apps/cli@2.6.2':
-    resolution: {integrity: sha512-s1/eyBHxk0wG1blLeOY2IDjgZcxVrkxU5HFL8rNDwjYGr0o7yr3RAtwmuUPhz13NO+xGAL1bJZaLFBdp+5joKg==}
-    engines: {node: '>= 10'}
-    hasBin: true
-
-  '@tauri-apps/plugin-http@2.5.0':
-    resolution: {integrity: sha512-l4M2DUIsOBIMrbj4dJZwrB4mJiB7OA/2Tj3gEbX2fjq5MOpETklJPKfDvzUTDwuq4lIKCKKykz8E8tpOgvi0EQ==}
-
   '@trysound/sax@0.2.0':
     resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==}
     engines: {node: '>=10.13.0'}
@@ -1312,9 +1226,6 @@ packages:
   '@types/estree@1.0.7':
     resolution: {integrity: sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==}
 
-  '@types/estree@1.0.8':
-    resolution: {integrity: sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==}
-
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -1637,11 +1548,6 @@ packages:
     engines: {node: '>=0.4.0'}
     hasBin: true
 
-  acorn@8.15.0:
-    resolution: {integrity: sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==}
-    engines: {node: '>=0.4.0'}
-    hasBin: true
-
   agent-base@6.0.2:
     resolution: {integrity: sha512-RZNwNclF7+MS/8bDg70amg32dyeZGZxiDuQmZxKLAlQjr3jGyLx+4Kkk58UO7D2QdgFIQCovuSuZESne6RG6XQ==}
     engines: {node: '>= 6.0.0'}
@@ -2141,15 +2047,6 @@ packages:
       supports-color:
         optional: true
 
-  debug@4.4.1:
-    resolution: {integrity: sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==}
-    engines: {node: '>=6.0'}
-    peerDependencies:
-      supports-color: '*'
-    peerDependenciesMeta:
-      supports-color:
-        optional: true
-
   decache@4.6.2:
     resolution: {integrity: sha512-2LPqkLeu8XWHU8qNCS3kcF6sCcb5zIzvWaAHYSvPfwhdd7mHuah29NssMzrTYyHN4F5oFy2ko9OBYxegtU0FEw==}
 
@@ -2457,10 +2354,6 @@ packages:
     resolution: {integrity: sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint-scope@8.4.0:
-    resolution: {integrity: sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   eslint-typegen@2.1.0:
     resolution: {integrity: sha512-tY9TTx07InS+mQ/+zYnCMHkdsS00GPaQy84PwHiQd2XWwXIptRExKcz1kI8eG1CGg1sBs9mONwSfbGMbvI4fNA==}
     peerDependencies:
@@ -2474,10 +2367,6 @@ packages:
     resolution: {integrity: sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  eslint-visitor-keys@4.2.1:
-    resolution: {integrity: sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   eslint@9.25.1:
     resolution: {integrity: sha512-E6Mtz9oGQWDCpV12319d59n4tx9zOTXSTmc8BLVxBx+G/0RdM5MvEEJLU9c0+aleoePYYgVTOsRblx433qmhWQ==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -2492,10 +2381,6 @@ packages:
     resolution: {integrity: sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  espree@10.4.0:
-    resolution: {integrity: sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==}
-    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
-
   esprima@4.0.1:
     resolution: {integrity: sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==}
     engines: {node: '>=4'}
@@ -4862,6 +4747,9 @@ packages:
     engines: {node: '>= 0.10.0'}
     hasBin: true
 
+  xxhash-wasm@1.1.0:
+    resolution: {integrity: sha512-147y/6YNh+tlp6nd/2pWq38i9h6mz/EuQ6njIrmW8D1BS5nCqs0P6DG+m6zTGnNz5I+uhZ0SHxBs9BsPrwcKDA==}
+
   y18n@5.0.8:
     resolution: {integrity: sha512-0pfFzegeDWJHJIAmTLRP2DwHjdF5s7jo9tuztdQxAhINCdvS+3nGINqPd00AphqJR/0LhANUS6/+7SCb98YOfA==}
     engines: {node: '>=10'}
@@ -5370,26 +5258,21 @@ snapshots:
       eslint: 9.25.1(jiti@2.4.2)
       eslint-visitor-keys: 3.4.3
 
-  '@eslint-community/eslint-utils@4.7.0(eslint@9.25.1(jiti@2.4.2))':
-    dependencies:
-      eslint: 9.25.1(jiti@2.4.2)
-      eslint-visitor-keys: 3.4.3
-
   '@eslint-community/regexpp@4.12.1': {}
 
   '@eslint/compat@1.2.8(eslint@9.25.1(jiti@2.4.2))':
     optionalDependencies:
       eslint: 9.25.1(jiti@2.4.2)
 
-  '@eslint/config-array@0.20.1':
+  '@eslint/config-array@0.20.0':
     dependencies:
       '@eslint/object-schema': 2.1.6
-      debug: 4.4.1
+      debug: 4.4.0
       minimatch: 3.1.2
     transitivePeerDependencies:
       - supports-color
 
-  '@eslint/config-helpers@0.2.3': {}
+  '@eslint/config-helpers@0.2.1': {}
 
   '@eslint/config-inspector@1.0.2(eslint@9.25.1(jiti@2.4.2))':
     dependencies:
@@ -5421,8 +5304,8 @@ snapshots:
   '@eslint/eslintrc@3.3.1':
     dependencies:
       ajv: 6.12.6
-      debug: 4.4.1
-      espree: 10.4.0
+      debug: 4.4.0
+      espree: 10.3.0
       globals: 14.0.0
       ignore: 5.3.2
       import-fresh: 3.3.1
@@ -5457,7 +5340,7 @@ snapshots:
 
   '@humanwhocodes/retry@0.3.1': {}
 
-  '@humanwhocodes/retry@0.4.3': {}
+  '@humanwhocodes/retry@0.4.2': {}
 
   '@iconify-json/lucide@1.2.44':
     dependencies:
@@ -6316,59 +6199,6 @@ snapshots:
       - supports-color
       - typescript
 
-  '@tauri-apps/api@2.6.0': {}
-
-  '@tauri-apps/cli-darwin-arm64@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-darwin-x64@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-linux-arm-gnueabihf@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-linux-arm64-gnu@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-linux-arm64-musl@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-linux-riscv64-gnu@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-linux-x64-gnu@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-linux-x64-musl@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-win32-arm64-msvc@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-win32-ia32-msvc@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli-win32-x64-msvc@2.6.2':
-    optional: true
-
-  '@tauri-apps/cli@2.6.2':
-    optionalDependencies:
-      '@tauri-apps/cli-darwin-arm64': 2.6.2
-      '@tauri-apps/cli-darwin-x64': 2.6.2
-      '@tauri-apps/cli-linux-arm-gnueabihf': 2.6.2
-      '@tauri-apps/cli-linux-arm64-gnu': 2.6.2
-      '@tauri-apps/cli-linux-arm64-musl': 2.6.2
-      '@tauri-apps/cli-linux-riscv64-gnu': 2.6.2
-      '@tauri-apps/cli-linux-x64-gnu': 2.6.2
-      '@tauri-apps/cli-linux-x64-musl': 2.6.2
-      '@tauri-apps/cli-win32-arm64-msvc': 2.6.2
-      '@tauri-apps/cli-win32-ia32-msvc': 2.6.2
-      '@tauri-apps/cli-win32-x64-msvc': 2.6.2
-
-  '@tauri-apps/plugin-http@2.5.0':
-    dependencies:
-      '@tauri-apps/api': 2.6.0
-
   '@trysound/sax@0.2.0': {}
 
   '@tybys/wasm-util@0.9.0':
@@ -6378,8 +6208,6 @@ snapshots:
 
   '@types/estree@1.0.7': {}
 
-  '@types/estree@1.0.8': {}
-
   '@types/json-schema@7.0.15': {}
 
   '@types/node@22.15.3':
@@ -6784,14 +6612,8 @@ snapshots:
     dependencies:
       acorn: 8.14.1
 
-  acorn-jsx@5.3.2(acorn@8.15.0):
-    dependencies:
-      acorn: 8.15.0
-
   acorn@8.14.1: {}
 
-  acorn@8.15.0: {}
-
   agent-base@6.0.2:
     dependencies:
       debug: 4.4.0
@@ -7290,10 +7112,6 @@ snapshots:
     dependencies:
       ms: 2.1.3
 
-  debug@4.4.1:
-    dependencies:
-      ms: 2.1.3
-
   decache@4.6.2:
     dependencies:
       callsite: 1.0.0
@@ -7658,11 +7476,6 @@ snapshots:
       esrecurse: 4.3.0
       estraverse: 5.3.0
 
-  eslint-scope@8.4.0:
-    dependencies:
-      esrecurse: 4.3.0
-      estraverse: 5.3.0
-
   eslint-typegen@2.1.0(eslint@9.25.1(jiti@2.4.2)):
     dependencies:
       eslint: 9.25.1(jiti@2.4.2)
@@ -7673,31 +7486,29 @@ snapshots:
 
   eslint-visitor-keys@4.2.0: {}
 
-  eslint-visitor-keys@4.2.1: {}
-
   eslint@9.25.1(jiti@2.4.2):
     dependencies:
-      '@eslint-community/eslint-utils': 4.7.0(eslint@9.25.1(jiti@2.4.2))
+      '@eslint-community/eslint-utils': 4.6.1(eslint@9.25.1(jiti@2.4.2))
       '@eslint-community/regexpp': 4.12.1
-      '@eslint/config-array': 0.20.1
-      '@eslint/config-helpers': 0.2.3
+      '@eslint/config-array': 0.20.0
+      '@eslint/config-helpers': 0.2.1
       '@eslint/core': 0.13.0
       '@eslint/eslintrc': 3.3.1
       '@eslint/js': 9.25.1
       '@eslint/plugin-kit': 0.2.8
       '@humanfs/node': 0.16.6
       '@humanwhocodes/module-importer': 1.0.1
-      '@humanwhocodes/retry': 0.4.3
-      '@types/estree': 1.0.8
+      '@humanwhocodes/retry': 0.4.2
+      '@types/estree': 1.0.7
       '@types/json-schema': 7.0.15
       ajv: 6.12.6
       chalk: 4.1.2
       cross-spawn: 7.0.6
-      debug: 4.4.1
+      debug: 4.4.0
       escape-string-regexp: 4.0.0
-      eslint-scope: 8.4.0
-      eslint-visitor-keys: 4.2.1
-      espree: 10.4.0
+      eslint-scope: 8.3.0
+      eslint-visitor-keys: 4.2.0
+      espree: 10.3.0
       esquery: 1.6.0
       esutils: 2.0.3
       fast-deep-equal: 3.1.3
@@ -7723,12 +7534,6 @@ snapshots:
       acorn-jsx: 5.3.2(acorn@8.14.1)
       eslint-visitor-keys: 4.2.0
 
-  espree@10.4.0:
-    dependencies:
-      acorn: 8.15.0
-      acorn-jsx: 5.3.2(acorn@8.15.0)
-      eslint-visitor-keys: 4.2.1
-
   esprima@4.0.1: {}
 
   esquery@1.6.0:
@@ -10347,6 +10152,8 @@ snapshots:
       cssfilter: 0.0.10
     optional: true
 
+  xxhash-wasm@1.1.0: {}
+
   y18n@5.0.8: {}
 
   yallist@3.1.1: {}

public/themes/ash.css

@@ -1,6 +1,7 @@
 :root {
 	--text-color: #f0e5e0;
 	--secondary-text-color: #e8e0db;
+	--reply-text-color: #969696;
 
 	--chat-background-color: #2f2e2d;
     --chat-highlighted-background-color: #3f3b38;
@@ -10,11 +11,18 @@
 	--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;
+
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--guild-icon-radius: 20%;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
 }

public/themes/dark.css

@@ -1,6 +1,7 @@
 :root {
 	--text-color: #f7eee8;
 	--secondary-text-color: #f0e8e4;
+	--reply-text-color: #969696;
 
 	--chat-background-color: #1f1e1d;
     --chat-highlighted-background-color: #2f2b28;
@@ -17,4 +18,14 @@
 	--secondary-highlighted-color: #8f5b2c;
 	--accent-color: #b35719;
 	--accent-highlighted-color: #c76a2e;
+
+	--sidebar-icon-width: 2.5em;
+	--sidebar-icon-gap: .25em;
+	--sidebar-margin: .5em;
+	
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--guild-icon-radius: 15%;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
 }

public/themes/description.css

@@ -2,6 +2,7 @@
 :root {
 	--text-color: #161518;
 	--secondary-text-color: #2b2930;
+	--reply-text-color: #969696;
 
     --chat-background-color: #80808000;
     --chat-highlighted-background-color: #ffffff20;
@@ -19,6 +20,12 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
+
     --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 */

public/themes/light.css

@@ -1,6 +1,7 @@
 :root {
 	--text-color: #170f08;
 	--secondary-text-color: #2f2b28;
+	--reply-text-color: #969696;
 
     --chat-background-color: #f0ebe8;
     --chat-highlighted-background-color: #e8e4e0;
@@ -17,4 +18,10 @@
     --secondary-highlighted-color: #f8b68a;
     --accent-color: #e68b4e;
     --accent-highlighted-color: #f69254;
+
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
 }

public/themes/rainbow-capitalism.css

@@ -1,6 +1,7 @@
 :root {
 	--text-color: #161518;
 	--secondary-text-color: #2b2930;
+	--reply-text-color: #969696;
 
     --chat-background-color: #80808000;
     --chat-highlighted-background-color: #ffffff20;
@@ -18,6 +19,12 @@
     --accent-color: #ff218c80;
     --accent-highlighted-color: #df1b6f80;
 
+	--sidebar-width: 2.5em;
+	--standard-radius: .5em;
+	--button-radius: .6em;
+	--pfp-radius: 50%;
+	--preferred-font: Arial;
+
     /* --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);

src-tauri/.gitignore

@@ -1,3 +0,0 @@
-# Generated by Cargo
-# will have compiled files and executables
-/target/

src-tauri/Cargo.toml

@@ -1,35 +0,0 @@
-[package]
-name = "app"
-version = "0.1.0"
-description = "A Tauri App"
-authors = ["you"]
-license = ""
-repository = ""
-default-run = "app"
-edition = "2021"
-rust-version = "1.60"
-
-[lib]
-name = "app_lib"
-crate-type = ["staticlib", "cdylib", "rlib"]
-
-# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
-
-[build-dependencies]
-tauri-build = { version = "2", features = [] }
-#tauri-runtime-verso-build = { git = "https://github.com/versotile-org/tauri-runtime-verso.git" }
-
-
-[dependencies]
-serde_json = "1.0"
-serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "2", features = ["devtools"] }
-tauri-plugin-http = "2"
-#tauri = { version = "2", default-features = false, features = ["common-controls-v6", "x11"] }
-#tauri-runtime-verso = { git = "https://github.com/versotile-org/tauri-runtime-verso.git" }
-
-[features]
-# this feature is used for production builds or when `devPath` points to the filesystem and the built-in dev server is disabled.
-# If you use cargo directly instead of tauri's cli you can use this feature flag to switch between tauri's `dev` and `build` modes.
-# DO NOT REMOVE!!
-custom-protocol = [ "tauri/custom-protocol" ]

src-tauri/build.rs

@@ -1,4 +0,0 @@
-fn main() {
-    //tauri_runtime_verso_build::get_verso_as_external_bin().unwrap();
-    tauri_build::build()
-}

src-tauri/capabilities/migrated.json

@@ -1,16 +0,0 @@
-{
-  "identifier": "migrated",
-  "description": "permissions that were migrated from v1",
-  "local": true,
-  "windows": [
-    "main"
-  ],
-  "permissions": [
-    "core:default",
-    "http:default",
-	{
-		"identifier": "http:default",
-		"allow": [{ "url": "https://**" }]
-	}
-  ]
-}

src-tauri/gen/schemas/capabilities.json

@@ -1 +0,0 @@
-{"migrated":{"identifier":"migrated","description":"permissions that were migrated from v1","local":true,"windows":["main"],"permissions":["core:default","http:default",{"identifier":"http:default","allow":[{"url":"https://**"}]}]}}

src-tauri/src/lib.rs

@@ -1,7 +0,0 @@
-#[cfg_attr(mobile, tauri::mobile_entry_point)]
-pub fn run() {
-    tauri::Builder::default()
-        .plugin(tauri_plugin_http::init())
-        .run(tauri::generate_context!())
-        .expect("error while running tauri application");
-}

src-tauri/src/main.rs

@@ -1,5 +0,0 @@
-#![cfg_attr(not(debug_assertions), windows_subsystem = "windows")]
-
-fn main() {
-    app_lib::run();
-}

src-tauri/tauri.conf.json

@@ -1,59 +0,0 @@
-{
-  "productName": "Gorb",
-  "version": "0.1.0",
-  "identifier": "app.gorb.Gorb",
-  "build": {
-    "beforeBuildCommand": "pnpm run build --prerender",
-    "beforeDevCommand": "pnpm run dev",
-    "devUrl": "http://localhost:3000",
-    "frontendDist": "../.output/public"
-  },
-  "app": {
-    "security": {
-      "csp": null
-    },
-    "windows": [
-      {
-        "fullscreen": false,
-        "height": 600,
-        "resizable": true,
-        "title": "Gorb",
-        "width": 800
-      }
-    ]
-  },
-  "bundle": {
-    "active": true,
-    "category": "DeveloperTool",
-    "copyright": "",
-    "linux": {
-      "deb": {
-        "depends": []
-      }
-    },
-    "externalBin": [],
-    "icon": [
-      "icons/32x32.png",
-      "icons/128x128.png",
-      "icons/128x128@2x.png",
-      "icons/icon.icns",
-      "icons/icon.ico"
-    ],
-    "longDescription": "",
-    "macOS": {
-      "entitlements": null,
-      "exceptionDomain": "",
-      "frameworks": [],
-      "providerShortName": null,
-      "signingIdentity": null
-    },
-    "resources": [],
-    "shortDescription": "",
-    "targets": "all",
-    "windows": {
-      "certificateThumbprint": null,
-      "digestAlgorithm": "sha256",
-      "timestampUrl": ""
-    }
-  }
-}

types/hooks.ts

@@ -0,0 +1,5 @@
+declare module "nuxt/schema" {
+	interface RuntimeNuxtHooks {
+		"app:message:right-clicked": (payload: { messageId: string }) => void
+	}
+}

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 {
@@ -61,7 +62,8 @@ export interface UserResponse {
 	pronouns: string | null,
 	about: string | null,
 	email?: string,
-	email_verified?: boolean
+	email_verified?: boolean,
+	friends_since: string | null,
 }
 
 export interface StatsResponse {
@@ -83,3 +85,21 @@ export interface ScrollPosition {
 	offsetTop: number,
 	offsetLeft: number
 }
+
+export interface DropdownOption {
+	name: string,
+	value: string | number,
+	callback: () => void
+}
+
+export interface ModalProps {
+	title?: string,
+	obscure?: boolean,
+	onClose?: () => void,
+	onCancel?: () => void
+}
+
+export interface ContextMenuItem {
+	name: string,
+	callback: (...args: any[]) => any;
+}

types/props.ts

@@ -0,0 +1,21 @@
+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,
+	authorColor: string,
+	last: boolean,
+	messageId: string,
+	replyingTo?: boolean,
+	editing?: boolean,
+	me: UserResponse
+	message: MessageResponse,
+	replyMessage?: MessageResponse
+	isMentioned?: boolean,
+}

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

utils/createContextMenu.ts

@@ -0,0 +1,21 @@
+import { render } from "vue";
+import ContextMenu from "~/components/UserInterface/ContextMenu.vue";
+import type { ContextMenuItem } from "~/types/interfaces";
+
+export default (e: PointerEvent | MouseEvent, menuItems: ContextMenuItem[]) => {
+  console.log("Rendering new context menu");
+  const menuContainer = document.createElement("div");
+  console.log("hello");
+  menuContainer.id = "context-menu";
+  document.body.appendChild(menuContainer);
+  console.log("pointer x:", e.clientX);
+  console.log("pointer y:", e.clientY);
+  console.log("menu items:", menuItems);
+  const contextMenu = h(ContextMenu, {
+  	menuItems,
+  	pointerX: e.clientX,
+  	pointerY: e.clientY 
+  });
+  render(contextMenu, menuContainer);
+  console.log("Rendered");
+}

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 });
+	}
+}

utils/fetchWithApi.ts

@@ -1,13 +1,6 @@
-import type { NitroFetchRequest, NitroFetchOptions } from "nitropack";
-import { fetch as tauriFetch, type ClientOptions } from '@tauri-apps/plugin-http';
+import type { NitroFetchOptions } from "nitropack";
 
-declare global {
-    interface Window {
-        __TAURI_INTERNALS__: Record<string, unknown>;
-    }
-}
-
-export default async <T>(path: string, options: NitroFetchOptions<string> | (RequestInit & ClientOptions) = {}) => {
+export default async <T>(path: string, options: NitroFetchOptions<string> = {}) => {
   console.log("path received:", path);
   if (!path.startsWith("/")) {
     path = "/" + path;
@@ -25,7 +18,7 @@ export default async <T>(path: string, options: NitroFetchOptions<string> | (Req
     return;
   }
   console.log("path:", path)
-  const { logout, refresh } = useAuth();
+  const { clearAuth, refresh } = useAuth();
   
   let headers: HeadersInit = {};
   
@@ -45,24 +38,12 @@ export default async <T>(path: string, options: NitroFetchOptions<string> | (Req
       };
     }
     try {
-	  let res;
-	  if (window.__TAURI_INTERNALS__) {
-	    // Use Tauri's HTTP client
-		console.log("USING TAURI'S FUCKING BITCHASS FETCH SHIT")
-	    res = await tauriFetch(URL.parse(apiBase + path)!.href, {
-			...options,
-			headers,
-			credentials: "include"
-		} as RequestInit & ClientOptions)
-	  } else {
-		console.log("USING GOATED EPIC NUXT FETCH")
-		console.log("fetching:", URL.parse(apiBase + path));
-		res = await $fetch<T>(URL.parse(apiBase + path)!.href, {
-		  ...options,
-		  headers,
-		  credentials: "include"
-		} as NitroFetchOptions<string>);
-	  }
+      console.log("fetching:", URL.parse(apiBase + path));
+      const res = await $fetch<T>(URL.parse(apiBase + path)!.href, {
+        ...options,
+        headers,
+        credentials: "include"
+      });
 
       return res;
     } catch (error: any) {
@@ -80,8 +61,7 @@ export default async <T>(path: string, options: NitroFetchOptions<string> | (Req
             if (error?.response?.status === 401) {
               console.log("Refresh returned 401");
               reauthFailed = true;
-              console.log("Revoking");
-              await logout();
+              await clearAuth()
               console.log("Redirecting to login");
               await navigateTo("/login");
               console.log("redirected");

utils/generateDefaultIcon.ts

@@ -0,0 +1,38 @@
+export default (name: string, seed: string): string => {
+	const canvas = document.createElement("canvas");
+	const ctx = canvas.getContext("2d");
+	if (canvas && ctx) {
+		canvas.width = 256;
+		canvas.height = 256;
+
+		// get the first char from every word in the guild name
+		let previewName = "";
+		if (name.length > 3) {
+			let guildName: string[] = name.split(' ')
+			for (let i = 0; i < 3; i ++) {
+				if (guildName.length > i) {
+					previewName += guildName[i].charAt(0)
+				} else {
+					break
+				}
+			}
+		} else {
+			previewName = name
+		}
+
+		// fill background using seeded colour
+		ctx.fillStyle = generateIrcColor(seed, 50)
+		ctx.fillRect(0, 0, 256, 256)
+
+		ctx.fillStyle = 'white'
+		ctx.textAlign = 'center'
+		ctx.textBaseline = 'middle'
+		ctx.font = `bold 96px Arial, Helvetica, sans-serif`
+		// 136 isn't actually centered, but it *looks* centered
+		ctx.fillText(previewName, 128, 136)
+
+		return canvas.toDataURL("image/png");
+	}
+
+	return "https://tenor.com/view/dame-da-ne-guy-kiryukazuma-kiryu-yakuza-yakuza-0-gif-14355451116903905918"
+}

utils/generateIrcColor.ts

@@ -0,0 +1,13 @@
+import xxhash from "xxhash-wasm"
+
+let h64: CallableFunction;
+(async () => {
+	h64 = (await xxhash()).h64;
+})();
+
+export default (seed: string, saturation: number = 100, lightness: number = 50): string => {
+	const idHash = useState(`h64Hash-${seed}`, () => h64(seed))
+	const hashValue: bigint = idHash.value
+
+	return `hsl(${hashValue % 360n}, ${saturation}%, ${lightness}%)`
+}

utils/getDisplayName.ts

@@ -0,0 +1,7 @@
+import type { GuildMemberResponse, UserResponse } from "~/types/interfaces";
+
+export default (user: UserResponse, member?: GuildMemberResponse): string => {
+	if (member?.nickname) return member.nickname
+	if (user.display_name) return user.display_name
+	return user.username
+}

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

utils/hashPassword.ts

@@ -1,4 +1,4 @@
-export async function hashPassword(password: string) {
+export default async (password: string) => {
   const encodedPass = new TextEncoder().encode(password);
   const hashBuffer = await crypto.subtle.digest("SHA-384", encodedPass);
   const hashArray = Array.from(new Uint8Array(hashBuffer));

utils/isCanvasBlocked.ts

@@ -0,0 +1,50 @@
+//
+// Canvas Blocker &								  
+// Firefox privacy.resistFingerprinting Detector. 
+// (c) 2018 // JOHN OZBAY // CRYPT.EE 			  
+// MIT License
+//
+export default () => {
+	// create a 1px image data
+	var blocked = false;
+	var canvas = document.createElement("canvas");
+	var ctx = canvas.getContext("2d");
+	
+	// some blockers just return an undefined ctx. So let's check that first. 
+	if (ctx) {
+		var imageData = ctx.createImageData(1,1);
+		var originalImageData  = imageData.data;
+
+		// set pixels to RGB 128
+		originalImageData[0]=128; 
+		originalImageData[1]=128; 
+		originalImageData[2]=128; 
+		originalImageData[3]=255;
+		
+		// set this to canvas
+		ctx.putImageData(imageData,1,1); 
+		
+		try {
+			// now get the data back from canvas.
+			var checkData = ctx.getImageData(1, 1, 1, 1).data;
+
+			// If this is firefox, and privacy.resistFingerprinting is enabled,
+			// OR a browser extension blocking the canvas, 
+			// This will return RGB all white (255,255,255) instead of the (128,128,128) we put.
+
+			// so let's check the R and G to see if they're 255 or 128 (matching what we've initially set)
+			if (originalImageData[0] !== checkData[0] && originalImageData[1] !== checkData[1]) {
+				blocked = true;
+				console.log("Canvas is blocked. Will display warning.");
+			}
+		} catch (error) {
+			// some extensions will return getImageData null. this is to account for that.
+			blocked = true;
+			console.log("Canvas is blocked. Will display warning.");
+		}
+	} else {
+		blocked = true;
+		console.log("Canvas is blocked. Will display warning.");
+	}
+	return blocked;
+}

utils/loadPreferredTheme.ts

@@ -0,0 +1,28 @@
+let themeLinkElement: HTMLLinkElement | null;
+
+export default function loadPreferredTheme() {
+  const currentTheme = settingsLoad().selectedThemeId ?? "dark"
+
+  if (themeLinkElement) {
+    themeLinkElement.href = getThemeUrl(currentTheme);
+  } else {
+    // create the theme link if one doesn't already exist
+    useHead({
+      link: [{
+        id: "main-theme",
+        rel: "stylesheet",
+        href: getThemeUrl(currentTheme)
+      }]
+    })
+
+    themeLinkElement = document.getElementById('main-theme') as HTMLLinkElement;
+  }
+}
+
+function getThemeUrl(id: string): string {
+  const runtimeConfig = useRuntimeConfig()
+  const baseURL = runtimeConfig.app.baseURL;
+
+  // this should preferrably use version hash, but that's not implemented yet
+  return `${baseURL}themes/${id}.css?v=${runtimeConfig.public.buildTimeString}`
+}

utils/removeContextMenu.ts

@@ -0,0 +1,6 @@
+export default () => {
+	const contextMenu = document.getElementById("context-menu");
+	if (contextMenu) {
+		contextMenu.remove();
+	}
+}