From d2485bbf09b48f9c9d6f3e105cdc13c5a905d8c8 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Thu, 3 Jul 2025 18:13:23 +0400
Subject: [PATCH] refac

---
 src/lib/components/admin/Functions.svelte     | 57 +++++++++++++++++--
 .../Settings/Models/ManageModelsModal.svelte  |  4 +-
 .../admin/Users/UserList/AddUserModal.svelte  |  4 +-
 src/routes/(app)/admin/+layout.svelte         |  8 +--
 src/routes/(app)/home/+layout.svelte          |  4 +-
 src/routes/(app)/playground/+layout.svelte    | 10 +---
 src/routes/(app)/workspace/+layout.svelte     | 14 ++---
 7 files changed, 68 insertions(+), 33 deletions(-)

diff --git a/src/lib/components/admin/Functions.svelte b/src/lib/components/admin/Functions.svelte
index 78365c832e..5e60dfc9eb 100644
--- a/src/lib/components/admin/Functions.svelte
+++ b/src/lib/components/admin/Functions.svelte
@@ -49,6 +49,8 @@
 	let showConfirm = false;
 	let query = '';
 
+	let selectedType = 'all';
+
 	let showManifestModal = false;
 	let showValvesModal = false;
 	let selectedFunction = null;
@@ -59,9 +61,10 @@
 	$: filteredItems = $functions
 		.filter(
 			(f) =>
-				query === '' ||
-				f.name.toLowerCase().includes(query.toLowerCase()) ||
-				f.id.toLowerCase().includes(query.toLowerCase())
+				(selectedType !== 'all' ? f.type === selectedType : true) &&
+				(query === '' ||
+					f.name.toLowerCase().includes(query.toLowerCase()) ||
+					f.id.toLowerCase().includes(query.toLowerCase()))
 		)
 		.sort((a, b) => a.type.localeCompare(b.type) || a.name.localeCompare(b.name));
 
@@ -219,8 +222,8 @@
 	}}
 />
 
-<div class="flex flex-col gap-1 mt-1.5 mb-2">
-	<div class="flex justify-between items-center">
+<div class="flex flex-col mt-1.5 mb-0.5">
+	<div class="flex justify-between items-center mb-1">
 		<div class="flex md:self-center text-xl items-center font-medium px-0.5">
 			{$i18n.t('Functions')}
 			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
@@ -270,12 +273,54 @@
 			</AddFunctionMenu>
 		</div>
 	</div>
