Search Page Profile Switching (#648)

* Add profile select dropdown

* Remove right align on profile switcher in search

* Fix API access

* Don't cache optionsFull

---------

Co-authored-by: Darius Jahandarie <djahandarie@gmail.com>

2 files changed, 60 insertions, 0 deletions

diff --git a/ext/js/display/search-display-controller.js b/ext/js/display/search-display-controller.js
index 49c69520..ed2061e2 100644
--- a/ext/js/display/search-display-controller.js
+++ b/ext/js/display/search-display-controller.js
@@ -115,6 +115,10 @@ export class SearchDisplayController {
         if (displayOptions !== null) {
             this._onDisplayOptionsUpdated({options: displayOptions});
         }
+
+        const {profiles, profileCurrent} = await this._display.application.api.optionsGetFull();
+
+        this._updateProfileSelect(profiles, profileCurrent);
     }
 
     /**
@@ -314,6 +318,33 @@ export class SearchDisplayController {
     }
 
     /**
+     * @param {Event} event
+     */
+    async _onProfileSelectChange(event) {
+        const node = /** @type {HTMLInputElement} */ (event.currentTarget);
+        const value = parseInt(node.value, 10);
+        const optionsFull = await this._display.application.api.optionsGetFull();
+        if (typeof value === 'number' && Number.isFinite(value) && value >= 0 && value <= optionsFull.profiles.length) {
+            this._setPrimaryProfileIndex(value);
+        }
+    }
+
+    /**
+     * @param {number} value
+     */
+    async _setPrimaryProfileIndex(value) {
+        /** @type {import('settings-modifications').ScopedModificationSet} */
+        const modification = {
+            action: 'set',
+            path: 'profileCurrent',
+            value,
+            scope: 'global',
+            optionsContext: null
+        };
+        await this._display.application.api.modifySettings([modification], 'search');
+    }
+
+    /**
      * @param {boolean} enabled
      */
     _setWanakanaEnabled(enabled) {
@@ -546,4 +577,28 @@ export class SearchDisplayController {
         if (element instanceof HTMLElement && element.isContentEditable) { return true; }
         return false;
     }
+
+    /**
+     * @param {import('settings').Profile[]} profiles
+     * @param {number} profileCurrent
+     */
+    _updateProfileSelect(profiles, profileCurrent) {
+        /** @type {HTMLSelectElement} */
+        const select = querySelectorNotNull(document, '#profile-select');
+        /** @type {HTMLElement} */
+        const optionGroup = querySelectorNotNull(document, '#profile-select-option-group');
+        const fragment = document.createDocumentFragment();
+        for (let i = 0, ii = profiles.length; i < ii; ++i) {
+            const {name} = profiles[i];
+            const option = document.createElement('option');
+            option.textContent = name;
+            option.value = `${i}`;
+            fragment.appendChild(option);
+        }
+        optionGroup.textContent = '';
+        optionGroup.appendChild(fragment);
+        select.value = `${profileCurrent}`;
+
+        select.addEventListener('change', this._onProfileSelectChange.bind(this), false);
+    }
 }
diff --git a/ext/search.html b/ext/search.html
index 8c595cc4..1deadd3c 100644
--- a/ext/search.html
+++ b/ext/search.html
@@ -47,6 +47,11 @@
                                     <span class="search-option-pre-label">Parser:</span>
                                     <select id="query-parser-mode-select"></select>
                                 </div>
+                                <div class="search-option" id="search-option-profile-select">
+                                    <span class="profile-select-container"><select class="profile-select" id="profile-select">
+                                        <optgroup label="Primary Profile" id="profile-select-option-group"></optgroup>
+                                    </select></span>
+                                </div>
                             </div>
                             <div class="search-textbox-container">
                                 <textarea id="search-textbox" class="scrollbar" placeholder="Input a term, expression, sentence, or block of text" autocomplete="off" lang="ja" autofocus></textarea>