@underpostnet/cyberia 3.3.77 → 3.4.0

package/src/cli/socketsecurity.js

@@ -0,0 +1,260 @@
+/**
+ * Socket security domain: the security audit of a checkout — the packages it installs and its own
+ * source code — and the patches it carries.
+ *
+ * {@link module:src/server/security/socketsecurity.js} owns the Socket CLI integration and the
+ * report; this domain is the operator surface over it: the audit a person or a workflow runs,
+ * the remediation pass, and the `prepare` hook that replays the patch manifest.
+ * @module src/cli/socketsecurity.js
+ * @namespace UnderpostSocketSecurity
+ */
+
+import fs from 'fs-extra';
+import nodePath from 'node:path';
+import { auditRuntimeDependencies } from '../server/build/package.js';
+import { loggerFactory } from '../server/ops/logger.js';
+import SocketSecurityService, {
+  fix,
+  npmAudit,
+  packageAlerts,
+  npmAuditFix,
+  patchApply,
+  patchGet,
+  patchManifestFactory,
+  patchScan,
+  patchSelectionFactory,
+  patchSetup,
+  publishedPackagesFactory,
+  reportViolates,
+  scan,
+  securityReportFactory,
+  socketEnvFactory,
+  socketVersion,
+  writeSecurityReports,
+} from '../server/security/socketsecurity.js';
+import Underpost from '../index.js';
+
+const logger = loggerFactory(import.meta);
+
+/**
+ * @class UnderpostSocketSecurity
+ * @description Audits a checkout's dependencies and source code through Socket, and remediates and patches its dependencies.
+ * @memberof UnderpostSocketSecurity
+ */
+class UnderpostSocketSecurity {
+  static API = {
+    /**
+     * @method audit
+     * @description Runs the audit and writes its reports. Dependency security: segregation,
+     * `npm audit`, the Socket patch scan and, with an API token, the Socket full scan with the
+     * local reachability analysis when asked. Source code risk: with an API token, the alerts
+     * Socket's registry analysis raises on this project's own published package, as refactoring
+     * tasks at their locations.
+     * @param {object} [params]
+     * @param {string} [params.root] - Checkout to audit.
+     * @param {string} [params.out] - Report directory.
+     * @param {boolean} [params.reach] - Run the reachability analysis with the scan.
+     * @param {object} [params.remediation] - Actions a remediation pass took before this audit.
+     * @returns {Promise<object>} The report, with the files written.
+     * @memberof UnderpostSocketSecurity
+     */
+    async audit({
+      root = process.cwd(),
+      out = nodePath.join(root, SocketSecurityService.REPORT_DIRECTORY),
+      reach = false,
+      remediation = {},
+    } = {}) {
+      const env = socketEnvFactory();
+      const dependencies = await auditRuntimeDependencies({ root });
+      const audit = npmAudit({ root });
+      const patches = patchScan({ root, env });
+      if (reach && !env.token)
+        logger.warn('Reachability analysis needs a Socket API token', { variable: SocketSecurityService.ENV.token });
+      const scanResult = env.token ? scan({ root, env, reach }) : null;
+      const packageJson = fs.readJsonSync(nodePath.join(root, 'package.json'));
+      const ownPackages = SocketSecurityService.ownPackageNamesFactory({ packageJson });
+      const ownAlerts = env.token
+        ? packageAlerts({ root, env, packages: publishedPackagesFactory({ root, packageJson, ownPackages }) })
+        : null;
+      const report = securityReportFactory({
+        root,
+        packageJson,
+        ownPackages,
+        dependencies,
+        npmAudit: audit.summary,
+        scan: scanResult,
+        packageAlerts: ownAlerts,
+        patchScan: patches,
+        manifest: patchManifestFactory(root),
+        remediation,
+        env,
+        cliVersion: socketVersion({ root }),
+      });
+      const files = writeSecurityReports({
+        report,
+        directory: out,
+        artifacts: {
+          npmAudit: audit.raw,
+          scan: scanResult?.report ?? null,
+          scanArtifacts: scanResult?.artifacts ?? null,
+          packageAlerts: ownAlerts?.artifacts ?? null,
+          reach: scanResult?.facts ?? null,
+          patchScan: patches.data,
+        },
+      });
+      const { dependencySecurity: dependency, sourceCodeRisk: source } = report;
+      logger.info('Security audit complete', {
+        scan: report.scan.skipped ?? { healthy: report.scan.healthy, url: report.scan.url },
+        dependencySecurity: {
+          findings: dependency.counts,
+          misplacedDependencies: dependency.segregation.misplaced.map(({ name }) => name),
+          patchesAvailable: dependency.patches.scan.available.length,
+          patchesInManifest: dependency.patches.manifest.patches.length,
+          deferred: dependency.deferred.length,
+        },
+        sourceCodeRisk: {
+          status: source.status,
+          analyzed: source.analyzed.map(({ name, version }) => `${name}@${version}`),
+          findings: source.counts,
+          tasks: source.tasks.map(({ label, locations }) => `${label}: ${locations.length}`),
+        },
+        files,
+      });
+      return { ...report, files };
+    },
+
+    /**
+     * @method remediate
+     * @description The non-breaking remediation pass: `npm audit fix`, every available Socket
+     * patch, `socket fix` without major upgrades unless allowed, and a final manifest apply.
+     * @param {object} [params]
+     * @param {string} [params.root] - Checkout to remediate.
+     * @param {string} [params.out] - Directory `socket fix` writes its upgrade list into.
+     * @param {boolean} [params.majorUpdates] - Let `socket fix` apply major upgrades.
+     * @returns {Promise<object>} Results by action name.
+     * @memberof UnderpostSocketSecurity
+     */
+    async remediate({
+      root = process.cwd(),
+      out = nodePath.join(root, SocketSecurityService.REPORT_DIRECTORY),
+      majorUpdates = false,
+    } = {}) {
+      const env = socketEnvFactory();
+      fs.ensureDirSync(out);
+      const actions = { 'npm audit fix': npmAuditFix({ root }) };
+      const { selected, skipped } = patchSelectionFactory(patchScan({ root, env }).summary.available);
+      actions['socket patch get'] = [
+        ...selected.map(({ uuid, purl }) => {
+          const { ok, message } = patchGet({ root, env, identifier: uuid });
+          return { uuid, purl, ok, message };
+        }),
+        ...skipped.map(({ uuid, purl, reason }) => ({ uuid, purl, skipped: reason })),
+      ];
+      actions['socket fix'] = env.token
+        ? fix({
+            root,
+            env,
+            majorUpdates,
+            outputFile: nodePath.join(out, SocketSecurityService.REPORT_FILES.fixUpgrades),
+          })
+        : { skipped: `${SocketSecurityService.ENV.token} is not set` };
+      actions['socket patch apply'] = patchApply({ root, env });
+      logger.info('Remediation pass complete', actions);
+      return actions;
+    },
+
+    /**
+     * @method applyPatches
+     * @description Applies the patch manifest; the `prepare` hook. A host without the
+     * Socket CLI and a checkout without a manifest are both no-ops, a patch that fails to apply
+     * fails the install.
+     * @param {object} [params]
+     * @param {string} [params.root] - Checkout to patch.
+     * @param {boolean} [params.dryRun] - Verify without writing.
+     * @returns {object} The apply result.
+     * @throws {Error} When a recorded patch does not apply.
+     * @memberof UnderpostSocketSecurity
+     */
+    applyPatches({ root = process.cwd(), dryRun = false } = {}) {
+      const result = patchApply({ root, dryRun });
+      if (result.unavailable) {
+        logger.info('Socket CLI not installed; patch manifest not applied', {
+          install: `npm install -g ${SocketSecurityService.CLI_PACKAGE}`,
+        });
+        return result;
+      }
+      if (!result.ok || result.failed > 0)
+        throw new Error(
+          `[socketsecurity] patch apply failed: ${result.message || `${result.failed} patch(es) failed`}`,
+        );
+      logger.info(result.status === 'no_manifest' ? 'No patch manifest to apply' : 'Patch manifest applied', {
+        manifest: SocketSecurityService.MANIFEST_PATH,
+        patchesApplied: result.patchesApplied,
+        alreadyPatched: result.alreadyPatched,
+        dryRun,
+      });
+      return result;
+    },
+
+    /**
+     * @method callback
+     * @description `underpost socketsecurity` entrypoint. Without an operation flag it runs the
+     * audit.
+     * @param {object} [options]
+     * @param {boolean} [options.audit] - Run the audit and write the reports.
+     * @param {boolean} [options.reach] - Include the reachability analysis in the scan.
+     * @param {boolean} [options.ci] - Audit, then fail on a policy violation or a finding at `--fail-on`.
+     * @param {string} [options.failOn] - Severity `--ci` fails at.
+     * @param {boolean} [options.fix] - Run the remediation pass before the audit.
+     * @param {boolean} [options.major] - Let the remediation pass apply major upgrades.
+     * @param {boolean} [options.patchScan] - Scan the installed packages for available patches.
+     * @param {string} [options.patchGet] - Download and apply one patch.
+     * @param {boolean} [options.patchApply] - Apply the patch manifest.
+     * @param {boolean} [options.patchSetup] - Install the `prepare` hook.
+     * @param {string} [options.out] - Report directory.
+     * @param {boolean} [options.dryRun] - Preview `--patch-setup`; verify only for `--patch-apply`.
+     * @returns {Promise<object>} The operation result.
+     * @memberof UnderpostSocketSecurity
+     */
+    async callback(options = {}) {
+      const root = process.cwd();
+      const out = nodePath.resolve(root, options.out || SocketSecurityService.REPORT_DIRECTORY);
+      const dryRun = options.dryRun === true;
+
+      if (options.patchSetup) {
+        const result = patchSetup({ root, dryRun });
+        logger.info(
+          result.changed ? `prepare hook ${dryRun ? 'to install' : 'installed'}` : 'prepare hook present',
+          result,
+        );
+        return result;
+      }
+      if (options.patchApply) return Underpost.socketSecurity.applyPatches({ root, dryRun });
+      if (options.patchGet) {
+        const result = patchGet({ root, identifier: options.patchGet });
+        if (!result.ok) throw new Error(`[socketsecurity] patch get failed: ${result.message}`);
+        logger.info('Socket patch recorded and applied', result.data);
+        return result;
+      }
+      if (options.patchScan) {
+        const result = patchScan({ root });
+        if (!result.ok) throw new Error(`[socketsecurity] patch scan failed: ${result.message}`);
+        logger.info('Socket patches available', result.summary);
+        return result;
+      }
+
+      const remediation = options.fix
+        ? await Underpost.socketSecurity.remediate({ root, out, majorUpdates: options.major === true })
+        : {};
+      const report = await Underpost.socketSecurity.audit({ root, out, reach: options.reach === true, remediation });
+      if (options.ci && reportViolates(report, options.failOn))
+        throw new Error(
+          `[socketsecurity] policy gate failed (fail-on ${options.failOn || 'high'}); ` +
+            `see ${nodePath.join(out, SocketSecurityService.REPORT_FILES.markdown)}`,
+        );
+      return report;
+    },
+  };
+}
+
+export default UnderpostSocketSecurity;

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

