underpost 2.8.84 → 2.8.85

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

@@ -24,7 +24,7 @@ import {
   renderStatus,
   renderCssAttr,
 } from './Css.js';
-import { setDocTitle } from './Router.js';
+import { setDocTitle, closeModalRouteChangeEvent, handleModalViewRoute } from './Router.js';
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
 import { Translate } from './Translate.js';
@@ -39,6 +39,7 @@ const logger = loggerFactory(import.meta);
 
 const Modal = {
   Data: {},
+
   Render: async function (
     options = {
       id: '',
@@ -86,14 +87,14 @@ const Modal = {
       onBarUiOpen: {},
       onBarUiClose: {},
       onHome: {},
+      homeModals: options.homeModals ? options.homeModals : [],
       query: options.query ? `${window.location.search}` : undefined,
     };
-    const setCenterRestore = () => {
-      const ResponsiveData = Responsive.getResponsiveData();
-      top = `${ResponsiveData.height / 2 - height / 2}px`;
-      left = `${ResponsiveData.width / 2 - width / 2}px`;
-    };
-    if (idModal !== 'main-body') setCenterRestore();
+
+    if (idModal !== 'main-body' && options.mode !== 'view') {
+      top = `${window.innerHeight / 2 - height / 2}px`;
+      left = `${window.innerWidth / 2 - width / 2}px`;
+    }
     if (options && 'mode' in options) {
       this.Data[idModal][options.mode] = {};
       switch (options.mode) {
@@ -104,6 +105,7 @@ const Modal = {
           options.style = {
             ...options.style,
             'min-width': `${minWidth}px`,
+            width: '100%',
           };
 
           if (this.mobileModal()) {
@@ -124,25 +126,84 @@ const Modal = {
           };
           Responsive.Event[`view-${idModal}`]();
 
-          // Router
-          if (options.route)
-            (() => {
-              let path = window.location.pathname;
-              if (path !== '/' && path[path.length - 1] === '/') path = path.slice(0, -1);
-              const proxyPath = getProxyPath();
-              const newPath = `${proxyPath}${options.route}`;
-              if (path !== newPath) {
-                // console.warn('SET MODAL URI', newPath);
-                setPath(`${newPath}`); // ${location.search}
-                setDocTitle({ ...options.RouterInstance, route: options.route });
-              }
-            })();
+          // Handle view mode modal route
+          if (options.route) {
+            handleModalViewRoute({
+              route: options.route,
+              RouterInstance: options.RouterInstance,
+            });
+          }
 
           break;
         case 'slide-menu':
         case 'slide-menu-right':
         case 'slide-menu-left':
           (async () => {
+            if (!options.slideMenuTopBarBannerFix) {
+              options.slideMenuTopBarBannerFix = async () => {
+                let style = html``;
+                if (options.barMode === 'top-bottom-bar') {
+                  style = html`<style>
+                    .default-slide-menu-top-bar-fix-logo-container {
+                      width: 50px;
+                      height: 50px;
+                    }
+                    .default-slide-menu-top-bar-fix-logo {
+                      width: 40px;
+                      height: 40px;
+                      padding: 5px;
+                    }
+                    .default-slide-menu-top-bar-fix-title-container-text {
+                      font-size: 26px;
+                      top: 8px;
+                      color: ${darkTheme ? '#ffffff' : '#000000'};
+                    }
+                  </style>`;
+                } else {
+                  style = html`<style>
+                    .default-slide-menu-top-bar-fix-logo-container {
+                      width: 100px;
+                      height: 100px;
+                    }
+                    .default-slide-menu-top-bar-fix-logo {
+                      width: 50px;
+                      height: 50px;
+                      padding: 24px;
+                    }
+                    .default-slide-menu-top-bar-fix-title-container-text {
+                      font-size: 30px;
+                      top: 30px;
+                      color: ${darkTheme ? '#ffffff' : '#000000'};
+                    }
+                  </style>`;
+                }
+                setTimeout(() => {
+                  if (s(`.top-bar-app-icon`) && s(`.top-bar-app-icon`).src) {
+                    s(`.default-slide-menu-top-bar-fix-logo`).src = s(`.top-bar-app-icon`).src;
+                    if (s(`.top-bar-app-icon`).classList.contains('negative-color'))
+                      s(`.default-slide-menu-top-bar-fix-logo`).classList.add('negative-color');
+                    htmls(
+                      `.default-slide-menu-top-bar-fix-title-container`,
+                      html`
+                        <div class="inl default-slide-menu-top-bar-fix-title-container-text">
+                          ${options.RouterInstance.NameApp}
+                        </div>
+                      `,
+                    );
+                  } else
+                    htmls(
+                      `.default-slide-menu-top-bar-fix-logo-container`,
+                      html`<div class="abs center">${s(`.action-btn-app-icon-render`).innerHTML}</div>`,
+                    );
+                });
+
+                return html`${style}
+                  <div class="in fll default-slide-menu-top-bar-fix-logo-container">
+                    <img class="default-slide-menu-top-bar-fix-logo in fll" />
+                  </div>
+                  <div class="in fll default-slide-menu-top-bar-fix-title-container"></div>`;
+              };
+            }
             const { barConfig } = options;
             options.style = {
               position: 'absolute',
@@ -247,8 +308,17 @@ const Modal = {
                     style="top: ${options.heightTopBar + 50}px; z-index: 9; ${true ||
                     (options.mode && options.mode.match('right'))
                       ? 'right'
-                      : 'left'}: 50px; width: 50px; height: 100px; transition: .3s"
+                      : 'left'}: 50px; width: 50px; height: 150px; transition: .3s"
                   >
+                    <div
+                      class="abs main-body-btn main-body-btn-ui"
+                      style="top: 0px; ${true || (options.mode && options.mode.match('right')) ? 'right' : 'left'}: 0px"
+                    >
+                      <div class="abs center">
+                        <i class="fas fa-caret-down main-body-btn-ui-open hide"></i>
+                        <i class="fas fa-caret-up main-body-btn-ui-close"></i>
+                      </div>
+                    </div>
                     <div
                       class="abs main-body-btn main-body-btn-menu"
                       style="top: 50px; ${true || (options.mode && options.mode.match('right'))
@@ -261,15 +331,18 @@ const Modal = {
                       </div>
                     </div>
                     <div
-                      class="abs main-body-btn main-body-btn-ui"
-                      style="top: 0px; ${true || (options.mode && options.mode.match('right')) ? 'right' : 'left'}: 0px"
+                      class="abs main-body-btn main-body-btn-bar-custom ${options?.slideMenuTopBarBannerFix
+                        ? ''
+                        : 'hide'}"
+                      style="top: 100px; ${true || (options.mode && options.mode.match('right'))
+                        ? 'right'
+                        : 'left'}: 0px"
                     >
                       <div class="abs center">
-                        <i class="fas fa-caret-down main-body-btn-ui-open hide"></i>
-                        <i class="fas fa-caret-up main-body-btn-ui-close"></i>
+                        <i class="fa-solid fa-magnifying-glass main-body-btn-ui-bar-custom-open"></i>
+                        <i class="fa-solid fa-home hide main-body-btn-ui-bar-custom-close"></i>
                       </div>
                     </div>
-                    <div class="main-body-btn-container-custom"></div>
                   </div>
                 `,
               );
@@ -278,6 +351,22 @@ const Modal = {
                 Modal.actionBtnCenter();
               };
 
+              s(`.main-body-btn-bar-custom`).onclick = () => {
+                if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
+                  s(`.main-body-btn-ui`).click();
+                }
+                if (s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide')) {
+                  s(`.main-body-btn-ui-bar-custom-open`).classList.remove('hide');
+                  s(`.main-body-btn-ui-bar-custom-close`).classList.add('hide');
+                  s(`.slide-menu-top-bar-fix`).style.top = '0px';
+                } else {
+                  s(`.main-body-btn-ui-bar-custom-open`).classList.add('hide');
+                  s(`.main-body-btn-ui-bar-custom-close`).classList.remove('hide');
+                  s(`.slide-menu-top-bar-fix`).style.top = '-100px';
+                  s(`.top-bar-search-box-container`).click();
+                }
+              };
+
               let _heightTopBar, _heightBottomBar, _topMenu;
               s(`.main-body-btn-ui`).onclick = () => {
                 if (s(`.main-body-btn-ui-open`).classList.contains('hide')) {
@@ -323,6 +412,7 @@ const Modal = {
                   );
                 }
               };
+              Modal.setTopBannerLink();
             });
 
             const inputSearchBoxId = `top-bar-search-box`;
@@ -407,9 +497,14 @@ const Modal = {
                     })}
                   </div>
                 </div>
-                ${options?.slideMenuTopBarFix
-                  ? html`<div class="abs modal slide-menu-top-bar-fix" style="height: ${options.heightTopBar}px">
-                      ${await options.slideMenuTopBarFix()}
+                ${options?.slideMenuTopBarBannerFix
+                  ? html`<div
+                      class="abs modal slide-menu-top-bar-fix"
+                      style="height: ${options.heightTopBar}px; top: 0px"
+                    >
+                      <a class="a-link-top-banner">
+                        <div class="inl">${await options.slideMenuTopBarBannerFix()}</div></a
+                      >
                     </div>`
                   : ''}
               </div>`,
@@ -434,8 +529,14 @@ const Modal = {
                   rules: [] /*{ type: 'isEmpty' }, { type: 'isEmail' }*/,
                 },
               ];
-              let hoverHistBox = false;
-              let hoverInputBox = false;
+              // Reusable hover/focus controller for search history panel
+              let unbindDocSearch = null;
+              const hoverFocusCtl = EventsUI.HoverFocusController({
+                inputSelector: `.top-bar-search-box-container`,
+                panelSelector: `.${id}`,
+                activeElementId: inputSearchBoxId,
+                onDismiss: () => dismissSearchBox(),
+              });
               let currentKeyBoardSearchBoxIndex = 0;
               let results = [];
               let historySearchBox = [];
@@ -592,17 +693,29 @@ const Modal = {
                 const isSearchBoxActiveElement = isActiveElement(inputSearchBoxId);
                 checkHistoryBoxTitleStatus();
                 checkShortcutContainerInfoEnabled();
-                if (!isSearchBoxActiveElement && !hoverHistBox && !hoverInputBox) {
+                if (!isSearchBoxActiveElement && !hoverFocusCtl.shouldStay()) {
                   Modal.removeModal(searchBoxHistoryId);
                   return;
                 }
-                setTimeout(() => getResultSearchBox(validatorData));
+                setTimeout(() => {
+                  getResultSearchBox(validatorData);
+
+                  if (
+                    s(`.slide-menu-top-bar-fix`) &&
+                    !s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide')
+                  ) {
+                    s(`.main-body-btn-bar-custom`).click();
+                  }
+                });
               };
 
               const getDefaultSearchBoxSelector = () => `.search-result-btn-${currentKeyBoardSearchBoxIndex}`;
 
               const updateSearchBoxValue = (selector) => {
                 if (!selector) selector = getDefaultSearchBoxSelector();
+                // check exist childNodes
+                if (!s(selector) || !s(selector).hasChildNodes()) return;
+
                 if (s(selector).childNodes) {
                   if (
                     s(selector).childNodes[s(selector).childNodes.length - 1] &&
@@ -626,6 +739,10 @@ const Modal = {
 
               const setSearchValue = (selector) => {
                 if (!selector) selector = getDefaultSearchBoxSelector();
+
+                // check exist childNodes
+                if (!s(selector) || !s(selector).hasChildNodes()) return;
+
                 historySearchBox = historySearchBox.filter(
                   (h) => h.routerId !== results[currentKeyBoardSearchBoxIndex].routerId,
                 );
@@ -676,27 +793,19 @@ const Modal = {
                     barMode: options.barMode,
                   });
 
-                  const titleNode = s(`.title-modal-${id}`).cloneNode(true);
-                  s(`.title-modal-${id}`).remove();
-                  s(`.btn-bar-modal-container-render-${id}`).classList.add('in');
-                  s(`.btn-bar-modal-container-render-${id}`).classList.add('fll');
-                  s(`.btn-bar-modal-container-render-${id}`).appendChild(titleNode);
+                  // Bind hover/focus and click-outside to dismiss
+                  hoverFocusCtl.bind();
+                  unbindDocSearch = EventsUI.bindDismissOnDocumentClick({
+                    shouldStay: hoverFocusCtl.shouldStay,
+                    onDismiss: () => dismissSearchBox(),
+                    anchors: [`.top-bar-search-box-container`, `.${id}`],
+                  });
+                  // Ensure cleanup when modal closes
+                  Modal.Data[id].onCloseListener[`unbind-doc-${id}`] = () => unbindDocSearch && unbindDocSearch();
 
-                  prepend(`.btn-bar-modal-container-${id}`, html`<div class="hide">${inputInfoNode.outerHTML}</div>`);
+                  Modal.MoveTitleToBar(id);
 
-                  s(`.top-bar-search-box-container`).onmouseover = () => {
-                    hoverInputBox = true;
-                  };
-                  s(`.top-bar-search-box-container`).onmouseout = () => {
-                    hoverInputBox = false;
-                  };
-                  s(`.${id}`).onmouseover = () => {
-                    hoverHistBox = true;
-                  };
-                  s(`.${id}`).onmouseout = () => {
-                    hoverHistBox = false;
-                    s(`.${inputSearchBoxId}`).focus();
-                  };
+                  prepend(`.btn-bar-modal-container-${id}`, html`<div class="hide">${inputInfoNode.outerHTML}</div>`);
                 }
               };
 
@@ -708,14 +817,23 @@ const Modal = {
                 searchBoxHistoryOpen();
                 searchBoxCallBack(formDataInfoNode[0]);
               };
-              s('.top-bar-search-box').onblur = () => {
-                if (!hoverHistBox && !hoverInputBox && !isActiveElement(inputSearchBoxId)) {
-                  Modal.removeModal(searchBoxHistoryId);
+
+              const dismissSearchBox = () => {
+                if (unbindDocSearch) {
+                  try {
+                    unbindDocSearch();
+                  } catch (e) {}
                 }
+                Modal.removeModal(searchBoxHistoryId);
+              };
+              s('.top-bar-search-box').onblur = () => {
+                hoverFocusCtl.checkDismiss();
               };
               EventsUI.onClick(`.top-bar-search-box-container`, () => {
                 searchBoxHistoryOpen();
                 searchBoxCallBack(formDataInfoNode[0]);
+                const inputEl = s(`.${inputSearchBoxId}`);
+                if (inputEl && inputEl.focus) inputEl.focus();
               });
 
               const timePressDelay = 100;
@@ -881,6 +999,9 @@ const Modal = {
                   ],
                   eventCallBack: () => {
                     if (s(`.top-bar-search-box`)) {
+                      if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
+                        s(`.main-body-btn-ui-open`).click();
+                      }
                       s(`.top-bar-search-box`).blur();
                       s(`.top-bar-search-box`).focus();
                       s(`.top-bar-search-box`).select();
@@ -897,8 +1018,10 @@ const Modal = {
                 barConfig.buttons.menu.disabled = true;
                 barConfig.buttons.close.disabled = true;
                 const id = 'bottom-bar';
-                if (options && options.homeModals && !options.homeModals.includes(id)) options.homeModals.push(id);
-                else options.homeModals = [id];
+                if (!this.Data[idModal].homeModals) this.Data[idModal].homeModals = [];
+                if (!this.Data[idModal].homeModals.includes(id)) {
+                  this.Data[idModal].homeModals.push(id);
+                }
                 const html = async () => html`
                   <style>
                     .top-bar-search-box-container {
@@ -1015,7 +1138,7 @@ const Modal = {
                   await Modal.onHomeRouterEvent();
                   Object.keys(this.Data[idModal].onHome).map((keyListener) => this.Data[idModal].onHome[keyListener]());
                 });
-                EventsUI.onClick(`.action-btn-app-icon`, () => Modal.onHomeRouterEvent());
+                EventsUI.onClick(`.action-btn-app-icon`, () => s(`.action-btn-home`).click());
                 Keyboard.instanceMultiPressKey({
                   id: 'input-shortcut-global-escape',
                   keys: ['Escape'],
@@ -1026,11 +1149,18 @@ const Modal = {
               }
 
               {
-                ThemeEvents['action-btn-theme'] = () => {
+                ThemeEvents['action-btn-theme'] = async () => {
                   htmls(
                     `.action-btn-theme-render`,
                     html` ${darkTheme ? html` <i class="fas fa-moon"></i>` : html`<i class="far fa-sun"></i>`}`,
                   );
+                  if (s(`.slide-menu-top-bar-fix`)) {
+                    htmls(
+                      `.slide-menu-top-bar-fix`,
+                      html`<a class="a-link-top-banner">${await options.slideMenuTopBarBannerFix()}</a>`,
+                    );
+                    Modal.setTopBannerLink();
+                  }
                 };
                 ThemeEvents['action-btn-theme']();
 
@@ -1048,13 +1178,80 @@ const Modal = {
 
               {
                 htmls(`.action-btn-lang-render`, html` ${s('html').lang}`);
-                EventsUI.onClick(`.action-btn-lang`, () => {
-                  let lang = 'en';
-                  if (s('html').lang === 'en') lang = 'es';
-                  if (s(`.dropdown-option-${lang}`))
-                    DropDown.Tokens['settings-lang'].onClickEvents[`dropdown-option-${lang}`]();
-                  else Translate.renderLang(lang);
-                });
+                // old method
+                // EventsUI.onClick(`.action-btn-lang`, () => {
+                //   let lang = 'en';
+                //   if (s('html').lang === 'en') lang = 'es';
+                //   if (s(`.dropdown-option-${lang}`))
+                //     DropDown.Tokens['settings-lang'].onClickEvents[`dropdown-option-${lang}`]();
+                //   else Translate.renderLang(lang);
+                // });
+
+                // Open lightweight empty modal on language button, with shared dismiss logic
+                EventsUI.onClick(
+                  `.action-btn-lang`,
+                  async () => {
+                    const id = 'action-btn-lang-modal';
+                    if (s(`.${id}`)) {
+                      return s(`.btn-close-${id}`).click();
+                    }
+                    const { barConfig } = await Themes[Css.currentTheme]();
+                    barConfig.buttons.maximize.disabled = true;
+                    barConfig.buttons.minimize.disabled = true;
+                    barConfig.buttons.restore.disabled = true;
+                    barConfig.buttons.menu.disabled = true;
+                    barConfig.buttons.close.disabled = false;
+                    await Modal.Render({
+                      id,
+                      barConfig,
+                      title: html`${renderViewTitle({
+                        icon: html`<i class="fas fa-language mini-title"></i>`,
+                        text: Translate.Render('select lang'),
+                      })}`,
+                      html: async () => html`${await Translate.RenderSetting('action-drop-modal' + id)}`,
+                      titleClass: 'mini-title',
+                      style: {
+                        resize: 'none',
+                        width: '100% !important',
+                        height: '350px !important',
+                        'max-width': '350px !important',
+                        'z-index': 7,
+                      },
+                      dragDisabled: true,
+                      maximize: true,
+                      heightBottomBar: 0,
+                      heightTopBar: originHeightTopBar,
+                      barMode: options.barMode,
+                    });
+
+                    // Move title inside the bar container to align with control buttons
+                    Modal.MoveTitleToBar(id);
+
+                    // Position the language selection modal relative to the language button
+                    Modal.positionRelativeToAnchor({
+                      modalSelector: `.${id}`,
+                      anchorSelector: '.action-btn-lang',
+                      align: 'right',
+                      offset: { x: 0, y: 6 },
+                      autoVertical: true,
+                    });
+
+                    // Hover/focus controller uses the button as input anchor
+                    const hoverFocusCtl = EventsUI.HoverFocusController({
+                      inputSelector: `.action-btn-lang`,
+                      panelSelector: `.${id}`,
+                      onDismiss: () => Modal.removeModal(id),
+                    });
+                    hoverFocusCtl.bind();
+                    const unbindDoc = EventsUI.bindDismissOnDocumentClick({
+                      shouldStay: hoverFocusCtl.shouldStay,
+                      onDismiss: () => Modal.removeModal(id),
+                      anchors: [`.action-btn-lang`, `.${id}`],
+                    });
+                    Modal.Data[id].onCloseListener[`unbind-doc-${id}`] = () => unbindDoc();
+                  },
+                  { context: 'modal', noGate: true, noLoading: true },
+                );
               }
 
               {
@@ -1348,19 +1545,18 @@ const Modal = {
         this.onHomeRouterEvent = async () => {
           for (const keyModal of Object.keys(this.Data)) {
             if (
-              ![idModal, 'main-body-top', 'main-body']
-                .concat(options?.homeModals ? options.homeModals : [])
-                .includes(keyModal)
+              ![idModal, 'main-body-top', 'main-body'].concat(this.Data[idModal]?.homeModals || []).includes(keyModal)
             )
-              s(`.btn-close-${keyModal}`).click();
+              if (s(`.btn-close-${keyModal}`)) s(`.btn-close-${keyModal}`).click();
             backMenuButtonEvent();
           }
-          s(`.btn-close-modal-menu`).click();
+          if (s(`.btn-close-modal-menu`)) s(`.btn-close-modal-menu`).click();
           setPath(getProxyPath());
-          setDocTitle({ ...options.RouterInstance, route: '' });
+          setDocTitle();
         };
         s(`.main-btn-home`).onclick = async () => {
-          await this.onHomeRouterEvent();
+          // await this.onHomeRouterEvent();
+          s(`.action-btn-home`).click();
         };
         EventsUI.onClick(`.btn-icon-menu-back`, backMenuButtonEvent);
         EventsUI.onClick(`.btn-icon-menu-mode`, () => {
@@ -1429,42 +1625,139 @@ const Modal = {
       default:
         break;
     }
+    // Track drag position for consistency
+    let dragPosition = { x: 0, y: 0 };
+
+    // Initialize drag options with proper bounds and smooth transitions
     let dragOptions = {
-      // disabled: true,
-      handle,
-      onDragStart: (data) => {
-        if (!s(`.${idModal}`)) return;
-        // logger.info('Dragging started', data);
-        s(`.${idModal}`).style.transition = null;
+      handle: handle,
+      bounds: {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      },
+      preventDefault: true,
+      position: { x: 0, y: 0 },
+      onDragStart: () => {
+        const modal = s(`.${idModal}`);
+        if (!modal) return false; // Prevent drag if modal not found
+
+        // Store current position
+        const computedStyle = window.getComputedStyle(modal);
+        const matrix = new DOMMatrixReadOnly(computedStyle.transform);
+        dragPosition = {
+          x: matrix.m41 || 0,
+          y: matrix.m42 || 0,
+        };
+
+        modal.style.transition = 'none';
+        modal.style.willChange = 'transform';
+        return true; // Allow drag to start
       },
       onDrag: (data) => {
-        if (!s(`.${idModal}`)) return;
-        // logger.info('Dragging', data);
+        // Update position based on drag delta
+        dragPosition = { x: data.x, y: data.y };
       },
-      onDragEnd: (data) => {
-        if (!s(`.${idModal}`)) return;
-        // logger.info('Dragging stopped', data);
-        s(`.${idModal}`).style.transition = transition;
-        Object.keys(this.Data[idModal].onDragEndListener).map((keyListener) =>
-          this.Data[idModal].onDragEndListener[keyListener](),
-        );
+      onDragEnd: () => {
+        const modal = s(`.${idModal}`);
+        if (!modal) return;
+
+        modal.style.willChange = '';
+        modal.style.transition = transition;
+
+        // Update drag instance with current position
+        if (dragInstance) {
+          dragInstance.updateOptions({
+            position: dragPosition,
+          });
+        }
+
+        // Notify listeners
+        Object.keys(this.Data[idModal].onDragEndListener || {}).forEach((keyListener) => {
+          this.Data[idModal].onDragEndListener[keyListener]?.();
+        });
       },
     };
-    let dragInstance;
-    // new Draggable(s(`.${idModal}`), { disabled: true });
-    const setDragInstance = () => (options?.dragDisabled ? null : new Draggable(s(`.${idModal}`), dragOptions));
+
+    let dragInstance = null;
+
+    // Initialize or update drag instance
+    const setDragInstance = () => {
+      if (options?.dragDisabled) {
+        if (dragInstance) {
+          dragInstance.destroy();
+          dragInstance = null;
+        }
+        return null;
+      }
+
+      const modal = s(`.${idModal}`);
+      if (!modal) {
+        console.warn(`Modal element .${idModal} not found for drag initialization`);
+        return null;
+      }
+
+      // Ensure the modal has position: absolute for proper dragging
+      if (window.getComputedStyle(modal).position !== 'absolute') {
+        modal.style.position = 'absolute';
+      }
+
+      // Clean up existing instance
+      if (dragInstance) {
+        dragInstance.destroy();
+      }
+
+      try {
+        // Create new instance with updated options
+        dragInstance = new Draggable(modal, dragOptions);
+        return dragInstance;
+      } catch (error) {
+        console.error('Failed to initialize draggable:', error);
+        return null;
+      }
+    };
+
+    // Expose method to update drag options
     this.Data[idModal].setDragInstance = (updateDragOptions) => {
-      dragOptions = {
-        ...dragOptions,
-        ...updateDragOptions,
-      };
+      if (updateDragOptions) {
+        dragOptions = { ...dragOptions, ...updateDragOptions };
+      }
       dragInstance = setDragInstance();
       this.Data[idModal].dragInstance = dragInstance;
       this.Data[idModal].dragOptions = dragOptions;
     };
-    s(`.${idModal}`).style.transition = '0.15s';
-    setTimeout(() => (s(`.${idModal}`).style.opacity = '1'));
-    setTimeout(() => (s(`.${idModal}`).style.transition = transition), 150);
+    // Initialize modal with proper transitions
+    const modal = s(`.${idModal}`);
+    if (modal) {
+      // Initial state
+      modal.style.transition = 'opacity 0.15s ease, transform 0.3s ease';
+      modal.style.opacity = '0';
+
+      // Trigger fade-in after a small delay to allow initial render
+      requestAnimationFrame(() => {
+        if (!modal) return;
+        modal.style.opacity = '1';
+
+        // Set final transition after initial animation completes
+        setTimeout(() => {
+          if (modal) {
+            modal.style.transition = transition;
+
+            // Initialize drag after transitions are set
+            if (!options.dragDisabled) {
+              setDragInstance();
+              if (!options.mode) {
+                dragInstance.updateOptions({
+                  position: { x: 0, y: 0 },
+                  disabled: false, // Ensure drag is enabled after restore
+                });
+              }
+            }
+          }
+        }, 150);
+      });
+    }
 
     const btnCloseEvent = () => {
       Object.keys(this.Data[idModal].onCloseListener).map((keyListener) =>
@@ -1480,62 +1773,122 @@ const Modal = {
       setTimeout(() => {
         if (!s(`.${idModal}`)) return;
         this.removeModal(idModal);
-        // Router
-        if (options.route)
-          (() => {
-            let path = window.location.pathname;
-            if (path[path.length - 1] !== '/') path = `${path}/`;
-            let newPath = `${getProxyPath()}`;
-            if (path !== newPath) {
-              for (const subIdModal of Object.keys(this.Data).reverse()) {
-                if (this.Data[subIdModal].options.route) {
-                  newPath = `${newPath}${this.Data[subIdModal].options.route}`;
-                  // console.warn('SET MODAL URI', newPath);
-                  setPath(newPath);
-                  this.setTopModalCallback(subIdModal);
-                  return setDocTitle({ ...options.RouterInstance, route: this.Data[subIdModal].options.route });
-                }
-              }
-              // console.warn('SET MODAL URI', newPath);
-              setPath(`${newPath}${Modal.homeCid ? `?cid=${Modal.homeCid}` : ''}`);
-              return setDocTitle({ ...options.RouterInstance, route: '' });
-            }
-          })();
+        // Handle modal route change
+        if (options.route) {
+          closeModalRouteChangeEvent({
+            route: options.route,
+            RouterInstance: options.RouterInstance,
+            homeCid: Modal.homeCid,
+          });
+        }
       }, 300);
     };
     s(`.btn-close-${idModal}`).onclick = btnCloseEvent;
 
+    // Minimize button handler
     s(`.btn-minimize-${idModal}`).onclick = () => {
-      if (options.slideMenu) delete this.Data[idModal].slideMenu;
-      s(`.${idModal}`).style.transition = '0.3s';
+      const modal = s(`.${idModal}`);
+      if (!modal) return;
+
+      if (options.slideMenu) {
+        delete this.Data[idModal].slideMenu;
+      }
+
+      // Keep drag enabled when minimized
+      if (dragInstance) {
+        dragInstance.updateOptions({ disabled: false });
+      }
+
+      // Set up transition
+      modal.style.transition = 'height 0.3s ease, transform 0.3s ease';
+
+      // Update button states
       s(`.btn-minimize-${idModal}`).style.display = 'none';
       s(`.btn-maximize-${idModal}`).style.display = null;
       s(`.btn-restore-${idModal}`).style.display = null;
-      s(`.${idModal}`).style.height = `${s(`.bar-default-modal-${idModal}`).clientHeight}px`;
-      setTimeout(() => (s(`.${idModal}`).style.transition = transition), 300);
+
+      // Collapse to header height
+      const header = s(`.bar-default-modal-${idModal}`);
+      if (header) {
+        modal.style.height = `${header.clientHeight}px`;
+        modal.style.overflow = 'hidden';
+      }
+
+      // Restore transition after animation
+      setTimeout(() => {
+        if (modal) {
+          modal.style.transition = transition;
+        }
+      }, 300);
     };
+    // Restore button handler
     s(`.btn-restore-${idModal}`).onclick = () => {
-      if (options.slideMenu) delete this.Data[idModal].slideMenu;
-      s(`.${idModal}`).style.transition = '0.3s';
+      const modal = s(`.${idModal}`);
+      if (!modal) return;
+
+      if (options.slideMenu) {
+        delete this.Data[idModal].slideMenu;
+      }
+
+      // Re-enable dragging
+      if (dragInstance) {
+        dragInstance.updateOptions({ disabled: false });
+      }
+
+      // Set up transition
+      modal.style.transition = 'all 0.3s ease';
+
+      // Update button states
       s(`.btn-restore-${idModal}`).style.display = 'none';
       s(`.btn-minimize-${idModal}`).style.display = null;
       s(`.btn-maximize-${idModal}`).style.display = null;
-      s(`.${idModal}`).style.transform = null;
-      s(`.${idModal}`).style.height = null;
-      s(`.${idModal}`).style.width = null;
-      setCenterRestore();
-      s(`.${idModal}`).style.top = top;
-      s(`.${idModal}`).style.left = left;
-      dragInstance = setDragInstance();
-      setTimeout(() => (s(`.${idModal}`).style.transition = transition), 300);
+
+      // Restore original dimensions and position
+      modal.style.transform = '';
+      modal.style.height = '';
+      left = 0;
+      width = 300;
+      modal.style.left = `${left}px`;
+      modal.style.width = `${width}px`;
+      modal.style.overflow = '';
+
+      // Reset drag position
+      dragPosition = { x: 0, y: 0 };
+
+      // Set new position
+      modal.style.transform = `translate(0, 0)`;
+
+      // Adjust top position based on top bar visibility
+      const heightDefaultTopBar = 40; // Default top bar height if not specified
+      s(`.${idModal}`).style.top = s(`.main-body-btn-ui-close`).classList.contains('hide')
+        ? `0px`
+        : `${options.heightTopBar ? options.heightTopBar : heightDefaultTopBar}px`;
+
+      // Re-enable drag after restore
+      if (dragInstance) {
+        dragInstance.updateOptions({
+          position: { x: 0, y: 0 },
+          disabled: false, // Ensure drag is enabled after restore
+        });
+      }
+      setTimeout(() => (s(`.${idModal}`) ? (s(`.${idModal}`).style.transition = transition) : null), 300);
     };
     s(`.btn-maximize-${idModal}`).onclick = () => {
-      s(`.${idModal}`).style.transition = '0.3s';
-      setTimeout(() => (s(`.${idModal}`).style.transition = transition), 300);
+      const modal = s(`.${idModal}`);
+      if (!modal) return;
+
+      // Disable drag when maximizing
+      if (dragInstance) {
+        dragInstance.updateOptions({ disabled: true });
+      }
+
+      modal.style.transition = '0.3s';
+      setTimeout(() => (modal ? (modal.style.transition = transition) : null), 300);
+
       s(`.btn-maximize-${idModal}`).style.display = 'none';
       s(`.btn-restore-${idModal}`).style.display = null;
       s(`.btn-minimize-${idModal}`).style.display = null;
-      s(`.${idModal}`).style.transform = null;
+      modal.style.transform = null;
 
       if (options.slideMenu) {
         const idSlide = this.Data[options.slideMenu]['slide-menu']
@@ -1770,6 +2123,114 @@ const Modal = {
       };
     });
   },
+  // 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
+   * @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 {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({
+    modalSelector,
+    anchorSelector,
+    offset = { x: 0, y: 6 },
+    align = 'right',
+    autoVertical = true,
+    placeAbove,
+  }) {
+    try {
+      const modal = s(modalSelector);
+      const anchor = s(anchorSelector);
+
+      if (!modal || !anchor || !anchor.getBoundingClientRect) return;
+
+      // First, position the modal near its final position but off-screen
+      const arect = anchor.getBoundingClientRect();
+      const vh = window.innerHeight;
+      const vw = window.innerWidth;
+      const safeMargin = 6;
+
+      // Determine vertical position
+      let finalPlaceAbove = placeAbove;
+      if (autoVertical && placeAbove === undefined) {
+        const inBottomBar = anchor.closest && anchor.closest('.bottom-bar');
+        const inTopBar = anchor.closest && anchor.closest('.slide-menu-top-bar');
+
+        if (inBottomBar) finalPlaceAbove = true;
+        else if (inTopBar) finalPlaceAbove = false;
+        else finalPlaceAbove = arect.top > vh / 2; // heuristic fallback
+      }
+
+      // Set initial position (slightly offset from final position)
+      const initialOffset = finalPlaceAbove ? 20 : -20;
+      modal.style.position = 'fixed';
+      modal.style.opacity = '0';
+      modal.style.transition = 'opacity 150ms ease-out, transform 150ms ease-out';
+
+      // Position near the anchor but slightly offset
+      modal.style.top = `${finalPlaceAbove ? arect.top - 40 : arect.bottom + 20}px`;
+      modal.style.left = `${align === 'right' ? arect.right - 200 : arect.left}px`;
+      modal.style.transform = 'translateY(0)';
+
+      // Force reflow to ensure initial styles are applied
+      modal.offsetHeight;
+
+      // Now calculate final position
+      const mrect = modal.getBoundingClientRect();
+
+      // Calculate final top position
+      const top = finalPlaceAbove ? arect.top - mrect.height - offset.y : arect.bottom + offset.y;
+
+      // Calculate final left position based on alignment
+      let left;
+      if (align === 'right') {
+        left = arect.right - mrect.width - offset.x; // align right edges
+      } else {
+        left = arect.left + offset.x; // align left edges
+      }
+
+      // Ensure modal stays within viewport bounds
+      left = Math.max(safeMargin, Math.min(left, vw - mrect.width - safeMargin));
+      const finalTop = Math.max(safeMargin, Math.min(top, vh - mrect.height - safeMargin));
+
+      // Apply final position with smooth transition
+      requestAnimationFrame(() => {
+        modal.style.top = `${Math.round(finalTop)}px`;
+        modal.style.left = `${Math.round(left)}px`;
+        modal.style.opacity = '1';
+      });
+    } catch (e) {
+      console.error('Error positioning modal:', e);
+    }
+  },
+
+  MoveTitleToBar(idModal) {
+    try {
+      const titleEl = s(`.title-modal-${idModal}`);
+      const container = s(`.btn-bar-modal-container-render-${idModal}`);
+      if (!titleEl || !container) return;
+      const titleNode = titleEl.cloneNode(true);
+      titleEl.remove();
+      container.classList.add('in');
+      container.classList.add('fll');
+      container.appendChild(titleNode);
+    } catch (e) {
+      // non-fatal: keep default placement if structure not present
+    }
+  },
+  setTopBannerLink: function () {
+    if (s(`.a-link-top-banner`)) {
+      s(`.a-link-top-banner`).setAttribute('href', `${location.origin}${getProxyPath()}`);
+      EventsUI.onClick(`.a-link-top-banner`, (e) => {
+        e.preventDefault();
+        s(`.action-btn-home`).click();
+      });
+    }
+  },
   headerTitleHeight: 40,
   actionBtnCenter: function () {
     if (!s(`.btn-close-modal-menu`).classList.contains('hide')) {