cyberia 3.2.5 → 3.2.12

package/src/client/components/core/Modal.js

@@ -36,24 +36,192 @@ import { Worker } from './Worker.js';
 import { Scroll } from './Scroll.js';
 import { windowGetH, windowGetW } from './windowGetDimensions.js';
 import { SearchBox } from './SearchBox.js';
+import { createModalEvents } from './ClientEvents.js';
 
 const logger = loggerFactory(import.meta, { trace: true });
 
-const Modal = {
-  Data: {},
+/**
+ * @typedef {object} ModalBarButton
+ * @property {string} [label] - Button label HTML
+ * @property {boolean} [disabled] - Whether the button is hidden/disabled
+ * @property {Function} [onClick] - Optional click handler override
+ */
+
+/**
+ * @typedef {object} ModalBarConfig
+ * @property {{ minimize: ModalBarButton, restore: ModalBarButton, maximize: ModalBarButton, close: ModalBarButton, menu: ModalBarButton }} buttons
+ */
+
+/**
+ * @typedef {object} ModalRenderOptions
+ * @property {string} [id=''] - Modal element id/class name. Auto-generated if omitted.
+ * @property {ModalBarConfig} [barConfig={}] - Bar button configuration.
+ * @property {string} [title=''] - Modal title HTML.
+ * @property {string|Function} [html=''] - Modal body HTML or async factory.
+ * @property {string} [handleType='bar'] - Drag handle type ('bar' or default full).
+ * @property {string} [mode=''] - Layout mode: 'view', 'slide-menu', 'slide-menu-right', 'slide-menu-left', 'dropNotification'.
+ * @property {object} [RouterInstance={}] - Router instance for route-aware modals.
+ * @property {string[]} [disableTools=[]] - Tool ids to hide ('app-icon', 'text-box', 'profile', 'center', 'lang', 'theme', 'navigator').
+ * @property {boolean} [observer=false] - Attach a ResizeObserver to the modal element.
+ * @property {boolean} [disableBoxShadow=false] - Remove box shadow from the modal.
+ * @property {boolean} [dragDisabled=false] - Disable dragging.
+ * @property {boolean} [maximize=false] - Immediately maximize the modal after render.
+ * @property {boolean} [disableCenter=false] - Skip auto-centering.
+ * @property {object} [style={}] - Inline style overrides applied via renderStyleTag.
+ * @property {string} [class=''] - Extra CSS class(es) on the modal wrapper.
+ * @property {string} [titleClass=''] - Class for the title element.
+ * @property {string} [btnBarModalClass=''] - Class override for the button bar container.
+ * @property {string} [btnContainerClass=''] - Class for each bar button.
+ * @property {string} [btnIconContainerClass=''] - Class for each bar button inner icon div.
+ * @property {string} [barClass=''] - Class for the top/bottom bar flex row.
+ * @property {string} [barMode=''] - Bar layout variant ('top-bottom-bar').
+ * @property {string} [renderType=''] - Insertion strategy ('prepend' or default append).
+ * @property {string} [selector='body'] - Parent selector for insertion.
+ * @property {string} [slideMenu=''] - Id of the slide-menu modal this view should attach to.
+ * @property {string} [route=''] - URL path segment for view-mode route tracking.
+ * @property {string} [status=''] - Status icon descriptor rendered in the bar.
+ * @property {boolean} [zIndexSync=false] - Enable z-index management for stacked view modals.
+ * @property {boolean} [query=false] - Snapshot the current query string into modal data.
+ * @property {string[]} [homeModals=[]] - Modal ids that belong to the home screen (not closed on home nav).
+ * @property {Function} [titleRender] - Function returning title HTML (takes priority over title string).
+ * @property {Function} [htmlMainBody] - Factory for main-body modal html (slide-menu mode).
+ * @property {Function} [slideMenuTopBarBannerFix] - Async factory for top-bar banner content.
+ * @property {number} [minSearchQueryLength=1] - Minimum search query length.
+ * @property {Function} [onCollapseMenu] - Callback when slide menu collapses.
+ * @property {Function} [onExtendMenu] - Callback when slide menu extends.
+ */
+
+/**
+ * @typedef {object} ModalDataEntry
+ * @property {ModalRenderOptions} options - Original render options.
+ * @property {import('./EventBus.js').EventBus} events - Per-modal event bus backing the listener channels below.
+ *
+ * The `onX` channels are EventBus-backed proxies that preserve the historical
+ * `{ [key]: listener }` map API: assign to register, read+call to invoke a single
+ * listener, `delete` to remove, and `Object.keys` to enumerate registered keys.
+ * @property {Object.<string, Function>} onCloseListener - Close event listeners keyed by id.
+ * @property {Object.<string, Function>} onMenuListener - Menu button event listeners.
+ * @property {Object.<string, Function>} onCollapseMenuListener - Collapse menu listeners.
+ * @property {Object.<string, Function>} onExtendMenuListener - Extend menu listeners.
+ * @property {Object.<string, Function>} onDragEndListener - Drag-end listeners.
+ * @property {Object.<string, Function>} onObserverListener - ResizeObserver listeners.
+ * @property {Object.<string, Function>} onClickListener - Click listeners.
+ * @property {Object.<string, Function>} onExpandUiListener - UI expand/collapse listeners.
+ * @property {Object.<string, Function>} onBarUiOpen - Bar UI open listeners.
+ * @property {Object.<string, Function>} onBarUiClose - Bar UI close listeners.
+ * @property {Object.<string, Function>} onReloadModalListener - Reload listeners.
+ * @property {Object.<string, Function>} onHome - Home navigation listeners.
+ * @property {string[]} homeModals - Home modal ids.
+ * @property {string} [query] - Snapshotted query string.
+ * @property {Function} getTop - Returns computed top offset.
+ * @property {Function} getHeight - Returns computed modal height.
+ * @property {Function} getMenuLeftStyle - Returns slide menu left CSS value.
+ * @property {Function} center - Centers the modal in the viewport.
+ * @property {object} [slideMenu] - Active slide-menu link data.
+ * @property {ResizeObserver} [observer] - Attached ResizeObserver.
+ * @property {Function} [observerCallBack] - ResizeObserver callback.
+ * @property {Function} [setDragInstance] - Updates drag options and re-creates the Draggable.
+ * @property {object} [dragInstance] - Active Draggable instance.
+ * @property {object} [dragOptions] - Current drag configuration.
+ */
+
+class Modal {
+  /** @type {Object.<string, ModalDataEntry>} */
+  static Data = {};
 
-  Render: async function (
+  /**
+   * Bottom offset of the slide-menu area for the given options.
+   * @param {ModalRenderOptions} options
+   * @param {number} [heightDefaultBottomBar=0]
+   * @returns {number}
+   */
+  static getModalTop(options, heightDefaultBottomBar = 0) {
+    return windowGetH() - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar);
+  }
+
+  /**
+   * Available modal height, accounting for the top/bottom bars when the UI is expanded.
+   * @param {ModalRenderOptions} options
+   * @param {number} [heightDefaultTopBar=50]
+   * @param {number} [heightDefaultBottomBar=0]
+   * @returns {number}
+   */
+  static getModalHeight(options, heightDefaultTopBar = 50, heightDefaultBottomBar = 0) {
+    const barsVisible = s(`.main-body-btn-ui-close`) && !s(`.main-body-btn-ui-close`).classList.contains('hide');
+    return (
+      windowGetH() -
+      (barsVisible
+        ? (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) +
+          (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
+        : 0)
+    );
+  }
+
+  /**
+   * Left CSS value for a slide menu in its open/closed state.
+   * @param {ModalRenderOptions} options
+   * @param {{ originSlideMenuWidth: number, collapseSlideMenuWidth: number }} widths
+   * @param {{ open: boolean }} [ops={ open: false }]
+   * @returns {string}
+   */
+  static getModalMenuLeftStyle(options, { originSlideMenuWidth, collapseSlideMenuWidth }, ops = { open: false }) {
+    return `${
+      options.mode === 'slide-menu-right'
+        ? `${
+            windowGetW() +
+            (ops?.open
+              ? -1 * originSlideMenuWidth +
+                (options.mode === 'slide-menu-right' && s(`.btn-icon-menu-mode-right`).classList.contains('hide')
+                  ? originSlideMenuWidth - collapseSlideMenuWidth
+                  : 0)
+              : originSlideMenuWidth)
+          }px`
+        : `-${ops?.open ? '0px' : originSlideMenuWidth}px`
+    }`;
+  }
+
+  /**
+   * Viewport-centered top/left CSS values for a modal of the given size.
+   * @param {{ width: number, height: number }} param0
+   * @returns {{ top: string, left: string }}
+   */
+  static getModalCenter({ width, height }) {
+    return {
+      top: `${windowGetH() / 2 - height / 2}px`,
+      left: `${windowGetW() / 2 - width / 2}px`,
+    };
+  }
+
+  /**
+   * Create or reload a modal. When the modal already exists in the DOM the
+   * existing instance is reloaded via its onReloadModalListener callbacks.
+   * @param {ModalRenderOptions} options
+   * @returns {Promise<ModalDataEntry & { id: string }>}
+   */
+  static async instance(
     options = {
       id: '',
       barConfig: {},
       title: '',
       html: '',
       handleType: 'bar',
-      mode: '' /* slide-menu */,
+      mode: '',
       RouterInstance: {},
       disableTools: [],
       observer: false,
       disableBoxShadow: false,
+      dragDisabled: false,
+      maximize: false,
+      disableCenter: false,
+      style: {},
+      class: '',
+      titleClass: '',
+      barMode: '',
+      route: '',
+      slideMenu: '',
+      zIndexSync: false,
+      query: false,
+      homeModals: [],
     },
   ) {
     const originHeightBottomBar = 50;
@@ -76,52 +244,21 @@ const Modal = {
     const heightDefaultTopBar = 50;
     const heightDefaultBottomBar = 0;
     const idModal = options.id ? options.id : getId(this.Data, 'modal-');
+    const { bus: eventBus, channels: eventChannels } = createModalEvents();
     this.Data[idModal] = {
       options,
-      onCloseListener: {},
-      onMenuListener: {},
-      onCollapseMenuListener: {},
-      onExtendMenuListener: {},
-      onDragEndListener: {},
-      onObserverListener: {},
-      onClickListener: {},
-      onExpandUiListener: {},
-      onBarUiOpen: {},
-      onBarUiClose: {},
-      onReloadModalListener: {},
-      onHome: {},
+      events: eventBus,
+      ...eventChannels,
       homeModals: options.homeModals ? options.homeModals : [],
       query: options.query ? `${window.location.search}` : undefined,
-      getTop: () => {
-        const result = windowGetH() - (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar);
-        return result;
-      },
-      getHeight: () => {
-        return (
-          windowGetH() -
-          (s(`.main-body-btn-ui-close`) && !s(`.main-body-btn-ui-close`).classList.contains('hide')
-            ? (options.heightTopBar ? options.heightTopBar : heightDefaultTopBar) +
-              (options.heightBottomBar ? options.heightBottomBar : heightDefaultBottomBar)
-            : 0)
-        );
-      },
+      getTop: () => Modal.getModalTop(options, heightDefaultBottomBar),
+      getHeight: () => Modal.getModalHeight(options, heightDefaultTopBar, heightDefaultBottomBar),
       getMenuLeftStyle: (ops = { open: false }) =>
-        `${
-          options.mode === 'slide-menu-right'
-            ? `${
-                windowGetW() +
-                (ops?.open
-                  ? -1 * originSlideMenuWidth +
-                    (options.mode === 'slide-menu-right' && s(`.btn-icon-menu-mode-right`).classList.contains('hide')
-                      ? originSlideMenuWidth - collapseSlideMenuWidth
-                      : 0)
-                  : originSlideMenuWidth)
-              }px`
-            : `-${ops?.open ? '0px' : originSlideMenuWidth}px`
-        }`,
+        Modal.getModalMenuLeftStyle(options, { originSlideMenuWidth, collapseSlideMenuWidth }, ops),
       center: () => {
-        top = `${windowGetH() / 2 - height / 2}px`;
-        left = `${windowGetW() / 2 - width / 2}px`;
+        const { top: centeredTop, left: centeredLeft } = Modal.getModalCenter({ width, height });
+        top = centeredTop;
+        left = centeredLeft;
       },
       ...this.Data[idModal],
     };
@@ -145,11 +282,14 @@ const Modal = {
             });
           }
 
-          Responsive.Event[`view-${idModal}`] = () => {
-            if (!this.Data[idModal]) return delete Responsive.Event[`view-${idModal}`];
-            if (this.Data[idModal].slideMenu) s(`.${idModal}`).style.height = `${this.Data[idModal].getHeight()}px`;
-          };
-          Responsive.Event[`view-${idModal}`]();
+          Responsive.onChanged(
+            () => {
+              if (!this.Data[idModal]) return Responsive.offChanged(`view-${idModal}`);
+              if (this.Data[idModal].slideMenu) s(`.${idModal}`).style.height = `${this.Data[idModal].getHeight()}px`;
+            },
+            { key: `view-${idModal}` },
+          );
+          Responsive.triggerChanged(`view-${idModal}`);
 
           // Handle view mode modal route
           if (options.route) {
@@ -251,23 +391,30 @@ const Modal = {
             // barConfig.buttons.menu.disabled = true;
             // barConfig.buttons.close.disabled = true;
             options.btnBarModalClass = 'hide';
-            Responsive.Event[`slide-menu-${idModal}`] = () => {
-              for (const _idModal of Object.keys(this.Data)) {
-                if (this.Data[_idModal].slideMenu && this.Data[_idModal].slideMenu.id === idModal)
-                  this.Data[_idModal].slideMenu.callBack();
-              }
-              s(`.${idModal}`).style.height = `${Modal.Data[idModal].getHeight()}px`;
-              s(`.${idModal}`).style.left = Modal.Data[idModal].getMenuLeftStyle({
-                open: s(`.btn-bar-center-icon-menu`).classList.contains('hide') ? true : false,
-              });
-              if (s(`.main-body-top`)) {
-                if (Modal.mobileModal()) {
-                  if (s(`.btn-menu-${idModal}`).classList.contains('hide') && collapseSlideMenuWidth !== slideMenuWidth)
-                    s(`.main-body-top`).classList.remove('hide');
-                  if (s(`.btn-close-${idModal}`).classList.contains('hide')) s(`.main-body-top`).classList.add('hide');
-                } else if (!s(`.main-body-top`).classList.contains('hide')) s(`.main-body-top`).classList.add('hide');
-              }
-            };
+            Responsive.onChanged(
+              () => {
+                for (const _idModal of Object.keys(this.Data)) {
+                  if (this.Data[_idModal].slideMenu && this.Data[_idModal].slideMenu.id === idModal)
+                    this.Data[_idModal].slideMenu.callBack();
+                }
+                s(`.${idModal}`).style.height = `${Modal.Data[idModal].getHeight()}px`;
+                s(`.${idModal}`).style.left = Modal.Data[idModal].getMenuLeftStyle({
+                  open: s(`.btn-bar-center-icon-menu`).classList.contains('hide') ? true : false,
+                });
+                if (s(`.main-body-top`)) {
+                  if (Modal.mobileModal()) {
+                    if (
+                      s(`.btn-menu-${idModal}`).classList.contains('hide') &&
+                      collapseSlideMenuWidth !== slideMenuWidth
+                    )
+                      s(`.main-body-top`).classList.remove('hide');
+                    if (s(`.btn-close-${idModal}`).classList.contains('hide'))
+                      s(`.main-body-top`).classList.add('hide');
+                  } else if (!s(`.main-body-top`).classList.contains('hide')) s(`.main-body-top`).classList.add('hide');
+                }
+              },
+              { key: `slide-menu-${idModal}` },
+            );
             barConfig.buttons.menu.onClick = () => {
               Modal.Data[idModal][options.mode].width = slideMenuWidth;
               s(`.btn-menu-${idModal}`).classList.add('hide');
@@ -290,7 +437,7 @@ const Modal = {
               } else {
                 s(`.${idModal}`).style.left = `0px`;
               }
-              Responsive.Event[`slide-menu-${idModal}`]();
+              Responsive.triggerChanged(`slide-menu-${idModal}`);
             };
             barConfig.buttons.close.onClick = () => {
               Modal.Data[idModal][options.mode].width = 0;
@@ -313,7 +460,7 @@ const Modal = {
               } else {
                 s(`.${idModal}`).style.left = `-${originSlideMenuWidth}px`;
               }
-              Responsive.Event[`slide-menu-${idModal}`]();
+              Responsive.triggerChanged(`slide-menu-${idModal}`);
             };
             transition += `, width 0.3s`;
 
@@ -421,15 +568,17 @@ const Modal = {
                   for (const event of Object.keys(Modal.Data[idModal].onBarUiOpen))
                     Modal.Data[idModal].onBarUiOpen[event]();
                 }
-                Responsive.Event[`slide-menu-modal-menu`]();
+                Responsive.triggerChanged(`slide-menu-modal-menu`);
                 Object.keys(this.Data).map((_idModal) => {
                   if (this.Data[_idModal].slideMenu) {
                     if (s(`.btn-maximize-${_idModal}`)) s(`.btn-maximize-${_idModal}`).click();
                   }
                 });
-                Responsive.Event[`view-${'main-body'}`]();
-                if (Responsive.Event[`view-${'bottom-bar'}`]) Responsive.Event[`view-${'bottom-bar'}`]();
-                if (Responsive.Event[`view-${'main-body-top'}`]) Responsive.Event[`view-${'main-body-top'}`]();
+                Responsive.triggerChanged(`view-${'main-body'}`);
+                if (Responsive.hasChangedListener(`view-${'bottom-bar'}`))
+                  Responsive.triggerChanged(`view-${'bottom-bar'}`);
+                if (Responsive.hasChangedListener(`view-${'main-body-top'}`))
+                  Responsive.triggerChanged(`view-${'main-body-top'}`);
                 for (const keyEvent of Object.keys(this.Data[idModal].onExpandUiListener)) {
                   this.Data[idModal].onExpandUiListener[keyEvent](
                     !s(`.main-body-btn-ui-open`).classList.contains('hide'),
@@ -447,14 +596,14 @@ const Modal = {
                   class="fl top-bar  ${options.barClass ? options.barClass : ''}"
                   style="height: ${originHeightTopBar}px;"
                 >
-                  ${await BtnIcon.Render({
+                  ${await BtnIcon.instance({
                     style: `height: 100%`,
                     class: 'in fll main-btn-menu action-bar-box action-btn-close hide',
                     label: html` <div class="${contentIconClass} action-btn-close-render">
                       <i class="fa-solid fa-xmark"></i>
                     </div>`,
                   })}
-                  ${await BtnIcon.Render({
+                  ${await BtnIcon.instance({
                     style: `height: 100%`,
                     class: `in fll main-btn-menu action-bar-box action-btn-app-icon ${
                       options?.disableTools?.includes('app-icon') ? 'hide' : ''
@@ -466,10 +615,12 @@ const Modal = {
                       ? 'hide'
                       : ''}"
                   >
-                    ${await Input.Render({
+                    ${await Input.instance({
                       id: inputSearchBoxId,
                       autocomplete: 'off',
-                      placeholder: Modal.mobileModal() ? Translate.Render('search', '.top-bar-search-box') : undefined, // html`<i class="fa-solid fa-magnifying-glass"></i> ${Translate.Render('search')}`,
+                      placeholder: Modal.mobileModal()
+                        ? Translate.instance('search', '.top-bar-search-box')
+                        : undefined, // html`<i class="fa-solid fa-magnifying-glass"></i> ${Translate.instance('search')}`,
                       placeholderIcon: html`<div
                         class="in fll"
                         style="width: ${originHeightTopBar}px; height: ${originHeightTopBar}px;"
@@ -480,19 +631,19 @@ const Modal = {
                               class="inl wfm key-shortcut-container-info"
                               style="${renderCssAttr({ style: { top: '10px', left: '60px' } })}"
                             >
-                              ${await Badge.Render({
+                              ${await Badge.instance({
                                 id: 'shortcut-key-info-search',
                                 text: 'Shift',
                                 classList: 'inl',
                                 style: { 'z-index': 1 },
                               })}
-                              ${await Badge.Render({
+                              ${await Badge.instance({
                                 id: 'shortcut-key-info-search',
                                 text: '+',
                                 classList: 'inl',
                                 style: { 'z-index': 1, background: 'none', color: '#5f5f5f' },
                               })}
-                              ${await Badge.Render({
+                              ${await Badge.instance({
                                 id: 'shortcut-key-info-search',
                                 text: 'k',
                                 classList: 'inl',
@@ -508,12 +659,12 @@ const Modal = {
                   <div
                     class="abs top-box-profile-container ${options?.disableTools?.includes('profile') ? 'hide' : ''}"
                   >
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       style: `height: 100%`,
                       class: 'in fll session-in-log-in main-btn-menu action-bar-box action-btn-profile-log-in',
                       label: html` <div class="${contentIconClass} action-btn-profile-log-in-render"></div>`,
                     })}
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       style: `height: 100%`,
                       class: 'in fll session-in-log-out main-btn-menu action-bar-box action-btn-profile-log-out',
                       label: html` <div class="${contentIconClass} action-btn-profile-log-out-render">
@@ -618,8 +769,8 @@ const Modal = {
                 if (results.length === 0) {
                   append(
                     `.html-${searchBoxHistoryId}`,
-                    await BtnIcon.Render({
-                      label: html`<i class="fas fa-exclamation-circle"></i> ${Translate.Render('no-result-found')}`,
+                    await BtnIcon.instance({
+                      label: html`<i class="fas fa-exclamation-circle"></i> ${Translate.instance('no-result-found')}`,
                       class: `wfa`,
                       style: renderCssAttr({
                         style: {
@@ -784,7 +935,7 @@ const Modal = {
                   barConfig.buttons.menu.disabled = true;
                   barConfig.buttons.close.disabled = false;
 
-                  await Modal.Render({
+                  await Modal.instance({
                     id: searchBoxHistoryId,
                     barConfig,
                     title: html`<div
@@ -794,13 +945,13 @@ const Modal = {
                         <div class="search-box-recent-title">
                           ${renderViewTitle({
                             icon: html`<i class="fas fa-history mini-title"></i>`,
-                            text: Translate.Render('recent'),
+                            text: Translate.instance('recent'),
                           })}
                         </div>
                         <div class="search-box-result-title hide">
                           ${renderViewTitle({
                             icon: html`<i class="far fa-list-alt mini-title"></i>`,
-                            text: Translate.Render('results'),
+                            text: Translate.instance('results'),
                           })}
                         </div>
                       </div>
@@ -865,7 +1016,7 @@ const Modal = {
                   }
 
                   // Add clear all button to the bar area, before the close button
-                  const clearAllBtnHtml = await BtnIcon.Render({
+                  const clearAllBtnHtml = await BtnIcon.instance({
                     class: `btn-search-history-clear-all btn-modal-default btn-modal-default-${searchBoxHistoryId}`,
                     label: html`<i class="fas fa-trash-alt"></i>`,
                     attrs: `title="Clear all recent items"`,
@@ -916,6 +1067,10 @@ const Modal = {
                 hoverFocusCtl.checkDismiss();
               };
               EventsUI.onClick(`.top-bar-search-box-container`, () => {
+                if (SearchBox.Data.skipOpen) {
+                  SearchBox.Data.skipOpen = false;
+                  return;
+                }
                 searchBoxHistoryOpen();
                 searchBoxCallBack(formDataInfoNode[0]);
                 const inputEl = s(`.${inputSearchBoxId}`);
@@ -1032,7 +1187,7 @@ const Modal = {
                 barConfig.buttons.menu.disabled = true;
                 barConfig.buttons.close.disabled = true;
                 const id = 'main-body';
-                await Modal.Render({
+                await Modal.instance({
                   id,
                   barConfig,
                   html: options.htmlMainBody ? options.htmlMainBody : () => html``,
@@ -1055,26 +1210,29 @@ const Modal = {
                 const maxWidthInputSearchBox = 450;
                 const paddingInputSearchBox = 5;
                 const paddingRightSearchBox = 50;
-                Responsive.Event[`view-${id}`] = () => {
-                  if (!this.Data[id] || !s(`.${id}`)) return delete Responsive.Event[`view-${id}`];
-                  const widthInputSearchBox =
-                    windowGetW() > maxWidthInputSearchBox ? maxWidthInputSearchBox : windowGetW();
-                  s(`.top-bar-search-box-container`).style.width = `${
-                    widthInputSearchBox - originHeightTopBar - paddingRightSearchBox - 1
-                  }px`;
-                  s(`.top-bar-search-box`).style.width = `${
-                    widthInputSearchBox -
-                    originHeightTopBar * 2 -
-                    paddingRightSearchBox -
-                    paddingInputSearchBox * 2 /*padding input*/ -
-                    10 /* right-margin */
-                  }px`;
-                  s(`.top-bar-search-box`).style.top = `${
-                    (originHeightTopBar - s(`.top-bar-search-box`).clientHeight) / 2
-                  }px`;
-                  if (this.Data[id].slideMenu) s(`.${id}`).style.height = `${Modal.Data[id].getHeight()}px`;
-                };
-                Responsive.Event[`view-${id}`]();
+                Responsive.onChanged(
+                  () => {
+                    if (!this.Data[id] || !s(`.${id}`)) return Responsive.offChanged(`view-${id}`);
+                    const widthInputSearchBox =
+                      windowGetW() > maxWidthInputSearchBox ? maxWidthInputSearchBox : windowGetW();
+                    s(`.top-bar-search-box-container`).style.width = `${
+                      widthInputSearchBox - originHeightTopBar - paddingRightSearchBox - 1
+                    }px`;
+                    s(`.top-bar-search-box`).style.width = `${
+                      widthInputSearchBox -
+                      originHeightTopBar * 2 -
+                      paddingRightSearchBox -
+                      paddingInputSearchBox * 2 /*padding input*/ -
+                      10 /* right-margin */
+                    }px`;
+                    s(`.top-bar-search-box`).style.top = `${
+                      (originHeightTopBar - s(`.top-bar-search-box`).clientHeight) / 2
+                    }px`;
+                    if (this.Data[id].slideMenu) s(`.${id}`).style.height = `${Modal.Data[id].getHeight()}px`;
+                  },
+                  { key: `view-${id}` },
+                );
+                Responsive.triggerChanged(`view-${id}`);
                 Keyboard.instanceMultiPressKey({
                   id: 'input-search-shortcut-k',
                   keys: [
@@ -1127,7 +1285,7 @@ const Modal = {
                     class="fl ${options.barClass ? options.barClass : ''}"
                     style="height: ${originHeightBottomBar}px;"
                   >
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       style: `height: 100%`,
                       class: `in fl${
                         options.mode === 'slide-menu-right' ? 'r' : 'l'
@@ -1142,35 +1300,35 @@ const Modal = {
                         </div>
                       `,
                     })}
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       style: `height: 100%`,
                       class: `in flr main-btn-menu action-bar-box action-btn-lang ${
                         options?.disableTools?.includes('lang') ? 'hide' : ''
                       }`,
                       label: html` <div class="${contentIconClass} action-btn-lang-render"></div>`,
                     })}
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       style: `height: 100%`,
                       class: `in flr main-btn-menu action-bar-box action-btn-theme ${
                         options?.disableTools?.includes('theme') ? 'hide' : ''
                       }`,
                       label: html` <div class="${contentIconClass} action-btn-theme-render"></div>`,
                     })}
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       style: `height: 100%`,
                       class: `in flr main-btn-menu action-bar-box action-btn-home ${
                         options?.disableTools?.includes('navigator') ? 'hide' : ''
                       }`,
                       label: html` <div class="${contentIconClass}"><i class="fas fa-home"></i></div>`,
                     })}
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       style: `height: 100%`,
                       class: `in flr main-btn-menu action-bar-box action-btn-right ${
                         options?.disableTools?.includes('navigator') ? 'hide' : ''
                       }`,
                       label: html` <div class="${contentIconClass}"><i class="fas fa-chevron-right"></i></div>`,
                     })}
-                    ${await BtnIcon.Render({
+                    ${await BtnIcon.instance({
                       style: `height: 100%`,
                       class: `in flr main-btn-menu action-bar-box action-btn-left ${
                         options?.disableTools?.includes('navigator') ? 'hide' : ''
@@ -1182,7 +1340,7 @@ const Modal = {
                 if (options.heightBottomBar === 0 && options.heightTopBar > 0) {
                   append(`.slide-menu-top-bar`, html` <div class="in ${id}">${await html()}</div>`);
                 } else {
-                  await Modal.Render({
+                  await Modal.instance({
                     id,
                     barConfig,
                     html,
@@ -1201,13 +1359,16 @@ const Modal = {
                     // maximize: true,
                     barMode: options.barMode,
                   });
-                  Responsive.Event[`view-${id}`] = () => {
-                    if (!this.Data[id] || !s(`.${id}`)) return delete Responsive.Event[`view-${id}`];
-                    //  <div class="in fll right-offset-menu-bottom-bar" style="height: 100%"></div>
-                    // s(`.right-offset-menu-bottom-bar`).style.width = `${windowGetW() - slideMenuWidth}px`;
-                    s(`.${id}`).style.top = `${Modal.Data['modal-menu'].getTop()}px`;
-                    s(`.${id}`).style.width = `${windowGetW()}px`;
-                  };
+                  Responsive.onChanged(
+                    () => {
+                      if (!this.Data[id] || !s(`.${id}`)) return Responsive.offChanged(`view-${id}`);
+                      //  <div class="in fll right-offset-menu-bottom-bar" style="height: 100%"></div>
+                      // s(`.right-offset-menu-bottom-bar`).style.width = `${windowGetW() - slideMenuWidth}px`;
+                      s(`.${id}`).style.top = `${Modal.Data['modal-menu'].getTop()}px`;
+                      s(`.${id}`).style.width = `${windowGetW()}px`;
+                    },
+                    { key: `view-${id}` },
+                  );
                   // Responsive.Event[`view-${id}`]();
                 }
                 EventsUI.onClick(`.action-btn-left`, (e) => {
@@ -1290,12 +1451,12 @@ const Modal = {
                     barConfig.buttons.restore.disabled = true;
                     barConfig.buttons.menu.disabled = true;
                     barConfig.buttons.close.disabled = false;
-                    await Modal.Render({
+                    await Modal.instance({
                       id,
                       barConfig,
                       title: html`${renderViewTitle({
                         icon: html`<i class="fas fa-language mini-title"></i>`,
-                        text: Translate.Render('select lang'),
+                        text: Translate.instance('select lang'),
                       })}`,
                       html: async () => html`${await Translate.RenderSetting('action-drop-modal' + id)}`,
                       titleClass: 'mini-title',
@@ -1349,7 +1510,7 @@ const Modal = {
                 barConfig.buttons.menu.disabled = true;
                 barConfig.buttons.close.disabled = true;
                 const id = 'main-body-top';
-                await Modal.Render({
+                await Modal.instance({
                   id,
                   barConfig,
                   html: () => html``,
@@ -1368,24 +1529,27 @@ const Modal = {
                   barMode: options.barMode,
                 });
 
-                Responsive.Event[`view-${id}`] = () => {
-                  if (!this.Data[id] || !s(`.${id}`)) return delete Responsive.Event[`view-${id}`];
-                  s(`.${id}`).style.height =
-                    s(`.main-body-btn-ui-close`).classList.contains('hide') &&
-                    s(`.btn-restore-${id}`).style.display !== 'none'
-                      ? `${windowGetH()}px`
-                      : `${Modal.Data[id].getHeight()}px`;
-
-                  if (
-                    s(`.main-body-btn-ui-close`).classList.contains('hide') &&
-                    s(`.btn-restore-${id}`).style.display !== 'none'
-                  ) {
-                    s(`.${id}`).style.top = '0px';
-                  } else {
-                    s(`.${id}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
-                  }
-                };
-                Responsive.Event[`view-${id}`]();
+                Responsive.onChanged(
+                  () => {
+                    if (!this.Data[id] || !s(`.${id}`)) return Responsive.offChanged(`view-${id}`);
+                    s(`.${id}`).style.height =
+                      s(`.main-body-btn-ui-close`).classList.contains('hide') &&
+                      s(`.btn-restore-${id}`).style.display !== 'none'
+                        ? `${windowGetH()}px`
+                        : `${Modal.Data[id].getHeight()}px`;
+
+                    if (
+                      s(`.main-body-btn-ui-close`).classList.contains('hide') &&
+                      s(`.btn-restore-${id}`).style.display !== 'none'
+                    ) {
+                      s(`.${id}`).style.top = '0px';
+                    } else {
+                      s(`.${id}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+                    }
+                  },
+                  { key: `view-${id}` },
+                );
+                Responsive.triggerChanged(`view-${id}`);
 
                 s(`.main-body-top`).onclick = () => s(`.btn-close-modal-menu`).click();
               }
@@ -1511,7 +1675,7 @@ const Modal = {
             >
               <div class="btn-bar-modal-container-render-${idModal}"></div>
               <div class="in flr bar-default-modal" style="z-index: 1">
-                ${await BtnIcon.Render({
+                ${await BtnIcon.instance({
                   class: `btn-minimize-${idModal} btn-modal-default btn-modal-default-${idModal} ${
                     options?.btnContainerClass ? options.btnContainerClass : ''
                   } ${options?.barConfig?.buttons?.minimize?.disabled ? 'hide' : ''}`,
@@ -1519,7 +1683,7 @@ const Modal = {
                     ${options?.barConfig?.buttons?.minimize?.label ? options.barConfig.buttons.minimize.label : html`_`}
                   </div>`,
                 })}
-                ${await BtnIcon.Render({
+                ${await BtnIcon.instance({
                   class: `btn-restore-${idModal} btn-modal-default btn-modal-default-${idModal} ${
                     options?.btnContainerClass ? options.btnContainerClass : ''
                   } ${options?.barConfig?.buttons?.restore?.disabled ? 'hide' : ''}`,
@@ -1528,7 +1692,7 @@ const Modal = {
                   </div>`,
                   style: 'display: none',
                 })}
-                ${await BtnIcon.Render({
+                ${await BtnIcon.instance({
                   class: `btn-maximize-${idModal} btn-modal-default btn-modal-default-${idModal} ${
                     options?.btnContainerClass ? options.btnContainerClass : ''
                   } ${options?.barConfig?.buttons?.maximize?.disabled ? 'hide' : ''}`,
@@ -1536,7 +1700,7 @@ const Modal = {
                     ${options?.barConfig?.buttons?.maximize?.label ? options.barConfig.buttons.maximize.label : html`▢`}
                   </div>`,
                 })}
-                ${await BtnIcon.Render({
+                ${await BtnIcon.instance({
                   class: `btn-close-${idModal} btn-modal-default btn-modal-default-${idModal} ${
                     options?.btnContainerClass ? options.btnContainerClass : ''
                   } ${options?.barConfig?.buttons?.close?.disabled ? 'hide' : ''}`,
@@ -1544,7 +1708,7 @@ const Modal = {
                     ${options?.barConfig?.buttons?.close?.label ? options.barConfig.buttons.close.label : html`X`}
                   </div>`,
                 })}
-                ${await BtnIcon.Render({
+                ${await BtnIcon.instance({
                   class: `btn-menu-${idModal} btn-modal-default btn-modal-default-${idModal} ${
                     options?.btnContainerClass ? options.btnContainerClass : ''
                   } ${options?.barConfig?.buttons?.menu?.disabled ? 'hide' : ''}`,
@@ -1572,7 +1736,7 @@ const Modal = {
                   class="stq modal"
                   style="${renderCssAttr({ style: { height: '50px', 'z-index': 1, top: '0px' } })}"
                 >
-                  ${await BtnIcon.Render({
+                  ${await BtnIcon.instance({
                     style: renderCssAttr({ style: { height: '100%', color: '#5f5f5f' } }),
                     class: `in flr main-btn-menu action-bar-box btn-icon-menu-mode`,
                     label: html` <div class="abs center">
@@ -1588,14 +1752,14 @@ const Modal = {
                       ></i>
                     </div>`,
                   })}
-                  ${await BtnIcon.Render({
+                  ${await BtnIcon.instance({
                     style: renderCssAttr({ style: { height: '100%', color: '#5f5f5f' } }),
                     class: `in flr main-btn-menu action-bar-box btn-icon-menu-back hide`,
                     label: html`<div class="abs center"><i class="fas fa-undo-alt"></i></div>`,
                   })}
                   <div class="abs sub-menu-title-container-${idModal} ac">
                     <div class="abs nav-title-display-${idModal}">
-                      <!-- <i class="fas fa-home"></i> ${Translate.Render('home')} -->
+                      <!-- <i class="fas fa-home"></i> ${Translate.instance('home')} -->
                     </div>
                   </div>
                   <div class="abs nav-path-container-${idModal} ahc bold">
@@ -1635,7 +1799,7 @@ const Modal = {
       case 'slide-menu-right':
       case 'slide-menu-left':
         const backMenuButtonEvent = async () => {
-          // htmls(`.nav-title-display-${'modal-menu'}`, html`<i class="fas fa-home"></i> ${Translate.Render('home')}`);
+          // htmls(`.nav-title-display-${'modal-menu'}`, html`<i class="fas fa-home"></i> ${Translate.instance('home')}`);
           htmls(`.nav-title-display-${'modal-menu'}`, html``);
           htmls(`.nav-path-display-${idModal}`, '');
           s(`.btn-icon-menu-back`).classList.add('hide');
@@ -1667,6 +1831,12 @@ const Modal = {
             if (options.onCollapseMenu) options.onCollapseMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.add('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.add('hide');
+            // Shrink any already-open submenu containers to icon-only width
+            Object.keys(Modal.subMenuBtnClass).forEach((subMenuId) => {
+              const container = s(`.menu-btn-container-children-${subMenuId}`);
+              if (container && container.style.height && container.style.height !== '0px')
+                container.style.width = `${collapseSlideMenuWidth}px`;
+            });
             Object.keys(this.Data[idModal].onCollapseMenuListener).map((keyListener) =>
               this.Data[idModal].onCollapseMenuListener[keyListener](),
             );
@@ -1684,12 +1854,18 @@ const Modal = {
             if (options.onExtendMenu) options.onExtendMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.remove('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.remove('hide');
+            // Expand any already-open submenu containers back to full width
+            Object.keys(Modal.subMenuBtnClass).forEach((subMenuId) => {
+              const container = s(`.menu-btn-container-children-${subMenuId}`);
+              if (container && container.style.height && container.style.height !== '0px')
+                container.style.width = `${originSlideMenuWidth}px`;
+            });
             Object.keys(this.Data[idModal].onExtendMenuListener).map((keyListener) =>
               this.Data[idModal].onExtendMenuListener[keyListener](),
             );
           }
           Modal.Data[idModal][options.mode].width = slideMenuWidth;
-          Responsive.Event[`slide-menu-${idModal}`]();
+          Responsive.triggerChanged(`slide-menu-${idModal}`);
         });
 
         break;
@@ -1964,22 +2140,25 @@ const Modal = {
           callBack,
           id: options.slideMenu,
         };
-        Responsive.Event['h-ui-hide-' + idModal] = () => {
-          setTimeout(() => {
-            if (!s(`.${idModal}`) || !s(`.main-body-btn-ui-close`)) return;
-            if (s(`.btn-restore-${idModal}`) && s(`.btn-restore-${idModal}`).style.display !== 'none') {
-              s(`.${idModal}`).style.height = s(`.main-body-btn-ui-close`).classList.contains('hide')
-                ? `${windowGetH()}px`
-                : `${Modal.Data[idModal].getHeight()}px`;
-            }
-            s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
-              ? `0px`
-              : `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
-          });
-        };
-        Responsive.Event['h-ui-hide-' + idModal]();
+        Responsive.onChanged(
+          () => {
+            setTimeout(() => {
+              if (!s(`.${idModal}`) || !s(`.main-body-btn-ui-close`)) return;
+              if (s(`.btn-restore-${idModal}`) && s(`.btn-restore-${idModal}`).style.display !== 'none') {
+                s(`.${idModal}`).style.height = s(`.main-body-btn-ui-close`).classList.contains('hide')
+                  ? `${windowGetH()}px`
+                  : `${Modal.Data[idModal].getHeight()}px`;
+              }
+              s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
+                ? `0px`
+                : `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+            });
+          },
+          { key: 'h-ui-hide-' + idModal },
+        );
+        Responsive.triggerChanged('h-ui-hide-' + idModal);
       } else {
-        delete Responsive.Event['h-ui-hide-' + idModal];
+        Responsive.offChanged('h-ui-hide-' + idModal);
         s(`.${idModal}`).style.width = '100%';
         s(`.${idModal}`).style.height = '100%';
         s(`.${idModal}`).style.top = `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
@@ -2001,7 +2180,6 @@ const Modal = {
     dragInstance = setDragInstance();
     if (options && options.maximize) s(`.btn-maximize-${idModal}`).click();
     if (options.observer) {
-      this.Data[idModal].onObserverListener = {};
       this.Data[idModal].observerCallBack = () => {
         // logger.info('ResizeObserver', `.${idModal}`, s(`.${idModal}`).offsetWidth, s(`.${idModal}`).offsetHeight);
         if (this.Data[idModal] && this.Data[idModal].onObserverListener)
@@ -2029,10 +2207,13 @@ const Modal = {
       id: idModal,
       ...this.Data[idModal],
     };
-  },
-  subMenuBtnClass: {},
+  }
 
-  onHomeRouterEvent: async () => {
+  /** @type {Object.<string, object>} */
+  static subMenuBtnClass = {};
+
+  /** Navigate to the home route and close all non-home modals. */
+  static onHomeRouterEvent = async () => {
     // 1. Get list of modals to close.
     const modalsToClose = Object.keys(Modal.Data).filter((idModal) => {
       const modal = Modal.Data[idModal];
@@ -2072,9 +2253,16 @@ const Modal = {
     if (s(`.btn-close-modal-menu`) && !s(`.btn-close-modal-menu`).classList.contains('hide')) {
       s(`.btn-close-modal-menu`).click();
     }
-  },
-  currentTopModalId: '',
-  zIndexSync: function ({ idModal }) {
+  };
+
+  /** @type {string} */
+  static currentTopModalId = '';
+
+  /**
+   * Synchronise z-index for view modals, promoting the given modal to top.
+   * @param {{ idModal: string }} param0
+   */
+  static zIndexSync({ idModal }) {
     setTimeout(() => {
       if (!this.Data[idModal]) return;
       const cleanTopModal = () => {
@@ -2100,14 +2288,30 @@ const Modal = {
         }
       };
     });
-  },
-  setTopModalCallback: function (idModal) {
+  }
+
+  /**
+   * @param {string} idModal
+   */
+  static setTopModalCallback(idModal) {
     s(`.${idModal}`).style.zIndex = '4';
     this.currentTopModalId = `${idModal}`;
-  },
-  mobileModal: () => windowGetW() < 600 || windowGetH() < 600,
-  writeHTML: ({ idModal, html }) => htmls(`.html-${idModal}`, html),
-  updateModal: async function ({ idModal, html, title }) {
+  }
+
+  /** @returns {boolean} True when the viewport is considered mobile-sized. */
+  static mobileModal = () => windowGetW() < 600 || windowGetH() < 600;
+
+  /**
+   * @param {{ idModal: string, html: string }} param0
+   */
+  static writeHTML = ({ idModal, html }) => htmls(`.html-${idModal}`, html);
+
+  /**
+   * Update an existing modal's content and/or title.
+   * @param {{ idModal: string, html?: string, title?: string }} param0
+   * @returns {Promise<boolean>}
+   */
+  static async updateModal({ idModal, html, title }) {
     if (!this.Data[idModal] || !s(`.${idModal}`)) {
       console.warn(`Modal ${idModal} not found for update`);
       return false;
@@ -2134,19 +2338,32 @@ const Modal = {
     }
 
     return true;
-  },
-  viewModalOpen: function () {
+  }
+
+  /** @returns {string|undefined} Id of the first open view-mode modal, or undefined. */
+  static viewModalOpen() {
     return Object.keys(this.Data).find((idModal) => s(`.${idModal}`) && this.Data[idModal].options.mode === 'view');
-  },
-  removeModal: function (idModal) {
+  }
+
+  /**
+   * Remove a modal element and its style tags, and delete its data entry.
+   * @param {string} idModal
+   */
+  static removeModal(idModal) {
     if (!s(`.${idModal}`)) return;
     s(`.${idModal}`).remove();
     sa(`.style-${idModal}`).forEach((element) => {
       element.remove();
     });
     delete this.Data[idModal];
-  },
-  RenderConfirm: async function (options) {
+  }
+
+  /**
+   * Render a confirmation dialog and return a promise resolving to the user's choice.
+   * @param {{ id: string, html: Function, icon?: string, disableBtnCancel?: boolean }} options
+   * @returns {Promise<{ status: 'confirm'|'cancelled' }>}
+   */
+  static async RenderConfirm(options) {
     const { id } = options;
     append(
       'body',
@@ -2189,23 +2406,23 @@ const Modal = {
         </div>
         ${await options.html()}
         <div class="in section-mp">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: `in section-mp form-button btn-confirm-${id}`,
-            label: Translate.Render('confirm'),
+            label: Translate.instance('confirm'),
             type: 'submit',
             style: `margin: auto`,
           })}
         </div>
         <div class="in section-mp ${options.disableBtnCancel ? 'hide' : ''}">
-          ${await BtnIcon.Render({
+          ${await BtnIcon.instance({
             class: `in section-mp form-button btn-cancel-${id}`,
-            label: Translate.Render('cancel'),
+            label: Translate.instance('cancel'),
             type: 'submit',
             style: `margin: auto`,
           })}
         </div>
       `;
-      await Modal.Render({
+      await Modal.instance({
         id,
         barConfig,
         titleClass: 'hide',
@@ -2242,10 +2459,20 @@ const Modal = {
         resolve({ status: 'confirm' });
       };
     });
-  },
-  labelSelectorTopOffsetStartAnimation: `-40px`,
-  labelSelectorTopOffsetEndAnimation: `-3px`,
-  menuTextLabelAnimation: (idModal, subMenuId) => {
+  }
+
+  /** @type {string} */
+  static labelSelectorTopOffsetStartAnimation = `-40px`;
+
+  /** @type {string} */
+  static labelSelectorTopOffsetEndAnimation = `-3px`;
+
+  /**
+   * Animate slide-menu labels into view.
+   * @param {string} idModal - The slide-menu modal id.
+   * @param {string} [subMenuId] - If provided, animate only this sub-menu.
+   */
+  static menuTextLabelAnimation = (idModal, subMenuId) => {
     if (
       !s(
         `.btn-icon-menu-mode-${Modal.Data[idModal].options.mode === 'slide-menu-right' ? 'left' : 'right'}`,
@@ -2288,19 +2515,66 @@ const Modal = {
         });
       }, 400);
     }
-  },
+  };
+
+  /**
+   * Builds submenu item HTML using the canonical BtnIcon pattern.
+   * Centralises the item-rendering contract so individual submenu owners (e.g. Docs)
+   * only need to supply data — not layout concerns.
+   * @param {string} subMenuId - Submenu identifier (e.g. 'docs')
+   * @param {Array<{type:string, icon:string, text:string, url:function|string}>} items
+   * @param {Object} [options]
+   * @param {function} [options.subMenuIcon] - Optional icon override per item type
+   * @returns {Promise<string>} Rendered HTML string
+   */
+  static buildSubMenuItemsHtml = async (subMenuId, items = [], options = {}) => {
+    let result = '';
+    const _menuMode = Modal.Data['modal-menu']?.options?.mode;
+    const _tooltipSide = options.tooltipSide || (_menuMode === 'slide-menu-right' ? 'right' : 'left');
+    for (const item of items) {
+      const tabHref = typeof item.url === 'function' ? item.url() : item.url || '';
+      const icon =
+        options.subMenuIcon && typeof options.subMenuIcon === 'function' ? options.subMenuIcon(item.type) : item.icon;
+      result += html`${await BtnIcon.instance({
+        class: `in wfa main-btn-menu submenu-btn btn-${subMenuId} btn-${subMenuId}-${item.type}`,
+        label: html`<span class="inl menu-btn-icon">${icon}</span
+          ><span class="menu-label-text menu-label-text-${subMenuId}"> ${item.text} </span>`,
+        tabHref,
+        tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption(item.text, _tooltipSide)),
+        useMenuBtn: true,
+      })} `;
+    }
+    return result;
+  };
+
+  /**
+   * Injects pre-built submenu item HTML into the submenu container and syncs
+   * the collapse state so labels are hidden when the menu is icon-only.
+   * @param {string} subMenuId
+   * @param {string} itemsHtml
+   */
+  static subMenuPopulate = (subMenuId, itemsHtml) => {
+    htmls(`.menu-btn-container-children-${subMenuId}`, itemsHtml);
+    const _menuMode = Modal.Data['modal-menu']?.options?.mode;
+    const _collapseIndicatorClass =
+      _menuMode === 'slide-menu-right' ? '.btn-icon-menu-mode-left' : '.btn-icon-menu-mode-right';
+    if (s(_collapseIndicatorClass) && !s(_collapseIndicatorClass).classList.contains('hide')) {
+      sa(`.menu-label-text-${subMenuId}`).forEach((el) => el.classList.add('hide'));
+    }
+  };
+
   // Move modal title element into the bar's render container so it aligns with control buttons
   /**
-   * Position a modal relative to an anchor element
-   * @param {Object} options - Positioning options
+   * Position a modal relative to an anchor element.
+   * @param {object} options - Positioning options
    * @param {string} options.modalSelector - CSS selector for the modal element
    * @param {string} options.anchorSelector - CSS selector for the anchor element
-   * @param {Object} [options.offset={x: 0, y: 6}] - Offset from anchor
+   * @param {object} [options.offset={x: 0, y: 6}] - Offset from anchor
    * @param {string} [options.align='right'] - Horizontal alignment ('left' or 'right')
    * @param {boolean} [options.autoVertical=true] - Whether to automatically determine vertical position
    * @param {boolean} [options.placeAbove] - Force position above/below anchor (overrides autoVertical)
    */
-  positionRelativeToAnchor({
+  static positionRelativeToAnchor({
     modalSelector,
     anchorSelector,
     offset = { x: 0, y: 6 },
@@ -2372,9 +2646,13 @@ const Modal = {
     } catch (e) {
       console.error('Error positioning modal:', e);
     }
-  },
+  }
 
-  MoveTitleToBar(idModal) {
+  /**
+   * Move the title element inside the bar button container for inline alignment.
+   * @param {string} idModal
+   */
+  static MoveTitleToBar(idModal) {
     try {
       const titleEl = s(`.title-modal-${idModal}`);
       const container = s(`.btn-bar-modal-container-render-${idModal}`);
@@ -2387,8 +2665,10 @@ const Modal = {
     } catch (e) {
       // non-fatal: keep default placement if structure not present
     }
-  },
-  setTopBannerLink: function () {
+  }
+
+  /** Update the top-banner anchor href and bind the home-click handler. */
+  static setTopBannerLink() {
     if (s(`.a-link-top-banner`)) {
       s(`.a-link-top-banner`).setAttribute('href', `${location.origin}${getProxyPath()}`);
       EventsUI.onClick(`.a-link-top-banner`, (e) => {
@@ -2396,32 +2676,72 @@ const Modal = {
         s(`.action-btn-home`).click();
       });
     }
-  },
-  headerTitleHeight: 40,
-  actionBtnCenter: function () {
+  }
+
+  /** @type {number} */
+  static headerTitleHeight = 40;
+
+  /** Toggle the slide-menu open/close via the center action button. */
+  static actionBtnCenter() {
     if (!s(`.btn-close-modal-menu`).classList.contains('hide')) {
       return s(`.btn-close-modal-menu`).click();
     }
     if (!s(`.btn-menu-modal-menu`).classList.contains('hide')) {
       return s(`.btn-menu-modal-menu`).click();
     }
-  },
-  cleanUI: function () {
+  }
+
+  /** Hide the top-bar, bottom-bar and slide-menu (full-screen mode). */
+  static cleanUI() {
     s(`.top-bar`).classList.add('hide');
     s(`.bottom-bar`).classList.add('hide');
     s(`.modal-menu`).classList.add('hide');
-  },
-  restoreUI: function () {
+  }
+
+  /** Restore the top-bar, bottom-bar and slide-menu after cleanUI. */
+  static restoreUI() {
     s(`.top-bar`).classList.remove('hide');
     s(`.bottom-bar`).classList.remove('hide');
     s(`.modal-menu`).classList.remove('hide');
-  },
-  RenderSeoSanitizer: async () => {
+  }
+
+  /**
+   * Re-applies canonical top/height layout for maximized slide-menu-backed view modals.
+   * This avoids iframe navigation leaving view containers offset at the top.
+   */
+  static syncViewLayout() {
+    const modalMenuOptions = this.Data['modal-menu']?.options || {};
+    const uiCollapsed = !!s(`.main-body-btn-ui-close`) && s(`.main-body-btn-ui-close`).classList.contains('hide');
+    const topOffset = uiCollapsed ? 0 : modalMenuOptions.heightTopBar ? modalMenuOptions.heightTopBar : 50;
+    const bottomOffset = uiCollapsed ? 0 : modalMenuOptions.heightBottomBar ? modalMenuOptions.heightBottomBar : 0;
+    const height = `${windowGetH() - topOffset - bottomOffset}px`;
+
+    Object.keys(this.Data).forEach((idModal) => {
+      const modalData = this.Data[idModal];
+      const modalEl = s(`.${idModal}`);
+      if (!modalData || !modalEl || !modalData.slideMenu) return;
+      if (s(`.btn-restore-${idModal}`) && s(`.btn-restore-${idModal}`).style.display === 'none') return;
+
+      modalEl.style.position = 'fixed';
+      modalEl.style.translate = '0px 0px';
+      modalEl.style.transform = '';
+      modalEl.style.top = `${topOffset}px`;
+      modalEl.style.height = height;
+    });
+
+    for (const id of coreUI) {
+      const key = `view-${id}`;
+      if (Responsive.hasChangedListener(key)) Responsive.triggerChanged(key);
+    }
+  }
+
+  /** Add missing `alt` attributes to all images for SEO/accessibility. */
+  static RenderSeoSanitizer = async () => {
     sa('img').forEach((img) => {
       if (!img.getAttribute('alt')) img.setAttribute('alt', 'image ' + Worker.title + ' ' + s4());
     });
-  },
-};
+  };
+}
 
 const renderMenuLabel = ({ img, src, text, icon }) => {
   if (!img && !src) return html`<span class="inl menu-btn-icon">${icon}</span> ${text}`;
@@ -2478,7 +2798,7 @@ const renderViewTitle = (
 const buildBadgeToolTipMenuOption = (id, sideKey = 'left') => {
   const option = {
     id: `tooltip-content-main-btn-${id}`,
-    text: `${Translate.Render(`${id}`)}`,
+    text: `${Translate.instance(`${id}`)}`,
     classList: 'tooltip-menu',
     style: { top: `-40px` },
   };
@@ -2548,9 +2868,14 @@ const subMenuRender = async (subMenuId) => {
     setTimeout(() => {
       Modal.menuTextLabelAnimation('modal-menu', subMenuId);
     });
-    // Open animation
+    // Open animation — match the current menu width (collapsed = 50px, extended = 320px)
+    const _menuMode = Modal.Data['modal-menu']?.options?.mode;
+    const _collapseIndicatorClass =
+      _menuMode === 'slide-menu-right' ? '.btn-icon-menu-mode-left' : '.btn-icon-menu-mode-right';
+    const _isMenuCollapsed = s(_collapseIndicatorClass) && !s(_collapseIndicatorClass).classList.contains('hide');
+    const _menuContainerWidth = _isMenuCollapsed ? 50 : 320;
     setTimeout(top, 360);
-    menuContainer.style.width = '320px';
+    menuContainer.style.width = `${_menuContainerWidth}px`;
     menuContainer.style.overflow = null;
     menuContainer.style.height = '0px';
     menuContainer.style.height = `${_hBtn * 6}px`;