+
+	<div class=" flex w-full">
+		<div
+			class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent"
+		>
+			<button
+				class="min-w-fit p-1.5 {selectedType === 'all'
+					? ''
+					: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
+				on:click={() => {
+					selectedType = 'all';
+				}}>{$i18n.t('All')}</button
+			>
+
+			<button
+				class="min-w-fit p-1.5 {selectedType === 'filter'
+					? ''
+					: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
+				on:click={() => {
+					selectedType = 'filter';
+				}}>{$i18n.t('Filter')}</button
+			>
+
+			<button
+				class="min-w-fit p-1.5 {selectedType === 'pipe'
+					? ''
+					: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
+				on:click={() => {
+					selectedType = 'pipe';
+				}}>{$i18n.t('Pipe')}</button
+			>
+
+			<button
+				class="min-w-fit p-1.5 {selectedType === 'action'
+					? ''
+					: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
+				on:click={() => {
+					selectedType = 'action';
+				}}>{$i18n.t('Action')}</button
+			>
+		</div>
+	</div>
 </div>
 
 <div class="mb-5">
 	{#each filteredItems as func (func.id)}
 		<div
-			class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
+			class=" flex space-x-4 cursor-pointer w-full px-2 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-xl"
 		>
 			<a
 				class=" flex flex-1 space-x-3.5 cursor-pointer w-full"
diff --git a/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte b/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
index b00150464a..7612a6e379 100644
--- a/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
+++ b/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
@@ -67,7 +67,7 @@
 							class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent dark:text-gray-200"
 						>
 							<button
-								class="min-w-fit rounded-full p-1.5 {selected === 'ollama'
+								class="min-w-fit p-1.5 {selected === 'ollama'
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 								on:click={() => {
@@ -76,7 +76,7 @@
 							>
 
 							<!-- <button
-								class="min-w-fit rounded-full p-1.5 {selected === 'llamacpp'
+								class="min-w-fit p-1.5 {selected === 'llamacpp'
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 								on:click={() => {
diff --git a/src/lib/components/admin/Users/UserList/AddUserModal.svelte b/src/lib/components/admin/Users/UserList/AddUserModal.svelte
index 70bbbbb1b8..7083621755 100644
--- a/src/lib/components/admin/Users/UserList/AddUserModal.svelte
+++ b/src/lib/components/admin/Users/UserList/AddUserModal.svelte
@@ -150,7 +150,7 @@
 						class="flex -mt-2 mb-1.5 gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent dark:text-gray-200"
 					>
 						<button
-							class="min-w-fit rounded-full p-1.5 {tab === ''
+							class="min-w-fit p-1.5 {tab === ''
 								? ''
 								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 							type="button"
@@ -160,7 +160,7 @@
 						>
 
 						<button
-							class="min-w-fit rounded-full p-1.5 {tab === 'import'
+							class="min-w-fit p-1.5 {tab === 'import'
 								? ''
 								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 							type="button"
diff --git a/src/routes/(app)/admin/+layout.svelte b/src/routes/(app)/admin/+layout.svelte
index 273a6df8d1..ceaa42e324 100644
--- a/src/routes/(app)/admin/+layout.svelte
+++ b/src/routes/(app)/admin/+layout.svelte
@@ -52,28 +52,28 @@
 						class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent pt-1"
 					>
 						<a
-							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/admin/users')
+							class="min-w-fit p-1.5 {$page.url.pathname.includes('/admin/users')
 								? ''
 								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 							href="/admin">{$i18n.t('Users')}</a
 						>
 
 						<a
-							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/admin/evaluations')
+							class="min-w-fit p-1.5 {$page.url.pathname.includes('/admin/evaluations')
 								? ''
 								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 							href="/admin/evaluations">{$i18n.t('Evaluations')}</a
 						>
 
 						<a
-							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/admin/functions')
+							class="min-w-fit p-1.5 {$page.url.pathname.includes('/admin/functions')
 								? ''
 								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 							href="/admin/functions">{$i18n.t('Functions')}</a
 						>
 
 						<a
-							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/admin/settings')
+							class="min-w-fit p-1.5 {$page.url.pathname.includes('/admin/settings')
 								? ''
 								: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 							href="/admin/settings">{$i18n.t('Settings')}</a
diff --git a/src/routes/(app)/home/+layout.svelte b/src/routes/(app)/home/+layout.svelte
index c41e70c533..80ac0ee4c9 100644
--- a/src/routes/(app)/home/+layout.svelte
+++ b/src/routes/(app)/home/+layout.svelte
@@ -42,14 +42,14 @@
 					class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent pt-1"
 				>
 					<a
-						class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/home/notes')
+						class="min-w-fit p-1.5 {$page.url.pathname.includes('/home/notes')
 							? ''
 							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 						href="/playground/notes">{$i18n.t('Notes')}</a
 					>
 
 					<a
-						class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/playground/calendar')
+						class="min-w-fit p-1.5 {$page.url.pathname.includes('/playground/calendar')
 							? ''
 							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 						href="/playground/completions">{$i18n.t('Calendar')}</a
diff --git a/src/routes/(app)/playground/+layout.svelte b/src/routes/(app)/playground/+layout.svelte
index 4a2ebb3aac..0d6536e645 100644
--- a/src/routes/(app)/playground/+layout.svelte
+++ b/src/routes/(app)/playground/+layout.svelte
@@ -42,25 +42,21 @@
 					class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent pt-1"
 				>
 					<a
-						class="min-w-fit rounded-full p-1.5 {['/playground', '/playground/'].includes(
-							$page.url.pathname
-						)
+						class="min-w-fit p-1.5 {['/playground', '/playground/'].includes($page.url.pathname)
 							? ''
 							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 						href="/playground">{$i18n.t('Chat')}</a
 					>
 
 					<!-- <a
-						class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/playground/notes')
+						class="min-w-fit p-1.5 {$page.url.pathname.includes('/playground/notes')
 							? ''
 							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 						href="/playground/notes">{$i18n.t('Notes')}</a
 					> -->
 
 					<a
-						class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
-							'/playground/completions'
-						)
+						class="min-w-fit p-1.5 {$page.url.pathname.includes('/playground/completions')
 							? ''
 							: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 						href="/playground/completions">{$i18n.t('Completions')}</a
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index fc7d434fdb..c25257e9f7 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -78,9 +78,7 @@
 					>
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.models}
 							<a
-								class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
-									'/workspace/models'
-								)
+								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/models')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 								href="/workspace/models">{$i18n.t('Models')}</a
@@ -89,9 +87,7 @@
 
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.knowledge}
 							<a
-								class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
-									'/workspace/knowledge'
-								)
+								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/knowledge')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 								href="/workspace/knowledge"
@@ -102,9 +98,7 @@
 
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.prompts}
 							<a
-								class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes(
-									'/workspace/prompts'
-								)
+								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/prompts')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 								href="/workspace/prompts">{$i18n.t('Prompts')}</a
@@ -113,7 +107,7 @@
 
 						{#if $user?.role === 'admin' || $user?.permissions?.workspace?.tools}
 							<a
-								class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/tools')
+								class="min-w-fit p-1.5 {$page.url.pathname.includes('/workspace/tools')
 									? ''
 									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
 								href="/workspace/tools"