From 7490ee399b8fe9442dfc18b5e0788fa32e2c77e4 Mon Sep 17 00:00:00 2001
From: Talentedunicorn <dev@talentedunicorn.com>
Date: Fri, 3 Jan 2025 22:10:33 +0800
Subject: [PATCH] Added routes

---
 About.md                   |   5 +
 package.json               |   1 +
 pnpm-lock.yaml             |  16 +++
 src/App.svelte             | 227 +++++++++++++++++--------------------
 src/List.svelte            |   3 -
 src/app.css                |   4 +
 src/auth.ts                |   3 +-
 src/components/Form.svelte |  10 +-
 src/db.ts                  |  23 +++-
 src/routes/About.svelte    |  56 +++++++++
 src/routes/Home.svelte     |  64 +++++++++++
 src/routes/Login.svelte    |  29 +++++
 src/routes/NotFound.svelte |  13 +++
 13 files changed, 316 insertions(+), 138 deletions(-)
 create mode 100644 About.md
 create mode 100644 src/routes/About.svelte
 create mode 100644 src/routes/Home.svelte
 create mode 100644 src/routes/Login.svelte
 create mode 100644 src/routes/NotFound.svelte

diff --git a/About.md b/About.md
new file mode 100644
index 0000000..390e3f3
--- /dev/null
+++ b/About.md
@@ -0,0 +1,5 @@
+# About ToDone
+
+An offline-first note-taking app that gets you from _To Do_ to **Done**
+
+Made by [Talentedunicorn](https://talentedunicorn.com) with 🫰 and [Svelte](https://svelte.dev)
diff --git a/package.json b/package.json
index 1a3b3be..d28a188 100644
--- a/package.json
+++ b/package.json
@@ -67,6 +67,7 @@
 		"marked": "^15.0.6",
 		"rxdb": "^15.39.0",
 		"rxjs": "^7.8.1",
+		"svelte-spa-router": "^4.0.1",
 		"vite-plugin-pwa": "^0.21.1",
 		"zod": "^3.24.1"
 	},
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 92bdd7c..fa4eddb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       rxjs:
         specifier: ^7.8.1
         version: 7.8.1
+      svelte-spa-router:
+        specifier: ^4.0.1
+        version: 4.0.1
       vite-plugin-pwa:
         specifier: ^0.21.1
         version: 0.21.1(vite@6.0.7(@types/node@22.10.5)(terser@5.37.0)(yaml@2.7.0))(workbox-build@7.1.1(@types/babel__core@7.20.5))(workbox-window@7.3.0)
@@ -4932,6 +4935,10 @@ packages:
     resolution: {integrity: sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==}
     engines: {node: '>= 0.4'}
 
+  regexparam@2.0.2:
+    resolution: {integrity: sha512-A1PeDEYMrkLrfyOwv2jwihXbo9qxdGD3atBYQA9JJgreAx8/7rC6IUkWOw2NQlOxLp2wL0ifQbh1HuidDfYA6w==}
+    engines: {node: '>=8'}
+
   regexpp@3.2.0:
     resolution: {integrity: sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==}
     engines: {node: '>=8'}
@@ -5360,6 +5367,9 @@ packages:
       typescript:
         optional: true
 
+  svelte-spa-router@4.0.1:
+    resolution: {integrity: sha512-2JkmUQ2f9jRluijL58LtdQBIpynSbem2eBGp4zXdi7aDY1znbR6yjw0KsonD0aq2QLwf4Yx4tBJQjxIjgjXHKg==}
+
   svelte2tsx@0.7.34:
     resolution: {integrity: sha512-WTMhpNhFf8/h3SMtR5dkdSy2qfveomkhYei/QW9gSPccb0/b82tjHvLop6vT303ZkGswU/da1s6XvrLgthQPCw==}
     peerDependencies:
@@ -11809,6 +11819,8 @@ snapshots:
       gopd: 1.2.0
       set-function-name: 2.0.2
 
+  regexparam@2.0.2: {}
+
   regexpp@3.2.0: {}
 
   regexpu-core@6.2.0:
@@ -12333,6 +12345,10 @@ snapshots:
       postcss: 8.4.49
       typescript: 5.7.3
 
