cyberia 3.0.3 → 3.2.5

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

@@ -544,10 +544,13 @@ const FileExplorer = {
         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;
+
         this.eGui.innerHTML = html`
           <div class="fl">
             ${await BtnIcon.Render({
-              class: `in fll management-table-btn-mini btn-file-download-${params.data._id}`,
+              class: `in fll management-table-btn-mini btn-file-download-${params.data._id}${!hasGenericFile ? ' btn-disabled' : ''}`,
               label: html` <i class="fas fa-download"></i>`,
               type: 'button',
             })}
@@ -562,10 +565,15 @@ const FileExplorer = {
               type: 'button',
             })}
             ${await BtnIcon.Render({
-              class: `in fll management-table-btn-mini btn-file-copy-content-link-${params.data._id}`,
+              class: `in fll management-table-btn-mini btn-file-copy-content-link-${params.data._id}${!hasGenericFile ? ' btn-disabled' : ''}`,
               label: html`<i class="fas fa-copy"></i>`,
               type: 'button',
             })}
+            ${await BtnIcon.Render({
+              class: `in fll management-table-btn-mini btn-file-copy-md-link-${params.data._id}${!hasMdFile ? ' btn-disabled' : ''}`,
+              label: html`<i class="fas fa-file-code"></i>`,
+              type: 'button',
+            })}
             ${await BtnIcon.Render({
               class: `in fll management-table-btn-mini btn-file-edit-${params.data._id}`,
               label: html`<i class="fas fa-edit"></i>`,
@@ -591,11 +599,46 @@ const FileExplorer = {
               ? getApiBaseUrl({ id: originObj.fileId._id, endpoint: 'file/blob' })
               : undefined;
 
+          const mdBlobUri =
+            originObj && originObj.mdFileId
+              ? getApiBaseUrl({ id: originObj.mdFileId._id, endpoint: 'file/blob' })
+              : undefined;
+
           if (!originObj) {
             s(`.btn-file-view-${params.data._id}`).classList.add('hide');
             s(`.btn-file-copy-content-link-${params.data._id}`).classList.add('hide');
           }
 
+          // Disable download button if no generic file
+          if (!hasGenericFile) {
+            const dlBtn = s(`.btn-file-download-${params.data._id}`);
+            if (dlBtn) {
+              dlBtn.style.opacity = '0.4';
+              dlBtn.style.cursor = 'not-allowed';
+              dlBtn.style.pointerEvents = 'none';
+            }
+          }
+
+          // Disable copy generic file link button if no generic file
+          if (!hasGenericFile) {
+            const copyBtn = s(`.btn-file-copy-content-link-${params.data._id}`);
+            if (copyBtn) {
+              copyBtn.style.opacity = '0.4';
+              copyBtn.style.cursor = 'not-allowed';
+              copyBtn.style.pointerEvents = 'none';
+            }
+          }
+
+          // Disable copy md file link button if no md file
+          if (!hasMdFile) {
+            const mdCopyBtn = s(`.btn-file-copy-md-link-${params.data._id}`);
+            if (mdCopyBtn) {
+              mdCopyBtn.style.opacity = '0.4';
+              mdCopyBtn.style.cursor = 'not-allowed';
+              mdCopyBtn.style.pointerEvents = 'none';
+            }
+          }
+
           EventsUI.onClick(`.btn-file-view-${params.data._id}`, async (e) => {
             e.preventDefault();
             if (location.href !== url) {
@@ -606,6 +649,7 @@ const FileExplorer = {
 
           EventsUI.onClick(`.btn-file-copy-content-link-${params.data._id}`, async (e) => {
             e.preventDefault();
+            if (!hasGenericFile || !blobUri) return;
             await copyData(blobUri);
             NotificationManager.Push({
               html: Translate.Render('success-copy-data'),
@@ -613,10 +657,21 @@ const FileExplorer = {
             });
           });
 
+          EventsUI.onClick(`.btn-file-copy-md-link-${params.data._id}`, async (e) => {
+            e.preventDefault();
+            if (!hasMdFile || !mdBlobUri) return;
+            await copyData(mdBlobUri);
+            NotificationManager.Push({
+              html: Translate.Render('success-copy-data'),
+              status: 'success',
+            });
+          });
+
           EventsUI.onClick(`.btn-file-download-${params.data._id}`, async (e) => {
             e.preventDefault();
+            if (!hasGenericFile) return;
             try {
-              // Use FileService with blob/ prefix for centralized blob fetching
+              // Use FileService with blob/ prefix for blob fetching
               const { data: blobArray, status } = await FileService.get({ id: `blob/${params.data.fileId}` });
               if (status === 'success' && blobArray && blobArray[0]) {
                 downloadFile(blobArray[0], params.data.name);
@@ -721,6 +776,12 @@ const FileExplorer = {
                     documentInstance[docIndex].isPublic = data.isPublic;
                   }
 
+                  // Refresh the isPublic column cell in the grid
+                  const rowNode = AgGrid.grids[gridFileId].getRowNode(params.node.id);
+                  if (rowNode) {
+                    rowNode.setDataValue('isPublic', data.isPublic);
+                  }
+
                   // Update button icon
                   const btnElement = s(`.${toggleId}`);
                   if (btnElement) {
@@ -1347,7 +1408,13 @@ const FileExplorer = {
                     { field: 'name', flex: 2, headerName: 'Title', cellRenderer: LoadFileNameRenderer },
                     { field: 'mdFileName', flex: 1, headerName: 'MD File Name' },
                     { field: 'fileName', flex: 1, headerName: 'Generic File Name' },
-                    { headerName: '', width: 150, cellRenderer: LoadFileActionsRenderer },
+                    {
+                      field: 'isPublic',
+                      headerName: 'Public',
+                      width: 90,
+                      cellDataType: 'boolean',
+                    },
+                    { headerName: '', width: 180, cellRenderer: LoadFileActionsRenderer },
                   ],
                 },
               })}

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

@@ -101,7 +101,7 @@ const getFileFromFileData = (fileData) => {
 /**
  * Fetch file content from blob endpoint and create File object.
  * Used for metadata-only format files during edit mode.
- * Uses FileService with blob/ prefix for centralized blob fetching.
+ * Uses FileService with blob/ prefix for blob fetching.
  *
  * @async
  * @function getFileFromBlobEndpoint

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

@@ -3,8 +3,8 @@ import { cap, getId } from './CommonJs.js';
 const Keyboard = {
   ActiveKey: {},
   Event: {},
-  Init: async function (options = { callBackTime: 50 }) {
-    const { callBackTime } = options;
+  Init: async function () {
+    const callBackTime = 45;
     window.onkeydown = (e = new KeyboardEvent()) => {
       this.ActiveKey[e.key] = true;
       // e.composedPath()

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

@@ -10,7 +10,7 @@ import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
 import { htmls, s } from './VanillaJs.js';
-import { Webhook } from './Webhook.js';
+import { WebhookProvider } from './Webhook.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -31,7 +31,7 @@ const LogIn = {
 
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (!user || user.role === 'guest') return;
-    await Webhook.register({ user });
+    await WebhookProvider.register({ user });
     if (s(`.session`))
       htmls(
         `.session`,

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

@@ -3,13 +3,13 @@ import { BtnIcon } from './BtnIcon.js';
 import { LogIn } from './LogIn.js';
 import { Translate } from './Translate.js';
 import { htmls, s } from './VanillaJs.js';
-import { Webhook } from './Webhook.js';
+import { WebhookProvider } from './Webhook.js';
 import { NotificationManager } from './NotificationManager.js';
 
 const LogOut = {
   Event: {},
   Trigger: async function (options) {
-    await Webhook.unregister();
+    await WebhookProvider.unregister();
     for (const eventKey of Object.keys(this.Event)) await this.Event[eventKey](options);
     if (s(`.session`))
       htmls(

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

@@ -1357,7 +1357,6 @@ const Modal = {
                   class: 'hide',
                   style: {
                     // overflow: 'hidden',
-                    background: 'none',
                     resize: 'none',
                     'min-width': `${minWidth}px`,
                     'z-index': 5,
@@ -2424,20 +2423,34 @@ const Modal = {
   },
 };
 
-const renderMenuLabel = ({ img, text, icon }) => {
-  if (!img) return html`<span class="inl menu-btn-icon">${icon}</span> ${text}`;
-  return html`<img class="abs center img-btn-square-menu" src="${getProxyPath()}assets/ui-icons/${img}" />
+const renderMenuLabel = ({ img, src, text, icon }) => {
+  if (!img && !src) return html`<span class="inl menu-btn-icon">${icon}</span> ${text}`;
+  const imgSrc = src ? src : `${getProxyPath()}assets/ui-icons/${img}`;
+  return html`<img class="abs center img-btn-square-menu" src="${imgSrc}" />
     <div class="abs center main-btn-menu-text">${text}</div>`;
 };
 
 const renderViewTitle = (
-  options = { icon: '', img: '', text: '', assetFolder: '', 'ui-icons': '', dim, top, topText: '' },
+  options = {
+    icon: '',
+    img: '',
+    text: '',
+    assetFolder: '',
+    'ui-icon': '',
+    imgClass: '',
+    textClass: '',
+    dim,
+    top,
+    topText: '',
+  },
 ) => {
   if (options.dim === undefined) options.dim = 30;
   const { img, text, icon, dim, top } = options;
   if (!img && !options['ui-icon']) return html`<span class="view-title-icon">${icon}</span> ${text}`;
+  const imgClass = options.imgClass || 'abs img-btn-square-view-title';
+  const textClass = options.textClass || 'in text-btn-square-view-title';
   return html`<img
-      class="abs img-btn-square-view-title"
+      class="${imgClass}"
       style="${renderCssAttr({
         style: {
           width: `${dim}px`,
@@ -2450,7 +2463,7 @@ const renderViewTitle = (
         : img}"
     />
     <div
-      class="in text-btn-square-view-title"
+      class="${textClass}"
       style="${renderCssAttr({
         style: {
           // 'padding-left': `${20 + dim}px`,

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

@@ -453,7 +453,6 @@ const Panel = {
 
                         tagRender += await Badge.Render({
                           text: tag,
-                          style: { color: tagColor },
                           classList: 'inl panel-tag-clickable',
                           style: {
                             margin: '3px',

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

@@ -85,7 +85,7 @@ const PanelForm = {
     options = {
       idPanel: '',
       defaultUrlImage: '',
-      Elements: {},
+      appStore: {},
       parentIdModal: undefined,
       route: 'home',
       htmlFormHeader: async () => '',
@@ -97,7 +97,7 @@ const PanelForm = {
       showCreatorProfile: false,
     },
   ) {
-    const { idPanel, defaultUrlImage, Elements } = options;
+    const { idPanel, defaultUrlImage, appStore } = options;
 
     // Authenticated users don't need 'public' tag - they see all their own posts
     // Only include 'public' for unauthenticated users (handled by backend)
@@ -458,10 +458,10 @@ const PanelForm = {
             baseNewDoc.mdFileId = hasMdContent
               ? `<div class="markdown-content">${marked.parse(data.mdFileId)}</div>`
               : null;
-            baseNewDoc.userId = Elements.Data.user?.main?.model?.user?._id;
+            baseNewDoc.userId = appStore.Data.user?.main?.model?.user?._id;
 
             // Ensure profileImageId is properly formatted as object with _id property
-            const profileImageIdValue = Elements.Data.user?.main?.model?.user?.profileImageId;
+            const profileImageIdValue = appStore.Data.user?.main?.model?.user?.profileImageId;
             const formattedProfileImageId = profileImageIdValue
               ? typeof profileImageIdValue === 'string'
                 ? { _id: profileImageIdValue }
@@ -469,9 +469,9 @@ const PanelForm = {
               : null;
 
             baseNewDoc.userInfo = {
-              username: Elements.Data.user?.main?.model?.user?.username,
-              email: Elements.Data.user?.main?.model?.user?.email,
-              _id: Elements.Data.user?.main?.model?.user?._id,
+              username: appStore.Data.user?.main?.model?.user?.username,
+              email: appStore.Data.user?.main?.model?.user?.email,
+              _id: appStore.Data.user?.main?.model?.user?._id,
               profileImageId: formattedProfileImageId,
             };
             baseNewDoc.tools = true;
@@ -737,8 +737,8 @@ const PanelForm = {
                 tools:
                   documentObject.userId &&
                   typeof documentObject.userId === 'object' &&
-                  Elements.Data.user?.main?.model?.user?._id &&
-                  documentObject.userId._id === Elements.Data.user.main.model.user._id,
+                  appStore.Data.user?.main?.model?.user?._id &&
+                  documentObject.userId._id === appStore.Data.user.main.model.user._id,
                 _id: documentObject._id,
                 totalCopyShareLinkCount: documentObject.totalCopyShareLinkCount || 0,
                 isPublic: documentObject.isPublic || false,
@@ -772,8 +772,8 @@ const PanelForm = {
                 tools:
                   documentObject.userId &&
                   typeof documentObject.userId === 'object' &&
-                  Elements.Data.user?.main?.model?.user?._id &&
-                  documentObject.userId._id === Elements.Data.user.main.model.user._id,
+                  appStore.Data.user?.main?.model?.user?._id &&
+                  documentObject.userId._id === appStore.Data.user.main.model.user._id,
                 _id: documentObject._id,
                 totalCopyShareLinkCount: documentObject.totalCopyShareLinkCount || 0,
                 isPublic: documentObject.isPublic || false,
@@ -867,10 +867,10 @@ const PanelForm = {
         try {
           const cid = getQueryParams().cid ? getQueryParams().cid : '';
           const forceUpdate =
-            Elements.Data.user.main.model &&
-            Elements.Data.user.main.model.user &&
-            Elements.Data.user.main.model.user._id &&
-            lastUserId !== Elements.Data.user.main.model.user._id;
+            appStore.Data.user.main.model &&
+            appStore.Data.user.main.model.user &&
+            appStore.Data.user.main.model.user._id &&
+            lastUserId !== appStore.Data.user.main.model.user._id;
 
           logger.warn(
             {
@@ -878,8 +878,8 @@ const PanelForm = {
               cid,
               forceUpdate,
             },
-            Elements.Data.user?.main?.model?.user
-              ? JSON.stringify(Elements.Data.user.main.model.user, null, 4)
+            appStore.Data.user?.main?.model?.user
+              ? JSON.stringify(appStore.Data.user.main.model.user, null, 4)
               : 'No user data',
           );
 
@@ -889,8 +889,8 @@ const PanelForm = {
 
           if (loadingGetData || (normalizedLastCid === normalizedCid && !forceUpdate)) return;
           loadingGetData = true;
-          lastUserId = Elements.Data.user?.main?.model?.user?._id
-            ? newInstance(Elements.Data.user.main.model.user._id)
+          lastUserId = appStore.Data.user?.main?.model?.user?._id
+            ? newInstance(appStore.Data.user.main.model.user._id)
             : null;
           lastCid = cid;
 

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

@@ -30,10 +30,9 @@ const RichText = {
     return html` <style>
         .md-container {
           background: white;
-          color: black;
         }
         .md-container button {
-          color: black !important;
+          color: black;
         }
       </style>
       <div class="in md-container"><textarea class="${id}"></textarea></div>`;

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

@@ -1,25 +1,81 @@
+/**
+ * Client-side WebSocket provider using Socket.IO.
+ * Manages a singleton socket connection, channel registration, and event dispatching.
+ *
+ * @module client/core/SocketIo
+ * @namespace SocketIoProvider
+ */
 import { io } from 'socket.io/client-dist/socket.io.esm.min.js';
 import { loggerFactory } from './Logger.js';
 import { getWsBasePath, getWsBaseUrl } from '../../services/core/core.service.js';
 
 const logger = loggerFactory(import.meta);
 
-const SocketIo = {
-  Event: {
+/**
+ * @class SocketIoProvider
+ * @classdesc Provides static methods for managing a singleton Socket.IO client connection,
+ * channel event dispatching, and message emission.
+ * @memberof SocketIoProvider
+ */
+class SocketIoProvider {
+  /**
+   * Event callback registry, keyed by channel name → unique callback ID → handler function.
+   * Built-in channels: `connect`, `connect_error`, `disconnect`.
+   *
+   * @static
+   * @type {Object.<string, Object.<string, function>>}
+   */
+  static Event = {
     connect: {},
     connect_error: {},
     disconnect: {},
-  },
-  /** @type {import('socket.io').Socket} */
-  socket: null,
-  Emit: function (channel = '', payload = {}) {
+  };
+
+  /**
+   * The active Socket.IO client socket instance.
+   *
+   * @static
+   * @type {import('socket.io-client').Socket|null}
+   */
+  static socket = null;
+
+  /**
+   * The current WebSocket host URL.
+   *
+   * @static
+   * @type {string|undefined}
+   */
+  static host;
+
+  /**
+   * Emits a JSON-serialized payload to the server on the specified channel.
+   *
+   * @static
+   * @param {string} [channel=''] - The channel/event name to emit on.
+   * @param {Object} [payload={}] - The data to send.
+   * @returns {void}
+   */
+  static Emit(channel = '', payload = {}) {
     try {
       this.socket.emit(channel, JSON.stringify(payload));
     } catch (error) {
       logger.error(error);
     }
-  },
-  Init: async function (options) {
+  }
+
+  /**
+   * Initializes (or re-initializes) the Socket.IO connection.
+   * Disconnects any existing socket, creates a new connection, and registers
+   * built-in event listeners and custom channels.
+   *
+   * @static
+   * @async
+   * @param {Object} options - Connection options.
+   * @param {string} [options.host] - Override WebSocket host URL.
+   * @param {Object.<string, Object>} [options.channels] - Channel definitions to register listeners for.
+   * @returns {Promise<void>}
+   */
+  static async Init(options) {
     if (this.socket) this.socket.disconnect();
     const path = getWsBasePath();
     this.host = options.host ? options.host : getWsBaseUrl({ wsBasePath: '' });
@@ -29,24 +85,10 @@ const SocketIo = {
     });
     const connectOptions = {
       path: path === '/' ? undefined : path,
-      // auth: {
-      //   token: '',
-      // },
-      // query: {
-      //   'my-key': 'my-value',
-      // },
-      // forceNew: true,
-      // reconnectionAttempts: 'Infinity',
-      // timeout: 10000,
-      // autoConnect: 5000,
-      // Custom auth socket io credentials:
       withCredentials: true,
-      extraHeaders: {
-        //   "my-custom-header": "abcd"
-      },
+      extraHeaders: {},
       transports: ['websocket', 'polling', 'flashsocket'],
     };
-    // logger.error(`connect options:`, JSON.stringify(connectOptions, null, 4));
     this.socket = io(this.host, connectOptions);
 
     this.socket.on('connect', () => {
@@ -65,17 +107,28 @@ const SocketIo = {
     });
 
     if (options && 'channels' in options) this.setChannels(options.channels);
-  },
-  setChannels: function (channels) {
+  }
+
+  /**
+   * Registers socket listeners for each channel key, routing incoming messages
+   * to all registered callbacks in `Event[channel]`.
+   *
+   * @static
+   * @param {Object.<string, Object>} channels - Channel definitions keyed by channel name.
+   * @returns {void}
+   */
+  static setChannels(channels) {
     Object.keys(channels).map((type) => {
       logger.info(`load chanel`, type);
       this.Event[type] = {};
       this.socket.on(type, (...args) => {
-        // logger.info(`event: ${type} | ${JSON.stringify(args, null, 4)}`);
         Object.keys(this.Event[type]).map((keyEvent) => this.Event[type][keyEvent](args));
       });
     });
-  },
-};
+  }
+}
+
+/** @type {SocketIoProvider} Backward compatibility alias. */
+const SocketIo = SocketIoProvider;
 
-export { SocketIo };
+export { SocketIoProvider, SocketIo };

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

@@ -0,0 +1,75 @@
+/**
+ * Shared factory for app-specific WebSocket event handlers.
+ * Eliminates duplication across per-app SocketIo*.js modules by providing
+ * common channel event handling (chat, email-confirmed, etc.).
+ *
+ * @module client/core/SocketIoHandler
+ * @namespace SocketIoHandlerProvider
+ */
+import { Account } from './Account.js';
+import { Chat } from './Chat.js';
+import { s4 } from './CommonJs.js';
+import { loggerFactory } from './Logger.js';
+import { SocketIo } from './SocketIo.js';
+import { s } from './VanillaJs.js';
+
+const logger = loggerFactory(import.meta);
+
+/**
+ * @class SocketIoHandlerProvider
+ * @classdesc Provides a static factory method to create app-specific SocketIo event handlers
+ * from an {@link AppStore} instance. Handles common channel events (chat, email-confirmed)
+ * and wires connect/disconnect lifecycle.
+ * @memberof SocketIoHandlerProvider
+ */
+class SocketIoHandlerProvider {
+  /**
+   * Creates a standard SocketIo event initialization object for an app module.
+   *
+   * @static
+   * @param {import('./AppStore.js').AppStore} appStore - The app-specific AppStore instance.
+   * @returns {{ Init: function(): Promise<void> }} An object with an `Init` method for SocketIo event registration.
+   */
+  static create(appStore) {
+    return {
+      Init() {
+        return new Promise((resolve) => {
+          for (const type of Object.keys(appStore.Data)) {
+            SocketIo.Event[type][s4()] = async (args) => {
+              args = JSON.parse(args[0]);
+              switch (type) {
+                case 'chat':
+                  {
+                    const idModal = 'modal-chat';
+                    if (s(`.${idModal}-chat-box`)) Chat.appendChatBox({ idModal, ...args });
+                  }
+                  break;
+
+                default:
+                  break;
+              }
+              const { status } = args;
+
+              switch (status) {
+                case 'email-confirmed': {
+                  const newUser = { ...appStore.Data.user.main.model.user, emailConfirmed: true };
+                  Account.renderVerifyEmailStatus(newUser);
+                  Account.triggerUpdateEvent({ user: newUser });
+                  break;
+                }
+
+                default:
+                  break;
+              }
+            };
+          }
+          SocketIo.Event.connect[s4()] = async (reason) => {};
+          SocketIo.Event.disconnect[s4()] = async (reason) => {};
+          return resolve();
+        });
+      },
+    };
+  }
+}
+
+export { SocketIoHandlerProvider };