refac

src/lib/components/common/DropdownOptions.svelte

@@ -31,7 +31,7 @@
 	triggerClass={className
 		? className
 		: 'flex shrink-0 items-center gap-2 bg-transparent px-0.5 text-sm placeholder-gray-400 outline-hidden focus:outline-hidden'}
-	itemClass="flex w-full gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl"
+	itemClass="flex w-full h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 	onChange={(v) => {
 		onChange(v);
 	}}

src/lib/components/common/Select.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { flyAndScale } from '$lib/utils/transitions';
 	import { tick } from 'svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 
 	/** Currently selected value */
 	export let value = '';
@@ -21,8 +22,7 @@
 	export let labelClass = '';
 
 	/** CSS classes for the dropdown content container */
-	export let contentClass =
-		'rounded-2xl min-w-[170px] p-1 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 dark:text-white shadow-lg';
+	export let contentClass = 'min-w-[170px]';
 
 	/** Max height for the dropdown content */
 	export let maxHeight = '18rem';
@@ -127,7 +127,7 @@
 
 {#if open}
 	<div use:portal bind:this={contentEl} transition:flyAndScale>
-		<div class={contentClass} style:max-height={maxHeight} style:overflow-y="auto">
+		<DropdownMenu className={contentClass} style={`max-height: ${maxHeight}; overflow-y: auto;`}>
 			<slot {open} {selectItem}>
 				{#each items as item}
 					<button class={itemClass} type="button" on:click={() => selectItem(item)}>
@@ -137,6 +137,6 @@
 					</button>
 				{/each}
 			</slot>
-		</div>
+		</DropdownMenu>
 	</div>
 {/if}

src/lib/components/playground/Chat.svelte

@@ -20,6 +20,7 @@
 	import { splitStream } from '$lib/utils';
 	import Collapsible from '../common/Collapsible.svelte';
 	import Dropdown from '../common/Dropdown.svelte';
+	import DropdownMenu from '../common/DropdownMenu.svelte';
 	import DropdownSub from '../common/DropdownSub.svelte';
 
 	import Messages from '$lib/components/playground/Chat/Messages.svelte';
@@ -394,9 +395,7 @@
 					</button>
 
 					<div slot="content">
-						<div
-							class="min-w-[200px] 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"
-						>
+						<DropdownMenu className="min-w-[200px]">
 							<DropdownSub>
 								<button
 									slot="trigger"
@@ -426,7 +425,7 @@
 									<div class="flex items-center line-clamp-1">{$i18n.t('Plain text (.txt)')}</div>
 								</button>
 							</DropdownSub>
-						</div>
+						</DropdownMenu>
 					</div>
 				</Dropdown>
 			</div>

src/routes/(app)/automations/+page.svelte

@@ -27,6 +27,7 @@
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import Select from '$lib/components/common/Select.svelte';
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	import Check from '$lib/components/icons/Check.svelte';
 	import CheckCircle from '$lib/components/icons/CheckCircle.svelte';
@@ -384,9 +385,7 @@
 							</Tooltip>
 
 							<div slot="content">
-								<div
-									class="w-[170px] rounded-xl p-1 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
-								>
+								<DropdownMenu className="w-[170px] shadow-sm">
 									<button
 										class="select-none flex w-full gap-2 items-center px-3 py-1.5 text-sm font-medium cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-md"
 										type="button"
@@ -403,7 +402,7 @@
 										<Minus className="size-4" />
 										{$i18n.t('Disable All')}
 									</button>
-								</div>
+								</DropdownMenu>
 							</div>
 						</Dropdown>
 					</div>