Add emoji picker to category dropdown; implement toggle functionality and handle emoji selection

frontend/package.json

@@ -40,6 +40,7 @@
 	"type": "module",
 	"dependencies": {
 		"@lukulent/svelte-umami": "^0.0.3",
+		"emoji-picker-element": "^1.26.0",
 		"qrcode": "^1.5.4",
 		"svelte-i18n": "^4.0.1",
 		"svelte-maplibre": "^0.9.8"

frontend/pnpm-lock.yaml

@@ -11,6 +11,9 @@ importers:
       '@lukulent/svelte-umami':
         specifier: ^0.0.3
         version: 0.0.3(svelte@4.2.19)
+      emoji-picker-element:
+        specifier: ^1.26.0
+        version: 1.26.0
       qrcode:
         specifier: ^1.5.4
         version: 1.5.4
@@ -985,6 +988,9 @@ packages:
   electron-to-chromium@1.4.810:
     resolution: {integrity: sha512-Kaxhu4T7SJGpRQx99tq216gCq2nMxJo+uuT6uzz9l8TVN2stL7M06MIIXAtr9jsrLs2Glflgf2vMQRepxawOdQ==}
 
+  emoji-picker-element@1.26.0:
+    resolution: {integrity: sha512-IcffFc+LNymYScmMuxOJooZulOCOACGc1Xvj+s7XeKqpc+0EoZfWrV9o4rBjEiuM7XjsgcEjD+m5DHg0aIfnnA==}
+
   emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
 
@@ -2885,6 +2891,8 @@ snapshots:
 
   electron-to-chromium@1.4.810: {}
 
+  emoji-picker-element@1.26.0: {}
+
   emoji-regex@8.0.0: {}
 
   emoji-regex@9.2.2: {}

frontend/src/lib/components/CategoryDropdown.svelte

@@ -14,7 +14,12 @@
 		num_adventures: 0
 	};
 
-	let isOpen = false;
+	let isOpen: boolean = false;
+	let isEmojiPickerVisible: boolean = false;
+
+	function toggleEmojiPicker() {
+		isEmojiPickerVisible = !isEmojiPickerVisible;
+	}
 
 	function toggleDropdown() {
 		isOpen = !isOpen;
@@ -31,6 +36,10 @@
 		selectCategory(new_category);
 	}
 
+	function handleEmojiSelect(event: CustomEvent) {
+		new_category.icon = event.detail.unicode;
+	}
+
 	// Close dropdown when clicking outside
 	let dropdownRef: HTMLDivElement;
 
@@ -46,6 +55,9 @@
 			document.removeEventListener('click', handleClickOutside);
 		};
 	});
+	onMount(async () => {
+		await import('emoji-picker-element');
+	});
 </script>
 
 <div class="mt-2 relative" bind:this={dropdownRef}>
@@ -59,23 +71,35 @@
 		<div class="absolute z-10 w-full mt-1 bg-base-300 rounded shadow-lg p-2">
 			<!-- svelte-ignore a11y-click-events-have-key-events -->
 			<!-- svelte-ignore a11y-no-static-element-interactions -->
-			<div class="flex items-center gap-2">
+			<div class="flex flex-col gap-2">
-				<input
+				<div class="flex items-center gap-2">
-					type="text"
+					<input
-					placeholder={$t('categories.category_name')}
+						type="text"
-					class="input input-bordered w-full max-w-xs"
+						placeholder={$t('categories.category_name')}
-					bind:value={new_category.display_name}
+						class="input input-bordered w-full max-w-xs"
-				/>
+						bind:value={new_category.display_name}
-				<input
+					/>
-					type="text"
+					<input
-					placeholder={$t('categories.icon')}
+						type="text"
-					class="input input-bordered w-full max-w-xs"
+						placeholder={$t('categories.icon')}
-					bind:value={new_category.icon}
+						class="input input-bordered w-full max-w-xs"
-				/>
+						bind:value={new_category.icon}
-				<button on:click={custom_category} type="button" class="btn btn-primary"
+					/>
-					>{$t('adventures.add')}</button
+					<button on:click={toggleEmojiPicker} type="button" class="btn btn-secondary">
-				>
+						{isEmojiPickerVisible ? 'Hide' : 'Show'} Emoji Picker
+					</button>
+					<button on:click={custom_category} type="button" class="btn btn-primary">
+						{$t('adventures.add')}
+					</button>
+				</div>
+
+				{#if isEmojiPickerVisible}
+					<div class="mt-2">
+						<emoji-picker on:emoji-click={handleEmojiSelect}></emoji-picker>
+					</div>
+				{/if}
 			</div>
+
 			<div class="flex flex-wrap gap-2 mt-2">
 				<!-- Sort the categories dynamically before rendering -->
 				{#each categories