From b93b81246817b651bb47bb1f5e453503649d30d0 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Wed, 21 Oct 2026 11:17:43 +0900
Subject: [PATCH] refac

---
 src/lib/components/admin/Settings/Apps.svelte |  11 +-
 .../Connections/OllamaConnection.svelte       |   4 +-
 .../Connections/OpenAIConnection.svelte       |   6 +-
 .../components/admin/Settings/Events.svelte   |  10 +-
 .../admin/Settings/ExternalKnowledge.svelte   |   9 +-
 .../admin/Settings/Integrations.svelte        |  10 +-
 .../components/admin/Settings/Models.svelte   |   7 +-
 .../admin/Settings/Subagents.svelte           |  17 +-
 .../chat/Settings/Account/Mfa.svelte          |   8 +-
 .../Settings/Account/UpdatePassword.svelte    |  10 +-
 .../Settings/Advanced/AdvancedParams.svelte   | 503 +++++++++++-------
 .../Settings/Connections/Connection.svelte    |   4 +-
 .../Integrations/Terminals/Connection.svelte  |  12 +-
 .../chat/Settings/Notifications.svelte        |  25 +-
 .../components/chat/Settings/Shortcuts.svelte |  14 +-
 .../chat/Settings/Tools/Connection.svelte     |  21 +-
 16 files changed, 409 insertions(+), 262 deletions(-)

