cyberia 3.0.3 → 3.1.3

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

@@ -13,20 +13,32 @@ const AgGrid = {
   Render: async function (options) {
     let { id, paginationOptions } = options;
     setTimeout(() => {
+      // Normalize rowSelection from deprecated string form to object form (AG Grid v32.2.1+)
+      let gridOptionsOverrides = { ...(options.gridOptions || {}) };
+      if (typeof gridOptionsOverrides.rowSelection === 'string') {
+        const mode = gridOptionsOverrides.rowSelection; // 'single' or 'multiple'
+        gridOptionsOverrides.rowSelection = {
+          mode: mode === 'multiple' ? 'multiRow' : 'singleRow',
+        };
+      }
+
       // Grid Options: Contains all of the grid configurations
       const gridOptions = {
+        // Use legacy CSS theme mode to avoid conflict with Theming API (AG Grid v33+)
+        theme: 'legacy',
         // Row Data: The data to be displayed.
         pagination: false, // Disabled by default, will be handled by the management view
         // paginationPageSize: 100,
         // suppressPaginationPanel: true, // We are using our own custom pagination component
         // rowHeight: 60,
-        enableCellChangeFlash: true,
+        // enableCellChangeFlash was removed in v35; use enableCellChangeFlash on defaultColDef instead
         defaultColDef: {
           editable: false,
           flex: 1,
           minWidth: 50,
           filter: true,
           autoHeight: true,
+          enableCellChangeFlash: true,
         },
         rowClassRules: {
           'row-new-highlight': (params) => {
@@ -76,7 +88,7 @@ const AgGrid = {
               return { field };
             })
           : [],
-        ...options.gridOptions,
+        ...gridOptionsOverrides,
       };
 
       // Your Javascript code to create the grid
@@ -86,8 +98,11 @@ const AgGrid = {
       // myGridElement.style.setProperty('width', '100%');
       ThemeEvents[id] = () => {
         if (s(`.${id}`)) {
-          s(`.${id}`).classList.remove(darkTheme ? this.theme : this.theme + '-dark');
-          s(`.${id}`).classList.add(!darkTheme ? this.theme : this.theme + '-dark');
+          // darkTheme has already been updated by Css.js when this event fires
+          // If darkTheme is true: remove light class, add dark class
+          // If darkTheme is false: remove dark class, add light class
+          s(`.${id}`).classList.remove(this.theme, this.theme + '-dark');
+          s(`.${id}`).classList.add(darkTheme ? this.theme + '-dark' : this.theme);
         } else {
           // console.warn('change theme: grid not found');
           delete ThemeEvents[id];
@@ -112,7 +127,7 @@ const AgGrid = {
       : '';
     return html`
       <div
-        class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
+        class="${id} ${darkTheme ? this.theme + '-dark' : this.theme}"
         style="${options?.style
           ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
           : ''}"

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

@@ -49,7 +49,7 @@ const e404 = async () => {
     <br />
     <br />${Translate.Render('page-not-found')} <br />
     <br />
-    <a href="${location.origin}">${Translate.Render('back')}</a>
+    <a target="_top" href="${location.origin}">${Translate.Render('back')}</a>
   </div>`;
 };
 
@@ -68,7 +68,7 @@ const e500 = async () => {
     <br />
     <br />${Translate.Render('page-broken')} <br />
     <br />
-    <a href="${location.origin}">${Translate.Render('back')}</a>
+    <a target="_top" href="${location.origin}">${Translate.Render('back')}</a>
   </div>`;
 };
 

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

@@ -56,7 +56,7 @@ const attachMarkdownLinkHandlers = (containerSelector) => {
 };
 
 const Content = {
-  Render: async function (options = { idModal: '' }) {
+  Render: async function (options = { idModal: '', titleIcon: '' }) {
     const { idModal } = options;
     setTimeout(async () => {
       try {
@@ -111,11 +111,30 @@ const Content = {
           throw new Error(`no-preview-available`);
         }
 
+        // Use custom titleIcon from options, or extract from the modal's original title HTML, or fall back to default
+        const titleIcon = options.titleIcon
+          ? options.titleIcon
+          : Modal.Data[idModal] &&
+              Modal.Data[idModal].options &&
+              Modal.Data[idModal].options.title &&
+              Modal.Data[idModal].options.title.includes &&
+              Modal.Data[idModal].options.title.includes('<img')
+            ? Modal.Data[idModal].options.title.match(/<img[^>]*>/)?.[0] || html`<i class="inl far fa-file"></i>`
+            : html`<i class="inl far fa-file"></i>`;
+
+        // Preserve the original text wrapper class if present in the modal's stored title
+        const originalTitle = Modal.Data[idModal]?.options?.title || '';
+        const hasCustomTextClass = originalTitle.includes && originalTitle.includes('underpost-text-title-modal');
+        const docTitle = documentObj.title ? documentObj.title : documentObj.location;
+        const titleText = hasCustomTextClass
+          ? `<span class='inl underpost-text-title-modal'>${docTitle}</span>`
+          : docTitle;
+
         htmls(
           `.title-modal-${idModal}`,
           html`${renderViewTitle({
-            icon: html`<i class="inl far fa-file"></i>`,
-            text: `${documentObj.title ? documentObj.title : documentObj.location}`,
+            icon: titleIcon,
+            text: titleText,
           })} `,
         );
         htmls(`.content-render-${idModal}`, ``);

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

@@ -12,6 +12,10 @@ const Docs = {
     const docData = this.Data.find((d) => d.type === type);
     const ModalId = `modal-docs-${docData.type}`;
     const { barConfig } = await Themes[Css.currentTheme]();
+    const parentBarMode =
+      Modal.Data['modal-docs'] && Modal.Data['modal-docs'].options.barMode
+        ? Modal.Data['modal-docs'].options.barMode
+        : undefined;
 
     await Modal.Render({
       barConfig,
@@ -20,11 +24,18 @@ const Docs = {
       html: async () => {
         if (docData.renderHtml) return await docData.renderHtml();
         return html`
+          <style>
+            .iframe-${ModalId} {
+              width: 100%;
+              border: none;
+              background: white;
+              display: block;
+            }
+          </style>
           <iframe
             class="in iframe-${ModalId}"
-            style="width: 100%; border: none; background: white; display: block"
             src="${docData.url()}"
-            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox"
+            sandbox="allow-same-origin allow-scripts allow-popups allow-forms allow-popups-to-escape-sandbox allow-top-navigation"
           >
           </iframe>
         `;
@@ -34,7 +45,7 @@ const Docs = {
       route: 'docs',
       slideMenu: 'modal-menu',
       observer: true,
-      barMode: 'top-bottom-bar',
+      barMode: parentBarMode,
       query: true,
       RouterInstance: Modal.Data['modal-docs'].options.RouterInstance,
     });
@@ -166,6 +177,8 @@ const Docs = {
       icon: html`<i class="fab fa-github"></i>`,
       text: `Last Release`,
       url: function () {
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.lastReleaseUrl) return tokenOpts.lastReleaseUrl();
         return `https://github.com/underpostnet/pwa-microservices-template-ghpkg/`;
       },
     },
@@ -180,6 +193,8 @@ const Docs = {
       </svg>`,
       text: html`Demo`,
       url: function () {
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.demoUrl) return tokenOpts.demoUrl();
         return `https://underpostnet.github.io/pwa-microservices-template-ghpkg/`;
       },
     },
@@ -204,6 +219,8 @@ const Docs = {
       icon: html`<img height="20" width="20" class="doc-icon-coverage" />`,
       text: `Coverage report`,
       url: function () {
+        const tokenOpts = Docs.Tokens['modal-docs'];
+        if (tokenOpts && tokenOpts.coverageUrl) return tokenOpts.coverageUrl();
         return `${getProxyPath()}docs/coverage`;
       },
       themeEvent: () => {
@@ -223,7 +240,7 @@ const Docs = {
     },
   ],
   Tokens: {},
-  Init: async function (options) {
+  Init: async function (options = {}) {
     const { idModal } = options;
     this.Tokens[idModal] = options;
     setTimeout(() => {
@@ -284,10 +301,14 @@ const Docs = {
           break;
       }
       tabHref = docData.url();
+      const subMenuIcon =
+        options.subMenuIcon && typeof options.subMenuIcon === 'function'
+          ? options.subMenuIcon(docData.type)
+          : docData.icon;
       docMenuRender += html`
         ${await BtnIcon.Render({
           class: `in wfa main-btn-menu submenu-btn btn-docs btn-docs-${docData.type}`,
-          label: html`<span class="inl menu-btn-icon">${docData.icon}</span
+          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.Render(buildBadgeToolTipMenuOption(docData.text, 'right')),
@@ -447,7 +468,10 @@ const Docs = {
                   if (s(`.docs-card-container-${item.id}`)) {
                     s(`.docs-card-container-${item.id}`).onclick = () => {
                       if (item.id.match('demo')) {
-                        location.href = 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
+                        const demoData = Docs.Data.find((d) => d.type === 'demo');
+                        location.href = demoData
+                          ? demoData.url()
+                          : 'https://underpostnet.github.io/pwa-microservices-template-ghpkg/';
                       } else if (item.id.match('api')) {
                         if (s(`.btn-docs-api`)) s(`.btn-docs-api`).click();
                       } else {

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/Modal.js

@@ -2424,20 +2424,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 +2464,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/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/cyberia-portal/CommonCyberiaPortal.js

@@ -31,6 +31,7 @@ const CyberiaDependencies = {
   pngjs: '^7.0.0',
   jimp: '^1.6.0',
   sharp: '^0.32.5',
+  ethers: '~6.16.0',
 };
 
 export { BaseElement, ModelElement, CyberiaPortalParams, CyberiaDependencies };

package/src/client/components/cyberia-portal/CssCyberiaPortal.js

@@ -63,20 +63,62 @@ const CssCommonCyberia = async () => {
         text-align: center;
       }
 
-      .landing-title,
       h1,
       h2,
       h3 {
         font-family: var(--cy-font-retro-cta);
+      }
+
+      p {
+        font-family: var(--cy-font-retro);
+      }
+
+      .landing-title,
+      .html-main-body h1,
+      .html-main-body h2,
+      .html-main-body h3 {
         font-size: 5rem;
         color: #ffcc00;
         text-shadow: 2px 2px 0px #9e7b00;
         margin-bottom: 2rem;
       }
 
-      p {
+      /* Docs section retro styling */
+      .docs-header h1 {
+        font-family: var(--cy-font-retro-cta);
+        color: #ffcc00;
+        text-shadow: 2px 2px 0px #9e7b00;
+      }
+      .docs-card {
+        border: 2px solid #ffcc00;
+        transition: all 0.3s ease-in-out;
+      }
+      .docs-card:hover {
+        background: rgba(255, 204, 0, 0.08);
+        box-shadow:
+          0 0 10px rgba(255, 204, 0, 0.3),
+          0 0 20px rgba(255, 204, 0, 0.15);
+        transform: translateY(-3px);
+      }
+      .card-icon {
+        color: #ffcc00;
+      }
+      .card-content h3 {
+        font-family: var(--cy-font-retro-cta);
+        font-size: 1.25rem;
+      }
+      .card-content p {
+        font-family: var(--cy-font-retro);
+      }
+      .submenu-btn {
         font-family: var(--cy-font-retro);
       }
+      .submenu-btn:hover {
+        background: rgba(255, 204, 0, 0.1);
+      }
+      .down-arrow-submenu {
+        left: 102px;
+      }
 
       .object-layer-viewer-container {
         width: 100% !important;

package/src/client/components/cyberia-portal/LogInCyberiaPortal.js

@@ -10,7 +10,6 @@ const LogInCyberiaPortal = async function () {
 
     ElementsCyberiaPortal.Data.user.main.model.user = user;
 
-    // if (user.role === 'admin' || user.role === 'moderator') s(`.main-btn-admin`).classList.remove('hide');
     await ObjectLayerManagement.Reload('viewer');
   };
   const { user } = await Auth.sessionIn();

package/src/client/components/cyberia-portal/MenuCyberiaPortal.js

@@ -2,14 +2,22 @@ import { Account } from '../core/Account.js';
 import { BtnIcon } from '../core/BtnIcon.js';
 import { getId, newInstance, random } from '../core/CommonJs.js';
 import { Css, ThemeEvents, Themes, darkTheme } from '../core/Css.js';
+import { Docs } from '../core/Docs.js';
 import { EventsUI } from '../core/EventsUI.js';
 import { LogIn } from '../core/LogIn.js';
 import { LogOut } from '../core/LogOut.js';
-import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from '../core/Modal.js';
+import {
+  buildBadgeToolTipMenuOption,
+  isSubMenuOpen,
+  Modal,
+  renderMenuLabel,
+  renderViewTitle,
+  subMenuRender,
+} from '../core/Modal.js';
 import { SignUp } from '../core/SignUp.js';
 import { Translate } from '../core/Translate.js';
 import { htmls, s } from '../core/VanillaJs.js';
-import { getProxyPath } from '../core/Router.js';
+import { getProxyPath, setQueryParams } from '../core/Router.js';
 import { ElementsCyberiaPortal } from './ElementsCyberiaPortal.js';
 import Sortable from 'sortablejs';
 import { RouterCyberiaPortal, BannerAppTemplate } from './RoutesCyberiaPortal.js';
@@ -135,6 +143,27 @@ const MenuCyberiaPortal = {
             handleContainerClass: 'handle-btn-container',
             tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('chat')),
           })}
+          ${await BtnIcon.Render({
+            class: 'in wfa main-btn-menu main-btn-docs',
+            useMenuBtn: true,
+            label: html`<div class="in">
+              ${renderMenuLabel({
+                icon: html`<img class="inl cyberia-menu-icon" src="${getProxyPath()}assets/ui-icons/wiki.png" />`,
+                text: html`<span class="menu-label-text"
+                  >${Translate.Render('docs')}
+                  <i
+                    class="fas fa-caret-down inl down-arrow-submenu down-arrow-submenu-docs"
+                    style="rotate: 0deg; transition: 0.4s;"
+                  ></i
+                ></span>`,
+              })}
+            </div> `,
+            attrs: `data-id="docs"`,
+            tabHref: `${getProxyPath()}docs`,
+            handleContainerClass: 'handle-btn-container',
+            tooltipHtml: await Badge.Render(buildBadgeToolTipMenuOption('docs')),
+          })}
+          <div class="abs menu-btn-container-children-docs"></div>
           ${await BtnIcon.Render({
             class: 'in wfa main-btn-menu main-btn-admin hide',
             useMenuBtn: true,
@@ -432,6 +461,39 @@ const MenuCyberiaPortal = {
       });
     });
 
+    EventsUI.onClick(`.main-btn-docs`, async (e) => {
+      if (!isSubMenuOpen('docs') || e.isTrusted) {
+        if (e.isTrusted) setQueryParams({ cid: '' });
+        await subMenuRender('docs');
+      }
+
+      const { barConfig } = await Themes[Css.currentTheme]();
+      await Modal.Render({
+        id: 'modal-docs',
+        route: 'docs',
+        barConfig,
+        title: renderViewTitle({
+          icon: html`<img class="inl cyberia-menu-icon-modal" src="${getProxyPath()}assets/ui-icons/wiki.png" />`,
+          text: `<span class='inl cyberia-text-title-modal'>${Translate.Render('docs')}</span>`,
+        }),
+        html: async () =>
+          await Docs.Init({
+            idModal: 'modal-docs',
+            subMenuIcon: (type) =>
+              html`<img class="inl cyberia-menu-icon" src="${getProxyPath()}assets/ui-icons/arrow-right.png" />`,
+            coverageUrl: () => `${getProxyPath()}docs/hardhat-coverage`,
+            demoUrl: () => `https://client.cyberiaonline.com/`,
+            lastReleaseUrl: () => `https://github.com/underpostnet/engine-cyberia.git`,
+          }),
+        handleType: 'bar',
+        observer: true,
+        maximize: true,
+        mode: 'view',
+        slideMenu: 'modal-menu',
+        RouterInstance,
+      });
+    });
+
     EventsUI.onClick(`.main-btn-server`, async () => {
       const { barConfig } = await Themes[Css.currentTheme]();
       await Modal.Render({

package/src/client/components/cyberia-portal/RoutesCyberiaPortal.js

@@ -45,6 +45,7 @@ const RoutesCyberiaPortal = () => {
       title: 'cyberia-map-engine',
       render: () => s(`.main-btn-cyberia-map-engine`).click(),
     },
+    '/docs': { title: 'docs', render: () => s(`.main-btn-docs`).click() },
   };
 };