From 9e6595705e33df167d2eeb989b4e9edc58eca824 Mon Sep 17 00:00:00 2001
From: dannyl1u <dannyjialiliu@gmail.com>
Date: Tue, 5 Nov 2024 20:06:37 -0800
Subject: [PATCH] feat: settings search - no results found

---
 src/lib/components/chat/SettingsModal.svelte | 378 ++++++++++---------
 1 file changed, 193 insertions(+), 185 deletions(-)

diff --git a/src/lib/components/chat/SettingsModal.svelte b/src/lib/components/chat/SettingsModal.svelte
index 3a556a035..2e531fe50 100644
--- a/src/lib/components/chat/SettingsModal.svelte
+++ b/src/lib/components/chat/SettingsModal.svelte
@@ -235,6 +235,8 @@
 				'details',
 				'aboutus',
 				'softwareinfo',
+				'timothyjaeryangbaek',
+				'openwebui',
 				'release',
 				'updates',
 				'updateinfo',
@@ -391,210 +393,216 @@
 					on:input={searchDebounceHandler}
 					placeholder={$i18n.t('Search')}
 				/>
-				{#each visibleTabs as tabId (tabId)}
-					{#if tabId === 'general'}
-						<button
-							class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
-							'general'
-								? 'bg-gray-100 dark:bg-gray-800'
-								: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
-							on:click={() => {
-								selectedTab = 'general';
-							}}
-						>
-							<div class=" self-center mr-2">
-								<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="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-							</div>
-							<div class=" self-center">{$i18n.t('General')}</div>
-						</button>
-					{:else if tabId === 'interface'}
-						<button
-							class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
-							'interface'
-								? 'bg-gray-100 dark:bg-gray-800'
-								: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
-							on:click={() => {
-								selectedTab = 'interface';
-							}}
-						>
-							<div class=" self-center mr-2">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-									class="w-4 h-4"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M2 4.25A2.25 2.25 0 0 1 4.25 2h7.5A2.25 2.25 0 0 1 14 4.25v5.5A2.25 2.25 0 0 1 11.75 12h-1.312c.1.128.21.248.328.36a.75.75 0 0 1 .234.545v.345a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75v-.345a.75.75 0 0 1 .234-.545c.118-.111.228-.232.328-.36H4.25A2.25 2.25 0 0 1 2 9.75v-5.5Zm2.25-.75a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-.75-.75h-7.5Z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-							</div>
-							<div class=" self-center">{$i18n.t('Interface')}</div>
-						</button>
-					{:else if tabId === 'personalization'}
-						<button
-							class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
-							'personalization'
-								? 'bg-gray-100 dark:bg-gray-800'
-								: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
-							on:click={() => {
-								selectedTab = 'personalization';
-							}}
-						>
-							<div class=" self-center mr-2">
-								<User />
-							</div>
-							<div class=" self-center">{$i18n.t('Personalization')}</div>
-						</button>
-					{:else if tabId === 'audio'}
-						<button
-							class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
-							'audio'
-								? 'bg-gray-100 dark:bg-gray-800'
-								: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
-							on:click={() => {
-								selectedTab = 'audio';
-							}}
-						>
-							<div class=" self-center mr-2">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-									class="w-4 h-4"
-								>
-									<path
-										d="M7.557 2.066A.75.75 0 0 1 8 2.75v10.5a.75.75 0 0 1-1.248.56L3.59 11H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.59l3.162-2.81a.75.75 0 0 1 .805-.124ZM12.95 3.05a.75.75 0 1 0-1.06 1.06 5.5 5.5 0 0 1 0 7.78.75.75 0 1 0 1.06 1.06 7 7 0 0 0 0-9.9Z"
-									/>
-									<path
-										d="M10.828 5.172a.75.75 0 1 0-1.06 1.06 2.5 2.5 0 0 1 0 3.536.75.75 0 1 0 1.06 1.06 4 4 0 0 0 0-5.656Z"
-									/>
-								</svg>
-							</div>
-							<div class=" self-center">{$i18n.t('Audio')}</div>
-						</button>
-					{:else if tabId === 'chats'}
-						<button
-							class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
-							'chats'
-								? 'bg-gray-100 dark:bg-gray-800'
-								: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
-							on:click={() => {
-								selectedTab = 'chats';
-							}}
-						>
-							<div class=" self-center mr-2">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-									class="w-4 h-4"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M8 2C4.262 2 1 4.57 1 8c0 1.86.98 3.486 2.455 4.566a3.472 3.472 0 0 1-.469 1.26.75.75 0 0 0 .713 1.14 6.961 6.961 0 0 0 3.06-1.06c.403.062.818.094 1.241.094 3.738 0 7-2.57 7-6s-3.262-6-7-6ZM5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-							</div>
-							<div class=" self-center">{$i18n.t('Chats')}</div>
-						</button>
-					{:else if tabId === 'account'}
-						<button
-							class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
-							'account'
-								? 'bg-gray-100 dark:bg-gray-800'
-								: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
-							on:click={() => {
-								selectedTab = 'account';
-							}}
-						>
-							<div class=" self-center mr-2">
-								<svg
-									xmlns="http://www.w3.org/2000/svg"
-									viewBox="0 0 16 16"
-									fill="currentColor"
-									class="w-4 h-4"
-								>
-									<path
-										fill-rule="evenodd"
-										d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-5-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 9c-1.825 0-3.422.977-4.295 2.437A5.49 5.49 0 0 0 8 13.5a5.49 5.49 0 0 0 4.294-2.063A4.997 4.997 0 0 0 8 9Z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-							</div>
-							<div class=" self-center">{$i18n.t('Account')}</div>
-						</button>
-					{:else if tabId === 'about'}
-						<button
-							class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
-							'about'
-								? 'bg-gray-100 dark:bg-gray-800'
-								: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
-							on:click={() => {
-								selectedTab = 'about';
-							}}
-						>
-							<div class=" self-center mr-2">
-								<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="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
-										clip-rule="evenodd"
-									/>
-								</svg>
-							</div>
-							<div class=" self-center">{$i18n.t('About')}</div>
-						</button>
-					{:else if tabId === 'admin'}
-						{#if $user.role === 'admin'}
+				{#if visibleTabs.length > 0}
+					{#each visibleTabs as tabId (tabId)}
+						{#if tabId === 'general'}
 							<button
 								class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
-								'admin'
+								'general'
 									? 'bg-gray-100 dark:bg-gray-800'
 									: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
-								on:click={async () => {
-									await goto('/admin/settings');
-									show = false;
+								on:click={() => {
+									selectedTab = 'general';
 								}}
 							>
 								<div class=" self-center mr-2">
 									<svg
 										xmlns="http://www.w3.org/2000/svg"
-										viewBox="0 0 24 24"
+										viewBox="0 0 20 20"
 										fill="currentColor"
-										class="size-4"
+										class="w-4 h-4"
 									>
 										<path
 											fill-rule="evenodd"
-											d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z"
+											d="M8.34 1.804A1 1 0 019.32 1h1.36a1 1 0 01.98.804l.295 1.473c.497.144.971.342 1.416.587l1.25-.834a1 1 0 011.262.125l.962.962a1 1 0 01.125 1.262l-.834 1.25c.245.445.443.919.587 1.416l1.473.294a1 1 0 01.804.98v1.361a1 1 0 01-.804.98l-1.473.295a6.95 6.95 0 01-.587 1.416l.834 1.25a1 1 0 01-.125 1.262l-.962.962a1 1 0 01-1.262.125l-1.25-.834a6.953 6.953 0 01-1.416.587l-.294 1.473a1 1 0 01-.98.804H9.32a1 1 0 01-.98-.804l-.295-1.473a6.957 6.957 0 01-1.416-.587l-1.25.834a1 1 0 01-1.262-.125l-.962-.962a1 1 0 01-.125-1.262l.834-1.25a6.957 6.957 0 01-.587-1.416l-1.473-.294A1 1 0 011 10.68V9.32a1 1 0 01.804-.98l1.473-.295c.144-.497.342-.971.587-1.416l-.834-1.25a1 1 0 01.125-1.262l.962-.962A1 1 0 015.38 3.03l1.25.834a6.957 6.957 0 011.416-.587l.294-1.473zM13 10a3 3 0 11-6 0 3 3 0 016 0z"
 											clip-rule="evenodd"
 										/>
 									</svg>
 								</div>
-								<div class=" self-center">{$i18n.t('Admin Settings')}</div>
+								<div class=" self-center">{$i18n.t('General')}</div>
 							</button>
+						{:else if tabId === 'interface'}
+							<button
+								class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+								'interface'
+									? 'bg-gray-100 dark:bg-gray-800'
+									: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
+								on:click={() => {
+									selectedTab = 'interface';
+								}}
+							>
+								<div class=" self-center mr-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M2 4.25A2.25 2.25 0 0 1 4.25 2h7.5A2.25 2.25 0 0 1 14 4.25v5.5A2.25 2.25 0 0 1 11.75 12h-1.312c.1.128.21.248.328.36a.75.75 0 0 1 .234.545v.345a.75.75 0 0 1-.75.75h-4.5a.75.75 0 0 1-.75-.75v-.345a.75.75 0 0 1 .234-.545c.118-.111.228-.232.328-.36H4.25A2.25 2.25 0 0 1 2 9.75v-5.5Zm2.25-.75a.75.75 0 0 0-.75.75v4.5c0 .414.336.75.75.75h7.5a.75.75 0 0 0 .75-.75v-4.5a.75.75 0 0 0-.75-.75h-7.5Z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</div>
+								<div class=" self-center">{$i18n.t('Interface')}</div>
+							</button>
+						{:else if tabId === 'personalization'}
+							<button
+								class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+								'personalization'
+									? 'bg-gray-100 dark:bg-gray-800'
+									: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
+								on:click={() => {
+									selectedTab = 'personalization';
+								}}
+							>
+								<div class=" self-center mr-2">
+									<User />
+								</div>
+								<div class=" self-center">{$i18n.t('Personalization')}</div>
+							</button>
+						{:else if tabId === 'audio'}
+							<button
+								class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+								'audio'
+									? 'bg-gray-100 dark:bg-gray-800'
+									: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
+								on:click={() => {
+									selectedTab = 'audio';
+								}}
+							>
+								<div class=" self-center mr-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											d="M7.557 2.066A.75.75 0 0 1 8 2.75v10.5a.75.75 0 0 1-1.248.56L3.59 11H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1.59l3.162-2.81a.75.75 0 0 1 .805-.124ZM12.95 3.05a.75.75 0 1 0-1.06 1.06 5.5 5.5 0 0 1 0 7.78.75.75 0 1 0 1.06 1.06 7 7 0 0 0 0-9.9Z"
+										/>
+										<path
+											d="M10.828 5.172a.75.75 0 1 0-1.06 1.06 2.5 2.5 0 0 1 0 3.536.75.75 0 1 0 1.06 1.06 4 4 0 0 0 0-5.656Z"
+										/>
+									</svg>
+								</div>
+								<div class=" self-center">{$i18n.t('Audio')}</div>
+							</button>
+						{:else if tabId === 'chats'}
+							<button
+								class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+								'chats'
+									? 'bg-gray-100 dark:bg-gray-800'
+									: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
+								on:click={() => {
+									selectedTab = 'chats';
+								}}
+							>
+								<div class=" self-center mr-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M8 2C4.262 2 1 4.57 1 8c0 1.86.98 3.486 2.455 4.566a3.472 3.472 0 0 1-.469 1.26.75.75 0 0 0 .713 1.14 6.961 6.961 0 0 0 3.06-1.06c.403.062.818.094 1.241.094 3.738 0 7-2.57 7-6s-3.262-6-7-6ZM5 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm7-1a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</div>
+								<div class=" self-center">{$i18n.t('Chats')}</div>
+							</button>
+						{:else if tabId === 'account'}
+							<button
+								class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+								'account'
+									? 'bg-gray-100 dark:bg-gray-800'
+									: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
+								on:click={() => {
+									selectedTab = 'account';
+								}}
+							>
+								<div class=" self-center mr-2">
+									<svg
+										xmlns="http://www.w3.org/2000/svg"
+										viewBox="0 0 16 16"
+										fill="currentColor"
+										class="w-4 h-4"
+									>
+										<path
+											fill-rule="evenodd"
+											d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-5-2a2 2 0 1 1-4 0 2 2 0 0 1 4 0ZM8 9c-1.825 0-3.422.977-4.295 2.437A5.49 5.49 0 0 0 8 13.5a5.49 5.49 0 0 0 4.294-2.063A4.997 4.997 0 0 0 8 9Z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</div>
+								<div class=" self-center">{$i18n.t('Account')}</div>
+							</button>
+						{:else if tabId === 'about'}
+							<button
+								class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+								'about'
+									? 'bg-gray-100 dark:bg-gray-800'
+									: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
+								on:click={() => {
+									selectedTab = 'about';
+								}}
+							>
+								<div class=" self-center mr-2">
+									<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="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+											clip-rule="evenodd"
+										/>
+									</svg>
+								</div>
+								<div class=" self-center">{$i18n.t('About')}</div>
+							</button>
+						{:else if tabId === 'admin'}
+							{#if $user.role === 'admin'}
+								<button
+									class="px-2.5 py-2 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
+									'admin'
+										? 'bg-gray-100 dark:bg-gray-800'
+										: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
+									on:click={async () => {
+										await goto('/admin/settings');
+										show = false;
+									}}
+								>
+									<div class=" self-center mr-2">
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											viewBox="0 0 24 24"
+											fill="currentColor"
+											class="size-4"
+										>
+											<path
+												fill-rule="evenodd"
+												d="M4.5 3.75a3 3 0 0 0-3 3v10.5a3 3 0 0 0 3 3h15a3 3 0 0 0 3-3V6.75a3 3 0 0 0-3-3h-15Zm4.125 3a2.25 2.25 0 1 0 0 4.5 2.25 2.25 0 0 0 0-4.5Zm-3.873 8.703a4.126 4.126 0 0 1 7.746 0 .75.75 0 0 1-.351.92 7.47 7.47 0 0 1-3.522.877 7.47 7.47 0 0 1-3.522-.877.75.75 0 0 1-.351-.92ZM15 8.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15ZM14.25 12a.75.75 0 0 1 .75-.75h3.75a.75.75 0 0 1 0 1.5H15a.75.75 0 0 1-.75-.75Zm.75 2.25a.75.75 0 0 0 0 1.5h3.75a.75.75 0 0 0 0-1.5H15Z"
+												clip-rule="evenodd"
+											/>
+										</svg>
+									</div>
+									<div class=" self-center">{$i18n.t('Admin Settings')}</div>
+								</button>
+							{/if}
 						{/if}
-					{/if}
-				{/each}
+					{/each}
+				{:else}
+					<div class="text-center text-gray-500 mt-4">
+						{$i18n.t('No results found')}
+					</div>
+				{/if}
 			</div>
 			<div class="flex-1 md:min-h-[28rem]">
 				{#if selectedTab === 'general'}