made emojipicker work 10x better, also fixed a few bugs

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

@@ -1,5 +1,12 @@
 <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>
 </template>
 
 <script lang="ts">
@@ -11,6 +18,15 @@ definePageMeta({
 })
 
 export default {
+	data() {
+		return {
+			emojiPickerData: storeToRefs(useGlobalStore()).emojiPickerData,
+			emojiPickerStyles: {
+				top: storeToRefs(useGlobalStore()).emojiPickerData.top + 'px',
+				right: storeToRefs(useGlobalStore()).emojiPickerData.right + 'px',
+			}
+		}
+	},
 	async setup() {
 		const route = useRoute()
 		const headers = useRequestHeaders(['cookie']) as Record<string, string>
@@ -22,6 +38,7 @@ export default {
 		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)
@@ -34,9 +51,29 @@ export default {
 	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 !== this.server) {
+		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>
+</script>
+
+<style>
+.v-enter-active,
+.v-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.v-enter-from,
+.v-leave-to {
+  opacity: 0;
+}
+</style>