small frontend rewrite

.eslintrc.json

@@ -8,7 +8,6 @@
         "plugin:vue/recommended",
         "plugin:@typescript-eslint/recommended"
     ],
-    "overrides": [],
     "globals": {
         "useCookie": true,
         "$fetch": true,
@@ -56,7 +55,8 @@
             "files": ["*.vue"],
             "rules": {
                 "vue/multi-word-component-names": "off",
-                "vue/attribute-hyphenation": "off"
+                "vue/attribute-hyphenation": "off",
+								"vue/html-self-closing": "off"
             }
         }
     ]

assets/css/main.css

@@ -3,23 +3,58 @@
 @tailwind utilities;
 
 :root {
-	--background-color: hsl(230,28%,7.3%);
+	--primary-bg: hsl(240, 5%, 4%);
-	--foreground-color: hsl(230,26%,13%);
+	--secondary-bg: hsl(240, 9%, 7%);
-	--primary-accent: hsl(180,55%,45%);
+	--tertiary-bg: hsl(240, 13%, 10%);
-	--message-input-color: hsl(228,27.3%,25%);
+	--tertiary-lightened-bg: hsl(240, 13%, 16%);
-	--primary-placeholder: hsl(218,11%,65%);
+	--primary-input: hsl(240, 8%, 12%);
-
+	--primary-accent: hsl(342, 75%, 55%);
-
+	--primary-text: hsl(0, 0%, 97%);
-	--primary-dark: hsl(225, 7.7%, 10.2%); /* dropdown and emoji picker bg */
+	--primary-placeholder: hsl(0, 0%, 80%);
-	--primary-700: hsl(230,31.2%,6.3%); /* code block border */
+	--reaction-hover-border: hsl(230, 33.4%, 18.7%);
-	--primary-600: hsl(220, 6.8%, 17.3%); /* modal bg */
+	--reaction-hover: hsl(230, 31.2%, 12.5%);
-	--primary-500: hsl(230,28.7%,9.8%); /* reaction button bg, code block, and inline code bg */
+	--reaction-active-border: rgb(88,101,242);
-	--primary-400: hsl(230, 12%, 19.2%); /* action buttons */
-	--primary-300: hsl(230,26%,15%); /* nav button bg */
-	--primary-200: hsl(230,26%,21.3%); /* nav button hover bg */
-	--primary-text: hsl(216, 3.7%, 73.5%); /* main text color (duh) */
-	--reaction-border: hsl(230,33.4%,18.7%); /* reaction border on hover */
-	--reaction-hover: hsl(230,31.2%,12.5%); /* reaction bg on hover */
-	--invite-members: var(--primary-accent); /* color of dot next to server members count on invites */
 	--primary-danger: hsl(359, 66.7%, 54.1%);
+
+	/*
+	--background-color: hsl(230, 28%, 7.3%);
+	--foreground-color: hsl(230, 26%, 13%);
+	--primary-accent: hsl(180, 55%, 45%);
+	--message-input-color: hsl(228, 27.3%, 25%);
+	--primary-placeholder: hsl(218, 11%, 65%);
+
+
+	--primary-dark: hsl(225, 7.7%, 10.2%);
+	/* dropdown and emoji picker bg 
+	--primary-700: hsl(230, 31.2%, 6.3%);
+	/* code block border 
+	--primary-600: hsl(220, 6.8%, 17.3%);
+	/* modal bg 
+	--primary-500: hsl(230, 28.7%, 9.8%);
+	/* reaction button bg, code block, and inline code bg 
+	--primary-400: hsl(230, 12%, 19.2%);
+	/* action buttons 
+	--primary-300: hsl(230, 26%, 15%);
+	/* nav button bg 
+	--primary-200: hsl(230, 26%, 21.3%);
+	/* nav button hover bg 
+	--primary-text: hsl(216, 3.7%, 73.5%);
+	/* main text color (duh) 
+	--reaction-border: hsl(230, 33.4%, 18.7%);
+	/* reaction border on hover 
+	--reaction-hover: hsl(230, 31.2%, 12.5%);
+	/* reaction bg on hover 
+	--invite-members: var(--primary-accent);
+	/* color of dot next to server members count on invites 
+	--primary-danger: hsl(359, 66.7%, 54.1%);
+	*/
+}
+
+* {
+	color: var(--primary-text);
+	scrollbar-width: none;
+}
+
+*::-webkit-scrollbar {
+	display: none;
 }

components/DropdownMenu.vue

@@ -3,7 +3,7 @@
     <div
       v-if="opened"
       ref="dropdown"
-      class="z-[2] absolute m-2 bg-[var(--primary-dark)] w-[calc(100%-1rem)] p-3 rounded text-left"
+      class="z-[2] absolute m-2 bg-[var(--tertiary-bg)] w-[calc(100%-1rem)] p-3 rounded text-left"
       :class="(inverted) ? 'dropdown-inverse' : 'dropdown'"
     >
       <slot />

components/InviteCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="w-6/12 bg-[var(--primary-500)] mb-1 mt-0.5 p-4 rounded-md shadow-md mr-2">
+  <div class="w-6/12 bg-[var(--secondary-bg)] mb-1 mt-0.5 p-4 rounded-md shadow-md mr-2">
     <p class="text-sm font-semibold text-zinc-100">
       You've been invited to join a
       server
@@ -8,13 +8,13 @@
     <div class="flex flex-row">
       <div class="flex items-center mr-4">
         <span
-          class="before:bg-[var(--invite-members)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
+          class="before:bg-[var(--primary-accent)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
         />
         <span>{{ invite.server.participants.length }} Members</span>
       </div>
       <div class="flex items-center">
         <span
-          class="before:bg-[var(--invite-members)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
+          class="before:bg-[var(--primary-accent)] before:h-2 before:w-2 before:inline-block before:my-auto before:rounded-full before:mr-1"
         />
         <span>{{ invite.server.participants.filter((e: IUser) => e.online === true).length }} Online</span>
       </div>
@@ -37,25 +37,27 @@
 </template>
 
 <script lang="ts">
-import { useGlobalStore } from '~/stores/store';
+import { PropType } from 'vue';
+import { useServerStore } from '~/stores/serverStore';
+import { useUserStore } from '~/stores/userStore';
 import { IInviteCode, IUser } from '~/types';
 
 export default {
 	props: {
 		invite: {
-			type: Object,
+			type: Object as PropType<IInviteCode>,
 			required: true
 		}
 	},
 	data() {
 		return {
-			user: storeToRefs(useGlobalStore()).user,
+			user: storeToRefs(useUserStore()).user,
-			servers: storeToRefs(useGlobalStore()).servers,
+			servers: storeToRefs(useServerStore()).servers,
 		};
 	},
 	computed: {
 		userInServer(): boolean {
-			return !!this.invite.server.participants.find((e: IUser) => e.id === this.user.id);
+			return !!this.invite.server.participants.find((e: IUser) => e.id === this.user?.id);
 		}
 	},
 	methods: {

components/Message.vue

@@ -9,7 +9,7 @@
     >
       <div
         :id="`actions-${message.id}`"
-        class="relative bg-[var(--primary-400)] rounded-md border border-[rgb(32,34,37)] text-[var(--primary-text)] flex overflow-hidden"
+        class="relative bg-[var(--tertiary-bg)] rounded-md border border-[rgb(32,34,37)] text-[var(--primary-text)] flex overflow-hidden"
       >
         <button
           class="p-1 hover:backdrop-brightness-125 transition-all flex w-fit h-fit"
@@ -72,7 +72,7 @@
           class="flex"
         >
           <button
-            class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-400)] w-[28px] h-[28px] items-center justify-center"
+            class="p-1 hover:backdrop-brightness-125 transition-all flex w-[28px] h-[28px] items-center justify-center"
             @click="copy(message.id)"
           >
             <svg
@@ -83,14 +83,14 @@
               viewBox="0 0 24 24"
             >
               <path
-                fill="currentColor"
+                fill="var(--tertiary-bg)"
                 d="M10 7v2H9v6h1v2H6v-2h1V9H6V7h4m6 0a2 2 0 0 1 2 2v6c0 1.11-.89 2-2 2h-4V7m4 2h-2v6h2V9Z"
               />
             </svg>
           </button>
           <button
-            v-if="message.creator.id === user.id"
+            v-if="message.creator.id === user?.id"
-            class="p-1 hover:backdrop-brightness-125 transition-all flex text-[var(--primary-danger)] w-[28px] h-[28px] items-center justify-center"
+            class="p-1 hover:backdrop-brightness-125 transition-all flex w-[28px] h-[28px] items-center justify-center"
             @click="deleteMessage()"
           >
             <svg
@@ -101,7 +101,7 @@
             >
               <path
                 fill="none"
-                stroke="currentColor"
+                stroke="var(--primary-danger)"
                 stroke-linecap="round"
                 stroke-linejoin="round"
                 stroke-width="2"
@@ -113,7 +113,7 @@
       </div>
     </div>
     <div
-      class="transition-[backdrop-filter] hover:backdrop-brightness-90 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 message-wrapper items-center z-[1]"
+      class="transition-[backdrop-filter] hover:backdrop-brightness-125 ease-[cubic-bezier(.37,.64,.59,.33)] duration-150 my-4 px-7 py-2 message-wrapper items-center z-[1]"
       :class="classes"
     >
       <div class="message-content">
@@ -137,14 +137,14 @@
         </div>
         <div class="flex gap-2 flex-wrap">
           <button
-            v-for="reaction in message.reactions"
+            v-for="reaction in reactions"
             :key="reaction.emoji"
-            class="py-0.5 px-1.5 bg-[var(--primary-500)] border items-center flex rounded-lg border-[var(--primary-500)] hover:border-[var(--reaction-border)] hover:bg-[var(--reaction-hover)] transition-colors shadow-sm max-h-[30px]"
+            class="py-0.5 px-1.5 bg-[var(--secondary-bg)] border items-center flex rounded-lg border-[var(--tertiary-bg)] hover:border-[var(--reaction-hover-border)] hover:bg-[var(--reaction-hover)] transition-colors shadow-sm max-h-[30px]"
-            :class="(reaction.users.find((e) => e.id === user.id)) ? '!border-[rgb(88,101,242)] hover:!border-[rgb(88,101,242)]' : ''"
+            :class="(reaction.users.find((e) => e.id === user?.id)) ? '!border-[var(--reaction-active-border)] hover:!border-[var(--reaction-active-border)]' : ''"
             @click="toggleReaction(reaction.emoji)"
           >
             <div class="flex items-center mr-0.5 w-6 drop-shadow">
-              <span :style="emojiStyles(reaction.emoji, 16)" />
+              <span :style="emojiStyles(reaction.emoji, 17)" />
             </div>
             <div class="relative overflow-hidden ml-1.5">
               <div
@@ -163,9 +163,11 @@
 
 <script lang="ts">
 import { PropType } from 'vue';
-import { IPopupData, IMessage } from '~/types';
+import { IPopupData, IMessage, SafeUser, IReaction } from '~/types';
-import { useGlobalStore } from '~/stores/store';
 import emojiJson from '~/assets/json/emoji.json';
