@electerm/electerm-react 2.2.0 → 2.3.18

package/client/components/main/upgrade.styl

@@ -1,13 +1,11 @@
-@require '../../css/includes/theme-default'
 .upgrade-panel
   position fixed
   right 10px
   bottom 10px
   z-index 9999
-  background main
-  color text
+  background var(--main)
   border-radius 5px
-  border 1px solid darken(main, 30%)
+  border 1px solid var(--main-darker)
   padding 0
   width 440px
 .upgrade-panel-hide
@@ -17,12 +15,12 @@
   bottom auto
 .close-upgrade-panel
   &:hover
-    color success
+    color var(--success)
 .upgrade-panel-title
 .upgrade-panel-body
   padding 10px 15px
 .upgrade-panel-title
-  border-bottom 1px solid darken(main, 30%)
+  border-bottom 1px solid var(--main-darker)
 .markdown-wrap
   max-height 40vh
   overflow-y auto

package/client/components/main/wrapper.styl

@@ -1,4 +1,3 @@
-@require '../../css/includes/theme-default'
 .common-err-desc
   &:hover
     text-overflow clip
@@ -6,43 +5,22 @@
     white-space pre
     max-height 300px
     overflow scroll
-// .pinned .sessions
-//   margin-left 343px
+
 .error-wrapper
-  background main
+  background var(--main)
   height 100%
   position fixed
-  color text
   overflow-y scroll
-.init-wrap
-.loading-data
-  position fixed
-  left 0
-  top 0
-  width 100%
-  height 100%
-  background-color main-light
-.loading-data
-  text-align center
-  font-size 30px
-  color text
-  padding 50px
-  z-index 210
-  .ant-tag
-    border-radius 3px
-    padding 4px
-    font-size 14px
-.loaded
-  .loading-data
-    display none
 
 #container
+  .xterm
+    padding 10px
   .session-batch-active
     .xterm-screen
       &::before
         font-size 30vmin
         font-weight bold
-        color alpha(text, 0.15)
+        color var(--text)
         display flex
         justify-content center
         align-items center

package/client/components/quick-commands/qm.styl

@@ -1,13 +1,11 @@
-@require '../../css/includes/theme-default'
 .qm-list-wrap
   max-height calc(100vh - 100px)
   overflow-y scroll
 .qm-wrap-tooltip
-  background main
+  background var(--main)
   position absolute
   left 43px
   right 0
-  color text
   z-index 89
   height auto
   bottom 36px
@@ -21,15 +19,14 @@
 .fil-keyword
 .fil-label
   .qm-item
-    opacity .4
+    color var(--text-light)
   .qm-item
     &.name-match
     &.label-match
       font-weight bold
-      opacity 1
 @media (max-width: 500px)
   .qm-search-input
     width 100px
 
 .item-list-unit.dragover
-  border: 1px dashed primary
+  border: 1px dashed var(--primary)

package/client/components/session/session.styl

@@ -1,4 +1,3 @@
-@require '../../css/includes/theme-default'
 @keyframes rotate
   from
     background-position -3000px
@@ -10,7 +9,7 @@
   left 0
   width 100%
   height 1px
-  background text-dark
+  background var(--text-dark)
   display none
 .type-tab-txt
   position relative
@@ -20,14 +19,13 @@
   display inline-block
   vertical-align middle
   line-height 30px
-  color text-dark
   padding 0 20px 0 0
   margin-right 0px
   font-size 14px
   cursor pointer
   &:hover
   &.active
-    color text
+    color var(--text-light)
   &.active
     .type-tab-line
       display inline-block
@@ -36,34 +34,34 @@
   .type-tab.sftp
     .type-tab-line
       display inline-block
-      background linear-gradient(to right, success 0%, main 25%, error 50%, primary 75%, success 100%)
+      background linear-gradient(to right, var(--success) 0%, var(--main) 25%, var(--error) 50%, var(--primary) 75%, var(--success) 100%)
       animation: rotate 60s infinite linear
 .disable-ssh
   .type-tab.ssh
     display none
 .spliter
-  color text
+  color var(--text)
   &:hover
-    color text-light
+    color var(--text-light)
 
 .sessions
   position absolute
-  background main
+  background var(--main)
 .session-wrap
   display none
   position absolute
   overflow hidden
   z-index 3
   padding-top 36px
-  box-shadow 0px 0px 1px 1px alpha(main, .3)
+  box-shadow 0px 0px 1px 1px var(--main-darker)
   &.session-batch-active
     display block
 
 .web-session-wrap
   height 100vh
