@electerm/electerm-react 2.3.48 → 2.3.58

package/client/common/theme-defaults.js

@@ -17,18 +17,18 @@ function parsor (themeTxt) {
 
 const defaultThemeDark = () => {
   return parsor(`
-    main = #20111b
-    main-dark = #000
-    main-light = #2E3338
-    text = #ddd
-    text-light = #fff
-    text-dark = #888
-    text-disabled = #777
-    primary = #08c
-    info = #FFD166
-    success = #06D6A0
-    error = #EF476F
-    warn = #E55934
+main-dark=#000
+main-light=#2E3338
+text=#ddd
+text-light=#fff
+text-dark=#888
+text-disabled=#777
+primary=#08c
+info=#FFD166
+success=#06D6A0
+error=#EF476F
+warn=#E55934
+main=#121214
   `)
 }
 const defaultThemeLightFunc = () => {
@@ -50,27 +50,27 @@ const defaultThemeLightFunc = () => {
 
 const defaultThemeLightTerminal = () => {
   return parsor(`
-    foreground=#333333
-    background=#ededed
-    cursor=#b5bd68
-    cursorAccent=#1d1f21
-    selectionBackground=rgba(0, 0, 0, 0.3)
-    black=#575757
-    red=#FF2C6D
-    green=#19f9d8
-    yellow=#FFB86C
-    blue=#45A9F9
-    magenta=#FF75B5
-    cyan=#B084EB
-      white=#CDCDCD
-    brightBlack=#757575
-    brightRed=#FF2C6D
-    brightGreen=#19f9d8
-    brightYellow=#FFCC95
-    brightBlue=#6FC1FF
-    brightMagenta=#FF9AC1
-    brightCyan=#BCAAFE
-    brightWhite=#E6E6E6
+background=#121214
+foreground=#af9a91
+cursor=#af9a91
+selectionBackground=#575256
+cursorAccent=#121214
+black=#572100
+red=#ba3934
+green=#91773f
+yellow=#b55600
+blue=#5f63b4
+magenta=#a17c7b
+cyan=#8faea9
+white=#af9a91
+brightBlack=#4e4b61
+brightRed=#d9443f
+brightGreen=#d6b04e
+brightYellow=#f66813
+brightBlue=#8086ef
+brightMagenta=#e2c2bb
+brightCyan=#a4dce7
+brightWhite=#d2c7a9
     `
   )
 }

package/client/components/sidebar/index.jsx

@@ -8,7 +8,6 @@ import {
   UpCircleOutlined,
   BarsOutlined
 } from '@ant-design/icons'
-import { useRef, memo } from 'react'
 import { Tooltip } from 'antd'
 import SideBarPanel from './sidebar-panel'
 import TransferList from './transfer-list'
@@ -25,9 +24,7 @@ import './sidebar.styl'
 
 const e = window.translate
 
-export default memo(function Sidebar (props) {
-  const handler = useRef(null)
-
+export default function Sidebar (props) {
   const {
     height,
     upgradeInfo,
@@ -47,27 +44,35 @@ export default memo(function Sidebar (props) {
 
   const { store } = window
 
-  const handleMouseLeave = () => {
-    if (pinned) {
-      return false
+  const handleClickOutside = (event) => {
+    // Don't close if pinned or has active input
+    if (store.pinned || hasActiveInput()) {
+      return
     }
 
-    if (hasActiveInput()) {
-      return false
+    // Check if click is outside the sidebar panel
+    const sidebarPanel = document.querySelector('.sidebar-panel')
+    if (sidebarPanel && !sidebarPanel.contains(event.target)) {
+      store.setOpenedSideBar('')
+      document.removeEventListener('click', handleClickOutside)
     }
-
-    handler.current = setTimeout(
-      () => store.setOpenedSideBar(''),
-      400
-    )
   }
 
-  const handleMouseEnterBookmark = () => {
+  const handleClickBookmark = () => {
     if (pinned) {
-      return false
+      return
+    }
+    if (openedSideBar === 'bookmarks') {
+      // Remove listener when closing
+      document.removeEventListener('click', handleClickOutside)
+      store.setOpenedSideBar('')
+    } else {
+      // Add listener when opening, with slight delay to avoid conflict with this click
+      setTimeout(() => {
+        document.addEventListener('click', handleClickOutside)
+      }, 0)
+      store.setOpenedSideBar('bookmarks')
     }
-    clearTimeout(handler.current)
-    store.setOpenedSideBar('bookmarks')
   }
 
   const handleShowUpgrade = () => {
@@ -80,7 +85,6 @@ export default memo(function Sidebar (props) {
     openAbout,
     openSettingSync,
     openTerminalThemes,
-    onClickBookmark,
     toggleBatchOp,
     setLeftSidePanelWidth
   } = store
@@ -137,9 +141,7 @@ export default memo(function Sidebar (props) {
           active={bookmarksActive}
         >
           <BookOutlined
-            onMouseEnter={handleMouseEnterBookmark}
-            onMouseLeave={handleMouseLeave}
-            onClick={onClickBookmark}
+            onClick={handleClickBookmark}
             className='font20 iblock control-icon'
           />
         </SideIcon>
@@ -212,10 +214,8 @@ export default memo(function Sidebar (props) {
         <SideBarPanel
           pinned={pinned}
           sidebarPanelTab={sidebarPanelTab}
-          onMouseEnter={handleMouseEnterBookmark}
-          onMouseLeave={handleMouseLeave}
         />
       </SidePanel>
     </div>
   )
-})
+}

package/client/components/sidebar/sidebar-panel.jsx

@@ -5,9 +5,15 @@
 import { memo } from 'react'
 import BookmarkWrap from './bookmark'
 import History from './history'
-import { pick } from 'lodash-es'
 import { Tabs, Tooltip } from 'antd'
-import { ArrowsAltOutlined, EditOutlined, PlusCircleOutlined, ShrinkOutlined, PushpinOutlined } from '@ant-design/icons'
+import {
+  ArrowsAltOutlined,
+  EditOutlined,
+  PlusCircleOutlined,
+  ShrinkOutlined,
+  PushpinOutlined,
+  UnorderedListOutlined
+} from '@ant-design/icons'
 
 const e = window.translate
 
@@ -20,9 +26,21 @@ export default memo(function SidebarPanel (props) {
   const prps1 = {
     className: prps.className + (pinned ? ' pinned' : '')
   }
+  const props2 = {
+    onClick: store.clearHistory,
+    className: 'mg2x pointer clear-ai-icon icon-hover'
+  }
+  const tabBarExtraContent = sidebarPanelTab === 'history'
+    ? (
+      <UnorderedListOutlined
+        {...props2}
+      />
+      )
+    : null
   const tabsProps = {
     activeKey: sidebarPanelTab,
     onChange: store.handleSidebarPanelTab,
+    tabBarExtraContent,
     items: [
       {
         key: 'bookmarks',
@@ -69,7 +87,6 @@ export default memo(function SidebarPanel (props) {
   return (
     <div
       className='sidebar-panel bookmarks-panel animate-fast'
-      {...pick(props, ['onMouseEnter', 'onMouseLeave'])}
     >
       <div className='sidebar-pin-top'>
         <div className='pd1y pd2t pd2x sidebar-panel-control alignright'>

package/client/components/tabs/add-btn.jsx

@@ -27,7 +27,6 @@ export default class AddBtn extends Component {
     }
     this.addBtnRef = React.createRef()
     this.menuRef = React.createRef()
-    this.hideTimeout = null
     this.portalContainer = null
   }
 
@@ -40,19 +39,9 @@ export default class AddBtn extends Component {
     return this.portalContainer
   }
 
-  componentDidMount () {
-    document.addEventListener('click', this.handleDocumentClick)
-    // Listen for dropdown events to prevent menu closing
-    document.addEventListener('ant-dropdown-show', this.handleDropdownShow)
-    document.addEventListener('ant-dropdown-hide', this.handleDropdownHide)
-  }
-
   componentWillUnmount () {
-    document.removeEventListener('click', this.handleDocumentClick)
-    document.removeEventListener('ant-dropdown-show', this.handleDropdownShow)
-    document.removeEventListener('ant-dropdown-hide', this.handleDropdownHide)
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout)
+    if (this.state.open) {
+      document.removeEventListener('click', this.handleDocumentClick)
     }
     // Clean up portal container
     if (this.portalContainer) {
@@ -61,19 +50,15 @@ export default class AddBtn extends Component {
     }
   }
 
-  handleDropdownShow = () => {
-    // Cancel any pending hide timeout when dropdown shows
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout)
-      this.hideTimeout = null
+  componentDidUpdate (prevProps, prevState) {
+    // Attach or detach document click listener only when menu open state changes
+    if (this.state.open && !prevState.open) {
+      document.addEventListener('click', this.handleDocumentClick)
+    } else if (!this.state.open && prevState.open) {
+      document.removeEventListener('click', this.handleDocumentClick)
     }
   }
 
-  handleDropdownHide = () => {
-    // Small delay after dropdown hides before allowing menu to close
-    // This prevents flicker when dropdown closes
-  }
-
   handleDocumentClick = (e) => {
     // Don't close menu when clicking inside menu or add button
     if (this.menuRef.current && this.menuRef.current.contains(e.target)) {
@@ -91,86 +76,6 @@ export default class AddBtn extends Component {
     this.setState({ open: false })
   }
 
-  handleMouseEnter = () => {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout)
-      this.hideTimeout = null
-    }
-
-    // Calculate menu position
-    if (this.addBtnRef.current) {
-      const rect = this.addBtnRef.current.getBoundingClientRect()
-      const windowWidth = window.innerWidth
-      const windowHeight = window.innerHeight
-
-      // Estimate menu width and height
-      const estimatedMenuWidth = Math.min(300, windowWidth - 40) // Responsive width
-      const estimatedMenuHeight = 400 // Rough estimate
-
-      // Calculate fixed position coordinates
-      let menuTop = rect.bottom + 4 // 4px margin
-      let menuLeft = rect.left
-      let menuPosition = 'right'
-
-      // Check if menu would overflow bottom of screen
-      if (menuTop + estimatedMenuHeight > windowHeight - 20) {
-        menuTop = rect.top - estimatedMenuHeight - 4 // Show above button
-      }
-
-      // If aligning right would cause overflow, align left instead
-      if (rect.left + estimatedMenuWidth > windowWidth - 20) {
-        menuPosition = 'left'
-        menuLeft = rect.right - estimatedMenuWidth
-      }
-
-      // If aligning left would cause overflow (negative position), force right
-      if (menuLeft < 20) {
-        menuPosition = 'right'
-        menuLeft = Math.max(20, rect.left) // Ensure at least 20px from edge
-      }
-
-      // Final check to ensure menu doesn't go off screen
-      if (menuLeft + estimatedMenuWidth > windowWidth - 20) {
-        menuLeft = windowWidth - estimatedMenuWidth - 20
-      }
-
-      this.setState({
-        open: true,
-        menuPosition,
-        menuTop,
-        menuLeft
-      })
-
-      if (!this.state.open) {
-        window.openTabBatch = this.props.batch
-      }
-    }
-  }
-
-  handleMouseLeave = () => {
-    this.hideTimeout = setTimeout(() => {
-      this.setState({ open: false })
-    }, 200)
-  }
-
-  handleMenuMouseEnter = () => {
-    if (this.hideTimeout) {
-      clearTimeout(this.hideTimeout)
-      this.hideTimeout = null
-    }
-  }
-
-  handleMenuMouseLeave = () => {
-    // Don't close if there's an active input or dropdown
-    if (hasActiveInput()) {
-      return
-    }
-
-    this.hideTimeout = setTimeout(() => {
-      this.setState({ open: false })
-    }, 200)
-  }
-
   handleMenuScroll = (e) => {
     // Prevent scroll events from bubbling up
     e.stopPropagation()
@@ -212,8 +117,6 @@ export default class AddBtn extends Component {
           top: menuTop,
           left: menuLeft
         }}
-        onMouseEnter={this.handleMenuMouseEnter}
-        onMouseLeave={this.handleMenuMouseLeave}
         onScroll={this.handleMenuScroll}
       >
         <div
@@ -230,6 +133,59 @@ export default class AddBtn extends Component {
     )
   }
 
+  handleAddBtnClick = () => {
+    if (this.state.open) {
+      this.setState({ open: false })
+    } else {
+      // Calculate menu position and open the menu
+      if (this.addBtnRef.current) {
+        const rect = this.addBtnRef.current.getBoundingClientRect()
+        const windowWidth = window.innerWidth
+        const windowHeight = window.innerHeight
+
+        // Estimate menu width and height
+        const estimatedMenuWidth = Math.min(300, windowWidth - 40) // Responsive width
+        const estimatedMenuHeight = 400 // Rough estimate
+
+        // Calculate fixed position coordinates
+        let menuTop = rect.bottom + 4 // 4px margin
+        let menuLeft = rect.left
+        let menuPosition = 'right'
+
+        // Check if menu would overflow bottom of screen
+        if (menuTop + estimatedMenuHeight > windowHeight - 20) {
+          menuTop = rect.top - estimatedMenuHeight - 4 // Show above button
+        }
+
+        // If aligning right would cause overflow, align left instead
+        if (rect.left + estimatedMenuWidth > windowWidth - 20) {
+          menuPosition = 'left'
+          menuLeft = rect.right - estimatedMenuWidth
+        }
+
+        // If aligning left would cause overflow (negative position), force right
+        if (menuLeft < 20) {
+          menuPosition = 'right'
+          menuLeft = Math.max(20, rect.left) // Ensure at least 20px from edge
+        }
+
+        // Final check to ensure menu doesn't go off screen
+        if (menuLeft + estimatedMenuWidth > windowWidth - 20) {
+          menuLeft = windowWidth - estimatedMenuWidth - 20
+        }
+
+        this.setState({
+          open: true,
+          menuPosition,
+          menuTop,
+          menuLeft
+        })
+
+        window.openTabBatch = this.props.batch
+      }
+    }
+  }
+
   render () {
     const { empty, className } = this.props
     const { open } = this.state
@@ -246,9 +202,7 @@ export default class AddBtn extends Component {
         <PlusOutlined
           title={e('openNewTerm')}
           className={cls}
-          onClick={this.handleTabAdd}
-          onMouseEnter={this.handleMouseEnter}
-          onMouseLeave={this.handleMouseLeave}
+          onClick={this.handleAddBtnClick}
           ref={this.addBtnRef}
         />
         {open && createPortal(this.renderMenus(), this.getPortalContainer())}

package/client/components/tabs/add-btn.styl

@@ -3,8 +3,9 @@
   position fixed
   z-index 1000
   background var(--main)
-  border 1px solid var(--main-darker)
+  border 1px solid var(--main-lighter)
   border-radius 6px
+  box-shadow 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--main-darker)
   min-width 160px
   max-width 300px
   overflow-y auto

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

@@ -84,6 +84,13 @@ export default function SimpleEditor (props) {
       e.preventDefault()
     }
     findMatches()
+    goToNextMatch()
+  }
+
+  function handleChange (e) {
+    setSearchKeyword(e.target.value)
+    findMatches()
+    goToNextMatch()
   }
 
   // Navigate to next match
@@ -144,7 +151,7 @@ export default function SimpleEditor (props) {
       <Flex className='mg1b' justify='space-between'>
         <Input.Search
           value={searchKeyword}
-          onChange={e => setSearchKeyword(e.target.value)}
+          onChange={handleChange}
           placeholder='Search in text...'
           allowClear
           enterButton={<SearchOutlined />}

package/client/store/common.js

@@ -326,6 +326,10 @@ export default Store => {
     return aiConfigsArr.slice(0, -1).some(k => !window.store.config[k])
   }
 
+  Store.prototype.clearHistory = function () {
+    window.store.history = []
+  }
+
   Store.prototype.addCmdHistory = action(function (cmd) {
     const { terminalCommandHistory } = window.store
     terminalCommandHistory.add(cmd)

package/client/store/sidebar.js

@@ -26,10 +26,6 @@ export default Store => {
     store.pinned = current
   }
 
-  Store.prototype.onClickBookmark = function () {
-    window.store.onNewSsh()
-  }
-
   Store.prototype.handleSidebarPanelTab = function (tab) {
     window.store.sidebarPanelTab = tab
   }

package/client/store/store.js

@@ -106,23 +106,18 @@ class Store {
   get inActiveTerminal () {
     const { store } = window
     if (store.showModal) {
-      console.log('inActiveTerminal because showModal')
       return false
     }
     const { currentTab } = store
     if (!currentTab) {
-      console.log('inActiveTerminal because no currentTab')
       return false
     }
     const {
       type
     } = currentTab
     if (type === 'web' || type === 'rdp' || type === 'vnc') {
-      console.log('inActiveTerminal because type', type)
       return false
     }
-    console.log('currentTab.sshSftpSplitView', currentTab.sshSftpSplitView)
-    console.log('currentTab.pane', currentTab.pane)
     return currentTab.sshSftpSplitView ||
       currentTab.pane === paneMap.terminal
   }

package/package.json

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