refac: optimisation

src/lib/components/channel/Channel.svelte

@@ -74,7 +74,6 @@
 			const data = event?.data?.data ?? null;
 
 			if (type === 'message') {
-				console.log('message', data);
 				messages = [data, ...messages];
 
 				if (typingUsers.find((user) => user.id === event.user.id)) {
@@ -86,18 +85,14 @@
 					messagesContainerElement.scrollTop = messagesContainerElement.scrollHeight;
 				}
 			} else if (type === 'message:update') {
-				console.log('message:update', data);
 				const idx = messages.findIndex((message) => message.id === data.id);
 
 				if (idx !== -1) {
 					messages[idx] = data;
 				}
 			} else if (type === 'message:delete') {
-				console.log('message:delete', data);
 				messages = messages.filter((message) => message.id !== data.id);
 			} else if (type === 'message:reaction') {
-				console.log('message:reaction', data);
-
 				const idx = messages.findIndex((message) => message.id === data.id);
 				if (idx !== -1) {
 					messages[idx] = data;

src/lib/components/channel/Messages/Message/ReactionPicker.svelte

@@ -14,7 +14,7 @@
 	export let user = null;
 	let show = false;
 
-	let emojis = emojiShortCodes;
+	let emojis = {};
 	let search = '';
 
 	$: if (search) {
@@ -39,6 +39,21 @@
 	} else {
 		emojis = emojiShortCodes;
 	}
+
+	$: if (show) {
+		init();
+	} else {
+		destroy();
+	}
+
+	const init = () => {
+		emojis = emojiShortCodes;
+	};
+
+	const destroy = () => {
+		search = '';
+		emojis = {};
+	};
 </script>
 
 <DropdownMenu.Root
@@ -86,7 +101,7 @@
 									</div>
 
 									<div class="flex mb-2 flex-wrap gap-1">
-										{#each groupEmojis as emoji}
+										{#each groupEmojis as emoji (emoji)}
 											<Tooltip
 												content={(typeof emojiShortCodes[emoji] === 'string'
 													? [emojiShortCodes[emoji]]