refac

src/lib/components/chat/MessageInput/CallOverlay/VideoInputMenu.svelte

@@ -5,6 +5,7 @@
 	const dispatch = createEventDispatcher();
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 
 	export let onClose: Function = () => {};
 	export let devices: any;
@@ -25,9 +26,7 @@
 	<slot />
 
 	<div slot="content">
-		<div
-			class="min-w-[180px] rounded-lg p-1 border border-gray-100 dark:border-gray-800 z-[9999] bg-white dark:bg-gray-900 dark:text-white shadow-xs"
-		>
+		<DropdownMenu className="min-w-[180px] z-[9999] dark:bg-gray-900 shadow-xs">
 			{#each devices as device}
 				<button
 					class="flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md w-full"
@@ -42,6 +41,6 @@
 					</div>
 				</button>
 			{/each}
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>

src/lib/components/chat/MessageInput/InputMenu.svelte

@@ -8,6 +8,7 @@
 	import { createPicker } from '$lib/utils/google-drive-picker';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import DocumentArrowUp from '$lib/components/icons/DocumentArrowUp.svelte';
 	import Camera from '$lib/components/icons/Camera.svelte';
@@ -121,8 +122,8 @@
 	</Tooltip>
 
 	<div slot="content">
-		<div
-			class="w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin transition"
+		<DropdownMenu
+			className="w-70 max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin transition"
 		>
 			{#if tab === ''}
 				<div in:fly={{ x: -20, duration: 150 }}>
@@ -607,6 +608,6 @@
 					{/if}
 				</div>
 			{/if}
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>

src/lib/components/chat/MessageInput/IntegrationsMenu.svelte

@@ -22,6 +22,7 @@
 
 	import Knobs from '$lib/components/icons/Knobs.svelte';
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Spinner from '$lib/components/common/Spinner.svelte';
@@ -140,8 +141,8 @@
 		<slot />
 	</Tooltip>
 	<div slot="content">
-		<div
-			class="min-w-70 max-w-70 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
+		<DropdownMenu
+			className="min-w-70 max-w-70 max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
 		>
 			{#if tab === ''}
 				<div in:fly={{ x: -20, duration: 150 }}>
@@ -549,6 +550,6 @@
 					{/each}
 				</div>
 			{/if}
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>

src/lib/components/chat/MessageInput/TerminalMenu.svelte

@@ -6,6 +6,7 @@
 	import { getToolServersData } from '$lib/apis';
 
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Cloud from '$lib/components/icons/Cloud.svelte';
 
@@ -108,8 +109,8 @@
 		</Tooltip>
 
 		<div slot="content">
-			<div
-				class="min-w-56 max-w-56 rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
+			<DropdownMenu
+				className="min-w-56 max-w-56 max-h-72 overflow-y-auto overflow-x-hidden scrollbar-thin"
 			>
 				<!-- Direct terminals (gated by permission) -->
 				{#if directTerminals.length > 0 && ($user?.role === 'admin' || ($user?.permissions?.features?.direct_tool_servers ?? true))}
@@ -246,7 +247,7 @@
 						</button>
 					{/each}
 				{/if}
-			</div>
+			</DropdownMenu>
 		</div>
 	</Dropdown>
 </div>