diff --git a/src/lib/components/admin/Settings/Apps.svelte b/src/lib/components/admin/Settings/Apps.svelte
index cf605103af..8e985e7a11 100644
--- a/src/lib/components/admin/Settings/Apps.svelte
+++ b/src/lib/components/admin/Settings/Apps.svelte
@@ -78,7 +78,9 @@
 					</div>
 				{:else}<div class="flex flex-col gap-1.5">
 						{#each apps as app (app.id)}
-							<div class="flex w-full items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
+							<div
+								class="group/setting-row flex w-full items-center gap-3 text-xs text-gray-600 dark:text-gray-400"
+							>
 								<div
 									class="flex min-w-0 flex-1 items-center gap-1.5 {app.is_active
 										? ''
@@ -91,9 +93,11 @@
 											className="size-4 shrink-0 rounded!"
 										/>
 									{:else}<Grid className="size-4 shrink-0" strokeWidth="1.5" />{/if}
-									<span class="truncate"
+									<label
+										for={`app-${app.id}-control`}
+										class="truncate text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white group-has-[button[id$=-control]:enabled]/setting-row:cursor-pointer group-has-[button[id$=-control]:disabled]/setting-row:cursor-not-allowed"
 										>{app.name}
-										<span class="text-gray-400 dark:text-gray-600">{app.slug}</span></span
+										<span class="text-gray-400 dark:text-gray-600">{app.slug}</span></label
 									>
 								</div>
 								{#if app.is_active}
@@ -122,6 +126,7 @@
 												: $i18n.t('Uninstalled')}
 									>
 										{#key `${app.is_active}-${show}-${busy}`}<Switch
+												id={`app-${app.id}-control`}
 												state={app.is_active}
 												disabled={busy === app.id}
 												ariaLabel={`${$i18n.t('Enable')} ${app.name}`}
diff --git a/src/lib/components/admin/Settings/Connections/OllamaConnection.svelte b/src/lib/components/admin/Settings/Connections/OllamaConnection.svelte
index 37048ceea6..252d0f320d 100644
--- a/src/lib/components/admin/Settings/Connections/OllamaConnection.svelte
+++ b/src/lib/components/admin/Settings/Connections/OllamaConnection.svelte
@@ -45,7 +45,7 @@
 
 <ManageOllamaModal bind:show={showManageModal} urlIdx={idx} />
 
-<div class="flex gap-1.5">
+<div class="group/setting-row flex gap-1.5">
 	<Tooltip
 		className="w-full relative"
 		content={$i18n.t(`WebUI will make requests to "{{url}}/api/chat"`, {
@@ -60,7 +60,7 @@
 		{/if}
 
 		<input
-			class="w-full text-sm bg-transparent outline-hidden"
+			class="text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white w-full text-sm bg-transparent outline-hidden"
 			placeholder={$i18n.t('Enter URL (e.g. http://localhost:11434)')}
 			bind:value={url}
 			readonly={true}
diff --git a/src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte b/src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte
index c543aa73e4..75e01e188f 100644
--- a/src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte
+++ b/src/lib/components/admin/Settings/Connections/OpenAIConnection.svelte
@@ -42,7 +42,7 @@
 	}}
 />
 
-<div class="flex w-full gap-2 items-center">
+<div class="group/setting-row flex w-full gap-2 items-center">
 	<Tooltip
 		className="w-full relative"
 		content={$i18n.t(`WebUI will make requests to "{{url}}/chat/completions"`, {
@@ -58,7 +58,9 @@
 		<div class="flex w-full gap-2">
 			<div class="flex-1 relative">
 				<input
-					class=" outline-hidden w-full bg-transparent {pipeline ? 'pr-8' : ''}"
+					class="text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white outline-hidden w-full bg-transparent {pipeline
+						? 'pr-8'
+						: ''}"
 					placeholder={$i18n.t('API Base URL')}
 					bind:value={url}
 					autocomplete="off"
diff --git a/src/lib/components/admin/Settings/Events.svelte b/src/lib/components/admin/Settings/Events.svelte
index 28f0c1a8f3..5f1c00f61c 100644
--- a/src/lib/components/admin/Settings/Events.svelte
+++ b/src/lib/components/admin/Settings/Events.svelte
@@ -717,14 +717,17 @@
 
 		<div class="flex flex-col gap-1">
 			{#each webhooks as webhook}
-				<div class="flex w-full gap-2 items-center">
+				<div class="group/setting-row flex w-full gap-2 items-center">
 					<div
 						class="flex-1 min-w-0 flex gap-1.5 items-center {webhook.enabled ? '' : 'opacity-50'}"
 					>
 						<div class="outline-hidden w-full bg-transparent text-sm truncate">
-							<span class="font-normal">
+							<label
+								for={`webhook-${webhook.id}-control`}
+								class="font-normal text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white group-has-[button[id$=-control]:enabled]/setting-row:cursor-pointer group-has-[button[id$=-control]:disabled]/setting-row:cursor-not-allowed"
+							>
 								{webhook.id === 'default' ? $i18n.t('Default webhook') : webhook.name}
-							</span>
+							</label>
 							<span class="text-xs text-gray-500">
 								- {urlHost(webhook.url)} - {eventSummary(webhook)} - {targetSummary(webhook)}
 							</span>
@@ -744,6 +747,7 @@
 
 						<Tooltip content={webhook.enabled ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
 							<Switch
+								id={`webhook-${webhook.id}-control`}
 								state={webhook.enabled}
 								on:change={(event) => {
 									toggleWebhook(webhook, event.detail);
diff --git a/src/lib/components/admin/Settings/ExternalKnowledge.svelte b/src/lib/components/admin/Settings/ExternalKnowledge.svelte
index 51d5ac40b0..cff7aead05 100644
--- a/src/lib/components/admin/Settings/ExternalKnowledge.svelte
+++ b/src/lib/components/admin/Settings/ExternalKnowledge.svelte
@@ -815,7 +815,7 @@
 	<div class="flex flex-col gap-1.5">
 		{#each items as item}
 			{@const connection = connectionForItem(item)}
-			<div class="flex w-full gap-2 items-center">
+			<div class="group/setting-row flex w-full gap-2 items-center">
 				<Tooltip className="w-full relative" content={''} placement="top-start">
 					<div class="flex w-full">
 						<div
@@ -829,7 +829,11 @@
 							</Tooltip>
 
 							<div class="outline-hidden w-full bg-transparent text-xs min-w-0 line-clamp-1">
-								<span>{item.name}</span>
+								<label
+									for={`knowledge-${item.id}-control`}
+									class="text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white group-has-[button[id$=-control]:enabled]/setting-row:cursor-pointer group-has-[button[id$=-control]:disabled]/setting-row:cursor-not-allowed"
+									>{item.name}</label
+								>
 								{' '}
 								<span class="text-gray-500">
 									{item?.meta?.external?.provider ?? connection?.provider}
@@ -859,6 +863,7 @@
 						content={connection?.enabled !== false ? $i18n.t('Enabled') : $i18n.t('Disabled')}
 					>
 						<Switch
+							id={`knowledge-${item.id}-control`}
 							state={connection?.enabled !== false}
 							on:change={() => {
 								toggleSource(item);
diff --git a/src/lib/components/admin/Settings/Integrations.svelte b/src/lib/components/admin/Settings/Integrations.svelte
index 267849ef17..6a177d2781 100644
--- a/src/lib/components/admin/Settings/Integrations.svelte
+++ b/src/lib/components/admin/Settings/Integrations.svelte
@@ -260,7 +260,7 @@
 
 						<div class="flex flex-col gap-1.5">
 							{#each terminalConnections as connection, idx}
-								<div class="flex w-full gap-2 items-center">
+								<div class="group/setting-row flex w-full gap-2 items-center">
 									<Tooltip className="w-full relative" content={''} placement="top-start">
 										<div class="flex w-full">
 											<div
@@ -275,11 +275,12 @@
 													<Cloud className="size-4" strokeWidth="1.5" />
 												</Tooltip>
 
-												<div
-													class="outline-hidden w-full bg-transparent text-xs text-gray-700 dark:text-gray-300"
+												<label
+													for={`terminal-${idx}-control`}
+													class="outline-hidden w-full bg-transparent text-xs text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white group-has-[button[id$=-control]:enabled]/setting-row:cursor-pointer group-has-[button[id$=-control]:disabled]/setting-row:cursor-not-allowed"
 												>
 													{connection.name || connection.url || $i18n.t('New Terminal')}
-												</div>
+												</label>
 											</div>
 										</div>
 									</Tooltip>
@@ -304,6 +305,7 @@
 												: $i18n.t('Disabled')}
 										>
 											<Switch
+												id={`terminal-${idx}-control`}
 												state={connection?.enabled !== false}
 												on:change={() => {
 													terminalConnections = terminalConnections.map((c, i) =>
diff --git a/src/lib/components/admin/Settings/Models.svelte b/src/lib/components/admin/Settings/Models.svelte
index 69fde24086..fe063c1fc9 100644
--- a/src/lib/components/admin/Settings/Models.svelte
+++ b/src/lib/components/admin/Settings/Models.svelte
@@ -1028,7 +1028,7 @@
 					{#if filteredModels.length > 0}
 						{#each filteredModels as model, modelIdx (`${model.id}-${modelIdx}`)}
 							<div
-								class="flex cursor-pointer transition w-full px-2 py-1 rounded-xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50 {model
+								class="group/setting-row flex cursor-pointer transition w-full px-2 py-1 rounded-xl hover:bg-gray-50/70 dark:hover:bg-gray-850/50 {model
 									?.meta?.hidden
 									? 'opacity-50 dark:opacity-50'
 									: ''}"
@@ -1090,7 +1090,10 @@
 											<div
 												class="flex min-w-0 items-center gap-1.5 text-[0.8125rem] font-normal leading-4"
 											>
-												<span class="min-w-0 truncate">{model.name}</span>
+												<span
+													class="min-w-0 truncate text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white"
+													>{model.name}</span
+												>
 
 												<span
 													class="shrink-0 text-[0.6875rem] font-normal leading-4 {modelAccessClass(
diff --git a/src/lib/components/admin/Settings/Subagents.svelte b/src/lib/components/admin/Settings/Subagents.svelte
index 01489af535..0784df2581 100644
--- a/src/lib/components/admin/Settings/Subagents.svelte
+++ b/src/lib/components/admin/Settings/Subagents.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import AdminSettingRow from './AdminSettingRow.svelte';
 	import { getContext, onMount } from 'svelte';
 	import { toast } from 'svelte-sonner';
 
@@ -66,12 +67,12 @@
 			<div class="flex justify-center py-8"><Spinner className="size-6" /></div>
 		{:else}
 			<div class="flex flex-col gap-2.5">
-				<label class="flex cursor-pointer items-center justify-between">
-					<span class="text-xs text-gray-600 dark:text-gray-400">
+				<AdminSettingRow let:labelId>
+					<span slot="label">
 						{$i18n.t('settings.admin.subagents.enableSubAgents.label')}
 					</span>
-					<Switch bind:state={enabled} />
-				</label>
+					<Switch ariaLabelledbyId={labelId} bind:state={enabled} />
+				</AdminSettingRow>
 				<p class="-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
 					{$i18n.t(
 						'Allow the AI to delegate tasks to sub-agents. Each sub-agent creates a real chat with full tool access. Uses additional LLM calls.'
@@ -98,12 +99,12 @@
 					</div>
 
 					<div>
-						<label class="flex cursor-pointer items-center justify-between">
-							<span class="text-xs text-gray-600 dark:text-gray-400">
+						<AdminSettingRow let:labelId>
+							<span slot="label">
 								{$i18n.t('settings.admin.subagents.enableBackgroundSubAgents.label')}
 							</span>
-							<Switch bind:state={backgroundEnabled} />
-						</label>
+							<Switch ariaLabelledbyId={labelId} bind:state={backgroundEnabled} />
+						</AdminSettingRow>
 						<p class="mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
 							{$i18n.t('settings.admin.subagents.enableBackgroundSubAgents.description')}
 						</p>
diff --git a/src/lib/components/chat/Settings/Account/Mfa.svelte b/src/lib/components/chat/Settings/Account/Mfa.svelte
index d9d428a1ad..de71c8e3c3 100644
--- a/src/lib/components/chat/Settings/Account/Mfa.svelte
+++ b/src/lib/components/chat/Settings/Account/Mfa.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import UserSettingRow from '../UserSettingRow.svelte';
 	import { onMount, getContext } from 'svelte';
 	import { mfaRequest } from '$lib/apis/auths/mfa';
 	import type { MfaManagementFlow } from '$lib/components/auth/MfaManagement.svelte';
@@ -53,20 +54,21 @@
 
 <div class="space-y-2.5 text-xs">
 	{#if status}
-		<div class="flex items-center justify-between gap-2.5">
-			<span class="text-gray-600 dark:text-gray-400"
+		<UserSettingRow let:labelId>
+			<span slot="label"
 				>{status.enabled
 					? $i18n.t('Authenticator configured')
 					: $i18n.t('Authenticator not configured')}</span
 			>
 			{#if status.required && status.enabled}<button
+					id={`${labelId}-control`}
 					type="button"
 					class={actionButtonClass}
 					on:click={() => {
 						show = !show;
 					}}>{show ? $i18n.t('Hide') : $i18n.t('Manage')}</button
 				>{/if}
-		</div>
+		</UserSettingRow>
 		<p class="text-[0.6875rem] text-gray-400 dark:text-gray-600">
 			{status.enabled
 				? $i18n.t('{{COUNT}} recovery codes remaining', { COUNT: status.recovery_codes_remaining })
diff --git a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
index cd59eaa8f1..532f10fbdc 100644
--- a/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
+++ b/src/lib/components/chat/Settings/Account/UpdatePassword.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import UserSettingRow from '../UserSettingRow.svelte';
 	import { getContext } from 'svelte';
 	import { toast } from 'svelte-sonner';
 	import { getLogoutRedirectUrl, updateUserPassword, userSignOut } from '$lib/apis/auths';
@@ -54,18 +55,19 @@
 		updatePasswordHandler();
 	}}
 >
-	<div class="flex items-center justify-between gap-2.5">
-		<div class="text-xs text-gray-600 dark:text-gray-400">
+	<UserSettingRow let:labelId>
+		<span slot="label">
 			{$i18n.t('settings.personal.account.changePassword.label')}
-		</div>
+		</span>
 		<button
+			id={`${labelId}-control`}
 			class={actionButtonClass}
 			type="button"
 			on:click={() => {
 				show = !show;
 			}}>{show ? $i18n.t('Hide') : $i18n.t('Show')}</button
 		>
-	</div>
+	</UserSettingRow>
 	<p class="mt-0.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
 		{$i18n.t('settings.personal.account.changePassword.description')}
 	</p>
diff --git a/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte b/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
index 34ae84da2a..612d42cc81 100644
--- a/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
+++ b/src/lib/components/chat/Settings/Advanced/AdvancedParams.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import UserSettingRow from '../UserSettingRow.svelte';
 	import Switch from '$lib/components/common/Switch.svelte';
 	import Textarea from '$lib/components/common/Textarea.svelte';
 	import Tooltip from '$lib/components/common/Tooltip.svelte';
@@ -120,13 +121,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class=" py-0.5 flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.streamChatResponse.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => {
 						params.stream_response =
@@ -147,7 +151,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 	</div>
 
@@ -158,13 +162,16 @@
 				placement="top-start"
 				className="inline-tooltip"
 			>
-				<div class="flex w-full justify-between">
-					<div
-						class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-					>
+				<UserSettingRow
+					let:labelId
+					className="w-full py-0.5"
+					labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+				>
+					<span slot="label">
 						{$i18n.t('settings.personal.general.parameters.streamDeltaChunkSize.label')}
-					</div>
+					</span>
 					<button
+						id={`${labelId}-control`}
 						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
@@ -179,7 +186,7 @@
 							<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 						{/if}
 					</button>
-				</div>
+				</UserSettingRow>
 			</Tooltip>
 
 			{#if (params?.stream_delta_chunk_size ?? null) !== null}
@@ -203,13 +210,16 @@
 				placement="top-start"
 				className="inline-tooltip"
 			>
-				<div class="flex w-full justify-between">
-					<div
-						class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-					>
+				<UserSettingRow
+					let:labelId
+					className="w-full py-0.5"
+					labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+				>
+					<span slot="label">
 						{$i18n.t('settings.personal.general.parameters.contextCompactionThreshold.label')}
-					</div>
+					</span>
 					<button
+						id={`${labelId}-control`}
 						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
@@ -224,7 +234,7 @@
 							<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 						{/if}
 					</button>
-				</div>
+				</UserSettingRow>
 			</Tooltip>
 
 			{#if (params?.compact_token_threshold ?? null) !== null}
@@ -256,13 +266,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class=" py-0.5 flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.functionCalling.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => {
 						if ((params?.function_calling ?? null) === null) {
@@ -284,7 +297,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 	</div>
 
@@ -294,13 +307,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.reasoningTags.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -326,7 +342,7 @@
 						<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if ![true, false, null].includes(params?.reasoning_tags ?? null) && (params?.reasoning_tags ?? []).length === 2}
@@ -364,14 +380,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.seed.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -385,7 +404,7 @@
 						<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.seed ?? null) !== null}
@@ -412,14 +431,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.stopSequence.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -433,7 +455,7 @@
 						<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.stop ?? null) !== null}
@@ -459,13 +481,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.temperature.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -479,7 +504,7 @@
 						<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.temperature ?? null) !== null}
@@ -499,13 +524,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.reasoningEffort.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -519,7 +547,7 @@
 						<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.reasoning_effort ?? null) !== null}
@@ -547,13 +575,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.logitBias.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -567,7 +598,7 @@
 						<span class="ml-2 self-center"> {$i18n.t('Custom')} </span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.logit_bias ?? null) !== null}
@@ -597,14 +628,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.maxTokens.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -618,7 +652,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.max_tokens ?? null) !== null}
@@ -642,13 +676,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.topK.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -662,7 +699,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.top_k ?? null) !== null}
@@ -705,14 +742,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.topP.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -726,7 +766,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.top_p ?? null) !== null}
@@ -748,13 +788,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.minP.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -768,7 +811,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.min_p ?? null) !== null}
@@ -790,14 +833,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.frequencyPenalty.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -811,7 +857,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.frequency_penalty ?? null) !== null}
@@ -833,14 +879,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.presencePenalty.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -854,7 +903,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.presence_penalty ?? null) !== null}
@@ -874,13 +923,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.mirostat.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -894,7 +946,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.mirostat ?? null) !== null}
@@ -917,13 +969,16 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.mirostatEta.label')}
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -937,7 +992,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.mirostat_eta ?? null) !== null}
@@ -959,14 +1014,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.mirostatTau.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -980,7 +1038,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.mirostat_tau ?? null) !== null}
@@ -1000,14 +1058,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.repeatLastN.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -1021,7 +1082,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.repeat_last_n ?? null) !== null}
@@ -1044,14 +1105,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.tfsZ.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -1065,7 +1129,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.tfs_z ?? null) !== null}
@@ -1087,14 +1151,17 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.repeatPenalty.label')}
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded transition flex-shrink-0 outline-none font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -1108,7 +1175,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.repeat_penalty ?? null) !== null}
@@ -1131,13 +1198,16 @@
 				placement="top-start"
 				className="inline-tooltip"
 			>
