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,16 +136,8 @@
 				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"
 			>
-				<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">
+				<!-- <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"
@@ -111,188 +146,227 @@
 						>
 							<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"
+								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>
-					<div class=" self-center">{$i18n.t('General')}</div>
-				</button>
-
-				<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"
+					<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'
+								? 'bg-gray-100 dark:bg-gray-800'
+								: ' hover:bg-gray-100 dark:hover:bg-gray-850'}"
+							on:click={() => {
+								selectedTab = 'general';
+							}}
 						>
-							<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>
-
-				<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>
-
-				<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"
+							<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';
+							}}
 						>
-							<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>
-
-				<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"
+							<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';
+							}}
 						>
-							<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>
-
-				<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"
+							<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';
+							}}
 						>
-							<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>
-
-				{#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}
-
-				<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"
+							<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';
+							}}
 						>
-							<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 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}
+				{/each}
 			</div>
 			<div class="flex-1 md:min-h-[28rem]">
 				{#if selectedTab === 'general'}