From 24b77162418d681f85eba7c7ce32a31b5c6e3cf5 Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Wed, 6 Nov 2024 21:45:48 -0800
Subject: [PATCH] refac: workspace styling

---
 src/lib/components/icons/Plus.svelte          |  2 +-
 src/lib/components/layout/Sidebar.svelte      | 22 +++---
 .../layout/Sidebar/SearchInput.svelte         |  2 +-
 src/lib/components/workspace/Functions.svelte | 72 +++++++----------
 src/lib/components/workspace/Knowledge.svelte | 78 +++++++------------
 src/lib/components/workspace/Models.svelte    | 72 +++++++----------
 src/lib/components/workspace/Prompts.svelte   | 72 +++++++----------
 src/lib/components/workspace/Tools.svelte     | 72 +++++++----------
 src/routes/(app)/admin/+layout.svelte         |  2 +-
 src/routes/(app)/playground/+layout.svelte    |  2 +-
 src/routes/(app)/workspace/+layout.svelte     |  4 +-
 11 files changed, 154 insertions(+), 246 deletions(-)

diff --git a/src/lib/components/icons/Plus.svelte b/src/lib/components/icons/Plus.svelte
index bcfe4a8b2..e5f3ba770 100644
--- a/src/lib/components/icons/Plus.svelte
+++ b/src/lib/components/icons/Plus.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let className = 'w-4 h-4';
-	export let strokeWidth = '1.5';
+	export let strokeWidth = '2';
 </script>
 
 <svg
diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 94e487582..11f296d85 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -410,11 +410,11 @@
 	data-state={$showSidebar}
 >
 	<div
-		class="py-2.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] overflow-x-hidden z-50 {$showSidebar
+		class="py-1.5 my-auto flex flex-col justify-between h-screen max-h-[100dvh] w-[260px] overflow-x-hidden z-50 {$showSidebar
 			? ''
 			: 'invisible'}"
 	>
-		<div class="px-2.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
+		<div class="px-1.5 flex justify-between space-x-1 text-gray-600 dark:text-gray-400">
 			<a
 				id="sidebar-new-chat-button"
 				class="flex flex-1 rounded-lg px-2 h-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
@@ -446,7 +446,7 @@
 			</a>
 
 			<button
-				class=" cursor-pointer px-2 py-2 flex rounded-lg hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+				class=" cursor-pointer px-2 py-2 flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 				on:click={() => {
 					showSidebar.set(!$showSidebar);
 				}}
@@ -471,7 +471,7 @@
 		</div>
 
 		{#if $user?.role === 'admin'}
-			<div class="px-2.5 flex justify-center text-gray-800 dark:text-gray-200">
+			<div class="px-1.5 flex justify-center text-gray-800 dark:text-gray-200">
 				<a
 					class="flex-grow flex space-x-3 rounded-lg px-2.5 py-2 hover:bg-gray-100 dark:hover:bg-gray-900 transition"
 					href="/workspace"
@@ -514,7 +514,13 @@
 				<div class="absolute z-40 w-full h-full flex justify-center"></div>
 			{/if}
 
-			<div class="absolute z-40 right-4 top-1">
+			<SearchInput
+				bind:value={search}
+				on:input={searchDebounceHandler}
+				placeholder={$i18n.t('Search')}
+			/>
+
+			<div class="absolute z-40 right-3.5 top-1">
 				<Tooltip content={$i18n.t('New folder')}>
 					<button
 						class="p-1 rounded-lg bg-gray-50 hover:bg-gray-100 dark:bg-gray-950 dark:hover:bg-gray-900 transition"
@@ -526,12 +532,6 @@
 					</button>
 				</Tooltip>
 			</div>
-
-			<SearchInput
-				bind:value={search}
-				on:input={searchDebounceHandler}
-				placeholder={$i18n.t('Search')}
-			/>
 		</div>
 
 		<div
diff --git a/src/lib/components/layout/Sidebar/SearchInput.svelte b/src/lib/components/layout/Sidebar/SearchInput.svelte
index 883cc7e65..a93feb540 100644
--- a/src/lib/components/layout/Sidebar/SearchInput.svelte
+++ b/src/lib/components/layout/Sidebar/SearchInput.svelte
@@ -73,7 +73,7 @@
 	});
 </script>
 