+import { useActiveStore } from '~/stores/activeStore';
+import { useUserStore } from '~/stores/userStore';
+import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
 
 export default {
 	props: {
@@ -184,19 +186,32 @@ export default {
 		classes: {
 			type: String,
 			required: true
+		},
+		channelId: {
+			type: String,
+			required: true
+		},
+		participants: {
+			type: Array as PropType<SafeUser[]>,
+			required: true
 		}
 	},
 	data() {
 		return {
-			user: storeToRefs(useGlobalStore()).user,
+			user: storeToRefs(useUserStore()).user,
 			emojiPickerOpen: false,
 			overflowShown: false
 		};
 	},
+	computed: {
+		reactions(): IReaction[] {
+			return this.message.reactions?.filter((e) => e.users.length > 0) || [];
+		}
+	},
 	mounted() {
 		const { $listen } = useNuxtApp();
 		$listen('pickedEmoji', (emoji) => {
-			if (useGlobalStore().emojiPickerData.openedBy?.messageId !== this.message.id) return;
+			if (useEmojiPickerStore().emojiPickerData.openedBy?.messageId !== this.message.id) return;
 			const replacementEmoji = emojiJson.find((e) => e.short_names[0] === emoji);
 			if (!replacementEmoji?.emoji) return;
 			if (this.message.reactions?.find((e) => e.emoji === replacementEmoji.emoji)) return;
@@ -205,12 +220,11 @@ export default {
 	},
 	methods: {
 		async toggleReaction(emoji: string) {
-			const route = useRoute();
+			let { message } = await $fetch(`/api/channels/${this.channelId}/messages/${this.message.id}/reactions/${emoji}`, { method: 'POST' }) as { message: IMessage };
-			let { message } = await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/reactions/${emoji}`, { method: 'POST' }) as { message: IMessage };
 
-			message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
+			message.body = parseMessageBody(message.body, this.participants);
 
-			useGlobalStore().updateMessage(this.message.id, message);
+			useActiveStore().updateMessage(message);
 		},
 		openEmojiPicker() {
 			const actionButtons = document.getElementById(`actions-${this.message.id}`);
@@ -218,7 +232,6 @@ export default {
 
 			const elementRect = actionButtons.getBoundingClientRect();
 			let top = elementRect.top + window.pageYOffset;
-
 			if (top + 522 > window.innerHeight) top = window.innerHeight - 522;
 
 			const payload = {
@@ -229,7 +242,8 @@ export default {
 					messageId: this.message.id
 				}
 			} as IPopupData;
-			useGlobalStore().toggleEmojiPicker(payload);
+
+			useEmojiPickerStore().toggleEmojiPicker(payload);
 		},
 		emojiStyles(emoji: string, width: number) {
 			const emojis = emojiJson;
@@ -249,8 +263,7 @@ export default {
 			};
 		},
 		async deleteMessage() {
-			const route = useRoute();
+			await $fetch(`/api/channels/${this.channelId}/messages/${this.message.id}/delete`, { method: 'DELETE' });
-			await $fetch(`/api/channels/${route.params.id}/messages/${this.message.id}/delete`, { method: 'DELETE' });
 		},
 		copy(text: string) {
 			navigator.clipboard.writeText(text);
@@ -266,10 +279,10 @@ export default {
 }
 
 pre.codeblock {
-	background-color: var(--primary-500);
+	background-color: var(--secondary-bg);
-	border: 1px solid var(--primary-700);
+	border: 1px solid var(--tertiary-bg);
 	border-radius: 0.375rem;
-	white-space: prewrap;
+	white-space: pre-wrap;
 	margin-top: 4px;
 	margin-bottom: 0;
 	display: flex;
@@ -285,7 +298,7 @@ pre.codeblock code {
 }
 
 code.inline-code {
-	background-color: var(--primary-500);
+	background-color: var(--secondary-bg);
 	padding: 0.2rem;
 	font-size: 85%;
 	border-radius: 4px;

components/MessagePane.vue

@@ -1,12 +1,12 @@
 <template>
   <div
-    class="h-full relative text-white bg-[var(--background-color)] grid grid-rows-[48px_1fr]"
+    class="h-full relative bg-[var(--primary-bg)] flex flex-col"
     @mouseenter="mouseEnter"
     @mouseleave="mouseLeave"
   >
-    <div class="w-full px-4 py-3 z-[1]">
+    <div class="px-4 py-3">
       <div
-        v-if="!server.DM"
+        v-if="!channel.DM"
         class="flex items-center"
       >
         <span class="mr-1">
@@ -23,7 +23,7 @@
             />
           </svg>
         </span>
-        <span class="text-zinc-100 font-semibold">{{ server.name }}</span>
+        <span class="font-semibold">{{ channel.name }}</span>
       </div>
       <div
         v-else
@@ -53,42 +53,44 @@
             </g>
           </svg>
         </span>
-        <span class="text-zinc-100 font-semibold">{{
+        <span class="font-semibold">{{
-          server.dmParticipants?.find((e: SafeUser) => e.id !== user.id)?.username
+          participants.find((e: SafeUser) => e.id !== user?.id)?.username
         }}</span>
       </div>
     </div>
 
     <section
-      class="bg-[var(--foreground-color)] mb-3 mx-1 h-[calc(100%-12px)] overflow-hidden rounded-lg relative grid grid-rows-[1fr_70px]"
+      class="h-full overflow-hidden rounded-lg relative flex flex-col"
     >
       <div
-        id="conversation-pane"
+        ref="conversationPane"
-        class="h-full overflow-y-scroll"
+        class="h-[calc(100%-70px)] overflow-y-scroll"
       >
         <div class="w-full pb-1 bg-inherit">
           <div>
-            <div v-if="server.messages.length === 0">
+            <div v-if="channel.messages.length === 0">
               <p>No messages yet</p>
             </div>
             <Message
-              v-for="(message, i) in server.messages"
+              v-for="(message, i) in channel.messages"
               v-else
               :key="message.id"
               :message="message"
               :shift-pressed="shiftPressed"
-              :show-username="i === 0 || server.messages[i - 1]?.creator.id !== message.creator.id"
+              :show-username="i === 0 || channel.messages[i - 1]?.creator.id !== message.creator.id"
               :classes="calculateMessageClasses(message, i)"
+              :channel-id="channel.id"
+              :participants="participants"
             />
           </div>
         </div>
         <div
-          v-if="showSearch"
+          v-if="search.show"
-          class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[var(--primary-500)] rounded-lg shadow-md z-5"
+          class="absolute bottom-[calc(75px+0.5rem)] mx-4 w-[calc(100vw-88px-240px-32px)] py-3 px-4 bg-[var(--secondary-bg)] rounded-lg shadow-md z-5"
         >
           <div class="relative flex flex-col">
             <div
-              v-for="resultingUser in searchResults"
+              v-for="resultingUser in search.results"
               :key="resultingUser.id"
               class="mx-2 my-1 w-[calc(100vw-88px-240px-64px-16px)] px-4 py-3 hover:backdrop-brightness-125 select-none rounded-md transition-all"
               @click="completeMention(resultingUser)"
@@ -99,7 +101,7 @@
         </div>
       </div>
 
-      <div class="flex absolute flex-row bottom-0 w-full h-fit bg-inherit mb-1">
+      <div class="flex absolute flex-row bottom-0 w-full h-fit bg-inherit">
         <form
           class="relative px-4 w-full pt-1.5 h-fit pb-1"
           @keyup="checkForMentions"
@@ -109,10 +111,10 @@
         >
           <div
             id="textbox"
-            class="px-4 rounded-md w-full min-h-[44px] h-fit bg-[var(--message-input-color)] placeholder:text-[var(--primary-placeholder)] flex flex-row"
+            class="px-4 rounded-md w-full min-h-[44px] h-fit bg-[var(--secondary-bg)] placeholder:text-[var(--primary-placeholder)] flex flex-row"
           >
             <textarea
-              id="messageBox"
+              ref="messageBox"
               v-model="messageContent"
               maxlength="5000"
               type="text"
@@ -171,35 +173,39 @@
 </template>
 
 <script lang="ts">
-import { Server } from 'socket.io';
+import { PropType } from 'vue';
-import { useGlobalStore } from '~/stores/store';
+import { useActiveStore } from '~/stores/activeStore';
-import { IMessage, SafeUser } from '~/types';
+import { useUserStore } from '~/stores/userStore';
+import { IChannel, IMessage, SafeUser } from '~/types';
 
 export default {
+	props: {
+		channel: {
+			type: Object as PropType<IChannel>,
+			required: true
+		},
+		participants: {
+			type: Array as PropType<SafeUser[]>,
+			required: true
+		}
+	},
 	data() {
 		return {
-			user: storeToRefs(useGlobalStore()).user,
+			user: storeToRefs(useUserStore()).user,
-			server: storeToRefs(useGlobalStore()).activeChannel,
 			messageContent: '',
-			canSendNotifications: false,
 			shiftPressed: false,
-			servers: storeToRefs(useGlobalStore()).servers,
 			usersTyping: [] as string[],
-			socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
+			search: {
-			showSearch: false,
+				content: '',
-			searchResults: [] as SafeUser[],
+				show: false,
-			search: '',
+				results: [] as SafeUser[],
+			}
 		};
 	},
 	mounted() {
-		if (!this.user) throw new Error('User not found, but sessionToken cookie is set');
+		Notification.requestPermission();
 
-		Notification.requestPermission().then((result) => {
+		const conversationDiv = this.$refs.conversationPane as HTMLDivElement;
-			const permission = (result === 'granted') ? true : false;
-			this.canSendNotifications = permission;
-		});
-
-		const conversationDiv = document.getElementById('conversation-pane');
 		if (!conversationDiv) throw new Error('conversation div not found');
 		this.scrollToBottom();
 
@@ -210,28 +216,28 @@ export default {
 			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
 			if (!this.messageContent) return;
 
-			let message: IMessage = await $fetch(`/api/channels/${this.server.id}/sendMessage`, { method: 'post', body: { body: this.messageContent }, headers });
+			let message: IMessage = await $fetch(`/api/channels/${this.channel.id}/sendMessage`, { method: 'post', body: { body: this.messageContent }, headers });
 
 			if (!message) return;
-			if (this.server.messages.includes(message)) return;
+			if (this.channel.messages.includes(message)) return;
 
-			message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
+			message.body = parseMessageBody(message.body, this.participants);
 
-			this.server.messages.push(message);
+			this.channel.messages.push(message);
 			this.messageContent = '';
-			const conversationDiv = document.getElementById('conversation-pane');
+			const conversationDiv = this.$refs.conversationPane as HTMLDivElement;
 			if (!conversationDiv) throw new Error('wtf');
 
-			setTimeout(() => {
+			this.scrollToBottom();
-				conversationDiv.scrollTop = conversationDiv.scrollHeight;
-			});
 		},
 		scrollToBottom() {
-			const conversationDiv = document.getElementById('conversation-pane');
+			const conversationDiv = this.$refs.conversationPane as HTMLDivElement;
 			if (!conversationDiv) throw new Error('wtf');
 			conversationDiv.scrollTo(0, conversationDiv.scrollHeight);
 		},
 		typing(event: KeyboardEvent) {
+			const { $io } = useNuxtApp();
+
 			const specialKeys = [
 				'Backspace',
 				'Enter',
@@ -246,7 +252,7 @@ export default {
 				return;
 			}
 
-			this.socket.emit('typing', this.server.id);
+			$io.emit('typing', this.channel.id);
 		},
 		mouseEnter() {
 			document.body.addEventListener('keydown', this.keyPressed, false);
@@ -268,12 +274,12 @@ export default {
 			}
 		},
 		calculateMessageClasses(message: IMessage, i: number) {
-			if (i === 0 || this.server.messages[i - 1]?.creator.id !== message.creator.id) {
+			if (i === 0 || this.channel.messages[i - 1]?.creator.id !== message.creator.id) {
-				if (i !== this.server.messages.length - 1 || this.server.messages[i + 1]?.creator.id === message.creator.id) {
+				if (i !== this.channel.messages.length - 1 || this.channel.messages[i + 1]?.creator.id === message.creator.id) {
 					return 'mb-0 pb-0.5';
 				}
 			} else {
-				if (i !== this.server.messages.length - 1 || this.server.messages[i + 1]?.creator.id === message.creator.id) {
+				if (i !== this.channel.messages.length - 1 || this.channel.messages[i + 1]?.creator.id === message.creator.id) {
 					return 'mt-0 mb-0 !py-0.5';
 				} else {
 					return 'mt-0 pt-0.5 pb-1';
@@ -283,31 +289,22 @@ export default {
 			return '';
 		},
 		checkForMentions() {
-			const input = document.getElementById('messageBox') as HTMLTextAreaElement;
+			const input = this.$refs.messageBox as HTMLTextAreaElement;
 			const startPosition = input.selectionStart;
 			const endPosition = input.selectionEnd;
 
 			if (startPosition === endPosition && this.inMention(startPosition)) {
-				let participants;
-				if (this.server.DM) {
-					participants = this.server.dmParticipants;
-				} else {
-					participants = this.server.server.participants;
-				}
-
-				if (!participants) throw new Error(`participants in channel "${this.server.id}" not found"`);
-
 				const search = this.messageContent.split(' ')[this.messageContent.substring(0, startPosition).split(' ').length - 1]?.slice(1);
 				if (!search) return;
 
-				this.search = search;
+				this.search.content = search;
-				if (this.search.length === 0) {
+				if (this.search.content.length === 0) {
-					this.showSearch = false;
+					this.search.show = false;
 					return;
 				}
 
 				const maxResults = Math.floor(document.body.clientHeight / 48 + 8) - 6;
-				let results = participants.filter((e: SafeUser) => e.username.includes(this.search));
+				let results = this.participants.filter((e: SafeUser) => e.username.includes(this.search.content));
 
 				results.sort((a: SafeUser, b: SafeUser) => {
 					const usernameA = a.username.toLowerCase();
@@ -327,13 +324,13 @@ export default {
 				}
 
 				if (results.length === 0) {
-					this.showSearch = false;
+					this.search.show = false;
 					return;
 				}
-				this.searchResults = results;
+				this.search.results = results;
-				this.showSearch = true;
+				this.search.show = true;
 			} else {
-				this.showSearch = false;
+				this.search.show = false;
 			}
 		},
 		inMention(cursorPos: number): boolean {
@@ -343,37 +340,39 @@ export default {
 			return this.inMention(cursorPos - 1);
 		},
 		completeMention(user: SafeUser) {
-			this.messageContent = this.messageContent.replace('@' + this.search, `<@${user.id}>`);
+			this.messageContent = this.messageContent.replace('@' + this.search.content, `<@${user.id}>`);
-			this.showSearch = false;
+			this.search.show = false;
-			document.getElementById('messageBox')?.focus();
+			this.$refs.messageBox.focus();
 		},
 		listenToWebsocket(conversationDiv: HTMLElement) {
-			this.socket.removeAllListeners();
+			const { $io } = useNuxtApp();
 
-			this.socket.on(`message-${this.server.id}`, (ev: { message: IMessage, deleted?: boolean }) => {
+			$io.removeAllListeners();
+
+			$io.on(`message-${this.channel.id}`, (ev: { message: IMessage, deleted?: boolean }) => {
 				let { message, deleted } = ev;
 				
 				if (deleted) {
-					useGlobalStore().removeMessage(message.id);
+					useActiveStore().removeMessage(message.id);
 					return;
 				}
 
-				message.body = parseMessageBody(message.body, useGlobalStore().activeChannel);
+				message.body = parseMessageBody(message.body, this.participants);
 
-				if (this.server.messages.find((e) => e.id === message.id)) {
+				if (this.channel.messages.find((e) => e.id === message.id)) {
 					// message is already in the server, replace it with the updated message
-					useGlobalStore().updateMessage(message.id, message);
+					useActiveStore().updateMessage(message);
 					return;
 				}
 
-				if (message.creator.id === this.user.id) return;
+				if (message.creator.id === this.user?.id) return;
 
 
 				if (!document.hasFocus()) {
-					new Notification(`Message from @${message.creator.username}`, { body: message.body, tag: this.server.id.toString() });
+					new Notification(`Message from @${message.creator.username}`, { body: message.body, tag: this.channel.id.toString() });
 				}
 
-				this.server.messages.push(message);
+				useActiveStore().addMessage(message);
 
 				const lastElementChild = conversationDiv.children[0]?.lastElementChild;
 				if (!lastElementChild) return;
@@ -385,8 +384,8 @@ export default {
 			});
 
 			let timeout: NodeJS.Timeout;
-			this.socket.on(`typing-${this.server.id}`, (ev: string) => {
+			$io.on(`typing-${this.channel.id}`, (ev: string) => {
-				if (ev === this.user.username) return;
+				if (ev === this.user?.username) return;
 				clearTimeout(timeout);
 				timeout = setTimeout(() => {
 					this.usersTyping = this.usersTyping.filter(username => username !== ev);
@@ -395,17 +394,7 @@ export default {
 				this.usersTyping.push(ev);
 			});
 		},
-		// resizeTextarea() {
-		// 	const textArea = document.getElementById('messageBox')
-		// 	const textBox = document.getElementById('textBox')
-		// 	const taLineHeight = 26; // This should match the line-height in the CSS
-		// 	const taHeight = textArea.scrollHeight; // Get the scroll height of the textarea
-		// 	if (!taHeight) taHeight = 44;
-		// 	textArea.style.height = taHeight + 'px'; // This line is optional, I included it so you can more easily count the lines in an expanded textarea
-		// 	const numberOfLines = Math.floor(taHeight / taLineHeight);
-		// 	console.log("there are " + numberOfLines + " lines in the text area");
-		// 	console.log('a')
-		// }
 	},
 };
+
 </script>

components/Nav.vue

@@ -1,13 +1,9 @@
-<!-- eslint-disable vue/no-multiple-template-root -->
 <template>
-  <nav
+  <nav class="bg-[var(--primary-bg)] h-screen p-4 grid grid-cols-1 grid-rows-[56px_1fr_56px] shadow shadow-black/80">
-    class="p-4 bg-[var(--background-color)] grid grid-cols-1 grid-rows-[56px_1fr_56px] h-screen min-w-[88px] text-white relative"
-  >
     <div>
       <nuxt-link to="/channel/@me">
         <button
-          class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300"
+          class="bg-[var(--tertiary-bg)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--tertiary-lightened-bg)] duration-300"
-          :class="(serverType === 'dms') ? '!rounded-[1.375rem]' : ''"
         >
           <span>
             <svg
@@ -46,132 +42,64 @@
         </button>
       </nuxt-link>
     </div>
-    <div class="overflow-y-scroll my-2 flex gap-y-2 flex-col">
+    <div class="overflow-y-auto overflow-x-hidden my-2 flex gap-y-2 flex-col">
       <div class="w-full flex justify-center">
-        <hr class="border-2 rounded-md border-[var(--primary-300)] w-8/12 my-0.5">
+        <hr class="border-2 rounded-md border-[var(--tertiary-bg)] w-8/12 my-0.5">
       </div>
+
       <nuxt-link
         v-for="server in servers"
         :key="server.id"
         :to="'/channel/' + server.channels[0]?.id"
       >
         <button
-          :key="server.id"
+          class="bg-[var(--tertiary-bg)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--tertiary-lightened-bg)] duration-300 h-[56px] w-[56px]"
-          class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 h-[56px] w-[56px]"
-          :class="(activeServer.id === server.id) ? '!rounded-[1.375rem]' : ''"
         >
           <svg
+            xmlns="http://www.w3.org/2000/svg"
             width="32"
             height="32"
-            viewBox="0 0 256 154"
+            viewBox="0 0 24 24"
-          >
+          ><g
-            <defs>
-              <linearGradient
-                id="svgIDa"
-                x1="-2.778%"
-                x2="100%"
-                y1="32%"
-                y2="67.556%"
-              >
-                <stop
-                  offset="0%"
-                  stop-color="#2298BD"
-                />
-                <stop
-                  offset="100%"
-                  stop-color="#0ED7B5"
-                />
-              </linearGradient>
-            </defs>
-            <path
-              fill="url(#svgIDa)"
-              d="M128 0C93.867 0 72.533 17.067 64 51.2C76.8 34.133 91.733 27.733 108.8 32c9.737 2.434 16.697 9.499 24.401 17.318C145.751 62.057 160.275 76.8 192 76.8c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C174.249 14.743 159.725 0 128 0ZM64 76.8C29.867 76.8 8.533 93.867 0 128c12.8-17.067 27.733-23.467 44.8-19.2c9.737 2.434 16.697 9.499 24.401 17.318C81.751 138.857 96.275 153.6 128 153.6c34.133 0 55.467-17.067 64-51.2c-12.8 17.067-27.733 23.467-44.8 19.2c-9.737-2.434-16.697-9.499-24.401-17.318C110.249 91.543 95.725 76.8 64 76.8Z"
-            />
-          </svg>
-        </button>
-      </nuxt-link>
-    </div>
-    <div>
-      <button
-        class="bg-[var(--primary-300)] p-3 rounded-full transition-all hover:rounded-[1.375rem] ease-in-out hover:bg-[var(--primary-200)] duration-300 text-[var(--primary-accent)] cursor-pointer"
-        @click="createServerModelOpen = true"
-      >
-        <svg
-          width="32"
-          height="32"
-          viewBox="0 0 24 24"
-        >
-          <path
             fill="none"
-            stroke="currentColor"
+            stroke="var(--primary-placeholder)"
             stroke-linecap="round"
             stroke-linejoin="round"
             stroke-width="2"
-            d="M12 5v14m-7-7h14"
+          ><path d="m8 9l3 3l-3 3m5 0h3" /><path d="M3 6a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" /></g></svg>
-          />
+        </button>
-        </svg>
+      </nuxt-link>
-      </button>
     </div>
-  </nav>
 
-  <div
+    <button
-    v-if="createServerModelOpen"
+      class="p-3 rounded-full transition-colors ease-in-out hover:bg-[var(--tertiary-lightened-bg)] duration-300 cursor-pointer"
-    class="absolute z-10 top-0 bottom-0 left-0 right-0"
-  >
-    <div
-      class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white"
     >
-      <h2 class="font-semibold text-xl">
+      <svg
-        Create a server:
+        width="32"
-      </h2>
+        height="32"
-      <div>
+        viewBox="0 0 24 24"
-        <form
+      >
-          class="w-3/5"
+        <path
-          @submit.prevent="createServer"
+          fill="none"
-        >
+          stroke="var(--primary-accent)"
-          <input
+          stroke-linecap="round"
-            v-model="serverName"
+          stroke-linejoin="round"
-            type="text"
+          stroke-width="2"
-            class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md placeholder:text-[var(--primary-placeholder)]"
+          d="M12 5v14m-7-7h14"
-            placeholder="Server name"
+        />
-          >
+      </svg>
-          <input
+    </button>
-            type="submit"
+  </nav>
-            class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
-          >
-        </form>
-      </div>
-    </div>
-    <div
-      class="bg-black/70 w-screen h-screen"
-      @click="createServerModelOpen = false"
-    />
-  </div>
 </template>
 
 <script lang="ts">
-import { useGlobalStore } from '~/stores/store';
+import { useServerStore } from '~/stores/serverStore';
-import { IServer } from '~/types';
 
 export default {
 	data() {
 		return {
-			servers: storeToRefs(useGlobalStore()).servers,
+			servers: storeToRefs(useServerStore()).servers
-			serverType: storeToRefs(useGlobalStore()).activeServerType,
-			activeServer: storeToRefs(useGlobalStore()).activeServer,
-			createServerModelOpen: false,
-			serverName: ''
 		};
-	},
+	}
-	methods: {
-		async createServer() {
-			const globalStore = useGlobalStore();
-			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
-			const server: IServer = await $fetch('/api/channels/create', { method: 'post', body: { serverName: this.serverName }, headers });
-			this.createServerModelOpen = false;
-			this.serverName = '';
-			globalStore.addServer(server);
-		},
-	},
 };
 </script>

components/Sidebar.vue

@@ -1,8 +1,7 @@
-<!-- eslint-disable vue/no-multiple-template-root -->
 <template>
-  <aside class="bg-[var(--background-color)] min-w-60 w-60 h-screen shadow-sm text-white select-none relative z-[2]">
+  <aside class="bg-[var(--secondary-bg)] min-w-60 w-60 h-screen shadow-sm text-white select-none relative z-[2]">
     <div
-      v-if="serverType === 'dms' || !server"
+      v-if="activeServer.type === 'dm' || !activeServer.data.server"
       class="h-full grid grid-rows-[48px_1fr] w-full"
     >
       <section>
@@ -14,18 +13,19 @@
       </section>
 
       <div
-        class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg"
+        class="h-[calc(100%-12px)] grid grid-rows-[1fr_56px] bg-[var(--foreground-color)]"
       >
         <div class="h-fit">
           <nuxt-link
             v-for="dm in dms"
             :key="dm.id"
+            class="hover:no-underline"
             :to="'/channel/@me/' + dm.id"
           >
             <div
-              class="mx-2 my-4 bg-inherit hover:backdrop-brightness-[1.35] px-2 py-2 max-h-10 h-10 overflow-ellipsis rounded-md transition-all"
+              class="mx-2 my-4 bg-inherit hover:backdrop-brightness-[1.35] px-2 py-2 max-h-10 h-10 overflow-ellipsis transition-all"
             >
-              {{ dm.dmParticipants?.find((e) => e.id !== user.id)?.username }}
+              {{ dm.dmParticipants?.find((e) => e.id !== user?.id)?.username }}
             </div>
           </nuxt-link>
         </div>
@@ -37,11 +37,11 @@
     >
       <section>
         <h4
-          class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all rounded-lg"
+          class="py-3 px-4 font-semibold grid gap-1 grid-cols-[1fr_28px] w-full items-center cursor-pointer p-1 bg-inherit transition-all"
           :class="(!serverDropdownOpen) ? 'hover:backdrop-brightness-125' : 'backdrop-brightness-125'"
           @click="serverDropdownOpen = !serverDropdownOpen"
         >
-          <span>{{ server.name }}</span>
+          <span>{{ activeServer.data.server.name }}</span>
           <button>
             <span
               v-if="!serverDropdownOpen"
@@ -128,32 +128,35 @@
 
 
       <div
-        class="h-[calc(100%-12px)] mb-3 mx-1 grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg"
+        class="h-[calc(100%-12px)] grid grid-rows-[1fr_56px] bg-[var(--foreground-color)] rounded-lg"
       >
-        <div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-x-scroll">
+        <div class="flex gap-y-1.5 px-1.5 mt-2 flex-col overflow-y-auto overflow-x-hidden">
-          <button
+          <nuxt-link
-            v-for="channel in server.channels"
+            v-for="channel in activeServer.data.server.channels"
             :key="channel.id"
-            :class="(activeChannel.id === channel.id) ? 'backdrop-brightness-[1.35]' : 'hover:backdrop-brightness-[1.35]'"
+            :to="'/channel/' + channel.id"
-            class="flex text-center bg-inherit px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
-            @click="openChannel(channel.id)"
           >
-            <span class="h-fit">
+            <button
-              <svg
+              :class="(activeServer.data.channel.id === channel.id) ? 'backdrop-brightness-[1.35]' : 'hover:backdrop-brightness-[1.35]'"
-                class="text-zinc-300/80 my-auto"
+              class="flex text-center bg-inherit px-2 py-1.5 w-full transition-all rounded drop-shadow-sm gap-1/5 cursor-pointer items-center"
-                xmlns="http://www.w3.org/2000/svg"
+            >
-                width="20"
+              <span class="h-fit">
-                height="20"
+                <svg
-                viewBox="0 0 24 24"
+                  class="text-zinc-300/80 my-auto"
-              >
+                  xmlns="http://www.w3.org/2000/svg"
-                <path
+                  width="20"
-                  fill="currentColor"
+                  height="20"
-                  d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
+                  viewBox="0 0 24 24"
-                />
+                >
-              </svg>
+                  <path
-            </span>
+                    fill="currentColor"
-            <span>{{ channel.name }}</span>
+                    d="m5.41 21l.71-4h-4l.35-2h4l1.06-6h-4l.35-2h4l.71-4h2l-.71 4h6l.71-4h2l-.71 4h4l-.35 2h-4l-1.06 6h4l-.35 2h-4l-.71 4h-2l.71-4h-6l-.71 4h-2M9.53 9l-1.06 6h6l1.06-6h-6Z"
-          </button>
+                  />
+                </svg>
+              </span>
+              <span class="text-ellipsis w-fit whitespace-nowrap overflow-hidden">{{ channel.name }}</span>
+            </button>
+          </nuxt-link>
           <button
             v-if="userIsOwner || userIsAdmin"
             class="flex text-center bg-inherit hover:backdrop-brightness-[1.45] px-2 py-1.5 w-full transition-all rounded drop-shadow-sm cursor-pointer items-center"
@@ -255,7 +258,7 @@
           <div class="h-full p-3">
             <div class="grid grid-cols-[32px_1fr_32px] gap-x-2 items-center">
               <span class="bg-[hsl(220,calc(1*6.8%),22.6%)] w-[32px] h-[32px] rounded-full" />
-              <span class="h-fit w-fit overflow-ellipsis">{{ user.username }}</span>
+              <span class="h-fit w-fit overflow-ellipsis">{{ user?.username }}</span>
               <button
                 class="text-zinc-300 hover:backdrop-brightness-90 p-1 rounded-md transition-all"
                 @click="userDropdownOpen = !userDropdownOpen"
@@ -290,69 +293,36 @@
       </div>
     </div>
   </aside>
-
-  <div
-    v-if="createChannelModelOpen"
-    class="absolute z-10 top-0 bottom-0 left-0 right-0"
-  >
-    <div
-      class="bg-black/70 w-screen h-screen"
-      @click="createChannelModelOpen = false"
-    />
-    <div
-      class="p-4 z-20 absolute bg-[var(--primary-500)] shadow-md rounded-md -translate-x-1/2 -translate-y-1/2 top-1/2 left-1/2 text-white"
-    >
-      <h2 class="font-semibold text-xl">
-        Create a channel:
-      </h2>
-      <div>
-        <form
-          class="w-3/5"
-          @submit.prevent="createChannel"
-        >
-          <input
-            v-model="channelName"
-            type="text"
-            class="py-2 px-3 rounded-md mb-2 bg-[var(--message-input-color)] shadow-md"
-            placeholder="Channel name"
-          >
-          <input
-            type="submit"
-            class="py-2 px-3 rounded-md bg-[var(--message-input-color)] shadow-md"
-          >
-        </form>
-      </div>
-    </div>
-  </div>
 </template>
 
 <script lang="ts">
-import { useGlobalStore } from '~/stores/store';
+import { useActiveStore } from '~/stores/activeStore';
+import { useDmStore } from '~/stores/dmStore';
+import { useServerStore } from '~/stores/serverStore';
+import { useUserStore } from '~/stores/userStore';
 import { IChannel, IRole } from '~/types';
 
 export default {
-	setup() {
-		console.log('sidebar', useGlobalStore().activeServer.channels);
-	},
 	data() {
 		return {
-			server: storeToRefs(useGlobalStore()).activeServer,
+			activeServer: {
-			serverType: storeToRefs(useGlobalStore()).activeServerType,
+				type: storeToRefs(useActiveStore()).type,
-			activeChannel: storeToRefs(useGlobalStore()).activeChannel,
+				data: storeToRefs(useActiveStore()).server,
-			user: storeToRefs(useGlobalStore()).user,
+			},
-			dms: storeToRefs(useGlobalStore()).dms,
+			user: storeToRefs(useUserStore()).user,
+			dms: storeToRefs(useDmStore()).dms,
+			channelName: '',
 			createChannelModelOpen: false,
 			serverDropdownOpen: false,
 			userDropdownOpen: false,
-			channelName: '',
 		};
 	},
 	computed: {
 		userIsOwner() {
-			return this.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.owner;
+			return this.activeServer.data.server && this.activeServer.type === 'server' && this.activeServer.data.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user?.id))?.owner;
 		},
 		userIsAdmin() {
-			return this.server && this.serverType === 'servers' && this.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user.id))?.administer;
+			return this.activeServer.data.server && this.activeServer.type === 'server' && this.activeServer.data.server.roles?.find((e: IRole) => e.users.some((el) => el.id === this.user?.id))?.administer;
 		}
 	},
 	methods: {
@@ -361,30 +331,20 @@ export default {
 		},
 		async createChannel() {
 			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
-			const channel = await $fetch(`/api/guilds/${this.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName }, headers }) as IChannel;
+			const channel = await $fetch(`/api/guilds/${this.activeServer.data.server.id}/addChannel`, { method: 'POST', body: { channelName: this.channelName }, headers }) as IChannel;
 
 			if (!channel) return;
 
-			useGlobalStore().addChannel(this.server.id, channel);
+			useServerStore().addChannel(this.activeServer.data.server.id, channel);
 			this.createChannelModelOpen = false;
 		},
-		openChannel(id: string) {
-			const router = useRouter();
-
-			router.push({ params: { id } });
-		},
 		async createInvite() {
 			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
-			const inviteCode = await $fetch(`/api/guilds/${this.server.id}/createInvite`, { method: 'POST', headers });
+			const inviteCode = await $fetch(`/api/guilds/${this.activeServer.data.server.id}/createInvite`, { method: 'POST', headers });
 		},
 		async logout() {
-			await $fetch('/api/user/logout');
+			useUserStore().logout();
-			useCookie('sessionToken').value = null;
-			useCookie('userId').value = null;
-
-			useGlobalStore().logout();
-			navigateTo('/login');
 		}
-	},
+	}
 };
 </script>

components/UserProfile.vue

@@ -1,7 +1,7 @@
 <template>
   <div />
 </template>
-
+<!-- 
 <script>
 import { IUser } from '~/types';
 
@@ -13,4 +13,4 @@ export default {
 		}
 	}
 };
-</script>
+</script> -->

layouts/clean.vue

@@ -1,5 +1,3 @@
 <template>
-  <div class="flex h-screen max-h-screen text-white">
+  <slot />
-    <slot />
-  </div>
 </template>

layouts/default.vue

@@ -1,61 +1,75 @@
 <template>
-	<div class="flex h-screen max-h-screen text-white">
+  <div class="flex h-screen max-h-screen">
-		<Nav />
+    <Nav />
-		<Sidebar />
+    <Sidebar />
-		<div class="w-[calc(100vw-88px-240px)] h-full">
+    <div class="w-[calc(100vw-88px-240px)] h-full">
-			<slot />
+      <slot />
-		</div>
+    </div>
-	</div>
+  </div>
 </template>
 
 <script lang="ts">
-import { useGlobalStore } from '~/stores/store';
+import { useUserStore } from '~/stores/userStore';
-import { SafeUser, IChannel, IServer } from '~/types';
+import { useServerStore } from '~/stores/serverStore';
-import { io } from 'socket.io-client';
+import { useDmStore } from '~/stores/dmStore';
+import { useActiveStore } from '~/stores/activeStore';
+import { IChannel } from '~/types';
 
 export default {
 	async setup() {
-		const globalStore = useGlobalStore();
+		const userStore = useUserStore();
-		if (globalStore.user.id === undefined) {
+		const serverStore = useServerStore();
-			const route = useRoute();
+		const dmStore = useDmStore();
-			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
+		const route = useRoute();
-			const [user, { dms, servers }] = await Promise.all([
+		const headers = useRequestHeaders(['cookie']) as Record<string, string>;
-				$fetch('/api/getCurrentUser', { headers }) as unknown as SafeUser,
+
-				$fetch('/api/user/getServers', { headers }) as unknown as { dms: IChannel[], servers: IServer[] }
+		if (!userStore.isLoggedIn) {
+			const [userData, serverData] = await Promise.all([
+				$fetch('/api/getCurrentUser', { headers }),
+				$fetch('/api/user/getServers', { headers })
 			]);
 
-			if (!user || !servers || !dms) return;
+			if (!userData || !serverData) throw new Error('No user data or server data');
 
-			globalStore.setUser(user);
+			const { dms, servers } = serverData;
 
-			globalStore.setServers(servers);
+			userStore.setUser(userData);
-			globalStore.setDms(dms);
+			serverStore.setServers(servers);
-			if (route.params.id && typeof route.params.id === 'string') {
+			dmStore.setDms(dms);
-				if (!globalStore.getServerByChannelId(route.params.id)) {
-					navigateTo('/');
-					return;
-				}
-				globalStore.setActiveServer(route.path.includes('@me') ? 'dms' : 'servers', route.params.id);
-			} else {
-				globalStore.setActiveServerType(route.path.includes('@me') ? 'dms' : 'servers');
-			}
 		}
-	},
-	data() {
-		return {
-			user: storeToRefs(useGlobalStore()).user,
-		};
-	},
-	mounted() {
-		const globalStore = useGlobalStore();
-		const sessionToken = useCookie('sessionToken');
-		const socket = io({
-			auth: (cb) => {
-				cb({ token: sessionToken.value });
-			}
-		});
 
-		globalStore.setSocket(socket);
+		const isDm = route.path.includes('@me');
+
+		if (isDm && route.params.dmId) {
+			const dmData: IChannel = await $fetch(`/api/channels/${route.params.dmId}`, { headers });
+
+			if (!dmData) throw new Error('Could not find dm.');
+
+			useDmStore().addDM(dmData);
+			useActiveStore().setActiveDM(dmData);
+		}
+
+		if (!isDm && route.params.channelId) {
+			const [channel, server] = await Promise.all([
+				$fetch(`/api/channels/${route.params.channelId}`, { headers }) as unknown as IChannel,
+				$fetch(`/api/channels/${route.params.channelId}/guild`, { headers })
+			]);
+
+			if (!server) throw new Error('Could not find server.');
+			useServerStore().addServer(server);
+			useActiveStore().setActiveServer(channel, useServerStore().servers);
+		}
+
+		if (isDm && !route.params.dmId) {
+			// on '/@me'
+			useActiveStore().type = 'dm';
+		}
+
+		// const socket = ref(null);
+
+		// socket.value = io('127.0.0.1:3000', {
+		// 	auth: (cb) => cb({ token: useCookie('sessionToken').value })
+		// });
 	}
 };
 </script>

middleware/auth.ts

@@ -1,6 +1,6 @@
 export default defineNuxtRouteMiddleware(() => {
-	if (useError().value?.message.trim().split(' ')[0]?.slice(1,4) === '401') return navigateTo('/login');
+	if (useError().value?.message.trim().split(' ')[0]?.slice(1,4) === '401') return '/login';
 	if (!useCookie('sessionToken').value) {
-		return navigateTo('/login');
+		return '/login';
 	}
 });

nuxt.config.ts

@@ -1,7 +1,8 @@
 // https://v3.nuxtjs.org/api/configuration/nuxt.config
 
 export default defineNuxtConfig({
-	ssr: false,
+	ssr: true,
+
 	app: {
 		head: {
 			meta: [
@@ -15,7 +16,7 @@ export default defineNuxtConfig({
 	],
 
 	devtools: {
-		enabled: true,
+		enabled: false
 	},
 
 	modules: [
@@ -23,15 +24,14 @@ export default defineNuxtConfig({
 			'@pinia/nuxt',
 			{
 				autoImports: [
-					// automatically imports `defineStore`
+					'acceptHMRUpdate',
-					'defineStore', // import { defineStore } from 'pinia'
+					'defineStore',
 					'storeToRefs',
-					// automatically imports `defineStore` as `definePiniaStore`
+					['defineStore', 'definePiniaStore'],
-					['defineStore', 'definePiniaStore'], // import { defineStore as definePiniaStore } from 'pinia'
 				],
 			},
 		],
-		'@nuxt/devtools',
+		'@nuxt/devtools'
 	],
 
 	postcss: {

package.json

@@ -15,15 +15,15 @@
     "emoji-regex": "^10.2.1",
     "ioredis": "^5.3.2",
     "mitt": "^3.0.0",
-    "nuxt": "^3.4.1",
+    "nuxt": "^3.0.0",
     "pinia": "^2.0.28",
     "socket.io": "^4.5.4",
-    "socket.io-client": "^4.5.4",
+    "socket.io-client": "^4.6.1",
     "twemoji": "^14.0.2",
     "uuid": "^9.0.0"
   },
   "devDependencies": {
-    "@nuxt/devtools": "npm:@nuxt/devtools-edge@latest",
+    "@nuxt/devtools": "^0.4.1",
     "@types/bcryptjs": "^2.4.2",
     "@types/emoji-js": "^3.5.0",
     "@types/node": "^18.15.11",

pages/channel/@me/[dmId].vue

@@ -0,0 +1,89 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
+<template>
+  <MessagePane
+    :channel="channel"
+    :participants="participants"
+  />
+  <div
+    class="fixed mr-3"
+    :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
+  >
+    <Transition>
+      <Popup
+        :opened="emojiPickerData.opened"
+        :openedBy="emojiPickerData.type"
+        @pickedEmoji="pickedEmoji($event)"
+      />
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { useActiveStore } from '~/stores/activeStore';
+import { useDmStore } from '~/stores/dmStore';
+import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
+import { useServerStore } from '~/stores/serverStore';
+import { useUserStore } from '~/stores/userStore';
+import { IChannel, IMessage, IServer, SafeUser } from '~/types';
+
+definePageMeta({
+	middleware: 'auth'
+});
+
+export default {
+	async setup() {
+		const route = useRoute();
+		
+		if (useDmStore().dms.find((e) => { return e.id === route.params.dmId; } ) == undefined) navigateTo('/');
+		if (useActiveStore().server.channel.id !== route.params.dmId) {
+			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
+			const dm: IChannel = await $fetch(`/api/channels/${route.params.dmId}`, { headers });
+
+			if (!dm) throw new Error('couldnt find dm.');
+			useDmStore().addDM(dm);
+
+			if (typeof route.params.dmId !== 'string') throw new Error('route.params.dmId must be a string, but got an array presumably?');
+			useActiveStore().setActiveDM(dm);
+			useEmojiPickerStore().closeEmojiPicker();
+		}
+
+		const participants: SafeUser[] | undefined = useActiveStore().dm.dmParticipants;
+
+		if (!participants) throw new Error('no one is in this dm?');
+
+		const channel = useActiveStore().dm;
+
+		channel.messages?.forEach((e: IMessage) => {
+			e.body = parseMessageBody(e.body, participants);
+		});
+
+		const friend = participants.find((e) => e.id !== useUserStore().user?.id)?.username;
+
+		useHeadSafe({
+			title: `@${friend} - Blop`
+		});
+
+		return {
+			channel,
+			participants
+		};
+	},
+	data() {
+		return {
+			// socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
+			emojiPickerData: storeToRefs(useEmojiPickerStore()).emojiPickerData,
+			emojiPickerStyles: {
+				top: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.top + 'px',
+				right: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.right + 'px',
+			}
+		};
+	},
+	methods: {
+		pickedEmoji(emoji: string) {
+			const { $emit } = useNuxtApp();
+			$emit('pickedEmoji', emoji);
+			useEmojiPickerStore().closeEmojiPicker();
+		},
+	}
+};
+</script>

pages/channel/@me/[id].vue

@@ -1,93 +0,0 @@
-<!-- eslint-disable vue/no-multiple-template-root -->
-<template>
-  <MessagePane />
-  <div
-    class="fixed mr-3"
-    :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
-  >
-    <Transition>
-      <Popup
-        :opened="emojiPickerData.opened"
-        :openedBy="emojiPickerData.type"
-        @picked-emoji="pickedEmoji($event)"
-      />
-      <!-- <EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
-				:opened="emojiPickerData.opened" /> -->
-    </Transition>
-  </div>
-</template>
-
-<script lang="ts">
-import { useGlobalStore } from '~/stores/store';
-import { IChannel } from '~/types';
-
-definePageMeta({
-	middleware: 'auth'
-});
-
-export default {
-	async setup() {
-		const route = useRoute();
-		const headers = useRequestHeaders(['cookie']) as Record<string, string>;
-		const server: IChannel = await $fetch(`/api/channels/${route.params.id}`, { headers });
-
-		if (!server) throw new Error('could not find the dm');
-
-		useGlobalStore().addDM(server);
-		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
-		useGlobalStore().setActiveServer('dms', route.params.id);
-		useGlobalStore().setActiveChannel(server);
-		useGlobalStore().closeEmojiPicker();
-
-		server.messages?.forEach((e) => {
-			e.body = parseMessageBody(e.body, useGlobalStore().activeChannel);
-		});
-
-		const friend = server.dmParticipants?.find((e) => e.id !== useGlobalStore().user.id)?.username;
-
-		useHeadSafe({
-			title: `@${friend} - Blop`
-		});
-
-		return {
-			server
-		};
-	},
-	data() {
-		return {
-			emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
-			emojiPickerStyles: {
-				top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
-				right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
-			}
-		};
-	},
-	async updated() {
-		const route = useRoute();
-		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
-		if (useGlobalStore().activeServer.id !== this.server.id) {
-			useGlobalStore().closeEmojiPicker();
-			useGlobalStore().setActiveServer('dms', route.params.id);
-		}
-	},
-	methods: {
-		pickedEmoji(emoji: string) {
-			const { $emit } = useNuxtApp();
-			$emit('pickedEmoji', emoji);
-			useGlobalStore().closeEmojiPicker();
-		},
-	}
-};
-</script>
-
-<style>
-.v-enter-active,
-.v-leave-active {
-	transition: opacity 0.5s ease;
-}
-
-.v-enter-from,
-.v-leave-to {
-	opacity: 0;
-}
-</style>

pages/channel/@me/index.vue

@@ -6,7 +6,8 @@
 </template>
 
 <script lang="ts">
-import { useGlobalStore } from '~/stores/store';
+import { useActiveStore } from '~/stores/activeStore';
+import { useDmStore } from '~/stores/dmStore';
 import { IChannel } from '~/types';
 
 definePageMeta({  
@@ -20,14 +21,14 @@ export default {
 		};
 	},
 	mounted() {
-		useGlobalStore().setActiveServer('dms', '@me');
+		useActiveStore().type = 'dm';
 	},
 	methods: {
 		async startDM() {
 			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
 			const server: IChannel = await $fetch('/api/channels/createDM', { method: 'post', body: { partnerId: this.userId }, headers }); 
 
-			useGlobalStore().addDM(server);
+			useDmStore().addDM(server);
 			useRouter().push({ path: '/channel/@me/' + server.id });
 		}
 	}

pages/channel/[channelId].vue

@@ -0,0 +1,94 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
+<template>
+  <MessagePane
+    :channel="channel"
+    :participants="server.participants"
+  />
+  <div
+    class="fixed mr-3"
+    :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
+  >
+    <Transition>
+      <Popup
+        :opened="emojiPickerData.opened"
+        :openedBy="emojiPickerData.type"
+        @pickedEmoji="pickedEmoji($event)"
+      />
+    </Transition>
+  </div>
+</template>
+
+<script lang="ts">
+import { useActiveStore } from '~/stores/activeStore';
+import { useEmojiPickerStore } from '~/stores/emojiPickerStore';
+import { useServerStore } from '~/stores/serverStore';
+import { IChannel, IMessage, IServer } from '~/types';
+
+definePageMeta({
+	middleware: 'auth'
+});
+
+export default {
+	async setup() {
+		const route = useRoute();
+
+		if (useServerStore().servers.find((e) => { return e.channels.some((e) => e.id === route.params.channelId); } ) == undefined) navigateTo('/');
+		if (useActiveStore().server.channel.id !== route.params.channelId) {
+			const headers = useRequestHeaders(['cookie']) as Record<string, string>;
+			const [channel, server] = await Promise.all([
+				await $fetch(`/api/channels/${route.params.channelId}`, { headers }) as IChannel,
+				await $fetch(`/api/channels/${route.params.channelId}/guild`, { headers }) as IServer,
+			]);
+
+			if (!server) throw new Error('server not found, this means that the channel is serverless but not a dm????');
+			useServerStore().addServer(server);
+
+			if (typeof route.params.channelId !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
+			useActiveStore().setActiveServer(channel, useServerStore().servers);
+			useEmojiPickerStore().closeEmojiPicker();
+		}
+		useEmojiPickerStore().closeEmojiPicker();
+
+		const channel = useActiveStore().server.channel;
+		const server = useActiveStore().server.server;
+
+		channel.messages?.forEach((e: IMessage) => {
+			e.body = parseMessageBody(e.body, server.participants);
+		});
+
+		useHeadSafe({
+			title: `#${channel.name} | ${server.name} - Blop`
+		});
+
+		return {
+			channel,
+			server
+		};
+	},
+	data() {
+		return {
+			// socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
+			emojiPickerData: storeToRefs(useEmojiPickerStore()).emojiPickerData,
+			emojiPickerStyles: {
+				top: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.top + 'px',
+				right: storeToRefs(useEmojiPickerStore()).emojiPickerData.value.right + 'px',
+			}
+		};
+	},
+	mounted() {
+		const { $io } = useNuxtApp();
+
+		$io.on(`addChannel-${this.server.id}`, (ev) => {
+			const newChannel = ev as IChannel;
+			useServerStore().addChannel(this.server.id, newChannel);
+		});
+	},
+	methods: {
+		pickedEmoji(emoji: string) {
+			const { $emit } = useNuxtApp();
+			$emit('pickedEmoji', emoji);
+			useEmojiPickerStore().closeEmojiPicker();
+		},
+	}
+};
+</script>

pages/channel/[id].vue

@@ -1,82 +0,0 @@
-<!-- eslint-disable vue/no-multiple-template-root -->
-<template>
-	<MessagePane />
-	<div class="fixed mr-3" :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
-		<Transition>
-			<Popup :opened="emojiPickerData.opened" :openedBy="emojiPickerData.type" @pickedEmoji="pickedEmoji($event)" />
-		</Transition>
-	</div>
-</template>
-
-<script lang="ts">
-import { Server } from 'socket.io';
-import { useGlobalStore } from '~/stores/store';
-import { IChannel, IServer } from '~/types';
-
-definePageMeta({
-	middleware: 'auth'
-});
-
-export default {
-	async setup() {
-		const route = useRoute();
-		if (useGlobalStore().servers.find((e) => { return e.channels.some((e) => e.id === route.params.id); } ) == undefined) navigateTo('/');
-		const headers = useRequestHeaders(['cookie']) as Record<string, string>;
-		const [server, realServer] = await Promise.all([
-			await $fetch(`/api/channels/${route.params.id}`, { headers }) as IChannel,
-			await $fetch(`/api/channels/${route.params.id}/guild`, { headers }) as IServer,
-		]);
-
-		if (!realServer) throw new Error('realServer not found, this means that the channel is serverless but not a dm????');
-		useGlobalStore().addServer(realServer);
-
-		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
-		useGlobalStore().setActiveServer('servers', route.params.id);
-		useGlobalStore().setActiveChannel(server);
-		useGlobalStore().closeEmojiPicker();
-
-		server.messages?.forEach((e) => {
-			e.body = parseMessageBody(e.body, useGlobalStore().activeChannel);
-		});
-
-		useHeadSafe({
-			title: `#${server.name} | ${realServer.name} - Blop`
-		});
-
-		return {
-			server,
-		};
-	},
-	data() {
-		return {
-			socket: storeToRefs(useGlobalStore()).socket as unknown as Server,
-			emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
-			emojiPickerStyles: {
-				top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
-				right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
-			}
-		};
-	},
-	mounted() {
-		this.socket.on(`addChannel-${this.server.serverId}`, (ev) => {
-			const newChannel = ev as IChannel;
-			useGlobalStore().addChannel(this.server.serverId, newChannel);
-		});
-	},
-	async updated() {
-		const route = useRoute();
-		if (typeof route.params.id !== 'string') throw new Error('route.params.id must be a string, but got an array presumably?');
-		if (useGlobalStore().activeChannel.id !== this.server.id) {
-			useGlobalStore().closeEmojiPicker();
-			useGlobalStore().setActiveServer('servers', route.params.id);
-		}
-	},
-	methods: {
-		pickedEmoji(emoji: string) {
-			const { $emit } = useNuxtApp();
-			$emit('pickedEmoji', emoji);
-			useGlobalStore().closeEmojiPicker();
-		},
-	}
-};
-</script>

pages/index.vue

@@ -1,17 +1,31 @@
 <template>
-  <div>
+  <div v-if="user.isLoggedIn">
-    Hello there traveler
+    Hello, {{ user.user?.username }}
+		<button @click="user.logout">
+			Logout
+		</button>
+	</div>
+  <div v-else>
     <nuxt-link to="/login">
       Login
     </nuxt-link>
+    or
     <nuxt-link to="/signup">
-      Signup
+      Sign Up
     </nuxt-link>
   </div>
 </template>
 
-<script setup>
+<script lang="ts">
+import { useUserStore } from '~/stores/userStore';
+
 definePageMeta({  
 	middleware: 'auth'
 });
+
+export default {
+	setup() {
+		return { user: useUserStore() };
+	}
+};
 </script>

pages/login.vue

@@ -1,47 +1,52 @@
 <template>
-  <div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
+  <div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)]">
-    <div
+    <div class="bg-[var(--secondary-bg)] rounded-xl shadow-2xl flex flex-row overflow-hidden">
-      class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg"
+      <img
-    >
+        src="/plants.jpg"
-      <h2 class="text-xl font-semibold text-center">
+        class="h-96 w-64 object-cover"
-        Login
+      />
-      </h2>
+      <div class="p-4 flex flex-col text-center">
-      <form
+        <h1 class="font-semibold text-2xl">
-        class="flex flex-col gap-y-2 my-2"
+          Login
-        @submit.prevent="signup()"
+        </h1>
-      >
+        <form
-        <input
+          class="flex flex-col gap-y-3 my-2"
-          v-model="username"
+          @submit.prevent="login"
-          class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
-          name="username"
-          placeholder="username"
         >
-        <input
+          <input
-          v-model="password"
+            v-model="username"
-          class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
+            class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
-          name="password"
+            name="username"
-          type="password"
+            placeholder="username"
-          placeholder="password"
+          />
-        >
+          <input
-        <input
+            v-model="password"
-          type="submit"
+            class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
-          class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
+            name="password"
-        >
+            type="password"
-      </form>
+            placeholder="password"
-      <div class="text-center">
+          />
-        Or <nuxt-link
+          <input
-          class="hover:underline text-blue-500"
+            type="submit"
-          to="/signup"
+            value="Submit"
-        >
+            class="w-full bg-[#5865F2] py-2 px-4 rounded-md cursor-pointer"
-          Signup
+          />
-        </nuxt-link>
+        </form>
+        <p>
+          or
+          <nuxt-link to="/signup">
+            Sign Up
+          </nuxt-link>
+        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { useGlobalStore } from '~/stores/store';
+import { useDmStore } from '~/stores/dmStore';
+import { useServerStore } from '~/stores/serverStore';
+import { useUserStore } from '~/stores/userStore';
 import { SafeUser } from '~/types';
 
 definePageMeta({
@@ -56,34 +61,26 @@ export default {
 		};
 	},
 	methods: {
-		async signup() {
+		async login() {
-			const globalStore = useGlobalStore();
 			if (!this.username || !this.password) return;
-			const user = await $fetch('/api/login', {
+			const loginData = await $fetch('/api/login', {
 				method: 'post', body: {
 					username: this.username,
 					password: this.password
 				},
-			}) as { userId: string; token: string; user: SafeUser; };
+			}) as { token: string; user: SafeUser; };
 
 			const userId = useCookie('userId');
-			userId.value = user.userId;
+			userId.value = loginData.user.id;
 			const token = useCookie('sessionToken');
-			token.value = user.token;
+			token.value = loginData.token;
 
-			setTimeout(async () => {
+			useUserStore().setUser(loginData.user);
-				const headers = { Cookie: `sessionToken=${token.value}` };
-				const { servers, dms } = await $fetch('/api/user/getServers', { headers });
 
-				if (!servers || !dms) return;
+			useServerStore().setServers(loginData.user.servers);
+			useDmStore().setDms(loginData.user.channels);
 
-				globalStore.setServers(servers);
+			return navigateTo('/');
-				globalStore.setDms(dms);
-
-				globalStore.setUser(user.user);
-
-				navigateTo('/channel/@me');
-			});
 		}
 	}
 };

pages/signup.vue

@@ -1,53 +1,59 @@
 <template>
-  <div class="w-screen h-screen bg-[hsl(216,calc(1*7.2%),10%)] relative">
+  <div class="w-screen h-screen flex justify-center items-center bg-[var(--primary-bg)]">
-    <div
+    <div class="bg-[var(--secondary-bg)] rounded-xl shadow-2xl flex flex-row overflow-hidden">
-      class="-translate-y-1/2 -translate-x-1/2 top-1/2 left-1/2 absolute bg-[hsl(216,calc(1*7.2%),16%)] p-4 rounded-md shadow-lg"
+      <img
-    >
+        src="/flowery-plants.jpg"
-      <h2 class="text-xl font-semibold text-center">
+        class="h-96 w-64 object-cover filter brightness-95"
-        Sign up
+      />
-      </h2>
+      <div class="p-4 flex flex-col text-center">
-      <form
+        <h1 class="font-semibold text-2xl">
-        class="flex flex-col gap-y-2 my-2"
+          Sign Up
-        @submit.prevent="signup()"
+        </h1>
-      >
+        <form
-        <input
+          class="flex flex-col gap-y-3 my-2"
-          v-model="username"
+          @submit.prevent="signup"
-          class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
-          name="username"
-          placeholder="username"
         >
-        <input
+          <input
-          v-model="email"
+            v-model="username"
-          class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
+            class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
-          name="email"
+            name="username"
-          placeholder="email"
+            placeholder="username"
-        >
+          />
-        <input
+          <input
-          v-model="password"
+            v-model="email"
-          class="border border-[hsl(218,calc(1*7.9%),23.7%)] px-4 py-2 rounded w-full bg-[hsl(218,calc(1*7.9%),27.3%)] placeholder:text-[var(--primary-placeholder)] focus:outline-none"
+            class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
-          name="password"
+            type="email"
-          type="password"
+            name="email"
-          placeholder="password"
+            placeholder="email"
-        >
+          />
-        <input
+          <input
-          type="submit"
+            v-model="password"
-          class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
+            class="px-4 py-2 rounded-md w-full bg-[var(--primary-input)] shadow-2xl placeholder:text-[var(--primary-placeholder)] focus:outline-none"
-        >
+            name="password"
-      </form>
+            type="password"
-      <div class="text-center">
+            placeholder="password"
-        Or <nuxt-link
+          />
-          class="hover:underline text-blue-500"
+          <input
-          to="/login"
+            type="submit"
-        >
+            value="Submit"
-          Login
+            class="w-full bg-[#5865F2] py-2 px-4 rounded cursor-pointer"
-        </nuxt-link>
+          />
+        </form>
+        <p>
+          or
+          <nuxt-link to="/login">
+            Login
+          </nuxt-link>
+        </p>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { useGlobalStore } from '~/stores/store';
+import { useDmStore } from '~/stores/dmStore';
+import { useServerStore } from '~/stores/serverStore';
+import { useUserStore } from '~/stores/userStore';
 import { SafeUser } from '~/types';
 
 definePageMeta({
@@ -64,34 +70,26 @@ export default {
 	},
 	methods: {
 		async signup() {
-			const globalStore = useGlobalStore();
 			if (!this.username || !this.password || !this.email) return;
-			const user = await $fetch('/api/signup', {
+			const signupData = await $fetch('/api/signup', {
 				method: 'post', body: {
 					username: this.username,
 					email: this.email,
 					password: this.password
 				},
-			}) as { userId: string; token: string; user: SafeUser; };
+			}) as { token: string; user: SafeUser; };
 
 			const userId = useCookie('userId');
-			userId.value = user.userId;
+			userId.value = signupData.user.id;
 			const token = useCookie('sessionToken');
-			token.value = user.token;
+			token.value = signupData.token;
 
-			setTimeout(async () => {
+			useUserStore().setUser(signupData.user);
-				const headers = { Cookie: `sessionToken=${token.value}` };
-				const { servers, dms } = await $fetch('/api/user/getServers', { headers });
 
-				if (!servers || !dms) return;
+			useServerStore().setServers(signupData.user.servers);
+			useDmStore().setDms(signupData.user.channels);
 
-				globalStore.setServers(servers);
+			return navigateTo('/');
-				globalStore.setDms(dms);
-
-				globalStore.setUser(user.user);
-
-				navigateTo('/channel/@me');
-			});
 		}
 	}
 };

pages/test.vue

@@ -1,3 +1,3 @@
 <template>
-  <div>lorem ipsum</div>
+  <p>hey</p>
 </template>

plugins/socket.client.ts

@@ -0,0 +1,13 @@
+import io from 'socket.io-client';
+
+export default defineNuxtPlugin(() => {
+	const socket = io('http://localhost:3000', {
+		auth: (cb) => cb({ token: useCookie('sessionToken').value })
+	});
+
+	return {
+		provide: {
+			io: socket
+		}
+	};
+});

server/api/channels/[id]/index.get.ts

@@ -39,46 +39,6 @@ export default defineEventHandler(async (event) => {
 							id: true,
 							DM: true,
 							name: true,
-							messages: {
-								select: {
-									id: true,
-									body: true,
-									creator: {
-										select: {
-											id: true,
-											username: true
-										}
-									},
-									invites: {
-										select: {
-											id: true,
-											server: {
-												select: {
-													id: true,
-													name: true,
-													participants: {
-														select: {
-															id: true,
-														}
-													}
-												}
-											}
-										}
-									},
-									reactions: {
-										select: {
-											id: true,
-											emoji: true,
-											users: {
-												select: {
-													id: true,
-													username: true
-												}
-											}
-										}
-									}
-								}
-							}
 						}
 					},
 				}
@@ -87,6 +47,7 @@ export default defineEventHandler(async (event) => {
 				select: {
 					id: true,
 					body: true,
+					createdAt: true,
 					creator: {
 						select: {
 							id: true,

server/api/channels/[id]/messages/[messageId]/reactions/[name].post.ts

@@ -47,7 +47,23 @@ export default defineEventHandler(async (event) => {
 					}
 				}
 			}
-		}
+		},
+		invites: {
+			select: {
+				id: true,
+				server: {
+					select: {
+						id: true,
+						name: true,
+						participants: {
+							select: {
+								id: true
+							}
+						}
+					}
+				}
+			}
+		},
 	};
 
 	const message = await prisma.message.findFirst({

server/api/guilds/[id]/addChannel.post.ts

@@ -88,6 +88,7 @@ export default defineEventHandler(async (event) => {
 				select: {
 					id: true,
 					body: true,
+					createdAt: true,
 					creator: {
 						select: {
 							id: true,

server/api/login.post.ts

@@ -3,7 +3,7 @@ import { v4 as uuidv4 } from 'uuid';
 import * as dotenv from 'dotenv';
 import crypto from 'node:crypto';
 import { PrismaClient } from '@prisma/client';
-import { IUser, SafeUser } from '~/types';
+import { IUser } from '~/types';
 const prisma = new PrismaClient();
 dotenv.config();
 
@@ -27,7 +27,25 @@ export default defineEventHandler(async (event) => {
 			id: true,
 			username: true,
 			passwordhash: true,
-			email: true,
+			servers: {
+				select: {
+					id: true,
+					name: true,
+					channels: true,
+				}
+			},
+			channels: {
+				select: {
+					id: true,
+					DM: true,
+					dmParticipants: {
+						select: {
+							id: true,
+							username: true,
+						}
+					}
+				}
+			}
 		},
 	}) as unknown as IUser;
 
@@ -51,11 +69,10 @@ export default defineEventHandler(async (event) => {
 		}
 	});
 
-	user = user as SafeUser;
+	user.passwordhash = undefined;
 
 	return {
 		token,
-		userId: user.id,
 		user
 	};
 });

server/api/signup.post.ts

@@ -52,19 +52,21 @@ export default defineEventHandler(async (event) => {
 			username: true,
 			servers: {
 				select: {
-					participants: {
+					id: true,
+					name: true,
+					channels: true,
+				}
+			},
+			channels: {
+				select: {
+					id: true,
+					DM: true,
+					dmParticipants: {
 						select: {
 							id: true,
-							username: true
+							username: true,
 						}
-					},
+					}
-					channels: {
-						select: {
-							id: true,
-							DM: true,
-							name: true,
-						}
-					},
 				}
 			}
 		},
@@ -83,7 +85,6 @@ export default defineEventHandler(async (event) => {
 
 	return {
 		token,
-		userId: user.id,
 		user
 	};
 });

server/middleware/socket.ts

@@ -1,113 +1,117 @@
 import { Server } from 'socket.io';
 import { PrismaClient } from '@prisma/client';
 import { IChannel, IServer, IUser, SafeUser } from '~~/types';
+import { Socket } from 'socket.io';
 const prisma = new PrismaClient();
 
 export default defineEventHandler(({ node }) => {
-	if (!global.io) {
+	if (global.io) return; 
-		global.io = new Server(node.res.socket?.server);
 	
-		global.io.on('connection', async (socket) => {
+	global.io = new Server(node.res.socket?.server);
-			const token = socket.handshake.auth.token;
-			if (!token) {
-				return;
-			}
 
-			const { user } = await prisma.session.findFirst({
+	global.io.on('connection', async (socket: Socket) => {
-				where: {
+		const token = socket.handshake.auth.token;
-					token
+
-				},
+		if (!token) {
-				select: {
+			socket.disconnect();
-					user: {
+			return;
-						select: {
+		}
-							id: true,
+
-							username: true,
+		const { user } = await prisma.session.findFirst({
-							servers: {
+			where: {
-								select: {
+				token
-									id: true,
+			},
-									name: true,
+			select: {
-									participants: {
+				user: {
-										select: {
+					select: {
-											id: true,
+						id: true,
-											username: true,
+						username: true,
-											roles: {
+						servers: {
-												select: {
+							select: {
-													id: true,
+								id: true,
-													administrator: true,
+								name: true,
-													owner: true
+								participants: {
-												}
+									select: {
+										id: true,
+										username: true,
+										roles: {
+											select: {
+												id: true,
+												administrator: true,
+												owner: true
 											}
 										}
-									},
+									}
-									channels: {
+								},
-										select: {
+								channels: {
-											id: true,
+									select: {
-											DM: true,
+										id: true,
-											server: {
+										DM: true,
-												select: {
+										server: {
-													id: true,
+											select: {
-													name: true,
+												id: true,
-													participants: {
+												name: true,
-														select: {
+												participants: {
-															id: true,
+													select: {
-															username: true,
+														id: true,
-															roles: {
+														username: true,
-																select: {
+														roles: {
-																	id: true,
+															select: {
-																	administrator: true,
+																id: true,
-																	owner: true
+																administrator: true,
-																}
+																owner: true
 															}
 														}
-													},
+													}
-												}
+												},
 											}
 										}
 									}
 								}
-							},
+							}
-							channels: {
+						},
-								select: {
+						channels: {
-									id: true,
+							select: {
-									DM: true,
+								id: true,
-									dmParticipants: {
+								DM: true,
-										select: {
+								dmParticipants: {
-											id: true,
+									select: {
-											username: true
+										id: true,
-										}
+										username: true
-									},
+									}
-								}
+								},
 							}
 						}
 					}
 				}
-			}) as unknown as { user: IUser };
+			}
+		}) as unknown as { user: IUser };
 
-			if (!user) {
+		if (!user) {
+			socket.disconnect();
+			return;
+		}
+
+		socket.on('typing', async (ev) => {
+			if (!ev) {
 				return;
 			}
 
-			socket.on('typing', async (ev) => {
+			let channel = user.channels?.find((c: IChannel) => c.id === ev) || user.servers?.find((s: IServer) => s.channels.some((c: IChannel) => c.id === ev));
-				if (!ev) {
+			if (channel?.DM === undefined) {
+				// assume its a server
+				channel = channel?.channels.find((c: IChannel) => c.id === ev);
+			}
+
+			if (!channel) return;
+
+			if (!channel.dmParticipants?.find((e: SafeUser) => e.id === user.id)) {
+				if (!channel.server || !channel.server.participants.find((e: SafeUser) => e.id === user.id)) {
 					return;
 				}
+			}
 
-				let channel = user.channels?.find((c: IChannel) => c.id === ev) || user.servers?.find((s: IServer) => s.channels.some((c: IChannel) => c.id === ev));
+			global.io.emit(`typing-${channel.id}`, user.username);
-				if (channel?.DM === undefined) {
-					// assume its a server
-					channel = channel?.channels.find((c: IChannel) => c.id === ev);
-				}
-
-				if (!channel) return;
-
-				if (!channel.dmParticipants?.find((e: SafeUser) => e.id === user.id)) {
-					if (!channel.server || !channel.server.participants.find((e: SafeUser) => e.id === user.id)) {
-						return;
-					}
-				}
-
-				global.io.emit(`typing-${channel.id}`, user.username);
-			});
 		});
-	}
+	});
 });

stores.bak/store.ts

@@ -82,7 +82,7 @@ export const useGlobalStore = defineStore('global', {
 		setDms(dms: Array<IChannel>) {
 			this.dms = dms;
 		},
-		setSocket(socket: Socket) {
+		setSocket(socket: Socket | null) {
 			this.socket = socket;
 		},
 		setUser(user: SafeUser) {

stores/activeStore.ts

@@ -0,0 +1,66 @@
+import { IChannel, IMessage, IServer } from '~/types';
+import { useServerStore } from './serverStore';
+
+export const useActiveStore = defineStore('activeStore', {
+	state: () => ({
+		type: '' as 'dm' | 'server',
+		dm: {} as IChannel,
+		server: {
+			server: {} as IServer,
+			channel: {} as IChannel
+		}
+	}),
+	actions: {
+		setActiveDM(dm: IChannel) {
+			this.type = 'dm';
+			this.dm = dm;
+		},
+		setActiveServer(channel: IChannel, servers: IServer[]) {
+			this.type = 'server';
+
+			const activeServer = servers.find((e: IServer) => {
+				return e.channels.some((c: IChannel) => c.id === channel.id);
+			});
+
+			if (!activeServer) return;
+
+			const activeChannelIndex = activeServer.channels.findIndex((e: IChannel) => e.id === channel.id);
+
+			if (activeChannelIndex < 0) return;
+
+			activeServer.channels[activeChannelIndex] = channel;
+
+			const activeChannel = activeServer.channels[activeChannelIndex];
+
+			if (!activeChannel) return;
+
+			this.server.server = activeServer;
+			this.server.channel = activeChannel;
+		},
+		addMessage(message: IMessage) {
+			const channel = (this.type === 'server') ? this.server.channel : this.dm;
+			channel.messages.push(message);
+		},
+		updateMessage(message: IMessage) {
+			const channel = (this.type === 'server') ? this.server.channel : this.dm;
+
+			const messageIndex = channel.messages.findIndex((e: IMessage) => e.id === message.id);
+
+			if (messageIndex == -1) return;
+
+			channel.messages[messageIndex] = message;
+		},
+		removeMessage(messageId: string) {
+			const channel = (this.type === 'server') ? this.server.channel : this.dm;
+			const messageIndex = channel.messages.findIndex((e: IMessage) => e.id === messageId);
+
+			if (messageIndex == -1) return;
+
+			delete(channel.messages[messageIndex]);
+		}
+	}
+});
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useActiveStore, import.meta.hot));
+}

stores/dmStore.ts

@@ -0,0 +1,27 @@
+import { IChannel } from '~/types';
+
+export const useDmStore = defineStore('dmStore', {
+	state: () => ({
+		dms: [] as IChannel[]
+	}),
+	actions: {
+		setDms(dms: IChannel[]) {
+			this.dms = dms;
+		},
+		addDM(dmChannel: IChannel) {
+			if (this.dms.find((e) => e.id === dmChannel.id)) {
+				const index = this.dms.findIndex((e) => e.id === dmChannel.id);
+				this.dms[index] = dmChannel;
+				return;
+			}
+			this.dms.push(dmChannel);
+		},
+		getById(id: string) {
+			return this.dms.find((e) => e.id === id);
+		}
+	}
+});
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useDmStore, import.meta.hot));
+}

stores/emojiPickerStore.ts

@@ -0,0 +1,41 @@
+import { IPopupData } from '~/types';
+
+export const useEmojiPickerStore = defineStore('emojiPickerStore', {
+	state: () => ({
+		emojiPickerData: {type: 'emojiPicker'} as IPopupData,
+	}),
+	actions: {
+		openEmojiPicker(payload: IPopupData) {
+			this.emojiPickerData.type = 'emojiPicker';
+			this.emojiPickerData.top = payload.top;
+			this.emojiPickerData.right = payload.right;
+			this.emojiPickerData.openedBy = payload.openedBy;
+			this.emojiPickerData.opened = true;
+		},
+		toggleEmojiPicker(payload: IPopupData) {
+			let messageId;
+			if (this.emojiPickerData.openedBy === undefined) {
+				messageId = null;
+			} else {
+				messageId = this.emojiPickerData.openedBy.messageId || null;
+			}
+
+			console.log(new Date().getTime());
+			console.log(!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId, this.emojiPickerData.opened, payload.openedBy?.messageId, messageId);
+
+			if (!this.emojiPickerData.opened || payload.openedBy?.messageId !== messageId) {
+				this.openEmojiPicker(payload);
+			} else {
+				this.closeEmojiPicker();
+			}
+		},
+		closeEmojiPicker() {
+			if (this.emojiPickerData.openedBy) this.emojiPickerData.openedBy.messageId = '';
+			this.emojiPickerData.opened = false;
+		},
+	}
+});
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useEmojiPickerStore, import.meta.hot));
+}

stores/serverStore.ts

@@ -0,0 +1,34 @@
+import { IChannel, IServer } from '~/types';
+
+export const useServerStore = defineStore('serverStore', {
+	state: () => ({
+		servers: [] as IServer[]
+	}),
+	actions: {
+		setServers(servers: IServer[]) {
+			this.servers = servers;
+		},
+		addServer(server: IServer) {
+			if (this.servers.find((e) => e.id === server.id)) {
+				const index = this.servers.findIndex((e) => e.id === server.id);
+				this.servers[index] = server;
+				return;
+			}
+			this.servers.push(server);
+		},
+		addChannel(serverId: string, channel: IChannel) {
+			const serverIndex = this.servers.findIndex(s => s.id === serverId);
+			const server = this.servers[serverIndex];
+			if (serverIndex < 0 || !server) return;
+			if (server.channels.find((c) => c.id === channel.id)) return;
+			server.channels.push(channel);
+		},
+		getByChannelId(channelId: string) {
+			return this.servers.find((e: IServer) => e.channels.some((c: IChannel) => c.id === channelId));
+		}
+	}
+});
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useServerStore, import.meta.hot));
+}

stores/userStore.ts

@@ -0,0 +1,27 @@
+import { SafeUser } from '~/types';
+
+export const useUserStore = defineStore('userStore', {
+	state: () => ({
+		user: null as SafeUser | null,
+		isLoggedIn: false,
+	}),
+	actions: {
+		setUser(user: SafeUser) {
+			this.user = user;
+			this.isLoggedIn = true;
+		},
+		async logout() {
+			await $fetch('/api/user/logout');
+			useCookie('sessionToken').value = null;
+			useCookie('userId').value = null;
+
+			this.user = null;
+			this.isLoggedIn = false;
+			return navigateTo('/login');
+		}
+	}
+});
+
+if (import.meta.hot) {
+	import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));
+}

utils/parseMessageBody.ts

@@ -1,10 +1,9 @@
-import { IChannel } from '~/types';
+import { SafeUser } from '~/types';
 
-export default function parseBody(body: string, activeChannel: IChannel) {
+export default function parseBody(body: string, participants: SafeUser[]) {
-	if (!activeChannel.id) throw new Error('No active channel');
 	body = escape(body);
 	const rules = [
-		//bold, italics and paragragh rules
+		//bold, italics and paragraph rules
 		[/&#42;&#42;\s?([^\n]+)&#42;&#42;/g, '<b>$1</b>'],
 		[/&#42;\s?([^\n]+)&#42;/g, '<i>$1</i>'],
 		[/&#95;&#95;\s?([^\n]+)&#95;&#95;/g, '<u>$1</u>'],
@@ -28,8 +27,7 @@ export default function parseBody(body: string, activeChannel: IChannel) {
 	const mentions = body.match(mentionRegex);
 
 	if (mentions) {
-		const participants = (activeChannel.DM) ? activeChannel.dmParticipants : activeChannel.server.participants;
+		if (!participants) throw new Error('participants in channel not found');
-		if (!participants) throw new Error(`participants in channel "${activeChannel.id}" not found"`);
 		mentions.forEach((e: string) => {
 			const id = e.split('&#60;&#64;')[1]?.split('&#62;')[0];
 			if (!id) return;