-				<div class="flex w-full justify-between">
-					<div
-						class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-					>
+				<UserSettingRow
+					let:labelId
+					className="w-full py-0.5"
+					labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+				>
+					<span slot="label">
 						{$i18n.t('settings.personal.general.parameters.useMmap.label')}
-					</div>
+					</span>
 					<button
+						id={`${labelId}-control`}
 						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
@@ -1151,22 +1221,23 @@
 							<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 						{/if}
 					</button>
-				</div>
+				</UserSettingRow>
 			</Tooltip>
 
 			{#if (params?.use_mmap ?? null) !== null}
-				<div class="flex justify-between items-center mt-1">
-					<div class="text-xs text-gray-500">
+				<UserSettingRow let:labelId className="mt-1">
+					<span slot="label">
 						{params.use_mmap ? $i18n.t('Enabled') : $i18n.t('Disabled')}
-					</div>
+					</span>
 					<div class=" pr-2">
 						<Switch
+							ariaLabelledbyId={labelId}
 							bind:state={params.use_mmap}
 							on:change={(event) => onParamChange('use_mmap', event.detail)}
 							ariaLabel={$i18n.t('settings.personal.general.parameters.useMmap.label')}
 						/>
-					</div>
-				</div>
+					</div></UserSettingRow
+				>
 			{/if}
 		</div>
 
@@ -1178,14 +1249,17 @@
 				placement="top-start"
 				className="inline-tooltip"
 			>
-				<div class="flex w-full justify-between">
-					<div
-						class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-					>
+				<UserSettingRow
+					let:labelId
+					className="w-full py-0.5"
+					labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+				>
+					<span slot="label">
 						{$i18n.t('settings.personal.general.parameters.useMlock.label')}
-					</div>
+					</span>
 
 					<button
+						id={`${labelId}-control`}
 						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
@@ -1199,23 +1273,24 @@
 							<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 						{/if}
 					</button>
-				</div>
+				</UserSettingRow>
 			</Tooltip>
 
 			{#if (params?.use_mlock ?? null) !== null}
-				<div class="flex justify-between items-center mt-1">
-					<div class="text-xs text-gray-500">
+				<UserSettingRow let:labelId className="mt-1">
+					<span slot="label">
 						{params.use_mlock ? $i18n.t('Enabled') : $i18n.t('Disabled')}
-					</div>
+					</span>
 
 					<div class=" pr-2">
 						<Switch
+							ariaLabelledbyId={labelId}
 							bind:state={params.use_mlock}
 							on:change={(event) => onParamChange('use_mlock', event.detail)}
 							ariaLabel={$i18n.t('settings.personal.general.parameters.useMlock.label')}
 						/>
-					</div>
-				</div>
+					</div></UserSettingRow
+				>
 			{/if}
 		</div>
 	{/if}
@@ -1226,15 +1301,18 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class=" py-0.5 flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.think.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => {
 						if ((params?.think ?? null) === null) {
@@ -1260,7 +1338,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Default')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if typeof params.think === 'string'}
@@ -1286,15 +1364,18 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class=" py-0.5 flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.format.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
-				</div>
+				</span>
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 					on:click={() => {
 						params.format = (params?.format ?? null) === null ? 'json' : null;
@@ -1308,7 +1389,7 @@
 						<span class="ml-2 self-center">{$i18n.t('JSON')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.format ?? null) !== null}
@@ -1332,16 +1413,19 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.numKeep.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -1355,7 +1439,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.num_keep ?? null) !== null}
@@ -1377,16 +1461,19 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.numCtx.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -1400,7 +1487,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.num_ctx ?? null) !== null}
@@ -1424,16 +1511,19 @@
 			placement="top-start"
 			className="inline-tooltip"
 		>
