underpost 3.2.8 → 3.2.10

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

@@ -255,9 +255,11 @@ class Auth {
    * @returns {Promise<object>} A promise resolving to the newly created guest session data.
    */
   async sessionOut() {
-    // 1. End User Session
+    // 1. End User Session — skip the network call when there is no active user session
+    // (avoids a wasted DELETE round-trip for guests / new visitors)
+    const hasUserSession = !!GuestService.getUserToken();
     try {
-      const result = await UserService.delete({ id: 'logout' });
+      const result = hasUserSession ? await UserService.delete({ id: 'logout' }) : null;
       SearchBox.RecentResults.clear();
       this.deleteToken();
       if (this.#refreshTimeout) {
@@ -267,7 +269,7 @@ class Auth {
       this.renderGuestUi();
       // Reset user data in the LogIn state/model
       LogIn.Scope.user.main.model.user = {};
-      await LogOut.Trigger(result);
+      if (result) await LogOut.Trigger(result);
     } catch (error) {
       logger.error('Error during user logout:', error);
     }
@@ -279,8 +281,16 @@ class Auth {
 
       if (result.status === 'success' && result.data.token) {
         this.setGuestToken(result.data.token);
-        // Recursively call sessionIn to complete the guest login process (UI update, etc.)
-        return await this.sessionIn();
+        // Use the POST response data directly — avoids a redundant GET /user/auth
+        // round-trip that would otherwise re-verify the token we just received.
+        await GuestService.setMeta('guest-session', {
+          role: result.data.user?.role,
+          userId: result.data.user?._id,
+        });
+        LogIn.Scope.user.main.model.user = {};
+        await LogIn.Trigger(result.data);
+        await Account.updateForm(result.data.user);
+        return result.data;
       } else {
         logger.error('Failed to get a new guest token.');
         return { user: UserMock.default };
@@ -309,6 +319,10 @@ class Auth {
       // Close any open login/signup modals
       if (s(`.modal-log-in`)) s(`.btn-close-modal-log-in`).click();
       if (s(`.modal-sign-up`)) s(`.btn-close-modal-sign-up`).click();
+      if (!s(`.main-body-btn-ui-open`).classList.contains('hide'))
+        s(`.main-body-btn-ui-open`).click();
+      if (!s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide'))
+        s(`.main-body-btn-ui-bar-custom-open`).click();
     });
   }
 

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

@@ -1,9 +1,7 @@
-import { Badge } from './Badge.js';
-import { BtnIcon } from './BtnIcon.js';
-import { Css, darkTheme, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
-import { buildBadgeToolTipMenuOption, Modal, renderViewTitle } from './Modal.js';
+import { Css, darkTheme, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
+import { Modal, renderViewTitle } from './Modal.js';
 import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
-import { htmls, s, sIframe } from './VanillaJs.js';
+import { s, sIframe } from './VanillaJs.js';
 // https://mintlify.com/docs/quickstart
 class Docs {
   static async RenderModal(type) {
@@ -289,41 +287,15 @@ class Docs {
         },
       });
     });
-    let docMenuRender = '';
+    // Register theme events for items that have them (Docs-specific concern)
     for (const docData of Docs.Data) {
       if (docData.themeEvent) {
         ThemeEvents[`doc-icon-${docData.type}`] = docData.themeEvent;
         setTimeout(ThemeEvents[`doc-icon-${docData.type}`]);
       }
-      let tabHref, style, labelStyle;
-      switch (docData.type) {
-        case 'repo':
-        case 'coverage-link':
-          style = renderCssAttr({ style: { height: '45px' } });
-          labelStyle = renderCssAttr({ style: { top: '8px', left: '9px' } });
-          break;
-        default:
-          break;
-      }
-      tabHref = docData.url();
-      const subMenuIcon =
-        options.subMenuIcon && typeof options.subMenuIcon === 'function'
-          ? options.subMenuIcon(docData.type)
-          : docData.icon;
-      docMenuRender += html`
-        ${await BtnIcon.instance({
-          class: `in wfa main-btn-menu submenu-btn btn-docs btn-docs-${docData.type}`,
-          label: html`<span class="inl menu-btn-icon">${subMenuIcon}</span
-            ><span class="menu-label-text menu-label-text-docs"> ${docData.text} </span>`,
-          tabHref,
-          tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption(docData.text, 'right')),
-          useMenuBtn: true,
-        })}
-      `;
     }
-    // s(`.menu-btn-container-children`).classList.remove('hide');
-    // htmls(`.nav-path-display-${'modal-menu'}`, location.pathname);
-    htmls('.menu-btn-container-children-docs', docMenuRender);
+    // Build submenu items and populate — submenu system is owned by Modal
+    Modal.subMenuPopulate('docs', await Modal.buildSubMenuItemsHtml('docs', Docs.Data, options));
     {
       const docsData = [
         {

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

@@ -469,12 +469,12 @@ class FileExplorer {
       async init(params) {
         console.log('LoadFileActionsRenderer created', params);
         // params.data._id
-        FileExplorer.eGui = document.createElement('div');
+        this.eGui = document.createElement('div');
         const isPublic = params.data.isPublic;
         const toggleId = `toggle-public-${params.data._id}`;
         const hasGenericFile = !!params.data.hasGenericFile;
         const hasMdFile = !!params.data.hasMdFile;
-        FileExplorer.eGui.innerHTML = html`
+        this.eGui.innerHTML = html`
           <div class="fl">
             ${await BtnIcon.instance({
               class: `in fll management-table-btn-mini btn-file-download-${params.data._id}${!hasGenericFile ? ' btn-disabled' : ''}`,
@@ -981,7 +981,7 @@ class FileExplorer {
         });
       }
       getGui() {
-        return FileExplorer.eGui;
+        return this.eGui;
       }
       refresh(params) {
         console.log('LoadFileActionsRenderer refreshed', params);
@@ -994,8 +994,8 @@ class FileExplorer {
         console.log('LoadFolderActionsRenderer created', params);
         // params.data._id
         const id = params.data.locationId;
-        FileExplorer.eGui = document.createElement('div');
-        FileExplorer.eGui.innerHTML = html`
+        this.eGui = document.createElement('div');
+        this.eGui.innerHTML = html`
           <div class="fl">
             ${await BtnIcon.instance({
               class: `in fll management-table-btn-mini btn-folder-delete-${id}`,
@@ -1058,7 +1058,7 @@ class FileExplorer {
         });
       }
       getGui() {
-        return FileExplorer.eGui;
+        return this.eGui;
       }
       refresh(params) {
         console.log('LoadFolderActionsRenderer refreshed', params);

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

@@ -1789,6 +1789,12 @@ class Modal {
             if (options.onCollapseMenu) options.onCollapseMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.add('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.add('hide');
+            // Shrink any already-open submenu containers to icon-only width
+            Object.keys(Modal.subMenuBtnClass).forEach((subMenuId) => {
+              const container = s(`.menu-btn-container-children-${subMenuId}`);
+              if (container && container.style.height && container.style.height !== '0px')
+                container.style.width = `${collapseSlideMenuWidth}px`;
+            });
             Object.keys(this.Data[idModal].onCollapseMenuListener).map((keyListener) =>
               this.Data[idModal].onCollapseMenuListener[keyListener](),
             );
@@ -1806,6 +1812,12 @@ class Modal {
             if (options.onExtendMenu) options.onExtendMenu();
             s(`.sub-menu-title-container-${'modal-menu'}`).classList.remove('hide');
             s(`.nav-path-container-${'modal-menu'}`).classList.remove('hide');
+            // Expand any already-open submenu containers back to full width
+            Object.keys(Modal.subMenuBtnClass).forEach((subMenuId) => {
+              const container = s(`.menu-btn-container-children-${subMenuId}`);
+              if (container && container.style.height && container.style.height !== '0px')
+                container.style.width = `${originSlideMenuWidth}px`;
+            });
             Object.keys(this.Data[idModal].onExtendMenuListener).map((keyListener) =>
               this.Data[idModal].onExtendMenuListener[keyListener](),
             );
@@ -2464,6 +2476,52 @@ class Modal {
     }
   };
 
+  /**
+   * Builds submenu item HTML using the canonical BtnIcon pattern.
+   * Centralises the item-rendering contract so individual submenu owners (e.g. Docs)
+   * only need to supply data — not layout concerns.
+   * @param {string} subMenuId - Submenu identifier (e.g. 'docs')
+   * @param {Array<{type:string, icon:string, text:string, url:function|string}>} items
+   * @param {Object} [options]
+   * @param {function} [options.subMenuIcon] - Optional icon override per item type
+   * @returns {Promise<string>} Rendered HTML string
+   */
+  static buildSubMenuItemsHtml = async (subMenuId, items = [], options = {}) => {
+    let result = '';
+    const _menuMode = Modal.Data['modal-menu']?.options?.mode;
+    const _tooltipSide = options.tooltipSide || (_menuMode === 'slide-menu-right' ? 'right' : 'left');
+    for (const item of items) {
+      const tabHref = typeof item.url === 'function' ? item.url() : item.url || '';
+      const icon =
+        options.subMenuIcon && typeof options.subMenuIcon === 'function' ? options.subMenuIcon(item.type) : item.icon;
+      result += html`${await BtnIcon.instance({
+        class: `in wfa main-btn-menu submenu-btn btn-${subMenuId} btn-${subMenuId}-${item.type}`,
+        label: html`<span class="inl menu-btn-icon">${icon}</span
+          ><span class="menu-label-text menu-label-text-${subMenuId}"> ${item.text} </span>`,
+        tabHref,
+        tooltipHtml: await Badge.instance(buildBadgeToolTipMenuOption(item.text, _tooltipSide)),
+        useMenuBtn: true,
+      })} `;
+    }
+    return result;
+  };
+
+  /**
+   * Injects pre-built submenu item HTML into the submenu container and syncs
+   * the collapse state so labels are hidden when the menu is icon-only.
+   * @param {string} subMenuId
+   * @param {string} itemsHtml
+   */
+  static subMenuPopulate = (subMenuId, itemsHtml) => {
+    htmls(`.menu-btn-container-children-${subMenuId}`, itemsHtml);
+    const _menuMode = Modal.Data['modal-menu']?.options?.mode;
+    const _collapseIndicatorClass =
+      _menuMode === 'slide-menu-right' ? '.btn-icon-menu-mode-left' : '.btn-icon-menu-mode-right';
+    if (s(_collapseIndicatorClass) && !s(_collapseIndicatorClass).classList.contains('hide')) {
+      sa(`.menu-label-text-${subMenuId}`).forEach((el) => el.classList.add('hide'));
+    }
+  };
+
   // Move modal title element into the bar's render container so it aligns with control buttons
   /**
    * Position a modal relative to an anchor element.
@@ -2769,9 +2827,14 @@ const subMenuRender = async (subMenuId) => {
     setTimeout(() => {
       Modal.menuTextLabelAnimation('modal-menu', subMenuId);
     });
-    // Open animation
+    // Open animation — match the current menu width (collapsed = 50px, extended = 320px)
+    const _menuMode = Modal.Data['modal-menu']?.options?.mode;
+    const _collapseIndicatorClass =
+      _menuMode === 'slide-menu-right' ? '.btn-icon-menu-mode-left' : '.btn-icon-menu-mode-right';
+    const _isMenuCollapsed = s(_collapseIndicatorClass) && !s(_collapseIndicatorClass).classList.contains('hide');
+    const _menuContainerWidth = _isMenuCollapsed ? 50 : 320;
     setTimeout(top, 360);
-    menuContainer.style.width = '320px';
+    menuContainer.style.width = `${_menuContainerWidth}px`;
     menuContainer.style.overflow = null;
     menuContainer.style.height = '0px';
     menuContainer.style.height = `${_hBtn * 6}px`;

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

@@ -73,7 +73,7 @@ class PanelForm {
       parentIdModal: undefined,
       route: 'home',
       htmlFormHeader: async () => '',
-      firsUpdateEvent: async () => {},
+      firsUpdateEvent: async () => { },
       share: {
         copyLink: false,
         copySourceMd: false,
@@ -196,12 +196,12 @@ class PanelForm {
               <img
                 class="abs center"
                 style="${renderCssAttr({
-                  style: {
-                    width: '100px',
-                    height: '100px',
-                    opacity: 0.2,
-                  },
-                })}"
+              style: {
+                width: '100px',
+                height: '100px',
+                opacity: 0.2,
+              },
+            })}"
                 src="${defaultUrlImage}"
               />
             `,
@@ -332,16 +332,10 @@ class PanelForm {
             }, 50);
           },
           initEdit: async function ({ data }) {
-            // Clear file input when entering edit mode
-            const fileFormData = formData.find((f) => f.inputType === 'file');
-            if (fileFormData && s(`.${fileFormData.id}`)) {
-              s(`.${fileFormData.id}`).value = '';
-              s(`.${fileFormData.id}`).inputFiles = null;
-              htmls(
-                `.file-name-render-${fileFormData.id}`,
-                `<div class="abs center"><i style="font-size: 25px" class="fa-solid fa-cloud"></i></div>`,
-              );
-            }
+            // Do NOT clear the file input here - the file should remain as-is when entering edit mode.
+            // If user wants to remove the file, they use the "clean file" button.
+            // If user wants to replace the file, they select a new file.
+            // Unconditionally clearing the file here would cause the server to receive fileId: null on save.
             setTimeout(() => {
               s(`.modal-${options.route}`).scrollTo({ top: 0, behavior: 'smooth' });
             }, 50);
@@ -388,15 +382,15 @@ class PanelForm {
             // It will be filtered from the tags array to keep visibility control separate from content tags
             const tags = data.tags
               ? uniqueArray(
-                  data.tags
-                    .replaceAll('/', ',')
-                    .replaceAll('-', ',')
-                    .replaceAll(' ', ',')
-                    .split(',')
-                    .map((t) => t.trim())
-                    .filter((t) => t)
-                    .concat(prefixTags),
-                )
+                data.tags
+                  .replaceAll('/', ',')
+                  .replaceAll('-', ',')
+                  .replaceAll(' ', ',')
+                  .split(',')
+                  .map((t) => t.trim())
+                  .filter((t) => t)
+                  .concat(prefixTags),
+              )
               : prefixTags;
             let originObj, originFileObj, indexOriginObj;
             if (editId) {
@@ -434,7 +428,17 @@ class PanelForm {
             for (const file of inputFiles) {
               indexFormDoc++;
               let fileId = undefined; // Reset for each iteration - only set if user uploaded a file
+              // Track whether the file input was explicitly cleared (null) vs never had a file (undefined)
+              // In edit mode, null means user cleared the file - we need to tell server to remove it
+              const isFileCleared = data.fileId === null && editId;
               await (async () => {
+                // When file is null and not the first iteration or not in edit mode, skip upload
+                if (!file && !isFileCleared) return;
+                // When user cleared file in edit mode, set fileId=null so server removes the reference
+                if (isFileCleared) {
+                  fileId = null;
+                  return;
+                }
                 const body = new FormData();
                 // Only append md file if it was created (has content)
                 if (md) body.append('md', md);
@@ -485,8 +489,8 @@ class PanelForm {
                 message: documentMessage,
                 data: documentData,
               } = originObj && indexFormDoc === 0
-                ? await DocumentService.put({ id: originObj._id, body })
-                : await DocumentService.post({
+                  ? await DocumentService.put({ id: originObj._id, body })
+                  : await DocumentService.post({
                     body,
                   });
               const newDoc = {
@@ -514,12 +518,12 @@ class PanelForm {
                 fileId: {
                   fileBlob: file
                     ? {
-                        data: {
-                          data: await getDataFromInputFile(file),
-                        },
-                        mimetype: file.type,
-                        name: file.name,
-                      }
+                      data: {
+                        data: await getDataFromInputFile(file),
+                      },
+                      mimetype: file.type,
+                      name: file.name,
+                    }
                     : undefined,
                   filePlain: undefined,
                 },
@@ -738,36 +742,36 @@ class PanelForm {
             <div
               class="in fll ssr-shimmer-search-box"
               style="${renderCssAttr({
-                style: {
-                  width: '80%',
-                  height: '30px',
-                  top: '-13px',
-                  left: '10px',
-                },
-              })}"
+            style: {
+              width: '80%',
+              height: '30px',
+              top: '-13px',
+              left: '10px',
+            },
+          })}"
             ></div>
           </div>`,
           createdAt: html`<div class="fl">
             <div
               class="in fll ssr-shimmer-search-box"
               style="${renderCssAttr({
-                style: {
-                  width: '50%',
-                  height: '30px',
-                  left: '-5px',
-                },
-              })}"
+            style: {
+              width: '50%',
+              height: '30px',
+              left: '-5px',
+            },
+          })}"
             ></div>
           </div>`,
           mdFileId: html`<div class="fl section-mp">
             <div
               class="in fll ssr-shimmer-search-box"
               style="${renderCssAttr({
-                style: {
-                  width: '80%',
-                  height: '30px',
-                },
-              })}"
+            style: {
+              width: '80%',
+              height: '30px',
+            },
+          })}"
             ></div>
           </div>`.repeat(random(2, 4)),
           ssr: true,

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

@@ -37,7 +37,7 @@ class Recover {
         rules: [{ type: 'isEmpty' }, { type: 'isLength', options: { min: 2, max: 20 } }],
         show: () => false,
         disable: function () {
-          return !Recover.show();
+          return !this.show();
         },
       },
       'recover-email': {
@@ -46,7 +46,7 @@ class Recover {
         rules: [{ type: 'isEmpty' }, { type: 'isEmail' }],
         show: () => mode === 'recover-verify-email',
         disable: function () {
-          return !Recover.show();
+          return !this.show();
         },
       },
       'recover-password': {
@@ -55,7 +55,7 @@ class Recover {
         rules: [{ type: 'isStrongPassword' }],
         show: () => mode === 'change-password',
         disable: function () {
-          return !Recover.show();
+          return !this.show();
         },
       },
       'recover-repeat-password': {
@@ -63,7 +63,7 @@ class Recover {
         rules: [{ type: 'isEmpty' }, { type: 'passwordMismatch', options: `recover-password` }],
         show: () => mode === 'change-password',
         disable: function () {
-          return !Recover.show();
+          return !this.show();
         },
       },
     };