zenno: include character icons in character picks

zenno/src/lib/CharaPick.svelte

@@ -1,23 +1,29 @@
 <script lang="ts">
 	import type { Character } from '$lib/data/character';
-	import type { Snippet } from 'svelte';
 	import type { ClassValue } from 'svelte/elements';
 	import Pick from './Pick.svelte';
+	import CharaIcon from './CharaIcon.svelte';
 
 	interface Props {
 		id: string;
 		characters: Character[] | null;
 		value: Character | undefined;
 		class?: ClassValue | null;
-		option?: Snippet<[Character]>;
 		required?: boolean;
 	}
 
-	let { id, characters, value = $bindable(), class: className, option, required = false }: Props = $props();
+	let { id, characters, value = $bindable(), class: className, required = false }: Props = $props();
 
 	const charas = $derived(characters ?? []);
 
 	const key = (v: Character) => ({ id: v.chara_id, name: v.name });
 </script>
 
-<Pick {id} items={charas} {key} bind:value {option} class={className} {required} />
+<Pick {id} items={charas} {key} bind:value class={className} {required}>
+	{#snippet option(c: Character)}
+		<span>
+			<CharaIcon chara_id={c.chara_id} size={32} />
+			{c.name}
+		</span>
+	{/snippet}
+</Pick>