From bd250a0e2431f8c2c7e2f4a34c5327f21fc77d4b Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 10 Aug 2026 23:37:45 -0600
Subject: [PATCH] refac

---
 src/lib/components/common/Collapsible.svelte  |  4 ++--
 src/lib/components/common/Folder.svelte       |  3 ---
 .../components/common/ToolCallDisplay.svelte  | 21 +++++++++++++++----
 src/lib/components/layout/Sidebar.svelte      |  1 -
 .../layout/Sidebar/RecursiveFolder.svelte     |  4 +---
 .../components/layout/Sidebar/Section.svelte  | 10 ++++-----
 6 files changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/lib/components/common/Collapsible.svelte b/src/lib/components/common/Collapsible.svelte
index 7ab0dbf49c..8bfb343697 100644
--- a/src/lib/components/common/Collapsible.svelte
+++ b/src/lib/components/common/Collapsible.svelte
@@ -140,8 +140,8 @@
 			class="{buttonClassName} cursor-pointer"
 			on:click={(e) => {
 				e.stopPropagation();
+				toggleOpen();
 			}}
-			on:pointerup={toggleOpen}
 		>
 			<div>
 				<div class="flex items-start justify-between">
@@ -162,7 +162,7 @@
 					{#if open && !hide}
 						<div
 							transition:slide={{ duration: 300, easing: quintOut, axis: 'y' }}
-							on:pointerup={(e) => {
+							on:click={(e) => {
 								e.stopPropagation();
 							}}
 						>
diff --git a/src/lib/components/common/Folder.svelte b/src/lib/components/common/Folder.svelte
index f76f2b0e1f..0d5c324552 100644
--- a/src/lib/components/common/Folder.svelte
+++ b/src/lib/components/common/Folder.svelte
@@ -175,9 +175,6 @@
 					{#if onAdd}
 						<button
 							class="absolute z-10 right-2 invisible group-hover:visible self-center flex items-center dark:text-gray-300"
-							on:pointerup={(e) => {
-								e.stopPropagation();
-							}}
 							on:click={(e) => {
 								e.stopPropagation();
 								onAdd();
diff --git a/src/lib/components/common/ToolCallDisplay.svelte b/src/lib/components/common/ToolCallDisplay.svelte
index 3f631e3d58..c51c85081f 100644
--- a/src/lib/components/common/ToolCallDisplay.svelte
+++ b/src/lib/components/common/ToolCallDisplay.svelte
@@ -95,6 +95,19 @@
 
 	$: parsedArgs = parseArguments(args);
 	$: parsedResult = parseJSONString(result);
+
+	const toggleOpen = () => {
+		open = !open;
+	};
+
+	const toggleOpenOnKeydown = (event: KeyboardEvent) => {
+		if (event.key !== 'Enter' && event.key !== ' ') {
+			return;
+		}
+
+		event.preventDefault();
+		toggleOpen();
+	};
 </script>
 
 <div {id} class={className}>
@@ -119,12 +132,12 @@
 		</div>
 	{:else}
 		<!-- Tool call display -->
-		<!-- svelte-ignore a11y-no-static-element-interactions -->
 		<div
 			class="{buttonClassName} cursor-pointer"
-			on:pointerup={() => {
-				open = !open;
-			}}
+			role="button"
+			tabindex="0"
+			on:click={toggleOpen}
+			on:keydown={toggleOpenOnKeydown}
 		>
 			<div
 				class="w-full max-w-full font-normal flex items-center gap-1.5 {isExecuting
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index c83b6dfaba..b1a3f49722 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -1476,7 +1476,6 @@
 										type="button"
 										class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 transition-colors duration-100"
 										aria-label={$i18n.t('More')}
-										on:pointerup|stopPropagation
 									>
 										<MoreHorizontalIcon className="size-3.5" strokeWidth="2" />
 									</button>
diff --git a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
index 2b05ecdcb9..5f9c916b58 100644
--- a/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
+++ b/src/lib/components/layout/Sidebar/RecursiveFolder.svelte
@@ -754,6 +754,7 @@
 				role="button"
 				tabindex="0"
 				on:click={async (e) => {
+					e.stopPropagation();
 					if (shouldIgnoreRowClick(e.target)) return;
 					if (clickTimer) {
 						clearTimeout(clickTimer);
@@ -772,9 +773,6 @@
 						openFolderHandler();
 					}
 				}}
-				on:pointerup={(e) => {
-					e.stopPropagation();
-				}}
 			>
 				<button
 					class="text-gray-600 dark:text-gray-400 transition-all p-1 hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-lg"
diff --git a/src/lib/components/layout/Sidebar/Section.svelte b/src/lib/components/layout/Sidebar/Section.svelte
index fee2a01b44..c52debebbd 100644
--- a/src/lib/components/layout/Sidebar/Section.svelte
+++ b/src/lib/components/layout/Sidebar/Section.svelte
@@ -131,8 +131,6 @@
 						class="group flex flex-1 h-full items-center gap-1 text-left text-xs text-gray-400 hover:text-gray-500 dark:text-gray-500 dark:hover:text-gray-400 transition-colors duration-100 {buttonClassName}"
 						aria-expanded={open}
 						aria-controls="{id}-content"
-						on:pointerup|stopPropagation
-						on:click={() => setOpen(!open)}
 					>
 						<span>{name}</span>
 						<span
@@ -143,16 +141,16 @@
 						</span>
 					</button>
 
-					<slot name="action" />
+					<!-- svelte-ignore a11y-click-events-have-key-events a11y-no-static-element-interactions -->
+					<div class="contents" on:click={(e) => e.stopPropagation()}>
+						<slot name="action" />
+					</div>
 
 					{#if onAdd}
 						<button
 							type="button"
 							class="flex items-center justify-center w-7 h-7 rounded-lg text-gray-300 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-400 transition-colors duration-100"
 							aria-label={onAddLabel}
-							on:pointerup={(e) => {
-								e.stopPropagation();
-							}}
 							on:click={(e) => {
 								e.stopPropagation();
 								onAdd();