zenno/chara/convo: integrate umadump talk gallery

Fixes #47.

zenno/src/routes/chara/convo/+page.svelte

@@ -29,35 +29,29 @@
 	let convo = $state(1);
 
 	let talkFiles: FileList | undefined = $state();
-	const talkData = $derived.by(async () => {
+	let readIDs = new SvelteSet<number>();
+	let talkFileInvalid = $state(false);
+	async function setRead(f: FileList) {
+		talkFiles = f;
+		readIDs.clear();
+		talkFileInvalid = false;
 		if (talkFiles == null || talkFiles.length === 0) {
-			return undefined;
+			return;
 		}
 		const t = await talkFiles[0].text();
 		const d = JSON.parse(t);
-		return talk.Gallery.safeDecode(d);
-	});
-	const readIDs = $derived.by(async () => {
-		const d = await talkData;
-		const s = new SvelteSet<number>();
-		if (d == null) {
-			return s;
+		const g = talk.Gallery.safeDecode(d);
+		if (!g.success) {
+			talkFileInvalid = true;
+			console.warn(g.error);
+			return;
 		}
-		if (!d.success) {
-			console.warn(d.error);
-			return s;
+		for (const e of g.data.talk_gallery_list) {
+			readIDs.add(e.home_story_trigger_id);
 		}
-		for (const e of d.data.talk_gallery_list) {
-			s.add(e.home_story_trigger_id);
 	}
-		return s;
-	});
-	const talkFileErrs = $derived((await talkData)?.error?.issues);
-	const conversations = $derived.by(async () => {
-		const s = await readIDs;
-		return allConvos.filter((c) => !s.has(c.id));
-	});
-	const convoMap = $derived(byChara(await conversations));
+	const conversations = $derived(allConvos.filter((c) => !readIDs.has(c.id)));
+	const convoMap = $derived(byChara(conversations));
 	const selCharas = $derived(characters.filter((c) => convoMap.has(c.chara_id)));
 
 	const options = $derived(convoMap.get(chara?.chara_id ?? 0) ?? []);
@@ -96,9 +90,19 @@
 		<label for="talkgallery" class="block">
 			Select <span class="inline-block font-mono">talk_gallery_data.json</span> to hide read conversations.
 		</label>
-		<input type="file" class="appearance-auto" accept="application/json" id="talkgallery" bind:files={talkFiles} />
+		<input
+			type="file"
+			class="rounded-full p-4"
+			accept="application/json"
+			id="talkgallery"
+			bind:files={() => talkFiles ?? new DataTransfer().files, setRead}
+		/>
+		<button
+			class="ml-4 rounded-full bg-mist-300 p-2 hover:cursor-pointer dark:bg-mist-900"
+			onclick={() => setRead(new DataTransfer().files)}>Reset</button
+		>
 	</div>
-	{#if (talkFileErrs?.length ?? 0) > 0}
+	{#if talkFileInvalid}
 		<div class="col-span-full">Invalid File</div>
 	{/if}
 </div>