underpost 2.8.86 → 2.8.88

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

@@ -2,17 +2,14 @@ import { getId, isValidDate, newInstance } from './CommonJs.js';
 import { LoadingAnimation } from '../core/LoadingAnimation.js';
 import { Validator } from '../core/Validator.js';
 import { Input } from '../core/Input.js';
-import { Responsive } from '../core/Responsive.js';
 import { darkTheme, ThemeEvents } from './Css.js';
-import { append, getDataFromInputFile, getQueryParams, htmls, prepend, s } from './VanillaJs.js';
+import { append, getDataFromInputFile, htmls, s } from './VanillaJs.js';
 import { BtnIcon } from './BtnIcon.js';
 import { Translate } from './Translate.js';
 import { DropDown } from './DropDown.js';
-import { dynamicCol, renderCssAttr } from './Css.js';
+import { dynamicCol } from './Css.js';
 import { EventsUI } from './EventsUI.js';
 import { ToggleSwitch } from './ToggleSwitch.js';
-import { Modal } from './Modal.js';
-import { RouterEvents } from './Router.js';
 import { RichText } from './RichText.js';
 import { loggerFactory } from './Logger.js';
 import { Badge } from './Badge.js';
@@ -117,6 +114,7 @@ const Panel = {
             options.originData().find((d) => d._id === obj._id || d.id === obj.id),
             options.filesData().find((d) => d._id === obj._id || d.id === obj.id),
           );
+          if (options.on.initEdit) await options.on.initEdit({ data: obj });
         });
         s(`.a-${payload._id}`).onclick = async (e) => {
           e.preventDefault();
@@ -470,11 +468,9 @@ const Panel = {
             s(`.${btnSelector}`).classList.remove('hide');
           }
         }
-        setTimeout(() => {
-          s(`.${idPanel}-form-body`).classList.add('hide');
-        });
+        s(`.${idPanel}-form-body`).classList.add('hide');
       };
-      s(`.btn-${idPanel}-add`).onclick = (e) => {
+      s(`.btn-${idPanel}-add`).onclick = async (e) => {
         e.preventDefault();
         // s(`.btn-${idPanel}-clean`).click();
         Panel.Tokens[idPanel].editId = undefined;
@@ -483,16 +479,20 @@ const Panel = {
         s(`.${scrollClassContainer}`).scrollTop = 0;
 
         openPanelForm();
+        if (options.on.initAdd) await options.on.initAdd();
       };
       if (s(`.${scrollClassContainer}`)) s(`.${scrollClassContainer}`).style.overflow = 'auto';
     });
 
     if (data.length > 0) for (const obj of data) render += await renderPanel(obj);
-    else
+    else {
       render += html`<div class="in" style="min-height: 200px">
         <div class="abs center"><i class="fas fa-exclamation-circle"></i> ${Translate.Render(`no-result-found`)}</div>
       </div>`;
 
+      if (options.on.noResultFound) setTimeout(options.on.noResultFound);
+    }
+
     this.Tokens[idPanel] = { idPanel, scrollClassContainer, formData, data, titleKey, subTitleKey, renderPanel };
 
     let customButtonsRender = '';

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

@@ -1,12 +1,6 @@
-import { getCapVariableName, newInstance, random, range, uniqueArray } from './CommonJs.js';
+import { getCapVariableName, newInstance, random, range, timer, uniqueArray } from './CommonJs.js';
 import { marked } from 'marked';
-import {
-  getBlobFromUint8ArrayFile,
-  getDataFromInputFile,
-  getQueryParams,
-  getRawContentFile,
-  htmls,
-} from './VanillaJs.js';
+import { append, getBlobFromUint8ArrayFile, getDataFromInputFile, getRawContentFile, htmls, s } from './VanillaJs.js';
 import { Panel } from './Panel.js';
 import { NotificationManager } from './NotificationManager.js';
 import { DocumentService } from '../../services/document/document.service.js';
