Add recommended dictionaries to welcome page

ext/data/recommended-dictionaries.json

@@ -0,0 +1,14 @@
+{
+    "ja": {
+        "terms": [
+            {"name": "Jitendex", "url": "https://github.com/stephenmk/stephenmk.github.io/releases/latest/download/jitendex-yomitan.zip"}
+        ],
+        "kanji": [
+            {"name": "Kanjidic English", "url": "https://github.com/themoeway/jmdict-yomitan/releases/latest/download/KANJIDIC_english.zip"}
+        ],
+        "frequency": [
+            {"name": "BCCWJ-LUW", "url": "https://github.com/toasted-nutbread/yomichan-bccwj-frequency-dictionary/releases/download/1.0.1/BCCWJ-LUW.zip"}
+        ],
+        "grammar": []
+    }
+}

ext/data/schemas/recommended-dictionaries-schema.json

@@ -0,0 +1,100 @@
+{
+    "$id": "recommendedDictionaries",
+    "$schema": "http://json-schema.org/draft-07/schema#",
+    "description": "Contains data for recommended dictionaries on welcome page.",
+    "type": "object",
+    "patternProperties": {
+        "^.{2,}$": {
+            "type": "object",
+            "properties": {
+                "terms": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "required": [
+                            "name",
+                            "url"
+                        ],
+                        "properties": {
+                            "name": {
+                                "type": "string",
+                                "minLength": 2
+                            },
+                            "url": {
+                                "type": "string",
+                                "minLength": 2
+                            }
+                        }
+                    }
+                },
+                "kanji": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "required": [
+                            "name",
+                            "url"
+                        ],
+                        "properties": {
+                            "name": {
+                                "type": "string",
+                                "minLength": 2
+                            },
+                            "url": {
+                                "type": "string",
+                                "minLength": 2
+                            }
+                        }
+                    }
+                },
+                "frequency": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "required": [
+                            "name",
+                            "url"
+                        ],
+                        "properties": {
+                            "name": {
+                                "type": "string",
+                                "minLength": 2
+                            },
+                            "url": {
+                                "type": "string",
+                                "minLength": 2
+                            }
+                        }
+                    }
+                },
+                "grammar": {
+                    "type": "array",
+                    "items": {
+                        "type": "object",
+                        "required": [
+                            "name",
+                            "url"
+                        ],
+                        "properties": {
+                            "name": {
+                                "type": "string",
+                                "minLength": 2
+                            },
+                            "url": {
+                                "type": "string",
+                                "minLength": 2
+                            }
+                        }
+                    }
+                }
+            },
+            "required": [
+                "terms",
+                "kanji",
+                "frequency",
+                "grammar"
+            ],
+            "additionalProperties": false
+        }
+    }
+}

ext/js/pages/settings/dictionary-import-controller.js

@@ -17,6 +17,7 @@
  */
 
 import {ExtensionError} from '../../core/extension-error.js';
+import {readResponseJson} from '../../core/json.js';
 import {log} from '../../core/log.js';
 import {toError} from '../../core/to-error.js';
 import {DictionaryWorker} from '../../dictionary/dictionary-worker.js';
@@ -69,6 +70,10 @@ export class DictionaryImportController {
                 'Unable to access IndexedDB due to a possibly corrupt user profile. Try using the "Refresh Firefox" feature to reset your user profile.',
             ],
         ];
+        /** @type {string[]} */
+        this._recommendedDictionaryQueue = [];
+        /** @type {boolean} */
+        this._recommendedDictionaryActiveImport = false;
     }
 
     /** */
@@ -87,10 +92,118 @@ export class DictionaryImportController {
         this._importFileDrop.addEventListener('dragover', this._onFileDropOver.bind(this), false);
         this._importFileDrop.addEventListener('dragleave', this._onFileDropLeave.bind(this), false);
         this._importFileDrop.addEventListener('drop', this._onFileDrop.bind(this), false);
+
+        // Welcome page
+        const recommendedDictionaryButton = document.querySelector('[data-modal-action="show,recommended-dictionaries"]');
+        if (recommendedDictionaryButton) {
+            recommendedDictionaryButton.addEventListener('click', this._renderRecommendedDictionaries.bind(this), false);
+        }
     }
 
     // Private
 
