enh: show logs button

src/main.ts

@@ -169,13 +169,13 @@ if (!gotTheLock) {
 		menuTemplate.push({
 			label: 'Action',
 			submenu: [
-				{
-					label: 'Home',
-					accelerator: process.platform === 'darwin' ? 'Cmd+H' : 'Ctrl+H',
-					click: () => {
-						loadDefaultView();
-					}
-				},
+				// {
+				// 	label: 'Home',
+				// 	accelerator: process.platform === 'darwin' ? 'Cmd+H' : 'Ctrl+H',
+				// 	click: () => {
+				// 		loadDefaultView();
+				// 	}
+				// },
 				{
 					label: 'Uninstall',
 					click: () => {
@@ -194,7 +194,9 @@ if (!gotTheLock) {
 
 		const trayMenu = Menu.buildFromTemplate([
 			{
-				label: 'Show Application',
+				label: 'Show Open WebUI',
+				accelerator: 'CommandOrControl+Alt+O',
+
 				click: () => {
 					mainWindow.show(); // Show the main window when clicked
 				}

src/render/App.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { installStatus, serverStatus, serverStartedAt } from './lib/stores';
+	import { installStatus, serverStatus, serverStartedAt, serverLogs } from './lib/stores';
 
 	import Main from './lib/components/Main.svelte';
 
+	let logs = [];
+
 	onMount(async () => {
 		window.addEventListener('message', (event) => {
 			// Ensure the message is coming from a trusted origin
@@ -49,6 +51,8 @@
 
 			window.electronAPI.onLog((log) => {
 				console.log('Electron log:', log);
+				logs.push(log);
+				serverLogs.set(logs);
 			});
 		}
 	});

src/render/lib/components/Main.svelte

@@ -2,7 +2,7 @@
 	import { onMount, tick } from 'svelte';
 	import { fly } from 'svelte/transition';
 
-	import { installStatus, serverStatus, serverStartedAt } from '../stores';
+	import { installStatus, serverStatus, serverStartedAt, serverLogs } from '../stores';
 
 	import Spinner from './common/Spinner.svelte';
 	import ArrowRightCircle from './icons/ArrowRightCircle.svelte';
@@ -12,6 +12,8 @@
 	let mounted = false;
 	let currentTime = Date.now();
 
+	let showLogs = false;
+
 	let installing = false;
 	const continueHandler = async () => {
 		if (window?.electronAPI) {
@@ -53,18 +55,18 @@
 		</div>
 	</div>
 {:else}
-	<div class="flex flex-row w-full h-full relative dark:text-gray-100">
+	<div class="flex flex-row w-full h-full relative dark:text-gray-100 p-1">
 		<div class="absolute top-0 left-0 w-full h-7 bg-transparent draggable"></div>
 
 		<div class="fixed right-0 m-10 z-50">
 			<div class="flex space-x-2">
-				<div class=" self-center">
+				<button class=" self-center cursor-pointer" onclick={() => (showLogs = !showLogs)}>
 					<img
 						src="./assets/images/splash.png"
 						class=" w-6 rounded-full dark:invert"
 						alt="logo"
 					/>
-				</div>
+				</button>
 			</div>
 		</div>
 
@@ -81,7 +83,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 max-w-md">
+				<div class="m-auto flex flex-col justify-center text-center">
 					{#if mounted}
 						<div
 							class=" font-medium text-5xl xl:text-7xl text-center mb-4 xl:mb-5 font-secondary"
@@ -97,6 +99,16 @@
 							To install Open WebUI, click Continue.
 						</div>
 					{/if}
+
+					{#if showLogs}
+						<div
+							class="text-xs font-mono text-left max-h-60 overflow-y-auto max-w-2xl w-full flex flex-col-reverse"
+						>
+							{#each $serverLogs.reverse() as log, idx}
+								<div class="text-xs font-mono">{log}</div>
+							{/each}
+						</div>
+					{/if}
 				</div>
 
 				<div class="absolute bottom-0 pb-10">
@@ -121,7 +133,7 @@
 							{:else if mounted}
 								<button
 									class="relative z-20 flex p-1 rounded-full bg-white/5 hover:bg-white/10 transition font-medium text-sm cursor-pointer"
-									on:click={() => {
+									onclick={() => {
 										continueHandler();
 									}}
 									in:fly={{ delay: 500, duration: 750, y: 10 }}
@@ -157,6 +169,16 @@
 									</div>
 								{/if}
 							{/if}
+
+							{#if showLogs}
+								<div
+									class="text-xs font-mono text-left max-h-60 overflow-y-auto max-w-2xl w-full flex flex-col-reverse"
+								>
+									{#each $serverLogs.reverse() as log, idx}
+										<div class="text-xs font-mono">{log}</div>
+									{/each}
+								</div>
+							{/if}
 						</div>
 					</div>
 				</div>

src/render/lib/stores.ts

@@ -4,3 +4,5 @@ export const installStatus = writable(null);
 export const serverStatus = writable(null);
 
 export const serverStartedAt = writable(null);
+
+export const serverLogs = writable([]);