profile name shown on action bar

yomidevs · Feb 3, 2025 · 67b8bf1 · 67b8bf1
1 parent 65c7b5f
commit 67b8bf1
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 0 deletions.
diff --git 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: vertical;
+    letter-spacing: 2px;
+}
 
 /* Search page */
 .search-header-wrapper {

diff --git a/ext/js/display/display-profile-selection.js b/ext/js/display/display-profile-selection.js
@@ -42,13 +42,16 @@ export class DisplayProfileSelection {
         this._eventListeners = new EventListenerCollection();
         /** @type {string} */
         this._source = generateId(16);
+        /** @type {HTMLElement} */
+        this._profileName = querySelectorNotNull(document, '#profile-name');
     }
 
     /** */
     async prepare() {
         this._display.application.on('optionsUpdated', this._onOptionsUpdated.bind(this));
         this._profileButton.addEventListener('click', this._onProfileButtonClick.bind(this), false);
         this._profileListNeedsUpdate = true;
+        await this._updateCurrentProfileName();
     }
 
     // Private
@@ -85,6 +88,15 @@ export class DisplayProfileSelection {
         }
     }
 
+    /**
+     *
+     */
+    async _updateCurrentProfileName() {
+        const {profileCurrent, profiles} = await this._display.application.api.optionsGetFull();
+        const currentProfile = profiles[profileCurrent];
+        this._profileName.textContent = currentProfile.name;
+    }
+
     /** */
     async _updateProfileList() {
         this._profileListNeedsUpdate = false;
@@ -109,6 +121,7 @@ export class DisplayProfileSelection {
         }
         this._profileList.textContent = '';
         this._profileList.appendChild(fragment);
+        await this._updateCurrentProfileName();
     }
 
     /**
@@ -136,5 +149,6 @@ export class DisplayProfileSelection {
         };
         await this._display.application.api.modifySettings([modification], this._source);
         this._setProfilePanelVisible(false);
+        await this._updateCurrentProfileName();
     }
 }
diff --git 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._profileName = document.querySelector('#profile-name');
 
         /* eslint-disable @stylistic/no-multi-spaces */
         this._hotkeyHandler.registerActions([
@@ -486,6 +488,8 @@ export class Display extends EventDispatcher {
         this._updateContentTextScanner(options);
 
         this.trigger('optionsUpdated', {options});
+
+        await this._updateCurrentProfileDisplay(options);
     }
 
     /**
@@ -2280,4 +2284,18 @@ export class Display extends EventDispatcher {
             this._searchHeader.classList.toggle('sticky-header', options.general.stickySearchHeader);
         }
     }
+
+    /**
+     * @param {import('settings').ProfileOptions} currentProfile
+     */
+    async _updateCurrentProfileDisplay(currentProfile) {
+        if (!this._profileName) {
+            return;
+        }
+        if (currentProfile.general.popupActionBarLocation === 'left' || currentProfile.general.popupActionBarLocation === 'right') {
+            this._profileName.classList.add('vertical-text');
+        } else {
+            this._profileName.classList.remove('vertical-text');
+        }
+    }
 }
diff --git 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-name"></p>
                 <button type="button" class="sidebar-button" id="profile-button"><span class="sidebar-button-icon icon" data-icon="profile"></span></button>
             </div>
         </div>