zenno: format

zenno/src/lib/CharaPick.svelte

@@ -17,7 +17,7 @@
 
 	const charas = $derived(characters ?? []);
 
-	const key = (v: Character) => ({id: v.chara_id, name: v.name});
+	const key = (v: Character) => ({ id: v.chara_id, name: v.name });
 </script>
 
 <Pick {id} items={charas} {key} bind:value {option} class={className} {required} />

zenno/src/lib/Pick.svelte

@@ -3,17 +3,17 @@
 	import type { ClassValue } from 'svelte/elements';
 	import { stringsearch } from './stringsearch';
 
-    interface Props {
+	interface Props {
-        id: string;
+		id: string;
-        items: T[];
+		items: T[];
-        key: (t: T) => {id: number, name: string};
+		key: (t: T) => { id: number; name: string };
-        value: T | undefined;
+		value: T | undefined;
-        option?: Snippet<[T]>;
+		option?: Snippet<[T]>;
-        class?: ClassValue | null;
+		class?: ClassValue | null;
-        required?: boolean;
+		required?: boolean;
-    }
+	}
 
-    let {id, items, key, value = $bindable(), option, class: className, required = false}: Props = $props();
+	let { id, items, key, value = $bindable(), option, class: className, required = false }: Props = $props();
 
 	let popover: HTMLElement | undefined = $state();
 	let optionsContainer: HTMLElement | undefined = $state();
@@ -21,14 +21,14 @@
 
 	let search = $state('');
 
-    const its = $derived(items ?? []);
+	const its = $derived(items ?? []);
-    const searched = $derived(stringsearch(search, its, (v) => key(v).name) || its);
+	const searched = $derived(stringsearch(search, its, (v) => key(v).name) || its);
 
-    $effect(() => {
+	$effect(() => {
-        if (required && value == null && its.length > 0) {
+		if (required && value == null && its.length > 0) {
-            value = its[0];
+			value = its[0];
-        }
+		}
-    });
+	});
 
 	function setByElem(o: HTMLElement) {
 		const j = parseInt(o.dataset.pickId ?? '');
@@ -126,8 +126,8 @@
 				</div>
 			{/if}
 			{#each searched as c (key(c).id)}
-                {@const v = value != null ? key(value).id : 0}
+				{@const v = value != null ? key(value).id : 0}
-                {@const k = key(c)}
+				{@const k = key(c)}
 				<div
 					class="h-8 w-full text-lg hover:cursor-pointer hover:bg-mist-300 hover:dark:bg-mist-900"
 					role="option"

zenno/src/lib/data/spark.ts

@@ -156,10 +156,10 @@ export interface SparkGroup {
 
 export function byGroup(sparks: Spark[]): SparkGroup[] {
 	const r = new Map<number, SparkGroup>();
-	for (const {spark_id, name, description, spark_group, type, effects} of sparks) {
+	for (const { spark_id, name, description, spark_group, type, effects } of sparks) {
 		let g = r.get(spark_group);
 		if (g == null) {
-			g = {spark_group, name, description, type, effects, spark_ids: []};
+			g = { spark_group, name, description, type, effects, spark_ids: [] };
 			r.set(spark_group, g);
 		}
 		g.spark_ids.push(spark_id);

zenno/src/routes/doc/spark/+page.svelte

@@ -52,14 +52,14 @@
 	}
 	const curClass = $derived(sparkClass(group?.type));
 
-	const key = (v: spark.SparkGroup) => ({id: v.spark_group, name: v.name})
+	const key = (v: spark.SparkGroup) => ({ id: v.spark_group, name: v.name });
 </script>
 
 <h1 class="text-4xl">Spark Explorer</h1>
 <form class="mx-auto mt-8 rounded-md p-4 text-center shadow-md ring md:max-w-2xl">
 	<Pick id="spark" items={groups} class="w-full" {key} bind:value={group} required>
 		{#snippet option(g)}
-			<span class={['spark px-2 py-1 rounded', sparkClass(g.type)]}>{g.name}</span>
+			<span class={['spark rounded px-2 py-1', sparkClass(g.type)]}>{g.name}</span>
 		{/snippet}
 	</Pick>
 </form>
@@ -83,9 +83,9 @@
 		<tbody>
 			{#each curDescriptions as s (s)}
 				<tr>
-					<td class="flex gap-2 p-1 text-center border border-mist-400 dark:border-mist-950">
+					<td class="flex gap-2 border border-mist-400 p-1 text-center dark:border-mist-950">
 						{#each s as n (n)}
-							<span class="flex-1 my-auto">{n}</span>
+							<span class="my-auto flex-1">{n}</span>
 						{/each}
 					</td>
 				</tr>