From dcc7fb1e8ef144205531829f8a56e52171c4d63d Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Sun, 26 Jul 2026 18:26:15 -0400
Subject: [PATCH] refac

---
 .../Models/Manage/ManageMultipleOllama.svelte |  7 ++--
 .../Models/Manage/ManageOllama.svelte         | 39 +++++++++----------
 .../Settings/Models/ManageModelsModal.svelte  | 22 -----------
 3 files changed, 22 insertions(+), 46 deletions(-)

diff --git a/src/lib/components/admin/Settings/Models/Manage/ManageMultipleOllama.svelte b/src/lib/components/admin/Settings/Models/Manage/ManageMultipleOllama.svelte
index fd2b5ad7cb..f4be86c561 100644
--- a/src/lib/components/admin/Settings/Models/Manage/ManageMultipleOllama.svelte
+++ b/src/lib/components/admin/Settings/Models/Manage/ManageMultipleOllama.svelte
@@ -1,5 +1,5 @@
 <script>
-	import { getContext, onMount } from 'svelte';
+	import { getContext } from 'svelte';
 	const i18n = getContext('i18n');
 
 	import ManageOllama from './ManageOllama.svelte';
@@ -11,12 +11,13 @@
 </script>
 
 {#if ollamaConfig}
-	<div class="flex-1 mb-2.5 pr-1.5 rounded-lg bg-gray-50 dark:text-gray-300 dark:bg-gray-850">
+	<div class=" mb-2 text-sm font-normal">{$i18n.t('Ollama')}</div>
+
+	<div class="flex-1 mb-2.5">
 		<SettingsSelect
 			bind:value={selectedUrlIdx}
 			className="w-full"
 			placeholder={$i18n.t('Select an Ollama instance')}
-			selectClassName="text-sm"
 		>
 			{#each ollamaConfig.OLLAMA_BASE_URLS as url, idx}
 				<option value={idx}>{url}</option>
diff --git a/src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte b/src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte
index 7d0e1a1e92..b1852ca02d 100644
--- a/src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte
+++ b/src/lib/components/admin/Settings/Models/Manage/ManageOllama.svelte
@@ -67,6 +67,13 @@
 
 	let deleteModelTag = '';
 
+	const inputClass =
+		'h-7 w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2.5 text-left text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 disabled:opacity-50 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
+	const textareaClass =
+		'w-full rounded-lg border border-gray-100/50 bg-gray-50/40 px-2.5 py-2 text-xs text-gray-700 outline-hidden transition-colors focus:border-blue-400 disabled:opacity-50 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:focus:border-blue-500';
+	const iconButtonClass =
+		'inline-flex h-7 items-center justify-center rounded-lg border border-gray-100/50 bg-gray-50/40 px-2.5 text-gray-700 transition-colors hover:bg-gray-100 disabled:cursor-not-allowed disabled:opacity-50 dark:border-white/[0.04] dark:bg-white/[0.03] dark:text-gray-300 dark:hover:bg-white/[0.06]';
+
 	const updateModelsHandler = async () => {
 		updateCancelled = false;
 		toast.info('Checking for model updates...');
@@ -642,7 +649,7 @@
 					<div class="flex w-full">
 						<div class="flex-1 mr-2">
 							<input
-								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+								class={inputClass}
 								placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
 									modelTag: 'mistral:7b'
 								})}
@@ -651,7 +658,7 @@
 						</div>
 						<Tooltip content={$i18n.t('Pull Model')} placement="top">
 							<button
-								class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
+								class={iconButtonClass}
 								on:click={() => {
 									pullModelHandler();
 								}}
@@ -809,14 +816,11 @@
 				<div>
 					<div class=" mb-2 text-sm font-normal">{$i18n.t('Delete a model')}</div>
 					<div class="flex w-full">
-						<div
-							class="flex-1 mr-2 pr-1.5 rounded-lg bg-gray-50 dark:text-gray-300 dark:bg-gray-850"
-						>
+						<div class="flex-1 mr-2">
 							<SettingsSelect
 								bind:value={deleteModelTag}
 								className="w-full"
 								placeholder={$i18n.t('Select a model')}
-								selectClassName="text-sm"
 							>
 								<option value="" disabled selected>{$i18n.t('Select a model')}</option>
 
