refac

2026-07-14 00:48:40 -04:00
parent 84e4d6ef82
commit f1584b5a37
46 changed files with 335 additions and 378 deletions
@@ -5,6 +5,7 @@
 	const i18n = getContext('i18n');

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';

@@ -17,9 +18,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[150px] rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
-		>
+		<DropdownMenu className="min-w-[150px]">
 			<button
 				class="select-none 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"
 				on:click={() => {
@@ -30,6 +29,6 @@
 				<GarbageBin strokeWidth="2" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -26,6 +26,7 @@
 	import FeedbackModal from './FeedbackModal.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';

 	import ChevronUp from '$lib/components/icons/ChevronUp.svelte';
 	import ChevronDown from '$lib/components/icons/ChevronDown.svelte';
@@ -240,9 +241,7 @@
 						</button>

 						<div slot="content">
-							<div
-								class="w-[170px] rounded-2xl p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg"
-							>
+							<DropdownMenu className="w-[170px]">
 								<button
 									class="select-none 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"
 									type="button"
@@ -258,7 +257,7 @@
 								>
 									{$i18n.t('Export as CSV')}
 								</button>
-							</div>
+							</DropdownMenu>
 						</div>
 					</Dropdown>
 				{/if}
@@ -2,6 +2,7 @@
 	import { getContext } from '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 Pencil from '$lib/components/icons/Pencil.svelte';
 	import Link from '$lib/components/icons/Link.svelte';
@@ -30,9 +31,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[190px] 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-[190px]">
 			<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-xl w-full"
 				on:click={async () => {
@@ -58,6 +57,6 @@
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Import From Link')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Share from '$lib/components/icons/Share.svelte';
@@ -39,9 +40,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[180px] rounded-xl p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
-		>
+		<DropdownMenu className="min-w-[180px]">
 			{#if ['filter', 'action'].includes(func.type)}
 				<div
 					class="flex gap-2 justify-between items-center px-3 py-1.5 text-sm font-medium cursor-pointerrounded-md"
@@ -124,6 +123,6 @@
 				<GarbageBin strokeWidth="2" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -46,6 +46,7 @@
 	import { goto } from '$app/navigation';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import AdminViewSelector from './Models/AdminViewSelector.svelte';
 	import TagSelector from '$lib/components/workspace/common/TagSelector.svelte';
 	import Pagination from '$lib/components/common/Pagination.svelte';
@@ -540,9 +541,7 @@
 					</Tooltip>

 					<div slot="content">
-						<div
-							class="w-[170px] rounded-xl p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
-						>
+						<DropdownMenu className="w-[170px]">
 							<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"
@@ -588,7 +587,7 @@
 								<EyeSlash className="size-4" />
 								<div class="flex items-center">{$i18n.t('Hide All')}</div>
 							</button>
-						</div>
+						</DropdownMenu>
 					</div>
 				</Dropdown>
 			</div>
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -46,9 +47,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[170px] rounded-xl p-1 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-sm"
-		>
+		<DropdownMenu className="min-w-[170px]">
 			<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"
 				on:click={() => {
@@ -156,6 +155,6 @@

 				<div class="flex items-center">{$i18n.t('Export')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -200,22 +200,6 @@
 				</div>
 			{/if}
 		</div>
-
-		<div class="flex flex-col w-full">
-			<div class="flex w-full justify-between my-1">
-				<div class=" self-center text-xs font-medium">
-					{$i18n.t('Allow Sharing With Groups')}
-				</div>
-				<Switch bind:state={permissions.access_grants.allow_groups} />
-			</div>
-			{#if defaultPermissions?.access_grants?.allow_groups && !permissions.access_grants.allow_groups}
-				<div>
-					<div class="text-xs text-gray-500">
-						{$i18n.t('This is a default user permission and will remain enabled.')}
-					</div>
-				</div>
-			{/if}
-		</div>
 	</div>

 	<hr class=" border-gray-100/30 dark:border-gray-850/30" />
@@ -500,6 +484,22 @@
 				</div>
 			{/if}
 		</div>
+
+		<div class="flex flex-col w-full">
+			<div class="flex w-full justify-between my-1">
+				<div class=" self-center text-xs font-medium">
+					{$i18n.t('Allow Sharing With Groups')}
+				</div>
+				<Switch bind:state={permissions.access_grants.allow_groups} />
+			</div>
+			{#if defaultPermissions?.access_grants?.allow_groups && !permissions.access_grants.allow_groups}
+				<div>
+					<div class="text-xs text-gray-500">
+						{$i18n.t('This is a default user permission and will remain enabled.')}
+					</div>
+				</div>
+			{/if}
+		</div>
 	</div>

 	<hr class=" border-gray-100/30 dark:border-gray-850/30" />
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -30,11 +31,9 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[170px] 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-[170px]">
 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					editHandler();
@@ -47,7 +46,7 @@
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
-					class="w-4 h-4"
+					class="size-3.5"
 				>
 					<path
 						stroke-linecap="round"
@@ -60,19 +59,19 @@
 			</button>

 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					cloneHandler();
 					show = false;
 				}}
 			>
-				<DocumentDuplicate />
+				<DocumentDuplicate className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Clone')}</div>
 			</button>

 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					runHandler();
@@ -85,7 +84,7 @@
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
-					class="w-4 h-4"
+					class="size-3.5"
 				>
 					<path
 						stroke-linecap="round"
@@ -97,19 +96,19 @@
 				<div class="flex items-center">{$i18n.t('Run Now')}</div>
 			</button>

-			<hr class="border-gray-50 dark:border-gray-850/30 my-1" />
+			<hr class="border-gray-50 dark:border-gray-850/30 mx-1 my-0.5" />

 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					deleteHandler();
 					show = false;
 				}}
 			>
-				<GarbageBin />
+				<GarbageBin className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -70,13 +70,13 @@

 	<div
 		slot="content"
-		class="rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-72 p-1"
+		class="rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-72 p-0.5"
 	>
-		<div class="flex items-center gap-2 px-2.5 py-1.5">
+		<div class="flex items-center gap-1.5 px-2 py-1">
 			<Search className="size-3.5" strokeWidth="2.5" />
 			<input
 				bind:value={modelSearch}
-				class="w-full text-sm bg-transparent outline-hidden"
+				class="w-full text-[13px] bg-transparent outline-hidden"
 				placeholder={$i18n.t('Search a model')}
 				autocomplete="off"
 				on:click={(e) => e.stopPropagation()}
@@ -84,13 +84,13 @@
 		</div>

 		<div class="overflow-y-auto scrollbar-thin max-h-60">
-			<div class="px-2 text-xs text-gray-500 py-1">
+			<div class="px-2 text-[11px] text-gray-500 py-0.5">
 				{$i18n.t('Models')}
 			</div>

 			{#each filteredModels as model (model.id)}
 				<button
-					class="px-2.5 py-1.5 rounded-xl w-full text-left text-sm {model_id === model.id
+					class="h-[1.6875rem] px-2 rounded-xl w-full text-left text-[13px] {model_id === model.id
 						? 'bg-gray-50 dark:bg-gray-800'
 						: ''}"
 					type="button"
@@ -117,7 +117,7 @@
 					</div>
 				</button>
 			{:else}
-				<div class="block px-3 py-2 text-sm text-gray-700 dark:text-gray-100">
+				<div class="block px-2 py-1.5 text-[13px] text-gray-700 dark:text-gray-100">
 					{$i18n.t('No results found')}
 				</div>
 			{/each}
@@ -192,15 +192,15 @@

 	<div
 		slot="content"
-		class="rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-48 p-1"
+		class="rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-48 p-0.5"
 	>
-		<div class="px-2 text-xs text-gray-500 pt-1">
+		<div class="px-2 text-[11px] text-gray-500 pt-0.5">
 			{$i18n.t('Schedule')}
 		</div>

 		<div class="px-1.5 py-0.5">
 			<select
-				class="w-full bg-transparent rounded-xl text-xs py-1.5 px-1.5 outline-hidden"
+				class="w-full h-[1.6875rem] bg-transparent rounded-xl text-[13px] px-1.5 outline-hidden"
 				bind:value={frequency}
 				on:click={(e) => e.stopPropagation()}
 				on:change={onChange}
@@ -217,13 +217,13 @@
 					type="text"
 					bind:value={customRrule}
 					placeholder="RRULE:FREQ=DAILY;BYHOUR=9;BYMINUTE=0"
-					class="w-full bg-transparent outline-hidden text-xs placeholder:text-gray-400 dark:placeholder:text-gray-600"
+					class="w-full bg-transparent outline-hidden text-[13px] placeholder:text-gray-400 dark:placeholder:text-gray-600"
 					on:click={(e) => e.stopPropagation()}
 					on:input={onChange}
 				/>
 			</div>
 		{:else if frequency !== 'HOURLY'}
-			<div class="flex gap-2 flex-wrap items-center px-3 pb-2 text-xs">
+			<div class="flex gap-2 flex-wrap items-center px-3 pb-2 text-[13px]">
 				{#if frequency === 'ONCE'}
 					<div class="flex items-center gap-1.5">
 						<input
@@ -49,15 +49,15 @@

 		<div
 			slot="content"
-			class="rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 min-w-56 max-w-56 p-1"
+			class="rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 min-w-56 max-w-56 p-0.5"
 		>
-			<div class="px-2 text-xs text-gray-500 py-1">
+			<div class="px-2 text-[11px] text-gray-500 py-0.5">
 				{$i18n.t('Terminal')}
 			</div>

 			{#each terminalServers as server (server.id)}
 				<button
-					class="flex w-full justify-between gap-2 items-center px-3 py-1.5 text-sm cursor-pointer rounded-xl {terminalServerId ===
+					class="flex w-full h-[1.6875rem] justify-between gap-2 items-center px-2 text-[13px] cursor-pointer rounded-xl {terminalServerId ===
 					server.id
 						? 'bg-gray-50 dark:bg-gray-800/50'
 						: 'hover:bg-gray-50 dark:hover:bg-gray-800/50'}"
@@ -74,7 +74,7 @@
 					}}
 				>
 					<div class="flex flex-1 gap-2 items-center truncate">
-						<Cloud className="size-4 shrink-0" strokeWidth="2" />
+						<Cloud className="size-3.5 shrink-0" strokeWidth="2" />
 						<span class="truncate">{server.name || server.id}</span>
 					</div>
 					{#if terminalServerId === server.id}
@@ -83,7 +83,7 @@
 								xmlns="http://www.w3.org/2000/svg"
 								viewBox="0 0 20 20"
 								fill="currentColor"
-								class="size-4"
+								class="size-3.5"
 							>
 								<path
 									fill-rule="evenodd"
@@ -98,7 +98,7 @@

 			{#if terminalServerId}
 				<div class="border-t border-gray-100 dark:border-gray-800 mt-1 pt-1">
-					<div class="px-2.5 py-1 text-xs text-gray-500">
+					<div class="px-2 py-0.5 text-[11px] text-gray-500">
 						{$i18n.t('Working Directory')}
 					</div>
 					<div class="px-2">
@@ -106,7 +106,7 @@
 							type="text"
 							bind:value={terminalCwd}
 							placeholder="/home/user/project"
-							class="w-full bg-transparent outline-hidden text-xs py-1.5 placeholder:text-gray-400 dark:placeholder:text-gray-600"
+							class="w-full bg-transparent outline-hidden text-[13px] py-1 placeholder:text-gray-400 dark:placeholder:text-gray-600"
 							on:click={(e) => e.stopPropagation()}
 							on:input={onChange}
 						/>
@@ -5,6 +5,7 @@
 	import { getTools } from '$lib/apis/tools';

 	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 DocumentArrowUpSolid from '$lib/components/icons/DocumentArrowUpSolid.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
@@ -43,9 +44,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="w-[200px] rounded-2xl px-1 py-1 border border-gray-100 dark:border-gray-800 z-999 bg-white dark:bg-gray-850 dark:text-white shadow-lg transition"
-		>
+		<DropdownMenu className="w-[200px] z-999 transition">
 			<button
 				class="select-none 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/50 rounded-xl"
 				type="button"
@@ -69,6 +68,6 @@
 				<Camera />
 				<div class=" line-clamp-1">{$i18n.t('Capture')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -5,6 +5,7 @@
 	import type { FileEntry } from '$lib/apis/terminal';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Folder from '../../icons/Folder.svelte';
 	import EllipsisHorizontal from '../../icons/EllipsisHorizontal.svelte';
 	import GarbageBin from '../../icons/GarbageBin.svelte';
@@ -304,9 +305,7 @@
 			</button>

 			<div slot="content">
-				<div
-					class="min-w-[150px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
-				>
+				<DropdownMenu className="min-w-[150px] z-[9999999]">
 					<button
 						type="button"
 						class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
@@ -376,7 +375,7 @@
 						<GarbageBin className="size-4" />
 						<div class="flex items-center">{$i18n.t('Delete')}</div>
 					</button>
-				</div>
+				</DropdownMenu>
 			</div>
 		</Dropdown>
 	</div>
@@ -7,6 +7,7 @@
 	import Spinner from '../../common/Spinner.svelte';
 	import Tooltip from '../../common/Tooltip.svelte';
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';

 	const i18n = getContext('i18n');

@@ -187,9 +188,7 @@
 			</Tooltip>

 			<div slot="content">
-				<div
-					class="min-w-[150px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
-				>
+				<DropdownMenu className="min-w-[150px] z-[9999999]">
 					<button
 						type="button"
 						class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
@@ -236,7 +235,7 @@
 							</svg>
 						{/if}
 					</button>
-				</div>
+				</DropdownMenu>
 			</div>
 		</Dropdown>
 		<Tooltip content={$i18n.t('New Folder')}>
@@ -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>
@@ -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>
@@ -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>
@@ -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>
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import LineSpace from '$lib/components/icons/LineSpace.svelte';
 	import LineSpaceSmaller from '$lib/components/icons/LineSpaceSmaller.svelte';

@@ -27,14 +28,12 @@
 	<slot></slot>

 	<div slot="content">
-		<div
-			class="max-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 transition"
-		>
-			<div class="py-1.5 px-2.5 flex dark:text-gray-100">
+		<DropdownMenu className="max-w-[200px] transition">
+			<div class="py-1 px-2 flex dark:text-gray-100">
 				<input
 					type="text"
 					id="floating-message-input"
-					class="bg-transparent outline-hidden w-full flex-1 text-sm"
+					class="bg-transparent outline-hidden w-full flex-1 text-[13px]"
 					placeholder={$i18n.t('Suggest a change')}
 					bind:value={inputValue}
 					autocomplete="off"
@@ -72,7 +71,7 @@
 					</button>
 				</div>
 			</div>
-			<hr class="border-gray-50/30 dark:border-gray-800/30 my-1 mx-2" />
+			<hr class="border-gray-50/30 dark:border-gray-800/30 my-0.5 mx-1" />
 			<button
 				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {
@@ -117,6 +116,6 @@
 				<LineSpaceSmaller strokeWidth="2" />
 				<div class="flex items-center">{$i18n.t('More Concise')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';

 	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 Pin from '$lib/components/icons/Pin.svelte';
 	import PinSlash from '$lib/components/icons/PinSlash.svelte';
@@ -43,9 +44,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[210px] text-sm rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
-		>
+		<DropdownMenu className="min-w-[210px] z-[9999999]">
 			{#if model?.preset || model?.info?.base_model_id ? model?.info?.user_id === $user?.id : $user?.role === 'admin'}
 				<button
 					type="button"
@@ -166,6 +165,6 @@
 					<div class="flex items-center">{$i18n.t('Community Reviews')}</div>
 				</button>
 			{/if}
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let className = '';
+	export let style = '';
+</script>
+
+<div
+	class={`rounded-xl! p-0.5! border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg ${className} [&>button]:flex [&>button]:w-full [&>button]:h-[1.6875rem] [&>button]:items-center [&>button]:gap-2 [&>button]:rounded-xl! [&>button]:px-2! [&>button]:text-[13px] [&>button:hover]:bg-gray-50/60 dark:[&>button:hover]:bg-gray-800/60 [&>a]:flex [&>a]:w-full [&>a]:h-[1.6875rem] [&>a]:items-center [&>a]:gap-2 [&>a]:rounded-xl! [&>a]:px-2! [&>a]:text-[13px] [&>a:hover]:bg-gray-50/60 dark:[&>a:hover]:bg-gray-800/60 [&>button_svg]:size-3.5 [&>a_svg]:size-3.5 [&>hr]:my-0.5 [&>hr]:mx-1`}
+	{style}
+>
+	<slot />
+</div>
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { flyAndScale } from '$lib/utils/transitions';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import { tick } from 'svelte';

 	/** CSS classes for the sub-content container */
@@ -120,8 +121,10 @@
 	<!-- Outer wrapper: positioned flush with trigger, invisible padding bridges the gap -->
 	<div use:portal bind:this={contentEl} on:mouseleave={handleContentMouseLeave}>
 		<!-- Inner content: visual styles and transition -->
-		<div class={contentClass} style="max-width: {maxWidth}px;" transition:flyAndScale>
-			<slot />
+		<div transition:flyAndScale>
+			<DropdownMenu className={contentClass} style="max-width: {maxWidth}px;">
+				<slot />
+			</DropdownMenu>
 		</div>
 	</div>
 {/if}
@@ -165,19 +165,19 @@

 	<div slot="content">
 		<div
-			class="max-w-full w-80 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 rounded-3xl z-9999 shadow-lg dark:text-white"
+			class="max-w-full w-80 border border-gray-100 dark:border-gray-800 bg-white dark:bg-gray-850 rounded-xl z-9999 shadow-lg dark:text-white"
 		>
-			<div class="mb-1 px-4 pt-2.5 pb-2">
+			<div class="mb-0.5 px-3 pt-2 pb-1.5">
 				<input
 					type="text"
-					class="w-full text-sm bg-transparent outline-hidden"
+					class="w-full text-[13px] bg-transparent outline-hidden"
 					placeholder={$i18n.t('Search all emojis')}
 					bind:value={search}
 				/>
 			</div>

 			<!-- Virtualized Emoji List -->
-			<div class="w-full flex justify-start h-96 overflow-y-auto px-3 pb-3 text-sm">
+			<div class="w-full flex justify-start h-96 overflow-y-auto px-2.5 pb-2.5 text-[13px]">
 				{#if emojiRows.length === 0}
 					<div class="text-center text-xs text-gray-500 dark:text-gray-400">
 						{$i18n.t('No results')}
@@ -200,7 +200,7 @@
 												placement="top"
 											>
 												<button
-													class="p-1.5 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition {selected ===
+													class="p-1 rounded-lg cursor-pointer hover:bg-gray-200 dark:hover:bg-gray-700 transition {selected ===
 													emojiItem.shortCodes[0]
 														? 'bg-gray-200 dark:bg-gray-700'
 														: ''}"
@@ -25,6 +25,7 @@
 	import { getChatById } from '$lib/apis/chats';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import DropdownSub from '$lib/components/common/DropdownSub.svelte';
 	import Tags from '$lib/components/chat/Tags.svelte';
 	import Clipboard from '$lib/components/icons/Clipboard.svelte';
@@ -289,9 +290,7 @@
 	<slot />

 	<div slot="content">
-		<div
-			class="select-none min-w-[200px] max-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 transition"
-		>
+		<DropdownMenu className="select-none min-w-[200px] max-w-[200px] transition">
 			<!-- <DropdownMenu.Item draggable="false"
 				class="flex gap-2 items-center px-3 py-1.5 text-sm  cursor-pointer dark:hover:bg-gray-800 rounded-xl"
 				on:click={async () => {
@@ -324,7 +323,7 @@
 			{#if scrollToTop}
 				<button
 					draggable="false"
-					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-xl select-none w-full"
+					class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					on:click={() => {
 						scrollToTop();
 					}}
@@ -335,7 +334,7 @@
 						viewBox="0 0 24 24"
 						stroke-width="1.5"
 						stroke="currentColor"
-						class="size-4"
+						class="size-3.5"
 					>
 						<path
 							stroke-linecap="round"
@@ -346,13 +345,13 @@
 					<div class="flex items-center">{$i18n.t('Scroll to Top')}</div>
 				</button>

-				<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
+				<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />
 			{/if}

 			{#if ($artifactContents ?? []).length > 0}
 				<button
 					draggable="false"
-					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-xl select-none w-full"
+					class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					id="chat-artifacts-button"
 					on:click={async () => {
 						await showControls.set(true);
@@ -360,42 +359,42 @@
 						await showEmbeds.set(false);
 					}}
 				>
-					<Cube className=" size-4" strokeWidth="1.5" />
+					<Cube className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Artifacts')}</div>
 				</button>

-				<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
+				<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />
 			{/if}

 			{#if !readOnly && !$temporaryChatEnabled && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))}
 				<button
 					draggable="false"
-					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-xl select-none w-full"
+					class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					id="chat-share-button"
 					on:click={() => {
 						shareHandler();
 					}}
 				>
-					<Share strokeWidth="1.5" />
+					<Share className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Share')}</div>
 				</button>
 			{/if}

 			{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
-				<DropdownSub>
+				<DropdownSub contentClass="select-none z-50">
 					<button
 						slot="trigger"
 						draggable="false"
-						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-xl select-none w-full"
+						class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					>
-						<Download strokeWidth="1.5" />
+						<Download className="size-3.5" strokeWidth="1.5" />

 						<div class="flex items-center">{$i18n.t('Download')}</div>
 					</button>

 					<button
 						draggable="false"
-						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-xl select-none w-full"
+						class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 						on:click={() => {
 							downloadJSONExport();
 						}}
@@ -405,7 +404,7 @@

 					<button
 						draggable="false"
-						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-xl select-none w-full"
+						class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 						on:click={() => {
 							downloadTxt();
 						}}
@@ -415,7 +414,7 @@

 					<button
 						draggable="false"
-						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-xl select-none w-full"
+						class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 						on:click={() => {
 							downloadPdf();
 						}}
@@ -427,7 +426,7 @@

 			<button
 				draggable="false"
-				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-xl select-none w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				id="chat-copy-button"
 				on:click={async () => {
 					const res = await copyToClipboard(await getChatAsText()).catch((e) => {
@@ -439,21 +438,21 @@
 					}
 				}}
 			>
-				<Clipboard className=" size-4" strokeWidth="1.5" />
+				<Clipboard className="size-3.5" strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Copy')}</div>
 			</button>

 			{#if !readOnly && !$temporaryChatEnabled && chat?.id}
-				<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
+				<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />

 				{#if $folders.length > 0}
-					<DropdownSub maxWidth={200}>
+					<DropdownSub contentClass="select-none z-50" maxWidth={200}>
 						<button
 							slot="trigger"
 							draggable="false"
-							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-xl select-none w-full"
+							class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 						>
-							<Folder strokeWidth="1.5" />
+							<Folder className="size-3.5" strokeWidth="1.5" />

 							<div class="flex items-center">{$i18n.t('Move')}</div>
 						</button>
@@ -461,13 +460,13 @@
 							{#if folder?.id}
 								<button
 									draggable="false"
-									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-xl overflow-hidden w-full"
+									class="flex h-[1.6875rem] w-full items-center gap-2 overflow-hidden rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 									on:click={() => {
 										moveChatHandler(chat.id, folder.id);
 									}}
 								>
 									<div class="shrink-0">
-										<Folder strokeWidth="1.5" />
+										<Folder className="size-3.5" strokeWidth="1.5" />
 									</div>

 									<div class="truncate">{folder.name ?? 'Folder'}</div>
@@ -479,32 +478,32 @@

 				<button
 					draggable="false"
-					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-xl select-none w-full"
+					class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					on:click={() => {
 						archiveChatHandler();
 					}}
 				>
-					<ArchiveBox className="size-4" strokeWidth="1.5" />
+					<ArchiveBox className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Archive')}</div>
 				</button>

 				<button
 					draggable="false"
-					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-xl select-none w-full"
+					class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer select-none hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					on:click={() => {
 						deleteChatHandler();
 					}}
 				>
-					<GarbageBin strokeWidth="1.5" />
+					<GarbageBin className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Delete')}</div>
 				</button>

-				<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
+				<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />

-				<div class="flex p-1 max-h-28 overflow-y-auto">
+				<div class="flex max-h-28 overflow-y-auto px-2 py-1">
 					<Tags chatId={chat.id} />
 				</div>
 			{/if}
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -5,6 +5,7 @@
 	const { saveAs } = fileSaver;

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import DropdownSub from '$lib/components/common/DropdownSub.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
@@ -299,38 +300,34 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="select-none 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 transition"
-		>
+		<DropdownMenu className="select-none min-w-[200px] transition">
 			{#if $user?.role === 'admin' || ($user.permissions?.chat?.share ?? true)}
 				<button
 					draggable="false"
-					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-xl w-full"
+					class="flex 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 w-full"
 					on:click={() => {
 						shareHandler();
 					}}
 				>
-					<Share strokeWidth="1.5" />
+					<Share className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Share')}</div>
 				</button>
 			{/if}

 			{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
-				<DropdownSub
-					contentClass="select-none rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
-				>
+				<DropdownSub contentClass="select-none z-50">
 					<button
 						slot="trigger"
 						draggable="false"
-						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-xl w-full"
+						class="flex 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 w-full"
 					>
-						<Download strokeWidth="1.5" />
+						<Download className="size-3.5" strokeWidth="1.5" />
 						<div class="flex items-center">{$i18n.t('Download')}</div>
 					</button>

 					<button
 						draggable="false"
-						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-xl w-full"
+						class="flex 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 w-full"
 						on:click={() => {
 							downloadJSONExport();
 						}}
@@ -340,7 +337,7 @@

 					<button
 						draggable="false"
-						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-xl w-full"
+						class="flex 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 w-full"
 						on:click={() => {
 							downloadTxt();
 						}}
@@ -350,7 +347,7 @@

 					<button
 						draggable="false"
-						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-xl select-none w-full"
+						class="flex 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 select-none w-full"
 						on:click={() => {
 							downloadPdf();
 						}}
@@ -362,31 +359,31 @@

 			<button
 				draggable="false"
-				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-xl w-full"
+				class="flex 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 w-full"
 				on:click={() => {
 					show = false;
 					renameHandler();
 				}}
 			>
-				<Pencil strokeWidth="1.5" />
+				<Pencil className="size-3.5" strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Rename')}</div>
 			</button>

-			<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
+			<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />

 			<button
 				draggable="false"
-				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-xl w-full"
+				class="flex 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 w-full"
 				on:click={() => {
 					show = false;
 					pinHandler();
 				}}
 			>
 				{#if pinned}
-					<BookmarkSlash strokeWidth="1.5" />
+					<BookmarkSlash className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Unpin')}</div>
 				{:else}
-					<Bookmark strokeWidth="1.5" />
+					<Bookmark className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Pin')}</div>
 				{/if}
 			</button>
@@ -394,40 +391,38 @@
 			{#if $user?.role === 'admin' || ($user?.permissions?.chat?.import ?? true)}
 				<button
 					draggable="false"
-					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-xl w-full"
+					class="flex 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 w-full"
 					on:click={() => {
 						show = false;
 						cloneChatHandler();
 					}}
 				>
-					<DocumentDuplicate strokeWidth="1.5" />
+					<DocumentDuplicate className="size-3.5" strokeWidth="1.5" />
 					<div class="flex items-center">{$i18n.t('Clone')}</div>
 				</button>
 			{/if}

 			{#if chatId && $folders.length > 0}
-				<DropdownSub
-					contentClass="select-none rounded-2xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white border border-gray-100 dark:border-gray-800 shadow-lg max-h-52 overflow-y-auto scrollbar-hidden"
-				>
+				<DropdownSub contentClass="select-none z-50 max-h-52 overflow-y-auto scrollbar-hidden">
 					<button
 						slot="trigger"
 						draggable="false"
-						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-xl select-none w-full"
+						class="flex 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 select-none w-full"
 					>
-						<Folder />
+						<Folder className="size-3.5" />
 						<div class="flex items-center">{$i18n.t('Move')}</div>
 					</button>

 					{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
 						<button
 							draggable="false"
-							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-xl overflow-hidden w-full"
+							class="flex 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 overflow-hidden w-full"
 							on:click={() => {
 								moveChatHandler(chatId, folder.id);
 							}}
 						>
 							<div class="shrink-0">
-								<Folder />
+								<Folder className="size-3.5" />
 							</div>

 							<div class="truncate">{folder?.name ?? 'Folder'}</div>
@@ -438,25 +433,25 @@

 			<button
 				draggable="false"
-				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-xl w-full"
+				class="flex 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 w-full"
 				on:click={() => {
 					archiveChatHandler();
 				}}
 			>
-				<ArchiveBox strokeWidth="1.5" />
+				<ArchiveBox className="size-3.5" strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Archive')}</div>
 			</button>

 			<button
 				draggable="false"
-				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-xl w-full"
+				class="flex 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 w-full"
 				on:click={() => {
 					deleteHandler();
 				}}
 			>
-				<GarbageBin strokeWidth="1.5" />
+				<GarbageBin className="size-3.5" strokeWidth="1.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -5,6 +5,7 @@
 	const dispatch = createEventDispatcher();

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -42,43 +43,41 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[170px] 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-[170px]">
 			<button
-				class="flex gap-2 items-center px-3 py-1.5 text-sm select-none cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] select-none cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					onCreateSubFolder();
 				}}
 			>
-				<Folder />
+				<Folder className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Create Folder')}</div>
 			</button>

-			<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
+			<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />

 			<button
-				class="flex gap-2 items-center px-3 py-1.5 text-sm select-none cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] select-none cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					onEdit();
 				}}
 			>
-				<Pencil />
+				<Pencil className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Edit')}</div>
 			</button>

 			<button
-				class="flex gap-2 items-center px-3 py-1.5 text-sm select-none cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] select-none cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					onExport();
 				}}
 			>
-				<Download />
+				<Download className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Export')}</div>
 			</button>

 			<button
-				class="flex gap-2 items-center px-3 py-1.5 text-sm select-none cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] select-none cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					onShare();
 				}}
@@ -89,7 +88,7 @@
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
-					class="size-4"
+					class="size-3.5"
 				>
 					<path
 						stroke-linecap="round"
@@ -100,17 +99,17 @@
 				<div class="flex items-center">{$i18n.t('Share')}</div>
 			</button>

-			<hr class="border-gray-50/30 dark:border-gray-800/30 my-1" />
+			<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />

 			<button
-				class="flex gap-2 items-center px-3 py-1.5 text-sm select-none cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] select-none cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					onDelete();
 				}}
 			>
-				<GarbageBin />
+				<GarbageBin className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -75,9 +75,12 @@
 				bind:accessGrants
 				onChange={handleAccessChange}
 				accessRoles={['read', 'write']}
+				defaultPermission="write"
 				share={$user?.role === 'admin' || $user?.permissions?.sharing?.folders}
 				sharePublic={false}
 				shareUsers={$user?.role === 'admin' || $user?.permissions?.access_grants?.allow_users}
+				allowGroups={$user?.role === 'admin' ||
+					($user?.permissions?.access_grants?.allow_groups ?? true)}
 			/>
 		</div>
 	</div>
@@ -20,6 +20,7 @@
 	import { WEBUI_API_BASE_URL } from '$lib/constants';

 	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 ArchiveBox from '$lib/components/icons/ArchiveBox.svelte';
 	import QuestionMarkCircle from '$lib/components/icons/QuestionMarkCircle.svelte';
@@ -121,14 +122,12 @@
 	<slot />

 	<div slot="content">
-		<div
-			class="{className} user-menu rounded-xl p-0.5 border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg text-[13px]"
-		>
+		<DropdownMenu className="{className} text-[13px]">
 			{#if profile}
 				{#if $user?.status_emoji || $user?.status_message}
 					<div class="user-menu-status">
 						<button
-							class="w-full gap-2 hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none text-[13px] flex items-center"
+							class="w-full h-[1.6875rem] gap-2 rounded-xl px-2 hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none text-[13px] flex items-center"
 							type="button"
 							on:click={() => {
 								show = false;
@@ -137,7 +136,7 @@
 						>
 							{#if $user?.status_emoji}
 								<div class=" self-center shrink-0">
-									<Emoji className="size-4" shortCode={$user?.status_emoji} />
+									<Emoji className="size-3.5" shortCode={$user?.status_emoji} />
 								</div>
 							{/if}

@@ -171,7 +170,7 @@
 											}
 										}}
 									>
-										<XMark className="size-4 opacity-50" strokeWidth="2" />
+										<XMark className="size-3.5 opacity-50" strokeWidth="2" />
 									</button>
 								</Tooltip>
 							</div>
@@ -180,7 +179,7 @@
 				{:else}
 					<div class="user-menu-status">
 						<button
-							class="w-full gap-1 hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none text-[13px] flex items-center justify-center"
+							class="w-full h-[1.6875rem] gap-1 rounded-xl px-2 hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none text-[13px] flex items-center justify-center"
 							type="button"
 							on:click={() => {
 								show = false;
@@ -188,18 +187,18 @@
 							}}
 						>
 							<div class=" self-center">
-								<FaceSmile className="size-4" strokeWidth="1.5" />
+								<FaceSmile className="size-3.5" strokeWidth="1.5" />
 							</div>
 							<div class=" self-center truncate">{$i18n.t('Update your status')}</div>
 						</button>
 					</div>
 				{/if}

-				<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1.5 p-0" />
+				<hr class="border-gray-50/30 dark:border-gray-800/30 my-0.5 mx-1 p-0" />
 			{/if}

 			<button
-				class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+				class="flex h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 				type="button"
 				on:click={async () => {
 					show = false;
@@ -212,8 +211,8 @@
 					}
 				}}
 			>
-				<div class=" self-center mr-3">
-					<Settings className="w-5 h-5" strokeWidth="1.5" />
+				<div class="self-center">
+					<Settings className="size-3.5" strokeWidth="1.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Settings')}</div>
 			</button>
@@ -222,7 +221,7 @@
 				<a
 					href="/admin"
 					draggable="false"
-					class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+					class="flex h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 					on:click={async (e) => {
 						if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) {
 							return;
@@ -236,15 +235,15 @@
 						}
 					}}
 				>
-					<div class=" self-center mr-3">
-						<UserGroup className="w-5 h-5" strokeWidth="1.5" />
+					<div class="self-center">
+						<UserGroup className="size-3.5" strokeWidth="1.5" />
 					</div>
 					<div class=" self-center truncate">{$i18n.t('Admin Panel')}</div>
 				</a>
 			{/if}

 			<button
-				class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+				class="flex h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 				type="button"
 				on:click={async () => {
 					show = false;
@@ -258,20 +257,20 @@
 					}
 				}}
 			>
-				<div class=" self-center mr-3">
-					<ArchiveBox className="size-5" strokeWidth="1.5" />
+				<div class="self-center">
+					<ArchiveBox className="size-3.5" strokeWidth="1.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Archived Chats')}</div>
 			</button>

-			<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1 p-0" />
+			<hr class="border-gray-50/30 dark:border-gray-800/30 my-0.5 mx-1 p-0" />

 			{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models || $user?.permissions?.workspace?.knowledge || $user?.permissions?.workspace?.prompts || $user?.permissions?.workspace?.tools || $user?.permissions?.workspace?.skills}
 				<div class="flex items-center w-full">
 					<a
 						href="/workspace"
 						draggable="false"
-						class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+						class="flex flex-1 h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 						on:click={async (e) => {
 							if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
 							e.preventDefault();
@@ -283,14 +282,14 @@
 							}
 						}}
 					>
-						<div class="self-center mr-3">
+						<div class="self-center">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
 								viewBox="0 0 24 24"
 								stroke-width="1.5"
 								stroke="currentColor"
-								class="size-5"
+								class="size-3.5"
 							>
 								<path
 									stroke-linecap="round"
@@ -328,7 +327,7 @@
 					<a
 						href="/notes"
 						draggable="false"
-						class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+						class="flex flex-1 h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 						on:click={async (e) => {
 							if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
 							e.preventDefault();
@@ -340,8 +339,8 @@
 							}
 						}}
 					>
-						<div class="self-center mr-3">
-							<Note className="size-5" strokeWidth="1.5" />
+						<div class="self-center">
+							<Note className="size-3.5" strokeWidth="1.5" />
 						</div>
 						<div class="self-center truncate">{$i18n.t('Notes')}</div>
 					</a>
@@ -372,7 +371,7 @@
 					<a
 						href="/calendar"
 						draggable="false"
-						class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+						class="flex flex-1 h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 						on:click={async (e) => {
 							if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
 							e.preventDefault();
@@ -380,14 +379,14 @@
 							goto('/calendar');
 						}}
 					>
-						<div class="self-center mr-3">
+						<div class="self-center">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
 								viewBox="0 0 24 24"
 								stroke-width="1.5"
 								stroke="currentColor"
-								class="size-5"
+								class="size-3.5"
 							>
 								<path
 									stroke-linecap="round"
@@ -425,7 +424,7 @@
 					<a
 						href="/automations"
 						draggable="false"
-						class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+						class="flex flex-1 h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 						on:click={async (e) => {
 							if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
 							e.preventDefault();
@@ -437,14 +436,14 @@
 							}
 						}}
 					>
-						<div class="self-center mr-3">
+						<div class="self-center">
 							<svg
 								xmlns="http://www.w3.org/2000/svg"
 								fill="none"
 								viewBox="0 0 24 24"
 								stroke-width="1.5"
 								stroke="currentColor"
-								class="size-5"
+								class="size-3.5"
 							>
 								<path
 									stroke-linecap="round"
@@ -482,7 +481,7 @@
 					<a
 						href="/playground"
 						draggable="false"
-						class="flex flex-1 rounded-xl py-1.5 px-3 hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+						class="flex flex-1 h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 						on:click={async (e) => {
 							if (e.metaKey || e.ctrlKey || e.shiftKey || e.button === 1) return;
 							e.preventDefault();
@@ -494,8 +493,8 @@
 							}
 						}}
 					>
