zenno: include character icons in character picks

zenno/src/lib/CharaIcon.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+
+	const sizes = [256, 64, 32, 16] as const;
+
+	interface Props {
+		chara_id: number | null | undefined;
+		size: (typeof sizes)[number];
+	}
+
+	let { chara_id, size, ...rest }: Props & SvelteHTMLElements['picture'] = $props();
+
+	const icon = $derived(chara_id ?? 0);
+	const avifs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/chara/${icon}/${sz}x${sz}.avif ${sz / size}x`)
+			.join(', '),
+	);
+	const pngs = $derived(
+		sizes
+			.filter((sz) => sz >= size)
+			.map((sz) => `/img/chara/${icon}/${sz}x${sz}.png ${sz / size}x`)
+			.join(', '),
+	);
+	const src = $derived(icon !== 0 ? `/img/chara/${icon}/${sizes[0]}x${sizes[0]}.png` : `/img/skill/10011`);
+</script>
+
+{#if icon !== 0}
+	<picture {...rest}>
+		<source srcset={avifs} type="image/avif" />
+		<source srcset={pngs} type="image/png" />
+		<img {src} alt={`Icon for character ID ${chara_id}`} class="inline" width={size} height={size} loading="lazy" />
+	</picture>
+{:else}
+	<div class={`w-[${size}px] h-[${size}px]`}></div>
+{/if}

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>

zenno/src/lib/SkillIcon.svelte

@@ -30,7 +30,7 @@
 	<picture {...rest}>
 		<source srcset={avifs} type="image/avif" />
 		<source srcset={pngs} type="image/png" />
-		<img {src} alt="Skill icon" class="inline" width={size} height={size} loading="lazy" />
+		<img {src} alt={`Skill icon ID ${icon_id}`} class="inline" width={size} height={size} loading="lazy" />
 	</picture>
 {:else}
 	<div class={`w-[${size}px] h-[${size}px]`}></div>