@electerm/electerm-react 2.3.136 → 2.3.166

package/client/components/tabs/layout-select.jsx

@@ -0,0 +1,60 @@
+/**
+ * Layout select content component
+ */
+
+import React from 'react'
+import {
+  SingleIcon,
+  TwoColumnsIcon,
+  ThreeColumnsIcon,
+  TwoRowsIcon,
+  ThreeRowsIcon,
+  Grid2x2Icon,
+  TwoRowsRightIcon,
+  TwoColumnsBottomIcon
+} from '../icons/split-icons'
+import { splitMapDesc } from '../../common/constants'
+
+const e = window.translate
+
+const iconMaps = {
+  single: SingleIcon,
+  twoColumns: TwoColumnsIcon,
+  threeColumns: ThreeColumnsIcon,
+  twoRows: TwoRowsIcon,
+  threeRows: ThreeRowsIcon,
+  grid2x2: Grid2x2Icon,
+  twoRowsRight: TwoRowsRightIcon,
+  twoColumnsBottom: TwoColumnsBottomIcon
+}
+
+export function getLayoutIcon (layout) {
+  return iconMaps[layout]
+}
+
+export default function LayoutSelect (props) {
+  const { layout } = props
+
+  function handleChangeLayout (key) {
+    window.store.setLayout(key)
+  }
+
+  return (
+    <div className='layout-menu-content'>
+      {Object.keys(splitMapDesc).map((t) => {
+        const v = splitMapDesc[t]
+        const Icon = getLayoutIcon(v)
+        const isActive = layout === t
+        return (
+          <div
+            key={t}
+            className={`layout-menu-item ${isActive ? 'active' : ''}`}
+            onClick={() => handleChangeLayout(t)}
+          >
+            <Icon /> {e(v)}
+          </div>
+        )
+      })}
+    </div>
+  )
+}

package/client/components/tabs/tabs.styl

@@ -244,3 +244,67 @@
   max-height 300px
   overflow-y auto
 
+// Layout and Workspace dropdown styles
+.layout-workspace-dropdown
+  background var(--main)
+  border-radius 4px
+  box-shadow 0 2px 8px rgba(0, 0, 0, 0.15)
+  min-width 200px
+  padding 8px
+  .ant-tabs-nav
+    margin-bottom 8px
+
+.layout-menu-content
+  max-height 300px
+  overflow-y auto
+
+.layout-menu-item
+  padding 6px 12px
+  cursor pointer
+  border-radius 4px
+  display flex
+  align-items center
+  gap 8px
+  color var(--text)
+  &:hover
+    background var(--main-dark)
+  &.active
+    background var(--primary)
+    color #fff
+
+.workspace-menu-content
+  max-height 300px
+  overflow-y auto
+
+.workspace-save-btn
+  margin-bottom 8px
+
+.workspace-list
+  display flex
+  flex-direction column
+  gap 4px
+
+.workspace-item
+  padding 6px 12px
+  cursor pointer
+  border-radius 4px
+  display flex
+  align-items center
+  justify-content space-between
+  color var(--text)
+  &:hover
+    background var(--main-dark)
+  .workspace-delete-icon
+    opacity 0
+    color var(--text-dark)
+    &:hover
+      color var(--error)
+  &:hover .workspace-delete-icon
+    opacity 1
+
+.workspace-name
+  flex 1
+  overflow hidden
+  text-overflow ellipsis
+  white-space nowrap
+

package/client/components/tabs/workspace-save-modal.jsx

