major ui overhaul adding skeletonlabs design system

2023-07-27 09:30:30 +02:00 · 2023-07-27 09:30:30 +02:00 · 460deb3be1
commit 460deb3be1
parent 371e42e4ee
30 changed files with 994 additions and 1050 deletions
--- a/package.json
+++ b/package.json
@ -16,6 +16,7 @@
 	},
 	"devDependencies": {
 		"@playwright/test": "^1.28.1",
+		"@skeletonlabs/skeleton": "^1.10.0",
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/kit": "^1.20.4",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/app.css
+++ b/src/app.css
@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
--- a/src/app.html
+++ b/src/app.html
@ -1,9 +1,17 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="dark">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+		<link rel="manifest" href="/site.webmanifest">
+		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#603cba">
+		<meta name="apple-mobile-web-app-title" content="Nova Ai">
+		<meta name="application-name" content="Nova Ai">
+		<meta name="msapplication-TileColor" content="#603cba">
+		<meta name="theme-color" content="#ffffff">
 		%sveltekit.head%
 	</head>
 	<script>
@ -15,7 +23,7 @@
 			}
 		}	
 	  </script>
-	<body data-sveltekit-preload-data="hover">
+	<body data-theme="skeleton" data-sveltekit-preload-data="hover">
 		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/lib/components/AppBar.svelte
