From cb83239a8aeb3f818290cba38b3f98fed8afcc2f Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 29 Oct 2026 05:26:40 +0900
Subject: [PATCH] refac

---
 .../components/layout/Sidebar/ChatItem.svelte |  21 +--
 .../components/layout/Sidebar/ChatMenu.svelte | 173 +++++++++---------
 2 files changed, 92 insertions(+), 102 deletions(-)

diff --git a/src/lib/components/layout/Sidebar/ChatItem.svelte b/src/lib/components/layout/Sidebar/ChatItem.svelte
index 0fec8835ed..a53a53323a 100644
--- a/src/lib/components/layout/Sidebar/ChatItem.svelte
+++ b/src/lib/components/layout/Sidebar/ChatItem.svelte
@@ -58,7 +58,6 @@
 	import ChatParticipants from '$lib/components/common/ChatParticipants.svelte';
 	import ChatIcon from './icons/Chat.svelte';
 	import MoreHorizontalIcon from './icons/MoreHorizontal.svelte';
-	import EditPencilIcon from './icons/EditPencil.svelte';
 	import SparklesIcon from './icons/Sparkles.svelte';
 	import ArchiveBoxIcon from '$lib/components/icons/ArchiveBox.svelte';
 	import GarbageBinIcon from '$lib/components/icons/GarbageBin.svelte';
@@ -773,7 +772,7 @@
 		</div>
 	{/if}
 
