Show number of added cards

ts/routes/editor/NoteEditor.svelte

@@ -586,12 +586,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
         if (!(await noteCanBeAdded())) {
             return;
         }
-        const noteId = (
+        const response = await addEditorNote({
-            await addEditorNote({
+            note: note!,
-                note: note!,
+            deckId,
-                deckId,
+        });
-            })
+        showToast(
-        ).noteId;
+            tr.importingCardsAdded({ count: response.changes!.count }),
+            "success",
+            500,
+        );
+        const noteId = response.noteId;
         note.id = noteId;
         addNoteToHistory(note!);
         lastAddedNote = note;
@@ -767,6 +771,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import type NotetypeChooser from "$lib/components/NotetypeChooser.svelte";
     import type DeckChooser from "$lib/components/DeckChooser.svelte";
     import { ConfigKey_Bool } from "@generated/anki/config_pb";
+    import {
+        destroyToast,
+        initToast,
+        showToast,
+    } from "../image-occlusion/toast-utils.svelte";
 
     $: isIOImageLoaded = false;
     $: ioImageLoadedStore.set(isIOImageLoaded);
@@ -1231,6 +1240,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
             deregisterSticky = registerShortcut(toggleStickyAll, "Shift+F9");
         }
 
+        initToast();
+
         function wrap(before: string, after: string): void {
             if (!$focusedInput || !editingInputIsRichText($focusedInput)) {
                 return;
@@ -1293,6 +1304,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     onDestroy(() => {
         deregisterSticky();
+        destroyToast();
     });
 
     let apiPartial: Partial<NoteEditorAPI> = {};

ts/routes/image-occlusion/MaskEditor.svelte

@@ -17,15 +17,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { MaskEditorAPI } from "./tools/api";
     import { onResize } from "./tools/tool-zoom";
     import { saveNeededStore } from "./store";
-    import { destroyToast, initToast } from "./toast-utils.svelte";
-    import type Toast from "./Toast.svelte";
 
     export let mode: IOMode;
     const iconSize = 80;
     let innerWidth = 0;
     const startingTool = mode.kind === "add" ? "draw-rectangle" : "cursor";
     let canvas: fabric.Canvas | null = null;
-    let toast: Toast | null = null;
 
     $: {
         globalThis.maskEditor = canvas ? new MaskEditorAPI(canvas) : null;
@@ -70,13 +67,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 
     onMount(() => {
         window.addEventListener("resize", resizeEvent);
-        toast = initToast();
     });
 
     onDestroy(() => {
         window.removeEventListener("resize", resizeEvent);
         unsubscribe();
-        destroyToast(toast!);
     });
 
     const resizeEvent = () => {

ts/routes/image-occlusion/Toast.svelte

@@ -8,17 +8,23 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     import { mdiClose } from "$lib/components/icons";
     import type { ToastProps } from "./types";
 
-    const props: ToastProps = $props();
+    let { showToast, type, message, timeout }: ToastProps = $props();
 
     const closeToast = () => {
-        props.showToast = false;
+        showToast = false;
     };
+
+    $effect(() => {
+        if (timeout) {
+            setTimeout(closeToast, timeout);
+        }
+    });
 </script>
 
-{#if props.showToast}
+{#if showToast}
-    <div class="toast-container desktop-only">
+    <div class="toast-container">
-        <div class="toast {props.type === 'success' ? 'success' : 'error'}">
+        <div class="toast {type === 'success' ? 'success' : 'error'}">
-            {props.message}
+            {message}
             <IconButton iconSize={96} on:click={closeToast} class="toast-icon">
                 <Icon icon={mdiClose} />
             </IconButton>

ts/routes/image-occlusion/toast-utils.svelte.ts

@@ -11,21 +11,27 @@ const toastProps: ToastProps = $state({
     message: "",
 });
 
-export function initToast(): Toast {
+let toast: Toast | null = null;
-    return mount(Toast, {
+
+export function initToast() {
+    toast = mount(Toast, {
         target: document.body,
         props: toastProps,
     });
 }
 
-export function destroyToast(toast: Toast) {
+export function destroyToast() {
-    unmount(toast);
+    if (toast) {
+        unmount(toast);
+        toast = null;
+    }
 }
 
-export function showToast(message: string, type: "success" | "error") {
+export function showToast(message: string, type: "success" | "error", timeout?: number) {
     toastProps.message = message;
     toastProps.type = type;
     toastProps.showToast = true;
+    toastProps.timeout = timeout;
 }
 
 export function hideToast() {

ts/routes/image-occlusion/types.ts

@@ -14,4 +14,5 @@ export interface ToastProps {
     message: string;
     type: "success" | "error";
     showToast: boolean;
+    timeout?: number;
 }