From c36ab799effb00aa473c1e3f91ac210bf8811445 Mon Sep 17 00:00:00 2001
From: Timothy Jaeryang Baek <tim@openwebui.com>
Date: Fri, 17 Jan 2025 22:34:54 -0800
Subject: [PATCH] enh: toast

---
 package-lock.json                           | 11 +++++++++++
 package.json                                |  1 +
 src/render/App.svelte                       |  8 ++++++++
 src/render/lib/components/Main.svelte       |  4 ++--
 src/render/lib/components/setup/Logs.svelte | 20 ++++++++++++++++----
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index f2dab88..020177a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,6 +39,7 @@
 				"prettier-plugin-svelte": "^3.3.2",
 				"svelte": "^5.17.1",
 				"svelte-check": "^4.1.3",
+				"svelte-sonner": "^0.3.28",
 				"tailwindcss": "^4.0.0-beta.8",
 				"tippy.js": "^6.3.7",
 				"ts-node": "^10.9.2",
@@ -10843,6 +10844,16 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/svelte-sonner": {
+			"version": "0.3.28",
+			"resolved": "https://registry.npmjs.org/svelte-sonner/-/svelte-sonner-0.3.28.tgz",
+			"integrity": "sha512-K3AmlySeFifF/cKgsYNv5uXqMVNln0NBAacOYgmkQStLa/UoU0LhfAACU6Gr+YYC8bOCHdVmFNoKuDbMEsppJg==",
+			"dev": true,
+			"license": "MIT",
+			"peerDependencies": {
+				"svelte": "^3.0.0 || ^4.0.0 || ^5.0.0-next.1"
+			}
+		},
 		"node_modules/tailwindcss": {
 			"version": "4.0.0-beta.8",
 			"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.0-beta.8.tgz",
diff --git a/package.json b/package.json
index 940b58e..b11ceaa 100644
--- a/package.json
+++ b/package.json
@@ -39,6 +39,7 @@
 		"prettier-plugin-svelte": "^3.3.2",
 		"svelte": "^5.17.1",
 		"svelte-check": "^4.1.3",
+		"svelte-sonner": "^0.3.28",
 		"tailwindcss": "^4.0.0-beta.8",
 		"tippy.js": "^6.3.7",
 		"ts-node": "^10.9.2",
diff --git a/src/render/App.svelte b/src/render/App.svelte
index 28ae0c1..f152a0c 100644
--- a/src/render/App.svelte
+++ b/src/render/App.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+	import { Toaster, toast } from 'svelte-sonner';
+
 	import { onMount } from 'svelte';
 	import { installStatus, serverStatus, serverStartedAt, serverLogs } from './lib/stores';
 
@@ -61,3 +63,9 @@
 <main class="w-screen h-screen bg-gray-900">
 	<Main />
 </main>
+
+<Toaster
+	theme={window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'}
+	richColors
+	position="top-center"
+/>
diff --git a/src/render/lib/components/Main.svelte b/src/render/lib/components/Main.svelte
index 4b8c575..8a30bd5 100644
--- a/src/render/lib/components/Main.svelte
+++ b/src/render/lib/components/Main.svelte
@@ -89,7 +89,7 @@
 
 		<div class="flex-1 w-full flex justify-center relative">
 			{#if $installStatus === false}
-				<div class="m-auto flex flex-col justify-center text-center">
+				<div class="m-auto flex flex-col justify-center text-center max-w-2xl w-full">
 					{#if mounted}
 						<div
 							class=" font-medium text-5xl xl:text-7xl text-center mb-4 xl:mb-5 font-secondary"
@@ -168,7 +168,7 @@
 				</div>
 			{:else if $installStatus === true}
 				<div class="flex-1 w-full flex justify-center relative">
-					<div class="m-auto">
+					<div class="m-auto max-w-2xl w-full">
 						<div class="flex flex-col gap-3 text-center">
 							<Spinner className="size-5" />
 
diff --git a/src/render/lib/components/setup/Logs.svelte b/src/render/lib/components/setup/Logs.svelte
index 86a3781..952c774 100644
--- a/src/render/lib/components/setup/Logs.svelte
+++ b/src/render/lib/components/setup/Logs.svelte
@@ -1,16 +1,26 @@
 <script lang="ts">
+	import { toast } from 'svelte-sonner';
 	import Tooltip from '../common/Tooltip.svelte';
+	import { copyToClipboard } from '../../utils';
 
 	export let show;
 	export let logs = [];
 </script>
 
 {#if show}
-	<div class="relative max-w-full px-3">
+	<div class="relative max-w-full w-full px-3">
 		{#if logs.length > 0}
 			<div class="absolute top-0 right-0 p-1 bg-transparent text-xs font-mono">
 				<Tooltip content="Copy">
-					<button class="text-xs cursor-pointer" on:click={() => (logs = [])}>
+					<button
+						class="text-xs cursor-pointer"
+						type="button"
+						on:click={async () => {
+							await copyToClipboard(logs.join('\n'));
+
+							toast.success('Logs copied to clipboard');
+						}}
+					>
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
 							fill="none"
@@ -31,10 +41,12 @@
 		{/if}
 
 		<div
-			class="text-xs font-mono text-left max-h-40 overflow-y-auto max-w-2xl w-full flex flex-col-reverse scrollbar-hidden no-drag-region"
+			class="text-xs font-mono text-left max-h-40 overflow-auto max-w-full w-full flex flex-col-reverse scrollbar-hidden no-drag-region"
 		>
 			{#each logs.reverse() as log, idx}
-				<div class="text-xs font-mono">{log}</div>
+				<div class="text-xs font-mono whitespace-pre-wrap text-wrap max-w-full w-full">
+					{log}
+				</div>
 			{/each}
 		</div>
 	</div>