underpost 2.8.847 → 2.8.851

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

@@ -28,7 +28,7 @@ import { setDocTitle, closeModalRouteChangeEvent, handleModalViewRoute } from '.
 import { NotificationManager } from './NotificationManager.js';
 import { EventsUI } from './EventsUI.js';
 import { Translate } from './Translate.js';
-import { Input } from './Input.js';
+import { Input, isTextInputFocused } from './Input.js';
 import { Validator } from './Validator.js';
 import { DropDown } from './DropDown.js';
 import { Keyboard } from './Keyboard.js';
@@ -166,9 +166,9 @@ const Modal = {
                       height: 100px;
                     }
                     .default-slide-menu-top-bar-fix-logo {
-                      width: 80px;
-                      height: 80px;
-                      padding: 10px;
+                      width: 50px;
+                      height: 50px;
+                      padding: 24px;
                     }
                     .default-slide-menu-top-bar-fix-title-container-text {
                       font-size: 30px;
@@ -186,7 +186,7 @@ const Modal = {
                       `.default-slide-menu-top-bar-fix-title-container`,
                       html`
                         <div class="inl default-slide-menu-top-bar-fix-title-container-text">
-                          ${options.RouterInstance.NameApp}
+                          ${options.RouterInstance.BannerAppTemplate}
                         </div>
                       `,
                     );
@@ -502,7 +502,9 @@ const Modal = {
                       class="abs modal slide-menu-top-bar-fix"
                       style="height: ${options.heightTopBar}px; top: 0px"
                     >
-                      <a class="a-link-top-banner"> ${await options.slideMenuTopBarBannerFix()}</a>
+                      <a class="a-link-top-banner">
+                        <div class="inl">${await options.slideMenuTopBarBannerFix()}</div></a
+                      >
                     </div>`
                   : ''}
               </div>`,
@@ -606,6 +608,7 @@ const Modal = {
                     }),
                   );
                   s(`.search-result-btn-${result.routerId}`).onclick = () => {
+                    if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
                     s(`.html-${searchBoxHistoryId}`).childNodes[currentKeyBoardSearchBoxIndex].classList.remove(
                       `main-btn-menu-active`,
                     );
@@ -619,6 +622,7 @@ const Modal = {
               };
 
               const getResultSearchBox = (validatorData) => {
+                if (!s(`.html-${searchBoxHistoryId}`) || !s(`.html-${searchBoxHistoryId}`).hasChildNodes()) return;
                 const { model, id } = validatorData;
                 switch (model) {
                   case 'search-box':
@@ -711,6 +715,9 @@ const Modal = {
 
               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] &&
@@ -734,6 +741,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,
                 );
@@ -989,6 +1000,7 @@ const Modal = {
                     ['Alt', 'k'],
                   ],
                   eventCallBack: () => {
+                    if (isTextInputFocused()) return;
                     if (s(`.top-bar-search-box`)) {
                       if (s(`.main-body-btn-ui-close`).classList.contains('hide')) {
                         s(`.main-body-btn-ui-open`).click();
@@ -1538,12 +1550,12 @@ const Modal = {
             if (
               ![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();
@@ -2217,7 +2229,6 @@ const Modal = {
     if (s(`.a-link-top-banner`)) {
       s(`.a-link-top-banner`).setAttribute('href', `${location.origin}${getProxyPath()}`);
       EventsUI.onClick(`.a-link-top-banner`, (e) => {
-        if (location.pathname === '/') return location.reload();
         e.preventDefault();
         s(`.action-btn-home`).click();
       });

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

@@ -15,7 +15,7 @@ import { getSrcFromFileData } from './Input.js';
 import { imageShimmer, renderCssAttr } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
-import { closeModalRouteChangeEvents, listenQueryPathInstance, renderTitle, setQueryPath } from './Router.js';
+import { closeModalRouteChangeEvents, listenQueryPathInstance, setQueryPath } from './Router.js';
 
 const PanelForm = {
   Data: {},
@@ -92,7 +92,7 @@ const PanelForm = {
       },
     ];
 
-    const titleIcon = html`<i class="fa-solid fa-quote-left"></i>`;
+    const titleIcon = html`<i class="fa-solid fa-quote-left title-icon-${idPanel}"></i>`;
     const panelRender = async ({ data }) =>
       await Panel.Render({
         idPanel,
@@ -440,7 +440,6 @@ const PanelForm = {
       if (options.route === 'home') Modal.homeCid = newInstance(cid);
       htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
       await getPanelData();
-      if (this.Data[idPanel].data.length === 1) renderTitle(this.Data[idPanel].data[0].title);
       htmls(
         `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
         await panelRender({ data: this.Data[idPanel].data }),

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

@@ -7,7 +7,7 @@ import { LogIn } from './LogIn.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
-import { getQueryParams, s } from './VanillaJs.js';
+import { getProxyPath, getQueryParams, s } from './VanillaJs.js';
 
 const Recover = {
   Event: {},
@@ -80,6 +80,7 @@ const Recover = {
         }
         switch (mode) {
           case 'recover-verify-email': {
+            body.proxyPath = getProxyPath();
             const result = await UserService.post({ id: 'recover-verify-email', body });
             NotificationManager.Push({
               html:

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

@@ -6,28 +6,29 @@ import { Worker } from './Worker.js';
 
 // Router
 
+const RouterEvents = {};
+const closeModalRouteChangeEvents = {};
+
 const logger = loggerFactory(import.meta);
 
-const renderTitle = (title, nameApp) => htmls('title', html`${title} | ${nameApp ?? Worker.RouterInstance.NameApp}`);
-
-const setDocTitle = (options = { Routes: () => {}, route: '', NameApp: '' }) => {
-  const { Routes, route, NameApp } = options;
-  let title = titleFormatted(Routes()[`/${route}`].title);
-  if (Routes()[`/${route}`].upperCase) title = title.toUpperCase();
-  renderTitle(title, NameApp);
-  {
-    const routeId = route === '' ? 'home' : route;
-    if (s(`.main-btn-${routeId}`)) {
-      if (s(`.main-btn-menu-active`)) s(`.main-btn-menu-active`).classList.remove(`main-btn-menu-active`);
-      if (s(`.main-btn-${routeId}`)) s(`.main-btn-${routeId}`).classList.add(`main-btn-menu-active`);
-    }
+const sanitizeRoute = (route) =>
+  !route || route === '/' || route === `\\`
+    ? 'home'
+    : route.toLowerCase().replaceAll('/', '').replaceAll(`\\`, '').replaceAll(' ', '-');
+
+const setDocTitle = (route) => {
+  const _route = sanitizeRoute(route);
+  // logger.warn('setDocTitle', _route);
+  const title = titleFormatted(_route);
+  htmls('title', html`${title}${title.match(Worker.title.toLowerCase()) ? '' : ` | ${Worker.title}`}`);
+  if (s(`.main-btn-${_route}`)) {
+    if (s(`.main-btn-menu-active`)) s(`.main-btn-menu-active`).classList.remove(`main-btn-menu-active`);
+    if (s(`.main-btn-${_route}`)) s(`.main-btn-${_route}`).classList.add(`main-btn-menu-active`);
   }
 };
 
-const RouterEvents = {};
-
-const Router = function (options = { Routes: () => {}, e: new PopStateEvent(), NameApp: '' }) {
-  const { e, Routes, NameApp } = options;
+const Router = function (options = { Routes: () => {}, e: new PopStateEvent() }) {
+  const { e, Routes } = options;
   const proxyPath = getProxyPath();
   let path = window.location.pathname;
   logger.info(options);
@@ -43,7 +44,7 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent(), N
 
     if (path === pushPath) {
       for (const event of Object.keys(RouterEvents)) RouterEvents[event](routerEvent);
-      setDocTitle({ Routes, route, NameApp });
+      setDocTitle(route);
       return Routes()[`/${route}`].render();
     }
   }
@@ -79,7 +80,6 @@ const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
     });
 };
 
-const closeModalRouteChangeEvents = {};
 const triggerCloseModalRouteChangeEvents = (newPath) => {
   console.warn('[closeModalRouteChangeEvent]', newPath);
   for (const event of Object.keys(closeModalRouteChangeEvents)) closeModalRouteChangeEvents[event](newPath);
@@ -99,14 +99,14 @@ const closeModalRouteChangeEvent = (options = {}) => {
         newPath = `${newPath}${Modal.Data[subIdModal].options.route}`;
         triggerCloseModalRouteChangeEvents(newPath);
         setPath(newPath);
+        setDocTitle(newPath);
         Modal.setTopModalCallback(subIdModal);
-        return setDocTitle({ ...RouterInstance, route: Modal.Data[subIdModal].options.route });
       }
     }
     newPath = `${newPath}${homeCid ? `?cid=${homeCid}` : ''}`;
     triggerCloseModalRouteChangeEvents(newPath);
     setPath(newPath);
-    return setDocTitle({ ...RouterInstance, route: '' });
+    setDocTitle(newPath);
   }
 };
 
@@ -121,7 +121,7 @@ const handleModalViewRoute = (options = {}) => {
 
   if (path !== newPath) {
     setPath(newPath);
-    setDocTitle({ ...RouterInstance, route });
+    setDocTitle(newPath);
   }
 };
 
@@ -135,5 +135,4 @@ export {
   closeModalRouteChangeEvent,
   handleModalViewRoute,
   closeModalRouteChangeEvents,
-  renderTitle,
 };

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

@@ -53,6 +53,7 @@ const SignUp = {
           status: result.status,
         });
         if (result.status === 'success') {
+          await Auth.sessionOut();
           await Auth.signUpToken(result);
           s(`.btn-close-${options.idModal}`).click();
         }

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

@@ -21,11 +21,11 @@ const SocketIo = {
   },
   Init: async function (options) {
     if (this.socket) this.socket.disconnect();
-    this.host = getWsBaseUrl({ wsBasePath: '' });
+    this.host = options.host ?? getWsBaseUrl({ wsBasePath: '' });
     logger.info(`ws host:`, this.host);
-    const path = getWsBasePath();
+    const path = typeof options.path === 'string' ? options.path : getWsBasePath();
     const connectOptions = {
-      path,
+      path: path === '/' ? undefined : path,
       // auth: {
       //   token: '',
       // },

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

@@ -31,8 +31,6 @@ VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=bierner
 
 */
 
-// Docs by https://mintlify.com
-
 /**
  * Query selector.
  *
@@ -135,22 +133,56 @@ const copyData = (data) =>
 const pasteData = () => new Promise((resolve) => navigator.clipboard.readText().then((clipText) => resolve(clipText)));
 
 /**
- * The setPath function in JavaScript updates the browser's history with a new path, state, and title.
- * @param path - The `path` parameter is a string that represents the URL path where you want to
- * navigate or update in the browser history. It is the first parameter in the `setPath` function and
- * has a default value of `'/'`.
- * @param stateStorage - The `stateStorage` parameter in the `setPath` function is an object that
- * represents the state object associated with the new history entry. It is used to store data related
- * to the state of the application when navigating to a new path using `history.pushState()`. This data
- * can be accessed later
- * @param title - The `title` parameter in the `setPath` function is a string that represents the
- * title of the new history entry. It is used as the title of the new history entry in the browser's
- * history.
- * @memberof VanillaJS
+ * Normalize a path/URL (ensure leading slash, collapse duplicate slashes,
+ * keep query + hash, remove trailing slash except for root).
+ * Examples:
+ *  - 'a/b' -> '/a/b'
+ *  - '/a//b/' -> '/a/b'
+ *  - 'https://example.com/a/b?q=1#top' -> '/a/b?q=1#top' (origin ignored)
+ *  - '#section' -> '/current/path#section' (resolved relative by new URL)
+ */
+function normalizePath(input) {
+  // ensure string and trim
+  if (typeof input !== 'string') input = String(input ?? '');
+  input = input.trim();
+
+  // empty -> root
+  if (input === '') return '/';
+
+  // Use URL to parse relative or absolute paths relative to current origin
+  let url;
+  try {
+    url = new URL(input, window.location.origin);
+  } catch (e) {
+    // fallback (very rare)
+    input = input.replace(/\s+/g, ''); // remove problematic spaces
+    input = input.replace(/\/+/g, '/'); // collapse multiple '/'
+    if (!input.startsWith('/')) input = '/' + input;
+    if (input.length > 1 && input.endsWith('/')) input = input.slice(0, -1);
+    return input;
+  }
+
+  // Normalize pathname: collapse slashes, ensure leading slash, remove trailing except root
+  let pathname = url.pathname.replace(/\/+/g, '/');
+  if (!pathname.startsWith('/')) pathname = '/' + pathname;
+  if (pathname.length > 1 && pathname.endsWith('/')) pathname = pathname.slice(0, -1);
+
+  // Rebuild: pathname + search + hash
+  return pathname + url.search + url.hash;
+}
+
+/**
+ * Improved setPath: normalizes path and avoids pushState if nothing changes.
  */
 const setPath = (path = '/', stateStorage = {}, title = '') => {
-  if (window.location.pathname === path || window.location.pathname === `${path}/`) return;
-  return history.pushState(stateStorage, title, path);
+  const normalized = normalizePath(path);
+
+  // Compare the full form (pathname + search + hash) with current
+  const currentFull = window.location.pathname + window.location.search + window.location.hash;
+  if (currentFull === normalized) return; // nothing to do
+
+  // pushState: third arg should be a path relative to same origin (we pass normalized)
+  return history.pushState(stateStorage, title, normalized);
 };
 
 /**
@@ -355,7 +387,6 @@ const getBlobFromUint8ArrayFile = (data = [[]], mimetype = 'application/octet-st
  * @memberof VanillaJS
  */
 const getProxyPath = () => {
-  // warning: evaluates headers html source
   let path = location.pathname.split('/')[1] ? `/${location.pathname.split('/')[1]}/` : '/';
   if (window.Routes && path !== '/' && path.slice(0, -1) in window.Routes()) path = '/';
   return path;

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

@@ -12,7 +12,8 @@ const logger = loggerFactory(import.meta);
 const Worker = {
   devMode: () => location.origin.match('localhost') || location.origin.match('127.0.0.1'),
   instance: async function ({ router, render }) {
-    logger.warn('Init');
+    Worker.title = `${s('title').textContent}`;
+    // logger.warn('Init worker', Worker.title);
     window.ononline = async () => {
       logger.warn('ononline');
     };
@@ -81,6 +82,7 @@ const Worker = {
     }
     window.serviceWorkerReady = true;
   },
+
   // Get the current service worker registration.
   getRegistration: async function () {
     return await navigator.serviceWorker.getRegistration();

package/src/client/components/default/CssDefault.js

@@ -1,13 +1,27 @@
+import { subThemeManager } from '../core/Css.js';
+
+const CssCommonDefault = async () => {
+  // use  #4f46e5, #7c3aed);
+  subThemeManager.setDarkTheme('#7c3aed');
+  subThemeManager.setLightTheme('#7c3aed');
+
+  return html``;
+};
+
 const CssDefaultDark = {
   theme: 'default-dark',
   dark: true,
-  render: async () => html` <style></style> `,
+  render: async () => {
+    return (await CssCommonDefault()) + html``;
+  },
 };
 
 const CssDefaultLight = {
   theme: 'default-light',
   dark: false,
-  render: async () => html` <style></style> `,
+  render: async () => {
+    return (await CssCommonDefault()) + html``;
+  },
 };
 
-export { CssDefaultDark, CssDefaultLight };
+export { CssDefaultDark, CssCommonDefault, CssDefaultLight };