add image support to sidebar header

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

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;

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 */

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,