From 03fefc5aa0ef64f612f37196b93f6bbad46202ce Mon Sep 17 00:00:00 2001
From: mjishu <128941980+Mjishu@users.noreply.github.com>
Date: Wed, 29 Jan 2025 13:21:02 -0500
Subject: [PATCH] shows current profile on action bar

---
 ext/css/display.css                         |  6 ++++++
 ext/js/display/display-profile-selection.js | 16 ++++++++++++++++
 ext/js/display/display.js                   | 14 ++++++++++++++
 ext/popup.html                              |  1 +
 4 files changed, 37 insertions(+)

diff --git a/ext/css/display.css b/ext/css/display.css
index c44c3f26be..60e0298a9b 100644
--- a/ext/css/display.css
+++ b/ext/css/display.css
@@ -475,6 +475,7 @@ a:has(rt) {
     background-color: var(--sidebar-background-color);
     display: flex;
     flex-flow: column nowrap;
+    align-items: center;
 }
 :root[data-popup-action-bar-location=top] .content-outer,
 :root[data-popup-action-bar-location=bottom] .content-outer {
@@ -579,6 +580,11 @@ button.sidebar-button.sidebar-button-highlight {
     --button-active-content-color: var(--accent-color);
 }
 
+.vertical-text {
+    writing-mode: vertical-rl;
+    text-orientation: upright;
+}
+
 
 /* Search page */
 .search-header-wrapper {
diff --git a/ext/js/display/display-profile-selection.js b/ext/js/display/display-profile-selection.js
index f8e18314dc..1e0e49f349 100644
--- a/ext/js/display/display-profile-selection.js
+++ b/ext/js/display/display-profile-selection.js
@@ -34,6 +34,8 @@ export class DisplayProfileSelection {
         this._profileButton = querySelectorNotNull(document, '#profile-button');
         /** @type {HTMLElement} */
         const profilePanelElement = querySelectorNotNull(document, '#profile-panel');
+        /** @type {HTMLElement} */
+        this._profileLanguage = querySelectorNotNull(document, '#profile-language');
         /** @type {PanelElement} */
         this._profilePanel = new PanelElement(profilePanelElement, 375); // Milliseconds; includes buffer
         /** @type {boolean} */
@@ -49,6 +51,7 @@ export class DisplayProfileSelection {
         this._display.application.on('optionsUpdated', this._onOptionsUpdated.bind(this));
         this._profileButton.addEventListener('click', this._onProfileButtonClick.bind(this), false);
         this._profileListNeedsUpdate = true;
+        await this._updateProfileLanguage();
     }
 
     // Private
@@ -85,6 +88,17 @@ export class DisplayProfileSelection {
         }
     }
 
+    /**
+     *
+     */
+    async _updateProfileLanguage() { // call this somewhere that gets updated when popActionBarLocation gets called?
+        const {profileCurrent, profiles} = await this._display.application.api.optionsGetFull();
+        const currentProfile = profiles[profileCurrent];
+        this._profileLanguage.textContent = currentProfile.name;
+        // ? currentprofile popactionbarlocation only changes on reload
+        // this._profileLanguage.textContent = currentProfile.options.general.popupActionBarLocation;
+    }
+
     /** */
     async _updateProfileList() {
         this._profileListNeedsUpdate = false;
@@ -109,6 +123,7 @@ export class DisplayProfileSelection {
         }
         this._profileList.textContent = '';
         this._profileList.appendChild(fragment);
+        await this._updateProfileLanguage();
     }
 
     /**
@@ -136,5 +151,6 @@ export class DisplayProfileSelection {
         };
         await this._display.application.api.modifySettings([modification], this._source);
         this._setProfilePanelVisible(false);
+        await this._updateProfileLanguage();
     }
 }
diff --git a/ext/js/display/display.js b/ext/js/display/display.js
index 8e038fde95..3e07cb46b8 100644
--- a/ext/js/display/display.js
+++ b/ext/js/display/display.js
@@ -199,6 +199,8 @@ export class Display extends EventDispatcher {
         this._languageSummaries = [];
         /** @type {import('dictionary-importer').Summary[]} */
         this._dictionaryInfo = [];
+        /** @type {HTMLElement} */
+        this._profileLanguage = querySelectorNotNull(document, '#profile-language');
 
         /* eslint-disable @stylistic/no-multi-spaces */
         this._hotkeyHandler.registerActions([
@@ -443,6 +445,17 @@ export class Display extends EventDispatcher {
         await this.updateOptions();
     }
 
+    /**
+     * @param {import('settings').ProfileOptions} currentProfile
+     */
+    async _updateCurrentProfileDisplay(currentProfile) {
+        if (currentProfile.general.popupActionBarLocation === 'left' || currentProfile.general.popupActionBarLocation === 'right') {
+            this._profileLanguage.classList.add('vertical-text');
+        } else {
+            this._profileLanguage.classList.remove('vertical-text');
+        }
+    }
+
     /** */
     async updateOptions() {
         const options = await this._application.api.optionsGet(this.getOptionsContext());
@@ -484,6 +497,7 @@ export class Display extends EventDispatcher {
 
         void this._updateNestedFrontend(options);
         this._updateContentTextScanner(options);
+        await this._updateCurrentProfileDisplay(options);
 
         this.trigger('optionsUpdated', {options});
     }
diff --git a/ext/popup.html b/ext/popup.html
index b9f1d81ec2..6f5c34b411 100644
--- a/ext/popup.html
+++ b/ext/popup.html
@@ -84,6 +84,7 @@ <h3>Default Profile</h3>
                 <button type="button" class="sidebar-button" disabled id="navigate-next-button" title="Next definition" data-hotkey='["historyForward","title","Next definition ({0})"]'><span class="sidebar-button-icon icon" data-icon="right-chevron"></span></button>
             </div>
             <div class="content-sidebar-bottom">
+                <p class="sidebar-profile-language" id="profile-language"></p>
                 <button type="button" class="sidebar-button" id="profile-button"><span class="sidebar-button-icon icon" data-icon="profile"></span></button>
             </div>
         </div>