+  svelte-spa-router@4.0.1:
+    dependencies:
+      regexparam: 2.0.2
+
   svelte2tsx@0.7.34(svelte@5.17.3)(typescript@5.7.3):
     dependencies:
       dedent-js: 1.0.1
diff --git a/src/App.svelte b/src/App.svelte
index 259ee5d..45a082a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -1,37 +1,30 @@
 <script lang="ts">
-	import './app.css';
-	import Logo from './components/Logo.svelte';
-	import Menu from './components/Menu.svelte';
-	import { isLoggedin, tabs, currentTab, status, user } from './stores';
-	import Button from './components/Button.svelte';
-	import { checkAuth, initAuth0Client, login, logout } from './auth';
-	import { onMount } from 'svelte';
+	import { pwaInfo } from 'virtual:pwa-info';
+	import Router, { link, push } from 'svelte-spa-router';
+	import { wrap } from 'svelte-spa-router/wrap';
 	import { fly } from 'svelte/transition';
-	import List from './List.svelte';
 	import type { Auth0Client } from '@auth0/auth0-spa-js';
+
+	import './app.css';
+	import Button from './components/Button.svelte';
 	import ReloadPrompt from './components/ReloadPrompt.svelte';
-	import { pwaInfo } from 'virtual:pwa-info';
-	import ExportImport from './components/ExportImport.svelte';
 	import Toast from './components/Toast.svelte';
+	import Logo from './components/Logo.svelte';
 	import ToggleTheme from './components/ToggleTheme.svelte';
-	import { toastActions, toastMessage } from './stores';
-
-	let auth0: Auth0Client;
+	import About from './routes/About.svelte';
+	import NotFound from './routes/NotFound.svelte';
+	import Login from './routes/Login.svelte';
+	import Home from './routes/Home.svelte';
+	import { checkAuth, initAuth0Client } from './auth';
+	import { toastActions, toastMessage, status, isLoggedin } from './stores';
+	import type { ComponentType } from 'svelte';
+
+	let auth0 = $state<Auth0Client>();
 	let wrapper: HTMLElement;
 
-	let menuItems = $derived(
-		tabs.map((item) => ({
-			...item,
-			selected: item.label === $currentTab
-		}))
-	);
-
 	let showBackToTop = $state(false);
 
-	const handleMenu = (path: string) => {
-		currentTab.set(path);
-		scrollToTop();
-	};
+	const synced = import.meta.env.VITE_SYNCED === 'true';
 
 	const scrollToTop = () => {
 		wrapper.scrollIntoView({
@@ -46,21 +39,58 @@
 		});
 	};
 