-						<div class="self-center mr-3">
-							<Code className="size-5" strokeWidth="1.5" />
+						<div class="self-center">
+							<Code className="size-3.5" strokeWidth="1.5" />
 						</div>
 						<div class="self-center truncate">{$i18n.t('Playground')}</div>
 					</a>
@@ -522,7 +521,7 @@
 			{/if}

 			{#if help}
-				<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1 p-0" />
+				<hr class="border-gray-50/30 dark:border-gray-800/30 my-0.5 mx-1 p-0" />

 				<!-- {$i18n.t('Help')} -->

@@ -531,14 +530,14 @@
 						href="https://docs.openwebui.com"
 						target="_blank"
 						draggable="false"
-						class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+						class="flex h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 						id="chat-share-button"
 						on:click={() => {
 							show = false;
 						}}
 					>
-						<div class=" self-center mr-3">
-							<QuestionMarkCircle className="size-5" />
+						<div class="self-center">
+							<QuestionMarkCircle className="size-3.5" />
 						</div>
 						<div class=" self-center truncate">{$i18n.t('Documentation')}</div>
 					</a>
@@ -548,21 +547,21 @@
 						href="https://github.com/open-webui/open-webui/releases"
 						target="_blank"
 						draggable="false"
-						class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+						class="flex h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 						id="chat-share-button"
 						on:click={() => {
 							show = false;
 						}}
 					>
-						<div class=" self-center mr-3">
-							<Map className="size-5" />
+						<div class="self-center">
+							<Map className="size-3.5" />
 						</div>
 						<div class=" self-center truncate">{$i18n.t('Releases')}</div>
 					</a>
 				{/if}

 				<button
-					class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+					class="flex h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 					type="button"
 					id="chat-share-button"
 					on:click={async () => {
@@ -575,17 +574,17 @@
 						}
 					}}
 				>
