From daf2295932d6ba5e0f4a176c17f61d7390974055 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sat, 12 Sep 2026 19:23:27 -0400
Subject: [PATCH] refac

---
 .../chat/Settings/Connections.svelte          | 45 ++++++-----
 .../chat/Settings/Integrations.svelte         | 76 +++++++++----------
 .../Settings/Integrations/Terminals.svelte    | 23 ++++--
 3 files changed, 81 insertions(+), 63 deletions(-)

diff --git a/src/lib/components/chat/Settings/Connections.svelte b/src/lib/components/chat/Settings/Connections.svelte
index dac2adb504..675f791ed7 100644
--- a/src/lib/components/chat/Settings/Connections.svelte
+++ b/src/lib/components/chat/Settings/Connections.svelte
@@ -9,7 +9,6 @@
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Connection from './Connections/Connection.svelte';
-	import UserSettingSection from './UserSettingSection.svelte';
 
 	import AddConnectionModal from '$lib/components/AddConnectionModal.svelte';
 
@@ -75,17 +74,22 @@
 >
 	<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">
+	<div class="flex flex-1 min-h-0 flex-col overflow-y-auto scrollbar-hover pr-1.5">
 		{#if config !== null}
-			<UserSettingSection title={$i18n.t('Manage Direct Connections')} first>
-				<div class="flex items-center justify-between gap-2.5">
-					<div class="min-w-0 text-[0.6875rem] text-gray-400 dark:text-gray-600">
-						{$i18n.t('Connect to your own OpenAI compatible API endpoints.')}
+			<section class="space-y-3" aria-labelledby="direct-connections-heading">
+				<div class="flex items-start justify-between gap-3">
+					<div class="min-w-0">
+						<h3 id="direct-connections-heading" class="text-xs text-gray-600 dark:text-gray-400">
+							{$i18n.t('Direct Connections')}
+						</h3>
+						<p class="mt-1 text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
+							{$i18n.t('Connect to your own OpenAI compatible API endpoints.')}
+						</p>
 					</div>
 
 					<Tooltip content={$i18n.t(`Add Connection`)}>
 						<button
-							class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:text-gray-700 dark:text-gray-600 dark:hover:text-gray-300"
+							class="flex size-7 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
 							aria-label={$i18n.t('Add Connection')}
 							on:click={() => {
 								showConnectionModal = true;
@@ -123,21 +127,26 @@
 						/>
 					{/each}
 				</div>
+			</section>
 
-				<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
-					<!-- LICENSE covers this Open WebUI wordmark.
+			<div class="mt-6">
+				<div
+					class="space-y-3 border-t border-gray-100/50 pt-4 text-[0.6875rem] leading-relaxed text-gray-400 dark:border-white/[0.04] dark:text-gray-600"
+				>
+					<p>
+						{$i18n.t(
+							'Connections managed through the Admin Panel are recommended for everyday use. Direct connections provide convenient access to your own endpoints, but rely on your browser session to keep requests running, making them better suited to testing and temporary use.'
+						)}
+					</p>
+					<p>
+						<!-- LICENSE covers this Open WebUI wordmark.
 						Do not alter, remove, obscure, or replace it except as LICENSE permits:
 						https://docs.openwebui.com/license. -->
-					{$i18n.t(
-						'CORS must be properly configured by the provider to allow requests from Open WebUI.'
-					)}
+						{$i18n.t(
+							'CORS must be properly configured by the provider to allow requests from Open WebUI.'
+						)}
+					</p>
 				</div>
-			</UserSettingSection>
-
-			<div class="mt-4 text-[0.6875rem] text-gray-400 dark:text-gray-600">
-				{$i18n.t(
-					'Connections managed through the Admin Panel are recommended for everyday use. Direct connections provide convenient access to your own endpoints, but rely on your browser session to keep requests running, making them better suited to testing and temporary use.'
-				)}
 			</div>
 		{:else}
 			<div class="flex h-full justify-center">
diff --git a/src/lib/components/chat/Settings/Integrations.svelte b/src/lib/components/chat/Settings/Integrations.svelte
index ea3cc1dbc0..6a82c7b947 100644
--- a/src/lib/components/chat/Settings/Integrations.svelte
+++ b/src/lib/components/chat/Settings/Integrations.svelte
@@ -14,7 +14,6 @@
 	import Plus from '$lib/components/icons/Plus.svelte';
 	import Connection from './Tools/Connection.svelte';
 	import Terminals from './Integrations/Terminals.svelte';
-	import UserSettingSection from './UserSettingSection.svelte';
 
 	import AddToolServerModal from '$lib/components/AddToolServerModal.svelte';
 
@@ -35,7 +34,6 @@
 	let servers: ToolServerConnection[] | null = null;
 	let terminalServerConfigs: TerminalServerConfig[] = [];
 	let showConnectionModal = false;
-	const helpTextClass = 'text-[0.6875rem] text-gray-400 dark:text-gray-600';
 
 	const addConnectionHandler = async (server: ToolServerConnection) => {
 		servers = [...(servers ?? []), server];
@@ -104,19 +102,24 @@
 >
 	<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">
+	<div class="flex flex-1 min-h-0 flex-col overflow-y-auto scrollbar-hover pr-1.5">
 		{#if servers !== null}
-			<UserSettingSection title={$i18n.t('Tools')} first>
+			<section aria-labelledby="tool-servers-heading">
 				<div>
-					<div class="mb-2 flex items-center justify-between">
-						<div class="text-xs text-gray-600 dark:text-gray-400">
-							{$i18n.t('External Tool Servers')}
+					<div class="mb-3 flex items-start justify-between gap-3">
+						<div class="min-w-0">
+							<h3 id="tool-servers-heading" class="text-xs text-gray-600 dark:text-gray-400">
+								{$i18n.t('External Tool Servers')}
+							</h3>
+							<p class="mt-1 text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
+								{$i18n.t('Connect to your own OpenAPI compatible external tool servers.')}
+							</p>
 						</div>
 
 						<Tooltip content={$i18n.t('Add Connection')}>
 							<button
 								aria-label={$i18n.t('Add Connection')}
-								class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
+								class="flex size-7 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
 								on:click={() => (showConnectionModal = true)}
 								type="button"
 							>
@@ -140,49 +143,42 @@
 					</div>
 
 					{#if (servers ?? []).length === 0}
-						<div class={helpTextClass}>
+						<div class="text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
 							{$i18n.t('No tool server connections configured.')}
 						</div>
 					{/if}
 
-					<div class="mt-1 {helpTextClass}">
-						{$i18n.t('Connect to your own OpenAPI compatible external tool servers.')}
-					</div>
-					<div class={helpTextClass}>
+					<a
+						class="mt-2 inline-block text-[0.6875rem] text-gray-500 underline decoration-gray-300 underline-offset-4 hover:text-gray-700 dark:text-gray-500 dark:decoration-gray-700 dark:hover:text-gray-300"
+						href="https://github.com/open-webui/openapi-servers"
+						target="_blank"
+						rel="noopener noreferrer">{$i18n.t('Learn more about OpenAPI tool servers.')} ↗</a
+					>
+				</div>
+			</section>
+
+			<section class="mt-6" aria-labelledby="terminal-connections-heading">
+				<Terminals bind:servers={terminalServerConfigs} onChange={() => updateHandler()} />
+			</section>
+
+			<div class="mt-6">
+				<div
+					class="space-y-3 border-t border-gray-100/50 pt-4 text-[0.6875rem] leading-relaxed text-gray-400 dark:border-white/[0.04] dark:text-gray-600"
+				>
+					<p>
+						{$i18n.t(
+							'Connections managed through the Admin Panel are recommended for everyday use. Direct connections provide convenient access to your own endpoints, but rely on your browser session to keep requests running, making them better suited to testing and temporary use.'
+						)}
+					</p>
+					<p>
 						<!-- LICENSE covers this Open WebUI wordmark.
 							Do not alter, remove, obscure, or replace it except as LICENSE permits:
 							https://docs.openwebui.com/license. -->
 						{$i18n.t(
 							'CORS must be properly configured by the provider to allow requests from Open WebUI.'
 						)}
-						<a
-							class="ml-1 text-gray-500 underline hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
-							href="https://github.com/open-webui/openapi-servers"
-							target="_blank">{$i18n.t('Learn more about OpenAPI tool servers.')} ↗</a
-						>
-					</div>
+					</p>
 				</div>
-			</UserSettingSection>
-
-			<UserSettingSection title={$i18n.t('Terminal')}>
-				<Terminals bind:servers={terminalServerConfigs} onChange={() => updateHandler()} />
-
-				<div class="mt-1 {helpTextClass}">
-					{$i18n.t(
-						'Connect to Open Terminal instances to browse files and use them as always-on tools. Only one can be active at a time.'
-					)}
-				</div>
-				<a
-					class="mt-0.5 block text-[0.6875rem] text-gray-500 underline hover:text-gray-700 dark:text-gray-500 dark:hover:text-gray-300"
-					href="https://github.com/open-webui/open-terminal"
-					target="_blank">{$i18n.t('Learn more about Open Terminal')} ↗</a
-				>
-			</UserSettingSection>
-
-			<div class="mt-4 {helpTextClass}">
-				{$i18n.t(
-					'Connections managed through the Admin Panel are recommended for everyday use. Direct connections provide convenient access to your own endpoints, but rely on your browser session to keep requests running, making them better suited to testing and temporary use.'
-				)}
 			</div>
 		{:else}
 			<div class="flex h-full justify-center">
diff --git a/src/lib/components/chat/Settings/Integrations/Terminals.svelte b/src/lib/components/chat/Settings/Integrations/Terminals.svelte
index bc9ea39ce3..4bf74682c8 100644
--- a/src/lib/components/chat/Settings/Integrations/Terminals.svelte
+++ b/src/lib/components/chat/Settings/Integrations/Terminals.svelte
@@ -57,13 +57,20 @@
 />
 
 <div>
-	<div class="flex justify-between items-center mb-2">
-		<div class="flex items-center gap-2">
-			<div class="text-xs text-gray-600 dark:text-gray-400">{$i18n.t('Open Terminal')}</div>
+	<div class="flex justify-between items-start gap-3 mb-3">
+		<div class="min-w-0">
+			<h3 id="terminal-connections-heading" class="text-xs text-gray-600 dark:text-gray-400">
+				{$i18n.t('Open Terminal')}
+			</h3>
+			<p class="mt-1 text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
+				{$i18n.t(
+					'Connect to Open Terminal instances to browse files and use them as always-on tools. Only one can be active at a time.'
+				)}
+			</p>
 		</div>
 		<Tooltip content={$i18n.t('Add Connection')}>
 			<button
-				class="flex size-6 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
+				class="flex size-7 shrink-0 items-center justify-center rounded-lg text-gray-400 transition-colors hover:bg-black/5 hover:text-gray-900 dark:text-gray-600 dark:hover:bg-white/5 dark:hover:text-white"
 				on:click={() => (showAddModal = true)}
 				type="button"
 				aria-label={$i18n.t('Add Connection')}
@@ -86,8 +93,14 @@
 	</div>
 
 	{#if servers.length === 0}
-		<div class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
+		<div class="text-[0.6875rem] leading-relaxed text-gray-400 dark:text-gray-600">
 			{$i18n.t('No terminal connections configured.')}
 		</div>
 	{/if}
+	<a
+		class="mt-2 inline-block text-[0.6875rem] text-gray-500 underline decoration-gray-300 underline-offset-4 hover:text-gray-700 dark:text-gray-500 dark:decoration-gray-700 dark:hover:text-gray-300"
+		href="https://github.com/open-webui/open-terminal"
+		target="_blank"
+		rel="noopener noreferrer">{$i18n.t('Learn more about Open Terminal')} ↗</a
+	>
 </div>