-<div class="px-2 mb-1 flex justify-center space-x-2 relative z-10" id="search-container">
+<div class="px-1 mb-1 flex justify-center space-x-2 relative z-10" id="search-container">
 	<div class="flex w-full rounded-xl" id="chat-search">
 		<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
 			<svg
diff --git a/src/lib/components/workspace/Functions.svelte b/src/lib/components/workspace/Functions.svelte
index c488c57c2..f3381a1d0 100644
--- a/src/lib/components/workspace/Functions.svelte
+++ b/src/lib/components/workspace/Functions.svelte
@@ -30,6 +30,8 @@
 	import Heart from '../icons/Heart.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import GarbageBin from '../icons/GarbageBin.svelte';
+	import Search from '../icons/Search.svelte';
+	import Plus from '../icons/Plus.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -182,56 +184,34 @@
 	</title>
 </svelte:head>
 
-<div class=" flex w-full space-x-2 mb-2.5">
-	<div class="flex flex-1">
-		<div class=" self-center ml-1 mr-3">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<input
-			class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
-			bind:value={query}
-			placeholder={$i18n.t('Search Functions')}
-		/>
-	</div>
-
-	<div>
-		<a
-			class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
-			href="/workspace/functions/create"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 16 16"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
-				/>
-			</svg>
-		</a>
-	</div>
-</div>
-
-<div class="mb-3.5">
+<div class="flex flex-col gap-0.5 mt-1 mb-2">
 	<div class="flex justify-between items-center">
-		<div class="flex md:self-center text-base font-medium px-0.5">
+		<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" />
-			<span class="text-base font-medium text-gray-500 dark:text-gray-300"
-				>{filteredItems.length}</span
+			<span class="text-base font-lg text-gray-500 dark:text-gray-300">{filteredItems.length}</span>
+		</div>
+	</div>
+
+	<div class=" flex w-full space-x-2">
+		<div class="flex flex-1">
+			<div class=" self-center ml-1 mr-3">
+				<Search className="size-3.5" />
+			</div>
+			<input
+				class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
+				bind:value={query}
+				placeholder={$i18n.t('Search Functions')}
+			/>
+		</div>
+
+		<div>
+			<a
+				class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
+				href="/workspace/functions/create"
 			>
+				<Plus className="size-3.5" />
+			</a>
 		</div>
 	</div>
 </div>
diff --git a/src/lib/components/workspace/Knowledge.svelte b/src/lib/components/workspace/Knowledge.svelte
index 0e3844905..cd39ec7d6 100644
--- a/src/lib/components/workspace/Knowledge.svelte
+++ b/src/lib/components/workspace/Knowledge.svelte
@@ -22,6 +22,8 @@
 	import DeleteConfirmDialog from '../common/ConfirmDialog.svelte';
 	import ItemMenu from './Knowledge/ItemMenu.svelte';
 	import Badge from '../common/Badge.svelte';
+	import Search from '../icons/Search.svelte';
+	import Plus from '../icons/Plus.svelte';
 
 	let query = '';
 	let selectedItem = null;
@@ -73,61 +75,41 @@
 	}}
 />
 
