From 68973f9b39f8f9dd518a956a7945bdd168eb8d85 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 15 Mar 2026 23:48:44 -0500
Subject: [PATCH] refac

---
 src/lib/components/common/Dropdown.svelte         | 10 ++--------
 src/lib/components/common/EmojiPicker.svelte      |  4 ++--
 src/lib/components/layout/Sidebar/UserMenu.svelte |  5 ++---
 3 files changed, 6 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/common/Dropdown.svelte b/src/lib/components/common/Dropdown.svelte
index 8674add13..82e7d9454 100644
--- a/src/lib/components/common/Dropdown.svelte
+++ b/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>
 
diff --git a/src/lib/components/common/EmojiPicker.svelte b/src/lib/components/common/EmojiPicker.svelte
index 9cafc7662..047b22344 100644
--- a/src/lib/components/common/EmojiPicker.svelte
+++ b/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();
 		}
diff --git a/src/lib/components/layout/Sidebar/UserMenu.svelte b/src/lib/components/layout/Sidebar/UserMenu.svelte
index 52ff94abe..b13785498 100644
--- a/src/lib/components/layout/Sidebar/UserMenu.svelte
+++ b/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">