add support for overwriting existing card (#859)

* frontend

* wip

* minimum viable

* minor simplification

* simplify gradients in duplicate svg

* simplify add-duplicate svg

* colors good

* arrows shape

* disable overwrite if no valid duplicate IDs

* add warning

1 files changed, 24 insertions, 0 deletions

diff --git a/ext/js/pages/settings/anki-controller.js b/ext/js/pages/settings/anki-controller.js
index 2d461336..de8b2c39 100644
--- a/ext/js/pages/settings/anki-controller.js
+++ b/ext/js/pages/settings/anki-controller.js
@@ -63,6 +63,10 @@ export class AnkiController {
         /** @type {HTMLElement} */
         this._ankiErrorInvalidResponseInfo = querySelectorNotNull(document, '#anki-error-invalid-response-info');
         /** @type {HTMLElement} */
+        this._duplicateBehaviorSelect = querySelectorNotNull(document, '[data-setting="anki.duplicateBehavior"]');
+        /** @type {HTMLElement} */
+        this._duplicateOverwriteWarning = querySelectorNotNull(document, '#anki-overwrite-warning');
+        /** @type {HTMLElement} */
         this._ankiCardPrimary = querySelectorNotNull(document, '#anki-card-primary');
         /** @type {?Error} */
         this._ankiError = null;
@@ -109,6 +113,8 @@ export class AnkiController {
         ankiApiKeyInput.addEventListener('focus', this._onApiKeyInputFocus.bind(this));
         ankiApiKeyInput.addEventListener('blur', this._onApiKeyInputBlur.bind(this));
 
+        this._duplicateBehaviorSelect.addEventListener('change', this._onDuplicateBehaviorSelectChange.bind(this));
+
         await this._updateOptions();
         this._settingsController.on('optionsChanged', this._onOptionsChanged.bind(this));
 
@@ -171,6 +177,8 @@ export class AnkiController {
         this._selectorObserver.disconnect();
         this._selectorObserver.observe(document.documentElement, true);
 
+        this._updateDuplicateOverwriteWarning(anki.duplicateBehavior);
+
         this._setupFieldMenus(dictionaries);
     }
 
@@ -240,6 +248,22 @@ export class AnkiController {
     }
 
     /**
+     * @param {Event} e
+     */
+    _onDuplicateBehaviorSelectChange(e) {
+        const node = /** @type {HTMLSelectElement} */ (e.currentTarget);
+        const behavior = node.value;
+        this._updateDuplicateOverwriteWarning(behavior);
+    }
+
+    /**
+     * @param {string} behavior
+     */
+    _updateDuplicateOverwriteWarning(behavior) {
+        this._duplicateOverwriteWarning.hidden = behavior !== 'overwrite';
+    }
+
+    /**
      * @param {string} ankiCardType
      * @param {string} [ankiCardMenu]
      */