+    /**
+     * @param {MouseEvent} e
+     */
+    async _onRecommendedImportClick(e) {
+        if (!(e instanceof PointerEvent)) { return; }
+        if (!e.target || !(e.target instanceof HTMLButtonElement)) { return; }
+
+        const import_url = e.target.attributes.getNamedItem('data-import-url');
+        if (!import_url) { return; }
+        this._recommendedDictionaryQueue.push(import_url.value);
+
+        e.target.disabled = true;
+
+        if (this._recommendedDictionaryActiveImport) { return; }
+
+        while (this._recommendedDictionaryQueue.length > 0) {
+            this._recommendedDictionaryActiveImport = true;
+            try {
+                const url = this._recommendedDictionaryQueue.shift();
+                if (!url) { continue; }
+                const file = await fetch(url.trim())
+                    .then((res) => res.blob())
+                    .then((blob) => {
+                        return new File([blob], 'fileFromURL');
+                    });
+                await this._importDictionaries([file]);
+            } catch (error) {
+                log.error(error);
+            }
+        }
+        this._recommendedDictionaryActiveImport = false;
+    }
+
+    /** */
+    async _renderRecommendedDictionaries() {
+        const url = '../../data/recommended-dictionaries.json';
+        const response = await fetch(url, {
+            method: 'GET',
+            mode: 'no-cors',
+            cache: 'default',
+            credentials: 'omit',
+            redirect: 'follow',
+            referrerPolicy: 'no-referrer',
+        });
+        if (!response.ok) {
+            throw new Error(`Failed to fetch ${url}: ${response.status}`);
+        }
+
+        /** @type {import('dictionary-recommended.js').RecommendedDictionaryElementMap[]} */
+        const recommendedDictionaryCategories = [
+            {property: 'terms', element: querySelectorNotNull(document, '#recommended-term-dictionaries')},
+            {property: 'kanji', element: querySelectorNotNull(document, '#recommended-kanji-dictionaries')},
+            {property: 'frequency', element: querySelectorNotNull(document, '#recommended-frequency-dictionaries')},
+            {property: 'grammar', element: querySelectorNotNull(document, '#recommended-grammar-dictionaries')},
+        ];
+
+        const language = (await this._settingsController.getOptions()).general.language;
+        /** @type {import('dictionary-recommended.js').RecommendedDictionaries} */
+        const recommendedDictionaries = (await readResponseJson(response));
+
+        if (!(language in recommendedDictionaries)) {
+            for (const {element} of recommendedDictionaryCategories) {
+                element.hidden = true;
+            }
+            return;
+        }
+
+        for (const {property, element} of recommendedDictionaryCategories) {
+            this._renderRecommendedDictionaryGroup(recommendedDictionaries[language][property], element);
+        }
+
+        /** @type {NodeListOf<HTMLElement>} */
+        const buttons = document.querySelectorAll('.action-button[data-action=import-recommended-dictionary]');
+        for (const button of buttons) {
+            button.addEventListener('click', this._onRecommendedImportClick.bind(this), false);
+        }
+    }
+
+    /**
+     *
+     * @param {import('dictionary-recommended.js').Dictionary[]} recommendedDictionaries
+     * @param {HTMLElement | null} dictionariesList
+     */
+    _renderRecommendedDictionaryGroup(recommendedDictionaries, dictionariesList) {
+        for (const dictionary of recommendedDictionaries) {
+            if (dictionariesList) {
+                dictionariesList.hidden = false;
+                const template = this._settingsController.instantiateTemplate('recommended-dictionaries-list-item');
+                const label = querySelectorNotNull(template, '.settings-item-label');
+                const button = querySelectorNotNull(template, '.action-button[data-action=import-recommended-dictionary]');
+
+                const urlAttribute = document.createAttribute('data-import-url');
+                urlAttribute.value = dictionary.url;
+                button.attributes.setNamedItem(urlAttribute);
+
+                label.textContent = dictionary.name;
+
+                dictionariesList.append(template);
+            }
+        }
+    }
+
     /** */
     _onImportFileButtonClick() {
         /** @type {HTMLInputElement} */ (this._importFileInput).click();
@@ -303,6 +416,7 @@ export class DictionaryImportController {
         const statusFooter = this._statusFooter;
         const progressSelector = '.dictionary-import-progress';
         const progressContainers = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`#dictionaries-modal ${progressSelector}`));
