@electerm/electerm-react 2.13.0 → 2.15.8

package/client/components/bg/custom-css.jsx

@@ -2,16 +2,14 @@
  * ui theme
  */
 
-import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import eq from 'fast-deep-equal'
 
 const themeDomId = 'custom-css'
 
 export default function CustomCss (props) {
   const { customCss } = props
-
-  const delta = useDelta(customCss)
+  const prevRef = useRef(null)
 
   async function applyTheme () {
     const style = document.getElementById(themeDomId)
@@ -21,8 +19,13 @@ export default function CustomCss (props) {
   useEffect(() => {
     applyTheme()
   }, [])
-  useConditionalEffect(() => {
-    applyTheme()
-  }, delta && !eq(delta.prev, delta.curr))
+
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, customCss)) {
+      applyTheme()
+    }
+    prevRef.current = customCss
+  }, [customCss])
+
   return null
 }

package/client/components/common/notification.jsx

@@ -59,7 +59,7 @@ export function NotificationContainer () {
       {nots.map(notif => (
         <NotificationItem
           key={notif.key}
-          message={notif.message}
+          message={notif.message || notif.type}
           description={notif.description}
           type={notif.type}
           duration={notif.duration}

package/client/components/common/opacity.jsx

@@ -1,5 +1,4 @@
-import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import eq from 'fast-deep-equal'
 
 const opacityDomId = 'opacity-style'
@@ -14,7 +13,7 @@ const opacityDomId = 'opacity-style'
 export default function Opacity ({ opacity }) {
   // Default to 1 if opacity is not provided
   const currentOpacity = opacity !== undefined ? opacity : 1
-  const delta = useDelta(currentOpacity)
+  const prevRef = useRef(null)
 
   function applyOpacity () {
     let styleElement = document.getElementById(opacityDomId)
@@ -58,9 +57,12 @@ export default function Opacity ({ opacity }) {
     }
   }, [])
 
-  useConditionalEffect(() => {
-    applyOpacity()
-  }, delta && !eq(delta.prev, delta.curr))
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, currentOpacity)) {
+      applyOpacity()
+    }
+    prevRef.current = currentOpacity
+  }, [currentOpacity])
 
   return null
 }

package/client/components/main/ui-theme.jsx

@@ -2,8 +2,7 @@
  * ui theme
  */
 
-import { useEffect } from 'react'
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import eq from 'fast-deep-equal'
 import isColorDark from '../../common/is-color-dark'
 
