integrate: sly spa router

Author: chase-moskal

package-lock.json

@@ -30,9 +30,9 @@
 	"dependencies": {
 		"@e280/kv": "^0.1.0",
 		"@e280/renraku": "^0.5.0",
-		"@e280/sly": "^0.2.0-16",
-		"@e280/strata": "^0.2.0-13",
-		"@e280/stz": "^0.2.5",
+		"@e280/sly": "^0.2.0-17",
+		"@e280/strata": "^0.2.0-14",
+		"@e280/stz": "^0.2.6",
 		"lit": "^3.3.1"
 	},
 	"devDependencies": {

package.json

@@ -1,6 +1,6 @@
 
 import {html} from "lit"
-import {view} from "@e280/sly"
+import {spa, view} from "@e280/sly"
 
 import styleCss from "./style.css.js"
 import {Context} from "../context.js"
@@ -13,34 +13,23 @@ export class OliveApp extends (view.component(use => {
 	use.css(themeCss, styleCss)
 
 	const context = use.once(() => new Context())
-	// const router = use.once(() => new Hashrouter({
-	// 	dashboard: new Route(
-	// 		[],
-	// 		async() => DashboardView.props(context).children(html`<slot></slot>`).render(),
-	// 	),
-	// 	account: new Route(
-	// 		["account"],
-	// 		async() => html`account`,
-	// 	),
-	// 	orgs: new Route(
-	// 		["orgs"],
-	// 		async() => html`orgs`,
-	// 	),
-	// 	org: new Route(
-	// 		["orgs", {}],
-	// 		async(orgId: string) => html`org ${orgId}`,
-	// 	),
-	// 	chats: new Route(
-	// 		["chats"],
-	// 		async() => html`chats`,
-	// 	),
-	// 	chat: new Route(
-	// 		["chat", {}],
-	// 		async(chatId: string) => html`chat ${chatId}`,
-	// 	),
-	// }))
 
-	// const {hash} = router
+	const router = use.once(() => new spa.Router({
+		routes: {
+			dashboard: spa.route("#/", async() =>
+				DashboardView
+					.props(context)
+					.children(html`<slot></slot>`)
+					.render()
+			),
+			account: spa.route("#/account", async() => html`account`),
+			orgs: spa.route("#/orgs", async() => html`orgs`),
+			org: spa.route("#/org/{orgId}", async({orgId}) => html`org ${orgId}`),
+			chats: spa.route("#/chats", async() => html`chats`),
+			chat: spa.route("#/chat/{chatId}", async({chatId}) => html`chat ${chatId}`),
+		},
+	}))
+
 	const $navOpen = use.signal(false)
 	const taglines = use.once(() => new Taglines())
 
@@ -54,21 +43,19 @@ export class OliveApp extends (view.component(use => {
 
 	const closeNav = () => toggleNav(false)
 
-	const renderLink = (label: string, url: string, isActive: boolean) => html`
+	const renderLink = <N extends spa.Navigable>(
+			label: string,
+			nav: N,
+			...params: Parameters<N["hash"]>
+		) => html`
 		<a
-			href="${url}"
-			?data-active="${isActive}"
+			href="${nav.hash(...params)}"
+			?data-active="${nav.active}"
 			@click="${closeNav}">
 				${label}
 		</a>
 	`
 
-				// <div class=links>
-				// 	${renderLink("🫒 Dashboard", "#/", hash === "")}
-				// 	${renderLink("👤 Account", "#/account", hash.startsWith("#/account"))}
-				// 	${renderLink("🏛 Orgs", "#/orgs", hash.startsWith("#/orgs"))}
-				// 	${renderLink("💬 Chats", "#/chats", hash.startsWith("#/chats"))}
-				// </div>
 	return html`
 		<nav ?data-open="${$navOpen()}">
 			<button theme=icon @click="${() => toggleNav()}">${menu2Svg}</button>
@@ -83,10 +70,16 @@ export class OliveApp extends (view.component(use => {
 						<p>${taglines.$tagline()}</p>
 					</div>
 				</header>
+				<div class=links>
+					${renderLink("🫒 Dashboard", router.nav.dashboard)}
+					${renderLink("👤 Account", router.nav.account)}
+					${renderLink("🏛 Orgs", router.nav.orgs)}
+					${renderLink("💬 Chats", router.nav.chats)}
+				</div>
 			</div>
 		</nav>
 
-		<main>${"404 not found"}</main>
+		<main>${router.render()}</main>
 
 		<div class=blanket
 			?inert="${!$navOpen()}"

s/ui/app/component.ts

@@ -108,6 +108,15 @@ main {
 	padding-top: 4em;
 	height: 100%;
 	overflow-y: auto;
+
+	[view="loading"] {
+		font-size: 5em;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		width: 100%;
+		height: 100%;
+	}
 }
 
 .blanket {