refac

src/lib/components/admin/Settings.svelte

@@ -51,6 +51,18 @@
 			: 'general';
 	}
 
+	$: if (selectedTab) {
+		// scroll to selectedTab
+		scrollToTab(selectedTab);
+	}
+
+	const scrollToTab = (tabId) => {
+		const tabElement = document.getElementById(tabId);
+		if (tabElement) {
+			tabElement.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' });
+		}
+	};
+
 	onMount(() => {
 		const containerElement = document.getElementById('admin-settings-tabs-container');
 
@@ -62,6 +74,9 @@
 				}
 			});
 		}
+
+		// Scroll to the selected tab on mount
+		scrollToTab(selectedTab);
 	});
 </script>
 
@@ -71,6 +86,7 @@
 		class="tabs flex flex-row overflow-x-auto gap-2.5 max-w-full lg:gap-1 lg:flex-col lg:flex-none lg:w-40 dark:text-gray-200 text-sm font-medium text-left scrollbar-none"
 	>
 		<button
+			id="general"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 lg:flex-none flex text-right transition {selectedTab ===
 			'general'
 				? ''
@@ -97,6 +113,7 @@
 		</button>
 
 		<button
+			id="connections"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'connections'
 				? ''
@@ -121,6 +138,7 @@
 		</button>
 
 		<button
+			id="models"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'models'
 				? ''
@@ -147,6 +165,7 @@
 		</button>
 
 		<button
+			id="evaluations"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'evaluations'
 				? ''
@@ -162,6 +181,7 @@
 		</button>
 
 		<button
+			id="tools"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'tools'
 				? ''
@@ -188,6 +208,7 @@
 		</button>
 
 		<button
+			id="documents"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'documents'
 				? ''
@@ -218,6 +239,7 @@
 		</button>
 
 		<button
+			id="web"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'web'
 				? ''
@@ -242,6 +264,7 @@
 		</button>
 
 		<button
+			id="code-execution"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'code-execution'
 				? ''
@@ -268,6 +291,7 @@
 		</button>
 
 		<button
+			id="interface"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'interface'
 				? ''
@@ -294,6 +318,7 @@
 		</button>
 
 		<button
+			id="audio"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'audio'
 				? ''
@@ -321,6 +346,7 @@
 		</button>
 
 		<button
+			id="images"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'images'
 				? ''
@@ -347,6 +373,7 @@
 		</button>
 
 		<button
+			id="pipelines"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'pipelines'
 				? ''
@@ -377,6 +404,7 @@
 		</button>
 
 		<button
+			id="db"
 			class="px-0.5 py-1 min-w-fit rounded-lg flex-1 md:flex-none flex text-left transition {selectedTab ===
 			'db'
 				? ''

src/routes/(app)/admin/settings/code-execution/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/connections/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/db/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/documents/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/evaluations/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/general/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/images/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/interface/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/models/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/pipelines/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/tools/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />

src/routes/(app)/admin/settings/web/+page.svelte

@@ -1,5 +0,0 @@
-<script>
-	import Settings from '$lib/components/admin/Settings.svelte';
-</script>
-
-<Settings />