From f364b2d205460dc1b0daa02ab7601fbe9dd62342 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Mon, 16 Feb 2026 02:05:19 -0600
Subject: [PATCH] refac

---
 .../components/admin/Settings/Database.svelte | 275 +++++++-----------
 1 file changed, 105 insertions(+), 170 deletions(-)

diff --git a/src/lib/components/admin/Settings/Database.svelte b/src/lib/components/admin/Settings/Database.svelte
index 0baeb78e6c..8cc314661f 100644
--- a/src/lib/components/admin/Settings/Database.svelte
+++ b/src/lib/components/admin/Settings/Database.svelte
@@ -49,188 +49,123 @@
 	});
 </script>
 
-<form
-	class="flex flex-col h-full justify-between space-y-3 text-sm"
-	on:submit|preventDefault={async () => {
-		saveHandler();
-	}}
->
-	<div class=" space-y-3 overflow-y-scroll scrollbar-hidden h-full">
-		<div>
-			<div class=" mb-2 text-sm font-medium">{$i18n.t('Database')}</div>
+<div class="flex flex-col h-full justify-between text-sm">
+	<div class="space-y-3 overflow-y-scroll scrollbar-hidden h-full">
+		<input
+			id="config-json-input"
+			hidden
+			type="file"
+			accept=".json"
+			on:change={(e) => {
+				const file = e.target.files[0];
+				const reader = new FileReader();
 
-			<input
-				id="config-json-input"
-				hidden
-				type="file"
-				accept=".json"
-				on:change={(e) => {
-					const file = e.target.files[0];
-					const reader = new FileReader();
-
-					reader.onload = async (e) => {
-						const res = await importConfig(localStorage.token, JSON.parse(e.target.result)).catch(
-							(error) => {
-								toast.error(`${error}`);
-							}
-						);
-
-						if (res) {
-							toast.success($i18n.t('Config imported successfully'));
+				reader.onload = async (e) => {
+					const res = await importConfig(localStorage.token, JSON.parse(e.target.result)).catch(
+						(error) => {
+							toast.error(`${error}`);
 						}
-						e.target.value = null;
-					};
+					);
 
-					reader.readAsText(file);
-				}}
-			/>
+					if (res) {
+						toast.success($i18n.t('Config imported successfully'));
+					}
+					e.target.value = null;
+				};
 
-			<button
-				type="button"
-				class=" flex rounded-md py-2 px-3 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
-				on:click={async () => {
-					document.getElementById('config-json-input').click();
-				}}
-			>
-				<div class=" self-center mr-3">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 16 16"
-						fill="currentColor"
-						class="w-4 h-4"
-					>
-						<path d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z" />
-						<path
-							fill-rule="evenodd"
-							d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM8.75 7.75a.75.75 0 0 0-1.5 0v2.69L6.03 9.22a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06l-1.22 1.22V7.75Z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-				<div class=" self-center text-sm font-medium">
-					{$i18n.t('Import Config from JSON File')}
-				</div>
-			</button>
+				reader.readAsText(file);
+			}}
+		/>
 
-			<button
-				type="button"
-				class=" flex rounded-md py-2 px-3 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
-				on:click={async () => {
-					const config = await exportConfig(localStorage.token);
-					const blob = new Blob([JSON.stringify(config)], {
-						type: 'application/json'
-					});
-					saveAs(blob, `config-${Date.now()}.json`);
-				}}
-			>
-				<div class=" self-center mr-3">
-					<svg
-						xmlns="http://www.w3.org/2000/svg"
-						viewBox="0 0 16 16"
-						fill="currentColor"
-						class="w-4 h-4"
-					>
-						<path d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z" />
-						<path
-							fill-rule="evenodd"
-							d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM8.75 7.75a.75.75 0 0 0-1.5 0v2.69L6.03 9.22a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06l-1.22 1.22V7.75Z"
-							clip-rule="evenodd"
-						/>
-					</svg>
-				</div>
-				<div class=" self-center text-sm font-medium">
-					{$i18n.t('Export Config to JSON File')}
-				</div>
-			</button>
-
-			<hr class="border-gray-50 dark:border-gray-850/30 my-1" />
-
-			{#if $config?.features.enable_admin_export ?? true}
-				<div class="  flex w-full justify-between">
-					<!-- <div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Deletion')}</div> -->
+		<div>
+			<div class="mb-1 text-sm font-medium">{$i18n.t('Config')}</div>
 
+			<div>
+				<div class="py-0.5 flex w-full justify-between">
+					<div class="self-center text-xs">{$i18n.t('Import Config')}</div>
 					<button
-						class=" flex rounded-md py-1.5 px-3 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
-						type="button"
+						class="p-1 px-3 text-xs flex rounded-sm transition"
 						on:click={() => {
-							// exportAllUserChats();
-
-							downloadDatabase(localStorage.token).catch((error) => {
-								toast.error(`${error}`);
-							});
+							document.getElementById('config-json-input').click();
 						}}
+						type="button"
 					>
-						<div class=" self-center mr-3">
-							<svg
-								xmlns="http://www.w3.org/2000/svg"
-								viewBox="0 0 16 16"
-								fill="currentColor"
-								class="w-4 h-4"
-							>
-								<path d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z" />
-								<path
-									fill-rule="evenodd"
-									d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM8.75 7.75a.75.75 0 0 0-1.5 0v2.69L6.03 9.22a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06l-1.22 1.22V7.75Z"
-									clip-rule="evenodd"
-								/>
-							</svg>
-						</div>
-						<div class=" self-center text-sm font-medium">{$i18n.t('Download Database')}</div>
+						<span class="self-center">{$i18n.t('Import')}</span>
 					</button>
 				</div>
+			</div>
 
-				<button
-					class=" flex rounded-md py-2 px-3 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
-					on:click={() => {
-						exportAllUserChats();
-					}}
-				>
-					<div class=" self-center mr-3">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z" />
-							<path
-								fill-rule="evenodd"
-								d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM8.75 7.75a.75.75 0 0 0-1.5 0v2.69L6.03 9.22a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06l-1.22 1.22V7.75Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-					<div class=" self-center text-sm font-medium">
-						{$i18n.t('Export All Chats (All Users)')}
-					</div>
-				</button>
-
-				<button
-					class=" flex rounded-md py-2 px-3 w-full hover:bg-gray-200 dark:hover:bg-gray-800 transition"
-					on:click={() => {
-						exportUsers();
-					}}
-				>
-					<div class=" self-center mr-3">
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path d="M2 3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v1a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3Z" />
-							<path
-								fill-rule="evenodd"
-								d="M13 6H3v6a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V6ZM8.75 7.75a.75.75 0 0 0-1.5 0v2.69L6.03 9.22a.75.75 0 0 0-1.06 1.06l2.5 2.5a.75.75 0 0 0 1.06 0l2.5-2.5a.75.75 0 1 0-1.06-1.06l-1.22 1.22V7.75Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</div>
-					<div class=" self-center text-sm font-medium">
-						{$i18n.t('Export Users')}
-					</div>
-				</button>
-			{/if}
+			<div>
+				<div class="py-0.5 flex w-full justify-between">
+					<div class="self-center text-xs">{$i18n.t('Export Config')}</div>
+					<button
+						class="p-1 px-3 text-xs flex rounded-sm transition"
+						on:click={async () => {
+							const config = await exportConfig(localStorage.token);
+							const blob = new Blob([JSON.stringify(config)], {
+								type: 'application/json'
+							});
+							saveAs(blob, `config-${Date.now()}.json`);
+						}}
+						type="button"
+					>
+						<span class="self-center">{$i18n.t('Export')}</span>
+					</button>
+				</div>
+			</div>
 		</div>
+
+		{#if $config?.features.enable_admin_export ?? true}
+			<div>
+				<div class="mb-1 text-sm font-medium">{$i18n.t('Database')}</div>
+
+				<div>
+					<div class="py-0.5 flex w-full justify-between">
+						<div class="self-center text-xs">{$i18n.t('Download Database')}</div>
+						<button
+							class="p-1 px-3 text-xs flex rounded-sm transition"
+							on:click={() => {
+								downloadDatabase(localStorage.token).catch((error) => {
+									toast.error(`${error}`);
+								});
+							}}
+							type="button"
+						>
+							<span class="self-center">{$i18n.t('Download')}</span>
+						</button>
+					</div>
+				</div>
+
+				<div>
+					<div class="py-0.5 flex w-full justify-between">
+						<div class="self-center text-xs">{$i18n.t('Export All Chats (All Users)')}</div>
+						<button
+							class="p-1 px-3 text-xs flex rounded-sm transition"
+							on:click={() => {
+								exportAllUserChats();
+							}}
+							type="button"
+						>
+							<span class="self-center">{$i18n.t('Export')}</span>
+						</button>
+					</div>
+				</div>
+
+				<div>
+					<div class="py-0.5 flex w-full justify-between">
+						<div class="self-center text-xs">{$i18n.t('Export Users')}</div>
+						<button
+							class="p-1 px-3 text-xs flex rounded-sm transition"
+							on:click={() => {
+								exportUsers();
+							}}
+							type="button"
+						>
+							<span class="self-center">{$i18n.t('Export')}</span>
+						</button>
+					</div>
+				</div>
+			</div>
+		{/if}
 	</div>
-</form>
+</div>