-<div class=" flex w-full space-x-2 mb-2.5">
-	<div class="flex flex-1">
-		<div class=" self-center ml-1 mr-3">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<input
-			class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
-			bind:value={query}
-			placeholder={$i18n.t('Search Knowledge')}
-		/>
-	</div>
-
-	<div>
-		<button
-			class=" px-2 py-2 rounded-xl border border-gray-50 dark:border-gray-800 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
-			aria-label={$i18n.t('Create Knowledge')}
-			on:click={() => {
-				goto('/workspace/knowledge/create');
-			}}
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 16 16"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
-				/>
-			</svg>
-		</button>
-	</div>
-</div>
-
-<div class="mb-3.5">
+<div class="flex flex-col gap-0.5 mt-1 mb-2">
 	<div class="flex justify-between items-center">
-		<div class="flex md:self-center text-base font-medium px-0.5">
+		<div class="flex md:self-center text-xl font-medium px-0.5 items-center">
 			{$i18n.t('Knowledge')}
 			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
-			<span class="text-base font-medium text-gray-500 dark:text-gray-300"
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
 				>{filteredItems.length}</span
 			>
 		</div>
 	</div>
+
+	<div class=" flex w-full space-x-2">
+		<div class="flex flex-1">
+			<div class=" self-center ml-1 mr-3">
+				<Search className="size-3.5" />
+			</div>
+			<input
+				class=" w-full text-sm py-1 rounded-r-xl outline-none bg-transparent"
+				bind:value={query}
+				placeholder={$i18n.t('Search Knowledge')}
+			/>
+		</div>
+
+		<div>
+			<button
+				class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
+				aria-label={$i18n.t('Create Knowledge')}
+				on:click={() => {
+					goto('/workspace/knowledge/create');
+				}}
+			>
+				<Plus className="size-3.5" />
+			</button>
+		</div>
+	</div>
 </div>
 
 <div class="my-3 mb-5 grid md:grid-cols-2 lg:grid-cols-3 gap-2">
diff --git a/src/lib/components/workspace/Models.svelte b/src/lib/components/workspace/Models.svelte
index bcb43e166..19c08c0c8 100644
--- a/src/lib/components/workspace/Models.svelte
+++ b/src/lib/components/workspace/Models.svelte
@@ -22,6 +22,8 @@
 	import ModelDeleteConfirmDialog from '../common/ConfirmDialog.svelte';
 	import Tooltip from '../common/Tooltip.svelte';
 	import GarbageBin from '../icons/GarbageBin.svelte';
+	import Search from '../icons/Search.svelte';
+	import Plus from '../icons/Plus.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -304,58 +306,38 @@
 	}}
 />
 
-<div class=" flex w-full space-x-2 mb-2.5">
-	<div class="flex flex-1">
-		<div class=" self-center ml-1 mr-3">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<input
-			class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
-			bind:value={searchValue}
-			placeholder={$i18n.t('Search Models')}
-		/>
-	</div>
-
-	<div>
-		<a
-			class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 transition font-medium text-sm flex items-center space-x-1"
-			href="/workspace/models/create"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 16 16"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
-				/>
-			</svg>
-		</a>
-	</div>
-</div>
-
-<div class="mb-3.5">
+<div class="flex flex-col gap-0.5 mt-1 mb-2">
 	<div class="flex justify-between items-center">
-		<div class="flex md:self-center text-base font-medium px-0.5">
+		<div class="flex items-center md:self-center text-xl font-medium px-0.5">
 			{$i18n.t('Models')}
 			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
-			<span class="text-base font-medium text-gray-500 dark:text-gray-300"
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
 				>{filteredModels.length}</span
 			>
 		</div>
 	</div>
+
+	<div class=" flex flex-1 items-center w-full space-x-2">
+		<div class="flex flex-1 items-center">
+			<div class=" self-center ml-1 mr-3">
+				<Search className="size-3.5" />
+			</div>
+			<input
+				class=" w-full text-sm py-1 rounded-r-xl outline-none bg-transparent"
+				bind:value={searchValue}
+				placeholder={$i18n.t('Search Models')}
+			/>
+		</div>
+
+		<div>
+			<a
+				class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
+				href="/workspace/models/create"
+			>
+				<Plus className="size-3.5" />
+			</a>
+		</div>
+	</div>
 </div>
 
 <a class=" flex space-x-4 cursor-pointer w-full mb-2 px-3 py-1" href="/workspace/models/create">
