@underpostnet/underpost 2.97.0 → 2.97.5

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

@@ -34,6 +34,7 @@ const AgGrid = {
             return params.data && params.data._new;
           },
         },
+        onGridReady: options?.onGridReady,
         // Cell rendering events
         onFirstDataRendered: options?.onFirstDataRendered,
         onViewportChanged: options?.onViewportChanged,
@@ -46,6 +47,8 @@ const AgGrid = {
         onCellMouseOver: options?.onCellMouseOver,
         onCellMouseOut: options?.onCellMouseOut,
         onCellValueChanged: options?.onCellValueChanged,
+        onFilterChanged: options?.onFilterChanged,
+        onSortChanged: options?.onSortChanged,
         // set background colour on every row, this is probably bad, should be using CSS classes
         // rowStyle: { background: 'black' },
 

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

@@ -24,21 +24,21 @@ class Auth {
   /**
    * The current user access token (JWT).
    * @type {string}
-   * @private
+   * @method
    */
   #token = '';
 
   /**
    * The token for anonymous guest sessions.
    * @type {string}
-   * @private
+   * @method
    */
   #guestToken = '';
 
   /**
    * Timeout ID for the token refresh schedule.
    * @type {number | undefined}
-   * @private
+   * @method
    */
   #refreshTimeout;
 
@@ -204,6 +204,8 @@ class Auth {
           // A valid user token was found/refreshed
           this.setToken(data.token);
           localStorage.setItem('jwt', data.token);
+          // Clear cached profile image to ensure fresh load for new user
+          LogIn.Scope.user.main.model.user = {};
           this.renderSessionUI();
           await LogIn.Trigger({ user: data.user });
           await Account.updateForm(data.user);
@@ -235,6 +237,8 @@ class Auth {
           // Guest token is valid and refreshed
           this.setGuestToken(data.token);
           localStorage.setItem('jwt.g', data.token);
+          // Clear cached profile image for fresh guest session
+          LogIn.Scope.user.main.model.user = {};
           await LogIn.Trigger(data);
           await Account.updateForm(data.user);
           return data;
@@ -310,6 +314,7 @@ class Auth {
     s(`.main-btn-sign-up`).style.display = 'none';
     s(`.main-btn-log-out`).style.display = null;
     s(`.main-btn-account`).style.display = null;
+    if (s(`.main-btn-public-profile`)) s(`.main-btn-public-profile`).style.display = null;
     setTimeout(() => {
       // Close any open login/signup modals
       if (s(`.modal-log-in`)) s(`.btn-close-modal-log-in`).click();
@@ -328,6 +333,7 @@ class Auth {
     s(`.main-btn-sign-up`).style.display = null;
     s(`.main-btn-log-out`).style.display = 'none';
     s(`.main-btn-account`).style.display = 'none';
+    if (s(`.main-btn-public-profile`)) s(`.main-btn-public-profile`).style.display = 'none';
     setTimeout(() => {
       // Close any open logout/account modals
       if (s(`.modal-log-out`)) s(`.btn-close-modal-log-out`).click();

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

@@ -13,8 +13,8 @@ const Chat = {
     this.Data[idModal] = {};
     setTimeout(() => {
       Modal.Data[idModal].onObserverListener[`chat-${idModal}`] = (options) => {
-        const { width, height } = options;
-        s(`.chat-box`).style.height = `${height * 0.5}px`;
+        const { height } = options;
+        s(`.chat-box`).style.height = `${height - 250}px`;
       };
       s(`.btn-send-chat-${idModal}`).onclick = (e) => {
         e.preventDefault();

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

@@ -5,7 +5,7 @@ import { s4 } from './CommonJs.js';
 import { Translate } from './Translate.js';
 import { Modal, renderViewTitle } from './Modal.js';
 import { DocumentService } from '../../services/document/document.service.js';
-import { CoreService, getApiBaseUrl } from '../../services/core/core.service.js';
+import { CoreService, getApiBaseUrl, headersFactory } from '../../services/core/core.service.js';
 import { loggerFactory } from './Logger.js';
 import { imageShimmer, renderChessPattern, renderCssAttr, styleFactory } from './Css.js';
 import { getQueryParams } from './Router.js';
@@ -39,20 +39,32 @@ const Content = {
           }
           documentObj = data[0];
         }
-        if (documentObj.fileId) {
+
+        // Get file metadata (does not include buffer data)
+        if (documentObj.fileId && documentObj.fileId._id) {
           const { data, status, message } = await FileService.get({ id: documentObj.fileId._id });
           if (status !== 'success' || !data || !data[0]) {
-            logger.error(message);
-            // throw new Error(`no-preview-available`);
+            logger.warn('File metadata not found:', message);
+            // Continue without file - not fatal
+          } else {
+            file = data[0];
           }
-          file = data[0];
         }
-        if (documentObj.mdFileId) {
-          const { data, status, message } = await FileService.get({ id: documentObj.mdFileId });
+
+        // Get markdown file metadata (optional)
+        if (documentObj.mdFileId && documentObj.mdFileId._id) {
+          const { data, status, message } = await FileService.get({ id: documentObj.mdFileId._id });
           if (status !== 'success' || !data || !data[0]) {
-            logger.error(message);
-            throw new Error(`no-preview-available`);
-          } else md = data[0];
+            logger.warn('Markdown file metadata not found:', message);
+            // Continue without markdown - try to render file instead
+          } else {
+            md = data[0];
+          }
+        }
+
+        // Check if we have at least one file to render
+        if (!md && !file) {
+          throw new Error(`no-preview-available`);
         }
 
         htmls(
@@ -63,6 +75,8 @@ const Content = {
           })} `,
         );
         htmls(`.content-render-${idModal}`, ``);
+
+        // Pass file IDs to RenderFile - it will fetch blobs as needed
         if (md) await this.RenderFile({ idModal, file: md, id: md._id });
         if (file) await this.RenderFile({ idModal, file, id: file._id });
         Modal.Data[idModal].onObserverListener[`main-content-observer`]();
@@ -89,17 +103,48 @@ const Content = {
       </div>
       <div class="abs center error-${idModal} hide"></div>`;
   },
+
+  /**
+   * Helper function to get file content
+   * Supports both legacy format (with buffer data) and new format (metadata only)
+   * For new format, fetches content from blob endpoint
+   */
+  getFileContent: async function (file, options = {}) {
+    // If custom URL provided, use it
+    if (options.url) {
+      return await CoreService.getRaw({ url: options.url });
+    }
+
+    // If buffer data exists in file object (legacy format), use it
+    if (file.data?.data) {
+      return await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
+    }
+
+    // Otherwise, fetch from blob endpoint (new metadata-only format)
+    if (file._id) {
+      try {
+        const { data: blobArray, status } = await FileService.get({ id: `blob/${file._id}` });
+        if (status === 'success' && blobArray && blobArray[0]) {
+          return await blobArray[0].text();
+        }
+        throw new Error('Failed to fetch file content');
+      } catch (error) {
+        logger.error('Error fetching file content from blob endpoint:', error);
+        throw new Error('Could not load file content');
+      }
+    }
+
+    throw new Error('No file content available');
+  },
+
   RenderFile: async function (
     options = {
       file: {
         _id: '',
-        data: {
-          data: [0],
-        },
         mimetype: '',
         url: '',
         name: '',
-        cid: '', // TODO: IPFS env
+        cid: '',
       },
       idModal: '',
       style: {},
@@ -116,80 +161,116 @@ const Content = {
         border: 'none',
       };
     if (!options.class) options.class = ``;
+
     const { container, file } = options;
-    const ext = file.name.split('.')[file.name.split('.').length - 1];
+    const ext = (file.name || '').split('.').pop()?.toLowerCase() || '';
     let render = '';
 
-    switch (ext) {
-      case 'md':
-        {
-          const content = options.url
-            ? await CoreService.getRaw({ url: options.url })
-            : await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
-          render += html`<div class="${options.class}" ${styleFactory(options.style)}>${marked.parse(content)}</div>`;
+    try {
+      switch (ext) {
+        case 'md':
+          {
+            const content = await Content.getFileContent(file, options);
+            render += html`<div class="${options.class}" ${styleFactory(options.style)}>${marked.parse(content)}</div>`;
+          }
+          break;
+
+        case 'jpg':
+        case 'jpeg':
+        case 'webp':
+        case 'svg':
+        case 'gif':
+        case 'png': {
+          const url = await Content.urlFactory(options);
+          if (url) {
+            const imgRender = html`<img
+              alt="${file.name ? file.name : `file ${s4()}`}"
+              class="in ${options.class}"
+              ${styleFactory(options.style, `${renderChessPattern(50)}`)}
+              src="${url}"
+            />`;
+            render += imgRender;
+          } else {
+            render = html`<div class="in ${options.class}" ${styleFactory(options.style)}>
+              <p style="color: red;">Error loading image</p>
+            </div>`;
+          }
+          break;
         }
 
-        break;
-
-      case 'jpg':
-      case 'jpeg':
-      case 'webp':
-      case 'svg':
-      case 'gif':
-      case 'png': {
-        const url = Content.urlFactory(options);
-        const imgRender = html`<img
-          alt="${file.name ? file.name : `file ${s4()}`}"
-          class="in ${options.class}"
-          ${styleFactory(options.style, `${renderChessPattern(50)}`)}
-          src="${url}"
-        />`;
-        render += imgRender;
-        break;
-      }
-      case 'pdf': {
-        const url = Content.urlFactory(options);
-        render += html`<iframe
-          class="in ${options.class} iframe-${options.idModal}"
-          ${styleFactory(options.style)}
-          src="${url}"
-        ></iframe>`;
-        break;
-      }
+        case 'pdf': {
+          const url = await Content.urlFactory(options);
+          if (url) {
+            render += html`<iframe
+              class="in ${options.class} iframe-${options.idModal}"
+              ${styleFactory(options.style)}
+              src="${url}"
+            ></iframe>`;
+          } else {
+            render = html`<div class="in ${options.class}" ${styleFactory(options.style)}>
+              <p style="color: red;">Error loading PDF</p>
+            </div>`;
+          }
+          break;
+        }
+
+        case 'json':
+          {
+            const content = await Content.getFileContent(file, options);
+            render += html`<pre class="in ${options.class}" ${styleFactory(options.style)}>
+${JSON.stringify(JSON.parse(content), null, 4)}</pre
+            >`;
+          }
+          break;
 
-      case 'json':
-        render += html`<pre class="in ${options.class}" ${styleFactory(options.style)}>
-        ${JSON.stringify(
-            JSON.parse(
-              options.url
-                ? await CoreService.getRaw({ url: options.url })
-                : await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype)),
-            ),
-            null,
-            4,
-          )}</pre
-        >`;
-        break;
-
-      default:
-        render += html`<div class="in ${options.class}" ${styleFactory(options.style)}>
-          ${options.url
-            ? await CoreService.getRaw({ url: options.url })
-            : await getRawContentFile(getBlobFromUint8ArrayFile(file.data.data, file.mimetype))}
-        </div>`;
-        break;
+        default:
+          {
+            const content = await Content.getFileContent(file, options);
+            render += html`<div class="in ${options.class}" ${styleFactory(options.style)}>${content}</div>`;
+          }
+          break;
+      }
+    } catch (error) {
+      logger.error('Error rendering file:', error);
+      render = html`<div class="in ${options.class}" ${styleFactory(options.style)}>
+        <p style="color: red;">Error loading file: ${error.message}</p>
+      </div>`;
     }
+
     if (options.raw) return render;
     append(container, render);
   },
-  urlFactory: function (options) {
-    return options.url
-      ? options.url
-      : options.file?.data?.data
-      ? URL.createObjectURL(getBlobFromUint8ArrayFile(options.file.data.data, options.file.mimetype))
-      : options.file._id
-      ? getApiBaseUrl({ id: options.file._id, endpoint: 'file/blob' })
-      : null;
+
+  /**
+   * Generate appropriate URL for file display
+   * Prefers blob endpoint for new metadata-only format
+   */
+  urlFactory: async function (options) {
+    // If custom URL provided, use it
+    if (options.url) {
+      return options.url;
+    }
+
+    // If buffer data exists (legacy), create object URL
+    if (options.file?.data?.data) {
+      return URL.createObjectURL(getBlobFromUint8ArrayFile(options.file.data.data, options.file.mimetype));
+    }
+
+    // Use blob endpoint for metadata-only format with proper authentication
+    if (options.file?._id) {
+      try {
+        const { data: blobArray, status } = await FileService.get({ id: `blob/${options.file._id}` });
+        if (status === 'success' && blobArray && blobArray[0]) {
+          return URL.createObjectURL(blobArray[0]);
+        }
+        throw new Error('Failed to fetch file blob');
+      } catch (error) {
+        logger.error('Error fetching file blob:', error);
+        return null;
+      }
+    }
+
+    return null;
   },
 };
 

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

@@ -865,10 +865,17 @@ const subThemeManager = {
       return html`<style>
         button:hover,
         .a-btn:hover,
-        .main-btn-menu-active {
+        .main-btn-menu-active,
+        .top-bar-search-box-container:hover {
           color: ${this.lightColor};
           background-color: ${lightenHex(this.lightColor, 0.8)};
         }
+        .top-bar-search-box-container i {
+          color: #000;
+        }
+        .top-bar-search-box-container:hover i {
+          color: ${this.lightColor};
+        }
         .main-sub-btn-active {
           color: ${this.lightColor};
           background-color: rgba(0, 0, 0, 0.3);
@@ -887,10 +894,17 @@ const subThemeManager = {
       return html`<style>
         button:hover,
         .a-btn:hover,
-        .main-btn-menu-active {
+        .main-btn-menu-active,
+        .top-bar-search-box-container:hover {
           color: ${lightenHex(this.darkColor, 0.8)};
           background-color: ${darkenHex(this.darkColor, 0.75)};
         }
+        .top-bar-search-box-container i {
+          color: #fff;
+        }
+        .top-bar-search-box-container:hover i {
+          color: ${lightenHex(this.darkColor, 0.8)};
+        }
         .main-sub-btn-active {
           color: ${lightenHex(this.darkColor, 0.8)};
           background-color: rgba(255, 255, 255, 0.3);

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

@@ -232,6 +232,9 @@ const CssCommonCore = async () => {
         width: 40px;
         text-align: center;
       }
+      .input-container {
+        width: 275px;
+      }
     </style>
     ${boxShadow({ selector: '.account-profile-image' })}
     <div class="ag-grid-style"></div>`;
@@ -404,9 +407,7 @@ const CssCoreDark = {
           color: #fff;
           background: #313131;
         }
-        .input-container {
-          width: 256px;
-        }
+
         .btn-eye-password {
           text-align: center;
           background: #1a1a1a;
@@ -480,7 +481,7 @@ const CssCoreDark = {
           cursor: pointer;
         }
         .btn-custom {
-          width: 260px;
+          width: 278px;
           font-size: 20px;
           padding: 10px;
           min-height: 45px;
@@ -491,7 +492,7 @@ const CssCoreDark = {
         }
         .toggle-form-container,
         .dropdown-option {
-          width: 238px;
+          width: 255px;
           font-size: 20px;
           padding: 10px;
         }
@@ -503,7 +504,7 @@ const CssCoreDark = {
           background: #232323;
         }
         .form-button {
-          width: 260px;
+          width: 278px;
           font-size: 20px;
           padding: 10px;
           text-align: center;
@@ -599,10 +600,14 @@ const CssCoreLight = {
         }
 
         .box-shadow {
-          box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+          box-shadow:
+            0 4px 8px 0 rgba(0, 0, 0, 0.2),
+            0 6px 20px 0 rgba(0, 0, 0, 0.19);
         }
         .box-shadow:hover {
-          box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2), 0 10px 30px 0 rgba(0, 0, 0, 0.3);
+          box-shadow:
+            0 8px 16px 0 rgba(0, 0, 0, 0.2),
+            0 10px 30px 0 rgba(0, 0, 0, 0.3);
         }
         .box-content-border {
           border: 2px solid #bbb;
@@ -715,7 +720,6 @@ const CssCoreLight = {
           border-radius: 5px;
           border: 2px solid #bbb;
           transition: 0.3s;
-          width: 256px;
         }
         .input-container:hover {
           color: #1a1a1a;
@@ -793,7 +797,7 @@ const CssCoreLight = {
           cursor: pointer;
         }
         .btn-custom {
-          width: 260px;
+          width: 278px;
           font-size: 20px;
           padding: 10px;
           min-height: 45px;
@@ -805,7 +809,7 @@ const CssCoreLight = {
         }
         .toggle-form-container,
         .dropdown-option {
-          width: 238px;
+          width: 255px;
           font-size: 20px;
           padding: 10px;
         }
@@ -817,7 +821,7 @@ const CssCoreLight = {
           background: #e4e4e4;
         }
         .form-button {
-          width: 260px;
+          width: 278px;
           font-size: 20px;
           padding: 10px;
           text-align: center;