+++ b/src/lib/components/AppBar.svelte
@ -0,0 +1,12 @@
+<script>
+	import { AppBar } from '@skeletonlabs/skeleton';
+	import { Avatar } from '@skeletonlabs/skeleton';
+</script>
+
+<AppBar>
+	<svelte:fragment slot="lead"
+		><Avatar src="logo.png" width="w-8" rounded="rounded-full" /></svelte:fragment
+	>
+	<h1 class="h4">Nova</h1>
+	<!-- <svelte:fragment slot="trail">(actions)</svelte:fragment> -->
+</AppBar>
--- a/src/lib/components/Apps.svelte
+++ b/src/lib/components/Apps.svelte
@ -0,0 +1,17 @@
+<script>
+	const routes = [
+		{ path: '/', name: 'Home', icon: '🏠' },
+		{ path: '/wallet', name: 'Wallet', icon: '💼' },
+		{ path: '/helloearth', name: 'Hello Earth', icon: '🌍' },
+		{ path: '/login', name: 'Login', icon: '🔑' }
+	];
+</script>
+
+<div class="logo-cloud grid-cols-1 lg:!grid-cols-4 gap-1">
+	{#each routes as route, index}
+		<a class="logo-item" href={route.path}>
+			<span>{route.icon}</span>
+			<span>{route.name}</span>
+		</a>
+	{/each}
+</div>
--- a/src/lib/components/ClearMessages.svelte
+++ b/src/lib/components/ClearMessages.svelte
@ -1,14 +0,0 @@
-<script>
-	import { clearMessages } from '$lib/services/messages/messages';
-
-	function handleClear() {
-		clearMessages();
-	}
-</script>
-
-<button
-	class="px-4 py-2 ml-2 text-white bg-red-500 rounded hover:bg-red-600"
-	on:click={handleClear}
->
-	Clear
-</button>
--- a/src/lib/components/GoogleAuth.svelte
+++ b/src/lib/components/GoogleAuth.svelte
@ -6,7 +6,7 @@
 	import { createMessage } from '$lib/services/messages/messages';
 	import { createLitSession } from '$lib/services/createLitSession/createLitSession';

-	const redirectUri = 'http://localhost:5173/';
+	const redirectUri = 'http://localhost:5173/login';

 	export let services;

@ -31,6 +31,7 @@
 	onMount(async () => {
 		try {
 			provider = await services.setupLit.connectProvider();
+			console.log('Provider: ' + provider);

 			logMessage('Component mounted.');

--- a/src/lib/components/Messages.svelte
+++ b/src/lib/components/Messages.svelte
@ -1,6 +1,7 @@
 <script>
 	import { onMount, afterUpdate } from 'svelte';
 	import Composite from '$lib/core/Composite.svelte';
+	import { Avatar } from '@skeletonlabs/skeleton';

 	export let store;

@ -27,22 +28,22 @@
 {#if isStoreLoaded}
 	{#if $store.messages}
 		<main bind:this={messagesContainer} class="w-full h-full p-4 overflow-y-auto">
-			{#each $store.messages as message}
-				<div class="p-3 mb-2 bg-white border-b border-gray-300 rounded-lg shadow-lg">
-					<div class="flex items-center justify-between">
-						<p class="text-sm text-gray-600">
-							{message.type} | {message.sender}
-						</p>
-						<p class="text-xs text-gray-600">{message.timestamp}</p>
+			<div class="grid gap-2">
+				{#each $store.messages as message}
+					<div class="p-4 space-y-2 rounded-tl-none card variant-soft">
+						<header class="flex items-center justify-between">
+							<p class="font-bold">{message.type} | {message.sender}</p>
+							<small class="opacity-50">{message.timestamp}</small>
+						</header>
+						<p>{message.text}</p>
 					</div>
-					<p class="mt-2 text-base text-gray-800">{message.text}</p>
-				</div>
-				{#if message.composite}
-					<div class="overflow-y-auto max-h-80vh">
-						<Composite composite={message.composite} />
-					</div>
-				{/if}
-			{/each}
+					{#if message.composite}
+						<div class="overflow-y-auto max-h-80vh">
+							<Composite composite={message.composite} />
+						</div>
+					{/if}
+				{/each}
+			</div>
 		</main>
 	{/if}
 {:else}
--- a/src/lib/components/SendMessage.svelte
+++ b/src/lib/components/SendMessage.svelte
@ -1,33 +0,0 @@
-<script>
-	import { createMessage } from '$lib/services/messages/messages';
-
-	export function sendMessage(text) {
-		if (text && text.trim() !== '') {
-			const message = {
-				text: text,
-				sender: 'user',
-				type: 'chat'
-			};
-
-			const appCommandPattern = /@(\w+)/;
-			const match = text.match(appCommandPattern);
-			if (match && match[1]) {
-				message.composite = {
-					id: match[1],
-					component: match[1]
-				};
-			}
-			console.log(message);
-
-			createMessage(message);
-		}
-	}
-
-	function handleSend() {
-		sendMessage(text);
-	}
-</script>
-
-<button class="px-4 py-2 text-white bg-blue-500 rounded hover:bg-blue-600" on:click={handleSend}>
-	Send
-</button>
--- a/src/lib/components/Terminal.svelte
+++ b/src/lib/components/Terminal.svelte
@ -1,34 +1,69 @@
-<script>
-	import { getContextStore } from '$lib/stores/contextStore.ts';
-	import ClearMessages from './ClearMessages.svelte';
-	import SendMessage from './SendMessage.svelte';
+<!-- TerminalComponent.svelte -->
+
+<script lang="ts">
+	import { createMessage, clearMessages } from '$lib/services/messages/messages';
+	import { drawerStore } from '@skeletonlabs/skeleton';
+	import type { DrawerSettings } from '@skeletonlabs/skeleton';
+
+	const drawerSettings: DrawerSettings = {
+		position: 'bottom',
+		id: 'drawer',
+		meta: { id: 'apps', component: 'Apps' }
+	};
+
+	const openDrawer = () => {
+		drawerStore.open(drawerSettings);
+	};

-	const store = getContextStore('MessageInput');
 	let newMessageText = '';

-	let sendFunction; // To hold the sendMessage function from SendMessage component
-
 	function handleKeyDown(event) {
 		if (event.key === 'Enter') {
-			sendFunction(newMessageText);
+			sendMessage(newMessageText);
 			newMessageText = '';
-			store.set({ newMessageText }); // Update the store directly
 			event.preventDefault();
 		}
 	}

-	// Reactive assignment to store when newMessageText changes
-	$: store.set({ newMessageText });
+	// Sending message logic
+	function sendMessage(text) {
+		if (text && text.trim() !== '') {
+			const message = {
+				text: text,
+				sender: 'user',
+				type: 'chat'
+			};
+
+			const appCommandPattern = /@(\w+)/;
+			const match = text.match(appCommandPattern);
+			if (match && match[1]) {
+				message.composite = {
+					id: match[1],
+					component: match[1]
+				};
+			}
+			createMessage(message);
+		}
+	}
+
+	// Clear messages logic
+	function handleClear() {
+		clearMessages();
+	}
 </script>

-<footer class="flex justify-end p-4 bg-white">
-	<input
-		type="text"
-		class="flex-grow px-3 py-2 mr-2 border rounded"
-		placeholder="Type your message..."
+<div class="input-group input-group-divider grid-cols-[auto_1fr_auto] rounded-container-token h-12">
+	<button class="input-group-shim" on:click={openDrawer}>+</button>
+
+	<textarea
+		class="bg-transparent border-0 ring-0"
+		name="prompt"
+		id="prompt"
+		placeholder="Write a message..."
+		rows="1"
 		bind:value={newMessageText}
 		on:keydown={handleKeyDown}
 	/>
-	<SendMessage bind:sendMessage={sendFunction} />
-	<ClearMessages />
-</footer>
+	<button class="variant-filled-primary" on:click={() => sendMessage(newMessageText)}>Send</button>
+	<!-- <button class="variant-filled-primary" on:click={handleClear}>clear</button> -->
+</div>
--- a/src/lib/services/authWithGoogle.ts
+++ b/src/lib/services/authWithGoogle.ts
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -1,18 +1,24 @@
-<script>
+<script lang="ts">
+	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
+	import '@skeletonlabs/skeleton/styles/skeleton.css';
 	import '../app.css';
+
 	import { initChainProvider } from '$lib/services/provider/setupChainProvider';
 	import { onMount } from 'svelte';

-	/** @type {import('$lib/services/provider/setupChainProvider').ProviderData} */
-	const providerData = {
-		walletConnectId: import.meta.env.VITE_WALLETCONNECT_ID
-	};
+	import { Modal, modalStore } from '@skeletonlabs/skeleton';
+	import { Drawer, drawerStore } from '@skeletonlabs/skeleton';
+	import Composite from '$lib/core/Composite.svelte';

 	onMount(() => {
 		initChainProvider(providerData);
 	});
 </script>

+<Modal />
+<Drawer>
+	<Composite composite={$drawerStore.meta} />
+</Drawer>
 <div class="relative w-screen h-screen overflow-hidden">
 	<slot />
 </div>
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -8,37 +8,15 @@
 		id: 'composite',
 		layout: {
 			areas: `
-				"top main"
-				"aside main"
-				"footer footer ";
+				"top top"
+				"main main"
+				"footer footer";
 			`,
-			columns: '1fr 1fr ',
-			rows: '1fr 1fr auto'
+			columns: '1fr 300px',
+			rows: 'auto 1fr auto'
 		},
 		children: [
-			{
-				id: 'w',
-				component: 'Wallet',
-				slot: 'aside',
-				store: {
-					pkpWallet: '',
-					rpcURL: 'https://rpc.gnosischain.com/',
-					pkpPubKey:
-						'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
-				}
-			},
-			{
-				id: 'hello',
-				component: 'HelloEarth',
-				slot: 'top',
-				map: {
-					pkpWallet: 'w.pkpWallet',
-					rpcURL: 'w.rpcURL',
-					messages: 'data.queryMessages',
-					todos: 'data.queryTodos'
-				},
-				services: ['helloEarthAlert']
-			},
+			{ id: 'appbar', component: 'AppBar', slot: 'top' },
 			{
 				id: 'me',
 				component: 'Messages',
--- a/src/routes/helloearth/+page.svelte
+++ b/src/routes/helloearth/+page.svelte
@ -0,0 +1,35 @@
+<script>
+	import Composite from '$lib/core/Composite.svelte';
+
+	let composite = {
+		id: 'composite',
+		layout: {
+			areas: `
+				"main"
+				"footer";
+			`,
+			rows: '1fr auto'
+		},
+		children: [
+			{
+				id: 'hello',
+				component: 'HelloEarth',
+				slot: 'main',
+				map: {
+					pkpWallet: 'w.pkpWallet',
+					rpcURL: 'w.rpcURL',
+					messages: 'data.queryMessages',
+					todos: 'data.queryTodos'
+				},
+				services: ['helloEarthAlert']
+			},
+			{
+				id: 'terminal',
+				component: 'Terminal',
+				slot: 'footer'
+			}
+		]
+	};
+</script>
+
+<Composite {composite} />
--- a/src/routes/login/+page.svelte
+++ b/src/routes/login/+page.svelte
@ -0,0 +1,17 @@
+<script>
+	import Composite from '$lib/core/Composite.svelte';
+
+	let composite = {
+		id: 'login',
+		children: [
+			{
+				id: 'google',
+				component: 'GoogleAuth',
+				slot: 'main',
+				services: ['setupLit']
+			}
+		]
+	};
+</script>
+
+<Composite {composite} />
--- a/src/routes/wallet/+page.svelte
+++ b/src/routes/wallet/+page.svelte
@ -0,0 +1,40 @@
+<script>
+	import Composite from '$lib/core/Composite.svelte';
+
+	let composite = {
+		id: 'composite',
+		layout: {
+			areas: `
+				"top"
+				"main"
+				"footer";
+			`,
+			rows: 'auto 1fr auto'
+		},
+		children: [
+			{
+				id: 'authsig',
+				component: 'AuthSig',
+				slot: 'top'
+			},
+			{
+				id: 'wallet',
+				component: 'Wallet',
+				slot: 'main',
+				store: {
+					pkpWallet: '',
+					rpcURL: 'https://rpc.gnosischain.com/',
+					pkpPubKey:
+						'046da3ba67065fd1e2726242ca01cd4601524893f4aa4b0042578fa6cbec28fa8c9a28eb9f7893932fc09717edc9e1db57e157a21eed346247c1db5a722a01f571'
+				}
+			},
+			{
+				id: 'terminal',
+				component: 'Terminal',
+				slot: 'footer'
+			}
+		]
+	};
+</script>
+
+<Composite {composite} />
--- a/static/android-chrome-192x192.png
+++ b/static/android-chrome-192x192.png
--- a/static/android-chrome-512x512.png
+++ b/static/android-chrome-512x512.png
--- a/static/apple-touch-icon.png
+++ b/static/apple-touch-icon.png
--- a/static/browserconfig.xml
+++ b/static/browserconfig.xml
@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#603cba</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
--- a/static/favicon-16x16.png
+++ b/static/favicon-16x16.png
--- a/static/favicon-32x32.png
+++ b/static/favicon-32x32.png
--- a/static/favicon.ico
+++ b/static/favicon.ico
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/logo.png
+++ b/static/logo.png
--- a/static/mstile-150x150.png
+++ b/static/mstile-150x150.png
--- a/static/safari-pinned-tab.svg
+++ b/static/safari-pinned-tab.svg
@ -0,0 +1,161 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="1076.000000pt" height="1076.000000pt" viewBox="0 0 1076.000000 1076.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,1076.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M5040 10749 c-826 -52 -1677 -313 -2390 -734 -858 -507 -1564 -1248
+-2025 -2125 -148 -283 -239 -492 -336 -780 -527 -1551 -322 -3244 561 -4629
+544 -854 1357 -1563 2270 -1981 1172 -537 2466 -644 3690 -304 571 159 1078
+393 1582 730 964 646 1705 1617 2080 2724 409 1211 378 2515 -88 3700 -359
+914 -976 1729 -1749 2310 -564 424 -1136 709 -1805 899 -567 160 -1193 227
+-1790 190z m595 -919 c583 -42 1094 -176 1630 -427 999 -469 1797 -1328 2208
+-2378 261 -666 352 -1411 261 -2130 -116 -916 -513 -1762 -1145 -2442 -261
+-280 -526 -499 -871 -721 l-66 -43 -62 16 c-35 9 -72 22 -84 29 -11 8 -37 17
+-57 20 -19 3 -77 26 -127 51 -50 25 -111 49 -134 54 -24 6 -74 24 -112 41 -49
+23 -76 29 -97 25 -18 -4 -29 -3 -29 4 0 6 10 11 23 11 24 1 -114 64 -163 75
+-16 4 -32 10 -35 15 -3 5 -28 21 -55 36 -56 30 -84 63 -125 144 -43 85 -46
+103 -45 290 0 214 15 310 90 564 32 111 41 134 125 311 59 126 87 182 110 221
+l19 31 236 6 c131 4 248 11 261 16 36 13 182 147 201 184 11 23 18 71 23 157
+3 69 10 145 14 170 7 35 5 54 -11 95 -24 62 -20 111 16 157 27 36 56 108 56
+139 0 10 -9 21 -20 24 -17 5 -18 9 -8 28 7 12 11 29 9 37 -5 28 -44 60 -73 60
+-34 0 -35 6 -5 30 34 27 54 115 37 164 -24 73 -98 128 -150 111 -11 -3 -29 -3
+-40 0 -33 11 -26 56 34 210 23 59 19 120 -13 210 -34 96 -96 200 -163 274 -27
+29 -55 68 -62 85 -7 17 -31 51 -53 76 -21 25 -47 58 -57 74 -18 29 -18 29 5
+47 13 10 29 19 36 19 6 0 48 30 92 66 73 61 79 68 69 90 -6 12 -18 26 -27 30
+-12 5 -105 12 -183 14 -5 0 -8 30 -8 66 0 80 -27 249 -46 285 -7 15 -25 62
+-40 105 -57 167 -126 266 -331 479 -18 19 -33 43 -33 53 0 22 -20 40 -75 67
+-42 20 -170 144 -237 229 -21 27 -58 61 -81 77 -57 38 -217 202 -217 223 0 20
+10 20 36 1 36 -27 134 3 134 41 0 8 -11 37 -24 66 -33 74 -46 106 -63 158 -20
+60 -72 168 -83 175 -5 3 -7 18 -4 33 5 22 -2 36 -30 66 -19 22 -37 44 -39 50
+-2 6 -8 7 -13 3 -4 -4 -3 -17 4 -27 10 -16 10 -20 0 -20 -19 0 -91 70 -123
+119 -15 22 -31 41 -34 41 -4 0 -15 -9 -24 -21 -21 -24 -41 -21 -45 8 -2 12
+-12 29 -23 39 -17 15 -24 16 -39 6 -28 -17 -44 -15 -65 8 -10 11 -27 20 -37
+20 -20 0 -59 17 -68 30 -3 4 -25 17 -49 30 -44 22 -146 120 -156 149 -7 22
+-63 58 -105 66 -19 4 -53 20 -75 35 -22 15 -58 33 -80 41 -21 8 -49 23 -62 35
+-37 35 -90 47 -163 37 -36 -5 -87 -5 -115 -1 -59 8 -70 1 -54 -36 17 -36 -1
+-49 -58 -42 -37 5 -47 2 -75 -23 -18 -15 -43 -33 -55 -40 -13 -6 -22 -17 -20
+-23 5 -23 -23 -18 -54 10 -29 26 -31 30 -19 53 7 13 26 36 42 51 50 47 27 94
+-32 63 -16 -8 -55 -15 -89 -15 -36 0 -75 -7 -95 -17 -34 -16 -37 -16 -56 2
+-11 10 -41 20 -68 23 -49 4 -49 4 -91 -49 -23 -30 -66 -70 -94 -90 -29 -20
+-59 -49 -67 -64 -8 -16 -24 -37 -35 -46 -10 -9 -24 -32 -30 -50 -11 -31 -17
+-35 -79 -50 -37 -10 -84 -28 -104 -42 -24 -17 -61 -29 -107 -35 -92 -13 -175
+-36 -185 -52 -5 -8 -11 -33 -15 -58 -12 -78 -14 -87 -32 -99 -9 -7 -45 -13
+-80 -13 l-63 0 -28 -44 c-15 -24 -41 -54 -56 -68 -30 -25 -68 -111 -60 -133 7
+-16 -56 -65 -84 -65 -12 0 -23 -8 -27 -19 -3 -12 -26 -27 -53 -38 -59 -22 -81
+-48 -82 -96 0 -42 25 -63 42 -33 14 25 42 1 28 -24 -14 -26 -12 -47 7 -88 12
+-26 14 -37 5 -40 -7 -2 -12 -8 -12 -13 0 -6 5 -7 10 -4 6 3 10 3 10 -2 0 -16
+-15 -30 -38 -38 -13 -3 -28 -18 -34 -31 -6 -14 -22 -27 -35 -30 -46 -12 -65
+-74 -23 -74 10 0 22 -10 25 -21 6 -17 -3 -32 -39 -68 -42 -42 -45 -48 -30 -62
+14 -15 13 -20 -6 -57 -12 -22 -28 -43 -36 -46 -8 -3 -19 -17 -24 -32 -6 -14
+-19 -28 -30 -31 -16 -4 -18 -9 -9 -25 24 -45 -17 -107 -62 -95 -12 3 -36 -9
+-66 -34 -26 -21 -51 -39 -54 -39 -14 0 -48 -70 -63 -130 -21 -83 -22 -218 -1
+-227 9 -3 22 -18 30 -34 15 -28 14 -37 -11 -135 -1 -6 -23 -24 -48 -40 -111
+-69 -164 -127 -187 -202 -10 -36 -9 -45 9 -75 19 -33 19 -37 5 -81 -10 -30
+-29 -58 -55 -81 -34 -29 -39 -38 -34 -62 4 -15 26 -49 50 -75 25 -26 47 -56
+51 -68 12 -37 -4 -87 -41 -132 -20 -23 -49 -62 -66 -85 l-29 -43 22 -62 c25
+-72 62 -110 101 -105 23 3 27 -1 33 -30 6 -35 -10 -71 -55 -123 -17 -20 -21
+-34 -17 -70 3 -36 -1 -52 -20 -77 -18 -24 -21 -37 -14 -50 5 -10 12 -30 15
+-45 10 -46 75 -103 76 -65 1 8 5 6 13 -4 7 -9 26 -19 43 -23 25 -6 33 -3 38
+10 10 27 28 2 29 -40 1 -23 6 -36 14 -36 13 0 57 43 86 84 17 23 40 12 32 -14
+-4 -12 1 -22 12 -28 15 -9 14 -13 -13 -47 -16 -21 -33 -45 -39 -53 -5 -9 -15
+-21 -21 -27 -11 -9 -39 -105 -32 -109 2 -1 17 -6 33 -12 17 -5 30 -16 30 -24
+0 -21 36 -25 51 -6 10 14 16 11 48 -29 25 -30 45 -45 61 -45 13 0 27 -4 30
+-10 3 -5 16 -10 29 -10 12 0 27 -5 34 -12 9 -9 13 -7 18 8 12 32 35 53 52 47
+28 -10 52 -46 52 -78 0 -17 6 -40 14 -51 8 -11 33 -64 55 -119 23 -54 46 -105
+52 -112 16 -18 85 -17 93 2 8 21 56 18 86 -5 14 -11 30 -20 35 -20 21 -1 95
+-78 95 -98 0 -32 -9 -30 180 -47 112 -10 123 -12 152 -20 32 -8 108 -106 108
+-140 0 -35 10 -55 28 -55 8 0 23 -6 31 -14 21 -18 113 -39 170 -38 25 1 50 -3
+57 -9 7 -6 23 -8 35 -4 14 5 19 4 15 -4 -5 -7 3 -11 23 -11 16 0 38 -3 48 -6
+14 -4 15 -4 4 4 -17 12 87 45 138 44 19 -1 41 4 49 10 45 37 116 68 157 68 26
+0 43 7 60 26 17 18 30 24 44 19 16 -5 24 0 32 19 15 31 65 54 88 39 12 -8 22
+-7 36 3 10 8 27 14 37 14 9 0 22 9 28 20 24 44 30 4 29 -178 -1 -287 -26 -588
+-57 -712 -46 -178 -117 -305 -232 -411 -96 -89 -130 -118 -170 -149 -18 -14
+-58 -46 -89 -71 -31 -25 -72 -54 -91 -64 -19 -10 -51 -30 -70 -45 -19 -15 -64
+-42 -100 -59 -36 -17 -78 -40 -95 -51 -42 -27 -145 -77 -175 -86 -34 -9 -139
+-61 -225 -111 -141 -81 -242 -131 -310 -153 -38 -13 -86 -31 -105 -41 -19 -11
+-38 -19 -43 -19 -12 0 -150 94 -247 169 -784 602 -1340 1443 -1586 2399 -162
+630 -180 1295 -53 1936 224 1134 896 2142 1864 2794 795 536 1814 810 2760
+742z m3534 -1180 c620 -716 1031 -1619 1160 -2550 39 -280 46 -390 45 -720 0
+-335 -11 -479 -54 -760 -21 -136 -58 -321 -65 -328 -2 -3 -72 12 -155 33 -141
+35 -151 39 -146 59 42 169 88 483 107 729 16 212 6 639 -20 852 -91 748 -331
+1410 -739 2040 -151 233 -389 532 -541 680 -28 27 -51 53 -51 57 0 5 44 51 98
+103 l97 95 73 -77 c41 -43 126 -139 191 -213z m-3135 -2889 c18 -20 86 -41
+130 -41 47 0 27 -17 -33 -29 -79 -15 -164 -5 -191 24 l-20 22 25 11 c14 6 25
+16 25 22 0 17 46 11 64 -9z m374 -216 c92 -28 139 -122 130 -257 -5 -66 -8
+-74 -39 -100 -51 -43 -95 -60 -179 -65 -60 -4 -84 -1 -120 15 -56 24 -95 63
+-112 110 -19 58 -17 66 27 77 68 18 133 65 89 65 -8 0 -12 5 -9 10 3 6 14 10
+24 10 21 0 111 107 111 133 0 21 12 21 78 2z m874 -37 c71 -58 88 -121 42
+-157 -35 -28 -42 -27 -62 9 -21 36 -35 38 -50 5 -6 -14 -19 -25 -28 -25 -10 0
+-51 -16 -91 -35 -41 -19 -79 -33 -84 -30 -15 10 -10 71 6 85 9 7 13 21 10 31
+-9 27 4 63 27 78 11 7 50 19 87 26 36 8 70 21 76 30 14 21 21 19 67 -17z
+m-289 -45 c-1 -27 -2 -55 -2 -64 -1 -9 -10 -27 -22 -40 -16 -19 -18 -20 -11
+-4 6 11 13 43 17 70 7 50 14 85 19 85 1 0 1 -21 -1 -47z m280 -280 c-7 -2 -21
+-2 -30 0 -10 3 -4 5 12 5 17 0 24 -2 18 -5z m-291 -29 c36 -6 36 -7 18 -23
+-32 -26 -7 -60 60 -83 l55 -20 68 23 c37 12 68 20 70 18 1 -2 12 -19 25 -36
+24 -36 20 -43 -10 -16 -16 14 -24 15 -52 5 -18 -7 -46 -12 -63 -12 -18 0 -38
+-7 -47 -15 -13 -13 -20 -12 -63 10 -62 32 -87 54 -107 93 -30 59 -24 67 46 56z
+m216 -29 c11 -23 10 -25 -16 -25 -15 0 -32 4 -37 9 -6 5 -19 11 -30 13 -16 4
+-13 7 15 15 51 16 56 15 68 -12z m-141 -1 c-3 -3 -12 -4 -19 -1 -8 3 -5 6 6 6
+11 1 17 -2 13 -5z m-2215 -145 c-1 -13 3 -36 9 -51 9 -22 9 -31 -1 -43 -9 -10
+-9 -15 -1 -15 6 0 11 -9 11 -19 0 -11 12 -28 27 -39 l26 -19 -56 -7 c-93 -12
+-148 15 -160 79 -9 47 2 57 45 43 31 -9 41 -8 62 5 22 15 24 20 16 48 -10 35
+-5 52 13 46 7 -2 11 -15 9 -28z m2622 -394 c11 -8 16 -21 12 -30 -5 -13 -9
+-13 -26 -3 -16 11 -25 10 -54 -6 -38 -20 -64 -19 -79 6 -8 12 -7 21 2 32 17
+21 118 21 145 1z m-2630 -58 c45 -12 78 -38 65 -52 -7 -7 -109 34 -129 52 -19
+17 -3 17 64 0z m201 -38 c89 -31 98 -46 32 -55 -19 -2 -61 5 -93 15 -33 11
+-54 20 -48 20 7 1 14 10 17 21 6 25 18 25 92 -1z m170 -59 c3 -5 1 -10 -4 -10
+-16 0 -13 -26 4 -40 16 -13 42 -87 33 -95 -7 -7 -68 25 -68 36 0 5 -7 9 -15 9
+-21 0 -19 12 5 33 12 10 20 29 20 47 0 29 13 40 25 20z m4803 -513 c158 -49
+151 -20 64 -253 -411 -1099 -1177 -2009 -2182 -2594 -630 -366 -1328 -588
+-2063 -656 -98 -9 -181 -14 -184 -11 -7 7 -24 318 -18 327 2 4 53 10 112 14
+744 48 1550 323 2203 751 287 189 548 403 790 651 173 177 270 291 403 469
+270 363 467 720 626 1135 27 69 54 143 61 165 17 54 20 57 38 50 8 -3 76 -25
+150 -48z m-5092 -1800 c24 -33 36 -42 57 -40 46 3 29 -31 -21 -42 -26 -5 -38
+-2 -65 21 -48 40 -56 105 -12 103 6 0 24 -19 41 -42z m-243 -203 c0 -5 -3 -18
+-5 -29 -2 -13 6 -24 26 -33 26 -13 28 -16 13 -27 -22 -16 -21 -25 3 -25 13 0
+25 -12 34 -35 8 -19 20 -35 26 -35 7 0 10 -6 7 -12 -2 -7 -9 -12 -16 -11 -6 2
+-13 -8 -16 -22 -3 -14 -7 -36 -10 -50 -8 -39 -32 -29 -60 25 -14 28 -28 50
+-30 50 -3 0 -21 -7 -40 -14 -41 -17 -45 -39 -13 -73 12 -13 20 -25 17 -27 -2
+-2 -30 23 -61 55 l-56 60 39 15 c43 18 46 27 23 73 -19 37 -17 40 39 61 31 12
+41 21 39 34 -2 11 2 23 10 27 15 10 34 6 31 -7z m102 -23 c0 -16 -31 -38 -40
+-29 -4 4 -4 16 0 28 7 23 40 24 40 1z m-195 -10 c0 -18 -57 -33 -79 -21 -33
+17 -25 25 29 27 28 1 50 -2 50 -6z m-219 -41 c5 0 9 -4 9 -10 0 -14 -13 -12
+-36 6 -17 14 -17 15 -1 10 10 -3 23 -6 28 -6z m87 -63 c3 -16 1 -17 -17 -7
+-25 13 -28 33 -4 28 10 -2 19 -11 21 -21z m1262 13 c11 -6 16 -39 22 -122 4
+-62 13 -140 21 -173 25 -108 -8 -169 -37 -68 -9 32 -22 68 -29 81 -12 21 -15
+22 -26 8 -9 -11 -12 -40 -10 -94 4 -75 3 -79 -20 -90 -13 -6 -27 -9 -31 -7 -4
+2 -9 44 -12 93 -3 48 -11 98 -17 111 -7 13 -15 65 -18 116 -6 88 -5 93 15 99
+12 4 24 16 27 27 4 12 15 19 31 19 19 0 24 -5 24 -25 0 -13 -7 -28 -16 -33
+-13 -7 -14 -17 -4 -71 6 -35 9 -65 6 -68 -6 -6 48 -53 62 -53 5 0 12 8 14 18
+5 19 -15 185 -26 220 -8 23 0 28 24 12z m-1230 -40 c0 -5 -4 -10 -10 -10 -5 0
+-10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m999 -42 c6 -18 18 -81 26
+-140 12 -82 13 -112 5 -128 -6 -12 -9 -28 -6 -36 3 -8 1 -14 -5 -14 -6 0 -17
+-7 -25 -15 -25 -24 -43 -18 -48 18 -9 57 -15 275 -9 311 5 29 10 36 29 36 17
+0 25 -8 33 -32z m-188 -17 c9 -32 9 -48 -5 -92 -9 -30 -21 -76 -25 -104 -5
+-27 -9 -40 -10 -29 0 12 -8 27 -16 34 -8 7 -15 18 -15 25 0 7 7 15 15 19 23 8
+18 32 -11 55 l-26 20 21 27 c12 15 21 37 21 50 0 20 10 31 32 33 4 1 12 -17
+19 -38z m668 20 c14 -6 55 -17 91 -26 36 -9 106 -32 155 -52 50 -20 105 -40
+123 -45 28 -8 45 -27 25 -28 -52 -2 -158 -23 -175 -34 -13 -7 -35 -16 -50 -20
+-30 -7 -35 2 -19 33 15 28 -2 44 -38 36 -34 -7 -56 -42 -45 -70 4 -10 0 -15
+-10 -15 -9 0 -16 5 -16 12 0 23 -73 158 -85 158 -20 0 -25 -25 -25 -126 0 -89
+-1 -95 -22 -103 -26 -10 -42 1 -52 35 -5 16 -2 23 14 27 17 4 20 13 20 67 0
+88 -17 150 -42 150 -10 0 -17 4 -14 8 7 12 131 6 165 -7z m-839 -61 c0 -5 -4
+-10 -10 -10 -5 0 -10 5 -10 10 0 6 5 10 10 10 6 0 10 -4 10 -10z m-90 -142
+c16 -29 30 -67 30 -85 l0 -32 -23 22 c-14 13 -26 39 -30 62 -3 22 -9 50 -13
+63 -11 37 4 25 36 -30z m120 31 c0 -6 -4 -7 -10 -4 -5 3 -10 11 -10 16 0 6 5
+7 10 4 6 -3 10 -11 10 -16z m204 -46 c4 -27 9 -55 12 -63 2 -8 10 -42 17 -75
+10 -46 19 -63 38 -72 l24 -13 -25 0 c-14 0 -34 -6 -45 -14 -11 -7 -37 -21 -58
+-29 l-37 -16 -16 31 c-11 22 -13 33 -5 41 6 6 11 19 11 30 0 10 5 15 10 12 6
+-3 10 -15 10 -26 0 -21 24 -26 36 -7 4 6 6 67 5 136 -2 124 10 157 23 65z
+m-188 0 c20 -27 16 -38 -6 -18 -20 18 -26 35 -14 35 4 0 13 -8 20 -17z m342
+-166 c2 -15 0 -28 -5 -28 -36 -6 -53 -5 -53 2 0 5 6 9 13 10 10 0 10 2 0 6
+-30 11 -8 44 27 40 8 -1 16 -14 18 -30z m-451 -89 c-3 -8 -6 -5 -6 6 -1 11 2
+17 5 13 3 -3 4 -12 1 -19z"/>
+</g>
+</svg>
--- a/static/site.webmanifest
+++ b/static/site.webmanifest
@ -0,0 +1,19 @@
+{
+    "name": "Nova Ai",
+    "short_name": "Nova Ai",
+    "icons": [
+        {
+            "src": "/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}
--- a/tailwind.config.js
+++ b/tailwind.config.js
@ -1,8 +1,21 @@
+
 /** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{html,js,svelte,ts}'],
-  theme: {
-    extend: {}
-  },
-  plugins: []
-};
+module.exports = {
+	// 1. Apply the dark mode class setting:
+	darkMode: 'class',
+	content: [
+		'./src/**/*.{html,js,svelte,ts}',
+		// 2. Append the path for the Skeleton NPM package and files:
+		require('path').join(require.resolve(
+			'@skeletonlabs/skeleton'),
+			'../**/*.{html,js,svelte,ts}'
+		)
+	],
+	theme: {
+		extend: {},
+	},
+	plugins: [
+		// 3. Append the Skeleton plugin to the end of this list
+		...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()
+	]
+}