refac

src/lib/components/admin/Settings.svelte

@@ -307,8 +307,6 @@
 		}, 100);
 	};
 
-	$: selectedTabTitle = allSettings.find((tab) => tab.id === selectedTab)?.title ?? 'Settings';
-
 	const tabButtonClass = (active) =>
 		`flex items-center gap-1.5 h-7 px-2 lg:w-full shrink-0 rounded-lg text-xs text-left transition-colors duration-75 select-none ${
 			active
@@ -394,12 +392,6 @@
 
 	<div class="flex-1 min-h-0 p-4 lg:px-5 flex flex-col">
 		<div class="w-full h-full min-h-0 flex flex-col">
-			{#if selectedTab !== 'models'}
-				<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
-					{$i18n.t(selectedTabTitle)}
-				</h2>
-			{/if}
-
 			<div class="flex-1 min-h-0 overflow-hidden">
 				{#if selectedTab === 'general'}
 					<General

src/lib/components/admin/Settings/Audio.svelte

@@ -233,6 +233,8 @@
 		dispatch('save');
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Audio')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		<div class="flex flex-col gap-3">
 			<div>

src/lib/components/admin/Settings/Authentication.svelte

@@ -118,6 +118,10 @@
 </script>
 
 <form class="flex h-full flex-col justify-between text-sm" on:submit|preventDefault={submitHandler}>
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+		{$i18n.t('Authentication')}
+	</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if adminConfig !== null}
 			<AdminSettingSection title={$i18n.t('User Access')} first>

src/lib/components/admin/Settings/CodeExecution.svelte

@@ -47,6 +47,10 @@
 		saveHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+		{$i18n.t('Code Execution')}
+	</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if config}
 			<AdminSettingSection first>

src/lib/components/admin/Settings/Connections.svelte

@@ -218,6 +218,8 @@
 />
 
 <form class="flex h-full flex-col justify-between text-sm" on:submit|preventDefault={submitHandler}>
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Connections')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if ENABLE_OPENAI_API !== null && ENABLE_OLLAMA_API !== null && connectionsConfig !== null}
 			<AdminSettingSection first>

src/lib/components/admin/Settings/Database.svelte

@@ -49,6 +49,8 @@
 </script>
 
 <div class="flex flex-col h-full justify-between text-sm">
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Database')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		<input
 			id="config-json-input"

src/lib/components/admin/Settings/Documents.svelte

@@ -374,6 +374,8 @@
 		submitHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Documents')}</h2>
+
 	{#if RAGConfig}
 		<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 			<div class="">

src/lib/components/admin/Settings/Evaluations.svelte

@@ -104,6 +104,8 @@
 		dispatch('save');
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Evaluations')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if evaluationConfig !== null}
 			<AdminSettingSection first>

src/lib/components/admin/Settings/General.svelte

@@ -84,6 +84,8 @@
 		updateHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('General')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if adminConfig !== null}
 			<AdminSettingSection first>

src/lib/components/admin/Settings/Images.svelte

@@ -289,6 +289,8 @@
 		saveHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Images')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if config}
 			<div>

src/lib/components/admin/Settings/Integrations.svelte

@@ -161,6 +161,8 @@
 		updateHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Integrations')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if servers !== null}
 			<AdminSettingSection title={$i18n.t('Tools')} first>

src/lib/components/admin/Settings/Interface.svelte

@@ -108,6 +108,10 @@
 			dispatch('save');
 		}}
 	>
+		<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">
+			{$i18n.t('Interface')}
+		</h2>
+
 		<div class="  flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 			<div class="mb-5">
 				<div class=" mb-2 text-xs text-gray-400 dark:text-gray-600">

src/lib/components/admin/Settings/Pipelines.svelte

@@ -238,6 +238,8 @@
 		updateHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Pipelines')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if PIPELINES_LIST !== null}
 			{#if PIPELINES_LIST.length > 0}

src/lib/components/admin/Settings/Subagents.svelte

@@ -57,6 +57,8 @@
 </script>
 
 <form class="flex h-full flex-col justify-between text-sm" on:submit|preventDefault={save}>
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Sub-agents')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if loading}
 			<div class="flex justify-center py-8"><Spinner className="size-6" /></div>

src/lib/components/admin/Settings/WebSearch.svelte

@@ -152,6 +152,8 @@
 		saveHandler();
 	}}
 >
+	<h2 class="text-sm font-medium text-gray-900 dark:text-white mb-4">{$i18n.t('Web Search')}</h2>
+
 	<div class="flex-1 min-h-0 overflow-y-auto scrollbar-hover pr-1.5">
 		{#if webConfig}
 			<div class="">

src/lib/components/admin/Users/Groups.svelte

@@ -1,16 +1,10 @@
 <script>
 	import { toast } from 'svelte-sonner';
-	import dayjs from 'dayjs';
-	import relativeTime from 'dayjs/plugin/relativeTime';
-	dayjs.extend(relativeTime);
-
 	import { onMount, getContext } from 'svelte';
 	import { goto } from '$app/navigation';
 
-	import { WEBUI_NAME, config, user, showSidebar, knowledge } from '$lib/stores';
-	import { WEBUI_BASE_URL } from '$lib/constants';
+	import { user } from '$lib/stores';
 
-	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import UsersSolid from '$lib/components/icons/UsersSolid.svelte';
 	import ChevronRight from '$lib/components/icons/ChevronRight.svelte';
@@ -22,11 +16,7 @@
 	import Check from '$lib/components/icons/Check.svelte';
 	import Select from '$lib/components/common/Select.svelte';
 	import { createNewGroup, getGroups } from '$lib/apis/groups';
-	import {
-		getUserDefaultPermissions,
-		getAllUsers,
-		updateUserDefaultPermissions
-	} from '$lib/apis/users';
+	import { getUserDefaultPermissions, updateUserDefaultPermissions } from '$lib/apis/users';
 
 	const i18n = getContext('i18n');
 
@@ -146,16 +136,14 @@
 		</div>
 	</div>
 
-	<div
-		class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/30 dark:border-gray-850/30"
-	>
-		<div class="flex items-center w-full space-x-2 py-0.5 px-3.5">
-			<div class="flex flex-1">
+	<div class="space-y-1">
+		<div class="flex h-8 flex-1 items-center w-full gap-2">
+			<div class="flex min-w-0 flex-1">
 				<div class="self-center ml-1 mr-3">
 					<Search className="size-3.5" />
 				</div>
 				<input
-					class="w-full text-sm py-1 rounded-r-xl outline-hidden bg-transparent"
+					class="w-full text-sm pr-4 py-1 rounded-r-xl outline-hidden bg-transparent"
 					bind:value={query}
 					aria-label={$i18n.t('Search Groups')}
 					placeholder={$i18n.t('Search Groups')}
@@ -203,7 +191,7 @@
 		</div>
 
 		{#if filteredGroups.length !== 0}
-			<div class="my-2 px-3 grid grid-cols-1 gap-1">
+			<div class="my-1 gap-x-2 gap-y-0.5 grid lg:grid-cols-2">
 				{#each filteredGroups as group}
 					<GroupItem {group} {setGroups} {defaultPermissions} />
 				{/each}
@@ -232,7 +220,7 @@
 	{/if}
 
 	<button
-		class="flex items-center justify-between rounded-lg w-full transition mt-4"
+		class="flex items-center justify-between rounded-2xl w-full transition mt-2 px-2.5 py-2 hover:bg-gray-50/70 dark:hover:bg-gray-850/50"
 		aria-haspopup="dialog"
 		on:click={() => {
 			showDefaultPermissionsModal = true;

src/lib/components/admin/Users/Groups/GroupItem.svelte

@@ -63,32 +63,32 @@
 />
 
 <button
-	class="flex space-x-4 cursor-pointer text-left w-full px-3.5 py-2.5 dark:hover:bg-gray-850/50 hover:bg-gray-50 transition rounded-2xl"
+	class="flex space-x-4 cursor-pointer text-left w-full px-2.5 py-1.5 rounded-2xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50 transition"
 	on:click={() => {
 		showEdit = true;
 	}}
 >
 	<div class="w-full">
 		<div class="flex items-center justify-between">
-			<div class="flex-1">
-				<div class="flex items-center gap-2">
+			<div class="flex-1 min-w-0 pl-1">
+				<div class="flex items-center gap-1.5">
 					<div class="text-sm font-normal line-clamp-1">{group.name}</div>
 				</div>
 
-				<div class="flex items-center gap-2 mt-0.5 line-clamp-1">
+				<div class="flex items-center gap-1.5 px-1 line-clamp-1">
 					<div class="text-xs text-gray-500 shrink-0">
 						{$i18n.t('{{COUNT}} members', { COUNT: group?.member_count ?? 0 })}
 					</div>
 
 					{#if group?.description}
-						<div class="text-xs text-gray-500 line-clamp-1">
+						<div class="text-xs overflow-hidden text-ellipsis line-clamp-1">
 							{group.description}
 						</div>
 					{/if}
 				</div>
 			</div>
 
-			<div class="flex self-center ml-2">
+			<div class="flex self-center ml-2 p-1.5 dark:text-gray-300">
 				<Pencil className="size-3.5" />
 			</div>
 		</div>