From ee2e51affd2746ef69674d0406ebafc4f4f5207f Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 3 Dec 2025 20:51:10 -0800
Subject: [PATCH] add image support to sidebar header

---
 src/lib/components/ui/PaneStack.svelte     |  2 +-
 src/lib/components/ui/SidebarHeader.svelte | 26 ++++++++++++++++++++--
 src/lib/stores/paneStack.svelte.ts         |  2 ++
 src/lib/stores/sidebar.svelte.ts           |  2 ++
 4 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/ui/PaneStack.svelte b/src/lib/components/ui/PaneStack.svelte
index 31b48df9..e460f2c8 100644
--- a/src/lib/components/ui/PaneStack.svelte
+++ b/src/lib/components/ui/PaneStack.svelte
@@ -84,7 +84,7 @@
 			class:scrollable={pane.scrollable !== false}
 			style:--pane-depth={depth}
 		>
-			<SidebarHeader title={pane.title}>
+			<SidebarHeader title={pane.title} image={pane.image}>
 				{#snippet leftAccessory()}
 					{#if showBackButton}
 						<Button
diff --git a/src/lib/components/ui/SidebarHeader.svelte b/src/lib/components/ui/SidebarHeader.svelte
index 3f629a58..bef55929 100644
--- a/src/lib/components/ui/SidebarHeader.svelte
+++ b/src/lib/components/ui/SidebarHeader.svelte
@@ -6,13 +6,15 @@
 	interface Props {
 		/** Title for the sidebar header */
 		title: string
+		/** Optional image URL to display next to the title */
+		image?: string
 		/** Left accessory content (e.g., close/back button) */
 		leftAccessory?: Snippet
 		/** Right accessory content (e.g., save/edit button) */
 		rightAccessory?: Snippet
 	}
 
-	const { title, leftAccessory, rightAccessory }: Props = $props()
+	const { title, image, leftAccessory, rightAccessory }: Props = $props()
 </script>
 
 <div class="sidebar-header">
@@ -22,7 +24,12 @@
 		{/if}
 	</div>
 
-	<h2 class="sidebar-title">{title}</h2>
+	<div class="sidebar-title-container">
+		{#if image}
+			<img src={image} alt="" class="title-image" />
+		{/if}
+		<h2 class="sidebar-title">{title}</h2>
+	</div>
 
 	<div class="header-right">
 		{#if rightAccessory}
@@ -76,6 +83,21 @@
 			gap: $unit-half;
 		}
 
+		.sidebar-title-container {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			gap: $unit-half;
+		}
+
+		.title-image {
+			width: calc($unit * 3);
+			height: calc($unit * 3);
+			object-fit: contain;
+			border-radius: $item-corner-small;
+			flex-shrink: 0;
+		}
+
 		.sidebar-title {
 			margin: 0;
 			font-size: $font-regular;
diff --git a/src/lib/stores/paneStack.svelte.ts b/src/lib/stores/paneStack.svelte.ts
index 2be0a5e9..7f2a4598 100644
--- a/src/lib/stores/paneStack.svelte.ts
+++ b/src/lib/stores/paneStack.svelte.ts
@@ -31,6 +31,8 @@ export interface PaneConfig {
 	id: string
 	/** Title displayed in the pane header */
 	title: string
+	/** Optional image URL to display next to the title */
+	image?: string
 	/** Component to render in the pane */
 	component: Component<any, any, any>
 	/** Props to pass to the component */
diff --git a/src/lib/stores/sidebar.svelte.ts b/src/lib/stores/sidebar.svelte.ts
index 494e4e24..842d599a 100644
--- a/src/lib/stores/sidebar.svelte.ts
+++ b/src/lib/stores/sidebar.svelte.ts
@@ -15,6 +15,7 @@ interface OpenWithComponentOptions {
 	saveLabel?: string
 	element?: ElementType
 	onback?: () => void
+	image?: string
 }
 
 interface SidebarState {
@@ -66,6 +67,7 @@ class SidebarStore {
 		const paneConfig: PaneConfig = {
 			id: crypto.randomUUID(),
 			title,
+			image: opts.image,
 			component,
 			props,
 			onback: opts.onback,