perf: get models on mounted

Author: ibuler

src/lib/components/chat/ModelSelector/Selector.svelte

@@ -326,6 +326,13 @@
 			// Remove duplicates and sort
 			tags = Array.from(new Set(tags)).sort((a, b) => a.localeCompare(b));
 		}
+
+		models.set(
+			await getModels(
+				localStorage.token,
+				$config?.features?.enable_direct_connections && ($settings?.directConnections ?? null)
+			)
+		);
 	});
 
 	$: if (show) {

src/lib/components/layout/Sidebar.svelte

@@ -627,7 +627,7 @@
 					</Tooltip>
 				</div>
 
-				<div class="{$showSidebar ? '' : 'hidden'}">
+				<div class={$showSidebar ? '' : 'hidden'}>
 					<div class="relative {$temporaryChatEnabled ? 'opacity-20' : ''}">
 						<SearchInput
 							bind:value={search}
@@ -771,8 +771,6 @@
 			<div
 				class="sidebar px-2 pt-2 pb-2 flex justify-between space-x-1 text-gray-600 dark:text-gray-400 sticky top-0 z-10 -mb-3"
 			>
-				
-
 				<a href="/" class="flex flex-1 px-1.5 hidden" on:click={newChatHandler}>
 					<div
 						id="sidebar-webui-name"
@@ -801,19 +799,19 @@
 				</Tooltip>
 
 				<Tooltip content={$i18n.t('New Chat')} placement="bottom">
-				    <button
-				    	class="cursor-pointer p-[7px] flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition"
-				    	on:click={async () => {
-				    		selectedChatId = null;
-				    		await goto('/kael/');
-				    		const newChatButton = document.getElementById('new-chat-button');
-				    		setTimeout(() => {
-				    			newChatButton?.click();
-				    		}, 0);
-				    	}}
-				    >
-				    	<PencilSquare className="size-5" strokeWidth="2" /> 
-				    </button>
+					<button
+						class="cursor-pointer p-[7px] flex rounded-xl hover:bg-gray-100 dark:hover:bg-gray-900 transition"
+						on:click={async () => {
+							selectedChatId = null;
+							await goto('/kael/');
+							const newChatButton = document.getElementById('new-chat-button');
+							setTimeout(() => {
+								newChatButton?.click();
+							}, 0);
+						}}
+					>
+						<PencilSquare className="size-5" strokeWidth="2" />
+					</button>
 				</Tooltip>
 				<div
 					class="{scrollTop > 0
@@ -1271,7 +1269,7 @@
 				</Folder>
 			</div>
 
-			<div class="px-1.5 pt-1.5 pb-2 sticky bottom-0 z-10 -mt-3 sidebar">
+			<div class="px-1.5 pt-1.5 pb-3 sticky bottom-0 z-10 -mt-3 sidebar">
 				<div
 					class=" sidebar-bg-gradient-to-t bg-linear-to-t from-gray-50 dark:from-gray-950 to-transparent from-50% pointer-events-none absolute inset-0 -z-10 -mt-6"
 				></div>
@@ -1286,7 +1284,7 @@
 							}}
 						>
 							<div
-								class=" flex items-center rounded-xl py-2 px-2  w-full hover:bg-gray-100 dark:hover:bg-gray-900/50 transition"
+								class=" flex items-center rounded-xl py-2 px-2 w-full hover:bg-gray-100 dark:hover:bg-gray-900/50 transition"
 							>
 								<div class=" self-center mr-3">
 									<img