@@ -53,7 +52,7 @@ function buildTheme (themeConfig) {
 export default function UiTheme (props) {
   const { themeConfig } = props
 
-  const delta = useDelta(themeConfig)
+  const prevRef = useRef(null)
 
   async function applyTheme () {
     const style = document.getElementById(themeDomId)
@@ -64,8 +63,13 @@ export default function UiTheme (props) {
   useEffect(() => {
     applyTheme()
   }, [])
-  useConditionalEffect(() => {
-    applyTheme()
-  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, themeConfig)) {
+      applyTheme()
+    }
+    prevRef.current = themeConfig
+  }, [themeConfig])
+
   return null
 }

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

@@ -28,7 +28,7 @@ export default class ProfileList extends List {
     const { activeItemId } = this.props
     const { name, id } = item
     const cls = classnames(
-      'item-list-unit theme-item',
+      'item-list-unit',
       {
         active: activeItemId === id
       }

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

@@ -63,7 +63,7 @@ export default class QuickCommandsList extends List {
     const { activeItemId } = this.props
     const { name, id } = item
     const cls = classnames(
-      'item-list-unit theme-item',
+      'item-list-unit',
       {
         active: activeItemId === id
       }

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

@@ -601,35 +601,44 @@ export default class RdpSession extends PureComponent {
 
   render () {
     const { width: w, height: h } = this.props
-    const rdpProps = {
-      style: {
-        width: w + 'px',
-        height: h + 'px'
-      }
-    }
     const { width, height, loading, scaleViewport } = this.state
+    const innerWidth = w - 10
+    const innerHeight = h - 80
+    const wrapperStyle = {
+      width: innerWidth + 'px',
+      height: innerHeight + 'px',
+      overflow: scaleViewport ? 'hidden' : 'auto'
+    }
     const canvasProps = {
       width,
       height,
       tabIndex: 0
     }
-    if (scaleViewport) {
-      canvasProps.className = 'scale-viewport'
-    }
     const cls = `rdp-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
+    const sessProps = {
+      className: cls,
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
     const controlProps = this.getControlProps()
     return (
       <Spin spinning={loading}>
         <div
-          {...rdpProps}
-          className={cls}
+          {...sessProps}
         >
           {this.renderControl()}
-          <canvas
-            {...canvasProps}
-            ref={this.canvasRef}
-          />
           <RemoteFloatControl {...controlProps} />
+          <div
+            style={wrapperStyle}
+            className='rdp-scroll-wrapper s-scroll-wrapper'
+          >
+            <canvas
+              {...canvasProps}
+              ref={this.canvasRef}
+            />
+          </div>
         </div>
       </Spin>
     )

package/client/components/rdp/rdp.styl

@@ -9,7 +9,27 @@
     left: 0
     width: 100%
   &.scale-viewport
-    canvas
+    .rdp-scroll-wrapper canvas
       width: 100% !important
+      height: 100% !important
       object-fit: contain
 
+.s-scroll-wrapper
+  &::-webkit-scrollbar
+    width 16px
+    height 16px
+    background var(--main-darker)
+  &::-webkit-scrollbar-track
+    background var(--main-darker)
+    box-shadow inset 0 0 5px var(--main-darker)
+  &::-webkit-scrollbar-thumb
+    background var(--primary)
+    border-radius 0
+  &::-webkit-scrollbar-corner
+    background var(--main-darker)
+.rdp-scroll-wrapper
+  position relative
+  background var(--main)
+  z-index 299
+
+

package/client/components/setting-panel/list.styl

@@ -36,6 +36,13 @@
     .list-item-remove
     .list-item-bookmark
       display block
+.theme-item:hover
+    .list-item-remove
+      right 24px
+.setting-tabs-setting
+  .item-list-unit
+    .list-item-remove
+      display none
 // .item-list
 //   .list-item-edit
 //   .list-item-apply

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

@@ -5,7 +5,7 @@
 /**
  * bookmark form
  */
-import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import { useEffect, useRef } from 'react'
 import { ArrowDownOutlined, ArrowUpOutlined, SaveOutlined, ClearOutlined } from '@ant-design/icons'
 import { Button, Input, Form, Alert } from 'antd'
 import { notification } from '../common/notification'
@@ -27,10 +27,15 @@ function trim (str) {
 
 export default function SyncForm (props) {
   const [form] = Form.useForm()
-  const delta = useDelta(props.formData)
-  useConditionalEffect(() => {
-    form.resetFields()
-  }, delta && delta.prev && !eq(delta.prev, delta.curr))
+  const prevRef = useRef(null)
+
+  useEffect(() => {
+    if (prevRef.current && !eq(prevRef.current, props.formData)) {
+      form.resetFields()
+    }
+    prevRef.current = props.formData
+  }, [props.formData])
+
   const { syncType } = props
   function disabled () {
     if (syncType === syncTypes.cloud) {

package/client/components/sftp/file-item.jsx

@@ -770,6 +770,7 @@ export default class FileSection extends React.Component {
       typeTo,
       fromPath: resolve(path, name),
       toPath,
+      fromFile: file,
       id: generate(),
       ...createTransferProps(this.props),
       operation

package/client/components/sftp/file-read.js

@@ -22,6 +22,61 @@ export const getFileExt = fileName => {
   }
 }
 
+const modeDirectoryMask = 0o170000
+const modeDirectoryValue = 0o040000
+
+const toIsDirectory = (stat) => {
+  if (!stat) {
+    return false
+  }
+
+  if (typeof stat.isDirectory === 'function') {
+    return stat.isDirectory()
+  }
+
+  if (typeof stat.isDirectory === 'boolean') {
+    return stat.isDirectory
+  }
+
+  if (typeof stat.type === 'string') {
+    return stat.type === 'd'
+  }
+
+  if (typeof stat.type === 'number') {
+    return stat.type === 2
+  }
+
+  if (typeof stat.mode === 'number') {
+    return (stat.mode & modeDirectoryMask) === modeDirectoryValue
+  }
+
+  return false
+}
+
+const toIsSymbolicLink = (stat) => {
+  if (!stat) {
+    return false
+  }
+
+  if (typeof stat.isSymbolicLink === 'function') {
+    return stat.isSymbolicLink()
+  }
+
+  if (typeof stat.isSymbolicLink === 'boolean') {
+    return stat.isSymbolicLink
+  }
+
+  if (typeof stat.type === 'string') {
+    return stat.type === 'l'
+  }
+
+  if (typeof stat.type === 'number') {
+    return stat.type === 3
+  }
+
+  return false
+}
+
 export const getFolderFromFilePath = (filePath, isRemote) => {
   const sep = isRemote ? '/' : window.pre.sep
   const arr = filePath.split(sep)
@@ -54,8 +109,8 @@ export const getLocalFileInfo = async (filePath) => {
     type: 'local',
     ...getFolderFromFilePath(filePath, false),
     id: generate(),
-    isDirectory: statr.isDirectory,
-    isSymbolicLink: stat.isSymbolicLink
+    isDirectory: toIsDirectory(statr),
+    isSymbolicLink: toIsSymbolicLink(stat)
   }
 }
 
@@ -71,6 +126,6 @@ export const getRemoteFileInfo = async (sftp, filePath) => {
     type: 'remote',
     ...getFolderFromFilePath(filePath, true),
     id: generate(),
-    isDirectory: stat.isDirectory
+    isDirectory: toIsDirectory(stat)
   }
 }

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

@@ -269,20 +269,23 @@ export default class SpiceSession extends PureComponent {
     }
     const cls = `spice-session-wrap session-v-wrap${scaleViewport ? ' scale-viewport' : ''}`
     const contrlProps = this.getControlProps()
+    const sessProps = {
+      className: cls,
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
     return (
       <Spin spinning={loading}>
         <div
-          className={cls}
-          style={{
-            width: w + 'px',
-            height: h + 'px'
-          }}
+          {...sessProps}
         >
           {this.renderControl()}
           <RemoteFloatControl {...contrlProps} />
           <div
             style={wrapperStyle}
-            className='spice-scroll-wrapper'
+            className='spice-scroll-wrapper s-scroll-wrapper'
           >
             <div
               ref={this.domRef}

package/client/components/spice/spice.styl

@@ -1,11 +1,29 @@
-.spice-session-wrap.scale-viewport
-  canvas
-    width: 100% !important
-    object-fit: contain
-  .spice-scroll-wrapper
-    display block
-.spice-scroll-wrapper
+.spice-session-wrap
   display: flex
   flex-direction: column
-  justify-content: center
-  align-items: center
+  align-items: center
+  .session-v-info
+    position: relative
+    width: 100%
+    z-index: 300
+  &.scale-viewport
+    .spice-scroll-wrapper
+      display flex
+      align-items center
+      justify-content center
+      > div
+        width 100% !important
+        height 100% !important
+        display flex
+        align-items center
+        justify-content center
+      canvas
+        width 100% !important
+        height 100% !important
+        max-width 100% !important
+        max-height 100% !important
+        object-fit contain
+.spice-scroll-wrapper
+  position relative
+  background var(--main)
+  z-index 299

package/client/components/ssh-config/load-ssh-configs-item.jsx

@@ -0,0 +1,99 @@
+import { useState } from 'react'
+import {
+  Input
+} from 'antd'
+import {
+  EditOutlined,
+  DeleteOutlined,
+  CheckOutlined,
+  CloseOutlined
+} from '@ant-design/icons'
+
+const { TextArea } = Input
+
+export default function LoadSshConfigsItem (props) {
+  const { item, index, onDelete, onUpdate } = props
+  const [isEditing, setIsEditing] = useState(false)
+  const [editValue, setEditValue] = useState(JSON.stringify(item, null, 2))
+
+  const handleToggleEdit = function () {
+    if (isEditing) {
+      try {
+        const parsed = JSON.parse(editValue)
+        onUpdate(index, parsed)
+      } catch (err) {
+        console.error('Invalid JSON:', err)
+        setEditValue(JSON.stringify(item, null, 2))
+      }
+    } else {
+      setEditValue(JSON.stringify(item, null, 2))
+    }
+    setIsEditing(!isEditing)
+  }
+
+  const handleDelete = function () {
+    onDelete(index)
+  }
+
+  const handleCancelEdit = function () {
+    setEditValue(JSON.stringify(item, null, 2))
+    setIsEditing(false)
+  }
+
+  function renderActions () {
+    if (isEditing) {
+      return [
+        <CheckOutlined
+          className='mg1r pointer icon-success'
+          onClick={handleToggleEdit}
+          key='confirm-ssh-config-item'
+        />,
+        <CloseOutlined
+          className='mg1r pointer icon-warning'
+          onClick={handleCancelEdit}
+          key='cancel-ssh-config-item'
+        />
+      ]
+    }
+    return [
+      <EditOutlined
+        className='mg1r pointer ssh-config-item-edit-icon'
+        onClick={handleToggleEdit}
+        key='edit-ssh-config-item'
+      />,
+      <DeleteOutlined
+        className='pointer icon-danger ssh-config-item-delete-icon'
+        onClick={handleDelete}
+        key='del-ssh-config-item'
+      />
+    ]
+  }
+
+  function renderContent () {
+    if (isEditing) {
+      return (
+        <TextArea
+          value={editValue}
+          onChange={(e) => setEditValue(e.target.value)}
+          rows={10}
+          className='mg1t'
+        />
+      )
+    }
+    return (
+      <pre className='ssh-config-item-content'>
+        {JSON.stringify(item, null, 2)}
+      </pre>
+    )
+  }
+
+  return (
+    <div className='ssh-config-item pd1'>
+      <div className='pd1b ssh-config-item-header'>
+        <b className='mg1r'>[{index + 1}]</b>
+        {renderActions()}
+      </div>
+      {renderContent()}
+    </div>
+  )
+}

package/client/components/ssh-config/load-ssh-configs.jsx

@@ -5,18 +5,20 @@ import {
   Empty
 } from 'antd'
 import { useState, useEffect } from 'react'
-import SshConfigItem from './ssh-config-item'
 import * as ls from '../../common/safe-local-storage'
 import {
   sshConfigLoadKey
 } from '../../common/constants'
 import { ReloadOutlined } from '@ant-design/icons'
+import LoadSshConfigsItem from './load-ssh-configs-item'
+import './ssh-config.styl'
 
 const e = window.translate
 
 export default function LoadSshConfigs (props) {
   const [loading, setLoading] = useState(false)
   const { sshConfigs } = props
+  const [localConfigs, setLocalConfigs] = useState([])
 
   const {
     store
@@ -24,6 +26,11 @@ export default function LoadSshConfigs (props) {
   const {
     showSshConfigModal
   } = props
+
+  useEffect(() => {
+    setLocalConfigs(sshConfigs)
+  }, [sshConfigs])
+
   const handleCancel = function () {
     store.showSshConfigModal = false
   }
@@ -35,21 +42,43 @@ export default function LoadSshConfigs (props) {
 
   const handleLoadSshConfig = function () {
     store.showSshConfigModal = false
-    store.addSshConfigs(sshConfigs)
+    store.addSshConfigs(localConfigs)
     ls.setItem(sshConfigLoadKey, 'yes')
   }
 
+  const handleDeleteItem = function (index) {
+    const newConfigs = [...localConfigs]
+    newConfigs.splice(index, 1)
+    setLocalConfigs(newConfigs)
+  }
+
+  const handleUpdateItem = function (index, newItem) {
+    const newConfigs = [...localConfigs]
+    newConfigs[index] = newItem
+    setLocalConfigs(newConfigs)
+  }
+
   const renderList = function () {
-    if (!sshConfigs.length) {
+    if (!localConfigs.length) {
       return (
         <Empty />
       )
     }
-    return sshConfigs.map((d, i) => {
-      return (
-        <SshConfigItem item={d} key={d.title} />
-      )
-    })
+    return (
+      <div className='pd1b ssh-config-list'>
+        {
+          localConfigs.map((item, index) => (
+            <LoadSshConfigsItem
+              key={index}
+              item={item}
+              index={index}
+              onDelete={handleDeleteItem}
+              onUpdate={handleUpdateItem}
+            />
+          ))
+        }
+      </div>
+    )
   }
 
   useEffect(() => {
@@ -89,7 +118,7 @@ export default function LoadSshConfigs (props) {
             type='primary'
             className='mg1r mg1b'
             onClick={handleLoadSshConfig}
-            disabled={!sshConfigs.length || loading}
+            disabled={!localConfigs.length || loading}
           >
             {e('import')}
           </Button>

package/client/components/ssh-config/ssh-config.styl

@@ -0,0 +1,3 @@
+.ssh-config-list
+  max-height 60vh
+  overflow auto

package/client/components/terminal/transfer-client-base.js

@@ -107,6 +107,34 @@ export class TransferClientBase {
     this.writeToTerminal(`\x1b[32m\x1b[1m${this.getProtocolDisplayName()}::${type}::START\x1b[0m\r\n`)
   }
 
+  /**
+   * Write progress bar to terminal
+   * @param {Object} options - Progress options
+   * @param {string} options.name - File name
+   * @param {number} options.size - Total size in bytes
+   * @param {number} options.transferred - Transferred bytes
+   * @param {number} options.speed - Transfer speed in bytes/s
+   * @param {boolean} options.isComplete - Whether transfer is complete
+   * @param {Function} options.formatSize - Function to format size
+   * @returns {string} The progress string written to terminal
+   */
+  writeProgressBar ({ name, size, transferred, speed, isComplete = false, formatSize = (b) => b }) {
+    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
+    const barWidth = 30
+    const filledWidth = Math.floor(percent / 100 * barWidth)
+    const emptyWidth = barWidth - filledWidth
+
+    const bar = '\x1b[32m' + '\u2588'.repeat(filledWidth) + '\x1b[90m' + '\u2591'.repeat(emptyWidth) + '\x1b[0m'
+
+    const sizeStr = `${formatSize(transferred)}/${formatSize(size)}`
+    const speedStr = speed > 0 ? `, ${formatSize(speed)}/s` : ''
+    const doneStr = isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''
+
+    const str = `\r\x1b[2K\x1b[32m${name}\x1b[0m: ${percent}% ${bar} ${sizeStr}${speedStr}${doneStr}`
+    this.writeToTerminal(str + '\r')
+    return str
+  }
+
   /**
    * Get protocol display name
    * Should be overridden by subclass

package/client/components/terminal/trzsz-client.js

@@ -230,20 +230,18 @@ export class TrzszClient extends TransferClientBase {
     if (!this.currentTransfer || !this.terminal?.term) return
 
     const { name, size, transferred, path, serverSpeed } = this.currentTransfer
-    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
-
-    // Use server's speed if available, otherwise calculate locally
     const speed = serverSpeed || 0
-
-    // Use full path if available, otherwise just name
     const displayName = path || name
-
-    // filesize expects bytes and formats to human readable
     const formatSize = (bytes) => filesize(bytes)
 
-    // Clear line and write progress
-    const str = `\r\x1b[2K\x1b[32m${displayName}\x1b[0m: ${percent}%, ${formatSize(transferred)}/${formatSize(size)}, ${formatSize(speed)}/s${isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''}`
-    this.writeToTerminal(str + '\r')
+    this.writeProgressBar({
+      name: displayName,
+      size,
+      transferred,
+      speed,
+      isComplete,
+      formatSize
+    })
   }
 
   /**

package/client/components/terminal/zmodem-client.js

@@ -212,20 +212,18 @@ export class ZmodemClient extends TransferClientBase {
     if (!this.currentTransfer || !this.terminal?.term) return
 
     const { name, size, transferred, path, serverSpeed } = this.currentTransfer
-    const percent = size > 0 ? Math.floor(transferred * 100 / size) : 100
-
-    // Use server's speed if available, otherwise calculate locally
     const speed = serverSpeed || 0
-
-    // Use full path if available, otherwise just name
     const displayName = path || name
-
-    // filesize expects bytes and formats to human readable
     const formatSize = (bytes) => filesize(bytes)
 
-    // Clear line and write progress
-    const str = `\r\x1b[2K\x1b[32m${displayName}\x1b[0m: ${percent}%, ${formatSize(transferred)}/${formatSize(size)}, ${formatSize(speed)}/s${isComplete ? ' \x1b[32m\x1b[1m[DONE]\x1b[0m' : ''}`
-    this.writeToTerminal(str + '\r')
+    this.writeProgressBar({
+      name: displayName,
+      size,
+      transferred,
+      speed,
+      isComplete,
+      formatSize
+    })
   }
 }
 

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

@@ -18,6 +18,11 @@ export default function SimpleEditor (props) {
 
   // When currentMatch changes, highlight the match in textarea
   useEffect(() => {
+    // Only process navigation when explicitly triggered (not when text changes)
+    if (!isNavigating) {
+      return
+    }
+
     if (currentMatch >= 0 && occurrences.length > 0) {
       const match = occurrences[currentMatch]
       if (editorRef.current) {
@@ -26,10 +31,8 @@ export default function SimpleEditor (props) {
         // Set selection range to select the matched text
         textarea.setSelectionRange(match.start, match.end)
 
-        // Only focus the textarea when explicitly navigating between matches
-        if (isNavigating) {
-          textarea.focus()
-        }
+        // Focus the textarea when explicitly navigating between matches
+        textarea.focus()
 
         // Scroll to the selection position
         // Use setTimeout to ensure the selection is rendered before scrolling
@@ -53,10 +56,17 @@ export default function SimpleEditor (props) {
     setIsNavigating(false)
   }, [currentMatch, occurrences])
 
-  // Auto-search when keyword changes
+  // Auto-search when keyword changes (but not when text is being edited)
   useEffect(() => {
+    // Set navigating to true so first match is highlighted when searching
+    setIsNavigating(true)
     findMatches()
-  }, [searchKeyword, props.value])
+  }, [searchKeyword])
+
+  // Update matches when text changes, but don't change currentMatch position
+  useEffect(() => {
+    updateMatchesOnly()
+  }, [props.value])
 
   // Copy the editor content to clipboard
   const copyEditorContent = () => {
@@ -87,6 +97,28 @@ export default function SimpleEditor (props) {
     setCurrentMatch(matches.length ? 0 : -1)
   }
 
+  // Update matches only (without changing currentMatch position)
+  const updateMatchesOnly = () => {
+    if (!searchKeyword) {
+      setOccurrences([])
+      return
+    }
+
+    const matches = []
+    const text = props.value || ''
+    const escapedKeyword = escapeRegExp(searchKeyword)
+    const regex = new RegExp(escapedKeyword, 'gi')
+    let match
+
+    while ((match = regex.exec(text)) !== null) {
+      matches.push({
+        start: match.index,
+        end: match.index + searchKeyword.length
+      })
+    }
+    setOccurrences(matches)
+  }
+
   // Handle search action when user presses enter or clicks the search button
   const handleSearch = (e) => {
     if (e && e.stopPropagation) {

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

@@ -23,7 +23,6 @@ export default function BookmarkToolbar (props) {
   const {
     onNewBookmark,
     onNewBookmarkGroup,
-    onImport,
     onExport,
     onSshConfigs,
     bookmarkGroups,
@@ -121,7 +120,12 @@ export default function BookmarkToolbar (props) {
     },
     {
       label: e('import'),
-      onClick: onImport,
+      onClick: () => {
+        const fileInput = document.querySelector('.upload-bookmark-icon')
+        if (fileInput) {
+          fileInput.click()
+        }
+      },
       icon: <ImportOutlined />
     },
     {

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

@@ -680,10 +680,6 @@ export default class ItemListTree extends Component {
     )
   }
 
-  handleImport = () => {
-    document.querySelector('.upload-bookmark-icon input')?.click()
-  }
-
   handleExport = () => {
     document.querySelector('.download-bookmark-icon')?.click()
   }
@@ -697,7 +693,6 @@ export default class ItemListTree extends Component {
       <NewButtonsGroup
         onNewBookmark={this.handleNewBookmark}
         onNewBookmarkGroup={this.handleNewBookmarkGroup}
-        onImport={this.handleImport}
         onExport={this.handleExport}
         onSshConfigs={this.handleSshConfigs}
         bookmarkGroups={this.props.bookmarkGroups}

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

@@ -18,6 +18,7 @@ import Modal from '../common/modal'
 import { copy } from '../../common/clipboard'
 import VncForm from './vnc-form'
 import RemoteFloatControl from '../common/remote-float-control'
+import './vnc.styl'
 
 // noVNC module imports — loaded dynamically
 async function loadVncModule () {
@@ -602,14 +603,17 @@ export default class VncSession extends PureComponent {
       className: 'vnc-session-wrap session-v-wrap'
     }
     const contrlProps = this.getControlProps()
+    const sessProps = {
+      className: 'vnc-session-wrap',
+      style: {
+        width: w + 'px',
+        height: h + 'px'
+      }
+    }
     return (
       <Spin spinning={loading}>
         <div
-          className='rdp-session-wrap pd1'
-          style={{
-            width: w + 'px',
-            height: h + 'px'
-          }}
+          {...sessProps}
         >
           {this.renderControl()}
           <RemoteFloatControl

package/client/components/vnc/vnc.styl

@@ -0,0 +1,17 @@
+.vnc-session-wrap
+  display: flex
+  flex-direction: column
+  justify-content: center
+  align-items: center
+  .session-v-info
+    position: absolute
+    top: 0
+    left: 0
+    width: 100%
+  &.scale-viewport
+    .rdp-scroll-wrapper canvas
+      width: 100% !important
+      height: 100% !important
+      object-fit: contain
+  > div
+    background: transparent !important 

package/client/store/bookmark.js

@@ -33,18 +33,10 @@ export default Store => {
       return {
         term: 'xterm-256color',
         id: uid(),
-        type: 'local',
-        title: 'ssh config: ' + t.title,
+        type: 'ssh',
         color: '#0088cc',
-        runScripts: [
-          {
-            script: `ssh ${t.title}`,
-            delay: 500
-          }
-        ]
+        ...t
       }
-    }).filter(d => {
-      return !store.bookmarks.find(t => t.title === d.title)
     })
     const ids = bookmarksToAdd.map(d => d.id)
     let sshConfigGroup = store.bookmarkGroups.find(d => d.id === 'sshConfig')
@@ -61,7 +53,7 @@ export default Store => {
           ...ids,
           ...(sshConfigGroup.bookmarkIds || [])
         ]
-      })
+      }, 'bookmarkGroups')
     }
     return store.addItems(bookmarksToAdd, 'bookmarks')
   }

package/client/store/sync.js

@@ -35,9 +35,8 @@ async function fetchData (type, func, args, token, proxy) {
 }
 
 function updateSyncServerStatusFromGist (store, gist, type) {
-  const status = parseJsonSafe(
-    get(gist, 'files["electerm-status.json"].content')
-  )
+  const statusContent = get(gist, 'files["electerm-status.json"].content')
+  const status = statusContent ? parseJsonSafe(statusContent) : undefined
   store.syncServerStatus[type] = status
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "2.13.0",
+  "version": "2.15.8",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",

package/client/components/ssh-config/ssh-config-item.jsx

@@ -1,24 +0,0 @@
-import { Tooltip } from 'antd'
-
-export default function SshConfigItem (props) {
-  const { item } = props
-
-  const generateTooltipContent = (item) => {
-    return Object.entries(item)
-      .filter(([key]) => key !== 'id')
-      .map(([key, value]) => (
-        <div key={key}>
-          <b className='mg1r'>{key}:</b>
-          <span>{value}</span>
-        </div>
-      ))
-  }
-
-  return (
-    <Tooltip title={generateTooltipContent(item)}>
-      <div className='elli pd1y pd2x'>
-        ssh {item.title}
-      </div>
-    </Tooltip>
-  )
-}