4 files changed, 42 insertions, 36 deletions
diff --git a/clients/www/src/lib/components/ReloadPrompt.svelte b/clients/www/src/lib/components/ReloadPrompt.svelte
new file mode 100644
index 0000000..e6effbb
--- /dev/null
+++ b/clients/www/src/lib/components/ReloadPrompt.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+  import { getToastStore } from '@skeletonlabs/skeleton'
+  import { useRegisterSW } from 'virtual:pwa-register/svelte'
+
+  const toastStore = getToastStore()
+
+  const { updateServiceWorker } = useRegisterSW({
+    onRegisteredSW(r) {
+      console.log('SW Registered: ', r)
+    },
+    onNeedRefresh() {
+      toastStore.trigger({
+        message: 'A new version of the application is available.',
+        autohide: false,
+        action: {
+          label: 'Refresh',
+          response: updateServiceWorker,
+        },
+      })
+    },
+    onOfflineReady() {
+      toastStore.trigger({
+        background: 'variant-filled-success',
+        message: 'Now ready for offline use!',
+        timeout: 5000,
+      })
+    },
+    onRegisterError(err) {
+      console.error('SW Registration Error: ', err)
+    },
+  })
+</script>
diff --git a/clients/www/src/lib/offlineToast.ts b/clients/www/src/lib/offlineToast.ts
deleted file mode 100644
index 3ae943e..0000000
--- a/clients/www/src/lib/offlineToast.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import { getToastStore, type ToastSettings } from '@skeletonlabs/skeleton';
-
-const toastStore = getToastStore();
-
-const offline: ToastSettings = {
-	message: 'You are currently offline.',
-	background: 'variant-filled-error',
-	autohide: false
-};
-
-const online: ToastSettings = {
-	message: 'You are back online.',
-	background: 'variant-filled-success',
-	autohide: true,
-	timeout: 3000
-};
-
-/**
- * Make a toast for if the PWA is ever brought offline for whatever reason.
- */
-export default function offlineToast() {
-	window.addEventListener('offline', () => {
-		toastStore.clear();
-		toastStore.trigger(offline);
-	});
-
-	window.addEventListener('online', () => {
-		toastStore.clear();
-		setTimeout(() => {
-			toastStore.trigger(online);
-		}, 300);
-	});
-}
diff --git a/clients/www/src/routes/+layout.svelte b/clients/www/src/routes/+layout.svelte
index 15780c3..12996ec 100644
--- a/clients/www/src/routes/+layout.svelte
+++ b/clients/www/src/routes/+layout.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { base } from '$app/paths';
 	import '../app.postcss';
 	import { AppShell, AppBar, LightSwitch, initializeStores } from '@skeletonlabs/skeleton';
 
@@ -22,12 +23,16 @@
 			<svelte:fragment slot="lead">
 				<LightSwitch />
 			</svelte:fragment>
-			<a href="#">Zelda: Oracle Password Generator</a>
+			<a href="{base}/">Zelda: Oracle Password Generator</a>
 			<svelte:fragment slot="trail">
-				<a href="#">TODO: SOURCE CODE</a>
+				<a href="https://github.com/RosstheRoss/zorascript">TODO: SOURCE CODE</a>
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>
 	<!-- Page Route Content -->
 	<slot />
 </AppShell>
+
+{#await import('$lib/components/ReloadPrompt.svelte') then { default: ReloadPrompt }}
+  <ReloadPrompt />
+{/await}
diff --git a/clients/www/src/routes/+page.svelte b/clients/www/src/routes/+page.svelte
index 2ea190a..84d1c45 100644
--- a/clients/www/src/routes/+page.svelte
+++ b/clients/www/src/routes/+page.svelte
@@ -1 +1,3 @@
-TODO: Draw the rest of the owl
-\ No newline at end of file
+<svelte:head>
+	<title>Zelda: Oracle of [Ages,Seasons] Passphrase Generator</title>
+</svelte:head>
+\ No newline at end of file