More QOL changes

src/lib/components/Settings/AnkiConnectSettings.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { page } from '$app/stores';
   import { settings, updateAnkiSetting } from '$lib/settings';
-  import { AccordionItem, Label, Toggle, Input, Helper } from 'flowbite-svelte';
+  import { AccordionItem, Label, Toggle, Input, Helper, Select } from 'flowbite-svelte';
 
   $: disabled = !$settings.ankiConnectSettings.enabled;
 
@@ -12,18 +12,27 @@
 
   let pictureField = $settings.ankiConnectSettings.pictureField;
   let sentenceField = $settings.ankiConnectSettings.sentenceField;
+
+  let triggerMethod = $settings.ankiConnectSettings.triggerMethod;
+
+  const triggerOptions = [
+    { value: 'rightClick', name: 'Right click (long press on mobile)' },
+    { value: 'doubleTap', name: 'Double tap' },
+    { value: 'both', name: 'Both' }
+  ];
 </script>
 
 <AccordionItem>
   <span slot="header">Anki Connect</span>
   <div class="flex flex-col gap-5">
     <Helper
-      >For anki connect integration to work, you must add the reader (<code class="text-primary-500">{$page.url.origin}</code>) to your anki connect <b
-        class="text-primary-500">webCorsOriginList</b
-      > list</Helper
+      >For anki connect integration to work, you must add the reader (<code class="text-primary-500"
+        >{$page.url.origin}</code
+      >) to your anki connect <b class="text-primary-500">webCorsOriginList</b> list</Helper
     >
     <Helper>
-      To trigger the anki connect integration, double click or right click (long press on mobile) any text box.
+      To trigger the anki connect integration, double click or right click (long press on mobile)
+      any text box.
     </Helper>
     <div>
       <Toggle bind:checked={enabled} on:change={() => updateAnkiSetting('enabled', enabled)}
@@ -70,5 +79,15 @@
         on:change={() => updateAnkiSetting('grabSentence', grabSentence)}>Grab sentence</Toggle
       >
     </div>
+    <div>
+      <Label>
+        Trigger method:
+        <Select
+          on:change={() => updateAnkiSetting('triggerMethod', triggerMethod)}
+          items={triggerOptions}
+          bind:value={triggerMethod}
+        />
+      </Label>
+    </div>
   </div>
 </AccordionItem>