underpost 2.8.86 → 2.8.88

package/src/client/Default.index.js

@@ -16,9 +16,49 @@ import { SocketIo } from './components/core/SocketIo.js';
 import { SocketIoDefault } from './components/default/SocketIoDefault.js';
 import { ElementsDefault } from './components/default/ElementsDefault.js';
 import { CssDefaultDark, CssDefaultLight } from './components/default/CssDefault.js';
+import { EventsUI } from './components/core/EventsUI.js';
+import { Modal } from './components/core/Modal.js';
 
 const htmlMainBody = async () => {
-  return html`<span>Hello World!!</span>`;
+  setTimeout(() => {
+    EventsUI.onClick('.get-started-button', (e) => {
+      e.preventDefault();
+      location.href = `https://www.nexodev.org/docs/?cid=src`;
+    });
+  });
+  return html`
+    <div class="landing-container">
+      <div class="content-wrapper">
+        <h1 class="animated-text">
+          <span class="greeting">Hello, World!</span>
+          <span class="subtitle">Welcome to Our Platform</span>
+        </h1>
+
+        <div class="features">
+          <div class="feature-card">
+            <i class="icon">🚀</i>
+            <h3>Fast & Reliable</h3>
+            <p>Lightning-fast performance with 99.9% uptime</p>
+          </div>
+          <div class="feature-card">
+            <i class="icon">🎨</i>
+            <h3>Beautiful UI</h3>
+            <p>Modern and intuitive user interface</p>
+          </div>
+          <div class="feature-card">
+            <i class="icon">⚡</i>
+            <h3>Powerful Features</h3>
+            <p>Everything you need in one place</p>
+          </div>
+        </div>
+
+        <button class="cta-button get-started-button">
+          Get Started
+          <span class="button-icon">→</span>
+        </button>
+      </div>
+    </div>
+  `;
 };
 
 window.onload = () =>
@@ -39,5 +79,6 @@ window.onload = () =>
       await LogOutDefault();
       await SignUpDefault();
       await Keyboard.Init({ callBackTime: DefaultParams.EVENT_CALLBACK_TIME });
+      await Modal.RenderSeoSanitizer();
     },
   });

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

@@ -10,7 +10,8 @@ import { Modal } from './Modal.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
-import { append, getProxyPath, htmls, s } from './VanillaJs.js';
+import { append, htmls, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 
 const Account = {
   UpdateEvent: {},
@@ -194,7 +195,14 @@ const Account = {
       await this.instanceModalUiEvents({ user });
     });
     return html`
-      <input type="file" accept="${profileFileAccept.join(', ')}" class="account-profile-image-input hide" />
+      <label for="account-profile-image-input-label"
+        ><span class="hide">Profile Image</span>
+        <input
+          type="file"
+          accept="${profileFileAccept.join(', ')}"
+          class="account-profile-image-input hide"
+          id="account-profile-image-input-label"
+      /></label>
       ${renderWave({ id: waveAnimationId })}
 
       <form class="in">

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

@@ -2,8 +2,9 @@
 // https://www.ag-grid.com/javascript-data-grid/themes/
 
 import { ThemeEvents, darkTheme } from './Css.js';
-import { append, getProxyPath, htmls, s } from './VanillaJs.js';
-import * as agGrid from 'ag-grid-community';
+import { append, htmls, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
+import './Pagination.js';
 
 const AgGrid = {
   grids: {},
@@ -14,6 +15,9 @@ const AgGrid = {
       // Grid Options: Contains all of the grid configurations
       const gridOptions = {
         // 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,
         defaultColDef: {
@@ -23,6 +27,12 @@ const AgGrid = {
           filter: true,
           autoHeight: true,
         },
+        rowClassRules: {
+          'row-new-highlight': (params) => {
+            // a temporary flag we can set on new rows to highlight them
+            return params.data && params.data._new;
+          },
+        },
         // domLayout: 'autoHeight', || 'normal'
         // Column Definitions: Defines & controls grid columns.
         columnDefs: options?.gridOptions?.rowData?.[0]
@@ -48,13 +58,17 @@ const AgGrid = {
         }
       };
     });
+    const usePagination = options?.usePagination;
     return html`
-      <div
-        class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
-        style="${options?.style
-          ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
-          : 'height: 500px'}"
-      ></div>
+      <div>
+        <div
+          class="${id} ${this.theme}${options?.darkTheme ? `-dark` : ''}"
+          style="${options?.style
+            ? Object.keys(options.style).map((styleKey) => `${styleKey}: ${options.style[styleKey]}; `)
+            : 'height: 500px'}"
+        ></div>
+        ${usePagination ? `<ag-pagination id="ag-pagination-${id}"></ag-pagination>` : ''}
+      </div>
     `;
   },
   RenderStyle: async function (
@@ -136,6 +150,10 @@ const AgGrid = {
           ${darkTheme
             ? html`
                 <style>
