From df85b93b539a8fb8cfb2790ea4948c02272f8d7d Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Tue, 5 Nov 2024 21:05:14 -0800
Subject: [PATCH] refac

---
 src/lib/components/chat/SettingsModal.svelte | 38 +++++++-------------
 1 file changed, 12 insertions(+), 26 deletions(-)

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 2e531fe50..f656214eb 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -16,6 +16,7 @@
 	import User from '../icons/User.svelte';
 	import Personalization from './Settings/Personalization.svelte';
 	import SearchInput from '../layout/Sidebar/SearchInput.svelte';
+	import Search from '../icons/Search.svelte';
 
 	const i18n = getContext('i18n');
 
@@ -338,7 +339,7 @@
 	}
 </script>
 
-<Modal bind:show>
+<Modal size="xl" bind:show>
 	<div class="text-gray-700 dark:text-gray-100">
 		<div class=" flex justify-between dark:text-gray-300 px-5 pt-4 pb-1">
 			<div class=" text-lg font-medium self-center">{$i18n.t('Settings')}</div>
@@ -361,38 +362,23 @@
 			</button>
 		</div>
 
-		<div class="flex flex-col md:flex-row w-full px-4 pt-2 pb-4 md:space-x-4">
+		<div class="flex flex-col md:flex-row w-full px-4 pt-1 pb-4 md:space-x-4">
 			<div
 				id="settings-tabs-container"
-				class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-3 md:mb-0"
+				class="tabs flex flex-row overflow-x-auto space-x-1 md:space-x-0 md:space-y-1 md:flex-col flex-1 md:flex-none md:w-40 dark:text-gray-200 text-xs text-left mb-1 md:mb-0 -translate-y-1"
 			>
-				<!-- <div class="flex w-full rounded-xl" id="chat-search">
-					<div class="self-center pl-3 py-2 rounded-l-xl bg-transparent">
-						<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 class="hidden md:flex w-full rounded-xl px-1 -py-0.5 gap-2" id="settings-search">
+					<div class="self-center rounded-l-xl bg-transparent">
+						<Search className="size-3.5" />
 					</div>
 					<input
-						class="w-full rounded-r-xl py-1.5 pl-2.5 pr-4 text-sm bg-transparent dark:text-gray-300 outline-none"
+						class="w-full py-1.5 text-xs bg-transparent dark:text-gray-300 outline-none"
 						bind:value={search}
-						on:input={sear}
+						on:input={searchDebounceHandler}
 						placeholder={$i18n.t('Search')}
 					/>
-				</div> -->
-				<SearchInput
-					bind:value={search}
-					on:input={searchDebounceHandler}
-					placeholder={$i18n.t('Search')}
-				/>
+				</div>
+
 				{#if visibleTabs.length > 0}
 					{#each visibleTabs as tabId (tabId)}
 						{#if tabId === 'general'}
@@ -604,7 +590,7 @@
 					</div>
 				{/if}
 			</div>
-			<div class="flex-1 md:min-h-[28rem]">
+			<div class="flex-1 md:min-h-[32rem]">
 				{#if selectedTab === 'general'}
 					<General
 						{getModels}