From 5ab0ea8b8c241719b0960a7f7b0f3be2bbf8fb32 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Tue, 14 Jul 2026 00:50:44 -0400
Subject: [PATCH] refac

---
 src/lib/components/notes/AIMenu.svelte        | 12 +++----
 .../components/notes/Notes/NoteMenu.svelte    | 36 +++++++++----------
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/lib/components/notes/AIMenu.svelte b/src/lib/components/notes/AIMenu.svelte
index 46cab8094d..fdb3fcf823 100644
--- a/src/lib/components/notes/AIMenu.svelte
+++ b/src/lib/components/notes/AIMenu.svelte
@@ -30,27 +30,27 @@
 	<div slot="content">
 		<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"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition"
 				on:click={async () => {
 					onEdit();
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-2">
-					<Sparkles className="size-4" strokeWidth="2" />
+				<div class="self-center">
+					<Sparkles className="size-3.5" strokeWidth="2" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Enhance')}</div>
 			</button>
 
 			<button
-				class="flex rounded-md py-1.5 px-3 w-full hover:bg-gray-50 dark:hover:bg-gray-800 transition"
+				class="flex h-[1.6875rem] w-full items-center gap-2 rounded-xl px-2 text-[13px] hover:bg-gray-50/60 dark:hover:bg-gray-800/60 transition"
 				on:click={() => {
 					onChat();
 					show = false;
 				}}
 			>
-				<div class=" self-center mr-2">
-					<ChatBubbleOval className="size-4" strokeWidth="2" />
+				<div class="self-center">
+					<ChatBubbleOval className="size-3.5" strokeWidth="2" />
 				</div>
 				<div class=" self-center truncate">{$i18n.t('Chat')}</div>
 			</button>
diff --git a/src/lib/components/notes/Notes/NoteMenu.svelte b/src/lib/components/notes/Notes/NoteMenu.svelte
index 885bf0f56c..c0cafc4682 100644
--- a/src/lib/components/notes/Notes/NoteMenu.svelte
+++ b/src/lib/components/notes/Notes/NoteMenu.svelte
@@ -40,17 +40,17 @@
 
 	<div slot="content">
 		<DropdownMenu className="min-w-[180px]">
-			<DropdownSub>
+			<DropdownSub contentClass="select-none z-50">
 				<button
 					slot="trigger"
-					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] 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"
 				>
-					<Download strokeWidth="2" />
+					<Download className="size-3.5" strokeWidth="2" />
 					<div class="flex items-center">{$i18n.t('Download')}</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"
 					on:click={() => {
 						onDownload('txt');
 					}}
@@ -59,7 +59,7 @@
 				</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={() => {
 						onDownload('md');
 					}}
@@ -68,7 +68,7 @@
 				</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={() => {
 						onDownload('pdf');
 					}}
@@ -78,35 +78,35 @@
 			</DropdownSub>
 
 			{#if onCopyLink || onCopyToClipboard}
-				<DropdownSub>
+				<DropdownSub contentClass="select-none z-50">
 					<button
 						slot="trigger"
-						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] 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"
 					>
-						<Share strokeWidth="2" />
+						<Share className="size-3.5" strokeWidth="2" />
 						<div class="flex items-center">{$i18n.t('Share')}</div>
 					</button>
 
 					{#if onCopyLink}
 						<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={() => {
 								onCopyLink();
 							}}
 						>
-							<Link />
+							<Link className="size-3.5" />
 							<div class="flex items-center">{$i18n.t('Copy link')}</div>
 						</button>
 					{/if}
 
 					{#if onCopyToClipboard}
 						<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={() => {
 								onCopyToClipboard();
 							}}
 						>
-							<DocumentDuplicate strokeWidth="2" />
+							<DocumentDuplicate className="size-3.5" strokeWidth="2" />
 							<div class="flex items-center">{$i18n.t('Copy to clipboard')}</div>
 						</button>
 					{/if}
@@ -115,29 +115,29 @@
 
 			{#if onPin}
 				<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={() => {
 						onPin();
 						show = false;
 					}}
 				>
 					{#if isPinned}
-						<PinSlash />
+						<PinSlash className="size-3.5" />
 						<div class="flex items-center">{$i18n.t('Unpin')}</div>
 					{:else}
-						<Pin />
+						<Pin className="size-3.5" />
 						<div class="flex items-center">{$i18n.t('Pin to Sidebar')}</div>
 					{/if}
 				</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"
 				on:click={() => {
 					onDelete();
 				}}
 			>
-				<GarbageBin />
+				<GarbageBin className="size-3.5" />
 				<div class="flex items-center">{$i18n.t('Delete')}</div>
 			</button>
 		</DropdownMenu>