feat: search in settings

src/lib/components/chat/SettingsModal.svelte

@@ -15,11 +15,54 @@
 	import Chats from './Settings/Chats.svelte';
 	import User from '../icons/User.svelte';
 	import Personalization from './Settings/Personalization.svelte';
+	import SearchInput from '../layout/Sidebar/SearchInput.svelte';
 
 	const i18n = getContext('i18n');
 
 	export let show = false;
 
+	interface SettingsTab {
+		id: string;
+		title: string;
+		keywords: string[];
+	}
+
+	const searchData: SettingsTab[] = [
+		{ id: 'general', title: 'General', keywords: ['general', 'theme', 'language', 'notifications', 'system', 'systemprompt', 'prompt', 'advanced', 'settings', 'defaultsettings', 'configuration', 'systemsettings', 'notificationsettings', 'systempromptconfig', 'languageoptions', 'defaultparameters', 'systemparameters'] },
+		{ id: 'interface', title: 'Interface', keywords: ['defaultmodel', 'selectmodel', 'ui', 'userinterface', 'display', 'layout', 'design', 'landingpage', 'landingpagemode', 'default', 'chat', 'chatbubble', 'chatui', 'username', 'showusername', 'displayusername', 'widescreen', 'widescreenmode', 'fullscreen', 'expandmode', 'chatdirection', 'lefttoright', 'ltr', 'righttoleft', 'rtl', 'notifications', 'toast', 'toastnotifications', 'largechunks', 'streamlargechunks', 'scroll', 'scrollonbranchchange', 'scrollbehavior', 'richtext', 'richtextinput', 'background', 'chatbackground', 'chatbackgroundimage', 'backgroundimage', 'uploadbackground', 'resetbackground', 'titleautogen', 'titleautogeneration', 'autotitle', 'chattags', 'autochattags', 'responseautocopy', 'clipboard', 'location', 'userlocation', 'userlocationaccess', 'haptic', 'hapticfeedback', 'vibration', 'voice', 'voicecontrol', 'voiceinterruption', 'call', 'emojis', 'displayemoji', 'save', 'interfaceoptions', 'interfacecustomization'] },
+		{ id: 'personalization', title: 'Personalization', keywords: ['personalization', 'memory', 'personalize', 'preferences', 'profile', 'personalsettings', 'customsettings', 'userpreferences', 'accountpreferences'] },
+		{ id: 'audio', title: 'Audio', keywords: ['audio', 'sound', 'soundsettings', 'audiocontrol', 'volume', 'speech', 'speechrecognition', 'stt', 'speechtotext', 'tts', 'texttospeech', 'playback', 'playbackspeed', 'voiceplayback', 'speechplayback', 'audiooutput', 'speechengine', 'voicecontrol', 'audioplayback', 'transcription', 'autotranscribe', 'autosend', 'speechsettings', 'audiovoice', 'voiceoptions', 'setvoice', 'nonlocalvoices', 'savesettings', 'audioconfig', 'speechconfig', 'voicerecognition', 'speechsynthesis', 'speechmode', 'voicespeed', 'speechrate', 'speechspeed', 'audioinput', 'audiofeatures', 'voicemodes'] },
+		{ id: 'chats', title: 'Chats', keywords: ['chat', 'messages', 'conversations', 'chatsettings', 'history', 'chathistory', 'messagehistory', 'messagearchive', 'convo', 'chats', 'conversationhistory', 'exportmessages', 'chatactivity'] },
+		{ id: 'account', title: 'Account', keywords: ['account', 'profile', 'security', 'privacy', 'settings', 'login', 'useraccount', 'userdata', 'api', 'apikey', 'userprofile', 'profiledetails', 'accountsettings', 'accountpreferences', 'securitysettings', 'privacysettings'] },
+		{ id: 'about', title: 'About', keywords: ['about', 'info', 'information', 'version', 'documentation', 'help', 'support', 'details', 'aboutus', 'softwareinfo', 'release', 'updates', 'updateinfo', 'versioninfo', 'aboutapp', 'terms', 'termsandconditions', 'contact', 'aboutpage'] },
+		{ id: 'admin', title: 'Admin', keywords: ['admin', 'administrator', 'adminsettings', 'adminpanel', 'systemadmin', 'administratoraccess', 'systemcontrol', 'manage', 'management', 'admincontrols', 'adminfeatures', 'usercontrol'] }
+	];
+
+	let search = '';
+	let visibleTabs = searchData.map((tab) => tab.id);
+	let searchDebounceTimeout;
+
+	const searchSettings = (query: string): string[] => {
+		const lowerCaseQuery = query.toLowerCase().trim();
+		return searchData
+			.filter(
+				(tab) =>
+					tab.title.toLowerCase().includes(lowerCaseQuery) ||
+					tab.keywords.some((keyword) => keyword.includes(lowerCaseQuery))
+			)
+			.map((tab) => tab.id);
+	};
+
+	const searchDebounceHandler = () => {
+		clearTimeout(searchDebounceTimeout);
+		searchDebounceTimeout = setTimeout(() => {
+			visibleTabs = searchSettings(search);
+			if (visibleTabs.length > 0 && !visibleTabs.includes(selectedTab)) {
+				selectedTab = visibleTabs[0];
+			}
+		}, 200);
+	};
+
 	const saveSettings = async (updated) => {
 		console.log(updated);
 		await settings.set({ ...$settings, ...updated });
@@ -93,6 +136,35 @@
 				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"
 			>
+				<!-- <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>
+					<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"
+						bind:value={search}
+						on:input={sear}
+						placeholder={$i18n.t('Search')}
+					/>
+				</div> -->
+				<SearchInput
+					bind:value={search}
+					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'
@@ -118,7 +190,7 @@
 							</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'
@@ -144,7 +216,7 @@
 							</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'
@@ -159,7 +231,7 @@
 							</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'
@@ -186,7 +258,7 @@
 							</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'
@@ -212,7 +284,7 @@
 							</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'
@@ -238,7 +310,33 @@
 							</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 ===
@@ -267,32 +365,8 @@
 								<div class=" self-center">{$i18n.t('Admin Settings')}</div>
 							</button>
 						{/if}
-
+					{/if}
-				<button
+				{/each}
-					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>
 			</div>
 			<div class="flex-1 md:min-h-[28rem]">
 				{#if selectedTab === 'general'}