@@ -829,7 +833,7 @@
 						</div>
 						<Tooltip content={$i18n.t('Delete Model')} placement="top">
 							<button
-								class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition"
+								class={iconButtonClass}
 								on:click={() => {
 									showModelDeleteConfirm = true;
 								}}
@@ -857,7 +861,7 @@
 					<div class="flex w-full">
 						<div class="flex-1 mr-2 flex flex-col gap-2">
 							<input
-								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden"
+								class={inputClass}
 								placeholder={$i18n.t('Enter model tag (e.g. {{modelTag}})', {
 									modelTag: 'my-modelfile'
 								})}
@@ -867,7 +871,7 @@
 
 							<textarea
 								bind:value={createModelObject}
-								class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-100 dark:bg-gray-850 outline-hidden resize-none scrollbar-hidden"
+								class="{textareaClass} resize-none scrollbar-hidden"
 								rows="6"
 								placeholder={`e.g. {"model": "my-modelfile", "from": "ollama:7b"})`}
 								disabled={createModelLoading}
@@ -877,7 +881,7 @@
 						<div class="flex self-start">
 							<Tooltip content={$i18n.t('Create Model')} placement="top">
 								<button
-									class="px-2.5 py-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg transition disabled:cursor-not-allowed"
+									class={iconButtonClass}
 									on:click={() => {
 										createModelHandler();
 									}}
@@ -987,7 +991,7 @@
 
 										<button
 											type="button"
-											class="w-full rounded-lg text-left py-2 px-4 bg-gray-50 dark:text-gray-300 dark:bg-gray-850"
+											class={inputClass}
 											on:click={() => {
 												modelUploadInputElement.click();
 											}}
@@ -1002,10 +1006,7 @@
 								{:else}
 									<div class="flex-1 {modelFileUrl !== '' ? 'mr-2' : ''}">
 										<input
-											class="w-full rounded-lg text-left py-2 px-4 bg-gray-50 dark:text-gray-300 dark:bg-gray-850 outline-hidden {modelFileUrl !==
-											''
-												? 'mr-2'
-												: ''}"
+											class={inputClass}
 											type="url"
 											required
 											bind:value={modelFileUrl}
@@ -1017,11 +1018,7 @@
 
 							{#if (modelUploadMode === 'file' && modelInputFile && modelInputFile.length > 0) || (modelUploadMode === 'url' && modelFileUrl !== '')}
 								<Tooltip content={$i18n.t('Upload Model')} placement="top">
-									<button
-										class="px-2.5 bg-gray-50 hover:bg-gray-200 text-gray-800 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-100 rounded-lg disabled:cursor-not-allowed transition"
-										type="submit"
-										disabled={modelLoading}
-									>
+									<button class={iconButtonClass} type="submit" disabled={modelLoading}>
 										{#if modelLoading}
 											<div class="self-center">
 												<svg
@@ -1080,7 +1077,7 @@
 									</div>
 									<textarea
 										bind:value={modelFileContent}
-										class="w-full rounded-lg py-2 px-4 text-sm bg-gray-50 dark:text-gray-100 dark:bg-gray-850 outline-hidden resize-none"
+										class="{textareaClass} resize-none"
 										rows="6"
 									/>
 								</div>
diff --git a/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte b/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
index dbbf516cfb..ac68484c42 100644
--- a/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
+++ b/src/lib/components/admin/Settings/Models/ManageModelsModal.svelte
@@ -63,28 +63,6 @@
 					</div>
 				{:else if selected !== null}
 					<div class=" flex w-full flex-col">
-						<div
-							class="flex gap-1 scrollbar-none overflow-x-auto w-fit text-center text-sm font-normal rounded-full bg-transparent dark:text-gray-200"
-						>
-							<button
-								class="min-w-fit p-1.5 {selected === 'ollama'
-									? ''
-									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-								on:click={() => {
-									selected = 'ollama';
-								}}>{$i18n.t('Ollama')}</button
-							>
-
-							<!-- <button
-								class="min-w-fit p-1.5 {selected === 'llamacpp'
-									? ''
-									: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition"
-								on:click={() => {
-									selected = 'llamacpp';
-								}}>{$i18n.t('Llama.cpp')}</button
-							> -->
-						</div>
-
 						<div class=" px-1.5 py-1">
 							{#if selected === 'ollama'}
 								<ManageMultipleOllama {ollamaConfig} />