Dictionary controllers update (#965)

* Make purge notification optional

* Support multiple warning nodes

* Add support for optional count info

3 files changed, 15 insertions, 6 deletions

diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index f6c9e9f6..49102c5c 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -192,20 +192,21 @@ class DictionaryController {
         this._dictionaryEntries = [];
         this._databaseStateToken = null;
         this._checkingIntegrity = false;
-        this._warningNode = null;
         this._checkIntegrityButton = null;
         this._dictionaryEntryContainer = null;
         this._integrityExtraInfoContainer = null;
+        this._dictionaryInstallCountNode = null;
         this._deleteDictionaryModal = null;
         this._integrityExtraInfoNode = null;
         this._isDeleting = false;
     }
 
     async prepare() {
-        this._warningNode = document.querySelector('#dictionary-warning');
         this._checkIntegrityButton = document.querySelector('#dictionary-check-integrity');
         this._dictionaryEntryContainer = document.querySelector('#dictionary-list');
         this._integrityExtraInfoContainer = document.querySelector('#dictionary-list-extra');
+        this._dictionaryInstallCountNode = document.querySelector('#dictionary-install-count');
+        this._noDictionariesInstalledWarnings = document.querySelectorAll('.no-dictionaries-installed-warning');
         this._deleteDictionaryModal = this._modalController.getModal('dictionary-confirm-delete');
 
         yomichan.on('databaseUpdated', this._onDatabaseUpdated.bind(this));
@@ -238,7 +239,6 @@ class DictionaryController {
         if (this._databaseStateToken !== token) { return; }
         this._dictionaries = dictionaries;
 
-        this._warningNode.hidden = (dictionaries.length > 0);
         this._updateMainDictionarySelectOptions(dictionaries);
 
         for (const entry of this._dictionaryEntries) {
@@ -246,6 +246,15 @@ class DictionaryController {
         }
         this._dictionaryEntries = [];
 
+        if (this._dictionaryInstallCountNode !== null) {
+            this._dictionaryInstallCountNode.textContent = `${dictionaries.length}`;
+        }
+
+        const hasDictionary = (dictionaries.length > 0);
+        for (const node of this._noDictionariesInstalledWarnings) {
+            node.hidden = hasDictionary;
+        }
+
         await this._ensureDictionarySettings(dictionaries);
         for (const dictionary of dictionaries) {
             this._createDictionaryEntry(dictionary);
diff --git a/ext/bg/js/settings/dictionary-import-controller.js b/ext/bg/js/settings/dictionary-import-controller.js
index a603fb82..22146ec1 100644
--- a/ext/bg/js/settings/dictionary-import-controller.js
+++ b/ext/bg/js/settings/dictionary-import-controller.js
@@ -101,7 +101,7 @@ class DictionaryImportController {
             this._setModifying(true);
             this._hideErrors();
             this._setSpinnerVisible(true);
-            purgeNotification.hidden = false;
+            if (purgeNotification !== null) { purgeNotification.hidden = false; }
 
             await api.purgeDatabase();
             const errors = await this._clearDictionarySettings();
@@ -113,7 +113,7 @@ class DictionaryImportController {
             this._showErrors([error]);
         } finally {
             prevention.end();
-            purgeNotification.hidden = true;
+            if (purgeNotification !== null) { purgeNotification.hidden = true; }
             this._setSpinnerVisible(false);
             this._storageController.updateStats();
             this._setModifying(false);
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index a412c271..066662e5 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -679,7 +679,7 @@
                 </div>
 
                 <div class="text-danger" id="dictionary-delete-all-status" hidden>Dictionary data is being purged, please be patient...</div>
-                <div class="alert alert-warning" id="dictionary-warning" hidden>No dictionaries have been installed</div>
+                <div class="alert alert-warning no-dictionaries-installed-warning" hidden>No dictionaries have been installed</div>
                 <div class="alert alert-danger" id="dictionary-error" hidden></div>
 
                 <div id="dictionary-list"></div>