-	onMount(async () => {
+	const initializeAuth = async () => {
+		auth0 = await initAuth0Client();
+		await checkAuth(auth0);
+	};
+
+	$effect(() => {
 		handleBackToTop();
-		if (import.meta.env.VITE_SYNCED === 'true' && navigator.onLine) {
-			if (!auth0) {
-				auth0 = await initAuth0Client();
-			}
-			try {
-				await checkAuth(auth0);
-				if (!$isLoggedin) return;
-			} catch (e) {
-				// Log out on failure
-				logout(auth0);
-			}
-		}
+		if (synced && !auth0) initializeAuth();
 	});
+
+	const routes = {
+		'/about': About,
+		'/login': wrap({
+			component: Login as unknown as ComponentType,
+			props: {
+				auth0: () => auth0
+			},
+			conditions: [
+				() => {
+					if (!synced) {
+						push(`/`);
+						return false;
+					}
+					return true;
+				},
+				() => {
+					if ($isLoggedin) {
+						push(`/`);
+						return false;
+					}
+					return true;
+				}
+			]
+		}),
+		'/': wrap({
+			component: Home as unknown as ComponentType,
+			props: {
+				auth0: () => auth0
+			},
+			conditions: [
+				() => {
+					if (!synced) return true;
+					if (!$isLoggedin) {
+						push('/login');
+						return false;
+					}
+					return true;
+				}
+			]
+		}),
+		'*': NotFound
+	};
 </script>
 
 <svelte:head>
@@ -70,33 +100,12 @@
 </svelte:head>
 
 <main class="Wrapper" bind:this={wrapper}>
-	{#if import.meta.env.VITE_SYNCED === 'true' && !$isLoggedin}
-		<div class="Login">
-			<Logo />
-			<Button onclick={() => login(auth0)}>Log in</Button>
-			<ToggleTheme />
-		</div>
-	{:else}
-		<aside class="Menu">
-			<Menu {menuItems} goTo={handleMenu}>
-				<ExportImport />
-			</Menu>
-		</aside>
-		<header class="Header">
-			<h1 data-syncing={$status} class="Logo" title="ToDone"><Logo /></h1>
-
-			<ToggleTheme />
-		</header>
-		<section class="Content">
-			{#if $isLoggedin}
-				<div class="Profile">
-					<img src={$user.picture} alt={$user.nickname} />
-					<Button onclick={() => logout(auth0)}>Log out</Button>
-				</div>
-			{/if}
-			<List />
-		</section>
-	{/if}
+	<header class="Header">
+		<h1 data-syncing={$status} class="Logo" title="ToDone"><a href="/" use:link><Logo /></a></h1>
+
+		<ToggleTheme />
+	</header>
+	<Router {routes} />
 	{#if showBackToTop}
 		<footer class="Footer" transition:fly={{ y: 100, duration: 500 }}>
 			<Button onclick={scrollToTop}
@@ -137,35 +146,26 @@
 {/if}
 
 <style>
-	.Wrapper,
-	.Login {
+	.Wrapper {
 		flex-flow: column;
 		display: flex;
 		min-height: 100vh;
-	}
-
-	.Login {
-		padding: 2rem;
-		gap: 2rem;
-		align-items: flex-start;
-
-		:global(.ColorToggle) {
-			margin-left: auto;
+		.Footer {
+			align-self: flex-end;
+			position: sticky;
+			bottom: 2rem;
+			padding: 0 1rem 0 0;
+			display: flex;
+			justify-content: flex-end;
 		}
-	}
-
-	.Menu {
-		position: fixed;
-		top: 0;
-		z-index: 9;
-	}
 
-	.Header {
-		align-self: flex-end;
-		display: flex;
-		gap: 2rem;
-		flex-direction: row-reverse;
-		padding-top: 1rem;
+		.Header {
+			align-self: flex-end;
+			display: flex;
+			gap: 2rem;
+			flex-direction: row-reverse;
+			padding-top: 1rem;
+		}
 	}
 
 	.Logo {
@@ -173,46 +173,23 @@
 		padding: 0.2em;
 		background: var(--white);
 		position: relative;
-	}
-
-	.Footer {
-		align-self: flex-end;
-		position: sticky;
-		bottom: 2rem;
-		padding: 0 1rem 0 0;
-		display: flex;
-		justify-content: flex-end;
-	}
-
-	.Profile {
-		display: flex;
-		gap: 1rem;
-		margin: 2rem;
-		justify-content: end;
-		align-items: center;
+		&[data-syncing] {
+			--indicator-color: var(--primary);
+		}
 
-		img {
-			inline-size: 3rem;
+		&[data-syncing]:not([data-syncing='NOT_SYNCED'])::after {
+			content: '';
+			width: 0.5em;
+			height: 0.5em;
 			border-radius: 100%;
+			background: var(--indicator-color);
+			position: absolute;
+			top: -0.2em;
+			left: -0.2em;
 		}
-	}
 
-	[data-syncing] {
-		--indicator-color: var(--primary);
-	}
-
-	[data-syncing]:not([data-syncing='NOT_SYNCED'])::after {
-		content: '';
-		width: 0.5em;
-		height: 0.5em;
-		border-radius: 100%;
-		background: var(--indicator-color);
-		position: absolute;
-		top: -0.2em;
-		left: -0.2em;
-	}
-
-	[data-syncing='ERROR'] {
-		--indicator-color: var(--red);
+		&[data-syncing='ERROR'] {
+			--indicator-color: var(--red);
+		}
 	}
 </style>
diff --git a/src/List.svelte b/src/List.svelte
index f270fe3..77216f7 100644
--- a/src/List.svelte
+++ b/src/List.svelte
@@ -235,9 +235,6 @@
 
 	.Search {
 		align-self: flex-end;
-		position: sticky;
-		z-index: 1;
-		top: 1rem;
 		display: inline-flex;
 		gap: 1rem;
 		padding: 0.5rem;
diff --git a/src/app.css b/src/app.css
index 8e4da1e..05b1741 100644
--- a/src/app.css
+++ b/src/app.css
@@ -47,6 +47,10 @@ img {
 	max-width: 100%;
 }
 
+a {
+	color: var(--primary);
+}
+
 .visually-hidden {
 	position: absolute;
 	margin: -1px;
diff --git a/src/auth.ts b/src/auth.ts
index 038bf20..13f5b7e 100644
--- a/src/auth.ts
+++ b/src/auth.ts
@@ -14,7 +14,7 @@ export const initAuth0Client = async () => {
 		domain: import.meta.env.VITE_AUTH0_DOMAIN,
 		cacheLocation: 'localstorage',
 		authorizationParams: {
-			redirect_uri: window.location.origin
+			redirect_uri
 		}
 	});
 };
@@ -60,7 +60,6 @@ export const checkAuth = async (auth0: Auth0Client) => {
 			token.set(id_token);
 		}, refreshRate);
 	}
-	// });
 
 	// clear token refresh interval on component unmount
 	return () => {
diff --git a/src/components/Form.svelte b/src/components/Form.svelte
index c03a7f0..6e2b139 100644
--- a/src/components/Form.svelte
+++ b/src/components/Form.svelte
@@ -82,7 +82,7 @@ Form component with a title and content inputs
 		bind:this={titleInput}
 	/>
 	<label class="visually-hidden" for="content">Content</label>
-	<textarea data-testid="content" data-empty={isEmpty} bind:value={data.value}></textarea>
+	<textarea data-testid="content" bind:value={data.value}></textarea>
 	<div class="Actions">
 		<Button data-testid="cancel" onclick={clear} disabled={invalid}>Cancel</Button>
 		<Button data-testid="submit" type="submit" variant="primary" disabled={invalid}
@@ -93,7 +93,6 @@ Form component with a title and content inputs
 
 <style>
 	form {
-		--textarea-width: 20rem;
 		gap: 1rem;
 		padding: 1rem;
 		border-radius: 0.5em;
@@ -127,15 +126,12 @@ Form component with a title and content inputs
 		}
 
 		textarea {
-			flex: var(--textarea-width);
+			flex: 20rem;
+			field-sizing: content;
 			font-size: 1rem;
 			line-height: 1.5rem;
 			font-family: monospace;
 			resize: vertical;
 		}
-
-		textarea[data-empty='false'] {
-			min-height: 50vh;
-		}
 	}
 </style>
diff --git a/src/db.ts b/src/db.ts
index e8c3c7e..1bf55d8 100644
--- a/src/db.ts
+++ b/src/db.ts
@@ -49,7 +49,8 @@ const todoSchema: RxJsonSchema<any> = {
 		completed: { type: 'boolean', default: false },
 		updated: { type: 'string', format: 'date-time' }
 	},
-	required: ['id', 'title', 'value', 'updated']
+	required: ['id', 'title', 'value', 'updated', 'completed'],
+	indexes: ['completed']
 };
 
 let db: RxDatabase;
@@ -95,6 +96,26 @@ const getDB = async () => {
 	}
 };
 
+export const getDocCount = async () => {
+	const db = await getDB();
+	const complete = db!.todos.count({
+		selector: {
+			completed: true
+		}
+	}).$;
+
+	const incomplete = db!.todos.count({
+		selector: {
+			completed: false
+		}
+	}).$;
+
+	return {
+		complete,
+		incomplete
+	};
+};
+
 export const getTodos = async () => {
 	const db = await getDB();
 	return db!.todos.find().sort({ updated: 'desc' }).$;
diff --git a/src/routes/About.svelte b/src/routes/About.svelte
new file mode 100644
index 0000000..10bd736
--- /dev/null
+++ b/src/routes/About.svelte
@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { marked } from 'marked';
+	import ExportImport from '../components/ExportImport.svelte';
+	import { getDocCount } from '../db';
+
+	import content from '../../About.md?raw';
+
+	let complete = $state<number>(0);
+	let incomplete = $state<number>(0);
+
+	const fetchCount = async () => {
+		const { complete: completeSub, incomplete: incompleteSub } = await getDocCount();
+		completeSub.subscribe((v: number) => {
+			complete = v;
+		});
+		incompleteSub.subscribe((v: number) => {
+			incomplete = v;
+		});
+	};
+
+	$effect(() => {
+		fetchCount();
+	});
+</script>
+
+<svelte:head>
+	<title>About ToDone &#8212; Get it done!</title>
+</svelte:head>
+
+<section class="Wrapper">
+	<div>{@html marked(content)}</div>
+	<details>
+		<summary>Data summary</summary>
+		<p>Completed: {complete}</p>
+		<p>In Completed: {incomplete}</p>
+		<nav>
+			<ExportImport />
+		</nav>
+	</details>
+</section>
+
+<style>
+	.Wrapper {
+		padding: 2rem;
+		display: flex;
+		flex-wrap: wrap;
+		justify-content: space-between;
+		gap: 2rem;
+
+		nav {
+			display: inline-flex;
+			align-items: flex-start;
+			gap: 2rem;
+		}
+	}
+</style>
diff --git a/src/routes/Home.svelte b/src/routes/Home.svelte
new file mode 100644
index 0000000..c16983c
--- /dev/null
+++ b/src/routes/Home.svelte
@@ -0,0 +1,64 @@
+<script lang="ts">
+	import { Auth0Client } from '@auth0/auth0-spa-js';
+
+	import List from '../List.svelte';
+	import Button from '../components/Button.svelte';
+	import Menu from '../components/Menu.svelte';
+	import { isLoggedin, tabs, currentTab, user } from '../stores';
+	import { logout } from '../auth';
+	import { push } from 'svelte-spa-router';
+
+	const { auth0: auth0Client } = $props<{ auth0: () => Auth0Client | undefined }>();
+	let auth0 = auth0Client();
+
+	let menuItems = $derived(
+		tabs.map((item) => ({
+			...item,
+			selected: item.label === $currentTab
+		}))
+	);
+
+	const handleMenu = (path: string) => {
+		currentTab.set(path);
+	};
+</script>
+
+<svelte:head>
+	<title>ToDone &#8212; Get it done!</title>
+</svelte:head>
+
+<aside class="Menu">
+	<Menu {menuItems} goTo={handleMenu}>
+		<Button size="large" variant="link" onclick={() => push('/about')}>About</Button>
+	</Menu>
+</aside>
+<section class="Content">
+	{#if $isLoggedin}
+		<div class="Profile">
+			<img src={$user.picture} alt={$user.nickname} />
+			<Button onclick={() => logout(auth0)}>Log out</Button>
+		</div>
+	{/if}
+	<List />
+</section>
+
+<style>
+	.Menu {
+		position: fixed;
+		top: 0;
+		z-index: 9;
+	}
+
+	.Profile {
+		display: flex;
+		gap: 1rem;
+		margin: 2rem;
+		justify-content: end;
+		align-items: center;
+
+		img {
+			inline-size: 3rem;
+			border-radius: 100%;
+		}
+	}
+</style>
diff --git a/src/routes/Login.svelte b/src/routes/Login.svelte
new file mode 100644
index 0000000..a1d369c
--- /dev/null
+++ b/src/routes/Login.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Auth0Client } from '@auth0/auth0-spa-js';
+
+	import Button from '../components/Button.svelte';
+	import { login } from '../auth';
+	import { isLoggedin } from '../stores';
+
+	const { auth0: auth0Client } = $props<{ auth0: () => Auth0Client | undefined }>();
+
+	let auth0 = auth0Client();
+</script>
+
+<svelte:head>
+	<title>Login to continue &#8212; Get it done!</title>
+</svelte:head>
+
+<main class="Login">
+	{#if $isLoggedin}
+		<p>You are already logged in.</p>
+	{:else}
+		<Button onclick={() => login(auth0)}>Log in</Button>
+	{/if}
+</main>
+
+<style>
+	.Login {
+		padding: 2rem;
+	}
+</style>
diff --git a/src/routes/NotFound.svelte b/src/routes/NotFound.svelte
new file mode 100644
index 0000000..9e1f440
--- /dev/null
+++ b/src/routes/NotFound.svelte
@@ -0,0 +1,13 @@
+<svelte:head>
+	<title>Not found &#8212; Get it done!</title>
+</svelte:head>
+
+<section>
+	<h1>The route was not found</h1>
+</section>
+
+<style>
+	section {
+		padding: 2rem;
+	}
+</style>