refac

src/lib/components/common/DropdownOptions.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { getContext } from 'svelte';
 
-	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import Select from '$lib/components/common/Select.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
 	const i18n = getContext('i18n');
 
@@ -17,44 +17,31 @@
 
 	export let onChange: (value: string) => void = () => {};
 
+	let selectComponent;
 	let open = false;
 </script>
 
-<Dropdown bind:show={open} {align}>
+<Select
-	<div
+	bind:this={selectComponent}
-		class={className
+	bind:value
-			? className
+	bind:open
-			: 'flex w-full items-center gap-2 truncate bg-transparent px-0.5 text-sm placeholder-gray-400 outline-hidden focus:outline-hidden'}
+	{items}
-	>
+	{placeholder}
-		{items.find((item) => item.value === value)?.label ?? placeholder}
+	{align}
+	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"
+	onChange={(v) => {
+		onChange(v);
+	}}
+>
+	<svelte:fragment slot="trigger" let:selectedLabel>
+		{selectedLabel}
 		<ChevronDown className=" size-3" strokeWidth="2.5" />
-	</div>
+	</svelte:fragment>
 
-	<div slot="content">
+	<svelte:fragment slot="item" let:item let:selected>
-		<div
+		<span class={selected ? '' : 'text-gray-500 dark:text-gray-400'}>{item.label}</span>
-			class="dark:bg-gray-850 z-50 w-full rounded-2xl border border-gray-100 bg-white p-1 shadow-lg dark:border-gray-800 dark:text-white"
+	</svelte:fragment>
-		>
+</Select>
-			{#each items as item}
-				<button
-					class="flex w-full cursor-pointer items-center gap-2 rounded-xl px-3 py-1.5 text-sm hover:bg-gray-50 dark:hover:bg-gray-800 {value ===
-					item.value
-						? ' '
-						: '  text-gray-500 dark:text-gray-400'}"
-					type="button"
-					on:click={() => {
-						if (value === item.value) {
-							value = null;
-						} else {
-							value = item.value;
-						}
-
-						open = false;
-						onChange(value);
-					}}
-				>
-					{item.label}
-				</button>
-			{/each}
-		</div>
-	</div>
-</Dropdown>

src/lib/components/notes/Notes.svelte

@@ -409,7 +409,7 @@
 					>
 						<DropdownOptions
 							align="start"
-							className="flex w-full items-center gap-2 truncate px-3 py-1.5 text-sm bg-gray-50 dark:bg-gray-850 rounded-xl  placeholder-gray-400 outline-hidden focus:outline-hidden"
+							className="flex shrink-0 items-center gap-2 px-3 py-1.5 text-sm bg-gray-50 dark:bg-gray-850 rounded-xl placeholder-gray-400 outline-hidden focus:outline-hidden"
 							bind:value={viewOption}
 							items={[
 								{ value: null, label: $i18n.t('All') },
@@ -438,7 +438,7 @@
 					</div>
 				</div>
 
-				<div>
+				<div class="shrink-0">
 					<DropdownOptions
 						align="start"
 						bind:value={displayOption}

src/lib/components/workspace/Knowledge/KnowledgeBase.svelte

@@ -974,7 +974,7 @@
 					>
 						<DropdownOptions
 							align="start"
-							className="flex w-full items-center gap-2 truncate px-3 py-1.5 text-sm bg-gray-50 dark:bg-gray-850 rounded-xl  placeholder-gray-400 outline-hidden focus:outline-hidden"
+							className="flex shrink-0 items-center gap-2 px-3 py-1.5 text-sm bg-gray-50 dark:bg-gray-850 rounded-xl placeholder-gray-400 outline-hidden focus:outline-hidden"
 							bind:value={viewOption}
 							items={[
 								{ value: null, label: $i18n.t('All') },