-	{#if (!readonly || canRename) && !selecting}
+	{#if (!readonly || (canRename && !confirmEdit)) && !selecting}
 		<div
 			id="sidebar-chat-item-menu"
 			class="{$mobile
@@ -784,20 +783,7 @@
 				? 'right-[0.5rem]'
 				: 'right-1'} inset-y-0 mr-1.5 flex items-center"
 		>
-			{#if readonly}
-				{#if !confirmEdit}
-					<Tooltip content={$i18n.t('Rename')} className="flex self-center z-10 items-end">
-						<button
-							type="button"
-							aria-label={$i18n.t('Rename')}
-							class="flex size-5 items-center justify-center self-center dark:hover:text-white transition"
-							on:click={renameHandler}
-						>
-							<EditPencilIcon className="size-3.5" strokeWidth="1.5" />
-						</button>
-					</Tooltip>
-				{/if}
-			{:else if confirmEdit}
+			{#if confirmEdit}
 				<div
 					class="flex self-center items-center space-x-1.5 z-10 translate-y-[0.5px] -translate-x-[0.5px]"
 				>
@@ -814,7 +800,7 @@
 						</button>
 					</Tooltip>
 				</div>
-			{:else if shiftKey && mouseOver && !chatSelection}
+			{:else if !readonly && shiftKey && mouseOver && !chatSelection}
 				<div class=" flex items-center self-center space-x-1.5">
 					{#if $visibleControls['chat.archive']}
 						<Tooltip content={$i18n.t('Archive')} className="flex items-center">
@@ -849,6 +835,7 @@
 			{:else}
 				<div class="flex self-center z-10 items-end">
 					<ChatMenu
+						{readonly}
 						chatId={id}
 						cloneChatHandler={() => {
 							cloneChatHandler(id);
diff --git a/src/lib/components/layout/Sidebar/ChatMenu.svelte b/src/lib/components/layout/Sidebar/ChatMenu.svelte
index b7ad379a6b..8709c494b5 100644
--- a/src/lib/components/layout/Sidebar/ChatMenu.svelte
+++ b/src/lib/components/layout/Sidebar/ChatMenu.svelte
@@ -44,6 +44,7 @@
 
 	export let chatId = '';
 	export let archived = false;
+	export let readonly = false;
 
 	let show = false;
 	let pinned = false;
@@ -305,7 +306,7 @@
 		}
 	};
 
-	$: if (show) {
+	$: if (show && !readonly) {
 		checkPinned();
 	}
 </script>
@@ -348,7 +349,7 @@
 
 	<div slot="content">
 		<DropdownMenu className="select-none min-w-[12.5rem] transition">
-			{#if $user?.role === 'admin' || ($user.permissions?.chat?.share ?? true)}
+			{#if !readonly && ($user?.role === 'admin' || ($user.permissions?.chat?.share ?? true))}
 				<button
 					role="menuitem"
 					draggable="false"
@@ -362,7 +363,7 @@
 				</button>
 			{/if}
 
-			{#if $user?.role === 'admin' || ($user.permissions?.chat?.export ?? true)}
+			{#if !readonly && ($user?.role === 'admin' || ($user.permissions?.chat?.export ?? true))}
 				<DropdownSub contentClass="select-none z-50">
 					<button
 						role="menuitem"
@@ -421,110 +422,112 @@
 				<div class="flex items-center">{$i18n.t('Rename')}</div>
 			</button>
 
-			<button
-				role="menuitem"
-				draggable="false"
-				class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 w-full"
-				on:click={() => {
-					markUnreadHandler();
-				}}
-			>
-				<ChatCheckIcon className="size-3.5" strokeWidth="1.5" />
-				<div class="flex items-center">{$i18n.t('Mark as unread')}</div>
-			</button>
-
-			<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />
-
-			<button
-				role="menuitem"
-				draggable="false"
-				class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 w-full"
-				on:click={() => {
-					pinHandler();
-				}}
-			>
-				{#if pinned}
-					<PinSlashIcon className="size-3.5" strokeWidth="1.5" />
-					<div class="flex items-center">{$i18n.t('Unpin')}</div>
-				{:else}
-					<PinIcon className="size-3.5" strokeWidth="1.5" />
-					<div class="flex items-center">{$i18n.t('Pin')}</div>
-				{/if}
-			</button>
-
-			{#if $user?.role === 'admin' || ($user?.permissions?.chat?.import ?? true)}
+			{#if !readonly}
 				<button
 					role="menuitem"
 					draggable="false"
 					class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 w-full"
 					on:click={() => {
-						cloneChatHandler();
+						markUnreadHandler();
 					}}
 				>
-					<CopyIcon className="size-3.5" strokeWidth="1.5" />
-					<div class="flex items-center">{$i18n.t('Clone')}</div>
+					<ChatCheckIcon className="size-3.5" strokeWidth="1.5" />
+					<div class="flex items-center">{$i18n.t('Mark as unread')}</div>
 				</button>
-			{/if}
 
-			{#if chatId && $folders.length > 0}
-				<DropdownSub contentClass="select-none z-50 max-h-52 overflow-y-auto scrollbar-hidden">
+				<hr class="border-gray-50/30 dark:border-gray-800/30 mx-1 my-0.5" />
+
+				<button
+					role="menuitem"
+					draggable="false"
+					class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 w-full"
+					on:click={() => {
+						pinHandler();
+					}}
+				>
+					{#if pinned}
+						<PinSlashIcon className="size-3.5" strokeWidth="1.5" />
+						<div class="flex items-center">{$i18n.t('Unpin')}</div>
+					{:else}
+						<PinIcon className="size-3.5" strokeWidth="1.5" />
+						<div class="flex items-center">{$i18n.t('Pin')}</div>
+					{/if}
+				</button>
+
+				{#if $user?.role === 'admin' || ($user?.permissions?.chat?.import ?? true)}
 					<button
 						role="menuitem"
-						slot="trigger"
 						draggable="false"
-						class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 select-none w-full"
+						class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 w-full"
+						on:click={() => {
+							cloneChatHandler();
+						}}
 					>
-						<FolderIcon className="size-3.5" />
-						<div class="flex items-center">{$i18n.t('Move')}</div>
+						<CopyIcon className="size-3.5" strokeWidth="1.5" />
+						<div class="flex items-center">{$i18n.t('Clone')}</div>
 					</button>
+				{/if}
 
-					{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
+				{#if chatId && $folders.length > 0}
+					<DropdownSub contentClass="select-none z-50 max-h-52 overflow-y-auto scrollbar-hidden">
 						<button
 							role="menuitem"
+							slot="trigger"
 							draggable="false"
-							class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 overflow-hidden w-full"
-							on:click={() => {
-								moveChatHandler(chatId, folder.id);
-							}}
+							class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 select-none w-full"
 						>
-							<div class="shrink-0">
-								<FolderIcon className="size-3.5" />
-							</div>
-
-							<div class="truncate">{folder?.name ?? 'Folder'}</div>
+							<FolderIcon className="size-3.5" />
+							<div class="flex items-center">{$i18n.t('Move')}</div>
 						</button>
-					{/each}
-				</DropdownSub>
-			{/if}
 
-			{#if $visibleControls['chat.archive']}
-				<button
-					role="menuitem"
-					draggable="false"
-					class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 w-full"
-					on:click={() => {
-						archiveChatHandler();
-					}}
-				>
-					<ArchiveBoxIcon className="size-3.5" strokeWidth="1.7" />
-					<div class="flex items-center">
-						{archived ? $i18n.t('Unarchive') : $i18n.t('Archive')}
-					</div>
-				</button>
-			{/if}
+						{#each $folders.sort((a, b) => b.updated_at - a.updated_at) as folder}
+							<button
+								role="menuitem"
+								draggable="false"
+								class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 overflow-hidden w-full"
+								on:click={() => {
+									moveChatHandler(chatId, folder.id);
+								}}
+							>
+								<div class="shrink-0">
+									<FolderIcon className="size-3.5" />
+								</div>
 
-			{#if $user?.role === 'admin' || ($user?.permissions?.chat?.delete ?? true)}
-				<button
-					role="menuitem"
-					draggable="false"
-					class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 w-full"
-					on:click={() => {
-						deleteHandler();
-					}}
-				>
-					<TrashIcon className="size-3.5" strokeWidth="1.5" />
-					<div class="flex items-center">{$i18n.t('Delete')}</div>
-				</button>
+								<div class="truncate">{folder?.name ?? 'Folder'}</div>
+							</button>
+						{/each}
+					</DropdownSub>
+				{/if}
+
+				{#if $visibleControls['chat.archive']}
+					<button
+						role="menuitem"
+						draggable="false"
+						class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 w-full"
+						on:click={() => {
+							archiveChatHandler();
+						}}
+					>
+						<ArchiveBoxIcon className="size-3.5" strokeWidth="1.7" />
+						<div class="flex items-center">
+							{archived ? $i18n.t('Unarchive') : $i18n.t('Archive')}
+						</div>
+					</button>
+				{/if}
+
+				{#if $user?.role === 'admin' || ($user?.permissions?.chat?.delete ?? true)}
+					<button
+						role="menuitem"
+						draggable="false"
+						class="flex h-[1.6875rem] gap-2 items-center rounded-xl px-2 text-[0.8125rem] cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-900 w-full"
+						on:click={() => {
+							deleteHandler();
+						}}
+					>
+						<TrashIcon className="size-3.5" strokeWidth="1.5" />
+						<div class="flex items-center">{$i18n.t('Delete')}</div>
+					</button>
+				{/if}
 			{/if}
 		</DropdownMenu>
 	</div>