@underpostnet/underpost 2.97.1 → 2.98.0

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

@@ -46,13 +46,21 @@ const Responsive = {
     // alternative option
     // this.Observer = new ResizeObserver(this.resizeCallback);
     // this.Observer.observe(document.documentElement);
-    screen.orientation.addEventListener('change', (event) => {
-      const type = event.target.type; // landscape-primary | portrait-primary
-      const angle = event.target.angle; // 90 degrees.
-      logger.info(`ScreenOrientation change: ${type}, ${angle} degrees.`);
-      setTimeout(() => window.onresize({}, true));
-      Responsive.triggerEventsOrientation();
-    });
+
+    // Check if screen.orientation is available before adding event listener
+    if (
+      typeof screen !== 'undefined' &&
+      screen.orientation &&
+      typeof screen.orientation.addEventListener === 'function'
+    ) {
+      screen.orientation.addEventListener('change', (event) => {
+        const type = event.target.type; // landscape-primary | portrait-primary
+        const angle = event.target.angle; // 90 degrees.
+        logger.info(`ScreenOrientation change: ${type}, ${angle} degrees.`);
+        setTimeout(() => window.onresize({}, true));
+        Responsive.triggerEventsOrientation();
+      });
+    }
     Responsive.matchMediaOrientationInstance = matchMedia('screen and (orientation:portrait)');
 
     Responsive.matchMediaOrientationInstance.onchange = (e) => {

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

@@ -55,17 +55,24 @@ const getProxyPath = () => {
 
 /**
  * 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.
+ * and prevents pushing the same state twice unless forced or using replace mode.
  * @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 {object} [options={ removeSearch: false, removeHash: false, replace: false, force: 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 {boolean} [options.replace=false] - If true, uses replaceState instead of pushState.
+ * @param {boolean} [options.force=false] - If true, allows navigation to the same path (useful for query param changes).
  * @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`).
+ * @returns {void | undefined} Returns `undefined` if the new path is the same as the current path and not forced, otherwise `void` (result of `history.pushState` or `history.replaceState`).
  */
-const setPath = (path = '/', options = { removeSearch: false, removeHash: false }, stateStorage = {}, title = '') => {
+const setPath = (
+  path = '/',
+  options = { removeSearch: false, removeHash: false, replace: false, force: false },
+  stateStorage = {},
+  title = '',
+) => {
   // logger.warn(`Set path input`, `${path}`);
   if (!path) path = '/';
 
@@ -94,11 +101,16 @@ const setPath = (path = '/', options = { removeSearch: false, removeHash: false
   //   currentFullPath,
   //   newFullPath,
   // });
-  if (currentFullPath === newFullPath) {
+  if (currentFullPath === newFullPath && !options.force) {
     // logger.warn('Prevent overwriting same path', { currentFullPath, newFullPath });
     return;
   }
-  return history.pushState.call(history, stateStorage, title, newFullPath);
+
+  if (options.replace) {
+    return history.replaceState.call(history, stateStorage, title, newFullPath);
+  } else {
+    return history.pushState.call(history, stateStorage, title, newFullPath);
+  }
 };
 
 /**
@@ -139,13 +151,15 @@ const sanitizeRoute = (route) =>
  * @memberof PwaRouter
  */
 const setDocTitle = (route) => {
-  const _route = sanitizeRoute(route);
+  let _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}`)) {
+
+  const btnSelector = _route === 'u' ? 'public-profile' : _route;
+  if (s(`.main-btn-${btnSelector}`)) {
     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`);
+    if (s(`.main-btn-${btnSelector}`)) s(`.main-btn-${btnSelector}`).classList.add(`main-btn-menu-active`);
   }
 };
 
@@ -168,11 +182,19 @@ const Router = function (options = { Routes: () => {}, e: new PopStateEvent() })
     let pushPath = `${proxyPath}${route}`;
 
     if (path[path.length - 1] !== '/') path = `${path}/`;
+    // Handle clean profile URLs: match /u/username with /u route
+    let matchPath = path;
+    if (route === 'u' && path.startsWith(`${proxyPath}u/`) && path !== `${proxyPath}u/`) {
+      handleCleanProfileUrl(path);
+      matchPath = `${proxyPath}u/`;
+    }
+
+    if (matchPath[matchPath.length - 1] !== '/') matchPath = `${matchPath}/`;
     if (pushPath[pushPath.length - 1] !== '/') pushPath = `${pushPath}/`;
 
-    const routerEvent = { path, pushPath, route };
+    const routerEvent = { path: matchPath, pushPath, route };
 
-    if (path === pushPath) {
+    if (matchPath === pushPath) {
       for (const event of Object.keys(RouterEvents)) RouterEvents[event](routerEvent);
       subMenuHandler(Object.keys(Routes()), route);
       setDocTitle(route);
@@ -206,15 +228,81 @@ const LoadRouter = function (RouterInstance) {
  * 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.
+ * @param {string} [options.queryPath=''] - The query parameter value.
+ * @param {string} [queryKey='cid'] - The query parameter key.
  * @memberof PwaRouter
  */
-const setQueryPath = (options = { path: '', queryPath: '' }, queryKey = 'cid') => {
+const setQueryPath = (options = { path: '', queryPath: '' }, queryKey = 'cid', navOptions = {}) => {
   const { queryPath, path } = options;
-  const newUri = `${getProxyPath()}${path === 'home' ? '' : `${path}/`}${
+  const { replace = false } = navOptions;
+  const newUri = `${getProxyPath()}${path === 'home' ? '' : `${path}`}${
     typeof queryPath === 'string' && queryPath ? `?${queryKey}=${queryPath}` : ''
   }`;
   const currentUri = `${window.location.pathname}${location.search}`;
-  if (currentUri !== newUri && currentUri !== `${newUri}/`) setPath(newUri, {}, '');
+
+  // For query parameter changes on the same path, force the navigation to ensure proper history
+  const isSamePath = window.location.pathname === new URL(newUri, window.location.origin).pathname;
+  const isDifferentQuery = window.location.search !== new URL(newUri, window.location.origin).search;
+  const shouldForce = isSamePath && isDifferentQuery;
+
+  if (currentUri !== newUri && currentUri !== `${newUri}/`) {
+    setPath(newUri, { force: shouldForce, replace }, '');
+  }
+};
+
+/**
+ * Extracts username from clean public profile URLs like /u/username.
+ * @param {string} [pathname] - The pathname to extract from (defaults to current pathname).
+ * @returns {string|null} The username if found, null otherwise.
+ * @memberof PwaRouter
+ */
+const extractUsernameFromPath = (pathname = window.location.pathname) => {
+  const proxyPath = getProxyPath();
+  const cleanPathPrefix = `${proxyPath}u/`.replace(/\/+/g, '/');
+
+  if (pathname.startsWith(cleanPathPrefix)) {
+    const username = pathname.slice(cleanPathPrefix.length).split('/')[0];
+    return username || null;
+  }
+  return null;
+};
+
+/**
+ * Handles direct navigation to clean public profile URLs.
+ * Converts clean URLs like /u/username to internal query format for SPA.
+ * @param {string} [pathname] - The pathname to handle (defaults to current pathname).
+ * @returns {boolean} True if this was a public profile URL that was handled.
+ * @memberof PwaRouter
+ */
+const handleCleanProfileUrl = (pathname = window.location.pathname) => {
+  const username = extractUsernameFromPath(pathname);
+  if (username) {
+    // Convert clean URL to internal query format for data fetching
+    // Don't modify history - just return the username for the caller to use
+    return username;
+  }
+  return null;
+};
+
+/**
+ * Navigates to a public profile URL without adding intermediate query URLs to history.
+ * This ensures clean back/forward navigation between profiles.
+ * @param {string} username - The username to navigate to.
+ * @param {object} [options={}] - Navigation options.
+ * @param {boolean} [options.replace=false] - If true, replaces current history entry instead of pushing.
+ * @memberof PwaRouter
+ */
+const navigateToProfile = (username, options = {}) => {
+  const { replace = false } = options;
+  if (!username) return;
+
+  const cleanPath = `${getProxyPath()}u/${username}`;
+  const currentPath = window.location.pathname;
+
+  // If we're already on this profile's clean URL, no navigation needed
+  if (currentPath === cleanPath) return;
+  // Navigate directly to clean URL, avoiding intermediate ?cid= URLs in history
+  setPath(cleanPath, { replace });
 };
 
 /**
@@ -304,7 +392,12 @@ const handleModalViewRoute = (options = { RouterInstance: { Routes: () => {} },
   const newPath = `${proxyPath}${route}`;
   if (RouterInstance && RouterInstance.Routes) subMenuHandler(Object.keys(RouterInstance.Routes()), route);
 
-  if (path !== newPath) {
+  // Check if we're already on this route or a sub-path of it (e.g., /u/username for route 'u')
+  // Don't push to history if already on the route or its sub-path
+  const routeBasePath = `${proxyPath}${route}`;
+  const isOnRouteOrSubPath = path === newPath || path.startsWith(`${routeBasePath}/`);
+
+  if (!isOnRouteOrSubPath) {
     setPath(newPath);
     setDocTitle(newPath);
   }
@@ -331,6 +424,12 @@ const setQueryParams = (newParams, options = { replace: true }) => {
   });
 
   const newPath = url.pathname + url.search + url.hash;
+  const currentPath = window.location.pathname + window.location.search + window.location.hash;
+
+  // Only update history and trigger listeners if the URL actually changed
+  if (newPath === currentPath) {
+    return;
+  }
 
   if (options.replace) {
     history.replaceState(history.state, '', newPath);
@@ -348,12 +447,15 @@ const setQueryParams = (newParams, options = { replace: true }) => {
 
 export {
   RouterEvents,
+  navigateToProfile,
   closeModalRouteChangeEvents,
   coreUI,
   Router,
   setDocTitle,
   LoadRouter,
   setQueryPath,
+  extractUsernameFromPath,
+  handleCleanProfileUrl,
   listenQueryPathInstance,
   closeModalRouteChangeEvent,
   handleModalViewRoute,