@electerm/electerm-react 1.100.20 → 1.100.46

package/client/components/bookmark-form/serial-form-ui.jsx

@@ -11,8 +11,7 @@ import {
   Select,
   Switch,
   AutoComplete,
-  Form,
-  TreeSelect
+  Form
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
 import parseInt10 from '../../common/parse-int10'
@@ -24,7 +23,6 @@ import {
   terminalSerialType,
   newBookmarkIdPrefix
 } from '../../common/constants'
-import formatBookmarkGroups from './bookmark-group-tree-format'
 import defaultSettings from '../../common/default-setting'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import useSubmit from './use-submit'
@@ -33,8 +31,9 @@ import useQm from './use-quick-commands'
 import copy from 'json-deep-copy'
 import renderTermBg from './render-bg'
 import { defaults } from 'lodash-es'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import { ColorPickerItem } from './color-picker-item.jsx'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const { Option } = Select
@@ -67,7 +66,7 @@ export default function SerialFormUi (props) {
     : currentBookmarkGroupId
   let initialValues = copy(props.formData)
   const defaultValues = {
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     baudRate: 9600,
     dataBits: 8,
     lock: true,
@@ -91,7 +90,6 @@ export default function SerialFormUi (props) {
       serials = [],
       loaddingSerials
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         <FormItem
@@ -257,17 +255,11 @@ export default function SerialFormUi (props) {
         >
           <Input />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+          formItemLayout={formItemLayout}
+        />
       </div>
     )
   }

package/client/components/bookmark-form/ssh-form-ui.jsx

@@ -26,7 +26,7 @@ import renderAuth from './render-auth-ssh'
 import renderTermBg from './render-bg'
 import renderSshTunnel from './render-ssh-tunnel'
 import renderConnectionHopping from './render-connection-hopping'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import defaultSetting from '../../common/default-setting'
 import './bookmark-form.styl'
 
@@ -61,7 +61,7 @@ export default function BookmarkFormUI (props) {
     port: 22,
     authType: authTypeMap.password,
     id: '',
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     term: props.store.config.terminalType,
     displayRaw: false,
     encode: encodes[0],
@@ -80,7 +80,11 @@ export default function BookmarkFormUI (props) {
       'terminalBackgroundFilterBlur',
       'terminalBackgroundFilterBrightness',
       'terminalBackgroundFilterGrayscale',
-      'terminalBackgroundFilterContrast'
+      'terminalBackgroundFilterContrast',
+      'terminalBackgroundText',
+      'terminalBackgroundTextSize',
+      'terminalBackgroundTextColor',
+      'terminalBackgroundTextFontFamily'
     ])
   }
   initialValues = defaultsDeep(initialValues, defaultValues)

package/client/components/bookmark-form/telnet-form-ui.jsx

@@ -21,7 +21,7 @@ import useUI from './use-ui'
 import useQm from './use-quick-commands'
 import renderCommon from './form-ssh-common'
 import renderTermBg from './render-bg'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import copy from 'json-deep-copy'
 import { defaultsDeep, isEmpty } from 'lodash-es'
 import renderAuth from './render-auth-ssh'
@@ -65,7 +65,7 @@ export default function TelnetFormUI (props) {
     id: '',
     username: 'root',
     password: 'guest',
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     runScripts: [{}],
     term: defaultSettings.terminalType,
     displayRaw: false,

package/client/components/bookmark-form/vnc-form-ui.jsx

@@ -7,7 +7,6 @@ import {
   Input,
   Form,
   InputNumber,
-  TreeSelect,
   Switch,
   Tabs
 } from 'antd'
@@ -20,12 +19,12 @@ import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults, isEmpty } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
-import formatBookmarkGroups from './bookmark-group-tree-format'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import renderProxy from './proxy'
 import ConnectionHopping from './render-connection-hopping.jsx'
 import ProfileItem from './profile-form-item'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -58,7 +57,7 @@ export default function VncFormUi (props) {
     type: terminalVncType,
     port: 5900,
     category: initBookmarkGroupId,
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     viewOnly: false,
     scaleViewport: true,
     connectionHoppings: []
@@ -100,7 +99,6 @@ export default function VncFormUi (props) {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         <FormItem
@@ -181,17 +179,10 @@ export default function VncFormUi (props) {
         >
           <Input.TextArea autoSize={{ minRows: 1 }} />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         {
           renderProxy(props)
         }

package/client/components/bookmark-form/web-form-ui.jsx

@@ -6,7 +6,6 @@ import { useEffect } from 'react'
 import {
   Input,
   Form,
-  TreeSelect,
   Switch
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
@@ -18,9 +17,9 @@ import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
-import formatBookmarkGroups from './bookmark-group-tree-format'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -52,14 +51,13 @@ export default function LocalFormUi (props) {
   const defaultValues = {
     type: terminalWebType,
     category: initBookmarkGroupId,
-    color: getRandomDefaultColor()
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId)
   }
   initialValues = defaults(initialValues, defaultValues)
   function renderCommon () {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         <FormItem
@@ -100,17 +98,10 @@ export default function LocalFormUi (props) {
         >
           <Input.TextArea autoSize={{ minRows: 1 }} />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         <FormItem
           {...formItemLayout}
           label={e('useragent')}

package/client/components/main/main.jsx

@@ -18,7 +18,7 @@ import TerminalCmdSuggestions from '../terminal/terminal-command-dropdown'
 import TransportsActionStore from '../file-transfer/transports-action-store.jsx'
 import classnames from 'classnames'
 import ShortcutControl from '../shortcuts/shortcut-control.jsx'
-import { isMac, isWin } from '../../common/constants'
+import { isMac, isWin, textTerminalBgValue } from '../../common/constants'
 import TermFullscreenControl from './term-fullscreen-control'
 import TerminalInfo from '../terminal-info/terminal-info'
 import { ConfigProvider, notification, message } from 'antd'
@@ -117,7 +117,9 @@ export default auto(function Index (props) {
   const ext1 = {
     className: cls
   }
-  const bgTabs = config.terminalBackgroundImagePath === 'index' || config.terminalBackgroundImagePath === 'randomShape'
+  const bgTabs = config.terminalBackgroundImagePath === 'index' ||
+                  config.terminalBackgroundImagePath === 'randomShape' ||
+                  config.terminalBackgroundImagePath === textTerminalBgValue
     ? store.getTabs()
     : store.getTabs().filter(tab =>
       tab.terminalBackground?.terminalBackgroundImagePath

package/client/components/main/term-fullscreen.styl

@@ -14,17 +14,28 @@
     position fixed
     z-index 100
     background rgba(45, 245, 108, 0.8)
-  .term-wrap
-  .session-v-wrap
+  // Hide all sessions first
+  .session-wrap
+    display none
+  // Only show the session that matches the fullscreen tab ID
+  .session-wrap.session-current
+    display block !important
     position fixed
     left 0 !important
     top 0 !important
     height 100% !important
     width 100% !important
-  .term-wrap-1
-    left 10px !important
-    top 10px !important
-    right 10px !important
-    bottom 10px !important
+    .term-wrap
+    .session-v-wrap
+      position fixed
+      left 0 !important
+      top 0 !important
+      height 100% !important
+      width 100% !important
+    .term-wrap-1
+      left 10px !important
+      top 10px !important
+      right 10px !important
+      bottom 10px !important
 .term-fullscreen-control
   display none

package/client/components/session/session.jsx

@@ -465,7 +465,9 @@ export default class SessionWrapper extends Component {
   }
 
   handleFullscreen = () => {
-    window.store.toggleTermFullscreen(true)
+    // Make this tab the active tab before fullscreening
+    window.store.activeTabId = this.props.tab.id
+    window.store.toggleTermFullscreen(true, this.props.tab.id)
   }
 
   toggleBroadcastInput = () => {

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

@@ -670,6 +670,7 @@ export default class SettingCommon extends Component {
             'confirmBeforeExit',
             'hideIP',
             'allowMultiInstance',
+            'disableDeveloperTool',
             'debug'
           ].map(this.renderToggle)
         }

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

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   AutoComplete,
   Upload,
@@ -6,10 +6,12 @@ import {
   Input
 } from 'antd'
 import {
-  noTerminalBgValue
+  noTerminalBgValue,
+  textTerminalBgValue
 } from '../../common/constants'
 import defaultSettings from '../../common/default-setting'
 import NumberConfig from './number-config'
+import TextBgModal from './text-bg-modal.jsx'
 
 const e = window.translate
 
@@ -19,6 +21,7 @@ export default function TerminalBackgroundConfig ({
   config,
   isGlobal = false
 }) {
+  const [showTextModal, setShowTextModal] = useState(false)
   const value = config[name]
   const defaultValue = defaultSettings[name]
   const onChange = (v) => onChangeValue(v, name)
@@ -33,6 +36,7 @@ export default function TerminalBackgroundConfig ({
       <span>{e('chooseFile')}</span>
     </Upload>
   )
+
   const dataSource = [
     {
       value: '',
@@ -41,8 +45,34 @@ export default function TerminalBackgroundConfig ({
     {
       value: noTerminalBgValue,
       desc: e('noTerminalBg')
+    },
+    {
+      value: textTerminalBgValue,
+      desc: `📝 ${e('textBackground')}`
     }
   ]
+
+  // Add custom text background option if text is configured
+  if (value === textTerminalBgValue && config.terminalBackgroundText) {
+    const text = config.terminalBackgroundText
+    // Clean up the text for display: remove line breaks, trim whitespace
+    const cleanText = text.replace(/\s+/g, ' ').trim()
+    // Create a more user-friendly truncation
+    const truncatedText = cleanText.length > 25
+      ? cleanText.substring(0, 25) + '...'
+      : cleanText
+    dataSource[2] = {
+      value: textTerminalBgValue,
+      desc: `📝 "${truncatedText}"`
+    }
+  } else if (value === textTerminalBgValue) {
+    // Show helpful text when text background is selected but no text is configured
+    dataSource[2] = {
+      value: textTerminalBgValue,
+      desc: `📝 ${e('clickToConfigureText') || 'Click to configure text'}`
+    }
+  }
+
   if (isGlobal) {
     dataSource.push(
       {
@@ -51,10 +81,45 @@ export default function TerminalBackgroundConfig ({
       },
       {
         value: 'randomShape',
-        desc: e('randomShape')
+        desc: `🎨 ${e('randomShape')}`
       }
     )
   }
+
+  const handleTextBgClick = () => {
+    setShowTextModal(true)
+  }
+
+  const handleTextBgModalOk = (textConfig) => {
+    // Store text configuration in the config
+    onChangeValue(textConfig.text, 'terminalBackgroundText')
+    onChangeValue(textConfig.fontSize, 'terminalBackgroundTextSize')
+    onChangeValue(textConfig.color, 'terminalBackgroundTextColor')
+    onChangeValue(textConfig.fontFamily, 'terminalBackgroundTextFontFamily')
+    onChange(textTerminalBgValue)
+    setShowTextModal(false)
+  }
+
+  const handleTextBgModalCancel = () => {
+    setShowTextModal(false)
+  }
+
+  const handleAutocompleteSelect = (v) => {
+    if (v === textTerminalBgValue) {
+      handleTextBgClick()
+    } else {
+      onChange(v)
+    }
+  }
+
+  const handleAutocompleteChange = (v) => {
+    if (v === textTerminalBgValue) {
+      handleTextBgClick()
+    } else {
+      onChange(v)
+    }
+  }
+
   const numberOpts = { step: 0.05, min: 0, max: 1, cls: 'bg-img-setting' }
 
   function renderNumber (name, options, title = '', width = 136) {
@@ -88,7 +153,7 @@ export default function TerminalBackgroundConfig ({
   }
 
   const renderFilter = () => {
-    if (config[name] === noTerminalBgValue || config[name] === 'index') return
+    if (config[name] === noTerminalBgValue || config[name] === 'index' || config[name] === textTerminalBgValue) return
 
     return (
       <div>
@@ -137,6 +202,7 @@ export default function TerminalBackgroundConfig ({
       label: item.desc
     }
   }
+
   return (
     <div className='pd2b'>
       <div className='pd1b'>
@@ -145,7 +211,8 @@ export default function TerminalBackgroundConfig ({
         >
           <AutoComplete
             value={value}
-            onChange={onChange}
+            onChange={handleAutocompleteChange}
+            onSelect={handleAutocompleteSelect}
             placeholder={defaultValue}
             className='width-100'
             options={dataSource.map(renderBgOption)}
@@ -160,6 +227,16 @@ export default function TerminalBackgroundConfig ({
       {
         renderFilter()
       }
+
+      <TextBgModal
+        visible={showTextModal}
+        onOk={handleTextBgModalOk}
+        onCancel={handleTextBgModalCancel}
+        initialText={config.terminalBackgroundText || ''}
+        initialSize={config.terminalBackgroundTextSize || 48}
+        initialColor={config.terminalBackgroundTextColor || '#ffffff'}
+        initialFontFamily={config.terminalBackgroundTextFontFamily || 'monospace'}
+      />
     </div>
   )
 }

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

@@ -0,0 +1,131 @@
+import React, { useState } from 'react'
+import {
+  Modal,
+  Input,
+  InputNumber,
+  Space,
+  Typography,
+  Select
+} from 'antd'
+import { ColorPicker } from '../bookmark-form/color-picker.jsx'
+
+const { TextArea } = Input
+const { Title } = Typography
+const e = window.translate
+
+export default function TextBgModal ({
+  visible,
+  onOk,
+  onCancel,
+  initialText = '',
+  initialSize = 48,
+  initialColor = '#ffffff',
+  initialFontFamily = 'Maple Mono'
+}) {
+  const [text, setText] = useState(initialText)
+  const [fontSize, setFontSize] = useState(initialSize)
+  const [color, setColor] = useState(initialColor)
+  const [fontFamily, setFontFamily] = useState(initialFontFamily)
+
+  const { fonts = [] } = window.et || {}
+
+  const handleOk = () => {
+    onOk({
+      text,
+      fontSize,
+      color,
+      fontFamily
+    })
+  }
+
+  const handleCancel = () => {
+    onCancel()
+    // Reset to initial values
+    setText(initialText)
+    setFontSize(initialSize)
+    setColor(initialColor)
+    setFontFamily(initialFontFamily)
+  }
+
+  return (
+    <Modal
+      title={e('terminalBackgroundText')}
+      open={visible}
+      onOk={handleOk}
+      onCancel={handleCancel}
+      width={500}
+      destroyOnClose
+    >
+      <div className='pd1'>
+        <Space direction='vertical' size='large' style={{ width: '100%' }}>
+          <div>
+            <Title level={5}>{e('text')}</Title>
+            <TextArea
+              value={text}
+              onChange={(e) => setText(e.target.value)}
+              placeholder={e('enterTextForBackground')}
+              rows={4}
+              maxLength={500}
+            />
+          </div>
+
+          <div>
+            <Title level={5}>{e('fontSize')}</Title>
+            <InputNumber
+              value={fontSize}
+              onChange={setFontSize}
+              min={12}
+              max={200}
+              style={{ width: '100%' }}
+              placeholder={e('fontSize')}
+            />
+          </div>
+
+          <div>
+            <Title level={5}>{e('textColor')}</Title>
+            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+              <ColorPicker
+                value={color}
+                onChange={setColor}
+              />
+              <Input
+                value={color}
+                onChange={(e) => setColor(e.target.value)}
+                placeholder={e('colorValue')}
+                style={{ flex: 1 }}
+              />
+            </div>
+          </div>
+
+          <div>
+            <Title level={5}>{e('fontFamily')}</Title>
+            <Select
+              value={fontFamily}
+              onChange={setFontFamily}
+              style={{ width: '100%' }}
+              placeholder={e('selectFontFamily')}
+              showSearch
+            >
+              {
+                fonts.map(f => {
+                  return (
+                    <Select.Option value={f} key={f}>
+                      <span
+                        className='font-option'
+                        style={{
+                          fontFamily: f
+                        }}
+                      >
+                        {f}
+                      </span>
+                    </Select.Option>
+                  )
+                })
+              }
+            </Select>
+          </div>
+        </Space>
+      </div>
+    </Modal>
+  )
+}

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

@@ -526,9 +526,14 @@ export default class Sftp extends Component {
       if (updates.remotePath !== undefined) {
         updates.remoteKeyword = ''
       }
+
+      // For selectedFiles updates, call setState immediately for better responsiveness
+      if (updates.selectedFiles !== undefined) {
+        return this.setState(...args)
+      }
     }
 
-    // Call setState with the modified arguments
+    // For other updates, use runIdle to avoid blocking the UI
     runIdle(() => this.setState(...args))
   }
 
@@ -1156,12 +1161,12 @@ export default class Sftp extends Component {
             {
               type === typeMap.remote
                 ? (
-                  <div className='pd1t pd1b pd1x alignright'>
+                  <div className='sftp-panel-title pd1t pd1b pd1x alignright'>
                     {e('remote')}: {username}@{host}
                   </div>
                   )
                 : (
-                  <div className='pd1t pd1b pd1x'>
+                  <div className='sftp-panel-title pd1t pd1b pd1x'>
                     {e('local')}
                   </div>
                   )

package/client/components/terminal/terminal.jsx

@@ -151,7 +151,7 @@ class Term extends Component {
           this.attachAddon._sendData(PS1_SETUP_CMD)
           this.term.cwdId = cwdId
         } else {
-          log.warn('Term or attachAddon not ready for PS1_SETUP_CMD in componentDidUpdate')
+          console.warn('Term or attachAddon not ready for PS1_SETUP_CMD in componentDidUpdate')
         }
       } else {
         if (this.attachAddon) {
@@ -895,7 +895,7 @@ class Term extends Component {
       if (this.attachAddon) {
         this.attachAddon._sendData(PS1_SETUP_CMD)
       } else {
-        log.warn('attachAddon not ready for PS1_SETUP_CMD in getCwd fallback')
+        console.warn('attachAddon not ready for PS1_SETUP_CMD in getCwd fallback')
       }
     }
   }
@@ -1065,7 +1065,7 @@ class Term extends Component {
         const cmd = `cd "${startFolder}"\r`
         this.attachAddon._sendData(cmd)
       } else {
-        log.warn('attachAddon not ready for cd command in runInitScript')
+        console.warn('attachAddon not ready for cd command in runInitScript')
       }
     }
 
@@ -1074,7 +1074,7 @@ class Term extends Component {
         this.attachAddon._sendData(PS1_SETUP_CMD)
         this.term.cwdId = cwdId
       } else {
-        log.warn('Term or attachAddon not ready for PS1_SETUP_CMD in runInitScript')
+        console.warn('Term or attachAddon not ready for PS1_SETUP_CMD in runInitScript')
       }
     }
 

package/client/components/tree-list/category-color-picker.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ColorPicker } from '../bookmark-form/color-picker.jsx'
+
+export function CategoryColorPicker ({ value, onChange }) {
+  return (
+    <ColorPicker
+      value={value}
+      onChange={onChange}
+    />
+  )
+}