@electerm/electerm-react 5.3.5 → 5.3.26

package/client/common/constants.js

@@ -201,6 +201,9 @@ export const commonLineEndings = commonTxLineEndings
 export const maxBatchInput = 30
 export const windowControlWidth = 94
 export const mobileBreakpoint = 600
+// breakpoint matching the setting panel's `@media (max-width: 800px)` CSS —
+// must be kept in sync with setting-wrap.styl
+export const settingPanelMobileBreakpoint = 800
 export const baseUpdateCheckUrls = [
   packInfo.homepage,
   'https://gitee.com/github-zxdong262/electerm/raw/gh-pages'

package/client/components/bookmark-form/index.jsx

@@ -130,7 +130,7 @@ export default class BookmarkIndex2 extends PureComponent {
     return (
       <Button
         size='small'
-        className='mg2l create-ai-btn'
+        className='mg1l create-ai-btn'
         icon={<RobotOutlined />}
         onClick={this.handleToggleAIMode}
       >
@@ -171,15 +171,17 @@ export default class BookmarkIndex2 extends PureComponent {
     const isNew = id.startsWith(newBookmarkIdPrefix)
     const keys = Object.keys(sessionConfig)
     return (
-      <div className='form-wrap pd1x'>
+      <div className='form-wrap pd1x mg2b'>
         <div className='form-title pd1t pd1x pd2b bold'>
-          <BookOutlined className='mg1r' />
-          <span>
-            {((!isNew ? e('edit') : e('new')) + ' ' + e(settingMap.bookmarks))}
-          </span>
-          {this.renderTitle(formData, isNew)}
+          <p>
+            <BookOutlined className='mg1r' />
+            <span>
+              {((!isNew ? e('edit') : e('new')) + ' ' + e(settingMap.bookmarks))}
+            </span>
+            {this.renderTitle(formData, isNew)}
+            {this.renderAIButton(isNew)}
+          </p>
           {this.renderTypes(bookmarkType, isNew, keys)}
-          {this.renderAIButton(isNew)}
         </div>
         {this.renderForm()}
       </div>

package/client/components/main/main.jsx

@@ -86,6 +86,30 @@ export default auto(function Index (props) {
     store.checkPendingDeepLink()
   }, [])
 
+  // Track the actual input modality rather than a static capability probe:
+  // a touch-capable laptop is a mouse machine until a real touch happens,
+  // and a tablet stays touch even though it can also pair a mouse. Stored in
+  // `store.isTouchDevice` (seeded false — no upfront probe, which only says
+  // the screen *can* be touched, not what the user operates with); the
+  // `is-touch-device` class drives always-visible hover-only action icons, so
+  // it must follow the device the user is actually operating.
+  useEffect(() => {
+    const { store } = window
+    const handlePointer = (e) => {
+      if (e.pointerType === 'mouse') {
+        store.isTouchDevice = false
+      } else if (e.pointerType === 'touch' || e.pointerType === 'pen') {
+        store.isTouchDevice = true
+      }
+    }
+    document.addEventListener('pointerdown', handlePointer)
+    document.addEventListener('pointermove', handlePointer)
+    return () => {
+      document.removeEventListener('pointerdown', handlePointer)
+      document.removeEventListener('pointermove', handlePointer)
+    }
+  }, [])
+
   const { store } = props
   const {
     configLoaded,
@@ -122,7 +146,8 @@ export default auto(function Index (props) {
     'fs-with-footer': fullscreen && store.inActiveTerminal,
     'is-main': !isSecondInstance,
     'is-mobile': store.isMobile,
-    'is-desktop': !store.isMobile
+    'is-desktop': !store.isMobile,
+    'is-touch-device': store.isTouchDevice
   })
   const ext1 = {
     className: cls,

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

@@ -1,18 +1,42 @@
 /**
- * two column layout, left column fixed with, right column auto width
+ * two column layout, left column fixed width, right column auto width.
+ * the DOM is identical on desktop and mobile — which part is visible is
+ * pure CSS driven by the 800px media query in setting-wrap.styl (not the
+ * global `.is-mobile` class, which matches a different breakpoint), so a
+ * resize across the breakpoint never remounts the forms:
+ * - desktop (>800px): both columns side by side, breadcrumb hidden
+ * - mobile menu view (`setting-view-menu`): left menu fills the panel
+ * - mobile content view (`setting-view-content`): breadcrumb on top
+ *   (click it to go back to the menu) + right content scrolls below
  */
 
+import { auto } from 'manate/react'
 import Placeholder from '../common/placeholder'
+import SettingMobileBreadcrumb from './setting-mobile-breadcrumb'
 
-export default function SettingCol (props) {
+const e = window.translate
+
+function SettingCol (props) {
+  const store = window.store
+  const {
+    title,
+    name
+  } = store.settingItem
+  const label = title || name || e('new')
+  const viewCls = store.settingMobileView === 'content'
+    ? 'setting-view-content'
+    : 'setting-view-menu'
   return (
-    <div className='setting-col'>
+    <div className={`setting-col ${viewCls}`}>
+      <SettingMobileBreadcrumb
+        onBack={() => store.backToSettingMenu()}
+        parentLabel={e(store.settingTab)}
+        currentLabel={label}
+      />
       <div className='setting-row setting-row-left'>
         {props.children[0]}
       </div>
-      <div
-        className='setting-row setting-row-right'
-      >
+      <div className='setting-row setting-row-right'>
         <div className='setting-col-content'>
           {props.children[1]}
         </div>
@@ -23,3 +47,5 @@ export default function SettingCol (props) {
     </div>
   )
 }
+
+export default auto(SettingCol)

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

@@ -45,6 +45,18 @@
 .theme-item:hover
     .list-item-remove
       right 24px
+// touch screens have no hover — always reveal the hover-only action icons
+.is-touch-device
+  .list-item-edit
+  .list-item-apply
+  .list-item-remove
+  .list-item-bookmark
+  .list-item-duplicate
+  .list-item-autorun
+    display block
+  .theme-item
+    .list-item-remove
+      right 24px
 .setting-tabs-setting
   .item-list-unit
     .list-item-remove

package/client/components/setting-panel/setting-mobile-breadcrumb.jsx

@@ -0,0 +1,29 @@
+/**
+ * breadcrumb shown at the top of the settings content view on mobile.
+ * - parent crumb = the active setting tab, clickable, returns to the menu list
+ * - current crumb = the selected item name, plain text
+ * `onBack` + labels are props so it stays reusable for other panels
+ */
+
+import { ArrowLeftOutlined } from '@ant-design/icons'
+
+export default function SettingMobileBreadcrumb (props) {
+  const {
+    onBack,
+    parentLabel,
+    currentLabel
+  } = props
+  return (
+    <div className='setting-mobile-back'>
+      <button
+        className='setting-mobile-back-btn'
+        onClick={onBack}
+      >
+        <ArrowLeftOutlined />
+        <span className='setting-mobile-back-parent'>{parentLabel}</span>
+      </button>
+      <span className='setting-mobile-back-sep'>&gt;</span>
+      <span className='setting-mobile-back-current elli'>{currentLabel}</span>
+    </div>
+  )
+}

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

@@ -9,7 +9,8 @@ import { lazy, Suspense } from 'react'
 import SettingModal from './setting-wrap'
 import {
   settingMap,
-  modals
+  modals,
+  settingPanelMobileBreakpoint
 } from '../../common/constants'
 const TabBookmarks = lazy(() => import('./tab-bookmarks'))
 const TabQuickCommands = lazy(() => import('./tab-quick-commands'))
@@ -25,6 +26,11 @@ const e = window.translate
 export default auto(function SettingModalWrap (props) {
   const selectItem = (item) => {
     window.store.setSettingItem(item)
+    // narrow panels drill into the right col content after picking a menu
+    // item — same 800px breakpoint as the setting panel media query
+    if (window.store.innerWidth <= settingPanelMobileBreakpoint) {
+      window.store.settingMobileView = 'content'
+    }
   }
 
   function renderTabs () {
@@ -188,7 +194,6 @@ export default auto(function SettingModalWrap (props) {
       visible={show}
       useSystemTitleBar={useSystemTitleBar}
       innerWidth={innerWidth}
-      isMobile={props.store.isMobile}
     >
       {renderTabs()}
     </SettingModal>

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

@@ -16,9 +16,6 @@ export default class SettingWrap extends Component {
   }
 
   renderRightClose () {
-    if (this.props.isMobile) {
-      return null
-    }
     return (
       <CloseCircleOutlined
         className='close-setting-wrap-icon close-setting-wrap'

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

@@ -67,34 +67,103 @@
 .setting-col
   ::-webkit-scrollbar
     width 0
-@media (max-width: 1100px)
+@media (max-width: 800px)
   .setting-col
     position fixed
     top 128px
     bottom 0
     left var(--left-side-bar-width, 43px)
     right 0
-    overflow-y scroll
+    display flex
+    flex-direction column
+    overflow hidden
   .setting-row
     position static
     top auto
+  // right close button is redundant with the left one on mobile
+  .close-setting-wrap:not(.alt-close-setting-wrap)
+    display none
+  // menu view by default: the left col list fills the panel
   .setting-row-left
+    flex 1
+    min-height 0
+    overflow-y auto
+    position static
+    top auto
+    bottom auto
     left auto
     width auto
-    bottom auto
-    padding 138px 10px 10px 10px
+    padding 10px
   .setting-row-right
-    left auto
+    display none
+    position static
+    top auto
     right auto
     bottom auto
-    top auto
+    left auto
+    width auto
     padding 10px
-    position static
-    overflow visible
-  .setting-col-content
-    overflow visible
+  // content view: fixed breadcrumb on top, right col content scrolls below
+  .setting-view-content
+    .setting-mobile-back
+      display flex
+    .setting-row-left
+      display none
+    .setting-row-right
+      display flex
+      flex-direction column
+      flex 1
+      min-height 0
+      overflow hidden
+      position static
+      top auto
+      right auto
+      bottom auto
+      left auto
+      width auto
+      padding 10px
+    .setting-col-content
+      flex 1
+      overflow-y auto
+      min-height 0
   .setting-tabs-bookmarks
     .setting-row-left
       width auto
     .setting-row-right
-      left auto
+      left auto
+
+// breadcrumb used on the narrow (mobile) content view; hidden by default and
+// re-shown by `.setting-view-content` inside the 800px media query above
+.setting-mobile-back
+  display none
+  flex-shrink 0
+  align-items center
+  gap 4px
+  padding 8px 10px
+  background var(--main)
+  border-bottom 1px solid var(--main-light)
+  z-index 10
+.setting-mobile-back-btn
+  display flex
+  align-items center
+  gap 4px
+  height 24px
+  padding 0 6px
+  font-size 13px
+  color var(--primary)
+  background transparent
+  border 0
+  border-radius 4px
+  cursor pointer
+  &:hover
+    background var(--primary)
+    color var(--primary-contrast)
+.setting-mobile-back-sep
+  color var(--text-dark)
+  font-size 13px
+  line-height 24px
+  padding 0 2px
+.setting-mobile-back-current
+  font-size 13px
+  min-width 0
+  max-width 60%

package/client/components/sidebar/index.jsx

@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import {
   InfoCircleOutlined,
   UpCircleOutlined,
@@ -48,37 +49,43 @@ export default function Sidebar (props) {
   const { store } = window
 
   const handleClickOutside = (event) => {
-    // Don't close if pinned or has active input
-    if (store.pinned || hasActiveInput()) {
+    const { store } = window
+    // Nothing to dismiss when the panel is closed or pinned; also ignore
+    // clicks while typing in an input so the panel is not yanked away
+    // mid-interaction.
+    if (!store.openedSideBar || store.pinned || hasActiveInput()) {
       return
     }
+    const target = event.target
+    // Never treat the panel itself or the bookmark toggle button as "outside".
+    // The very click that toggles the panel open lands on that button, so this
+    // guard makes the toggle immune to event-ordering races — and, in dev hot
+    // reloads, to stale listeners left behind by an older build.
+    if (target.closest && (
+      target.closest('.sidebar-panel') ||
+      target.closest('.bookmark-sidebar-toggle')
+    )) {
+      return
+    }
+    store.setOpenedSideBar('')
+  }
 
-    // Check if click is outside the sidebar panel
-    const sidebarPanel = document.querySelector('.sidebar-panel')
-    if (sidebarPanel && !sidebarPanel.contains(event.target)) {
-      store.setOpenedSideBar('')
+  // One always-on document listener for click-outside dismissal, attached
+  // once. Previously the listener was added/removed from inside the bookmark
+  // click handler, so it leaked when the panel was closed via the ✕ icon and
+  // then instantly re-closed the panel on the next bookmark-icon click.
+  useEffect(() => {
+    document.addEventListener('click', handleClickOutside)
+    return () => {
       document.removeEventListener('click', handleClickOutside)
     }
-  }
+  }, [])
 
   const handleClickBookmark = () => {
     if (showModal) {
       store.showModal = 0
     }
-    if (pinned) {
-      return
-    }
-    if (openedSideBar === 'bookmarks') {
-      // Remove listener when closing
-      document.removeEventListener('click', handleClickOutside)
-      store.setOpenedSideBar('')
-    } else {
-      // Add listener when opening, with slight delay to avoid conflict with this click
-      setTimeout(() => {
-        document.addEventListener('click', handleClickOutside)
-      }, 0)
-      store.setOpenedSideBar('bookmarks')
-    }
+    store.openLeftSidePanel()
   }
 
   const handleShowUpgrade = () => {

package/client/components/sidebar/left-sidebar-icons.jsx

@@ -81,7 +81,7 @@ export default function LeftSidebarIcons (props) {
       >
         <BookOutlined
           onClick={handleClickBookmark}
-          className='font20 iblock control-icon'
+          className='font20 iblock control-icon bookmark-sidebar-toggle'
         />
       </SideIcon>
     ),

package/client/components/sidebar/sidebar.styl

@@ -23,6 +23,8 @@
   z-index 100
   bottom 0
   background var(--main-dark)
+  display flex
+  flex-direction column
 
   .item-list
     padding-right 0
@@ -105,6 +107,20 @@
   z-index 200
   width 0
 
+// icon bar: fills sidebar height, scrolls when overflow on small screens,
+// scrollbar hidden but scrolling still works
+.sidebar-bar
+  flex 1
+  min-height 0
+  overflow-y auto
+  overflow-x hidden
+  scrollbar-width none // Firefox
+  -ms-overflow-style none // IE/Edge
+  &::-webkit-scrollbar
+    width 0
+    height 0
+    display none
+
 // mobile: icon bar hidden — hide its buttons
 .sidebar.collapsed
   .sidebar-bar

package/client/components/sys-menu/icons-map.jsx

@@ -29,7 +29,9 @@ import {
   PlayCircleFilled,
   StopOutlined,
   DownloadOutlined,
-  SwapOutlined
+  SwapOutlined,
+  PushpinOutlined,
+  PushpinFilled
 } from '@ant-design/icons'
 import IconHolder from './icon-holder'
 
@@ -62,5 +64,7 @@ export default {
   PlayCircleFilled,
   StopOutlined,
   DownloadOutlined,
-  SwapOutlined
+  SwapOutlined,
+  PushpinOutlined,
+  PushpinFilled
 }

package/client/components/tabs/index.jsx

@@ -122,11 +122,23 @@ export default class Tabs extends Component {
     )
   }
 
+  // desktop tabs bar renders pinned tabs first: stable partition that keeps
+  // the original relative order inside the pinned and unpinned groups.
+  // store.tabs order itself is untouched by pinning.
+  getSortedTabs = () => {
+    const { tabs = [] } = this.props
+    return [
+      ...tabs.filter(t => t.isPinned),
+      ...tabs.filter(t => !t.isPinned)
+    ]
+  }
+
   adjustScroll = () => {
     if (this.props.isMobile || !this.domRef.current) {
       return
     }
-    const { tabs, currentBatchTabId, batch } = this.props
+    const { currentBatchTabId, batch } = this.props
+    const tabs = this.getSortedTabs()
     const index = tabs.findIndex(t => t.id === currentBatchTabId)
     const tabsDomWith = Array.from(
       document.querySelectorAll(`.v${batch + 1} .tab`)
@@ -209,7 +221,7 @@ export default class Tabs extends Component {
   }
 
   renderExtra () {
-    const items = this.props.tabs.map((t, i) => {
+    const items = this.getSortedTabs().map((t, i) => {
       return {
         key: i + '##' + t.id,
         label: (
@@ -261,7 +273,8 @@ export default class Tabs extends Component {
   }
 
   renderContentInner () {
-    const { tabs = [], width, config } = this.props
+    const { width, config } = this.props
+    const tabs = this.getSortedTabs()
     const len = tabs.length
     const tabsWidthAll = tabMargin * len + 10 + this.tabsWidth()
     const { overflow } = this.state

package/client/components/tabs/tab.jsx

@@ -9,7 +9,8 @@ import {
   CloseOutlined,
   Loading3QuartersOutlined,
   BorderlessTableOutlined,
-  LockOutlined
+  LockOutlined,
+  PushpinFilled
 } from '@ant-design/icons'
 import {
   Tooltip,
@@ -239,8 +240,15 @@ class Tab extends Component {
     }
   }
 
-  handleReloadTab = async () => {
-    window.store.reloadTab(this.props.tab.id)
+  handleReloadTab = async (e) => {
+    // stop propagation so the parent tab-title click doesn't re-activate
+    // this tab by its now-stale (removed) id after reloadTab replaces it
+    e && e.stopPropagation()
+    const { tab, batch } = this.props
+    const newTab = window.store.reloadTab(tab.id)
+    if (newTab) {
+      window.store.clickTab(newTab.id, batch)
+    }
   }
 
   handleReloadAll = () => {
@@ -309,8 +317,13 @@ class Tab extends Component {
     window.store.closeTabsRight(this.props.tab.id)
   }
 
+  togglePin = () => {
+    const { tab } = this.props
+    window.store.pinTab(tab.id, !tab.isPinned)
+  }
+
   renderContext = () => {
-    const { tabs, tabIndex } = this.props
+    const { tabs, tabIndex, tab } = this.props
     const len = tabs.length
     const index = tabIndex
     const noRight = index >= len - 1
@@ -359,6 +372,13 @@ class Tab extends Component {
         icon: <iconsMap.EditOutlined />,
         label: e('rename')
       },
+      !window.store.isMobile && {
+        key: 'togglePin',
+        icon: tab.isPinned
+          ? <iconsMap.PushpinFilled />
+          : <iconsMap.PushpinOutlined />,
+        label: tab.isPinned ? e('unpin') : e('pin')
+      },
       {
         key: 'handleReloadTab',
         icon: <iconsMap.ReloadOutlined />,
@@ -542,6 +562,7 @@ class Tab extends Component {
               }
               <span className='tab-title'>
                 <span className='iblock mg1r tab-count' style={styleTag}>{tabCount}</span>
+                {tab.isPinned && <PushpinFilled className='tab-pin' />}
                 <span className='mg1r'>{title}</span>
               </span>
             </div>

package/client/components/tabs/tabs.styl

@@ -135,6 +135,10 @@
   font-size 10px
   &:hover
     background var(--error)
+// touch screens have no hover — always reveal the close icon
+.is-touch-device
+  .tab-close
+    display block
 
 .tabs-add-btn
   display inline-block
@@ -225,6 +229,10 @@
   height 20px
   line-height 21px
 
+.tab-pin
+  margin-right 3px
+  font-size 11px
+
 .ssh-tunnel-list-wrapper
   max-height 300px
   overflow-y auto

package/client/components/terminal/shortcut-bar-entry.jsx

@@ -37,6 +37,7 @@
  */
 
 import { lazy, Suspense, useEffect, useState } from 'react'
+import { auto } from 'manate/react'
 
 const ShortcutBar = lazy(() => import('./shortcut-bar'))
 
@@ -52,38 +53,37 @@ export const KEYBOARD_MIN = 120
 // keyboard from a mouse-driven window resize on touch-capable desktops.
 const TOUCH_GRACE_MS = 3000
 
-// kept as a coarse capability fallback for engines without visualViewport.
-// Modern Chromium (Electron) always exposes window.visualViewport, so this is
-// effectively only reached on very old runtimes — where remote-control
-// misreporting is not a concern.
-export function isTouchDevice () {
-  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
-    return false
-  }
-  const coarse = typeof window.matchMedia === 'function' &&
-    window.matchMedia('(pointer: coarse)').matches
-  const hasTouch = (navigator.maxTouchPoints || 0) > 0 ||
-    ('ontouchstart' in window)
-  return Boolean(coarse || hasTouch)
-}
-
-export default function ShortcutBarEntry (props) {
-  // mount the lazy bar only after a soft keyboard has been seen at least once,
-  // so its code (and antd/icon deps) stays out of the main bundle on devices
-  // that never show one (desktops, remote-control clients mis-reported as
-  // touch, etc.).
-  //
+function ShortcutBarEntry (props) {
+  const { store } = props
   // opt out entirely when the user has disabled the shortcut bar in common
   // settings — bail before any listener is attached or component imported.
-  const { store } = props
   const disabled = store.config.disableShortcutBar
+  // follow the store's live touch state (flipped by main.jsx from real
+  // pointer input — mouse → false, touch/pen → true) instead of probing screen
+  // capability, which only says the screen *can* be touched, not whether the
+  // user is actually using touch, so the bar reacts when a touch-capable
+  // machine starts being used by touch.
+  const isTouch = store.isTouchDevice
+  // very old runtimes expose no visualViewport — the lazy "wait for a real
+  // keyboard" signal below can never fire there, so fall back straight to the
+  // touch state.
+  const noVisualViewport = typeof window === 'undefined' || !window.visualViewport
   const [keyboardSeen, setKeyboardSeen] = useState(() => {
-    if (disabled || typeof window === 'undefined' || !window.visualViewport) {
-      return disabled ? false : isTouchDevice()
+    if (noVisualViewport) {
+      return !disabled && isTouch
     }
     return false
   })
 
+  // keep the no-visualViewport fallback current as the store's touch state
+  // flips at runtime; on modern engines keyboardSeen is driven by the resize
+  // listener below and this never runs.
+  useEffect(() => {
+    if (noVisualViewport) {
+      setKeyboardSeen(!disabled && isTouch)
+    }
+  }, [disabled, isTouch, noVisualViewport])
+
   useEffect(() => {
     const vv = window.visualViewport
     if (!vv) {
@@ -171,3 +171,5 @@ export default function ShortcutBarEntry (props) {
     </Suspense>
   )
 }
+
+export default auto(ShortcutBarEntry)

package/client/components/theme/theme-form.jsx

@@ -40,6 +40,9 @@ export default function ThemeForm (props) {
     action.current = 'saveOnly'
     form.submit()
   }
+  function applyOnly () {
+    props.store.setTheme(props.formData.id)
+  }
   // A function to validate the input text
   async function validateInput (_, value) {
     const input = value
@@ -189,6 +192,25 @@ export default function ThemeForm (props) {
     if (!id) {
       return null
     }
+    if (readonly) {
+      return (
+        <FormItem>
+          <Button
+            type='primary'
+            className='mg1r mg1b'
+            onClick={applyOnly}
+          >
+            {e('apply')}
+          </Button>
+          <Button
+            type='dashed'
+            onClick={exporter}
+          >
+            {e('export')}
+          </Button>
+        </FormItem>
+      )
+    }
     return (
       <FormItem>
         <Button

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

@@ -5,8 +5,7 @@
 import { PureComponent } from 'react'
 import {
   ExportOutlined,
-  ImportOutlined,
-  EditOutlined
+  ImportOutlined
 } from '@ant-design/icons'
 import { Button, Space } from 'antd'
 import Upload from '../common/upload'
@@ -19,21 +18,6 @@ export default class BookmarkTransport extends PureComponent {
 
   handleDownload = () => {}
 
-  handleToggleEdit = () => {
-    window.store.bookmarkSelectMode = true
-  }
-
-  renderEdit () {
-    return (
-      <Button
-        icon={<EditOutlined />}
-        onClick={this.handleToggleEdit}
-        title={e('edit')}
-        key='edit-and-del'
-      />
-    )
-  }
-
   renderExport () {
     return (
       <Button
@@ -63,19 +47,11 @@ export default class BookmarkTransport extends PureComponent {
   }
 
   render () {
-    const edit = this.renderEdit()
-    if (edit === null) {
-      return (
-        <Space.Compact>
-          {this.renderExport()}
-          {this.renderImport()}
-        </Space.Compact>
-      )
-    }
-    return [
-      edit,
-      this.renderExport(),
-      this.renderImport()
-    ]
+    return (
+      <Space.Compact>
+        {this.renderExport()}
+        {this.renderImport()}
+      </Space.Compact>
+    )
   }
 }

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

@@ -187,3 +187,16 @@
   &.is-active
     opacity 1
     pointer-events auto
+// touch screens have no hover — always reveal the hover-only action icons
+.is-touch-device
+  .tree-list-row
+    .tree-item-title
+      padding-right 60px
+    .tree-item-op-wrap
+      opacity 1
+      pointer-events auto
+  .add-menu-wrap
+  .sidebar-panel
+    .tree-list-row
+      .tree-item-title
+        padding-right 20px

package/client/store/init-state.js

@@ -29,7 +29,6 @@ import {
 import * as ls from '../common/safe-local-storage'
 import { exclude } from 'manate'
 import initSettingItem from '../common/init-setting-item'
-import { getRandomDefaultColor } from '../common/rand-hex-color'
 
 const e = window.translate
 
@@ -39,7 +38,7 @@ function getDefaultBookmarkGroups (bookmarks) {
       title: e(defaultBookmarkGroupId),
       id: defaultBookmarkGroupId,
       bookmarkIds: bookmarks.map(d => d.id),
-      color: getRandomDefaultColor()
+      color: '#0088cc'
     })
   ]
 }
@@ -135,6 +134,8 @@ export default () => {
     settingTab: settingMap.bookmarks, // setting tab
     bookmarkId: undefined,
     showModal: 0,
+    // mobile settings view: 'menu' (left col list, default) or 'content' (right col)
+    settingMobileView: 'menu',
 
     // setting sync related
     autoSyncReady: false,
@@ -214,6 +215,11 @@ export default () => {
     isMaximized: window.pre.runSync('isMaximized'),
     hasNodePty: window.pre.runSync('nodePtyCheck'),
     isMobile: window.innerWidth <= mobileBreakpoint,
+    // reflects the input device actually in use, not screen capability — a
+    // capability probe only proves the screen can be touched, not whether the
+    // user operates it by touch. Seeded false and left to main.jsx, which sets
+    // mouse → false / touch → true on the first real pointer event.
+    isTouchDevice: false,
     fullscreen: false,
     tabsHeight: 36,
 

package/client/store/setting.js

@@ -40,6 +40,7 @@ export default Store => {
     })
     store.setSettingItem(item)
     store.openSettingModal()
+    store.settingMobileView = 'content'
   }
 
   Store.prototype.handleOpenQuickCommandsSetting = function () {
@@ -136,12 +137,20 @@ export default Store => {
       )
     }
     store.showModal = modals.setting
+    // mobile always lands on the left col menu first
+    store.settingMobileView = 'menu'
+  }
+
+  Store.prototype.backToSettingMenu = function () {
+    window.store.settingMobileView = 'menu'
   }
 
   Store.prototype.hideSettingModal = function () {
     const { store } = window
     store.showModal = modals.hide
     store.setSettingItem({})
+    // reset so a later open starts from the menu on mobile
+    store.settingMobileView = 'menu'
   }
 
   Store.prototype.loadFontList = async function () {
@@ -161,5 +170,7 @@ export default Store => {
       settingTab
     })
     store.setSettingItem(item)
+    // a new tab means a new menu to pick from on mobile
+    store.settingMobileView = 'menu'
   }
 }

package/client/store/sidebar.js

@@ -19,6 +19,18 @@ export default Store => {
     store.expandedKeys = []
   }
 
+  // Single entry point for opening/closing the left side panel from the
+  // sidebar icons. The panel is a toggle: call again to close. It also
+  // re-centers the pin behaviour so every open/close transition goes
+  // through this one method.
+  Store.prototype.openLeftSidePanel = function (field = 'bookmarks') {
+    const { store } = window
+    if (store.pinned) {
+      return
+    }
+    store.setOpenedSideBar(store.openedSideBar ? '' : field)
+  }
+
   Store.prototype.handlePin = function (pinned) {
     const { store } = window
     const current = !store.pinned

package/client/store/sync.js

@@ -52,6 +52,46 @@ function isJSON (str = '') {
   return str.startsWith('[')
 }
 
+/**
+ * Names of data types that are actually encrypted on upload when a
+ * sync password is set.  Only these types trigger the fail-closed
+ * check on download.
+ */
+const encryptedDataNames = new Set([
+  settingMap.bookmarks,
+  settingMap.profiles
+])
+
+/**
+ * Decrypt sync data with fail-closed semantics.
+ *
+ * Only bookmarks and profiles are encrypted on upload when a sync
+ * password is configured.  For those two types, plaintext JSON
+ * (content starting with '[') must never be silently accepted when a
+ * password is set — it could be attacker-injected data from a
+ * compromised sync backend.  Instead, we reject it so the user is
+ * alerted rather than silently importing untrusted data.
+ *
+ * For all other data types, plaintext JSON is expected even when a
+ * password is set, so we accept it without error.
+ */
+async function decryptSyncData (str, pass, dataName) {
+  if (!str) {
+    return str
+  }
+  if (isJSON(str)) {
+    if (pass && encryptedDataNames.has(dataName)) {
+      throw new Error(
+        'Sync data is plaintext but a sync password is configured. ' +
+        'This may indicate the data was tampered with or the sync backend is compromised. ' +
+        'Aborting sync download for safety.'
+      )
+    }
+    return str
+  }
+  return window.pre.runGlobalAsync('decryptAsync', str, pass)
+}
+
 async function fetchData (type, func, args, token, proxy) {
   const data = {
     type,
@@ -337,9 +377,7 @@ export default (Store) => {
       let serverItems = []
       if (serverStr) {
         try {
-          if (!isJSON(serverStr)) {
-            serverStr = await window.pre.runGlobalAsync('decryptAsync', serverStr, pass)
-          }
+          serverStr = await decryptSyncData(serverStr, pass, n)
           serverItems = JSON.parse(serverStr)
         } catch (e) {
           console.error(`Failed to parse server data for ${n}:`, e)
@@ -520,9 +558,7 @@ export default (Store) => {
               continue
             }
           }
-          if (!isJSON(str)) {
-            str = await window.pre.runGlobalAsync('decryptAsync', str, pass)
-          }
+          str = await decryptSyncData(str, pass, n)
           let arr = JSON.parse(str)
           if (n === settingMap.terminalThemes) {
             arr = store.fixThemes(arr)
@@ -585,9 +621,7 @@ export default (Store) => {
           continue
         }
       }
-      if (!isJSON(str)) {
-        str = await window.pre.runGlobalAsync('decryptAsync', str, pass)
-      }
+      str = await decryptSyncData(str, pass, n)
       let arr = JSON.parse(
         str
       )

package/client/store/system-menu.js

@@ -60,6 +60,8 @@ export default Store => {
     })
     store.setSettingItem(getInitItem([], settingMap.bookmarks))
     store.openSettingModal()
+    // on mobile, jump straight to the new bookmark form instead of the menu
+    store.settingMobileView = 'content'
   }
 
   Store.prototype.onNewSshAI = function () {

package/client/store/tab.js

@@ -127,6 +127,8 @@ export default Store => {
     if (store[batchProp] === tabId) {
       store[batchProp] = newTab.id
     }
+
+    return newTab
   }
 
   Store.prototype.reloadAllTabs = function () {
@@ -168,6 +170,17 @@ export default Store => {
     store[`activeTabId${sourceTab.batch}`] = duplicatedTab.id
   }
 
+  // only toggles the flag: the tabs bar renders pinned tabs first,
+  // store.tabs order itself is never changed by pinning
+  Store.prototype.pinTab = function (tabId, isPinned = true) {
+    const { store } = window
+    const tab = store.tabs.find(t => t.id === tabId)
+    if (!tab || Boolean(tab.isPinned) === isPinned) {
+      return
+    }
+    tab.isPinned = isPinned
+  }
+
   Store.prototype.closeOtherTabs = function (id) {
     const { store } = window
     const { tabs } = store
@@ -534,7 +547,8 @@ export default Store => {
       'sshSftpSplitView',
       'sshTunnelResults',
       'displayRaw',
-      'autoReConnect'
+      'autoReConnect',
+      'isPinned'
     ]
     const { history } = store
     const index = history.filter(d => d.id && d.tab).findIndex(d => {

package/package.json

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