From 740d95d53fb5b15e8b669d6ab1955d1fc778ee89 Mon Sep 17 00:00:00 2001
From: Damien Elmes <gpg@ankiweb.net>
Date: Wed, 25 Sep 2024 19:51:18 +1000
Subject: [PATCH] Fix inability to save occlusions on mobile

---
 .../[...imagePathOrNoteId]/+page.ts           |  2 +-
 ...e-note.ts => add-or-update-note.svelte.ts} | 20 ++++++++++++-------
 ts/routes/image-occlusion/index.ts            |  2 +-
 3 files changed, 15 insertions(+), 9 deletions(-)
 rename ts/routes/image-occlusion/{add-or-update-note.ts => add-or-update-note.svelte.ts} (86%)

diff --git a/ts/routes/image-occlusion/[...imagePathOrNoteId]/+page.ts b/ts/routes/image-occlusion/[...imagePathOrNoteId]/+page.ts
index d8df25f27..6f83cc44c 100644
--- a/ts/routes/image-occlusion/[...imagePathOrNoteId]/+page.ts
+++ b/ts/routes/image-occlusion/[...imagePathOrNoteId]/+page.ts
@@ -3,7 +3,7 @@
 
 import { get } from "svelte/store";
 
-import { addOrUpdateNote } from "../add-or-update-note";
+import { addOrUpdateNote } from "../add-or-update-note.svelte";
 import type { IOMode } from "../lib";
 import { hideAllGuessOne } from "../store";
 import type { PageLoad } from "./$types";
diff --git a/ts/routes/image-occlusion/add-or-update-note.ts b/ts/routes/image-occlusion/add-or-update-note.svelte.ts
similarity index 86%
rename from ts/routes/image-occlusion/add-or-update-note.ts
rename to ts/routes/image-occlusion/add-or-update-note.svelte.ts
index d3af77b59..e802cff94 100644
--- a/ts/routes/image-occlusion/add-or-update-note.ts
+++ b/ts/routes/image-occlusion/add-or-update-note.svelte.ts
@@ -6,6 +6,7 @@ import { addImageOcclusionNote, updateImageOcclusionNote } from "@generated/back
 import * as tr from "@generated/ftl";
 import { get } from "svelte/store";
 
+import { mount } from "svelte";
 import type { IOMode } from "./lib";
 import { exportShapesToClozeDeletions } from "./shapes/to-cloze";
 import { notesDataStore, tagsWritable } from "./store";
@@ -52,19 +53,24 @@ export const addOrUpdateNote = async function(
 
 // show toast message
 const showResult = (noteId: number | null, result: OpChanges, count: number) => {
-    const toastComponent = new Toast({
+    const props = $state({
+        message: "",
+        type: "error" as "error" | "success",
+        showToast: true,
+    });
+    mount(Toast, {
         target: document.body,
-        props: {
-            message: "",
-            type: "error",
-        },
+        props,
     });
 
     if (result.note) {
         const msg = noteId ? tr.browsingCardsUpdated({ count: count }) : tr.importingCardsAdded({ count: count });
-        toastComponent.$set({ message: msg, type: "success", showToast: true });
+        props.message = msg;
+        props.type = "success";
+        props.showToast = true;
     } else {
         const msg = tr.notetypesErrorGeneratingCloze();
-        toastComponent.$set({ message: msg, showToast: true });
+        props.message = msg;
+        props.showToast = true;
     }
 };
diff --git a/ts/routes/image-occlusion/index.ts b/ts/routes/image-occlusion/index.ts
index da4e77c88..59720b1e0 100644
--- a/ts/routes/image-occlusion/index.ts
+++ b/ts/routes/image-occlusion/index.ts
@@ -7,7 +7,7 @@ import { ModuleName, setupI18n } from "@tslib/i18n";
 import { checkNightMode } from "@tslib/nightmode";
 import { get } from "svelte/store";
 
-import { addOrUpdateNote } from "./add-or-update-note";
+import { addOrUpdateNote } from "./add-or-update-note.svelte";
 import ImageOcclusionPage from "./ImageOcclusionPage.svelte";
 import type { IOMode } from "./lib";
 import { hideAllGuessOne } from "./store";