@@ -16,6 +16,9 @@ const CssCommonCore = async () => {
     );
   await AgGrid.RenderStyle();
   return html`<style>
+      .top-bar {
+        transition: 0.3s;
+      }
       .top-bar-app-icon {
         width: 40px;
         height: 40px;

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

@@ -129,6 +129,9 @@ class Modal {
   /** @type {Object.<string, ModalDataEntry>} */
   static Data = {};
 
+  /** @type {Function|null} Recomputes visibility of the search/home toggle button; set once the slide-menu modal renders it. */
+  static updateBarCustomVisibility = null;
+
   /**
    * Bottom offset of the slide-menu area for the given options.
    * @param {ModalRenderOptions} options
@@ -228,6 +231,10 @@ class Modal {
     const originHeightTopBar = 50;
     options.heightBottomBar = 0;
     options.heightTopBar = 100;
+    // A view sits under its slide menu's bars, so it follows that menu's bar mode unless it
+    // names one — otherwise a 'top-bottom-bar' shell opens every view 100px down instead of 50px.
+    if (options && !options.barMode && options.slideMenu && Modal.Data[options.slideMenu]?.options?.barMode)
+      options.barMode = Modal.Data[options.slideMenu].options.barMode;
     if (options && options.barMode && options.barMode === 'top-bottom-bar') {
       options.heightTopBar = 50;
       options.heightBottomBar = 50;
@@ -297,6 +304,9 @@ class Modal {
               route: options.route,
               RouterInstance: options.RouterInstance,
             });
+            // Path just changed away from (or back to) home — recompute the search/home
+            // toggle's visibility instead of leaving it stuck on its last computed state.
+            setTimeout(() => Modal.updateBarCustomVisibility?.());
           }
 
           break;
@@ -319,10 +329,15 @@ class Modal {
                       padding: 5px;
                     }
                     .default-slide-menu-top-bar-fix-title-container-text {
-                      font-size: 26px;
-                      top: 8px;
                       color: ${darkTheme ? '#ffffff' : '#000000'};
                     }
+                    /* Themes size and offset the title for the 100px banner with !important;
+                       the 50px one has to win over them or the title spills into the menu. */
+                    .slide-menu-top-bar-fix .default-slide-menu-top-bar-fix-title-container-text {
+                      font-size: 26px !important;
+                      top: 8px !important;
+                      left: 0px !important;
+                    }
                   </style>`;
                 } else {
                   style = html`<style>
@@ -428,6 +443,28 @@ class Modal {
               s('body').classList[collapsed ? 'add' : 'remove']('main-btn-menu-top-fixed-active');
               s('body').classList[collapsed && menuClosed ? 'add' : 'remove']('main-btn-menu-top-fixed-title-offset');
             };
+            // Hides the search/home toggle only while it's showing the "close" (home) icon
+            // AND the body is already scrolled to top — nothing left for it to do there.
+            // Reactive: called on every scroll tick and state change, so it restores to its
+            // normal visible state the moment either condition stops holding.
+            const updateBarCustomVisibility = () => {
+              const barCustom = s(`.main-body-btn-bar-custom`);
+              if (!barCustom || !options?.slideMenuTopBarBannerFix) return;
+              const mainBody = s(`.main-body`);
+              const atTop = !!mainBody && mainBody.scrollTop <= 0;
+              const bannerFix = s(`.slide-menu-top-bar-fix`);
+              const bannerVisible = !!bannerFix && parseInt(bannerFix.style.top, 10) >= 0;
+              const isHomePath = location.pathname === getProxyPath();
+              // Never hide while the open (magnifying-glass) icon is showing — that's the
+              // idle "click to search" state, not the "close/home" state this hide targets.
+              const openIconHidden =
+                !!s(`.main-body-btn-ui-bar-custom-open`) &&
+                s(`.main-body-btn-ui-bar-custom-open`).classList.contains('hide');
+              barCustom.classList[bannerVisible && isHomePath && atTop && openIconHidden ? 'add' : 'remove']('hide');
+            };
+            // Exposed statically so other code paths (e.g. opening a view/route) can force a
+            // recompute — otherwise the hidden state goes stale once the path stops being home.
+            Modal.updateBarCustomVisibility = updateBarCustomVisibility;
             barConfig.buttons.menu.onClick = () => {
               Modal.Data[idModal][options.mode].width = slideMenuWidth;
               s(`.btn-menu-${idModal}`).classList.add('hide');
@@ -452,6 +489,10 @@ class Modal {
               }
               syncFixedMenuButton();
               Responsive.triggerChanged(`slide-menu-${idModal}`);
+              if (options.onExtendMenu) options.onExtendMenu();
+              Object.keys(this.Data[idModal].onExtendMenuListener).map((keyListener) =>
+                this.Data[idModal].onExtendMenuListener[keyListener](),
+              );
             };
             barConfig.buttons.close.onClick = () => {
               Modal.Data[idModal][options.mode].width = 0;
@@ -476,6 +517,10 @@ class Modal {
               }
               syncFixedMenuButton();
               Responsive.triggerChanged(`slide-menu-${idModal}`);
+              if (options.onCollapseMenu) options.onCollapseMenu();
+              Object.keys(this.Data[idModal].onCollapseMenuListener).map((keyListener) =>
+                this.Data[idModal].onCollapseMenuListener[keyListener](),
+              );
             };
             transition += `, width 0.3s`;
 
@@ -532,14 +577,11 @@ class Modal {
                 Modal.actionBtnCenter();
               };
 
-              // Fixed top-left hamburger, shown only while the top bar is collapsed
-              // (main-body-btn-ui-close hidden). Not needed for 'top-bottom-bar' which
-              // keeps its own center action button in the bottom bar.
-              if (
-                idModal === 'modal-menu' &&
-                options.mode !== 'slide-menu-right' &&
-                options.barMode !== 'top-bottom-bar'
-              ) {
+              // Fixed top-left hamburger, shown only while the bars are collapsed
+              // (main-body-btn-ui-close hidden): it stands in for the left menu hamburger the
+              // collapse hid — the top bar's, or the bottom bar's under 'top-bottom-bar'. A right
+              // menu keeps its floating .main-body-btn-menu beside the menu edge instead.
+              if (idModal === 'modal-menu' && options.mode !== 'slide-menu-right') {
                 append(
                   'body',
                   html`
@@ -587,19 +629,38 @@ class Modal {
                   s(`.main-body-btn-ui-bar-custom-open`).classList.remove('hide');
                   s(`.main-body-btn-ui-bar-custom-close`).classList.add('hide');
                   s(`.slide-menu-top-bar-fix`).style.top = '0px';
+
+                  setTimeout(async () => {
+                    setTimeout(() => {
+                      s(`.action-btn-home`).click();
+                    });
+                    const mainBody = s(`.main-body`);
+                    if (mainBody && mainBody.scrollTop > 0) {
+                      mainBody.scrollTo({ top: 0, behavior: 'smooth' });
+                    }
+                    updateBarCustomVisibility();
+                  });
                 } else {
                   s(`.main-body-btn-ui-bar-custom-open`).classList.add('hide');
                   s(`.main-body-btn-ui-bar-custom-close`).classList.remove('hide');
                   s(`.slide-menu-top-bar-fix`).style.top = '-100px';
                   s(`.top-bar-search-box-container`).click();
                 }
+                updateBarCustomVisibility();
                 if (Modal.mobileModal()) {
                   btnCloseEvent();
                 }
               };
 