@@ -0,0 +1,117 @@
+/**
+ * Workspace save modal component - standalone modal
+ */
+
+import React, { useState } from 'react'
+import { auto } from 'manate/react'
+import Modal from '../common/modal'
+import { Input, Select, Button, Space, message, Radio } from 'antd'
+import { SaveOutlined, EditOutlined } from '@ant-design/icons'
+
+const e = window.translate
+
+export default auto(function WorkspaceSaveModal ({ store }) {
+  const { workspaceSaveModalVisible, workspaces } = store
+  const [name, setName] = useState('')
+  const [selectedId, setSelectedId] = useState(null)
+  const [saveMode, setSaveMode] = useState('new') // 'new' or 'overwrite'
+
+  if (!workspaceSaveModalVisible) {
+    return null
+  }
+
+  function handleClose () {
+    window.store.workspaceSaveModalVisible = false
+  }
+
+  function handleSave () {
+    if (saveMode === 'new') {
+      if (!name.trim()) {
+        message.error(e('name needed'))
+        return
+      }
+      window.store.saveWorkspace(name.trim())
+      message.success(e('saved'))
+    } else {
+      if (!selectedId) {
+        message.error('please Select Workspace')
+        return
+      }
+      const ws = workspaces.find(w => w.id === selectedId)
+      window.store.saveWorkspace(ws?.name || name, selectedId)
+      message.success(e('saved'))
+    }
+    setName('')
+    setSelectedId(null)
+    setSaveMode('new')
+    handleClose()
+  }
+
+  function handleCancel () {
+    setName('')
+    setSelectedId(null)
+    setSaveMode('new')
+    handleClose()
+  }
+
+  const options = workspaces.map(w => ({
+    label: w.name,
+    value: w.id
+  }))
+
+  return (
+    <Modal
+      title={e('save')}
+      open={workspaceSaveModalVisible}
+      onCancel={handleCancel}
+      footer={null}
+      width={400}
+    >
+      <div className='pd1y'>
+        <Space direction='vertical' block>
+          <Radio.Group
+            value={saveMode}
+            onChange={ev => setSaveMode(ev.target.value)}
+          >
+            <Radio value='new'>
+              <SaveOutlined className='mg1r' />
+              {e('saveAsNew')}
+            </Radio>
+            <Radio value='overwrite' disabled={!workspaces.length}>
+              <EditOutlined className='mg1r' />
+              {e('overwrite')}
+            </Radio>
+          </Radio.Group>
+
+          {saveMode === 'new'
+            ? (
+              <Input
+                placeholder={e('name')}
+                value={name}
+                onChange={e => setName(e.target.value)}
+                onPressEnter={handleSave}
+              />
+              )
+            : (
+              <Select
+                placeholder={e('workspaces')}
+                value={selectedId}
+                onChange={setSelectedId}
+                options={options}
+                style={{ width: '100%' }}
+              />
+              )}
+
+          <div className='pd1t'>
+            <Button type='primary' onClick={handleSave}>
+              {e('save')}
+            </Button>
+            <Button className='mg1l' onClick={handleCancel}>
+              {e('cancel')}
+            </Button>
+          </div>
+        </Space>
+      </div>
+    </Modal>
+  )
+})

package/client/components/tabs/workspace-select.jsx

@@ -0,0 +1,79 @@
+/**
+ * Workspace select content component
+ */
+
+import React from 'react'
+import { Button, Empty, Popconfirm } from 'antd'
+import {
+  SaveOutlined,
+  DeleteOutlined
+} from '@ant-design/icons'
+import { auto } from 'manate/react'
+
+const e = window.translate
+
+export default auto(function WorkspaceSelect (props) {
+  const { store } = props
+  const { workspaces } = store
+
+  function handleLoadWorkspace (id) {
+    window.store.loadWorkspace(id)
+  }
+
+  function handleDeleteWorkspace (id, ev) {
+    ev.stopPropagation()
+    window.store.deleteWorkspace(id)
+  }
+
+  function handleSaveClick () {
+    window.store.workspaceSaveModalVisible = true
+  }
+
+  return (
+    <div className='workspace-menu-content'>
+      <div className='workspace-save-btn pd1b'>
+        <Button
+          type='primary'
+          icon={<SaveOutlined />}
+          size='small'
+          onClick={handleSaveClick}
+          block
+        >
+          {e('save')}
+        </Button>
+      </div>
+      {workspaces.length === 0
+        ? (
+          <Empty
+            image={Empty.PRESENTED_IMAGE_SIMPLE}
+            description='No items'
+          />
+          )
+        : (
+          <div className='workspace-list'>
+            {workspaces.map(ws => (
+              <div
+                key={ws.id}
+                className='workspace-item'
+                onClick={() => handleLoadWorkspace(ws.id)}
+              >
+                <span className='workspace-name'>{ws.name}</span>
+                <Popconfirm
+                  title={e('del') + '?'}
+                  onConfirm={(ev) => handleDeleteWorkspace(ws.id, ev)}
+                  onCancel={(ev) => ev.stopPropagation()}
+                  okText={e('ok')}
+                  cancelText={e('cancel')}
+                >
+                  <DeleteOutlined
+                    className='workspace-delete-icon'
+                    onClick={(ev) => ev.stopPropagation()}
+                  />
+                </Popconfirm>
+              </div>
+            ))}
+          </div>
+          )}
+    </div>
+  )
+})

package/client/components/terminal/attach-addon-custom.js

@@ -34,7 +34,13 @@ export default class AttachAddonCustom extends AttachAddon {
   }
 
   onMsg = (ev) => {
-    this.trzsz.processServerOutput(ev.data)
+    // When in alternate screen mode (like vim, less, or TUI apps like Claude Code),
+    // bypass trzsz processing to avoid interference with the application's display
+    if (this.term?.buffer?.active?.type === 'alternate') {
+      this.writeToTerminal(ev.data)
+    } else {
+      this.trzsz.processServerOutput(ev.data)
+    }
   }
 
   writeToTerminal = (data) => {

package/client/components/terminal/terminal-interactive.jsx

@@ -3,7 +3,8 @@
  */
 
 import { useEffect, useState } from 'react'
-import { Modal, Form, Button } from 'antd'
+import { Form, Button } from 'antd'
+import Modal from '../common/modal'
 import InputAutoFocus from '../common/input-auto-focus'
 import wait from '../../common/wait'
 

package/client/components/terminal/terminal.jsx

@@ -178,7 +178,6 @@ class Term extends Component {
       clearTimeout(this.timers[k])
       this.timers[k] = null
     })