-			<div class="flex w-full justify-between">
-				<div
-					class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-				>
+			<UserSettingRow
+				let:labelId
+				className="w-full py-0.5"
+				labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+			>
+				<span slot="label">
 					{$i18n.t('settings.personal.general.parameters.numBatch.label')} ({$i18n.t(
 						'settings.personal.general.parameters.ollama.label'
 					)})
-				</div>
+				</span>
 
 				<button
+					id={`${labelId}-control`}
 					class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 					type="button"
 					on:click={() => {
@@ -1447,7 +1537,7 @@
 						<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 					{/if}
 				</button>
-			</div>
+			</UserSettingRow>
 		</Tooltip>
 
 		{#if (params?.num_batch ?? null) !== null}
@@ -1472,16 +1562,19 @@
 				placement="top-start"
 				className="inline-tooltip"
 			>
-				<div class="flex w-full justify-between">
-					<div
-						class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-					>
+				<UserSettingRow
+					let:labelId
+					className="w-full py-0.5"
+					labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+				>
+					<span slot="label">
 						{$i18n.t('settings.personal.general.parameters.numThread.label')} ({$i18n.t(
 							'settings.personal.general.parameters.ollama.label'
 						)})
-					</div>
+					</span>
 
 					<button
+						id={`${labelId}-control`}
 						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
@@ -1495,7 +1588,7 @@
 							<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 						{/if}
 					</button>
-				</div>
+				</UserSettingRow>
 			</Tooltip>
 
 			{#if (params?.num_thread ?? null) !== null}
@@ -1518,16 +1611,19 @@
 				placement="top-start"
 				className="inline-tooltip"
 			>
-				<div class="flex w-full justify-between">
-					<div
-						class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-					>
+				<UserSettingRow
+					let:labelId
+					className="w-full py-0.5"
+					labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+				>
+					<span slot="label">
 						{$i18n.t('settings.personal.general.parameters.numGpu.label')} ({$i18n.t(
 							'settings.personal.general.parameters.ollama.label'
 						)})
-					</div>
+					</span>
 
 					<button
+						id={`${labelId}-control`}
 						class="p-1 px-3 text-xs flex rounded-sm transition shrink-0 outline-hidden font-normal text-gray-900 dark:text-gray-100"
 						type="button"
 						on:click={() => {
@@ -1541,7 +1637,7 @@
 							<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 						{/if}
 					</button>
-				</div>
+				</UserSettingRow>
 			</Tooltip>
 
 			{#if (params?.num_gpu ?? null) !== null}
@@ -1564,15 +1660,18 @@
 				placement="top-start"
 				className="inline-tooltip"
 			>
-				<div class=" py-0.5 flex w-full justify-between">
-					<div
-						class="self-center text-xs font-normal text-gray-600 dark:text-gray-400 cursor-help underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
-					>
+				<UserSettingRow
+					let:labelId
+					className="w-full py-0.5"
+					labelClassName="self-center font-normal underline decoration-dotted decoration-gray-400/70 underline-offset-4 dark:decoration-gray-500"
+				>
+					<span slot="label">
 						{$i18n.t('settings.personal.general.parameters.keepAlive.label')} ({$i18n.t(
 							'settings.personal.general.parameters.ollama.label'
 						)})
-					</div>
+					</span>
 					<button
+						id={`${labelId}-control`}
 						class="p-1 px-3 text-xs flex rounded-sm transition font-normal text-gray-900 dark:text-gray-100"
 						on:click={() => {
 							params.keep_alive = (params?.keep_alive ?? null) === null ? '5m' : null;
@@ -1586,7 +1685,7 @@
 							<span class="ml-2 self-center">{$i18n.t('Custom')}</span>
 						{/if}
 					</button>
-				</div>
+				</UserSettingRow>
 			</Tooltip>
 
 			{#if (params?.keep_alive ?? null) !== null}
diff --git a/src/lib/components/chat/Settings/Connections/Connection.svelte b/src/lib/components/chat/Settings/Connections/Connection.svelte
index 4de00f663a..ebad9f419b 100644
--- a/src/lib/components/chat/Settings/Connections/Connection.svelte
+++ b/src/lib/components/chat/Settings/Connections/Connection.svelte
@@ -40,7 +40,7 @@
 	}}
 />
 
-<div class="flex w-full items-center gap-3">
+<div class="group/setting-row flex w-full items-center gap-3">
 	<Tooltip
 		className="w-full relative"
 		content={$i18n.t(`WebUI will make requests to "{{url}}/chat/completions"`, {
@@ -56,7 +56,7 @@
 		<div class="flex w-full gap-2">
 			<div class="flex-1 relative">
 				<input
-					class={`h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs text-gray-700 outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:placeholder:text-gray-700 dark:focus:border-blue-500 ${pipeline ? 'pr-8' : ''}`}
+					class={`text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2 text-xs outline-hidden transition-colors placeholder:text-gray-300 focus:border-blue-400 dark:border-white/[0.04] dark:bg-white/[0.03] dark:placeholder:text-gray-700 dark:focus:border-blue-500 ${pipeline ? 'pr-8' : ''}`}
 					placeholder={$i18n.t('API Base URL')}
 					bind:value={url}
 					autocomplete="off"
diff --git a/src/lib/components/chat/Settings/Integrations/Terminals/Connection.svelte b/src/lib/components/chat/Settings/Integrations/Terminals/Connection.svelte
index 93db7fd2dc..e0b55c66e8 100644
--- a/src/lib/components/chat/Settings/Integrations/Terminals/Connection.svelte
+++ b/src/lib/components/chat/Settings/Integrations/Terminals/Connection.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { v4 as uuidv4 } from 'uuid';
+	const settingId = `connection-${uuidv4()}`;
 	import { getContext } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import type { i18n as i18nType } from 'i18next';
@@ -50,7 +52,7 @@
 	}}
 />
 
-<div class="flex w-full gap-2 items-center">
+<div class="group/setting-row flex w-full gap-2 items-center">
 	<Tooltip className="w-full relative" content={''} placement="top-start">
 		<div class="flex w-full">
 			<div
@@ -60,9 +62,12 @@
 					<Cloud className="size-4" strokeWidth="1.5" />
 				</Tooltip>
 
-				<div class="outline-hidden w-full bg-transparent text-xs text-gray-700 dark:text-gray-300">
+				<label
+					for={`${settingId}-control`}
+					class="outline-hidden w-full bg-transparent text-xs text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white group-has-[button[id$=-control]:enabled]/setting-row:cursor-pointer group-has-[button[id$=-control]:disabled]/setting-row:cursor-not-allowed"
+				>
 					{connection.name || connection.url || $i18n.t('New Terminal')}
-				</div>
+				</label>
 			</div>
 		</div>
 	</Tooltip>
@@ -82,6 +87,7 @@
 
 		<Tooltip content={connection?.enabled ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
 			<Switch
+				id={`${settingId}-control`}
 				state={connection?.enabled}
 				on:change={() => (connection?.enabled ? onDisable() : onEnable())}
 			/>
diff --git a/src/lib/components/chat/Settings/Notifications.svelte b/src/lib/components/chat/Settings/Notifications.svelte
index df8d5ee126..bedb870331 100644
--- a/src/lib/components/chat/Settings/Notifications.svelte
+++ b/src/lib/components/chat/Settings/Notifications.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import UserSettingRow from './UserSettingRow.svelte';
 	import { canUseNotificationTargets } from '$lib/utils/settings-access';
 	import { getContext, onMount } from 'svelte';
 	import type { Writable } from 'svelte/store';
@@ -197,32 +198,34 @@
 		</h2>
 
 		<div class="flex flex-col gap-2.5">
-			<label class="flex cursor-pointer items-center justify-between">
-				<span class="text-xs text-gray-600 dark:text-gray-400">
+			<UserSettingRow let:labelId>
+				<span slot="label">
 					{$i18n.t('settings.personal.notifications.browserNotifications.label')}
 				</span>
 				<Switch
+					ariaLabelledbyId={labelId}
 					bind:state={notificationEnabled}
 					ariaLabel={$i18n.t('settings.personal.notifications.browserNotifications.label')}
 					on:change={toggleNotifications}
 				/>
-			</label>
+			</UserSettingRow>
 			<p class="-mt-1 text-[0.6875rem] text-gray-400 dark:text-gray-600">
 				{$i18n.t('Allow browser notifications for completed responses.')}
 			</p>
 
-			<label class="flex cursor-pointer items-center justify-between">
-				<span class="text-xs text-gray-600 dark:text-gray-400">
+			<UserSettingRow let:labelId>
+				<span slot="label">
 					{$i18n.t('settings.personal.notifications.notificationSound.label')}
 				</span>
 				<Switch
+					ariaLabelledbyId={labelId}
 					bind:state={notificationSound}
 					ariaLabel={$i18n.t('settings.personal.notifications.notificationSound.label')}
 					on:change={() => {
 						saveSettings({ notificationSound });
 					}}
 				/>
-			</label>
+			</UserSettingRow>
 
 			{#if canUseWebhooks}
 				<div class="mt-3 flex items-center justify-between">
@@ -253,12 +256,15 @@
 								.filter((event) => target.events.includes(event.event))
 								.map((event) => $i18n.t(event.label))
 								.join(', ')}
-							<div class="flex items-center gap-3 px-1 py-1.5">
+							<div class="group/setting-row flex items-center gap-3 px-1 py-1.5">
 								<div class="min-w-0 flex-1">
 									<div class="flex min-w-0 items-center gap-2">
-										<span class="truncate text-[0.71875rem] text-gray-700 dark:text-gray-300">
+										<label
+											for={`notification-${target.id}-control`}
+											class="truncate text-[0.71875rem] text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white group-has-[button[id$=-control]:enabled]/setting-row:cursor-pointer group-has-[button[id$=-control]:disabled]/setting-row:cursor-not-allowed"
+										>
 											{target.id}
-										</span>
+										</label>
 										<span class="shrink-0 text-[0.625rem] text-gray-400 dark:text-gray-600">
 											{$i18n.t('Webhook')}
 										</span>
@@ -326,6 +332,7 @@
 
 								<div class="flex w-9 shrink-0 justify-end">
 									<Switch
+										id={`notification-${target.id}-control`}
 										state={target.enabled}
 										ariaLabel={$i18n.t('Enabled')}
 										on:change={(event) => patchTarget(target, { enabled: event.detail })}
diff --git a/src/lib/components/chat/Settings/Shortcuts.svelte b/src/lib/components/chat/Settings/Shortcuts.svelte
index 1a10820d6c..0f37180928 100644
--- a/src/lib/components/chat/Settings/Shortcuts.svelte
+++ b/src/lib/components/chat/Settings/Shortcuts.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import UserSettingRow from './UserSettingRow.svelte';
 	import { getContext, onMount } from 'svelte';
 	import type { Writable } from 'svelte/store';
 	import { updateUserSettings } from '$lib/apis/users';
@@ -119,17 +120,14 @@
 	</div>
 
 	<div class="mb-3">
-		<div class="flex items-center justify-between gap-2.5">
-			<div
-				id="enable-keyboard-shortcuts-label"
-				class="min-w-0 text-xs text-gray-600 dark:text-gray-400"
-			>
+		<UserSettingRow let:labelId>
+			<span slot="label">
 				{$i18n.t('settings.personal.shortcuts.enableKeyboardShortcuts.label')}
-			</div>
+			</span>
 
 			<div class="flex shrink-0 items-center justify-end gap-1.5">
 				<Switch
-					ariaLabelledbyId="enable-keyboard-shortcuts-label"
+					ariaLabelledbyId={labelId}
 					tooltip={true}
 					bind:state={enableKeyboardShortcuts}
 					on:change={() => {
@@ -137,7 +135,7 @@
 					}}
 				/>
 			</div>
-		</div>
+		</UserSettingRow>
 		<p class="mt-1.5 text-[0.6875rem] text-gray-400 dark:text-gray-600">
 			{$i18n.t('settings.personal.shortcuts.enableKeyboardShortcuts.description')}
 		</p>
diff --git a/src/lib/components/chat/Settings/Tools/Connection.svelte b/src/lib/components/chat/Settings/Tools/Connection.svelte
index efb020ac98..3d924f1df1 100644
--- a/src/lib/components/chat/Settings/Tools/Connection.svelte
+++ b/src/lib/components/chat/Settings/Tools/Connection.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { v4 as uuidv4 } from 'uuid';
+	const settingId = `connection-${uuidv4()}`;
 	import { getContext, tick } from 'svelte';
 	const i18n = getContext('i18n');
 
@@ -33,7 +35,9 @@
 	}}
 />
 
-<div class="flex w-full items-center gap-3 text-xs text-gray-600 dark:text-gray-400">
+<div
+	class="group/setting-row flex w-full items-center gap-3 text-xs text-gray-600 dark:text-gray-400"
+>
 	<Tooltip className="w-full relative" content={''} placement="top-start">
 		<div class="flex w-full">
 			<div
@@ -52,14 +56,20 @@
 				</Tooltip>
 
 				{#if connection?.info?.name}
-					<div class="w-full bg-transparent capitalize outline-hidden">
+					<label
+						for={`${settingId}-control`}
+						class="w-full bg-transparent capitalize outline-hidden text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white group-has-[button[id$=-control]:enabled]/setting-row:cursor-pointer group-has-[button[id$=-control]:disabled]/setting-row:cursor-not-allowed"
+					>
 						{connection?.info?.name ?? connection?.url}
 						<span class="text-gray-500">{connection?.info?.id ?? ''}</span>
-					</div>
+					</label>
 				{:else}
-					<div>
+					<label
+						for={`${settingId}-control`}
+						class="text-gray-600 dark:text-gray-400 transition-colors duration-150 group-hover/setting-row:text-gray-900 group-focus-within/setting-row:text-gray-900 dark:group-hover/setting-row:text-white dark:group-focus-within/setting-row:text-white group-has-[button[id$=-control]:enabled]/setting-row:cursor-pointer group-has-[button[id$=-control]:disabled]/setting-row:cursor-not-allowed"
+					>
 						{connection?.url}
-					</div>
+					</label>
 				{/if}
 			</div>
 		</div>
@@ -82,6 +92,7 @@
 			content={(connection?.config?.enable ?? true) ? $i18n.t('Enabled') : $i18n.t('Disabled')}
 		>
 			<Switch
+				id={`${settingId}-control`}
 				state={connection?.config?.enable ?? true}
 				on:change={() => {
 					if (!connection.config) connection.config = {};