-              let _heightTopBar, _heightBottomBar, _topMenu;
+              let _heightTopBar, _heightBottomBar, _topMenu, _barsAnimationTimeout;
+              // The layout offsets below are set inline, so they only ease while this class is on.
+              const animateBarsToggle = () => {
+                s('body').classList.add('ui-bars-animating');
+                clearTimeout(_barsAnimationTimeout);
+                _barsAnimationTimeout = setTimeout(() => s('body').classList.remove('ui-bars-animating'), 300);
+              };
               s(`.main-body-btn-ui`).onclick = () => {
+                animateBarsToggle();
                 if (s(`.main-body-btn-ui-open`).classList.contains('hide')) {
                   s(`.main-body-btn-ui-open`).classList.remove('hide');
                   s(`.main-body-btn-ui-close`).classList.add('hide');
@@ -608,8 +669,7 @@ class Modal {
                   _topMenu = newInstance(s(`.modal-menu`).style.top);
                   options.heightTopBar = 0;
                   options.heightBottomBar = 0;
-                  s(`.slide-menu-top-bar`).classList.add('hide');
-                  s(`.bottom-bar`).classList.add('hide');
+                  s('body').classList.add('ui-bars-collapsed');
                   syncFixedMenuButton();
                   s(`.modal-menu`).style.top = '0px';
                   s(`.main-body-btn-container`).style.top = '50px';
@@ -624,8 +684,7 @@ class Modal {
                   options.heightBottomBar = _heightBottomBar;
                   s(`.modal-menu`).style.top = _topMenu;
                   s(`.main-body-btn-container`).style.top = `${options.heightTopBar + 50}px`;
-                  s(`.slide-menu-top-bar`).classList.remove('hide');
-                  s(`.bottom-bar`).classList.remove('hide');
+                  s('body').classList.remove('ui-bars-collapsed');
                   syncFixedMenuButton();
                   s(`.main-body`).style.top = `${options.heightTopBar}px`;
                   s(`.main-body`).style.height = `${windowGetH() - options.heightTopBar}px`;
@@ -649,13 +708,62 @@ class Modal {
                   );
                 }
               };
+              updateBarCustomVisibility();
               Modal.setTopBannerLink();
             });
 
             const inputSearchBoxId = `top-bar-search-box`;
             append(
               'body',
-              html` <div class="fix modal slide-menu-top-bar">
+              html`<style>
+                  /* Collapsing slides the bars off-screen instead of removing them; they turn
+                     invisible only once the slide ends, so no hidden control stays focusable. */
+                  .slide-menu-top-bar,
+                  .bottom-bar {
+                    transition:
+                      transform 0.3s ease,
+                      opacity 0.3s ease,
+                      visibility 0s linear 0s !important;
+                  }
+                  body.ui-bars-collapsed .slide-menu-top-bar {
+                    transform: translateY(-100%);
+                  }
+                  body.ui-bars-collapsed .bottom-bar {
+                    transform: translateY(100%) !important;
+                  }
+                  /* A bottom bar rendered inside the top bar leaves with it. */
+                  body.ui-bars-collapsed .slide-menu-top-bar .bottom-bar {
+                    transform: none !important;
+                  }
+                  body.ui-bars-collapsed .slide-menu-top-bar,
+                  body.ui-bars-collapsed .bottom-bar {
+                    visibility: hidden;
+                    pointer-events: none;
+                    transition:
+                      transform 0.3s ease,
+                      opacity 0.3s ease,
+                      visibility 0s linear 0.3s !important;
+                  }
+                  body.ui-bars-animating .main-body,
+                  body.ui-bars-animating .main-body-btn-container {
+                    transition:
+                      top 0.3s ease,
+                      left 0.3s ease,
+                      height 0.3s ease,
+                      opacity 0.3s ease !important;
+                  }
+                  @media (prefers-reduced-motion: reduce) {
+                    .slide-menu-top-bar,
+                    .bottom-bar,
+                    body.ui-bars-collapsed .slide-menu-top-bar,
+                    body.ui-bars-collapsed .bottom-bar,
+                    body.ui-bars-animating .main-body,
+                    body.ui-bars-animating .main-body-btn-container {
+                      transition: none !important;
+                    }
+                  }
+                </style>
+                <div class="fix modal slide-menu-top-bar">
                 <div
                   class="fl top-bar  ${options.barClass ? options.barClass : ''}"
                   style="height: ${originHeightTopBar}px;"
@@ -748,24 +856,28 @@ class Modal {
                     </div>`
                   : ''}
                 ${idModal === 'modal-menu' && options.mode !== 'slide-menu-right'
-                  ? html`<div
-                        class="abs main-btn-menu-top-container"
-                        style="bottom: 0px; left: 0px; z-index: 10; height: ${originHeightTopBar}px; width: ${originHeightTopBar}px"
-                      >
-                        ${await BtnIcon.instance({
-                          style: `height: 100%`,
-                          class: `in fll main-btn-menu-top action-bar-box action-btn-center-top`,
-                          label: html`<div class="abs center">
-                            <i class="far fa-square btn-bar-center-icon-square hide"></i>
-                            <span class="btn-bar-center-icon-close hide">${barConfig.buttons.close.label}</span>
-                            <span class="btn-bar-center-icon-menu">${barConfig.buttons.menu.label}</span>
-                          </div>`,
-                        })}
-                      </div>
+                  ? html`${options.barMode === 'top-bottom-bar'
+                        ? ''
+                        : html`<div
+                            class="abs main-btn-menu-top-container"
+                            style="bottom: 0px; left: 0px; z-index: 10; height: ${originHeightTopBar}px; width: ${originHeightTopBar}px"
+                          >
+                            ${await BtnIcon.instance({
+                              style: `height: 100%`,
+                              class: `in fll main-btn-menu-top action-bar-box action-btn-center-top`,
+                              label: html`<div class="abs center">
+                                <i class="far fa-square btn-bar-center-icon-square hide"></i>
+                                <span class="btn-bar-center-icon-close hide">${barConfig.buttons.close.label}</span>
+                                <span class="btn-bar-center-icon-menu">${barConfig.buttons.menu.label}</span>
+                              </div>`,
+                            })}
+                          </div>`}
 
                       <style>
+                        /* Under 'top-bottom-bar' the left menu hamburger is the bottom bar's, so the
+                           banner has no top bar button to clear. */
                         .a-link-top-banner {
-                          padding-left: 35px;
+                          padding-left: ${options.barMode === 'top-bottom-bar' ? 0 : 35}px;
                         }
                         .main-body-btn-bar-custom {
                           top: 50px !important;
@@ -789,7 +901,11 @@ class Modal {
               }
               s(`.main-btn-sign-up`).click();
             });
-            if (idModal === 'modal-menu' && options.mode !== 'slide-menu-right') {
+            if (
+              idModal === 'modal-menu' &&
+              options.mode !== 'slide-menu-right' &&
+              options.barMode !== 'top-bottom-bar'
+            ) {
               EventsUI.onClick(`.action-btn-center-top`, (e) => {
                 e.preventDefault();
                 Modal.actionBtnCenter();
@@ -1160,6 +1276,7 @@ class Modal {
                   } catch (e) {}
                 }
                 Modal.removeModal(searchBoxHistoryId);
+                updateBarCustomVisibility();
               };
               s('.top-bar-search-box').onblur = () => {
                 hoverFocusCtl.checkDismiss();
@@ -1385,10 +1502,15 @@ class Modal {
                   >
                     ${await BtnIcon.instance({
                       style: `height: 100%`,
-                      class: `in fl${
-                        options.mode === 'slide-menu-right' ? 'r' : 'l'
-                      } main-btn-menu action-bar-box action-btn-center ${
-                        options?.disableTools?.includes('center') ? 'hide' : ''
+                      // The left menu hamburger under 'top-bottom-bar'. Otherwise a left menu is
+                      // toggled from the top bar and a right menu from the floating
+                      // .main-body-btn-menu, so a copy here would only duplicate one of them.
+                      class: `in fl${options.mode === 'slide-menu-right' ? 'r' : 'l'} main-btn-menu action-bar-box action-btn-center ${
+                        options?.disableTools?.includes('center') ||
+                        options.mode === 'slide-menu-right' ||
+                        options.barMode !== 'top-bottom-bar'
+                          ? 'hide'
+                          : ''
                       }`,
                       label: html`
                         <div class="${contentIconClass}">
@@ -1662,6 +1784,8 @@ class Modal {
                   removeEvent();
                 }
               });
+              Scroll.setEvent('.main-body', () => updateBarCustomVisibility());
+              updateBarCustomVisibility();
               setTimeout(window.onresize);
               setRouterReady();
             });

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

@@ -832,7 +832,6 @@ class SearchBox {
 
       .search-result-route {
         padding: 10px 12px;
-        margin: 2px;
         text-align: left;
         min-height: 40px;
       }

package/src/client/components/underpost/AppShellUnderpost.js

@@ -227,7 +227,9 @@ class AppShellUnderpost {
       titleRender: () => {
         return '';
       },
-      mode: 'slide-menu-right',
+      // mode: 'slide-menu-right',
+      barMode: 'top-bottom-bar',
+      mode: 'slide-menu',
       RouterInstance,
       searchCustomImgClass: 'underpost-menu-icon',
       htmlMainBody: async () => {
@@ -305,6 +307,16 @@ class AppShellUnderpost {
         return panelFormInstance;
       },
     });
+    for (const eventFn of ['onCollapseMenuListener', 'onExtendMenuListener', 'onExpandUiListener', 'onCloseListener']) {
+      Modal.Data['modal-menu'][eventFn]['underpost-panel-form-padding'] = (arg) => {
+        if (s(`.underpost-panel-form-container`))
+          s(`.underpost-panel-form-container`).style.paddingLeft =
+            !s('.main-body-btn-ui-open').classList.contains('hide') &&
+            s(`.btn-bar-center-icon-close`).classList.contains('hide')
+              ? '50px'
+              : '0px';
+      };
+    }
 
     ThemeEvents['underpost-main-theme-event'] = () => {
       const srcLogo = darkTheme