diff --git a/src/lib/components/workspace/Prompts.svelte b/src/lib/components/workspace/Prompts.svelte
index 6ccfa91a6..5af7b423c 100644
--- a/src/lib/components/workspace/Prompts.svelte
+++ b/src/lib/components/workspace/Prompts.svelte
@@ -11,6 +11,8 @@
 	import PromptMenu from './Prompts/PromptMenu.svelte';
 	import EllipsisHorizontal from '../icons/EllipsisHorizontal.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
+	import Search from '../icons/Search.svelte';
+	import Plus from '../icons/Plus.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -79,58 +81,38 @@
 	</div>
 </DeleteConfirmDialog>
 
-<div class=" flex w-full space-x-2 mb-2.5">
-	<div class="flex flex-1">
-		<div class=" self-center ml-1 mr-3">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<input
-			class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
-			bind:value={query}
-			placeholder={$i18n.t('Search Prompts')}
-		/>
-	</div>
-
-	<div>
-		<a
-			class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
-			href="/workspace/prompts/create"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 16 16"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
-				/>
-			</svg>
-		</a>
-	</div>
-</div>
-
-<div class="mb-3.5">
+<div class="flex flex-col gap-0.5 mt-1 mb-2">
 	<div class="flex justify-between items-center">
-		<div class="flex md:self-center text-base font-medium px-0.5">
+		<div class="flex md:self-center text-xl font-medium px-0.5 items-center">
 			{$i18n.t('Prompts')}
 			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
-			<span class="text-base font-medium text-gray-500 dark:text-gray-300"
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
 				>{filteredItems.length}</span
 			>
 		</div>
 	</div>
+
+	<div class=" flex w-full space-x-2">
+		<div class="flex flex-1">
+			<div class=" self-center ml-1 mr-3">
+				<Search className="size-3.5" />
+			</div>
+			<input
+				class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
+				bind:value={query}
+				placeholder={$i18n.t('Search Prompts')}
+			/>
+		</div>
+
+		<div>
+			<a
+				class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
+				href="/workspace/prompts/create"
+			>
+				<Plus className="size-3.5" />
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="my-3 mb-5">
diff --git a/src/lib/components/workspace/Tools.svelte b/src/lib/components/workspace/Tools.svelte
index 50e57276e..f15615c23 100644
--- a/src/lib/components/workspace/Tools.svelte
+++ b/src/lib/components/workspace/Tools.svelte
@@ -25,6 +25,8 @@
 	import Heart from '../icons/Heart.svelte';
 	import DeleteConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import GarbageBin from '../icons/GarbageBin.svelte';
+	import Search from '../icons/Search.svelte';
+	import Plus from '../icons/Plus.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -154,58 +156,38 @@
 	</title>
 </svelte:head>
 
-<div class=" flex w-full space-x-2 mb-2.5">
-	<div class="flex flex-1">
-		<div class=" self-center ml-1 mr-3">
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 20 20"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					fill-rule="evenodd"
-					d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
-					clip-rule="evenodd"
-				/>
-			</svg>
-		</div>
-		<input
-			class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
-			bind:value={query}
-			placeholder={$i18n.t('Search Tools')}
-		/>
-	</div>
-
-	<div>
-		<a
-			class=" px-2 py-2 rounded-xl border border-gray-200 dark:border-gray-600 dark:border-0 hover:bg-gray-100 dark:bg-gray-800 dark:hover:bg-gray-700 transition font-medium text-sm flex items-center space-x-1"
-			href="/workspace/tools/create"
-		>
-			<svg
-				xmlns="http://www.w3.org/2000/svg"
-				viewBox="0 0 16 16"
-				fill="currentColor"
-				class="w-4 h-4"
-			>
-				<path
-					d="M8.75 3.75a.75.75 0 0 0-1.5 0v3.5h-3.5a.75.75 0 0 0 0 1.5h3.5v3.5a.75.75 0 0 0 1.5 0v-3.5h3.5a.75.75 0 0 0 0-1.5h-3.5v-3.5Z"
-				/>
-			</svg>
-		</a>
-	</div>
-</div>
-
-<div class="mb-3.5">
+<div class="flex flex-col gap-0.5 mt-1 mb-2">
 	<div class="flex justify-between items-center">