-    this.timers = null
     this.onClose = true
     if (this.socket) {
       this.socket.close()

package/client/components/text-editor/text-editor.jsx

@@ -4,7 +4,8 @@
 
 import { PureComponent } from 'react'
 import TextEditorForm from './text-editor-form'
-import { Spin, Modal } from 'antd'
+import { Spin } from 'antd'
+import Modal from '../common/modal'
 import resolve from '../../common/resolve'
 import { refsStatic, refs } from '../common/ref'
 

package/client/components/tree-list/move-item-modal.jsx

@@ -1,17 +1,63 @@
-// render bookmark select, use antd tree select
+// render bookmark select, use antd tree
 import { useState, useEffect } from 'react'
 import {
-  MergeOutlined
+  MergeOutlined,
+  SearchOutlined
 } from '@ant-design/icons'
 import buildGroupData from '../bookmark-form/common/bookmark-group-tree-format'
-import { TreeSelect, Modal, Button } from 'antd'
+import { Tree, Button, Input } from 'antd'
+import Modal from '../common/modal'
 import { auto } from 'manate/react'
 const e = window.translate
 
 const rootId = '__root__'
 
+// Helper function to filter tree data based on search text
+function filterTreeData (data, searchText) {
+  if (!searchText) {
+    return data
+  }
+  const lowerSearch = searchText.toLowerCase()
+
+  function filterNodes (nodes) {
+    return nodes.reduce((acc, node) => {
+      const titleText = typeof node.title === 'string'
+        ? node.title
+        : (node.title?.props?.children?.[1] || node.title?.props?.children || '')
+      const titleStr = String(titleText).toLowerCase()
+      const children = node.children ? filterNodes(node.children) : []
+
+      if (titleStr.includes(lowerSearch) || children.length > 0) {
+        acc.push({
+          ...node,
+          children: children.length > 0 ? children : node.children
+        })
+      }
+      return acc
+    }, [])
+  }
+
+  return filterNodes(data)
+}
+
+// Helper function to get all keys from tree data
+function getAllKeys (data) {
+  const keys = []
+  function traverse (nodes) {
+    for (const node of nodes) {
+      keys.push(node.key)
+      if (node.children) {
+        traverse(node.children)
+      }
+    }
+  }
+  traverse(data)
+  return keys
+}
+
 export default auto(function MoveItemModal (props) {
   const [groupId, setGroupId] = useState(undefined)
+  const [searchText, setSearchText] = useState('')
   const {
     openMoveModal,
     moveItem,
@@ -27,10 +73,11 @@ export default auto(function MoveItemModal (props) {
     })
   }
 
-  // Reset groupId when modal opens
+  // Reset groupId and search when modal opens
   useEffect(() => {
     if (openMoveModal) {
       setGroupId(undefined)
+      setSearchText('')
     }
   }, [openMoveModal])
 
@@ -60,6 +107,31 @@ export default auto(function MoveItemModal (props) {
       disabled: false
     })
   }
+
+  // Filter tree data based on search
+  const filteredData = filterTreeData(data, searchText)
+  const expandedKeys = getAllKeys(filteredData)
+
+  function onTreeSelect (selectedKeys) {
+    if (selectedKeys.length > 0) {
+      // Find the node to check if it's disabled
+      const findNode = (nodes, key) => {
+        for (const node of nodes) {
+          if (node.key === key) return node
+          if (node.children) {
+            const found = findNode(node.children, key)
+            if (found) return found
+          }
+        }
+        return null
+      }
+      const node = findNode(data, selectedKeys[0])
+      if (node && !node.disabled) {
+        setGroupId(selectedKeys[0])
+      }
+    }
+  }
+
   function onSelect () {
     const {
       bookmarkGroups
@@ -109,43 +181,56 @@ export default auto(function MoveItemModal (props) {
     }
     onCancelMoveItem()
   }
+
+  const footer = (
+    <>
+      <Button
+        type='primary'
+        onClick={onSelect}
+        disabled={!groupId}
+      >
+        {e('ok')}
+      </Button>
+      <Button
+        onClick={onCancelMoveItem}
+        className='mg1l'
+      >
+        {e('cancel')}
+      </Button>
+    </>
+  )
+
   const modalProps = {
     open: openMoveModal,
     title: e('moveTo'),
-    footer: null,
+    footer,
     onCancel: onCancelMoveItem
   }
+
   const treeProps = {
-    treeData: data,
-    onChange: setGroupId,
-    placeholder: e('moveTo'),
-    showSearch: true,
-    value: groupId,
-    popupMatchSelectWidth: false,
-    treeDefaultExpandAll: true,
-    className: 'width-100'
+    treeData: filteredData,
+    onSelect: onTreeSelect,
+    selectedKeys: groupId ? [groupId] : [],
+    expandedKeys,
+    autoExpandParent: true,
+    className: 'width-100 move-item-tree'
   }
+
   return (
     <Modal {...modalProps}>
-      <div className='pd1'>
-        <TreeSelect
-          {...treeProps}
+      <div className='pd1b'>
+        <Input
+          placeholder={e('search')}
+          prefix={<SearchOutlined />}
+          value={searchText}
+          onChange={e => setSearchText(e.target.value)}
+          allowClear
         />
       </div>
-      <div className='pd1'>
-        <Button
-          type='primary'
-          onClick={onSelect}
-          disabled={!groupId}
-        >
-          {e('ok')}
-        </Button>
-        <Button
-          onClick={onCancelMoveItem}
-          className='mg1l'
-        >
-          {e('cancel')}
-        </Button>
+      <div className='move-item-tree-wrap'>
+        <Tree
+          {...treeProps}
+        />
       </div>
     </Modal>
   )

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

@@ -55,7 +55,7 @@ export default class ItemListTree extends Component {
       this.setState({
         ready: true
       })
-    }, 100)
+    }, 0)
   }
 
   componentWillUnmount () {

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

@@ -78,4 +78,9 @@
   margin-right 6px
   border-radius 2px
   border 1px solid #1a1a1a
-  vertical-align middle
+  vertical-align middle
+
+.move-item-tree-wrap
+  max-height 300px
+  overflow-y auto
+  padding 8px

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

@@ -10,9 +10,9 @@ import {
 import {
   Spin,
   message,
-  Modal,
   Tag
 } from 'antd'
+import Modal from '../common/modal'
 import * as ls from '../../common/safe-local-storage'
 import { copy } from '../../common/clipboard'
 import resolutions from '../rdp/resolutions'
@@ -250,7 +250,7 @@ export default class VncSession extends RdpSession {
       title: e('credentialsRequired'),
       content: this.renderForm(['password']),
       footer: null,
-      visible: true
+      open: true
     }
     return (
       <Modal

package/client/components/widgets/widget-control.jsx

@@ -3,9 +3,7 @@
  */
 import React, { useState } from 'react'
 import WidgetForm from './widget-form'
-import {
-  message
-} from 'antd'
+import { showMsg } from './widget-notification-with-details'
 
 export default function WidgetControl ({ formData }) {
   const [loading, setLoading] = useState(false)
@@ -30,9 +28,9 @@ export default function WidgetControl ({ formData }) {
       } = result
       if (!instanceId) {
         if (success === false) {
-          message.error('Failed to run widget', error || '')
+          showMsg('Failed to run widget', 'error', null, 10, error || '')
         } else {
-          message.success(msg || 'Widget run successfully')
+          showMsg(msg, 'success', null, 10)
         }
         return
       }
@@ -45,6 +43,7 @@ export default function WidgetControl ({ formData }) {
         config
       }
       window.store.widgetInstances.push(instance)
+      showMsg(msg, 'success', result.serverInfo, 10)
     } catch (err) {
       console.error('Failed to run widget:', err)
     } finally {

package/client/components/widgets/widget-form.jsx

@@ -2,7 +2,7 @@
  * Widget form component
  */
 import React from 'react'
-import { Form, Input, InputNumber, Switch, Select, Button, message } from 'antd'
+import { Form, Input, InputNumber, Switch, Select, Button } from 'antd'
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 
 export default function WidgetForm ({ widget, onSubmit, loading }) {
@@ -18,12 +18,7 @@ export default function WidgetForm ({ widget, onSubmit, loading }) {
   const txt = isInstanceWidget ? 'Start widget' : 'Run widget'
 
   const handleSubmit = async (values) => {
-    try {
-      await onSubmit(values)
-      message.success('Widget started successfully')
-    } catch (error) {
-      message.error('Failed to start widget: ' + error.message)
-    }
+    onSubmit(values)
   }
 
   const renderFormItem = (config) => {
@@ -86,7 +81,7 @@ export default function WidgetForm ({ widget, onSubmit, loading }) {
 
   return (
     <div className='widget-form'>
-      <div className='pd1b'>
+      <div className='pd1b alignright'>
         <h4>{info.name}</h4>
         <p>{info.description}</p>
       </div>