Replace @lucide/svelte with lucide and lucide-svelte, update AppBar headline layout with dynamic page titles.

package-lock.json

@@ -8,7 +8,8 @@
 			"name": "blackbook",
 			"version": "0.0.1",
 			"dependencies": {
-				"@lucide/svelte": "^0.563.1"
+				"lucide": "^0.563.0",
+				"lucide-svelte": "^0.563.0"
 			},
 			"devDependencies": {
 				"@chromatic-com/storybook": "^5.0.0",
@@ -924,15 +925,6 @@
 				"@jridgewell/sourcemap-codec": "^1.4.14"
 			}
 		},
-		"node_modules/@lucide/svelte": {
-			"version": "0.563.1",
-			"resolved": "https://registry.npmjs.org/@lucide/svelte/-/svelte-0.563.1.tgz",
-			"integrity": "sha512-Kt+MbnE5D9RsuI/csmf7M+HWxALe57x3A0DhQ8pPnnUpneh7zuldrYjlT+veWtk+tVnp5doQtaAAxLujzIlhBw==",
-			"license": "ISC",
-			"peerDependencies": {
-				"svelte": "^5"
-			}
-		},
 		"node_modules/@mdx-js/react": {
 			"version": "3.1.1",
 			"resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.1.tgz",
@@ -4956,6 +4948,21 @@
 			"dev": true,
 			"license": "MIT"
 		},
+		"node_modules/lucide": {
+			"version": "0.563.0",
+			"resolved": "https://registry.npmjs.org/lucide/-/lucide-0.563.0.tgz",
+			"integrity": "sha512-2zBzDJ5n2Plj3d0ksj6h9TWPOSiKu9gtxJxnBAye11X/8gfWied6IYJn6ADYBp1NPoJmgpyOYP3wMrVx69+2AA==",
+			"license": "ISC"
+		},
+		"node_modules/lucide-svelte": {
+			"version": "0.563.0",
+			"resolved": "https://registry.npmjs.org/lucide-svelte/-/lucide-svelte-0.563.0.tgz",
+			"integrity": "sha512-pjZKw7TpQcamfQrx7YdbOHgmrcNeKiGGMD0tKZQaVktwSsbqw28CsKc2Q97ttwjytiCWkJyOa8ij2Q+Og0nPfQ==",
+			"license": "ISC",
+			"peerDependencies": {
+				"svelte": "^3 || ^4 || ^5.0.0-next.42"
+			}
+		},
 		"node_modules/lz-string": {
 			"version": "1.5.0",
 			"resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",

package.json

@@ -53,6 +53,7 @@
 		"vitest": "^4.0.18"
 	},
 	"dependencies": {
-		"@lucide/svelte": "^0.563.1"
+		"lucide": "^0.563.0",
+		"lucide-svelte": "^0.563.0"
 	}
 }

src/routes/+layout.svelte

@@ -3,6 +3,7 @@
 	import favicon from '$lib/assets/favicon.svg';
     import { AppBar } from "@skeletonlabs/skeleton-svelte";
     import type { LayoutProps } from "./$types";
+    import { ChevronRight } from 'lucide-svelte'
 
     let { data, children }: LayoutProps = $props();
 </script>
@@ -16,7 +17,16 @@
         <AppBar>
             <AppBar.Toolbar class="grid-cols-[auto_1fr_auto]">
                 <AppBar.Headline>
-                    <h1 class="h3">BlackBook</h1> { data.status.options.title }
+                    <div class="flex flex-row gap-2 items-end">
+                        <h1 class="h2">BlackBook</h1>
+                        <ChevronRight class="text-primary-800-200 mb-1" />
+                        <p class="text-primary-800-200 mb-1">{ data.status.options.title }</p>
+
+                        {#if data.pageTitle }
+                          <ChevronRight class="text-primary-800-200 mb-1" />
+                          <p class="text-primary-800-200 mb-1">{ data.pageTitle }</p>
+                        {/if}
+                    </div>
                 </AppBar.Headline>
             </AppBar.Toolbar>
         </AppBar>

src/routes/+layout.ts

@@ -3,8 +3,10 @@ import type { LayoutLoad } from './$types'
 
 const ledgerAPI = new LedgerAPIClient({ baseURL: resolveLedgerAPIBaseURL("http://127.0.0.1:8000") })
 
-export const load: LayoutLoad = async () => {
+export const load: LayoutLoad = async ({ data, url }) => {
 	return {
-		status: await ledgerAPI.status()
+		status: await ledgerAPI.status(),
+		pageTitle: data?.pageTitle ?? null,
+		url: url.pathname
 	}
 }