-		<div class="flex md:self-center text-base font-medium px-0.5">
+		<div class="flex md:self-center text-xl font-medium px-0.5 items-center">
 			{$i18n.t('Tools')}
 			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
-			<span class="text-base font-medium text-gray-500 dark:text-gray-300"
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300"
 				>{filteredItems.length}</span
 			>
 		</div>
 	</div>
+
+	<div class=" flex w-full space-x-2">
+		<div class="flex flex-1">
+			<div class=" self-center ml-1 mr-3">
+				<Search className="size-3.5" />
+			</div>
+			<input
+				class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
+				bind:value={query}
+				placeholder={$i18n.t('Search Tools')}
+			/>
+		</div>
+
+		<div>
+			<a
+				class=" px-2 py-2 rounded-xl hover:bg-gray-700/10 dark:hover:bg-gray-100/10 dark:text-gray-300 dark:hover:text-white transition font-medium text-sm flex items-center space-x-1"
+				href="/workspace/tools/create"
+			>
+				<Plus className="size-3.5" />
+			</a>
+		</div>
+	</div>
 </div>
 
 <div class="my-3 mb-5">
diff --git a/src/routes/(app)/admin/+layout.svelte b/src/routes/(app)/admin/+layout.svelte
index 5219f1c6c..84315f7b9 100644
--- a/src/routes/(app)/admin/+layout.svelte
+++ b/src/routes/(app)/admin/+layout.svelte
@@ -49,7 +49,7 @@
 
 				<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 p-1"
+						class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent py-1"
 					>
 						<a
 							class="min-w-fit rounded-full p-1.5 {['/admin', '/admin/'].includes(
diff --git a/src/routes/(app)/playground/+layout.svelte b/src/routes/(app)/playground/+layout.svelte
index ba14cf0df..294673c15 100644
--- a/src/routes/(app)/playground/+layout.svelte
+++ b/src/routes/(app)/playground/+layout.svelte
@@ -39,7 +39,7 @@
 
 			<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 p-1"
+					class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent py-1"
 				>
 					<a
 						class="min-w-fit rounded-full p-1.5 {['/playground', '/playground/'].includes(
diff --git a/src/routes/(app)/workspace/+layout.svelte b/src/routes/(app)/workspace/+layout.svelte
index f73d731fd..3ee032a20 100644
--- a/src/routes/(app)/workspace/+layout.svelte
+++ b/src/routes/(app)/workspace/+layout.svelte
@@ -30,7 +30,7 @@
 			? 'md:max-w-[calc(100%-260px)]'
 			: ''}"
 	>
-		<div class="   px-3.5 mt-1.5 bg-transparent backdrop-blur-xl">
+		<div class="   px-3.5 py-1 backdrop-blur-xl">
 			<div class=" flex items-center gap-1">
 				<div class="{$showSidebar ? 'md:hidden' : ''} self-center flex flex-none items-center">
 					<button
@@ -49,7 +49,7 @@
 
 				<div class="">
 					<div
-						class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent p-1 touch-auto pointer-events-auto"
+						class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-medium rounded-full bg-transparent py-1 touch-auto pointer-events-auto"
 					>
 						<a
 							class="min-w-fit rounded-full p-1.5 {$page.url.pathname.includes('/workspace/models')