@electerm/electerm-react 5.0.8 → 5.1.7

package/client/common/cache.js

@@ -3,6 +3,7 @@
 // we persist cache to local storage, so we can keep cache after restart
 
 import { safeGetItem, safeSetItem } from './safe-local-storage.js'
+import safeParse from './parse-json-safe.js'
 
 class MapCache {
   constructor (limit, key) {
@@ -15,7 +16,7 @@ class MapCache {
   load () {
     const data = safeGetItem(this.key)
     if (data) {
-      const arr = JSON.parse(data)
+      const arr = safeParse(data, [])
       for (const item of arr) {
         this.cache.set(item.key, item.value)
       }

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/common/parse-json-safe.js

@@ -1,14 +1,18 @@
 /**
  * safe parse json
+ * @param {string} str
+ * @param defaultValue value returned when parse fails or str is empty/null.
+ *                     Falls back to the original str when not provided.
  */
-export default str => {
+export default (str, defaultValue) => {
+  const hasDefault = defaultValue !== undefined
   if (str === '' || str == null) {
-    return str
+    return hasDefault ? defaultValue : str
   }
   try {
     return JSON.parse(str)
   } catch (e) {
     console.error('JSON.parse fails', e.stack)
-    return str
+    return hasDefault ? defaultValue : str
   }
 }

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/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'
@@ -112,17 +113,12 @@ export default auto(function CmdHistory (props) {
     return (
       <div className='cmd-history-header pd2b'>
         <div className='cmd-history-sort'>
-          <Switch
+          <SwitchLabel
             checked={sortByFrequency}
             onChange={handleSortByFrequencyChange}
             size='small'
+            label={e('sortByFrequency')}
           />
-          <span
-            className='cmd-history-sort-label pointer'
-            onClick={() => handleSortByFrequencyChange(!sortByFrequency)}
-          >
-            {e('sortByFrequency')}
-          </span>
         </div>
         <UnorderedListOutlined
           className='cmd-history-clear-icon pointer clear-ai-icon icon-hover'

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-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/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>

package/client/components/setting-sync/data-import.jsx

@@ -4,7 +4,6 @@
 
 import {
   Button,
-  Switch,
   Select,
   Space
 } from 'antd'
@@ -13,6 +12,7 @@ import {
   ExportOutlined
 } from '@ant-design/icons'
 import Upload from '../common/upload'
+import SwitchLabel from '../common/switch'
 import HelpIcon from '../common/help-icon'
 
 const e = window.translate
@@ -87,11 +87,10 @@ export default function DataTransport (props) {
         </Upload>
       </div>
       <div className='fright'>
-        <Switch
+        <SwitchLabel
           checked={autoSyncEnabled}
-          checkedChildren={txt}
+          label={txt}
           onChange={handleAutoSync}
-          unCheckedChildren={txt}
           className='mg3l mg1r'
         />
         {autoSyncEnabled && (

package/client/components/setting-sync/setting-sync-form.jsx

@@ -7,8 +7,9 @@
  */
 import { useEffect, useRef } from 'react'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
-import { Button, Input, Form, Alert, Switch } from 'antd'
+import { Button, Input, Form, Alert } from 'antd'
 import { notification } from '../common/notification'
+import SwitchLabel from '../common/switch'
 import Link from '../common/external-link'
 import dayjs from 'dayjs'
 import eq from 'fast-deep-equal'
@@ -253,7 +254,7 @@ export default function SyncForm (props) {
           name='skipVerify'
           valuePropName='checked'
         >
-          <Switch />
+          <SwitchLabel />
         </FormItem>
         <FormItem
           label={createLabel(e('password'))}

package/client/components/sftp/file-compare-modal.jsx

@@ -21,7 +21,7 @@ const formatTime = time
 const CodeCompare = lazy(() => import('./code-compare'))
 
 const Loading = () => (
-  <div style={{ padding: 40, textAlign: 'center' }}>
+  <div className='aligncenter pd3'>
     <Spin />
   </div>
 )

package/client/components/sidebar/history.jsx

@@ -4,8 +4,8 @@
 
 import React, { useState, useEffect } from 'react'
 import { auto } from 'manate/react'
-import { Switch } from 'antd'
 import { UnorderedListOutlined } from '@ant-design/icons'
+import SwitchLabel from '../common/switch'
 import HistoryItem from './history-item'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage.js'
 import '../setting-panel/list.styl'
@@ -45,17 +45,12 @@ export default auto(function HistoryPanel (props) {
     return (
       <div className='history-header pd2x pd2b'>
         <div className='history-sort'>
-          <Switch
+          <SwitchLabel
             checked={sortByFrequency}
             onChange={handleSortByFrequencyChange}
             size='small'
+            label={e('sortByFrequency')}
           />
-          <span
-            className='history-sort-label pointer'
-            onClick={() => handleSortByFrequencyChange(!sortByFrequency)}
-          >
-            {e('sortByFrequency')}
-          </span>
         </div>
         <UnorderedListOutlined
           {...clearIconProps}