+                  .ag-row.row-new-highlight {
+                    background-color: #6d68ff !important;
+                    transition: background-color 1s ease-out;
+                  }
                   .ag-cell-data-changed,
                   .ag-cell-data-changed-animation {
                     background-color: #6d68ff !important;
@@ -145,6 +163,10 @@ const AgGrid = {
                 </style>
               `
             : html`<style>
+                .ag-row.row-new-highlight {
+                  background-color: #d0eaf8 !important;
+                  transition: background-color 1s ease-out;
+                }
                 .ag-cell-data-changed,
                 .ag-cell-data-changed-animation {
                   background-color: #d1d1d1 !important;

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

@@ -4,16 +4,17 @@ import { loggerFactory } from './Logger.js';
 import { LogIn } from './LogIn.js';
 import { LogOut } from './LogOut.js';
 import { NotificationManager } from './NotificationManager.js';
-import { SignUp } from './SignUp.js';
 import { Translate } from './Translate.js';
 import { s } from './VanillaJs.js';
 
-const logger = loggerFactory(import.meta);
+const logger = loggerFactory(import.meta, { trace: true });
 
 const token = Symbol('token');
 
 const guestToken = Symbol('guestToken');
 
+const refreshTimeout = Symbol('refreshTimeout');
+
 const Auth = {
   [token]: '',
   [guestToken]: '',
@@ -35,50 +36,65 @@ const Auth = {
   getGuestToken: function () {
     return this[guestToken];
   },
-  // jwt
   getJWT: function () {
-    return `Bearer ${this.getToken() ? this.getToken() : this.getGuestToken()}`;
+    if (Auth.getToken()) return `Bearer ${Auth.getToken()}`;
+    if (Auth.getGuestToken()) return `Bearer ${Auth.getGuestToken()}`;
+    return '';
   },
-  signUpToken: async function (
-    result = {
-      data: {
-        token: '',
-        user: null,
-      },
-    },
-  ) {
+  decodeJwt: function (token) {
     try {
-      localStorage.setItem('jwt', result.data.token);
-      await SignUp.Trigger(result.data);
-      await Auth.sessionIn();
-    } catch (error) {
-      logger.error(error);
-      localStorage.removeItem('jwt');
+      return JSON.parse(atob(token.split('.')[1]));
+    } catch (e) {
+      return null;
     }
   },
+  scheduleTokenRefresh: function () {
+    if (this[refreshTimeout]) {
+      clearTimeout(this[refreshTimeout]);
+    }
+
+    const currentToken = Auth.getToken();
+    if (!currentToken) return;
+
+    const payload = Auth.decodeJwt(currentToken);
+    if (!payload || !payload.refreshExpiresAt) return;
+
+    const expiresIn = payload.refreshExpiresAt - Date.now();
+    const refreshBuffer = 2 * 60 * 1000; // 2 minutes
+    const refreshIn = expiresIn - refreshBuffer;
+
+    logger.info(`Token refresh in ${refreshIn / (1000 * 60)} minutes`);
+
+    if (refreshIn <= 0) return; // Already expired or close to it
+
+    this[refreshTimeout] = setTimeout(async () => {
+      const { data, status } = await UserService.get({ id: 'auth' });
+      if (status === 'success') {
+        logger.info('Refreshed access token.');
+        Auth.setToken(data.token);
+        localStorage.setItem('jwt', data.token);
+        Auth.scheduleTokenRefresh();
+      } else Auth.sessionOut();
+    }, refreshIn);
+  },
   sessionIn: async function (userServicePayload) {
     try {
       const token = userServicePayload?.data?.token ? userServicePayload.data.token : localStorage.getItem('jwt');
-
       if (token) {
-        this.setToken(token);
+        Auth.setToken(token);
+
         const result = userServicePayload
-          ? userServicePayload
-          : await (async () => {
-              const _result = await UserService.get({ id: 'auth' });
-              return {
-                status: _result.status,
-                message: _result.message,
-                data: {
-                  user: _result.data,
-                },
-              };
-            })();
+          ? userServicePayload // From login/signup
+          : await UserService.get({ id: 'auth' });
+
         const { status, data, message } = result;
         if (status === 'success') {
+          Auth.setToken(data.token);
           localStorage.setItem('jwt', token);
+          Auth.renderSessionUI();
           await LogIn.Trigger({ user: data.user });
           await Account.updateForm(data.user);
+          Auth.scheduleTokenRefresh();
           return { user: data.user };
         }
         if (message && message.match('expired'))
@@ -89,41 +105,68 @@ const Auth = {
               status: 'warning',
             });
           });
-        return await Auth.sessionOut();
       }
-
-      // anon guest session
-      this.deleteToken();
+      // Important delete session token if guest token already exists
+      Auth.deleteToken();
       localStorage.removeItem('jwt');
-      let guestToken = localStorage.getItem('jwt.g');
 
-      if (!guestToken) {
-        const result = await UserService.post({ id: 'guest' });
-        localStorage.setItem('jwt.g', result.data.token);
-        guestToken = result.data.token;
-      }
-
-      this.setGuestToken(guestToken);
-      let { data, status, message } = await UserService.get({ id: 'auth' });
-      if (status === 'error') {
-        if (message && message.match('expired')) {
-          localStorage.removeItem('jwt.g');
-          return await Auth.sessionOut();
-        } else throw new Error(message);
+      // Anon guest session
+      let guestToken = localStorage.getItem('jwt.g');
+      if (guestToken) {
+        Auth.setGuestToken(guestToken);
+        let { data, status, message } = await UserService.get({ id: 'auth' });
+        if (status === 'success') {
+          await LogIn.Trigger(data);
+          await Account.updateForm(data.user);
+          return data;
+        } else logger.error(message);
       }
-      await Account.updateForm(data);
-      return { user: data };
+      return await Auth.sessionOut();
     } catch (error) {
       logger.error(error);
       return { user: UserMock.default };
     }
   },
   sessionOut: async function () {
-    this.deleteToken();
-    localStorage.removeItem('jwt');
-    const result = await this.sessionIn();
-    await LogOut.Trigger(result);
-    return result;
+    {
+      const result = await UserService.delete({ id: 'logout' });
+      localStorage.removeItem('jwt');
+      Auth.deleteToken();
+      if (this[refreshTimeout]) {
+        clearTimeout(this[refreshTimeout]);
+      }
+      Auth.renderGuestUi();
+      LogIn.Scope.user.main.model.user = {};
+      await LogOut.Trigger(result);
+    }
+    {
+      localStorage.removeItem('jwt.g');
+      Auth.deleteGuestToken();
+      const result = await UserService.post({ id: 'guest' });
+      localStorage.setItem('jwt.g', result.data.token);
+      Auth.setGuestToken(result.data.token);
+      return await Auth.sessionIn();
+    }
+  },
+  renderSessionUI: function () {
+    s(`.main-btn-log-in`).style.display = 'none';
+    s(`.main-btn-sign-up`).style.display = 'none';
+    s(`.main-btn-log-out`).style.display = null;
+    s(`.main-btn-account`).style.display = null;
+    setTimeout(() => {
+      if (s(`.modal-log-in`)) s(`.btn-close-modal-log-in`).click();
+      if (s(`.modal-sign-up`)) s(`.btn-close-modal-sign-up`).click();
+    });
+  },
+  renderGuestUi: function () {
+    s(`.main-btn-log-in`).style.display = null;
+    s(`.main-btn-sign-up`).style.display = null;
+    s(`.main-btn-log-out`).style.display = 'none';
+    s(`.main-btn-account`).style.display = 'none';
+    setTimeout(() => {
+      if (s(`.modal-log-out`)) s(`.btn-close-modal-log-out`).click();
+      if (s(`.modal-account`)) s(`.btn-close-modal-account`).click();
+    });
   },
 };
 

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

@@ -1,7 +1,7 @@
 import { getId, s4 } from './CommonJs.js';
 import { renderCssAttr } from './Css.js';
 import { ToolTip } from './ToolTip.js';
-import { getAllChildNodes, s } from './VanillaJs.js';
+import { getAllChildNodes, htmlStrSanitize, s } from './VanillaJs.js';
 
 const BtnIcon = {
   Tokens: {},
@@ -32,7 +32,7 @@ const BtnIcon = {
       : ''}`;
     let render = html`<button
       ${options?.class ? `class="${options.class} ${tokenId}"` : ''}
-      ${options?.type ? `type="${options.type}"` : ''}
+      ${options?.type ? `type="${options.type}"` : `type="button"`}
       ${options?.style ? `style="${options.style}"` : ''}
       ${options?.attrs ? `${options.attrs}` : ''}
     >
@@ -49,6 +49,7 @@ const BtnIcon = {
             >`
           : label}
       </div>
+      <label class="hide">${htmlStrSanitize(options.label) ? htmlStrSanitize(options.label) : tokenId}</label>
     </button>`;
     if (options.tooltipHtml)
       setTimeout(() => {

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

@@ -7,9 +7,9 @@ import { Modal } from './Modal.js';
 import { NotificationManager } from './NotificationManager.js';
 import { Panel } from './Panel.js';
 import { Responsive } from './Responsive.js';
-import { listenQueryPathInstance, RouterEvents, setQueryPath } from './Router.js';
+import { listenQueryPathInstance, RouterEvents, setQueryPath, getQueryParams } from './Router.js';
 import { Translate } from './Translate.js';
-import { append, getQueryParams, getTimeZone, htmls, s, sa } from './VanillaJs.js';
+import { append, getTimeZone, htmls, s, sa } from './VanillaJs.js';
 
 // https://fullcalendar.io/docs/event-object
 
@@ -363,7 +363,6 @@ const CalendarCore = {
       const cid = getQueryParams().cid ? getQueryParams().cid : '';
       if (lastCid === cid) return;
       lastCid = cid;
-      if (options.route === 'home') Modal.homeCid = newInstance(cid);
       if (s(`.main-body-calendar-${options.idModal}`)) {
         // if (Auth.getToken())
         // else getSrrData();

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

@@ -577,8 +577,7 @@ const getCurrentTrace = () => {
   try {
     _stack;
   } catch (error) {
-    console.error(error);
-    return error;
+    return error.stack;
   }
 };
 

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

@@ -1,13 +1,14 @@
 import { marked } from 'marked';
 import { FileService } from '../../services/file/file.service.js';
-import { append, getBlobFromUint8ArrayFile, getQueryParams, getRawContentFile, htmls, s } from './VanillaJs.js';
-import { titleFormatted } from './CommonJs.js';
+import { append, getBlobFromUint8ArrayFile, getRawContentFile, htmls, s } from './VanillaJs.js';
+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 { loggerFactory } from './Logger.js';
 import { imageShimmer, renderChessPattern, renderCssAttr, styleFactory } from './Css.js';
+import { getQueryParams } from './Router.js';
 
 const logger = loggerFactory(import.meta);
 
@@ -136,12 +137,9 @@ const Content = {
       case 'svg':
       case 'gif':
       case 'png': {
-        const url = options.url
-          ? options.url
-          : file._id
-          ? getApiBaseUrl({ id: file._id, endpoint: 'file/blob' })
-          : URL.createObjectURL(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
+        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}"
@@ -150,11 +148,7 @@ const Content = {
         break;
       }
       case 'pdf': {
-        const url = options.url
-          ? options.url
-          : file._id
-          ? getApiBaseUrl({ id: file._id, endpoint: 'file/blob' })
-          : URL.createObjectURL(getBlobFromUint8ArrayFile(file.data.data, file.mimetype));
+        const url = Content.urlFactory(options);
         render += html`<iframe
           class="in ${options.class} iframe-${options.idModal}"
           ${styleFactory(options.style)}
@@ -188,6 +182,15 @@ const Content = {
     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;
+  },
 };
 
 export { Content };

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

@@ -3,7 +3,8 @@ import { CssCoreDark, CssCoreLight } from './CssCore.js';
 import { DropDown } from './DropDown.js';
 import { Modal } from './Modal.js';
 import { Translate } from './Translate.js';
-import { append, getProxyPath, htmls, s, sa } from './VanillaJs.js';
+import { append, htmls, s, sa } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 
 let ThemesScope = [];
 

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

@@ -1,7 +1,8 @@
 import { AgGrid } from './AgGrid.js';
 import { borderChar, boxShadow, scrollBarDarkRender, scrollBarLightRender } from './Css.js';
 import { LoadingAnimation } from './LoadingAnimation.js';
-import { append, getProxyPath, s } from './VanillaJs.js';
+import { append, s } from './VanillaJs.js';
+import { getProxyPath } from './Router.js';
 
 const CssCommonCore = async () => {
   if (!s(`.fa-link`))
@@ -214,6 +215,10 @@ const CssCommonCore = async () => {
       .bar-default-modal {
         overflow: hidden;
       }
+      .panel-placeholder-bottom {
+        height: 100px;
+        color: gray;
+      }
     </style>
     ${boxShadow({ selector: '.account-profile-image' })}
     <div class="ag-grid-style"></div>`;
@@ -524,6 +529,12 @@ const CssCoreDark = {
         }
         .btn-input-extension:hover {
         }
+        .section-mp-border {
+          border: 2px solid #313131;
+          border-radius: 5px;
+          padding: 5px;
+          margin: 5px;
+        }
       </style>
       ${scrollBarDarkRender()} ${borderChar(1, 'black', ['.main-body-btn-container'])}
     `,
@@ -848,6 +859,12 @@ const CssCoreLight = {
         }
         .btn-input-extension:hover {
         }
+        .section-mp-border {
+          border: 2px solid #bbb;
+          border-radius: 5px;
+          padding: 5px;
+          margin: 5px;
+        }
       </style>
       ${scrollBarLightRender()} ${borderChar(1, 'white', ['.main-body-btn-container'])}
     `,

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

@@ -1,12 +1,11 @@
 import { Badge } from './Badge.js';
 import { BtnIcon } from './BtnIcon.js';
-import { rgbToHex } from './CommonJs.js';
-import { Css, darkTheme, dynamicCol, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
+import { Css, renderCssAttr, simpleIconsRender, ThemeEvents, Themes } from './Css.js';
 import { DropDown } from './DropDown.js';
 import { buildBadgeToolTipMenuOption, Modal, renderMenuLabel, renderViewTitle } from './Modal.js';
-import { listenQueryPathInstance, setQueryPath } from './Router.js';
+import { listenQueryPathInstance, setQueryPath, closeModalRouteChangeEvent, getProxyPath } from './Router.js';
 import { Translate } from './Translate.js';
-import { getProxyPath, getQueryParams, htmls, s, sa } from './VanillaJs.js';
+import { htmls, s } from './VanillaJs.js';
 import Sortable from 'sortablejs';
 
 // https://mintlify.com/docs/quickstart
@@ -34,6 +33,7 @@ const Docs = {
       },
       maximize: true,
       mode: 'view',
+      route: 'docs',
       slideMenu: 'modal-menu',
       observer: true,
       barMode: 'top-bottom-bar',
@@ -51,7 +51,7 @@ const Docs = {
     };
     Modal.Data[ModalId].onObserverListener[ModalId]();
     Modal.Data[ModalId].onCloseListener[ModalId] = () => {
-      setQueryPath({ path: 'docs', queryPath: '' });
+      closeModalRouteChangeEvent({ closedId: ModalId });
     };
   },
   Data: [

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

@@ -4,8 +4,7 @@ import { FileService } from '../../services/file/file.service.js';
 import { AgGrid } from './AgGrid.js';
 import { Auth } from './Auth.js';
 import { BtnIcon } from './BtnIcon.js';
-import { getSubpaths, timer, uniqueArray } from './CommonJs.js';
-import { Content } from './Content.js';
+import { getSubpaths, uniqueArray } from './CommonJs.js';
 import { darkTheme, renderCssAttr } from './Css.js';
 import { EventsUI } from './EventsUI.js';
 import { fileFormDataFactory, Input, InputFile } from './Input.js';
@@ -15,7 +14,8 @@ import { NotificationManager } from './NotificationManager.js';
 import { RouterEvents } from './Router.js';
 import { Translate } from './Translate.js';
 import { Validator } from './Validator.js';
-import { copyData, downloadFile, getProxyPath, getQueryParams, s, setPath } from './VanillaJs.js';
+import { copyData, downloadFile, s } from './VanillaJs.js';
+import { getProxyPath, getQueryParams, setPath } from './Router.js';
 
 const logger = loggerFactory(import.meta);
 

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

@@ -9,35 +9,26 @@ const FullScreen = {
     Responsive.Event['full-screen-settings'] = () => {
       let fullScreenMode = checkFullScreen();
       if ((fullScreenSwitch && !fullScreenMode) || (!fullScreenSwitch && fullScreenMode))
-        if (s('.fullscreen-toggle')) ToggleSwitch.Tokens[`fullscreen-toggle`].click();
+        if (s('.fullscreen')) ToggleSwitch.Tokens[`fullscreen`].click();
     };
-    setTimeout(
-      () => (s(`.toggle-form-container-fullscreen`).onclick = () => ToggleSwitch.Tokens[`fullscreen-toggle`].click()),
-    );
-    return html`<div class="in section-mp toggle-form-container toggle-form-container-fullscreen hover">
-      <div class="fl ">
-        <div class="in fll" style="width: 70%">
-          <div class="in"><i class="fa-solid fa-expand"></i> ${Translate.Render('fullscreen')}</div>
-        </div>
-        <div class="in fll" style="width: 30%">
-          ${await ToggleSwitch.Render({
-            id: 'fullscreen-toggle',
-            containerClass: 'inl',
-            disabledOnClick: true,
-            checked: fullScreenSwitch,
-            on: {
-              unchecked: () => {
-                fullScreenSwitch = false;
-                if (checkFullScreen()) fullScreenOut();
-              },
-              checked: () => {
-                fullScreenSwitch = true;
-                if (!checkFullScreen()) fullScreenIn();
-              },
-            },
-          })}
-        </div>
-      </div>
+    return html`<div class="in section-mp">
+      ${await ToggleSwitch.Render({
+        wrapper: true,
+        wrapperLabel: html`<i class="fa-solid fa-expand"></i> ${Translate.Render('fullscreen')}`,
+        id: 'fullscreen',
+        disabledOnClick: true,
+        checked: fullScreenSwitch,
+        on: {
+          unchecked: () => {
+            fullScreenSwitch = false;
+            if (checkFullScreen()) fullScreenOut();
+          },
+          checked: () => {
+            fullScreenSwitch = true;
+            if (!checkFullScreen()) fullScreenIn();
+          },
+        },
+      })}
     </div>`;
   },
 };