-  background main
+  background var(--main)
 .session-v-wrap
-  background main
+  background var(--main)
   overflow scroll
   z-index 99
 .vnc-session-wrap > div
@@ -76,8 +74,8 @@
 .sess-icon
   margin-right 10px
   &.active
-    color warn
+    color var(--warn)
 
 .split-view-toggle
   &.active
-    color success
+    color var(--success)

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

@@ -1,4 +1,4 @@
-@require '../../css/includes/theme-default'
+
 .item-list-wrap
   overflow-y scroll
   &::-webkit-scrollbar
@@ -22,13 +22,13 @@
   cursor pointer
   line-height 1.8
   &.active
-    background primary
-    color contrastColor(primary)
+    background var(--primary)
+    color var(--primary-contrast)
   &.current
     font-weight bold
   &:hover
-    background darken(primary, 30%)
-    color contrastColor(darken(primary, 30%))
+    background var(--primary)
+    color var(--primary-contrast)
     .list-item-apply
     .list-item-edit
     .list-item-remove

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

@@ -1,7 +1,3 @@
-@require '../../css/includes/theme-default'
-
-.setting-wrap
-  color text
 
 body .ant-drawer .ant-drawer-content-wrapper
   left 43px
@@ -9,11 +5,10 @@ body .ant-drawer .ant-drawer-content-wrapper
   position absolute
   top 70px
   font-size 16px
-  color text
   cursor pointer
   z-index 889
   &:hover
-    color text
+    color var(--success)
 .alt-close-setting-wrap
   right 20px
 .close-setting-wrap

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

