@electerm/electerm-react 2.2.0 → 2.3.6

package/client/components/bookmark-form/common/serial-path-selector.jsx

@@ -30,7 +30,7 @@ export default function SerialPathSelector ({
         />
       </FormItem>
       <Spin spinning={loaddingSerials}>
-        <span onClick={store.handleGetSerials}>
+        <span onClick={store.handleGetSerials} className='pointer'>
           <ReloadOutlined /> {e('reload')} serials
         </span>
       </Spin>

package/client/components/common/opacity.jsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react'
+import { useDelta, useConditionalEffect } from 'react-delta-hooks'
+import eq from 'fast-deep-equal'
+
+const opacityDomId = 'opacity-style'
+
+/**
+ * Opacity component
+ * Handles conditional CSS rendering based on opacity setting
+ * @param {Object} props
+ * @param {number} props.opacity - Opacity value from store.config
+ * @returns {null}
+ */
+export default function Opacity ({ opacity }) {
+  // Default to 1 if opacity is not provided
+  const currentOpacity = opacity !== undefined ? opacity : 1
+  const delta = useDelta(currentOpacity)
+
+  function applyOpacity () {
+    let styleElement = document.getElementById(opacityDomId)
+
+    // Create style element if it doesn't exist
+    if (!styleElement) {
+      styleElement = document.createElement('style')
+      styleElement.id = opacityDomId
+      document.head.appendChild(styleElement)
+    }
+
+    // Update style content based on opacity value
+    if (currentOpacity === 1) {
+      styleElement.innerHTML = ''
+      window.pre.runGlobalAsync('setBackgroundColor', '#333333')
+    } else {
+      window.pre.runGlobalAsync('setBackgroundColor', '#33333300')
+      styleElement.innerHTML = `
+        html {
+          background: transparent !important;
+        }
+        body {
+          background: transparent !important;
+        }
+        #outside-context {
+          opacity: ${currentOpacity} !important;
+        }
+      `
+    }
+  }
+
+  useEffect(() => {
+    applyOpacity()
+
+    // Cleanup function
+    return () => {
+      const styleElement = document.getElementById(opacityDomId)
+      if (styleElement) {
+        document.head.removeChild(styleElement)
+      }
+    }
+  }, [])
+
+  useConditionalEffect(() => {
+    applyOpacity()
+  }, delta && !eq(delta.prev, delta.curr))
+
+  return null
+}

package/client/components/file-transfer/transfer.styl

@@ -17,7 +17,7 @@
   overflow-y scroll
   z-index 11
   background main
-  box-shadow 0px 0px 3px 3px alpha(main, .5)
+
 .transports-wrap
   .transports-dd
     display none

package/client/components/main/main.jsx

@@ -28,6 +28,7 @@ import ConnectionHoppingWarning from './connection-hopping-warnning'
 import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
 import AIChat from '../ai/ai-chat'
+import Opacity from '../common/opacity'
 import { pick } from 'lodash-es'
 import deepCopy from 'json-deep-copy'
 import './wrapper.styl'
@@ -152,11 +153,6 @@ export default auto(function Index (props) {
   const themeProps = {
     themeConfig: store.getUiThemeConfig()
   }
-  const outerProps = {
-    style: {
-      opacity: config.opacity
-    }
-  }
   const copiedTransfer = deepCopy(fileTransfers)
   const copiedHistory = deepCopy(transferHistory)
   const sidebarProps = {
@@ -260,6 +256,7 @@ export default auto(function Index (props) {
           {...confsCss}
           wsInited={wsInited}
         />
+        <Opacity opacity={config.opacity} />
         <TerminalInteractive />
         <UiTheme
           {...themeProps}
@@ -277,7 +274,6 @@ export default auto(function Index (props) {
         <BatchOp {...batchOpProps} />
         <div
           id='outside-context'
-          {...outerProps}
         >
           <Sidebar {...sidebarProps} />
           <Layout

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

@@ -13,7 +13,7 @@
     top 10px
     position fixed
     z-index 100
-    background rgba(45, 245, 108, 0.8)
+    background #2df56c
   // Hide all sessions first
   .session-wrap
     display none

package/client/components/main/wrapper.styl

@@ -42,7 +42,7 @@
       &::before
         font-size 30vmin
         font-weight bold
-        color alpha(text, 0.15)
+        color lighten(text, 15%)
         display flex
         justify-content center
         align-items center

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

@@ -21,12 +21,11 @@
 .fil-keyword
 .fil-label
   .qm-item
-    opacity .4
+    color lighten(text, 30%)
   .qm-item
     &.name-match
     &.label-match
       font-weight bold
-      opacity 1
 @media (max-width: 500px)
   .qm-search-input
     width 100px

package/client/components/session/session.styl

@@ -55,7 +55,7 @@
   overflow hidden
   z-index 3
   padding-top 36px
-  box-shadow 0px 0px 1px 1px alpha(main, .3)
+  box-shadow 0px 0px 1px 1px lighten(main, 20%)
   &.session-batch-active
     display block
 

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

@@ -41,7 +41,7 @@
   &.focused
     height auto
     border 1px solid main-dark
-    box-shadow 0px 0px 3px 3px alpha(main, .05)
+    box-shadow 0px 0px 3px 3px lighten(main, 5%)
 
 .sftp-history-item
   padding 5px 10px
@@ -72,7 +72,6 @@
     top 0
     z-index 1
     height 100%
-    opacity 0
     padding 0
     margin 0
 
@@ -86,13 +85,6 @@
   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

package/client/components/sidebar/info.styl

@@ -2,23 +2,22 @@
 
 // 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%)
+// @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%)
+//   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

@@ -23,7 +23,7 @@
   z-index 100
   bottom 0
   background main-dark
-  box-shadow 0px 0px 3px 3px alpha(main, .1)
+
   .item-list
     padding-right 0
 .sidebar-pin-top
@@ -73,7 +73,6 @@
   bottom 0
   z-index 200
   width 0
-  border-right 1px solid darken(main, 30%)
 
 .pinned
   .sidebar-list

package/client/components/sys-menu/sys-menu.styl

@@ -15,7 +15,7 @@
     color #eee
     cursor pointer
   &.disabled
-    color alpha(text, .85)
+    color lighten(text, 15%)
     &:hover
       color #777
       background #333
@@ -30,7 +30,7 @@
   position absolute
   right 16px
   top 0
-  opacity .65
+  color lighten(text, 20%)
 
 .context-menu
   hr
@@ -44,7 +44,7 @@
   left 100%
   top 0
   background main
-  box-shadow 0px 0px 3px 3px alpha(main, .35)
+  box-shadow 0px 0px 3px 3px lighten(main, 35%)
   max-height 300px
   overflow-y scroll
 .with-sub-menu
@@ -68,15 +68,14 @@
   width 28px
   height 28px
   border-radius 30px
-  color text
+  color lighten(text, 20%)
   font-size 16px
   text-align center
   display inline-block
   line-height 28px
   cursor pointer
-  opacity .6
   &:hover
-    opacity 1
+    color text
 .is-main
   .menu-control
     img

package/client/components/tabs/tabs.styl

@@ -71,11 +71,11 @@
       color text-light
 @keyframes blink
   0%
-    opacity 0.3
+    background-color #e0e0e0
   50%
-    opacity 1
+    background-color #ffffff
   100%
-    opacity 0.3
+    background-color #e0e0e0
 
 .tab-terminal-feed
 .tab-traffic
@@ -96,6 +96,7 @@
 .is-transporting .tab-traffic
   display block
   animation blink 2s infinite
+  /* Remove opacity animation, use background-color */
 .tab-traffic
   display none
   left 10px
@@ -105,6 +106,7 @@
 .is-terminal-active .tab-terminal-feed
   display block
   animation blink 2s infinite
+  /* Remove opacity animation, use background-color */
 .tab-terminal-feed
   display none
   left 20px
@@ -217,7 +219,7 @@
   margin-right 5px
   font-size 14px
 .no-sessions
-  background main-dark
+  background main
   text-align center
   padding 50px 0
   position absolute
@@ -231,7 +233,6 @@
   padding 0 4px
   height 20px
   line-height 21px
-  opacity 0.8
 .no-session-history
   position absolute
   top 280px

package/client/components/terminal/terminal-search-bar.jsx

@@ -26,7 +26,7 @@ export default function SearchResultBar ({
     ctx.clearRect(0, 0, canvas.width, canvas.height)
     matches.forEach((match, index) => {
       const y = (match / totalLines) * containerHeight
-      ctx.fillStyle = index === matchIndex ? 'rgba(243, 67, 9, 0.5)' : 'rgba(243, 196, 9, 0.5)'
+      ctx.fillStyle = index === matchIndex ? '#f34309' : '#f3c409'
       ctx.fillRect(0, y, 16, 2)
     })
   }

package/client/components/terminal/terminal.styl

@@ -41,11 +41,7 @@
     height 100%
     background-repeat no-repeat
     background-position center
-    background-color: transparent !important
-
-
-.terminal-not-active .xterm-text-layer
-  opacity .74
+    background-color transparent !important
 
 .terminal-normal-buffer
   position absolute
@@ -54,7 +50,7 @@
   width 100%
   background main
   color text
-  box-shadow 0px 3px 3px 0px alpha(text, .25)
+  box-shadow 0px 3px 3px 0px lighten(main, 25%)
   z-index 66
   padding-bottom 32px
 .terminal-normal-buffer-body
@@ -73,7 +69,7 @@
   width 100%
   height 32px
   line-height 32px
-  box-shadow 0px -3px 3px 0px alpha(text, .25)
+  box-shadow 0px -3px 3px 0px lighten(main, 25%)
   background main-light
 .batch-input-wrap
   width calc(100% - 80px)
@@ -128,9 +124,9 @@
 .suggestion-type
   margin-left 5px
   font-size 0.8em
-  opacity .8
+  color lighten(text, 20%)
   &:hover
-    opacity 1
+    color text
 
 .suggestion-delete
   margin-left 5px

package/client/components/terminal-info/terminal-info.styl

@@ -16,7 +16,7 @@
   color text
   z-index 100
   overflow-y scroll
-  opacity .9
+
   .drag-handle
     left 0
     right auto

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

@@ -75,5 +75,5 @@
   height 12px
   margin-right 6px
   border-radius 2px
-  border 1px solid rgba(0,0,0,0.1)
+  border 1px solid #1a1a1a
   vertical-align middle

package/client/css/basic.styl

@@ -2,20 +2,17 @@
 @require './antd-overwrite'
 @require './includes/theme-default'
 
-html
-  background rgba(0,0,0,.01)
-
 body
   color text
   overflow hidden
-  background alpha(main, .3)
+  background main
   font-size 12px
   line-height 1.5715
   font-family -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'
   font-variant: tabular-nums
 
 ::-webkit-scrollbar
-  background alpha(main, .5)
+  background transparent
   width 7px
 
 .term-wrap:hover

package/client/views/index.pug

@@ -16,7 +16,6 @@ html
         top: 0;
         width: 100%;
         height: 100%;
-        background: #141314 50% 50% no-repeat url("./images/electerm-watermark.png");
         display: flex;
         flex-direction: column;
         justify-content: center;
@@ -25,6 +24,14 @@ html
       .electerm-logo-bg {
         background: transparent 50% 50% no-repeat url("./images/electerm-watermark.png");
       }
+      .morph-shape {
+        background: linear-gradient(45deg, #08c 0%, #09c 100%);
+        animation: morph 8s ease-in-out infinite;
+        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
+        transition: all 1s ease-in-out;
+        z-index: 5;
+      }
+
     - if (!isDev)
       link(rel='stylesheet', href='css/' + version + '-basic.css')
       link(rel='stylesheet', href='css/' + version + '-electerm.css')

package/package.json

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

package/client/components/terminal/zmodem.styl

@@ -1,14 +0,0 @@
-@require '../../css/includes/theme-default'
-.zmodem-transfer
-  position absolute
-  left 0
-  right 0
-  height 100%
-  width 100%
-  background alpha(main-dark, .95)
-  display flex
-  flex-direction column
-  align-items center
-  justify-content center
-  z-index 20
-  padding 20px 180px 20px 20px