From 70dd6882c1fb637b8f6f7414351cf9bb5ec16fed Mon Sep 17 00:00:00 2001
From: ZXY101 <tennershaun@gmail.com>
Date: Fri, 22 Sep 2023 17:12:26 +0200
Subject: [PATCH] Anki connect integration testing

---
 src/lib/components/Reader/TextBoxes.svelte | 19 ++++++++++++++++++-
 src/lib/components/Snackbar.svelte         |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/lib/components/Reader/TextBoxes.svelte b/src/lib/components/Reader/TextBoxes.svelte
index 9dc1664..e8fb87e 100644
--- a/src/lib/components/Reader/TextBoxes.svelte
+++ b/src/lib/components/Reader/TextBoxes.svelte
@@ -1,7 +1,9 @@
 <script lang="ts">
-  import { clamp } from '$lib/util';
+  import { clamp, showSnackbar } from '$lib/util';
   import type { Page } from '$lib/types';
   import { settings } from '$lib/settings';
+  import { CirclePlusSolid } from 'flowbite-svelte-icons';
+  import { getLastCardInfo } from '$lib/anki-connect';
 
   export let page: Page;
 
@@ -36,6 +38,12 @@
   $: display = $settings.displayOCR ? 'block' : 'none';
   $: border = $settings.textBoxBorders ? '1px solid red' : 'none';
   $: contenteditable = $settings.textEditable;
+
+  async function onUpdateCard() {
+    const res = await getLastCardInfo();
+
+    showSnackbar(res.fields.Word.value);
+  }
 </script>
 
 {#each textBoxes as { fontSize, height, left, lines, top, width, writingMode }, index (`text-box-${index}`)}
@@ -52,6 +60,11 @@
     style:border
     {contenteditable}
   >
+    {#if $settings.ankiConnectSettings.enabled}
+      <button class="absolute -m-8 opacity-0 hover:block p-4" on:click={onUpdateCard}>
+        <CirclePlusSolid class="text-primary-500 hover:text-primary-600" />
+      </button>
+    {/if}
     {#each lines as line}
       <p>{line}</p>
     {/each}
@@ -87,6 +100,10 @@
     font-weight: var(--bold);
   }
 
+  .text-box:hover button {
+    opacity: 100;
+  }
+
   .text-box:focus p,
   .text-box:hover p {
     display: table;
diff --git a/src/lib/components/Snackbar.svelte b/src/lib/components/Snackbar.svelte
index 008c633..28e5bfa 100644
--- a/src/lib/components/Snackbar.svelte
+++ b/src/lib/components/Snackbar.svelte
@@ -4,5 +4,5 @@
 </script>
 
 {#if $snackbarStore?.message && $snackbarStore?.visible}
-  <Toast position="bottom-right">{$snackbarStore?.message}</Toast>
+  <Toast position="bottom-right" class="z-50">{$snackbarStore?.message}</Toast>
 {/if}