feat: backend required error page

src/routes/+layout.svelte

@@ -11,7 +11,8 @@
 	let loaded = false;
 
 	onMount(async () => {
-		const resBackend = await fetch(`${WEBUI_API_BASE_URL}/`, {
+		// Check Backend Status
+		const res = await fetch(`${WEBUI_API_BASE_URL}/`, {
 			method: 'GET',
 			headers: {
 				'Content-Type': 'application/json'
@@ -26,13 +27,14 @@
 				return null;
 			});
 
-		console.log(resBackend);
-		await config.set(resBackend);
+		if (res) {
+			await config.set(res);
+			console.log(res);
 
-		if ($config) {
-			if ($config.auth) {
+			if ($config) {
 				if (localStorage.token) {
-					const res = await fetch(`${WEBUI_API_BASE_URL}/auths`, {
+					// Get Session User Info
+					const sessionUser = await fetch(`${WEBUI_API_BASE_URL}/auths`, {
 						method: 'GET',
 						headers: {
 							'Content-Type': 'application/json',
@@ -49,8 +51,8 @@
 							return null;
 						});
 
-					if (res) {
-						await user.set(res);
+					if (sessionUser) {
+						await user.set(sessionUser);
 					} else {
 						localStorage.removeItem('token');
 						await goto('/auth');
@@ -59,6 +61,8 @@
 					await goto('/auth');
 				}
 			}
+		} else {
+			await goto(`/error`);
 		}
 
 		await tick();
@@ -69,8 +73,9 @@
 <svelte:head>
 	<title>Ollama</title>
 </svelte:head>
-<Toaster />
 
-{#if $config !== undefined && loaded}
+{#if loaded}
 	<slot />
 {/if}
+
+<Toaster />

src/routes/error/+page.svelte

@@ -0,0 +1,44 @@
+<script>
+	import { goto } from '$app/navigation';
+	import { config } from '$lib/stores';
+	import { onMount } from 'svelte';
+
+	let loaded = false;
+
+	onMount(async () => {
+		if ($config) {
+			await goto('/');
+		}
+
+		loaded = true;
+	});
+</script>
+
+{#if loaded}
+	<div class="absolute w-full h-full flex z-50">
+		<div class="absolute rounded-xl w-full h-full backdrop-blur bg-gray-900/5 flex justify-center">
+			<div class="m-auto pb-44 flex flex-col justify-center">
+				<div class="max-w-md">
+					<div class="text-center text-2xl font-medium z-50">Ollama WebUI Backend Required</div>
+
+					<div class=" mt-4 text-center text-sm w-full">
+						Oops! It seems like your Ollama WebUI needs a little attention. <br
+							class=" hidden sm:flex"
+						/>
+						describe troubleshooting/installation, help @ discord
+
+						<!-- TODO: update text -->
+					</div>
+
+					<div class=" mt-6 mx-auto relative group w-fit">
+						<button
+							class="relative z-20 flex px-5 py-2 rounded-full bg-gray-100 hover:bg-gray-200 transition font-medium text-sm"
+						>
+							Check Again
+						</button>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+{/if}