@@ -15,7 +9,9 @@ import { getSrcFromFileData } from './Input.js';
 import { imageShimmer, renderCssAttr } from './Css.js';
 import { Translate } from './Translate.js';
 import { Modal } from './Modal.js';
-import { closeModalRouteChangeEvents, listenQueryPathInstance, setQueryPath } from './Router.js';
+import { closeModalRouteChangeEvents, listenQueryPathInstance, setQueryPath, getQueryParams } from './Router.js';
+import { Scroll } from './Scroll.js';
+import { LoadingAnimation } from './LoadingAnimation.js';
 
 const PanelForm = {
   Data: {},
@@ -39,6 +35,10 @@ const PanelForm = {
       originData: [],
       data: [],
       filesData: [],
+      skip: 0,
+      limit: 3, // Load 5 items per page
+      hasMore: true,
+      loading: false,
     };
 
     const formData = [
@@ -138,7 +138,7 @@ const PanelForm = {
               `,
             });
           return await options.fileRender({
-            file: PanelForm.Data[idPanel].filesData.find((f) => f._id === options.data._id).fileId.fileBlob,
+            file: PanelForm.Data[idPanel].filesData.find((f) => f._id === options.data._id)?.fileId?.fileBlob,
             style: {
               overflow: 'auto',
               width: '100%',
@@ -178,6 +178,15 @@ const PanelForm = {
             }
             return { status: 'error' };
           },
+          initAdd: async function () {
+            s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+          },
+          initEdit: async function ({ data }) {
+            s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
+          },
+          noResultFound: async function () {
+            LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
+          },
           add: async function ({ data, editId }) {
             let mdFileId;
             const mdFileName = `${getCapVariableName(data.title)}.md`;
@@ -318,19 +327,36 @@ const PanelForm = {
         },
       });
 
-    const getPanelData = async () => {
+    const getPanelData = async (isLoadMore = false) => {
+      const panelData = PanelForm.Data[idPanel];
+      if (panelData.loading || !panelData.hasMore) return;
+      panelData.loading = true;
+
+      if (!isLoadMore) {
+        // Reset for a fresh load
+        panelData.skip = 0;
+        panelData.hasMore = true;
+      }
+
       const result = await DocumentService.get({
-        id: `public/?tags=${prefixTags.join(',')}${getQueryParams().cid ? `&cid=${getQueryParams().cid}` : ''}`,
+        params: {
+          tags: prefixTags.join(','),
+          ...(getQueryParams().cid && { cid: getQueryParams().cid }),
+          skip: panelData.skip,
+          limit: panelData.limit,
+        },
+        id: 'public/',
       });
 
-      NotificationManager.Push({
-        html: result.status === 'success' ? Translate.Render('success-get-posts') : result.message,
-        status: result.status,
-      });
       if (result.status === 'success') {
-        PanelForm.Data[idPanel].originData = newInstance(result.data);
-        PanelForm.Data[idPanel].filesData = [];
-        PanelForm.Data[idPanel].data = [];
+        if (!isLoadMore) {
+          panelData.originData = [];
+          panelData.filesData = [];
+          panelData.data = [];
+        }
+
+        panelData.originData.push(...newInstance(result.data));
+
         for (const documentObject of result.data) {
           let mdFileId, fileId;
           let mdBlob, fileBlob;
@@ -339,7 +365,6 @@ const PanelForm = {
           {
             const {
               data: [file],
-              status,
             } = await FileService.get({ id: documentObject.mdFileId });
 
             // const ext = file.name.split('.')[file.name.split('.').length - 1];
@@ -350,7 +375,6 @@ const PanelForm = {
           if (documentObject.fileId) {
             const {
               data: [file],
-              status,
             } = await FileService.get({ id: documentObject.fileId._id });
 
             // const ext = file.name.split('.')[file.name.split('.').length - 1];
@@ -359,14 +383,14 @@ const PanelForm = {
             fileId = getSrcFromFileData(file);
           }
 
-          PanelForm.Data[idPanel].filesData.push({
+          panelData.filesData.push({
             id: documentObject._id,
             _id: documentObject._id,
             mdFileId: { mdBlob, mdPlain },
             fileId: { fileBlob, filePlain },
           });
 
-          PanelForm.Data[idPanel].data.push({
+          panelData.data.push({
             id: documentObject._id,
             title: documentObject.title,
             createdAt: documentObject.createdAt,
@@ -378,7 +402,23 @@ const PanelForm = {
             _id: documentObject._id,
           });
         }
+
+        panelData.skip += result.data.length;
+        panelData.hasMore = result.data.length === panelData.limit;
+        if (result.data.length < panelData.limit) {
+          LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
+        }
+      } else {
+        NotificationManager.Push({
+          html: result.message,
+          status: result.status,
+        });
+        panelData.hasMore = false;
       }
+
+      await timer(250);
+
+      panelData.loading = false;
     };
     const renderSrrPanelData = async () =>
       await panelRender({
@@ -426,10 +466,10 @@ const PanelForm = {
     let firsUpdateEvent = false;
     let lastCid;
     let lastUserId;
-    closeModalRouteChangeEvents[idPanel] = (newPath) => {
-      if (newPath.split('?')[0] === '/' && PanelForm.Data[idPanel].data && PanelForm.Data[idPanel].data.length === 0) {
+    closeModalRouteChangeEvents[idPanel] = () => {
+      setTimeout(() => {
         this.Data[idPanel].updatePanel();
-      }
+      });
     };
     this.Data[idPanel].updatePanel = async () => {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
@@ -437,13 +477,60 @@ const PanelForm = {
       if (lastCid === cid && !forceUpdate) return;
       lastUserId = newInstance(Elements.Data.user.main.model.user._id);
       lastCid = cid;
-      if (options.route === 'home') Modal.homeCid = newInstance(cid);
-      htmls(`.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`, await renderSrrPanelData());
+
+      if (cid) {
+        this.Data[idPanel] = {
+          ...this.Data[idPanel],
+          originData: [],
+          data: [],
+          filesData: [],
+          skip: 0,
+          limit: 3, // Load 5 items per page
+          hasMore: true,
+          loading: false,
+        };
+      }
+
+      const containerSelector = `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`;
+      htmls(containerSelector, await renderSrrPanelData());
+
       await getPanelData();
+
       htmls(
-        `.${options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body'}`,
-        await panelRender({ data: this.Data[idPanel].data }),
+        containerSelector,
+        html`
+          <div class="in">${await panelRender({ data: this.Data[idPanel].data })}</div>
+          <div class="in panel-placeholder-bottom panel-placeholder-bottom-${idPanel}"></div>
+        `,
       );
+
+      LoadingAnimation.spinner.play(`.panel-placeholder-bottom-${idPanel}`, 'dual-ring-mini');
+
+      const scrollContainerSelector = `.modal-${options.route}`;
+
+      if (cid) {
+        LoadingAnimation.spinner.stop(`.panel-placeholder-bottom-${idPanel}`);
+        return;
+      }
+      if (this.Data[idPanel].removeScrollEvent) {
+        this.Data[idPanel].removeScrollEvent();
+      }
+      const { removeEvent } = Scroll.setEvent(scrollContainerSelector, async (payload) => {
+        const panelData = PanelForm.Data[idPanel];
+        if (!panelData) return;
+
+        // Infinite scroll: load more items at bottom
+        if (payload.atBottom && panelData.hasMore && !panelData.loading) {
+          const oldDataCount = panelData.data.length;
+          await getPanelData(true); // isLoadMore = true
+          const newItems = panelData.data.slice(oldDataCount);
+          if (newItems.length > 0) {
+            for (const item of newItems) append(`.${idPanel}-render`, await Panel.Tokens[idPanel].renderPanel(item));
+          }
+        }
+      });
+      this.Data[idPanel].removeScrollEvent = removeEvent;
+
       if (!firsUpdateEvent && options.firsUpdateEvent) {
         firsUpdateEvent = true;
         await options.firsUpdateEvent();
@@ -454,15 +541,25 @@ const PanelForm = {
         id: options.parentIdModal ? 'html-' + options.parentIdModal : 'main-body',
         routeId: options.route,
         event: async (path) => {
-          await this.Data[idPanel].updatePanel();
+          PanelForm.Data[idPanel] = {
+            ...PanelForm.Data[idPanel],
+            originData: [],
+            data: [],
+            filesData: [],
+            // skip: 0,
+            limit: 3, // Load 5 items per page
+            hasMore: true,
+            loading: false,
+          };
+          await PanelForm.Data[idPanel].updatePanel();
         },
       });
       if (!options.parentIdModal)
         Modal.Data['modal-menu'].onHome[idPanel] = async () => {
           lastCid = undefined;
           lastUserId = undefined;
-          setQueryPath({ path: options.route, queryPath: '' });
-          await this.Data[idPanel].updatePanel();
+          setQueryPath({ path: options.route, queryPath: options.route === 'home' ? '?' : '' });
+          await PanelForm.Data[idPanel].updatePanel();
         };
     }
 

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

@@ -3,11 +3,11 @@ import { Auth } from './Auth.js';
 import { BtnIcon } from './BtnIcon.js';
 import { EventsUI } from './EventsUI.js';
 import { Input } from './Input.js';
-import { LogIn } from './LogIn.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
-import { getProxyPath, getQueryParams, s } from './VanillaJs.js';
+import { s } from './VanillaJs.js';
+import { getProxyPath, getQueryParams } from './Router.js';
 
 const Recover = {
   Event: {},

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

@@ -1,21 +1,131 @@
+/**
+ * Router module for handling routing in a PWA application.
+ * @module src/client/components/core/Router.js
+ * @namespace PwaRouter
+ */
+
 import { titleFormatted } from './CommonJs.js';
 import { loggerFactory } from './Logger.js';
-import { getProxyPath, getQueryParams, htmls, s, setPath } from './VanillaJs.js';
+import { htmls, s } from './VanillaJs.js';
 import { Modal } from './Modal.js';
 import { Worker } from './Worker.js';
 
-// Router
+const logger = loggerFactory(import.meta, { trace: true });
 
+/**
+ * @type {Object.<string, function>}
+ * @description Holds event listeners for router changes.
+ * @memberof PwaRouter
+ */
 const RouterEvents = {};
+
+/**
+ * @type {string[]}
+ * @description Array of core UI component IDs that should not trigger modal close route changes.
+ * @memberof PwaRouter
+ */
+const coreUI = ['modal-menu', 'main-body', 'main-body-top', 'bottom-bar', 'board-notification'];
+/**
+ * @type {Object.<string, function>}
+ * @description Holds event listeners for route changes that should close a modal.
+ * @memberof PwaRouter
+ */
 const closeModalRouteChangeEvents = {};
 
-const logger = loggerFactory(import.meta);
+/**
+ * Determines the base path for the application, often used for routing within a sub-directory.
+ * It checks the current URL's pathname and `window.Routes` to return the appropriate proxy path.
+ *
+ * @returns {string} The calculated proxy path. Returns `/<first-segment>/` if a segment exists,
+ *          otherwise `/`. If `window.Routes` indicates the path is a root route, it returns `/`.
+ * @memberof PwaRouter
+ */
+const getProxyPath = () => {
+  let path = location.pathname.split('/')[1] ? `/${location.pathname.split('/')[1]}/` : '/';
+  if (window.Routes && path !== '/' && path.slice(0, -1) in window.Routes()) path = '/';
+  return path;
+};
+
+/**
+ * Sets the browser's path using the History API. It sanitizes the path, handles query strings and hashes,
+ * and prevents pushing the same state twice.
+ * @param {string} [path='/'] - The new path to set. Can include query strings and hashes.
+ * @param {object} [options={ removeSearch: false, removeHash: false }] - Options for path manipulation.
+ * @param {boolean} [options.removeSearch=false] - If true, removes the search part of the URL.
+ * @param {boolean} [options.removeHash=false] - If true, removes the hash part of the URL. Defaults to `false`.
+ * @param {object} [stateStorage={}] - State object to associate with the history entry.
+ * @param {string} [title=''] - The title for the new history entry.
+ * @memberof PwaRouter
+ * @returns {void | undefined} Returns `undefined` if the new path is the same as the current path, otherwise `void` (result of `history.pushState`).
+ */
+const setPath = (path = '/', options = { removeSearch: false, removeHash: false }, stateStorage = {}, title = '') => {
+  logger.warn(`Set path input`, `${path}`);
+  if (!path) path = '/';
+
+  let [inputPath, inputSearchHash] = `${path}`.split('?');
+  let [inputSearch, inputHash] = inputSearchHash ? inputSearchHash.split('#') : [];
 
+  let sanitizedPath = (inputPath[0] !== '/' ? `/${inputPath}` : inputPath)
+    .trim()
+    .replaceAll('//', '/')
+    .replaceAll(`\\`, '/');
+
+  if (sanitizedPath.length > 1 && sanitizedPath[sanitizedPath.length - 1] === '/')
+    sanitizedPath = sanitizedPath.slice(0, -1);
+
+  const newFullPath = `${sanitizedPath}${inputSearch && !options.removeSearch ? `?${inputSearch}` : ''}${
+    inputHash && !options.removeHash ? `#${inputHash}` : ''
+  }`;
+  const currentFullPath = `${window.location.pathname}${location.search}${location.hash}`;
+  logger.warn(`Set path output`, {
+    inputPath: inputPath,
+    inputSearch: inputSearch,
+    inputHash: inputHash,
+    sanitizedPath: sanitizedPath,
+    currentLocationSearch: location.search,
+    currentLocationHash: location.hash,
+    currentFullPath,
+    newFullPath,
+  });
+  if (currentFullPath === newFullPath) {
+    logger.warn('Prevent overwriting same path', { currentFullPath, newFullPath });
+    return;
+  }
+  return history.pushState.call(history, stateStorage, title, newFullPath);
+};
+
+/**
+ * Extracts query parameters from the current URL's search string and returns them as an object.
+ * @returns An object containing the query parameters from the current URL is being returned.
+ * @memberof PwaRouter
+ */
+const getQueryParams = () => {
+  const params = new URLSearchParams(window.location.search);
+  let queries = {};
+  for (const param of params) {
+    queries[param[0]] = param[1];
+  }
+  return queries;
+};
+
+/**
+ * Sanitizes a route string for use in CSS classes or other identifiers.
+ * Defaults to 'home' for empty, '/', or '\' routes.
+ * @param {string} route - The route string to sanitize.
+ * @returns {string} The sanitized route string.
+ * @memberof PwaRouter
+ */
 const sanitizeRoute = (route) =>
   !route || route === '/' || route === `\\`
     ? 'home'
     : route.toLowerCase().replaceAll('/', '').replaceAll(`\\`, '').replaceAll(' ', '-');
 
+/**
+ * Sets the document title and updates the active state of the main menu button corresponding to the route.
+ * The title is formatted and appended with the main application title from `Worker.title` if it's not already present.
+ * @param {string} route - The current route string.
+ * @memberof PwaRouter
+ */
 const setDocTitle = (route) => {
   const _route = sanitizeRoute(route);
   // logger.warn('setDocTitle', _route);
@@ -27,6 +137,14 @@ const setDocTitle = (route) => {
   }
 };
 
+/**
+ * Main router function. It matches the current URL path against the provided routes configuration
+ * and renders the corresponding component. It also fires registered router events.
+ * @param {object} [options={ Routes: () => {}, e: new PopStateEvent() }] - The router options.
+ * @param {function} options.Routes - A function that returns the routes object.
+ * @param {PopStateEvent} options.e - The popstate event object.
+ * @memberof PwaRouter
+ */
 const Router = function (options = { Routes: () => {}, e: new PopStateEvent() }) {
   const { e, Routes } = options;
   const proxyPath = getProxyPath();
@@ -50,20 +168,43 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent() })
   }
 };
 
+/**
+ * Initializes the router and sets up the `onpopstate` event listener to handle browser
+ * back/forward navigation.
+ * @param {object} RouterInstance - The router instance configuration, including the `Routes` function.
+ * @memberof PwaRouter
+ */
 const LoadRouter = function (RouterInstance) {
   Router(RouterInstance);
   window.onpopstate = (e) => Router({ ...RouterInstance, e });
 };
 
+/**
+ * Sets the URL path with a specific query parameter, commonly used for content IDs.
+ * This function constructs a new URI based on the proxy path, a given path, and an optional query parameter.
+ * @param {object} [options={ path: '', queryPath: '' }] - The path options.
+ * @param {string} [options.path=''] - The base path segment.
+ * @memberof PwaRouter
+ */
 const setQueryPath = (options = { path: '', queryPath: '' }, queryKey = 'cid') => {
   const { queryPath, path } = options;
   const newUri = `${getProxyPath()}${path === 'home' ? '' : `${path}/`}${
-    typeof queryPath === 'string' ? `?${queryKey}=${queryPath}` : ''
+    typeof queryPath === 'string' && queryPath ? `?${queryKey}=${queryPath}` : ''
   }`;
   const currentUri = `${window.location.pathname}${location.search}`;
-  if (currentUri !== newUri && currentUri !== `${newUri}/`) setPath(newUri);
+  if (currentUri !== newUri && currentUri !== `${newUri}/`) setPath(newUri, {}, '');
 };
 
+/**
+ * Registers a listener for route changes that specifically watches for a `queryKey` parameter
+ * on a matching `routeId`. The provided event callback is triggered with the query parameter's value.
+ * @param {object} options - The listener options.
+ * @param {string} options.id - A unique ID for the listener.
+ * @param {string} options.routeId - The route ID to listen for.
+ * @param {function(string): void} options.event - The callback function to execute with the query path value (or an empty string if not found).
+ * @param {string} [queryKey='cid'] - The query parameter key to look for.
+ * @memberof PwaRouter
+ */
 const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
   RouterEvents[id] = ({ path, pushPath, proxyPath, route }) => {
     if ((route === '' && routeId === 'home') || (route && routeId && route === routeId)) {
@@ -80,38 +221,43 @@ const listenQueryPathInstance = ({ id, routeId, event }, queryKey = 'cid') => {
     });
 };
 
-const triggerCloseModalRouteChangeEvents = (newPath) => {
-  console.warn('[closeModalRouteChangeEvent]', newPath);
-  for (const event of Object.keys(closeModalRouteChangeEvents)) closeModalRouteChangeEvents[event](newPath);
-};
-
+/**
+ * Handles the logic for changing the route when a modal is closed. It determines the next URL
+ * based on the remaining open modals or falls back to a home URL.
+ * @param {object} [options={}] - Options for the modal close event.
+ * @param {string} options.closedId - The ID of the modal that was just closed.
+ * @memberof PwaRouter
+ */
 const closeModalRouteChangeEvent = (options = {}) => {
-  const { route, RouterInstance, homeCid } = options;
-  if (!route) return;
+  logger.warn('closeModalRouteChangeEvent', options);
+  const { closedId } = options;
+  if (!closedId) return;
+  if (coreUI.find((id) => closedId.startsWith(id))) {
+    logger.warn('prevent core ui component close');
+    return;
+  }
 
-  let path = window.location.pathname;
-  if (path[path.length - 1] !== '/') path = `${path}/`;
-  let newPath = `${getProxyPath()}`;
+  const remainingModals = Object.keys(Modal.Data).filter(
+    (id) => id !== closedId && (Modal.Data[id]?.options?.route || Modal.Data[id]?.options?.query),
+  );
 
-  if (path !== newPath) {
-    for (const subIdModal of Object.keys(Modal.Data).reverse()) {
-      if (Modal.Data[subIdModal]?.options?.route) {
-        newPath = `${newPath}${Modal.Data[subIdModal].options.route}`;
-        triggerCloseModalRouteChangeEvents(newPath);
-        setPath(newPath);
-        setDocTitle(newPath);
-        Modal.setTopModalCallback(subIdModal);
-      }
-    }
-    newPath = `${newPath}${homeCid ? `?cid=${homeCid}` : ''}`;
-    triggerCloseModalRouteChangeEvents(newPath);
-    setPath(newPath);
-    setDocTitle(newPath);
-  }
+  const topModalId = remainingModals.reverse().find((id) => Modal.Data[id]);
+
+  for (const event of Object.keys(closeModalRouteChangeEvents)) closeModalRouteChangeEvents[event]();
+  if (topModalId) Modal.setTopModalCallback(topModalId);
+  setPath(`${getProxyPath()}${Modal.Data[topModalId]?.options?.route ?? ''}`);
+  setDocTitle(Modal.Data[topModalId]?.options?.route ?? '');
 };
 
-const handleModalViewRoute = (options = {}) => {
-  const { route, RouterInstance } = options;
+/**
+ * Handles routing for modals that are meant to be displayed as a "view" (e.g., a full-page modal).
+ * It updates the URL to reflect the modal's route.
+ * @param {object} [options={ route: 'home' }] - The options for handling the modal view route.
+ * @param {string} options.route - The route associated with the modal view.
+ * @memberof PwaRouter
+ */
+const handleModalViewRoute = (options = { route: '' }) => {
+  const { route } = options;
   if (!route) return;
 
   let path = window.location.pathname;
@@ -125,14 +271,44 @@ const handleModalViewRoute = (options = {}) => {
   }
 };
 
+/**
+ * Sets or updates query parameters in the URL.
+ * It preserves the existing path, hash, and other query parameters.
+ *
+ * @param {Object.<string, string|number>} newParams - An object of query parameters to set or update.
+ *        If a value is `null` or `undefined`, the parameter will be removed.
+ * @param {object} [options={ replace: true }] - Options for history manipulation.
+ * @param {boolean} [options.replace=true] - If true, uses `history.replaceState` instead of `history.pushState`.
+ * @memberof PwaRouter
+ */
+const setQueryParams = (newParams, options = { replace: true }) => {
+  const url = new URL(window.location.href);
+  Object.entries(newParams).forEach(([key, value]) => {
+    if (value === null || value === undefined) {
+      url.searchParams.delete(key);
+    } else {
+      url.searchParams.set(key, value);
+    }
+  });
+
+  const newPath = url.pathname + url.search + url.hash;
+
+  history.pushState(history.state, '', newPath);
+};
+
 export {
+  RouterEvents,
+  closeModalRouteChangeEvents,
+  coreUI,
   Router,
   setDocTitle,
   LoadRouter,
-  RouterEvents,
   setQueryPath,
   listenQueryPathInstance,
   closeModalRouteChangeEvent,
   handleModalViewRoute,
-  closeModalRouteChangeEvents,
+  getQueryParams,
+  getProxyPath,
+  setPath,
+  setQueryParams,
 };

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

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

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

@@ -1,5 +1,5 @@
 import { loggerFactory } from './Logger.js';
-import { getProxyPath } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 
 // https://peerjs.com/docs/