From c754c53906ff401fb0b8a11258704b3de4c9f0bb Mon Sep 17 00:00:00 2001
From: "Timothy J. Baek" <timothyjrbeck@gmail.com>
Date: Thu, 26 Sep 2024 04:05:28 +0200
Subject: [PATCH] refac

---
 .../components/layout/UpdateInfoToast.svelte  |  2 +-
 src/routes/(app)/+layout.svelte               | 21 +++++++++----------
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/lib/components/layout/UpdateInfoToast.svelte b/src/lib/components/layout/UpdateInfoToast.svelte
index 266ed56dd..bb75de94f 100644
--- a/src/lib/components/layout/UpdateInfoToast.svelte
+++ b/src/lib/components/layout/UpdateInfoToast.svelte
@@ -14,7 +14,7 @@
 </script>
 
 <div
-	class="flex items-start bg-[--info-bg] border border-[--info-border] text-[--info-text] rounded-lg px-3.5 py-3 text-xs"
+	class="flex items-start bg-[#F1F8FE] dark:bg-[#020C1D] border border-[3371D5] dark:border-[#03113B] text-[#3371D5] dark:text-[#6795EC] rounded-lg px-3.5 py-3 text-xs max-w-80 pr-2 w-full shadow-lg"
 >
 	<div class="flex-1 font-medium">
 		{$i18n.t(`A new version (v{{LATEST_VERSION}}) is now available.`, {
diff --git a/src/routes/(app)/+layout.svelte b/src/routes/(app)/+layout.svelte
index 794e6c383..ad2f085cf 100644
--- a/src/routes/(app)/+layout.svelte
+++ b/src/routes/(app)/+layout.svelte
@@ -46,6 +46,7 @@
 	import { compareVersion } from '$lib/utils';
 
 	import UpdateInfoToast from '$lib/components/layout/UpdateInfoToast.svelte';
+	import { fade } from 'svelte/transition';
 
 	const i18n = getContext('i18n');
 
@@ -53,6 +54,8 @@
 	let DB = null;
 	let localDBChats = [];
 
+	let version;
+
 	const getModels = async () => {
 		return _getModels(localStorage.token);
 	};
@@ -216,28 +219,24 @@
 	});
 
 	const checkForVersionUpdates = async () => {
-		const version = await getVersionUpdates(localStorage.token).catch((error) => {
+		version = await getVersionUpdates(localStorage.token).catch((error) => {
 			return {
 				current: WEBUI_VERSION,
 				latest: WEBUI_VERSION
 			};
 		});
-
-		if (compareVersion(version.latest, version.current)) {
-			toast.custom(UpdateInfoToast, {
-				duration: Number.POSITIVE_INFINITY,
-				position: 'bottom-right',
-				componentProps: {
-					version
-				}
-			});
-		}
 	};
 </script>
 
 <SettingsModal bind:show={$showSettings} />
 <ChangelogModal bind:show={$showChangelog} />
 
+{#if version && compareVersion(version.latest, version.current)}
+	<div class=" absolute bottom-8 right-8 z-50" in:fade={{ duration: 100 }}>
+		<UpdateInfoToast {version} />
+	</div>
+{/if}
+
 <div class="app relative">
 	<div
 		class=" text-gray-700 dark:text-gray-100 bg-white dark:bg-gray-900 h-screen max-h-[100dvh] overflow-auto flex flex-row"