various improvements

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

@@ -1,79 +1,87 @@
+<!-- eslint-disable vue/no-multiple-template-root -->
 <template>
-	<MessagePane />
-	<div class="fixed mr-3"
-		:style="`top: ${emojiPickerData.top}px; right: ${emojiPickerData.right}px`">
-		<Transition>
-			<EmojiPicker v-on:pickedEmoji="pickedEmoji($event)"
-				:opened="emojiPickerData.opened" />
-		</Transition>
-	</div>
+  <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'
+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);
+		});
+
+		return {
+			server
+		};
+	},
 	data() {
 		return {
 			emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
 			emojiPickerStyles: {
-				top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px',
-				right: storeToRefs(useGlobalStore()).emojiPickerData.right + 'px',
+				top: storeToRefs(useGlobalStore()).emojiPickerData.value.top + 'px',
+				right: storeToRefs(useGlobalStore()).emojiPickerData.value.right + 'px',
 			}
-		}
-	},
-	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)
-		})
-
-		return {
-			server
-		}
+		};
 	},
 	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?')
+		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)
+			useGlobalStore().closeEmojiPicker();
+			useGlobalStore().setActiveServer('dms', route.params.id);
 		}
 	},
 	methods: {
 		pickedEmoji(emoji: string) {
-			const { $emit } = useNuxtApp()
-			$emit('pickedEmoji', emoji)
-			useGlobalStore().closeEmojiPicker()
+			const { $emit } = useNuxtApp();
+			$emit('pickedEmoji', emoji);
+			useGlobalStore().closeEmojiPicker();
 		},
 	}
-}
+};
 </script>
 
 <style>
 .v-enter-active,
 .v-leave-active {
-  transition: opacity 0.5s ease;
+	transition: opacity 0.5s ease;
 }
 
 .v-enter-from,
 .v-leave-to {
-  opacity: 0;
+	opacity: 0;
 }
 </style>