refac

src/lib/components/common/Dropdown.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import { flyAndScale } from '$lib/utils/transitions';
-	import { createEventDispatcher, tick } from 'svelte';
-
-	const dispatch = createEventDispatcher();
+	import { tick } from 'svelte';
 
 	/** Whether the dropdown is open */
 	export let show = false;
@@ -106,7 +104,6 @@
 	async function toggleOpen() {
 		show = !show;
 		onOpenChange(show);
-		dispatch('change', show);
 		if (show) {
 			await tick();
 			positionContent();
@@ -129,22 +126,19 @@
 		if (contentEl?.contains(event.target)) return;
 		show = false;
 		onOpenChange(false);
-		dispatch('change', false);
 	}
 
 	function handleKeydown(event) {
 		if (event.key === 'Escape' && show) {
 			show = false;
 			onOpenChange(false);
-			dispatch('change', false);
-		}
+			}
 	}
 
 	/** Close the dropdown programmatically */
 	export function close() {
 		show = false;
 		onOpenChange(false);
-		dispatch('change', false);
 	}
 </script>
 

src/lib/components/common/EmojiPicker.svelte

@@ -109,8 +109,8 @@
 <Dropdown
 	bind:show
 	{align}
-	on:change={(e) => {
-		if (e.detail === false) {
+	onOpenChange={(state) => {
+		if (state === false) {
 			search = '';
 			onClose();
 		}

src/lib/components/layout/Sidebar/UserMenu.svelte

@@ -59,8 +59,7 @@
 		}
 	};
 
-	const handleDropdownChange = (e) => {
-		const state = e.detail;
+	const handleDropdownChange = (state) => {
 		dispatch('change', state);
 
 		// Fetch usage info when dropdown opens, if user has permission
@@ -79,7 +78,7 @@
 />
 
 <!-- svelte-ignore a11y-no-static-element-interactions -->
-<Dropdown bind:show on:change={handleDropdownChange} {align}>
+<Dropdown bind:show onOpenChange={handleDropdownChange} {align}>
 	<slot />
 
 	<div slot="content">