@electerm/electerm-react 2.3.151 → 2.3.166

package/client/components/sidebar/info-modal.jsx

@@ -8,10 +8,10 @@ import {
   InfoCircleOutlined,
   AlignLeftOutlined,
   BugOutlined,
-  HeartOutlined,
-  JavaScriptOutlined
+  HeartOutlined
 } from '@ant-design/icons'
-import { Modal, Tabs, Button } from 'antd'
+import { Tabs, Button } from 'antd'
+import Modal from '../common/modal'
 import Link from '../common/external-link'
 import LogoElem from '../common/logo-elem'
 import RunningTime from './app-running-time'
@@ -55,8 +55,48 @@ export default auto(function InfoModal (props) {
     )
   }
 
-  const formatJSON = (jsonStr) => {
-    return JSON.stringify(JSON.parse(jsonStr), null, 2)
+  const renderParsed = (obj, depth = 0) => {
+    if (Array.isArray(obj)) {
+      return (
+        <ul className='pd2l'>
+          {obj.map((item, i) => (
+            <li key={i}>{renderParsed(item, depth + 1)}</li>
+          ))}
+        </ul>
+      )
+    } else if (typeof obj === 'object' && obj !== null) {
+      return (
+        <div className={depth > 0 ? 'pd2l' : ''}>
+          {Object.entries(obj).map(([k, v]) => (
+            <div key={k} className='pd1b'>
+              <b>{k}:</b> {renderParsed(v, depth + 1)}
+            </div>
+          ))}
+        </div>
+      )
+    } else {
+      return <span>{String(obj)}</span>
+    }
+  }
+
+  const renderValue = (v) => {
+    try {
+      const parsed = JSON.parse(v)
+      return renderParsed(parsed)
+    } catch {
+      return <span>{v}</span>
+    }
+  }
+
+  const renderOSInfo = () => {
+    return window.pre.osInfo().map(({ k, v }, i) => (
+      <div className='pd1b' key={i + '_os_' + k}>
+        <b className='bold'>{k}:</b>
+        <span className='mg1l'>
+          {renderValue(v)}
+        </span>
+      </div>
+    ))
   }
 
   const { infoModalTab, commandLineHelp } = props
@@ -100,7 +140,7 @@ export default auto(function InfoModal (props) {
     ...env
   }
   const title = (
-    <div className='ant-modal-confirm-title font16'>
+    <div className='custom-modal-close-confirm-title font16'>
       <InfoCircleOutlined className='font20 mg1r' /> {e('about')} {name}
     </div>
   )
@@ -108,9 +148,7 @@ export default auto(function InfoModal (props) {
     title,
     width: window.innerWidth - 100,
     maskClosable: true,
-    okText: e('ok'),
     onCancel: onCloseAbout,
-    footer: null,
     open: true,
     wrapClassName: 'info-modal'
   }
@@ -123,18 +161,18 @@ export default auto(function InfoModal (props) {
           <LogoElem />
           <p className='mg2b'>{e('desc')}</p>
           <RunningTime />
-          <p className='mg1b'>
-            <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
-            <Link to={authorUrl} className='mg1l'>
-              {authorName} ({email})
-            </Link>
-          </p>
           <p className='mg1b'>
             <HomeOutlined /> <b>{e('homepage')}/{e('download')} ➾</b>
             <Link to={homepage} className='mg1l'>
               {homepage}
             </Link>
           </p>
+          <p className='mg1b'>
+            <UserOutlined /> <b className='mg1r'>{e('author')} ➾</b>
+            <Link to={authorUrl} className='mg1l'>
+              {authorName} ({email})
+            </Link>
+          </p>
           <p className='mg1b'>
             <GithubOutlined /> <b className='mg1r'>github ➾</b>
             <Link to={link} className='mg1l'>
@@ -180,12 +218,6 @@ export default auto(function InfoModal (props) {
           <p className='mg1b'>
             <InfoCircleOutlined /> <b className='mg1r'>{window.store.installSrc}</b>
           </p>
-          <p className='mg1b'>
-            <JavaScriptOutlined /> <b className='mg1r'>Powered by</b>
-            <Link to='https://github.com/tylerlong/manate'>
-              manate
-            </Link>
-          </p>
           {renderCheckUpdate()}
         </>
       )
@@ -223,20 +255,7 @@ export default auto(function InfoModal (props) {
     {
       key: infoTabs.os,
       label: e('os'),
-      children: window.pre.osInfo().map(({ k, v }, i) => {
-        return (
-          <div className='pd1b' key={i + '_os_' + k}>
-            <b className='bold'>{k}</b>:
-            <span className='mg1l'>
-              {
-                v.length > 30
-                  ? <pre>{formatJSON(v)}</pre>
-                  : v
-              }
-            </span>
-          </div>
-        )
-      })
+      children: <div>{renderOSInfo()}</div>
     }
   ]
 

package/client/components/sidebar/info.styl

@@ -5,10 +5,3 @@
   border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
   transition all 1s ease-in-out
   z-index 5
-
-.info-modal
-  .ant-modal-header
-    border none
-  .ant-modal-body
-    padding 52px
-    padding-top 0

package/client/components/tabs/index.jsx

@@ -12,26 +12,16 @@ import {
   LeftOutlined,
   RightOutlined
 } from '@ant-design/icons'
-import {
-  SingleIcon,
-  TwoColumnsIcon,
-  ThreeColumnsIcon,
-  TwoRowsIcon,
-  ThreeRowsIcon,
-  Grid2x2Icon,
-  TwoRowsRightIcon,
-  TwoColumnsBottomIcon
-} from '../icons/split-icons'
 import { Dropdown } from 'antd'
 import Tab from './tab'
+import LayoutMenu from './layout-menu'
 import './tabs.styl'
 import {
   tabWidth,
   tabMargin,
   extraTabWidth,
   windowControlWidth,
-  isMacJs,
-  splitMapDesc
+  isMacJs
 } from '../../common/constants'
 import WindowControl from './window-control'
 import AddBtn from './add-btn'
@@ -39,8 +29,6 @@ import AppDrag from './app-drag'
 import NoSession from './no-session'
 import classNames from 'classnames'
 
-const e = window.translate
-
 export default class Tabs extends Component {
   constructor (props) {
     super(props)
@@ -183,10 +171,6 @@ export default class Tabs extends Component {
     window.store['activeTabId' + this.props.batch] = id
   }
 
-  handleChangeLayout = ({ key }) => {
-    window.store.setLayout(key)
-  }
-
   renderAddBtn = () => {
     const cls = classNames(
       'pointer tabs-add-btn font16',
@@ -324,48 +308,12 @@ export default class Tabs extends Component {
     )
   }
 
-  getLayoutIcon = (layout) => {
-    const iconMaps = {
-      single: SingleIcon,
-      twoColumns: TwoColumnsIcon,
-      threeColumns: ThreeColumnsIcon,
-      twoRows: TwoRowsIcon,
-      threeRows: ThreeRowsIcon,
-      grid2x2: Grid2x2Icon,
-      twoRowsRight: TwoRowsRightIcon,
-      twoColumnsBottom: TwoColumnsBottomIcon
-    }
-    return iconMaps[layout]
-  }
-
   renderLayoutMenu = () => {
-    if (!this.shouldRenderWindowControl()) {
-      return null
-    }
-    const items = Object.keys(splitMapDesc).map((t) => {
-      const v = splitMapDesc[t]
-      const Icon = this.getLayoutIcon(v)
-      return {
-        key: t,
-        label: (
-          <span>
-            <Icon /> {e(v)}
-          </span>
-        ),
-        onClick: () => this.handleChangeLayout({ key: t })
-      }
-    })
-    const v = splitMapDesc[this.props.layout]
-    const Icon = this.getLayoutIcon(v)
     return (
-      <Dropdown
-        menu={{ items }}
-        placement='bottomRight'
-      >
-        <span className='tabs-dd-icon layout-dd-icon mg1l'>
-          <Icon /> <DownOutlined />
-        </span>
-      </Dropdown>
+      <LayoutMenu
+        layout={this.props.layout}
+        visible={this.shouldRenderWindowControl()}
+      />
     )
   }
 

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

@@ -0,0 +1,75 @@
+/**
+ * Layout and Workspace menu dropdown component
+ */
+
+import React, { useState } from 'react'
+import { Dropdown, Tabs } from 'antd'
+import {
+  DownOutlined,
+  AppstoreOutlined,
+  LayoutOutlined
+} from '@ant-design/icons'
+import { splitMapDesc } from '../../common/constants'
+import LayoutSelect, { getLayoutIcon } from './layout-select'
+import WorkspaceSelect from './workspace-select'
+import HelpIcon from '../common/help-icon'
+
+const e = window.translate
+
+export default function LayoutMenu (props) {
+  const { layout, visible } = props
+  const [activeTab, setActiveTab] = useState('layout')
+
+  if (!visible) {
+    return null
+  }
+
+  const tabItems = [
+    {
+      key: 'layout',
+      label: (
+        <span>
+          <LayoutOutlined /> {e('layout')}
+        </span>
+      )
+    },
+    {
+      key: 'workspaces',
+      label: (
+        <span>
+          <AppstoreOutlined /> {e('workspaces')}
+          <HelpIcon link='https://github.com/electerm/electerm/wiki/Workspace-Feature' />
+        </span>
+      )
+    }
+  ]
+
+  const v = splitMapDesc[layout]
+  const Icon = getLayoutIcon(v)
+
+  const dropdownContent = (
+    <div className='layout-workspace-dropdown'>
+      <Tabs
+        items={tabItems}
+        size='small'
+        activeKey={activeTab}
+        onChange={setActiveTab}
+      />
+      {activeTab === 'layout'
+        ? <LayoutSelect layout={layout} />
+        : <WorkspaceSelect store={window.store} />}
+    </div>
+  )
+
+  return (
+    <Dropdown
+      popupRender={() => dropdownContent}
+      placement='bottomRight'
+      trigger={['click']}
+    >
+      <span className='tabs-dd-icon layout-dd-icon mg1l'>
+        <Icon /> <DownOutlined />
+      </span>
+    </Dropdown>
+  )
+}

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'