From 40d48e3c09b425dc25eb89faaa3db651cd70cac9 Mon Sep 17 00:00:00 2001
From: Bernard Siebens <bernard@siebens.org>
Date: Sun, 25 Jan 2026 16:22:58 +0100
Subject: [PATCH] Replace `@lucide/svelte` with `lucide` and `lucide-svelte`,
 update AppBar headline layout with dynamic page titles.

---
 package-lock.json         | 27 +++++++++++++++++----------
 package.json              |  3 ++-
 src/routes/+layout.svelte | 12 +++++++++++-
 src/routes/+layout.ts     |  6 ++++--
 4 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 4d04e6f..1d55f12 100644
--- a/package-lock.json
+++ b/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",
diff --git a/package.json b/package.json
index 2e6a78c..e83969a 100644
--- a/package.json
+++ b/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"
 	}
 }
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index d0b3b02..3c1edd7 100644
--- a/src/routes/+layout.svelte
+++ b/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>
diff --git a/src/routes/+layout.ts b/src/routes/+layout.ts
index 36a9421..e3c6af0 100644
--- a/src/routes/+layout.ts
+++ b/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
 	}
 }
\ No newline at end of file