feat(*): Add emoji picker

package.json

@@ -27,6 +27,7 @@
 	},
 	"type": "module",
 	"dependencies": {
+		"@joeattardi/emoji-button": "^4.6.4",
 		"uuid": "^9.0.0",
 		"ws": "^8.13.0"
 	}

src/components/EmojiPicker.svelte

@@ -0,0 +1,36 @@
+<script>
+	import { onMount } from 'svelte';
+	import { browser } from '$app/environment';
+	let selectedEmoji = '🧻';
+	let picker, button;
+
+	const showEmojiPicker = () => {
+		picker.pickerVisible ? picker.hidePicker() : picker.showPicker(button);
+	};
+
+	if (browser) {
+		onMount(async () => {
+			const { EmojiButton } = await import('@joeattardi/emoji-button');
+			picker = new EmojiButton();
+			picker.on('emoji', (selection) => {
+				selectedEmoji = selection.emoji;
+				dispatch('emojiSelected', { emoji: selection.emoji });
+			});
+		});
+	}
+
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+</script>
+
+<div style="position: relative;">
+	<button bind:this={button} class="emoji-button" on:click={showEmojiPicker}>
+		{selectedEmoji} Choose your emoji...
+	</button>
+</div>
+
+<style>
+	.emoji-button {
+		cursor: pointer;
+	}
+</style>

src/components/UsersList.svelte

@@ -1,11 +1,17 @@
 <script lang="ts">
+	import EmojiPicker from './EmojiPicker.svelte';
+
 	export let users: any;
 	export let showEstimates: boolean = false;
 	export let userId: string;
 
-	let customEmoji = '💩';
+	let customEmoji = '🧽'; // default emoji
 	let shieldActive = false;
 
+	const handleEmojiSelected = (event) => {
+        customEmoji = event.detail.emoji;
+    };
+
 	function handleCardClick(cardId) {
 		// Get the user from the cardId
 		let user = users.find((user) => `user-card-${user.userId}` === cardId);
@@ -92,6 +98,8 @@
 	}
 </script>
 
+<EmojiPicker on:emojiSelected="{handleEmojiSelected}" />
+
 <div id="users-list">
 	<div class="users-container">
 		{#each users as user (user.userId)}
@@ -114,8 +122,6 @@
 	</div>
 </div>
 
-<!-- <input type="text" bind:value={customEmoji} placeholder="Enter your custom emoji" /> -->
-
 <style>
 	#users-list {
 		display: flex;