@electerm/electerm-react 5.0.6 → 5.0.7

package/client/common/constants.js

@@ -147,8 +147,9 @@ export const terminalFtpType = 'ftp'
 export const terminalSpiceType = 'spice'
 export const openedSidebarKey = 'opened-sidebar'
 export const sidebarPinnedKey = 'sidebar-pinned'
+export const leftSideBarOpenKey = 'left-side-bar-open'
 export const pinnedQuickCommandBarKey = 'pinned-quick-command-bar'
-export const leftSidebarWidthKey = 'left-sidebar-width'
+export const leftSidePanelWidthKey = 'left-sidebar-width'
 export const rightSidebarWidthKey = 'right-sidebar-width'
 export const addPanelWidthLsKey = 'addPanelWidth'
 export const sftpDefaultSortSettingKey = 'sftp-default-sort'

package/client/common/fetch-from-server.js

@@ -27,7 +27,8 @@ export const initWsCommon = async () => {
 
 window.pre.ipcOnEvent('power-resume', initWsCommon)
 
-const wsFetch = async (data) => {
+const wsFetch = async (data, options = {}) => {
+  const { silent = false } = options
   if (!window.et.wsOpened) {
     await initWsCommon()
   }
@@ -35,7 +36,16 @@ const wsFetch = async (data) => {
   return new NewPromise((resolve, reject) => {
     window.et.commonWs.once((arg) => {
       if (arg.error) {
-        console.error('fetch error', arg.error)
+        // Rejections are propagated to the caller via the returned promise, so
+        // callers decide severity. Many fetches (shell detection, owner lookup,
+        // folder size) are best-effort and catch gracefully; logging every one
+        // at error level with a stack dump surfaces scary-but-harmless failures
+        // (e.g. an SSH server rejecting an auxiliary exec channel). Default to a
+        // low-key warning carrying only the message; best-effort probes pass
+        // { silent: true } to suppress this and log their own clearer message.
+        if (!silent) {
+          console.warn('fetch error:', arg.error.message || arg.error)
+        }
         return reject(new Error(arg.error.message))
       }
       resolve(arg.data)

package/client/components/common/drawer.styl

@@ -1,7 +1,7 @@
 .custom-drawer
   position fixed
   top 0
-  left 43px
+  left var(--left-side-bar-width, 43px)
   right 0
   bottom 0
 

package/client/components/footer/footer-entry.jsx

@@ -3,7 +3,7 @@ import {
   Select,
   Dropdown
 } from 'antd'
-import { InfoCircleOutlined, TranslationOutlined } from '@ant-design/icons'
+import { InfoCircleOutlined, TranslationOutlined, DoubleRightOutlined } from '@ant-design/icons'
 import './footer.styl'
 import { statusMap } from '../../common/constants'
 import BatchInput from './batch-input'
@@ -164,12 +164,29 @@ export default auto(function FooterEntry (props) {
     )
   }
 
+  function handleShowSidebar () {
+    window.store.toggleLeftSideBar()
+  }
+
   const {
-    leftSidebarWidth,
+    leftSidePanelWidth,
+    leftSideBarWidth,
     openedSideBar,
     inActiveTerminal
   } = props.store
-  const w = 43 + leftSidebarWidth
+  const w = leftSideBarWidth + leftSidePanelWidth
+  // icon bar hidden: show a control on the left of the footer to bring the
+  // sidebar back
+  const showSidebarIcon = leftSideBarWidth === 0
+    ? (
+      <div className='terminal-footer-unit terminal-footer-show-sidebar'>
+        <DoubleRightOutlined
+          className='pointer font18 show-sidebar-icon'
+          onClick={handleShowSidebar}
+        />
+      </div>
+      )
+    : null
   const sideProps = openedSideBar
     ? {
         className: 'main-footer',
@@ -184,12 +201,15 @@ export default auto(function FooterEntry (props) {
     !inActiveTerminal
   ) {
     return (
-      <div className='main-footer' {...sideProps} />
+      <div className='main-footer' {...sideProps}>
+        {showSidebarIcon}
+      </div>
     )
   }
   return (
     <div {...sideProps}>
       <div className='terminal-footer-flex'>
+        {showSidebarIcon}
         {!isAIDisabled() && renderAIIcon()}
         {renderCmdHistory()}
         {renderQuickCommands()}

package/client/components/footer/footer.styl

@@ -2,7 +2,7 @@
   background var(--main)
   height 36px
   position absolute
-  left 44px
+  left calc(var(--left-side-bar-width, 43px) + 1px)
   right 0
   bottom 0
   z-index 200

package/client/components/layout/layout.jsx

@@ -33,7 +33,8 @@ export default auto(function Layout (props) {
       height,
       pinnedQuickCommandBar,
       // tabsHeight,
-      leftSidebarWidth,
+      leftSidePanelWidth,
+      leftSideBarWidth,
       // infoPanelPinned,
       pinned,
       rightPanelVisible,
@@ -43,7 +44,7 @@ export default auto(function Layout (props) {
       inActiveTerminal
     } = props.store
     const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) + resizeTrigger
-    const l = pinned ? 43 + leftSidebarWidth : 43
+    const l = pinned ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
     const r = rightPanelVisible && rightPanelPinned ? rightPanelWidth : 0
     return {
       height: h,
@@ -59,15 +60,18 @@ export default auto(function Layout (props) {
       height,
       width,
       pinnedQuickCommandBar,
-      leftSidebarWidth,
+      leftSidePanelWidth,
+      leftSideBarWidth,
       rightPanelVisible,
       rightPanelPinned,
       rightPanelWidth,
       pinned
     } = props.store
-    const l = pinned ? leftSidebarWidth : 0
+    const l = pinned ? leftSidePanelWidth : 0
     const r = rightPanelPinned && rightPanelVisible ? rightPanelWidth : 0
-    const w = width - l - r - 42
+    // account for the far-left icon bar (sidebarWidth - 1px border on desktop;
+    // 0 when the bar is hidden on mobile)
+    const w = width - l - r - (leftSideBarWidth > 0 ? leftSideBarWidth - 1 : 0)
     const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0)
     return layoutAlg(layout, w, h)
   }
@@ -115,7 +119,7 @@ export default auto(function Layout (props) {
           'pinnedQuickCommandBar',
           'tabsHeight',
           'appPath',
-          'leftSidebarWidth',
+          'leftSidePanelWidth',
           'addPanelWidth',
           'pinned',
           'openedSideBar',
@@ -153,7 +157,8 @@ export default auto(function Layout (props) {
     'pinnedQuickCommandBar',
     'qmSortByFrequency',
     'inActiveTerminal',
-    'leftSidebarWidth',
+    'leftSidePanelWidth',
+    'leftSideBarWidth',
     'openedSideBar',
     'currentQuickCommands'
   ])
@@ -177,7 +182,7 @@ export default auto(function Layout (props) {
       'pinnedQuickCommandBar',
       'tabsHeight',
       'appPath',
-      'leftSidebarWidth',
+      'leftSidePanelWidth',
       'pinned',
       'openedSideBar',
       'config',

package/client/components/main/main.jsx

@@ -119,7 +119,10 @@ export default auto(function Index (props) {
     'is-desktop': !store.isMobile
   })
   const ext1 = {
-    className: cls
+    className: cls,
+    style: {
+      '--left-side-bar-width': store.leftSideBarWidth + 'px'
+    }
   }
   // Get active tab IDs
   const activeTabIds = [
@@ -168,7 +171,8 @@ export default auto(function Index (props) {
       'settingTab',
       'settingItem',
       'isSyncingSetting',
-      'leftSidebarWidth',
+      'leftSidePanelWidth',
+      'leftSideBarWidth',
       'transferTab',
       'sidebarPanelTab',
       'openWidgetsModal'

package/client/components/quick-commands/qm.styl

@@ -5,7 +5,7 @@
 .qm-wrap-tooltip
   background var(--main)
   position absolute
-  left 43px
+  left var(--left-side-bar-width, 43px)
   right 0
   z-index 89
   height auto

package/client/components/quick-commands/quick-commands-box.jsx

@@ -176,7 +176,8 @@ export default function QuickCommandsFooterBox (props) {
     pinnedQuickCommandBar,
     qmSortByFrequency,
     inActiveTerminal,
-    leftSidebarWidth,
+    leftSidePanelWidth,
+    leftSideBarWidth,
     openedSideBar
   } = props
   if ((!openQuickCommandBar && !pinnedQuickCommandBar) || !inActiveTerminal) {
@@ -203,7 +204,7 @@ export default function QuickCommandsFooterBox (props) {
     : 'text'
   const cls = classNames('qm-list-wrap')
   const type = qmSortByFrequency ? 'primary' : 'default'
-  const w = openedSideBar ? 43 + leftSidebarWidth : 43
+  const w = openedSideBar ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
   const qmProps = {
     className: 'qm-wrap-tooltip',
     style: {

package/client/components/session/session.jsx

@@ -278,7 +278,7 @@ export default class SessionWrapper extends Component {
           'height',
           'width',
           'tabsHeight',
-          'leftSidebarWidth',
+          'leftSidePanelWidth',
           'pinned',
           'openedSideBar',
           'delTab',

package/client/components/session/sessions.jsx

@@ -74,7 +74,7 @@ export default class Sessions extends Component {
           'pinnedQuickCommandBar',
           'tabsHeight',
           'appPath',
-          'leftSidebarWidth',
+          'leftSidePanelWidth',
           'pinned',
           'openedSideBar',
           'fullscreen'

package/client/components/setting-panel/setting-modal.jsx

@@ -70,7 +70,7 @@ export default auto(function SettingModalWrap (props) {
         'config',
         'checkedKeys',
         'expandedKeys',
-        'leftSidebarWidth',
+        'leftSidePanelWidth',
         'initLoadingData'
       ])
     }

package/client/components/setting-panel/setting-wrap.jsx

@@ -5,7 +5,6 @@
 import { Component } from 'react'
 import Drawer from '../common/drawer'
 import { CloseCircleOutlined } from '@ant-design/icons'
-import { sidebarWidth } from '../../common/constants'
 import AppDrag from '../tabs/app-drag'
 import './setting-wrap.styl'
 
@@ -33,7 +32,7 @@ export default class SettingWrap extends Component {
       open: this.props.visible,
       onClose: this.props.onCancel,
       className: 'setting-wrap',
-      size: this.props.innerWidth - sidebarWidth,
+      size: this.props.innerWidth - window.store.leftSideBarWidth,
       zIndex: 888,
       placement: 'left'
     }

package/client/components/setting-panel/setting-wrap.styl

@@ -72,7 +72,7 @@
     position fixed
     top 128px
     bottom 0
-    left 43px
+    left var(--left-side-bar-width, 43px)
     right 0
     overflow-y scroll
   .setting-row

package/client/components/setting-panel/setting.styl

@@ -7,7 +7,7 @@
 .setting-wrap .app-drag
   position fixed
   top 0
-  left 43px
+  left var(--left-side-bar-width, 43px)
   height 60px
   right 0
   z-index 888

package/client/components/sidebar/bookmark-select.jsx

@@ -10,7 +10,7 @@ export default auto(function BookmarkSelect (props) {
   const {
     listStyle,
     openedSideBar,
-    leftSidebarWidth,
+    leftSidePanelWidth,
     expandedKeys,
     bookmarks,
     bookmarksMap,
@@ -38,7 +38,7 @@ export default auto(function BookmarkSelect (props) {
     bookmarksMap,
     bookmarkGroups: store.getBookmarkGroupsTotal(),
     expandedKeys,
-    leftSidebarWidth,
+    leftSidePanelWidth,
     bookmarkGroupTree: store.bookmarkGroupTree,
     autoFocus,
     initLoadingData

package/client/components/sidebar/index.jsx

@@ -8,7 +8,8 @@ import {
   UpCircleOutlined,
   AppstoreOutlined,
   ThunderboltOutlined,
-  AimOutlined
+  AimOutlined,
+  MenuFoldOutlined
 } from '@ant-design/icons'
 import { Tooltip, Popover } from 'antd'
 import SideBarPanel from './sidebar-panel'
@@ -16,7 +17,6 @@ import TransferList from './transfer-list'
 import MenuBtn from '../sys-menu/menu-btn'
 import QuickConnect from '../tabs/quick-connect'
 import {
-  sidebarWidth,
   settingMap,
   modals
 } from '../../common/constants'
@@ -34,7 +34,10 @@ export default function Sidebar (props) {
     settingTab,
     settingItem,
     isSyncingSetting,
-    leftSidebarWidth,
+    // expandable bookmarks/history panel
+    leftSidePanelWidth,
+    // far-left icon bar (43px; 0 when hidden)
+    leftSideBarWidth,
     pinned,
     fileTransfers,
     openedSideBar,
@@ -91,6 +94,10 @@ export default function Sidebar (props) {
     store.onZoomReset()
   }
 
+  const handleToggleSidebar = () => {
+    store.toggleLeftSideBar()
+  }
+
   const {
     onNewSsh,
     openSetting,
@@ -115,16 +122,16 @@ export default function Sidebar (props) {
     ? {
         className: 'sidebar-list',
         style: {
-          width: `${leftSidebarWidth}px`
+          width: `${leftSidePanelWidth}px`
         }
       }
     : {
         className: 'sidebar-list'
       }
   const sidebarProps = {
-    className: `sidebar type-${openedSideBar}`,
+    className: `sidebar type-${openedSideBar}${leftSideBarWidth === 0 ? ' collapsed' : ''}`,
     style: {
-      width: sidebarWidth,
+      width: leftSideBarWidth,
       height
     }
   }
@@ -209,6 +216,14 @@ export default function Sidebar (props) {
             onClick={openAbout}
           />
         </SideIcon>
+        <SideIcon
+          title={e('hide')}
+        >
+          <MenuFoldOutlined
+            className='iblock font16 control-icon hide-sidebar-icon'
+            onClick={handleToggleSidebar}
+          />
+        </SideIcon>
         {
           Math.round((zoom ?? 1) * 100) !== 100
             ? (
@@ -246,7 +261,8 @@ export default function Sidebar (props) {
       <SidePanel
         sideProps={sideProps}
         setLeftSidePanelWidth={setLeftSidePanelWidth}
-        leftSidebarWidth={leftSidebarWidth}
+        leftSidePanelWidth={leftSidePanelWidth}
+        leftSideBarWidth={leftSideBarWidth}
       >
         <SideBarPanel
           pinned={pinned}

package/client/components/sidebar/side-panel.jsx

@@ -15,13 +15,13 @@ export default function SidePanel (props) {
     }
     const el1 = document.querySelector('.sessions')
     if (el1) {
-      el1.style.left = (nw + 43) + 'px'
+      el1.style.left = (nw + props.leftSideBarWidth) + 'px'
     }
-  }, [props.leftSidebarWidth])
+  }, [props.leftSidePanelWidth, props.leftSideBarWidth])
   const dragProps = {
     min: 343,
     max: 600,
-    width: props.leftSidebarWidth,
+    width: props.leftSidePanelWidth,
     onDragEnd,
     onDragMove,
     left: true

package/client/components/sidebar/sidebar.styl

@@ -93,12 +93,17 @@
       color var(--text-light)
 .sidebar-list
   position absolute
-  left 43px
+  left var(--left-side-bar-width, 43px)
   top 0
   bottom 0
   z-index 200
   width 0
 
+// mobile: icon bar hidden — hide its buttons
+.sidebar.collapsed
+  .sidebar-bar
+    display none
+
 .pinned
   .sidebar-list
     top 0

package/client/components/terminal/shell.js

@@ -147,9 +147,17 @@ export async function detectRemoteShell (pid) {
   // instead of probing for any shell binary installed on the host.
   const cmd = 'printf "%s\n" "$SHELL"'
 
-  const r = await runCmd(pid, cmd)
+  // { silent: true } so this best-effort probe does not emit a transport-level
+  // fetch warning; a single, clearer warning is logged below if it fails.
+  const r = await runCmd(pid, cmd, { silent: true })
     .catch((err) => {
-      console.error('detectRemoteShell error', err)
+      // Non-fatal: the interactive shell already opened, so the terminal keeps
+      // working. We just can't inject OSC 633 shell integration for command
+      // tracking. This commonly happens when the server limits concurrent
+      // sessions (sshd MaxSessions) or the account uses a forced/restricted
+      // command, which rejects the auxiliary exec channel with
+      // "(SSH) Channel open failure: open failed".
+      console.warn('detectRemoteShell: exec channel rejected by server, shell integration disabled, falling back to sh —', err?.message || err)
       return 'sh'
     })
 

package/client/components/terminal/terminal-apis.js

@@ -11,21 +11,21 @@ export function createTerm (body) {
   })
 }
 
-export function runCmd (pid, cmd) {
+export function runCmd (pid, cmd, options) {
   return fetch({
     pid,
     cmd,
     action: 'run-cmd'
-  })
+  }, options)
 }
 
-export function execCmd (pid, cmd, timeoutMs) {
+export function execCmd (pid, cmd, timeoutMs, options) {
   return fetch({
     pid,
     cmd,
     timeoutMs,
     action: 'exec-cmd'
-  })
+  }, options)
 }
 
 export function resizeTerm (pid, cols, rows) {

package/client/components/terminal/terminal-command-dropdown.jsx

@@ -73,6 +73,7 @@ export default class TerminalCmdSuggestions extends Component {
       config.baseURLAI,
       config.apiPathAI,
       config.apiKeyAI,
+      config.proxyAI,
       false,
       config.authHeaderNameAI
     ).catch(

package/client/components/terminal/terminal.jsx

@@ -166,13 +166,21 @@ class Term extends Component {
       !isEqual(
         pick(this.props, names),
         pick(prevProps, names)
-      ) ||
-      shouldChange
+      )
     ) {
       this.onResize()
     }
     if (shouldChange && this.term) {
       this.term.focus()
+      // 标签从 display:none 变为可见时，延迟到下一动画帧再 fit，读取正确布局
+      // 尺寸纠正列数；并用 refresh 强制重绘，清除快速连续打开多个连接时隐藏
+      // 标签被 0 列 fit 导致的虚假/重复提示符。
+      requestAnimationFrame(() => {
+        if (this.term && !this.onClose) {
+          this.fitAndRefresh()
+          setTimeout(() => this.fitAndRefresh(), 80)
+        }
+      })
     }
     this.checkConfigChange(
       prevProps,
@@ -1530,7 +1538,11 @@ class Term extends Component {
     this.term = term
     term.onSelectionChange(this.onSelectionChange)
     term.attachCustomKeyEventHandler(this.handleKeyboardEvent.bind(this))
-    this.fitAddon.fit()
+    // 容器不可见（隐藏标签 display:none）时不 fit，避免算出 0 列把 shell
+    // 提示符逐字符错误换行；待标签激活可见后由 fitAndRefresh 重新适配。
+    if (this.isElementVisible()) {
+      this.fitAddon.fit()
+    }
     await this.remoteInit(term)
   }
 
@@ -1888,7 +1900,10 @@ class Term extends Component {
     this.trzszClient.init(socket)
     this.xmodemClient = new XmodemClient(this)
     this.xmodemClient.init(socket)
-    this.fitAddon.fit()
+    // 仅在可见时 fit，隐藏标签跳过，避免 0 列损坏提示符。
+    if (this.isElementVisible()) {
+      this.fitAddon.fit()
+    }
     term.displayRaw = displayRaw
     term.loadAddon(
       new KeywordHighlighterAddon(keywords)
@@ -1952,20 +1967,38 @@ class Term extends Component {
     })
   }
 
-  onResize = throttle(() => {
-    const cid = this.props.currentBatchTabId
-    const tid = this.props.tab?.id
-    if (
-      this.props.tab.status === statusMap.success &&
-      cid === tid &&
-      this.term
-    ) {
-      try {
-        this.fitAddon.fit()
-      } catch (e) {
-        console.info('resize failed')
-      }
+  // 判断终端挂载容器当前是否真实可见（非 display:none）。
+  // 隐藏标签的 clientWidth/clientHeight 为 0，此时不应 fit，否则会算出 0 列。
+  isElementVisible = () => {
+    const el = this.domRef.current
+    if (!el) {
+      return false
     }
+    return el.clientWidth > 0 && el.clientHeight > 0
+  }
+
+  // 重新适配终端尺寸并强制重绘可见区域。
+  // 仅当容器真正可见时才 fit：隐藏标签(display:none)下 clientWidth 为 0，
+  // 若在此时 fit 会算出 0/极小列数，使 shell 提示符被逐字符错误换行，
+  // 出现快速连续打开多个连接时的虚假/重复提示符。因此隐藏态跳过 fit，
+  // 保留 xterm 默认 80x24，待标签激活可见后再 fit 重绘，从根上避免换行损坏。
+  fitAndRefresh = () => {
+    if (!this.term || !this.fitAddon || this.onClose) {
+      return
+    }
+    if (!this.isElementVisible()) {
+      return
+    }
+    try {
+      this.fitAddon.fit()
+      this.term.refresh(0, this.term.rows - 1)
+    } catch (e) {
+      console.info('resize failed', e)
+    }
+  }
+
+  onResize = throttle(() => {
+    this.fitAndRefresh()
   }, 200)
 
   onerrorSocket = err => {

package/client/components/tree-list/tree-list-row.jsx

@@ -12,7 +12,7 @@ export default function TreeListRow (props) {
     activeItemId,
     searchSelectedRowKey,
     staticList,
-    leftSidebarWidth,
+    leftSidePanelWidth,
     handleExpand,
     handleUnExpand,
     del,
@@ -43,7 +43,7 @@ export default function TreeListRow (props) {
     itemColor: item?.color,
     itemDescription: item?.description,
     itemLevel: item?.level,
-    leftSidebarWidth,
+    leftSidePanelWidth,
     staticList,
     selectedItemId: activeItemId,
     searchSelected: searchSelectedRowKey === row.key,

package/client/components/tree-list/tree-list.jsx

@@ -748,7 +748,7 @@ export default class ItemListTree extends Component {
         activeItemId={this.props.activeItemId}
         searchSelectedRowKey={this.state.searchSelectedRowKey}
         staticList={this.props.staticList}
-        leftSidebarWidth={this.props.leftSidebarWidth}
+        leftSidePanelWidth={this.props.leftSidePanelWidth}
         {...pick(
           this,
           [

package/client/css/mobile.styl

@@ -93,7 +93,8 @@
   // ---- 3. Footer encode select: show icon, click to open dropdown
   //        match antd Button small icon size (~14px) used by sibling icons
   .mobile-encode-trigger,
-  .terminal-info-icon
+  .terminal-info-icon,
+  .show-sidebar-icon
     font-size 14px !important
     line-height 36px
     padding 0 4px

package/client/store/common.js

@@ -7,7 +7,8 @@ import Modal from '../components/common/modal'
 import { appendMandatoryGuardrails } from '../components/ai/ai-guardrails'
 import { debounce, some, get, pickBy } from 'lodash-es'
 import {
-  leftSidebarWidthKey,
+  leftSidePanelWidthKey,
+  leftSideBarOpenKey,
   rightSidebarWidthKey,
   addPanelWidthLsKey,
   dismissDelKeyTipLsKey,
@@ -106,8 +107,19 @@ export default Store => {
   }
 
   Store.prototype.setLeftSidePanelWidth = function (v) {
-    ls.setItem(leftSidebarWidthKey, v)
-    window.store._leftSidebarWidth = v
+    ls.setItem(leftSidePanelWidthKey, v)
+    window.store._leftSidePanelWidth = v
+  }
+
+  Store.prototype.toggleLeftSideBar = function () {
+    const { store } = window
+    const willOpen = !store._leftSideBarOpen
+    store._leftSideBarOpen = willOpen
+    ls.setItem(leftSideBarOpenKey, willOpen ? 'true' : 'false')
+    if (!willOpen) {
+      // hiding the bar also closes/unpins the side panel so no space is reserved
+      store.handleCloseSidebar()
+    }
   }
 
   Store.prototype.setAddPanelWidth = function (v) {

package/client/store/init-state.js

@@ -9,13 +9,14 @@ import {
   infoTabs,
   openedSidebarKey,
   sidebarPinnedKey,
+  leftSideBarOpenKey,
   pinnedQuickCommandBarKey,
   sftpDefaultSortSettingKey,
   batchInputLsKey,
   expandedKeysLsKey,
   checkedKeysLsKey,
   localAddrBookmarkLsKey,
-  leftSidebarWidthKey,
+  leftSidePanelWidthKey,
   rightSidebarWidthKey,
   addPanelWidthLsKey,
   dismissDelKeyTipLsKey,
@@ -46,6 +47,10 @@ function getDefaultBookmarkGroups (bookmarks) {
 
 export default () => {
   const layout = ls.getItem('layout') || splitMap.c1
+  // far-left icon bar is open by default; once the user toggles it, honor the
+  // saved preference ('true'/'false') from localStorage.
+  const storedSideBarOpen = ls.getItem(leftSideBarOpenKey)
+  const leftSideBarOpen = storedSideBarOpen === '' ? true : storedSideBarOpen === 'true'
   return {
     // common
     wsInited: false,
@@ -164,7 +169,9 @@ export default () => {
 
     // sidebar
     openedSideBar: ls.getItem(openedSidebarKey) || '',
-    _leftSidebarWidth: parseInt(ls.getItem(leftSidebarWidthKey), 10) || 300,
+    _leftSidePanelWidth: parseInt(ls.getItem(leftSidePanelWidthKey), 10) || 300,
+    // whether the far-left icon bar is open (hide/show works on every platform)
+    _leftSideBarOpen: leftSideBarOpen,
     addPanelWidth: parseInt(ls.getItem(addPanelWidthLsKey), 10) || 300,
     menuOpened: false,
     pinned: ls.getItem(sidebarPinnedKey) === 'true',

package/client/store/store.js

@@ -59,12 +59,21 @@ class Store {
     return window.store.innerWidth
   }
 
-  get leftSidebarWidth () {
+  get leftSidePanelWidth () {
     const { store } = window
     if (store.isMobile) {
-      return Math.min(store.innerWidth - sidebarWidth, 500)
+      return Math.min(store.innerWidth - store.leftSideBarWidth, 500)
     }
-    return store._leftSidebarWidth
+    return store._leftSidePanelWidth
+  }
+
+  // width of the far-left icon bar (the ~43px vertical strip with the menu
+  // / bookmarks / settings icons). Distinct from leftSidePanelWidth, which is
+  // the expandable bookmarks/history panel. Controlled by _leftSideBarOpen on
+  // every platform: sidebarWidth when open, 0 when hidden.
+  get leftSideBarWidth () {
+    const { store } = window
+    return store._leftSideBarOpen ? sidebarWidth : 0
   }
 
   get rightPanelWidth () {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "5.0.6",
+  "version": "5.0.7",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",