-					<div class=" self-center mr-3">
-						<Keyboard className="size-5" />
+					<div class="self-center">
+						<Keyboard className="size-3.5" />
 					</div>
 					<div class=" self-center truncate">{$i18n.t('Keyboard Shortcuts')}</div>
 				</button>
 			{/if}

-			<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1 p-0" />
+			<hr class="border-gray-50/30 dark:border-gray-800/30 my-0.5 mx-1 p-0" />

 			<button
-				class="flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
+				class="flex h-[1.6875rem] items-center gap-2 rounded-xl px-2 text-[13px] w-full hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition cursor-pointer select-none"
 				type="button"
 				on:click={async () => {
 					const res = await userSignOut();
@@ -596,15 +595,15 @@
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-3">
-					<SignOut className="w-5 h-5" strokeWidth="1.5" />
+				<div class="self-center">
+					<SignOut className="size-3.5" strokeWidth="1.5" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Sign Out')}</div>
 			</button>

 			{#if showActiveUsers && ($config?.features?.enable_public_active_users_count || role === 'admin') && usage}
 				{#if usage?.user_count}
-					<hr class=" border-gray-50/30 dark:border-gray-800/30 my-1 p-0" />
+					<hr class="border-gray-50/30 dark:border-gray-800/30 my-0.5 mx-1 p-0" />

 					<Tooltip
 						content={usage?.model_ids && usage?.model_ids.length > 0
@@ -637,37 +636,6 @@
 					</Tooltip>
 				{/if}
 			{/if}
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
-
-<style>
-	.user-menu > button,
-	.user-menu > a,
-	.user-menu > div > a {
-		height: 1.6875rem;
-		padding: 0 0.5rem;
-		border-radius: 0.75rem;
-	}
-
-	.user-menu > button > div:first-child,
-	.user-menu > a > div:first-child,
-	.user-menu > div > a > div:first-child {
-		margin-right: 0.5rem;
-	}
-
-	.user-menu > .user-menu-status > button {
-		height: 1.6875rem;
-		padding: 0 0.5rem;
-		border-radius: 0.75rem;
-	}
-
-	.user-menu > hr {
-		margin: 0.125rem 0.25rem;
-	}
-
-	.user-menu :global(svg) {
-		width: 0.875rem;
-		height: 0.875rem;
-	}
-</style>
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Sparkles from '../icons/Sparkles.svelte';
 	import ChatBubbleOval from '../icons/ChatBubbleOval.svelte';

@@ -27,9 +28,7 @@
 	<slot />

 	<div slot="content">
-		<div
-			class="min-w-[170px] text-sm rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
-		>
+		<DropdownMenu className="min-w-[170px] font-primary">
 			<button
 				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 				on:click={async () => {
@@ -55,6 +54,6 @@
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Chat')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import DropdownSub from '$lib/components/common/DropdownSub.svelte';
 	import Download from '$lib/components/icons/Download.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
@@ -38,9 +39,7 @@
 	<slot />

 	<div slot="content">
-		<div
-			class="min-w-[180px] text-sm 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-[180px]">
 			<DropdownSub>
 				<button
 					slot="trigger"
@@ -141,6 +140,6 @@
 				<GarbageBin />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -2,6 +2,7 @@
 	import { createEventDispatcher, getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Mic from '../icons/Mic.svelte';
 	import CursorArrowRays from '../icons/CursorArrowRays.svelte';
 	import CloudArrowUp from '../icons/CloudArrowUp.svelte';
@@ -28,9 +29,7 @@
 	<slot />

 	<div slot="content">
-		<div
-			class="min-w-[170px] text-sm rounded-xl p-1 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg font-primary"
-		>
+		<DropdownMenu className="min-w-[170px] font-primary">
 			<button
 				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
 				on:click={async () => {
@@ -69,6 +68,6 @@
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Upload Audio')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -3,6 +3,7 @@
 	const dispatch = createEventDispatcher();

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Download from '$lib/components/icons/Download.svelte';
@@ -42,9 +43,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[170px] 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-[170px]">
 			{#if onExport}
 				<button
 					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
@@ -66,6 +65,6 @@
 				<GarbageBin />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -71,6 +71,7 @@
 	import FilesOverlay from '$lib/components/chat/MessageInput/FilesOverlay.svelte';
 	import DropdownOptions from '$lib/components/common/DropdownOptions.svelte';
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import Checkbox from '$lib/components/common/Checkbox.svelte';
 	import AdjustmentsHorizontal from '$lib/components/icons/AdjustmentsHorizontal.svelte';
 	import Pagination from '$lib/components/common/Pagination.svelte';
@@ -1416,9 +1417,7 @@
 							</button>

 							<div slot="content">
-								<div
-									class="min-w-[180px] 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-[180px]">
 									<button
 										class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 										type="button"
@@ -1434,7 +1433,7 @@
 										/>
 										{$i18n.t('File content')}
 									</button>
-								</div>
+								</DropdownMenu>
 							</div>
 						</Dropdown>

@@ -3,6 +3,7 @@
 	const dispatch = createEventDispatcher();

 	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 ArrowUpCircle from '$lib/components/icons/ArrowUpCircle.svelte';
 	import BarsArrowUp from '$lib/components/icons/BarsArrowUp.svelte';
@@ -55,9 +56,7 @@
 	</Tooltip>

 	<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 transition"
-		>
+		<DropdownMenu className="min-w-[200px] transition">
 			<button
 				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
 				on:click={() => {
@@ -140,6 +139,6 @@
 				<ArrowUturnLeft strokeWidth="2" />
 				<div class="flex items-center">{$i18n.t('Reset')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -11,6 +11,7 @@

 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Folder from '$lib/components/icons/Folder.svelte';
@@ -171,9 +172,7 @@
 				</button>

 				<div slot="content">
-					<div
-						class="min-w-[140px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
-					>
+					<DropdownMenu className="min-w-[140px] z-[9999999]">
 						<button
 							type="button"
 							class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
@@ -190,7 +189,7 @@
 							<GarbageBin className="size-3.5" />
 							{$i18n.t('Delete')}
 						</button>
-					</div>
+					</DropdownMenu>
 				</div>
 			</Dropdown>
 		</div>
@@ -15,6 +15,7 @@

 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import DocumentPage from '$lib/components/icons/DocumentPage.svelte';
 	import EllipsisHorizontal from '$lib/components/icons/EllipsisHorizontal.svelte';
 	import Download from '$lib/components/icons/Download.svelte';
@@ -184,9 +185,7 @@
 						</button>

 						<div slot="content">
-							<div
-								class="min-w-[140px] rounded-2xl p-1 z-[9999999] bg-white dark:bg-gray-850 dark:text-white shadow-lg border border-gray-100 dark:border-gray-800"
-							>
+							<DropdownMenu className="min-w-[140px] z-[9999999]">
 								<button
 									type="button"
 									class="select-none flex rounded-xl py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition items-center gap-2 text-sm"
@@ -218,7 +217,7 @@
 									<GarbageBin className="size-3.5" />
 									{$i18n.t('Delete')}
 								</button>
-							</div>
+							</DropdownMenu>
 						</div>
 					</Dropdown>
 				</div>
@@ -45,6 +45,7 @@
 	import Eye from '../icons/Eye.svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import ViewSelector from './common/ViewSelector.svelte';
 	import TagSelector from './common/TagSelector.svelte';
 	import Pagination from '../common/Pagination.svelte';
@@ -565,9 +566,7 @@
 				</Tooltip>

 				<div slot="content">
-					<div
-						class="w-[170px] rounded-xl p-1 border border-gray-100 dark:border-gray-800 z-50 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"
@@ -613,7 +612,7 @@
 							<EyeSlash className="size-4" />
 							<div class="flex items-center">{$i18n.t('Hide All')}</div>
 						</button>
-					</div>
+					</DropdownMenu>
 				</div>
 			</Dropdown>
 		</div>
@@ -119,7 +119,7 @@

 	<div slot="content">
 		<div
-			class="z-[10000] text-black dark:text-white rounded-2xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-64 p-1"
+			class="z-[10000] text-black dark:text-white rounded-xl shadow-lg border border-gray-200 dark:border-gray-800 flex flex-col bg-white dark:bg-gray-850 w-64 p-0.5"
 		>
 			<div class=" flex w-full space-x-1.5 px-1.5 pb-0.5">
 				<div class="flex flex-1">
@@ -127,7 +127,7 @@
 						<Search className="size-3.5" />
 					</div>
 					<input
-						class=" w-full text-sm py-0.5 outline-hidden bg-transparent"
+						class="w-full text-[13px] py-0.5 outline-hidden bg-transparent"
 						bind:value={query}
 						on:input={handleSearchInput}
 						placeholder={$i18n.t('Search')}
@@ -143,7 +143,7 @@
 				{:else}
 					{#each items as item, i}
 						{#if i === 0 || item?.type !== items[i - 1]?.type}
-							<div class="px-1.5 text-xs text-gray-500 py-0.5">
+							<div class="px-1.5 text-[11px] text-gray-500 py-0.5">
 								{#if item?.type === 'note'}
 									{$i18n.t('Notes')}
 								{:else if item?.type === 'collection'}
@@ -155,7 +155,7 @@
 						{/if}

 						<div
-							class=" px-1.5 py-0.5 rounded-xl w-full text-left flex justify-between items-center text-sm hover:bg-gray-50 hover:dark:bg-gray-800 hover:dark:text-gray-100 selected-command-option-button"
+							class="h-[1.6875rem] px-2 rounded-xl w-full text-left flex justify-between items-center text-[13px] hover:bg-gray-50/60 hover:dark:bg-gray-800/60 hover:dark:text-gray-100 selected-command-option-button"
 						>
 							<button
 								class="w-full flex-1"
@@ -172,7 +172,7 @@
 											placement="top"
 											tippyOptions={{ zIndex: 100000 }}
 										>
-											<PageEdit className="size-4" />
+											<PageEdit className="size-3.5" />
 										</Tooltip>
 									{:else if item.type === 'collection'}
 										<Tooltip
@@ -180,7 +180,7 @@
 											placement="top"
 											tippyOptions={{ zIndex: 100000 }}
 										>
-											<Database className="size-4" />
+											<Database className="size-3.5" />
 										</Tooltip>
 									{:else if item.type === 'file'}
 										<Tooltip
@@ -188,7 +188,7 @@
 											placement="top"
 											tippyOptions={{ zIndex: 100000 }}
 										>
-											<DocumentPage className="size-4" />
+											<DocumentPage className="size-3.5" />
 										</Tooltip>
 									{/if}

@@ -197,7 +197,7 @@
 										placement="top-start"
 										tippyOptions={{ zIndex: 100000 }}
 									>
-										<div class="line-clamp-1 flex-1 text-sm text-left">
+										<div class="line-clamp-1 flex-1 text-[13px] text-left">
 											{decodeString(item?.name)}
 										</div>
 									</Tooltip>
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -58,9 +59,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[170px] rounded-2xl p-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-[170px]">
 			{#if writeAccess}
 				<button
 					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
@@ -214,6 +213,6 @@
 					<div class="flex items-center">{$i18n.t('Delete')}</div>
 				</button>
 			{/if}
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -49,9 +50,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[170px] rounded-2xl p-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-[170px]">
 			{#if isProduction}
 				<Tooltip content={$i18n.t('Cannot delete the production version')} placement="top">
 					<div
@@ -73,6 +72,6 @@
 					<div class="flex items-center">{$i18n.t('Delete')}</div>
 				</button>
 			{/if}
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -3,6 +3,7 @@
 	import { config, user } from '$lib/stores';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Share from '$lib/components/icons/Share.svelte';
@@ -34,11 +35,9 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[170px] 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-[170px]">
 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					editHandler();
@@ -50,7 +49,7 @@
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
-					class="w-4 h-4"
+					class="size-3.5"
 				>
 					<path
 						stroke-linecap="round"
@@ -64,53 +63,53 @@

 			{#if $config.features.enable_community_sharing}
 				<button
-					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+					class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					draggable="false"
 					on:click={() => {
 						shareHandler();
 					}}
 				>
-					<Share />
+					<Share className="size-3.5" />
 					<div class="flex items-center">{$i18n.t('Share')}</div>
 				</button>
 			{/if}

 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					cloneHandler();
 				}}
 			>
-				<DocumentDuplicate />
+				<DocumentDuplicate className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Clone')}</div>
 			</button>

 			{#if $user?.role === 'admin' || $user?.permissions?.workspace?.prompts_export}
 				<button
-					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+					class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					draggable="false"
 					on:click={() => {
 						exportHandler();
 					}}
 				>
-					<Download />
+					<Download className="size-3.5" />
 					<div class="flex items-center">{$i18n.t('Export')}</div>
 				</button>
 			{/if}

-			<hr class="border-gray-50 dark:border-gray-850/30 my-1" />
+			<hr class="border-gray-50 dark:border-gray-850/30 mx-1 my-0.5" />

 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					deleteHandler();
 				}}
 			>
-				<GarbageBin />
+				<GarbageBin className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import DocumentDuplicate from '$lib/components/icons/DocumentDuplicate.svelte';
@@ -32,11 +33,9 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[170px] 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-[170px]">
 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					editHandler();
 				}}
@@ -47,7 +46,7 @@
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
-					class="w-4 h-4"
+					class="size-3.5"
 				>
 					<path
 						stroke-linecap="round"
@@ -60,38 +59,38 @@
 			</button>

 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					cloneHandler();
 				}}
 			>
-				<DocumentDuplicate />
+				<DocumentDuplicate className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Clone')}</div>
 			</button>

 			{#if $user?.role === 'admin' || $user?.permissions?.workspace?.skills_export}
 				<button
-					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+					class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					on:click={() => {
 						exportHandler();
 					}}
 				>
-					<Download />
+					<Download className="size-3.5" />
 					<div class="flex items-center">{$i18n.t('Export')}</div>
 				</button>
 			{/if}

-			<hr class="border-gray-50 dark:border-gray-850/30 my-1" />
+			<hr class="border-gray-50 dark:border-gray-850/30 mx-1 my-0.5" />

 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				on:click={() => {
 					deleteHandler();
 				}}
 			>
-				<GarbageBin />
+				<GarbageBin className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -2,6 +2,7 @@
 	import { getContext } from '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 Pencil from '$lib/components/icons/Pencil.svelte';
 	import Link from '$lib/components/icons/Link.svelte';
@@ -30,9 +31,7 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[190px] 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-[190px]">
 			<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-xl w-full"
 				on:click={async () => {
@@ -58,6 +57,6 @@
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Import From Link')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -2,6 +2,7 @@
 	import { getContext } from 'svelte';

 	import Dropdown from '$lib/components/common/Dropdown.svelte';
+	import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
 	import GarbageBin from '$lib/components/icons/GarbageBin.svelte';
 	import Pencil from '$lib/components/icons/Pencil.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -35,11 +36,9 @@
 	</Tooltip>

 	<div slot="content">
-		<div
-			class="min-w-[170px] 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-[170px]">
 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					editHandler();
@@ -51,7 +50,7 @@
 					viewBox="0 0 24 24"
 					stroke-width="1.5"
 					stroke="currentColor"
-					class="w-4 h-4"
+					class="size-3.5"
 				>
 					<path
 						stroke-linecap="round"
@@ -65,55 +64,55 @@

 			{#if $config.features.enable_community_sharing}
 				<button
-					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+					class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					draggable="false"
 					on:click={() => {
 						shareHandler();
 					}}
 				>
-					<Share />
+					<Share className="size-3.5" />
 					<div class="flex items-center">{$i18n.t('Share')}</div>
 				</button>
 			{/if}

 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					cloneHandler();
 				}}
 			>
-				<DocumentDuplicate />
+				<DocumentDuplicate className="size-3.5" />

 				<div class="flex items-center">{$i18n.t('Clone')}</div>
 			</button>

 			{#if $user?.role === 'admin' || $user?.permissions?.workspace?.tools_export}
 				<button
-					class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+					class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 					draggable="false"
 					on:click={() => {
 						exportHandler();
 					}}
 				>
-					<Download />
+					<Download className="size-3.5" />

 					<div class="flex items-center">{$i18n.t('Export')}</div>
 				</button>
 			{/if}

-			<hr class="border-gray-50 dark:border-gray-850/30 my-1" />
+			<hr class="border-gray-50 dark:border-gray-850/30 mx-1 my-0.5" />

 			<button
-				class="select-none flex gap-2 items-center px-3 py-1.5 text-sm cursor-pointer hover:bg-gray-50 dark:hover:bg-gray-800 rounded-xl w-full"
+				class="select-none flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] cursor-pointer hover:bg-gray-50/60 dark:hover:bg-gray-800/60"
 				draggable="false"
 				on:click={() => {
 					deleteHandler();
 				}}
 			>
-				<GarbageBin />
+				<GarbageBin className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
-		</div>
+		</DropdownMenu>
 	</div>
 </Dropdown>
@@ -8,6 +8,8 @@

 	export let show = false;
 	export let shareUsers = true;
+	export let allowGroups = true;
+	export let accessGrants: { principal_type: string; principal_id: string }[] = [];
 	export let onAdd = (payload: { userIds: string[]; groupIds: string[] }) => {};

 	let userIds: string[] = [];
@@ -55,9 +57,10 @@
 						<MemberSelector
 							bind:userIds
 							bind:groupIds
-							includeGroups={true}
+							includeGroups={allowGroups}
 							includeUsers={shareUsers}
-							includeSessionUser={true}
+							includeSessionUser={false}
+							{accessGrants}
 						/>
 					</div>

@@ -22,6 +22,7 @@
 	export let includeUsers = true;
 	export let pagination = false;
 	export let includeSessionUser = false;
+	export let accessGrants: { principal_type: string; principal_id: string }[] = [];

 	export let groupIds = [];
 	export let userIds = [];
@@ -247,7 +248,7 @@

 							<div>
 								{#each users as user, userIdx (user.id)}
-									{#if includeSessionUser || user?.id !== $_user?.id}
+									{#if !accessGrants.some((grant) => grant.principal_type === 'user' && grant.principal_id === user.id) && (includeSessionUser || user?.id !== $_user?.id)}
 										<button
 											class=" dark:border-gray-850 text-xs flex items-center justify-between w-full"
 											type="button"