+        const recommendedProgressContainers = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`#recommended-dictionaries-modal ${progressSelector}`));
         const progressBars = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-bar`));
         const infoLabels = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-info`));
         const statusLabels = /** @type {NodeListOf<HTMLElement>} */ (document.querySelectorAll(`${progressSelector} .progress-status`));
@@ -315,7 +429,7 @@ export class DictionaryImportController {
             this._setModifying(true);
             this._hideErrors();
 
-            for (const progress of progressContainers) { progress.hidden = false; }
+            for (const progress of [...progressContainers, ...recommendedProgressContainers]) { progress.hidden = false; }
 
             const optionsFull = await this._settingsController.getOptionsFull();
             const importDetails = {
@@ -365,7 +479,7 @@ export class DictionaryImportController {
         } finally {
             this._showErrors(errors);
             prevention.end();
-            for (const progress of progressContainers) { progress.hidden = true; }
+            for (const progress of [...progressContainers, ...recommendedProgressContainers]) { progress.hidden = true; }
             if (statusFooter !== null) { statusFooter.setTaskActive(progressSelector, false); }
             this._setModifying(false);
             this._triggerStorageChanged();

ext/js/pages/welcome-main.js

@@ -20,6 +20,8 @@ import {Application} from '../application.js';
 import {DocumentFocusController} from '../dom/document-focus-controller.js';
 import {querySelectorNotNull} from '../dom/query-selector.js';
 import {ExtensionContentController} from './common/extension-content-controller.js';
+import {DictionaryController} from './settings/dictionary-controller.js';
+import {DictionaryImportController} from './settings/dictionary-import-controller.js';
 import {GenericSettingController} from './settings/generic-setting-controller.js';
 import {LanguagesController} from './settings/languages-controller.js';
 import {ModalController} from './settings/modal-controller.js';
@@ -88,6 +90,12 @@ await Application.main(true, async (application) => {
     const genericSettingController = new GenericSettingController(settingsController);
     preparePromises.push(setupGenericSettingsController(genericSettingController));
 
+    const dictionaryController = new DictionaryController(settingsController, modalController, statusFooter);
+    preparePromises.push(dictionaryController.prepare());
+
+    const dictionaryImportController = new DictionaryImportController(settingsController, modalController, statusFooter);
+    preparePromises.push(dictionaryImportController.prepare());
+
     const simpleScanningInputController = new ScanInputsSimpleController(settingsController);
     preparePromises.push(simpleScanningInputController.prepare());
 

ext/templates-settings.html

@@ -107,6 +107,18 @@
         </select>
     </div>
 </div></template>
+<template id="recommended-dictionaries-list-item-template">
+    <div class="settings-item">
+        <div class="settings-item-inner">
+            <div class="settings-item-left">
+                <strong><div class="settings-item-label"></div></strong>
+            </div>
+            <div class="settings-item-right">
+                <button type="button" class="action-button" data-action="import-recommended-dictionary" data-import-url="">Download</button>
+            </div>
+        </div>
+    </div>
+</template>
 
 <!-- Audio -->
 <template id="audio-source-template"><div class="audio-source">