a bunch of bug fixes and improvements

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

@@ -5,8 +5,8 @@
     :participants="participants"
   />
   <div
-    class="fixed mr-3"
-    :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
+    class="fixed mx-3"
+    :style="`top: ${emojiPickerData.top}px; ${(emojiPickerData.right !== undefined) ? `right: ${emojiPickerData.right}px;` : `left: ${emojiPickerData.left}px`}`"
   >
     <Transition>
       <Popup
@@ -22,9 +22,8 @@
 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';
+import { IChannel, IMessage, SafeUser } from '~/types';
 
 definePageMeta({
 	middleware: 'auth'
@@ -53,10 +52,6 @@ export default {
 
 		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({
@@ -70,12 +65,7 @@ export default {
 	},
 	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: {

pages/channel/@me/index.vue

@@ -21,7 +21,7 @@ export default {
 		};
 	},
 	mounted() {
-		useActiveStore().type = 'dm';
+		useActiveStore().setActiveHome();
 	},
 	methods: {
 		async startDM() {

pages/channel/[channelId].vue

@@ -1,12 +1,12 @@
 <!-- eslint-disable vue/no-multiple-template-root -->
 <template>
   <MessagePane
-    :channel="channel"
-    :participants="server.participants"
+    :channel="server.channel"
+    :participants="server.server.participants"
   />
   <div
-    class="fixed mr-3"
-    :style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`"
+    class="fixed mx-3"
+    :style="`top: ${emojiPickerData.top}px; ${(emojiPickerData.right !== undefined) ? `right: ${emojiPickerData.right}px;` : `left: ${emojiPickerData.left}px`}`"
   >
     <Transition>
       <Popup
@@ -49,38 +49,27 @@ export default {
 		}
 		useEmojiPickerStore().closeEmojiPicker();
 
-		const channel = useActiveStore().server.channel;
-		const server = useActiveStore().server.server;
-
-		channel.messages?.forEach((e: IMessage) => {
-			e.body = parseMessageBody(e.body, server.participants);
-		});
+		const server = useActiveStore().server;
 
 		useHeadSafe({
-			title: `#${channel.name} | ${server.name} - Blop`
+			title: `#${server.channel.name} | ${server.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',
-			}
 		};
 	},
 	async mounted() {
 		const { $io } = useNuxtApp();
 
-		(await $io).on(`addChannel-${this.server.id}`, (ev) => {
+		(await $io).on(`addChannel-${this.server.server.id}`, (ev) => {
 			const newChannel = ev as IChannel;
-			useServerStore().addChannel(this.server.id, newChannel);
+			useServerStore().addChannel(this.server.server.id, newChannel);
 		});
 	},
 	methods: {