@underpostnet/underpost 2.97.1 → 2.97.5

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,

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

@@ -34,12 +34,133 @@ const SearchBox = {
    * - search: async (query, context) => Promise<Array<result>>
    * - renderResult: (result, index, context) => string (HTML)
    * - onClick: (result, context) => void
-   * - priority: number (lower = higher priority)
+   * - priority: number (lower number = higher priority)
    * @type {Array<object>}
    * @memberof SearchBoxClient.SearchBox
    */
   providers: [],
 
+  /**
+   * Recent search results manager with localStorage persistence.
+   * Tracks clicked results from all providers (routes and custom).
+   * Maintains order of most-recent-first results across sessions.
+   * @type {object}
+   * @memberof SearchBoxClient.SearchBox
+   */
+  RecentResults: {
+    /**
+     * Storage key for localStorage persistence
+     * @type {string}
+     */
+    storageKey: 'searchbox_recent_results',
+
+    /**
+     * Maximum number of recent results to keep in history
+     * @type {number}
+     */
+    maxResults: 20,
+
+    /**
+     * Get all cached recent results from localStorage
+     * @returns {Array<object>} Array of recent result objects
+     */
+    getAll: function () {
+      try {
+        const stored = localStorage.getItem(this.storageKey);
+        return stored ? JSON.parse(stored) : [];
+      } catch (error) {
+        logger.warn('Error reading search history from localStorage:', error);
+        return [];
+      }
+    },
+
+    /**
+     * Save recent results to localStorage
+     * @param {Array<object>} results - Array of results to save
+     */
+    saveAll: function (results) {
+      try {
+        localStorage.setItem(this.storageKey, JSON.stringify(results.slice(0, this.maxResults)));
+      } catch (error) {
+        logger.warn('Error saving search history to localStorage:', error);
+      }
+    },
+
+    /**
+     * Add a result to recent history (moves to front if duplicate)
+     * Removes duplicates and maintains max size limit.
+     * Only stores serializable data (excludes DOM elements).
+     * @param {object} result - Result object to add (must have id and providerId/routerId)
+     */
+    add: function (result) {
+      if (!result || (!result.id && !result.routerId)) {
+        logger.warn('SearchBox.RecentResults.add: Invalid result, missing id or routerId');
+        return;
+      }
+
+      // Create a clean copy excluding DOM elements (fontAwesomeIcon, imgElement)
+      const cleanResult = {
+        id: result.id,
+        routerId: result.routerId,
+        type: result.type,
+        providerId: result.providerId,
+        title: result.title,
+        subtitle: result.subtitle,
+        tags: result.tags,
+        createdAt: result.createdAt,
+        data: result.data,
+      };
+
+      const recent = this.getAll();
+
+      // Remove duplicate if it exists (based on id and providerId/routerId)
+      const filteredRecent = recent.filter((r) => {
+        if (cleanResult.providerId && r.providerId) {
+          return !(r.id === cleanResult.id && r.providerId === cleanResult.providerId);
+        } else if (cleanResult.routerId && r.routerId) {
+          return r.routerId !== cleanResult.routerId;
+        }
+        return true;
+      });
+
+      // Add new result to front
+      filteredRecent.unshift(cleanResult);
+
+      // Save to localStorage
+      this.saveAll(filteredRecent);
+    },
+
+    /**
+     * Clear all recent results from localStorage
+     */
+    clear: function () {
+      try {
+        localStorage.removeItem(this.storageKey);
+      } catch (error) {
+        logger.warn('Error clearing search history:', error);
+      }
+    },
+
+    /**
+     * Remove a single result from recent history by ID and provider
+     * @param {string} resultId - Result ID to remove
+     * @param {string} [providerId] - Provider ID of the result (optional, for routes use null)
+     */
+    remove: function (resultId, providerId) {
+      const recent = this.getAll();
+      const filtered = recent.filter((r) => {
+        // Match by ID and providerId (or routerId for routes)
+        if (providerId) {
+          return !(r.id === resultId && r.providerId === providerId);
+        } else {
+          // For routes (providerId is null), match by routerId instead
+          return !(r.routerId === resultId);
+        }
+      });
+      this.saveAll(filtered);
+    },
+  },
+
   /**
    * Registers a search provider plugin for extensible search functionality.
    * Replaces any existing provider with the same ID.
@@ -290,24 +411,56 @@ const SearchBox = {
       return;
     }
 
-    let html = '';
+    // Check if this is rendering recently clicked items (not search results)
+    // context.isRecentHistory is set when rendering from history, not from search query
+    const isRecentHistory = context.isRecentHistory === true;
+
+    let htmlContent = '';
     results.forEach((result, index) => {
       const provider = this.providers.find((p) => p.id === result.providerId);
 
+      let resultHtml = '';
       if (result.type === 'route' || !provider) {
         // Default route rendering (backward compatible)
-        html += this.renderRouteResult(result, index, context);
+        resultHtml = this.renderRouteResult(result, index, context);
       } else {
         // Custom provider rendering
-        html += provider.renderResult(result, index, context);
+        resultHtml = provider.renderResult(result, index, context);
+      }
+
+      // Only add delete button for recently clicked items (not search results)
+      if (isRecentHistory) {
+        // Wrapper with relative position for absolute delete button
+        htmlContent += `
+          <div class="search-result-wrapper search-result-history-item" data-result-id="${result.id || result.routerId}" data-provider-id="${result.providerId || 'default-routes'}">
+            ${resultHtml}
+            <button
+              class="search-result-delete-btn"
+              data-result-id="${result.id || result.routerId}"
+              data-provider-id="${result.providerId || 'default-routes'}"
+              title="Remove from history"
+              aria-label="Remove from history"
+            >
+              <i class="fas fa-trash-alt"></i>
+            </button>
+          </div>
+        `;
+      } else {
+        // Search results: no delete button, no wrapper overhead
+        htmlContent += resultHtml;
       }
     });
 
-    container.innerHTML = html;
+    container.innerHTML = htmlContent;
 
     // Attach click handlers
     this.attachClickHandlers(results, containerId, context);
 
+    // Only attach delete handlers for recently clicked items
+    if (isRecentHistory) {
+      this.attachDeleteHandlers(container, results, containerId, context);
+    }
+
     // Call post-render callbacks from providers
     results.forEach((result) => {
       const provider = this.providers.find((p) => p.id === result.providerId);
@@ -317,6 +470,68 @@ const SearchBox = {
     });
   },
 
+  /**
+   * Attaches delete event handlers to result delete buttons within a specific container.
+   * Removes only the clicked result from history with smooth animation feedback.
+   * Only affects delete buttons within the specified container.
+   * @memberof SearchBoxClient.SearchBox
+   * @param {HTMLElement} container - The container element to search within.
+   * @param {Array<object>} results - Array of search results.
+   * @param {string} containerId - Results container element ID or class name.
+   * @param {object} [context={}] - Context object.
+   * @returns {void}
+   */
+  attachDeleteHandlers: function (container, results, containerId, context = {}) {
+    // Only select delete buttons within this specific container
+    const deleteButtons = container.querySelectorAll('.search-result-delete-btn');
+    deleteButtons.forEach((btn) => {
+      btn.addEventListener('click', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        const resultId = btn.getAttribute('data-result-id');
+        const providerId = btn.getAttribute('data-provider-id');
+
+        // Animate removal
+        const wrapper = btn.closest('.search-result-history-item');
+        if (wrapper) {
+          wrapper.classList.add('search-result-removing');
+          setTimeout(() => {
+            // Remove only this specific result from history storage
+            if (providerId === 'default-routes') {
+              this.RecentResults.remove(resultId, null);
+            } else {
+              this.RecentResults.remove(resultId, providerId);
+            }
+
+            // Filter out only the deleted result from the array
+            const remaining = results.filter((r) => {
+              if (providerId === 'default-routes') {
+                // For routes, match by routerId
+                return r.routerId !== resultId;
+              } else {
+                // For providers, match by id and providerId
+                return !(r.id === resultId && r.providerId === providerId);
+              }
+            });
+
+            // Re-render with remaining results (context.isRecentHistory should stay true)
+            if (remaining.length > 0) {
+              this.renderResults(remaining, containerId, context);
+            } else {
+              // If no results left, clear container and hide clear-all button
+              container.innerHTML = '';
+              const clearAllBtn = document.querySelector('.btn-search-history-clear-all');
+              if (clearAllBtn) {
+                clearAllBtn.style.display = 'none';
+              }
+            }
+          }, 200);
+        }
+      });
+    });
+  },
+
   /**
    * Renders a default route search result.
    * Backward compatible with Modal.js search functionality.
@@ -338,10 +553,35 @@ const SearchBox = {
     const imgElement = result.imgElement;
 
     let iconHtml = '';
-    if (imgElement) {
-      iconHtml = imgElement.outerHTML;
-    } else if (fontAwesomeIcon) {
-      iconHtml = fontAwesomeIcon.outerHTML;
+
+    // For route results from history, reconstruct icons from DOM
+    if (!fontAwesomeIcon && !imgElement && routerId) {
+      const routeBtn = s(`.main-btn-${routerId}`);
+      if (routeBtn) {
+        const icon = getAllChildNodes(routeBtn).find((e) => {
+          return e.classList && Array.from(e.classList).find((e) => e.match('fa-') && !e.match('fa-grip-vertical'));
+        });
+        const img = getAllChildNodes(routeBtn).find((e) => {
+          return (
+            e.classList &&
+            Array.from(e.classList).find((e) =>
+              options.searchCustomImgClass ? e.match(options.searchCustomImgClass) : e.match('img-btn-square-menu'),
+            )
+          );
+        });
+        if (img) {
+          iconHtml = img.outerHTML;
+        } else if (icon) {
+          iconHtml = icon.outerHTML;
+        }
+      }
+    } else {
+      // For fresh search results, use provided DOM elements
+      if (imgElement) {
+        iconHtml = imgElement.outerHTML;
+      } else if (fontAwesomeIcon) {
+        iconHtml = fontAwesomeIcon.outerHTML;
+      }
     }
 
     const translatedText = Translate.Render(routerId);
@@ -381,6 +621,9 @@ const SearchBox = {
         e.preventDefault();
         e.stopPropagation();
 
+        // Track result in persistent history for all result types
+        this.RecentResults.add(result);
+
         const provider = this.providers.find((p) => p.id === result.providerId);
 
         if (result.type === 'route') {
@@ -542,6 +785,13 @@ const SearchBox = {
       const trimmedQuery = query ? query.trim() : '';
       const minLength = context.minQueryLength !== undefined ? context.minQueryLength : 1;
 
+      // Show recent results when query is empty
+      if (trimmedQuery.length === 0) {
+        const recentResults = this.RecentResults.getAll();
+        this.renderResults(recentResults, resultsContainerId, context);
+        return;
+      }
+
       // Support single character searches by default (minQueryLength: 1)
       // Can be configured via context.minQueryLength for different use cases
       if (trimmedQuery.length < minLength) {
@@ -665,13 +915,17 @@ const SearchBox = {
         display: flex;
         align-items: center;
         gap: 10px;
-        padding: 8px 10px;
+        padding: 12px 14px;
         margin: 4px 0;
         cursor: pointer;
         border-radius: 4px;
         transition: all 0.15s ease;
         border: 1px solid transparent;
         background: transparent;
+        min-height: 44px;
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 100%;
       }
 
       .search-result-item:hover {
@@ -687,16 +941,19 @@ const SearchBox = {
       }
 
       .search-result-route {
-        padding: 3px;
+        padding: 10px 12px;
         margin: 2px;
         text-align: left;
+        min-height: 40px;
       }
 
       .search-result-icon {
         display: flex;
         align-items: center;
         justify-content: center;
-        min-width: 24px;
+        min-width: 28px;
+        min-height: 28px;
+        font-size: 16px;
         color: ${iconColor} !important;
       }
 
@@ -723,8 +980,9 @@ const SearchBox = {
 
       .search-result-title {
         font-size: 14px;
-        font-weight: normal;
+        font-weight: 500;
         margin-bottom: 2px;
+        line-height: 1.4;
       }
 
       .search-result-subtitle {
@@ -761,6 +1019,64 @@ const SearchBox = {
         border-color: ${activeBorder};
         color: ${hasThemeColor ? (darkTheme ? lightenHex(themeColor, 0.8) : darkenHex(themeColor, 0.4)) : tagColor};
       }
+
+      /* Wrapper for history items with delete button - maintains original width */
+      .search-result-history-item {
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        max-width: 100%;
+      }
+
+      .search-result-history-item .search-result-item {
+        width: 100%;
+        box-sizing: border-box;
+        padding-right: 30px; /* Make room for delete button */
+      }
+
+      /* Delete button - absolute positioned in top-right corner */
+      .search-result-delete-btn {
+        position: absolute;
+        top: 4px;
+        right: 4px;
+        background: none;
+        border: none;
+        color: #999;
+        cursor: pointer;
+        padding: 3px 6px;
+        border-radius: 3px;
+        transition: all 0.2s ease;
+        opacity: 0;
+        width: 22px;
+        height: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 10px;
+        z-index: 5;
+      }
+
+      .search-result-history-item:hover .search-result-delete-btn {
+        opacity: 1;
+        color: ${darkTheme ? '#ff8a8a' : '#e53935'};
+        background: ${darkTheme ? 'rgba(255, 107, 107, 0.2)' : 'rgba(211, 47, 47, 0.15)'};
+      }
+
+      .search-result-delete-btn:hover {
+        background: ${darkTheme ? 'rgba(255, 107, 107, 0.35)' : 'rgba(211, 47, 47, 0.25)'};
+        transform: scale(1.1);
+      }
+
+      .search-result-delete-btn:active {
+        transform: scale(0.95);
+      }
+
+      /* Animation for removal */
+      .search-result-history-item.search-result-removing {
+        opacity: 0;
+        transform: translateX(20px);
+        transition: all 0.2s ease;
+      }
     `;
   },