@@ -23,6 +23,9 @@ export default function TerminalBackgroundConfig ({
   isGlobal = false,
   batchUpdate
 }) {
+  if (!config) {
+    return null
+  }
   const [showTextModal, setShowTextModal] = useState(false)
   const value = config[name]
   const defaultValue = defaultSettings[name]

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

@@ -12,7 +12,6 @@ import Link from '../common/external-link'
 import dayjs from 'dayjs'
 import eq from 'fast-deep-equal'
 import { syncTokenCreateUrls, syncTypes } from '../../common/constants'
-import './sync.styl'
 import HelpIcon from '../common/help-icon'
 import ServerDataStatus from './server-data-status'
 import Password from '../common/password'

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

@@ -872,6 +872,9 @@ export default class FileSection extends React.Component {
   }
 
   handleContextMenuCapture = (e) => {
+    if (!this.isSelected(this.state.file)) {
+      this.onClick(e)
+    }
     this.contextMenuPosition = {
       clientY: e.clientY
     }

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

@@ -27,7 +27,7 @@ import fs from '../../common/fs'
 import ListTable from './list-table-ui'
 import deepCopy from 'json-deep-copy'
 import isValidPath from '../../common/is-valid-path'
-import memoizeOne from 'memoize-one'
+
 import * as owner from './owner-list'
 import AddressBar from './address-bar'
 import getProxy from '../../common/get-proxy'
@@ -101,6 +101,9 @@ export default class Sftp extends Component {
     this.timer4 = null
     clearTimeout(this.timer5)
     this.timer5 = null
+    // Clear sort cache to prevent memory leaks
+    this._sortCache?.clear()
+    this._lastSortArgs = null
   }
 
   initFtpData = async () => {
@@ -167,19 +170,36 @@ export default class Sftp extends Component {
     }, {})
   }
 
-  sort = memoizeOne((
-    list,
-    type,
-    sortDirection,
-    sortProp
-  ) => {
+  // Cache for memoized sort results
+  _sortCache = new Map()
+  _lastSortArgs = null
+
+  sort = (list, type, sortDirection, sortProp) => {
+    // Create a cache key from the arguments
+    const cacheKey = JSON.stringify({
+      listLength: list?.length || 0,
+      listHash: this._hashList(list),
+      type,
+      sortDirection,
+      sortProp
+    })
+
+    // Check if we have a cached result and if args haven't changed
+    if (this._lastSortArgs && isEqual(this._lastSortArgs, [list, type, sortDirection, sortProp])) {
+      const cached = this._sortCache.get(cacheKey)
+      if (cached) {
+        return cached
+      }
+    }
+
+    // Compute the result
     if (!list || !list.length) {
       return []
     }
 
     const isDesc = sortDirection === 'desc'
 
-    return list.slice().sort((a, b) => {
+    const result = list.slice().sort((a, b) => {
       // Handle items with no id first
       if (!a.id && b.id) return -1
       if (a.id && !b.id) return 1
@@ -207,7 +227,28 @@ export default class Sftp extends Component {
       if (aValue > bValue) return isDesc ? -1 : 1
       return 0
     })
-  }, isEqual)
+
+    // Cache the result
+    this._lastSortArgs = [list, type, sortDirection, sortProp]
+    this._sortCache.set(cacheKey, result)
+
+    // Limit cache size to prevent memory leaks
+    if (this._sortCache.size > 10) {
+      const firstKey = this._sortCache.keys().next().value
+      this._sortCache.delete(firstKey)
+    }
+
+    return result
+  }
+
+  // Helper method to create a simple hash of the list for cache key
+  _hashList = (list) => {
+    if (!list || !list.length) return 0
+    return list.reduce((hash, item, index) => {
+      const str = `${item.id || ''}${item.name || ''}${item.modifyTime || ''}${index}`
+      return hash + str.length
+    }, 0)
+  }
 
   isActive () {
     const { currentBatchTabId, pane, sshSftpSplitView } = this.props

package/client/components/sftp/sftp.styl

@@ -1,5 +1,3 @@
-@require '../../css/includes/theme-default'
-
 .sftp-wrap
   display flex
   flex-direction row
@@ -17,15 +15,15 @@
   margin-bottom 4px
   &:nth-child(even)
     .sftp-file-prop
-      background main
+      background var(--main)
   &:hover
     .sftp-file-prop
-      background-color primary
-      color contrastColor(primary)
+      background-color var(--primary)
+      color var(--primary-contrast)
   &.selected
     .sftp-file-prop
-      background-color darken(primary, 30%)
-      color contrastColor(primary)
+      background-color var(--primary)
+      color var(--primary-contrast)
 .sftp-history
   position absolute
   left 0
@@ -40,15 +38,15 @@
   border-radius 3px
   &.focused
     height auto
-    border 1px solid main-dark
-    box-shadow 0px 0px 3px 3px alpha(main, .05)
+    border 1px solid var(--main-darker)
+    box-shadow 0px 0px 3px 3px var(--main-lighter)
 
 .sftp-history-item
   padding 5px 10px
   cursor pointer
-  border-bottom 1px solid primary
+  border-bottom 1px solid var(--main-darker)
   &:hover
-    background main-dark
+    background var(--main-darker)
 
 .sftp-item-title
   width 100%
@@ -57,11 +55,11 @@
 .sftp-item-size
   width 24%
 .sftp-status-success
-  color success
+  color var(--success)
 .sftp-status-exception
-  color error
+  color var(--error)
 .sftp-status-active
-  color primary
+  color var(--primary)
 
 .virtual-file
   .sftp-item
@@ -72,7 +70,6 @@
     top 0
     z-index 1
     height 100%
-    opacity 0
     padding 0
     margin 0
 
@@ -86,19 +83,11 @@
   width 100%
 .file-props
   margin-left 70px
-.opacity-loop
-  opacity 0.3
-  animation blinker 5s linear infinite
-
-@keyframes blinker
-  50%
-    opacity .8
 
 .sftp-sort-btn
-  color text
   &.active
     font-weight bold
-    color text-light
+    color var(--text-light)
 
 //list table
 .sftp-file-prop
@@ -106,13 +95,13 @@
   height 32px
   line-height 30px
   padding 0 5px
-  background main
+  background var(--main)
   overflow hidden
   white-space nowrap
   text-overflow ellipsis
   pointer-events none
   cursor default
-  color text
+  color var(--text)
 
 .file-bg
   position absolute
@@ -130,7 +119,6 @@
   overflow hidden
   white-space nowrap
   text-overflow ellipsis
-  color text
 
 .sftp-file-table-header
   height 30px
@@ -142,8 +130,8 @@
 .sftp-item
   &.sftp-dragover
     .sftp-file-prop
-      background primary !important
-      color text-light !important
+      background var(--primary) !important
+      color var(--text) !important
   &.sftp-dragover-multi
     &:after
     &:before
@@ -152,7 +140,7 @@
       top 2px
       width 100%
       height 100%
-      background main-light
+      background var(--main-lighter)
       content ''
       z-index -1
     &:after
@@ -166,12 +154,11 @@
 
 //sftp
 .sftp-panel
-  background main
-  color text
+  background var(--main)
 
 .file-list
   ::-webkit-scrollbar-thumb
-    background-color primary !important
+    background-color var(--primary) !important
 
 .pager-wrap
   z-index 4
@@ -183,4 +170,4 @@
 .keyword-filter-icon
   &:hover
   &.active
-    color success
+    color var(--success)

package/client/components/sftp/transfer-tag.styl

@@ -1,11 +1,9 @@
-@require '../../css/includes/theme-default'
 .transfer-tag
-  color text
   border-radius 2px
   padding 0 2px
 .transfer-status-init
-  color primary
+  color var(--primary)
 .transfer-status-started
-  color success
+  color var(--success)
 .transfer-status-error
-  color error
+  color var(--error)

package/client/components/side-panel-r/right-side-panel.styl

@@ -1,14 +1,12 @@
-@require '../../css/includes/theme-default'
-
 .right-side-panel
   position absolute
   right 0
   top 36px
   bottom 0
   z-index 200
-  background main
-  color text-light
-  border-left 1px solid darken(main, 30%)
+  background var(--main)
+  color var(--text)
+  border-left 1px solid var(--main-darker)
   &.right-side-panel-pinned
     top 0
 
@@ -17,16 +15,16 @@
     right auto
     display block
 .right-panel-title
-  border-bottom 1px solid darken(main, 30%)
+  border-bottom 1px solid var(--main-darker)
 .right-side-panel-controls
-  color text-dark
+  color var(--text)
   font-size 16px
   &:hover
-    color text
+    color var(--success)
     cursor pointer
   &.right-side-panel-pin
     &.pinned
-      color success
+      color var(--success)
 .right-side-panel-content
   padding 10px
   overflow-y scroll

package/client/components/sidebar/info.styl

@@ -1,24 +1,11 @@
-@require '../../css/includes/theme-default'
 
 // from https://freefrontend.com/css-border-animations/
 .morph-shape
- 	background linear-gradient(45deg, primary 0%, success 100%)
-  animation morph 8s ease-in-out infinite
+ 	background linear-gradient(45deg, #08c 0%, #09c 100%)
   border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
   transition all 1s ease-in-out
   z-index 5
 
-@keyframes morph
-  0%
-    border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
-    background linear-gradient(45deg, primary 0%, success 100%)
-  50%
-    border-radius  30% 60% 70% 40% / 50% 60% 30% 60%
-    background linear-gradient(45deg, main 0%, success 100%)
-
-  100%
-    border-radius 60% 40% 30% 70% / 60% 30% 70% 40%
-    background linear-gradient(45deg, primary 0%, success 100%)
 .info-modal
   .ant-modal-header
     border none

package/client/components/sidebar/sidebar.styl

@@ -1,4 +1,4 @@
-@require '../../css/includes/theme-default'
+
 .animate-fast
   animation-duration .2s
 .sidebar-panel
@@ -9,8 +9,7 @@
   z-index 200
   width 0
   overflow-y scroll
-  background main
-  color text
+  background var(--main)
   .item-list-unit:hover
     .list-item-remove
       display none !important
@@ -22,8 +21,8 @@
   width 36px
   z-index 100
   bottom 0
-  background main-dark
-  box-shadow 0px 0px 3px 3px alpha(main, .1)
+  background var(--main-darker)
+
   .item-list
     padding-right 0
 .sidebar-pin-top
@@ -52,20 +51,20 @@
   .history-panel
     width 100%
 .control-icon-text
-  color text
+  color var(--text)
   &:hover
-    color text-light
+    color var(--success)
 .control-icon-wrap
   padding 14px 0
   text-align center
   &.active
     .control-icon
-      color text-light
+      color var(--text-light)
   .control-icon
-    color text-dark
+    color var(--text-dark)
     cursor pointer
     &:hover
-      color text-light
+      color var(--text-light)
 .sidebar-list
   position absolute
   left 43px
@@ -73,7 +72,6 @@
   bottom 0
   z-index 200
   width 0
-  border-right 1px solid darken(main, 30%)
 
 .pinned
   .sidebar-list
@@ -85,22 +83,22 @@
     display block
   .sidebar-panel
     .pinned
-      color success
+      color var(--success)
 //btns
 .btns
-  background main-dark
-  border-color primary
+  background var(--main-darker)
+  border-color var(--primary)
   .open-about-icon
-    color text-dark
+    color var(--text-dark)
     &:hover
-      color text-light
+      color var(--text-light)
 
 .btns .upgrade-icon
-  color success
+  color var(--success)
 .close-info-modal
   cursor pointer
   &:hover
-    color text-light
+    color var(--text-light)
 .logo-filter
   filter invert(80%)
 .sidebar-inner