@electerm/electerm-react 5.0.7 → 5.1.6

package/client/common/constants.js

@@ -79,6 +79,8 @@ export const authTypeMap = buildConst([
 
 export const footerHeight = 36
 export const quickCommandBoxHeight = 180
+export const shortcutBarHeight = 44
+export const shortcutBarLsKey = 'shortcut-bar-buttons'
 export const isWin = typeof window.et.isWin === 'undefined' ? window.pre.isWin : window.et.isWin
 export const isMac = typeof window.et.isMac === 'undefined' ? window.pre.isMac : window.et.isMac
 export const isMacJs = /Macintosh|Mac|Mac OS|MacIntel|MacPPC|Mac68K/gi.test(window.navigator.userAgent)

package/client/common/default-setting.js

@@ -79,5 +79,14 @@ export default {
   allowMultiInstance: false,
   disableDeveloperTool: false,
   dragDropBehavior: 'ask',
-  switchTabOnHover: false
+  switchTabOnHover: false,
+  leftSideBarIcons: [
+    'newBookmark',
+    'quickConnect',
+    'bookmarks',
+    'terminalThemes',
+    'setting',
+    'settingSync',
+    'widgets'
+  ]
 }

package/client/common/left-sidebar-icon-defs.js

@@ -0,0 +1,36 @@
+/**
+ * customizable icons for the far-left sidebar.
+ *
+ * `text` is a locale key passed to window.translate. The "about",
+ * "hide sidebar" and "file transfer" icons are intentionally excluded —
+ * they are always visible / conditionally rendered and not part of the
+ * customizable set.
+ *
+ * order of `leftSidebarIconOptions` is the default order shown in the sidebar.
+ */
+export const leftSidebarIconOptions = [
+  { id: 'newBookmark', text: 'newBookmark' },
+  { id: 'quickConnect', text: 'quickConnect' },
+  { id: 'bookmarks', text: 'bookmarks' },
+  { id: 'terminalThemes', text: 'terminalThemes' },
+  { id: 'setting', text: 'setting' },
+  { id: 'settingSync', text: 'settingSync' },
+  { id: 'widgets', text: 'widgets' }
+]
+
+// default ordered list of icon ids — mirrors the order above
+export const defaultLeftSideBarIcons = leftSidebarIconOptions.map(o => o.id)
+
+// valid ids, for sanitizing persisted/synced config
+export const leftSidebarIconIds = new Set(leftSidebarIconOptions.map(o => o.id))
+
+/**
+ * returns a clean, ordered list of icon ids from a possibly-untrusted value:
+ * unknown ids dropped, missing default ids left to the user's choice.
+ */
+export function normalizeLeftSideBarIcons (value) {
+  if (!Array.isArray(value)) {
+    return [...defaultLeftSideBarIcons]
+  }
+  return value.filter(id => leftSidebarIconIds.has(id))
+}

package/client/components/ai/ai-config-props.js

@@ -19,6 +19,14 @@ export const defaultAIPresets = [
     modelAI: 'deepseek-ai/deepseek-v4-flash',
     authHeaderNameAI: 'Authorization: Bearer'
   },
+  {
+    id: 'ApiSmart',
+    nameAI: 'ApiSmart',
+    baseURLAI: 'https://api.apismart.ai/v1',
+    apiPathAI: '/chat/completions',
+    modelAI: 'DEEPSEEK_V4_FLASH',
+    authHeaderNameAI: 'Authorization: Bearer'
+  },
   {
     id: 'deepseek',
     nameAI: 'DeepSeek',

package/client/components/bookmark-form/common/fields.jsx

@@ -3,9 +3,10 @@
  * Maps field types to React components
  */
 import React from 'react'
-import { Form, Input, InputNumber, Switch, Select, AutoComplete, Alert, Radio } from 'antd'
+import { Form, Input, InputNumber, Select, AutoComplete, Alert, Radio } from 'antd'
 import { ColorPickerItem } from './color-picker-item.jsx'
 import Password from '../../common/password.jsx'
+import SwitchLabel from '../../common/switch.jsx'
 import InputAutoFocus from '../../common/input-auto-focus.jsx'
 import ProxyField from './proxy.jsx'
 import X11Field from './x11.jsx'
@@ -66,7 +67,7 @@ export function renderFormItem (item, formItemLayout, form, ctxProps, index) {
         control = <InputNumber min={1} max={65535} step={1} {...item.props} />
         break
       case 'switch':
-        control = <Switch {...item.props} />
+        control = <SwitchLabel {...item.props} />
         break
       case 'select':
         control = <Select options={item.options} {...item.props} />

package/client/components/bookmark-form/common/ssh-agent.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
-import { Form, Input, Switch, Space } from 'antd'
+import { Form, Input, Space } from 'antd'
+import SwitchLabel from '../../common/switch'
 import HelpIcon from '../../common/help-icon'
 import { formItemLayout } from '../../../common/form-layout'
 
@@ -18,7 +19,7 @@ export default function SshAgent () {
           valuePropName='checked'
           noStyle
         >
-          <Switch />
+          <SwitchLabel />
         </FormItem>
         <FormItem
           name='sshAgent'

package/client/components/bookmark-form/common/x11.jsx

@@ -2,11 +2,11 @@
  * bookmark form
  */
 import {
-  Switch,
   Form,
   Button,
   Select
 } from 'antd'
+import SwitchLabel from '../../common/switch'
 import { formItemLayout } from '../../../common/form-layout'
 
 const FormItem = Form.Item
@@ -153,7 +153,7 @@ export default function renderX11 ({ form }) {
         name='x11'
         valuePropName='checked'
       >
-        <Switch />
+        <SwitchLabel />
       </FormItem>
     </>
   )

package/client/components/common/logo-elem.jsx

@@ -9,7 +9,7 @@ import './logo.styl'
 
 export default function LogoElem () {
   return (
-    <h1 className='mg3y font50'>
+    <h1 className='logo-elem mg3y font50'>
       <span className='iblock pd3 morph-shape mg1l mg1r'>
         <img src={logoPath2} className='iblock mwm-100 mg1l mg1r logo-filter logo-img' />
       </span>

package/client/components/common/logo.styl

@@ -3,8 +3,14 @@
 .logo-img-small
   height 28px
   border-radius 28px
-@media (max-width: 500px)
+// the h1 vertical margin so the logo stops dominating the no-session panel.
+.is-mobile
+  .logo-elem
+    margin-top 8px
+    margin-bottom 8px
+  .morph-shape
+    padding 6px
   .logo-img
-    height 40px
+    height 32px
   .logo-img-small
     height 20px

package/client/components/common/switch.jsx

@@ -0,0 +1,63 @@
+/**
+ * antd Switch wrapper.
+ *
+ * `checkedChildren` / `unCheckedChildren` cram the label text inside the
+ * toggle, which renders poorly on small / touch screens. This wrapper drops
+ * those props and renders an optional text label as a sibling `<span>`
+ * instead. Clicking the label toggles the switch by default.
+ *
+ * Passes every other prop (checked, onChange, size, disabled, ref, ...) through
+ * to the underlying antd Switch, so it is a drop-in replacement and is safe
+ * inside antd Form.Item (`valuePropName='checked'`).
+ */
+
+import { memo } from 'react'
+import { Switch } from 'antd'
+import './switch.styl'
+
+function SwitchLabel (props) {
+  const {
+    label,
+    labelPosition = 'after',
+    labelClickToggle = true,
+    className = '',
+    labelClassName = '',
+    checked,
+    onChange,
+    ref,
+    ...rest
+  } = props
+  const hasLabel = label !== undefined && label !== null && label !== ''
+  const onLabelClick = labelClickToggle && onChange
+    ? () => onChange(!checked)
+    : undefined
+  const labelEl = hasLabel
+    ? (
+      <span
+        className={
+          'switch-label-text' +
+          (labelPosition === 'before' ? ' mg1r' : ' mg1l') +
+          (labelClickToggle ? ' pointer' : '') +
+          (labelClassName ? ' ' + labelClassName : '')
+        }
+        onClick={onLabelClick}
+      >
+        {label}
+      </span>
+      )
+    : null
+  return (
+    <span className={'switch-label-wrap' + (className ? ' ' + className : '')}>
+      {labelPosition === 'before' ? labelEl : null}
+      <Switch
+        checked={checked}
+        onChange={onChange}
+        ref={ref}
+        {...rest}
+      />
+      {labelPosition === 'after' ? labelEl : null}
+    </span>
+  )
+}
+
+export default memo(SwitchLabel)

package/client/components/common/switch.styl

@@ -0,0 +1,7 @@
+.switch-label-wrap
+  display inline-flex
+  align-items center
+  vertical-align middle
+
+.switch-label-text
+  user-select none

package/client/components/footer/cmd-history.jsx

@@ -3,8 +3,9 @@
  */
 
 import { useState, useEffect } from 'react'
-import { Button, Empty, Popover, Switch } from 'antd'
+import { Button, Empty, Popover } from 'antd'
 import { auto } from 'manate/react'
+import SwitchLabel from '../common/switch'
 import { copy } from '../../common/clipboard'
 import { HistoryOutlined, DeleteOutlined, CopyOutlined, UnorderedListOutlined } from '@ant-design/icons'
 import InputAutoFocus from '../common/input-auto-focus'
@@ -111,13 +112,14 @@ export default auto(function CmdHistory (props) {
     }
     return (
       <div className='cmd-history-header pd2b'>
-        <Switch
-          checkedChildren={e('sortByFrequency')}
-          unCheckedChildren={e('sortByFrequency')}
-          checked={sortByFrequency}
-          onChange={handleSortByFrequencyChange}
-          size='small'
-        />
+        <div className='cmd-history-sort'>
+          <SwitchLabel
+            checked={sortByFrequency}
+            onChange={handleSortByFrequencyChange}
+            size='small'
+            label={e('sortByFrequency')}
+          />
+        </div>
         <UnorderedListOutlined
           className='cmd-history-clear-icon pointer clear-ai-icon icon-hover'
           title={e('clear')}

package/client/components/footer/cmd-history.styl

@@ -17,6 +17,14 @@
   justify-content space-between
   padding-bottom 8px
 
+.cmd-history-sort
+  display flex
+  align-items center
+  gap 6px
+
+.cmd-history-sort-label
+  user-select none
+
 .cmd-history-clear-icon
   font-size 14px
   padding 4px

package/client/components/layout/layout.jsx

@@ -4,7 +4,8 @@ import TabsWrap from '../tabs/index'
 import {
   splitConfig,
   quickCommandBoxHeight,
-  footerHeight
+  footerHeight,
+  shortcutBarHeight
 } from '../../common/constants'
 import layoutAlg from './layout-alg'
 import calcSessionSize from './session-size-alg'
@@ -41,9 +42,10 @@ export default auto(function Layout (props) {
       rightPanelPinned,
       rightPanelWidth,
       resizeTrigger,
-      inActiveTerminal
+      inActiveTerminal,
+      shortcutBarVisible
     } = props.store
-    const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) + resizeTrigger
+    const h = height - footerHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight : 0) + resizeTrigger
     const l = pinned ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
     const r = rightPanelVisible && rightPanelPinned ? rightPanelWidth : 0
     return {
@@ -65,14 +67,15 @@ export default auto(function Layout (props) {
       rightPanelVisible,
       rightPanelPinned,
       rightPanelWidth,
-      pinned
+      pinned,
+      shortcutBarVisible
     } = props.store
     const l = pinned ? leftSidePanelWidth : 0
     const r = rightPanelPinned && rightPanelVisible ? rightPanelWidth : 0
     // 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)
+    const h = height - footerHeight - (pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight : 0)
     return layoutAlg(layout, w, h)
   }
   const layoutSize = calcLayoutStyle()

package/client/components/main/main.jsx

@@ -42,6 +42,7 @@ import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
 import TerminalInfo from '../terminal-info/terminal-info-entry'
+import ShortcutBarEntry from '../terminal/shortcut-bar-entry'
 import '../../common/fs.js'
 import './term-fullscreen.styl'
 
@@ -99,7 +100,8 @@ export default auto(function Index (props) {
     transferToConfirm,
     openResolutionEdit,
     rightPanelTitle,
-    rightPanelTab
+    rightPanelTab,
+    widgetInstances
   } = store
   const upgradeInfo = deepCopy(store.upgradeInfo)
   const cls = classnames({
@@ -181,7 +183,9 @@ export default auto(function Index (props) {
     fileTransfers: copiedTransfer,
     transferHistory: copiedHistory,
     upgradeInfo,
-    pinned
+    pinned,
+    leftSideBarIcons: config.leftSideBarIcons,
+    widgetInstancesLength: widgetInstances.length
   }
 
   const infoModalProps = {
@@ -311,6 +315,7 @@ export default auto(function Index (props) {
         <BookmarkFromHistoryModal />
         <NotificationContainer />
         <BatchOpRunner />
+        <ShortcutBarEntry store={store} />
         {!isAIDisabled() && <AIConfigModal store={store} />}
         <UnixTimestampTooltip />
       </div>

package/client/components/profile/profile-form-elem.jsx

@@ -1,10 +1,10 @@
 import { useState } from 'react'
 import {
   Form,
-  Switch,
   Button
 } from 'antd'
 import message from '../common/message'
+import SwitchLabel from '../common/switch'
 import InputAutoFocus from '../common/input-auto-focus'
 import { formItemLayout } from '../../common/form-layout'
 import HelpIcon from '../common/help-icon'
@@ -90,7 +90,7 @@ export default function ProfileFormElem (props) {
         name='isDefault'
         valuePropName='checked'
       >
-        <Switch />
+        <SwitchLabel />
       </FormItem>
       <ProfileTabs {...tabsProps} />
       <FormItem>

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

@@ -2,7 +2,7 @@
  * quick commands footer selection wrap
  */
 
-import { useState, useRef } from 'react'
+import { useState } from 'react'
 import { quickCommandLabelsLsKey, pinnedQuickCommandBarKey } from '../../common/constants'
 import { sortBy } from 'lodash-es'
 import { Button, Input, Select, Space, Flex } from 'antd'
@@ -25,21 +25,6 @@ const { Option } = Select
 export default function QuickCommandsFooterBox (props) {
   const [keyword, setKeyword] = useState('')
   const [label, setLabel] = useState(ls.getItem(quickCommandLabelsLsKey, ''))
-  const timer = useRef(null)
-
-  function handleMouseLeave () {
-    timer.current = setTimeout(() => {
-      toggle(false)
-    }, 500)
-  }
-
-  function handleMouseEnter () {
-    clearTimeout(timer.current)
-  }
-
-  function toggle (openQuickCommandBar) {
-    window.store.openQuickCommandBar = openQuickCommandBar
-  }
 
   function handleTogglePinned () {
     const current = !window.store.pinnedQuickCommandBar
@@ -209,9 +194,7 @@ export default function QuickCommandsFooterBox (props) {
     className: 'qm-wrap-tooltip',
     style: {
       left: w
-    },
-    onMouseLeave: handleMouseLeave,
-    onMouseEnter: handleMouseEnter
+    }
   }
   return (
     <div

package/client/components/quick-commands/quick-commands-form-elem.jsx

@@ -1,11 +1,11 @@
 import {
   Button,
-  Switch,
   Form,
   Select,
   Input
 } from 'antd'
 import message from '../common/message'
+import SwitchLabel from '../common/switch'
 import { useState } from 'react'
 import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'
@@ -162,7 +162,7 @@ export default function QuickCommandForm (props) {
           name='inputOnly'
           valuePropName='checked'
         >
-          <Switch />
+          <SwitchLabel />
         </FormItem>
         <FormItem>
           <p>

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

@@ -1,5 +1,10 @@
 /**
  * quick commands footer selection
+ *
+ * Click to toggle the quick-command bar. Click-based so it works identically
+ * on touch (mobile) and mouse (desktop) — the old hover-to-open model was
+ * unreliable on Android, where a tap synthesizes mouseleave and cancels the
+ * open timer.
  */
 
 import { PureComponent } from 'react'
@@ -7,33 +12,18 @@ import { Button } from 'antd'
 import './qm.styl'
 
 export default class QuickCommandsFooter extends PureComponent {
-  componentWillUnmount () {
-    clearTimeout(this.timer)
-    this.timer = null
-  }
-
-  handleOpen = () => {
-    this.timer = setTimeout(this.act, 500)
-  }
-
-  act = () => {
-    window.store.openQuickCommandBar = true
-  }
-
-  handleMouseLeave = () => {
-    clearTimeout(this.timer)
+  handleClick = () => {
+    const { store } = window
+    store.openQuickCommandBar = !store.openQuickCommandBar
   }
 
   render () {
     return (
-      <div
-        className='fleft relative quick-command-trigger-wrap'
-        onMouseEnter={this.handleOpen}
-        onMouseLeave={this.handleMouseLeave}
-      >
+      <div className='fleft relative quick-command-trigger-wrap'>
         <Button
           size='small'
           type='text'
+          onClick={this.handleClick}
         >
           Q
         </Button>

package/client/components/rdp/rdp-session.jsx

@@ -15,7 +15,6 @@ import {
 import {
   Spin,
   Select,
-  Switch,
   Tooltip
 } from 'antd'
 import * as ls from '../../common/safe-local-storage'
@@ -23,6 +22,7 @@ import scanCode from './code-scan'
 import resolutions from './resolutions'
 import { readClipboardAsync } from '../../common/clipboard'
 import RemoteFloatControl from '../common/remote-float-control'
+import SwitchLabel from '../common/switch'
 import HelpIcon from '../common/help-icon'
 import { FileTransferManager, createFileLogger } from './file-transfer'
 import { notification } from '../common/notification'
@@ -634,8 +634,7 @@ export default class RdpSession extends PureComponent {
     const scaleProps = {
       checked: this.state.scaleViewport,
       onChange: this.handleScaleViewChange,
-      unCheckedChildren: window.translate('scaleViewport'),
-      checkedChildren: window.translate('scaleViewport'),
+      label: window.translate('scaleViewport'),
       className: 'mg1l'
     }
     const uploadTitle = window.translate('upload') || 'Upload files to remote'
@@ -671,7 +670,7 @@ export default class RdpSession extends PureComponent {
             className='mg2r mg1l pointer'
           />
           {this.renderInfo()}
-          <Switch
+          <SwitchLabel
             {...scaleProps}
           />
           <Tooltip title={uploadTitle}>

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

@@ -7,9 +7,9 @@ import {
 } from '@ant-design/icons'
 import message from '../common/message'
 import { notification } from '../common/notification'
+import SwitchLabel from '../common/switch'
 import {
   Select,
-  Switch,
   Button,
   Table,
   Space,
@@ -34,6 +34,7 @@ import delay from '../../common/wait.js'
 import isColorDark from '../../common/is-color-dark'
 import DeepLinkControl from './deep-link-control'
 import HotkeySetting from './hotkey'
+import SettingLeftSidebarIcons from './setting-left-sidebar-icons'
 import './setting.styl'
 
 const { Option } = Select
@@ -192,10 +193,9 @@ export default class SettingCommon extends Component {
     const checked = !!this.props.config[name]
     return (
       <div className='pd2b' key={'rt' + name}>
-        <Switch
+        <SwitchLabel
           checked={checked}
-          checkedChildren={e(name)}
-          unCheckedChildren={e(name)}
+          label={e(name)}
           onChange={v => this.onChangeValue(v, name)}
         />
         {isNumber(extra) ? null : extra}
@@ -372,7 +372,7 @@ export default class SettingCommon extends Component {
               style={{ body: { style } }}
             />
           </span>
-          <Switch
+          <SwitchLabel
             checked={enableGlobalProxy}
             onChange={v => {
               this.onChangeValue(v, 'enableGlobalProxy')
@@ -471,6 +471,10 @@ export default class SettingCommon extends Component {
     return (
       <div className='form-wrap pd1y pd2x'>
         <h2>{e('settings')}</h2>
+        <SettingLeftSidebarIcons
+          config={props.config}
+          store={props.store}
+        />
         <HotkeySetting
           {...hotkeyProps}
         />

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

@@ -0,0 +1,54 @@
+/**
+ * editor (embedded in the common settings page) for the customizable
+ * far-left sidebar icons. The select takes effect immediately — order of the
+ * selected ids is the order shown in the sidebar.
+ */
+
+import { Select } from 'antd'
+import {
+  leftSidebarIconOptions,
+  defaultLeftSideBarIcons
+} from '../../common/left-sidebar-icon-defs'
+
+const { Option } = Select
+const e = window.translate
+
+export default function SettingLeftSidebarIcons (props) {
+  const { config, store } = props
+  const value = Array.isArray(config.leftSideBarIcons) && config.leftSideBarIcons.length
+    ? config.leftSideBarIcons
+    : [...defaultLeftSideBarIcons]
+
+  const handleChange = (v) => {
+    store.updateConfig({
+      leftSideBarIcons: v
+    })
+  }
+
+  return (
+    <div className='pd2b'>
+      <div className='pd1b'>{e('leftSideBarIcons')}</div>
+      <Select
+        mode='multiple'
+        value={value}
+        onChange={handleChange}
+        popupMatchSelectWidth={false}
+        style={{ minWidth: 320, width: '100%' }}
+        placeholder={e('leftSideBarIcons')}
+      >
+        {
+          leftSidebarIconOptions.map(opt => {
+            return (
+              <Option
+                key={opt.id}
+                value={opt.id}
+              >
+                {e(opt.text)}
+              </Option>
+            )
+          })
+        }
+      </Select>
+    </div>
+  )
+}

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

@@ -4,9 +4,9 @@ import {
   LoadingOutlined
 } from '@ant-design/icons'
 import message from '../common/message'
+import SwitchLabel from '../common/switch'
 import {
   Select,
-  Switch,
   Button,
   AutoComplete,
   Tooltip,
@@ -123,10 +123,9 @@ export default class SettingTerminal extends Component {
     const txt = label || e(name)
     return (
       <div className={cls} key={'rt' + name}>
-        <Switch
+        <SwitchLabel
           checked={checked}
-          checkedChildren={txt}
-          unCheckedChildren={txt}
+          label={txt}
           onChange={v => this.onChangeValue(v, name)}
         />
       </div>