@electerm/electerm-react 3.15.100 → 3.15.110

package/client/components/common/notification.jsx

@@ -9,7 +9,36 @@ import './notification.styl'
 const notifications = []
 const NOTIFICATION_EVENT = 'notification-update'
 
+function getTextFromReactChildren (children) {
+  if (typeof children === 'string' || typeof children === 'number') {
+    return String(children)
+  }
+  if (React.isValidElement(children)) {
+    return getTextFromReactChildren(children.props.children)
+  }
+  if (Array.isArray(children)) {
+    return children.map(getTextFromReactChildren).join('\n')
+  }
+  return ''
+}
+
 function addNotification (notif) {
+  notif.descriptions = notif.description ? [notif.description] : []
+  if (notif.type === 'error') {
+    const messageText = getTextFromReactChildren(notif.message)
+    const existingIndex = notifications.findIndex(n =>
+      n.type === 'error' &&
+      getTextFromReactChildren(n.message) === messageText
+    )
+    if (existingIndex > -1) {
+      const existing = notifications[existingIndex]
+      existing.count = (existing.count || 1) + 1
+      existing.descriptions.push(notif.description)
+      window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
+      return
+    }
+    notif.count = 1
+  }
   notifications.push(notif)
   window.dispatchEvent(new CustomEvent(NOTIFICATION_EVENT))
 }
@@ -60,9 +89,10 @@ export function NotificationContainer () {
         <NotificationItem
           key={notif.key}
           message={notif.message || notif.type}
-          description={notif.description}
+          descriptions={notif.descriptions}
           type={notif.type}
           duration={notif.duration}
+          count={notif.count || 1}
           onClose={() => removeNotification(notif.key)}
         />
       ))}
@@ -70,20 +100,7 @@ export function NotificationContainer () {
   )
 }
 
-function getTextFromReactChildren (children) {
-  if (typeof children === 'string' || typeof children === 'number') {
-    return String(children)
-  }
-  if (React.isValidElement(children)) {
-    return getTextFromReactChildren(children.props.children)
-  }
-  if (Array.isArray(children)) {
-    return children.map(getTextFromReactChildren).join('\n')
-  }
-  return ''
-}
-
-function NotificationItem ({ message, description, type, onClose, duration = 18.5 }) {
+function NotificationItem ({ message, descriptions = [], type, onClose, duration = 18.5, count = 1 }) {
   const timeoutRef = useRef(null)
 
   useEffect(() => {
@@ -96,7 +113,7 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
         timeoutRef.current = null
       }
     }
-  }, [])
+  }, [count])
 
   const handleMouseEnter = () => {
     if (timeoutRef.current) {
@@ -118,6 +135,9 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
   }
 
   const className = classnames('notification', type)
+  const titleText = getTextFromReactChildren(message)
+  const title = count > 1 ? `(${count}) ${titleText}` : message
+  const validDescriptions = descriptions.filter(Boolean)
 
   return (
     <div
@@ -128,18 +148,20 @@ function NotificationItem ({ message, description, type, onClose, duration = 18.
       <div className='notification-content'>
         <div className='notification-message'>
           <div className='notification-icon'>{messageIcons[type]}</div>
-          <div className='notification-title' title={message}>{message}</div>
+          <div className='notification-title' title={titleText}>{title}</div>
           <CopyOutlined
             className='notification-copy-icon'
             onClick={(e) => handleCopy(message, e)}
           />
         </div>
-        {description && (
+        {validDescriptions.length > 0 && (
           <div className='notification-description'>
-            {description}
+            {validDescriptions.map((desc, i) => (
+              <div key={i}>{desc}</div>
+            ))}
             <CopyOutlined
               className='notification-copy-icon'
-              onClick={(e) => handleCopy(description, e)}
+              onClick={(e) => handleCopy(validDescriptions, e)}
             />
           </div>
         )}

package/client/components/common/placeholder.jsx

@@ -0,0 +1,5 @@
+export default function Placeholder () {
+  return (
+    <div id='placeholder' className='placeholder-wrap' />
+  )
+}

package/client/components/common/zoom-control.jsx

@@ -1,13 +1,17 @@
 import React from 'react'
 import InputNumberConfirm from './input-number-confirm'
 import {
-  Space
+  Space,
+  Tooltip
 } from 'antd'
 import {
   MinusCircleOutlined,
-  PlusCircleOutlined
+  PlusCircleOutlined,
+  AimOutlined
 } from '@ant-design/icons'
 
+const e = window.translate
+
 export default function ZoomControl (props) {
   const {
     value,
@@ -33,6 +37,23 @@ export default function ZoomControl (props) {
     onChange(next)
   }
 
+  const handleReset = () => {
+    onChange(1)
+  }
+
+  const isDefault = Math.round(value * 100) === 100
+
+  const resetIcon = isDefault
+    ? null
+    : (
+      <Tooltip title={e('resetzoom')}>
+        <AimOutlined
+          onClick={handleReset}
+          className='pointer font16 mg1r'
+        />
+      </Tooltip>
+      )
+
   return (
     <InputNumberConfirm
       value={Math.round(value * 100)}
@@ -43,6 +64,7 @@ export default function ZoomControl (props) {
       suffix='%'
       addonBefore={
         <Space.Compact>
+          {resetIcon}
           <PlusCircleOutlined
             onClick={handleAdd}
             className='mg1r pointer font16'

package/client/components/footer/footer.styl

@@ -31,6 +31,13 @@
 .terminal-footer-info
   margin-right 10px
   line-height 39px
+.terminal-footer-history
+  display flex
+  align-items center
+.terminal-footer-qm
+  // Q is now an icon-only button (5px internal padding); reduce left
+  // margin so the history icon stays roughly equidistant from AI and Q
+  margin-left 3px
 .batch-input-outer
   .bi-full
     display none

package/client/components/main/main.jsx

@@ -169,6 +169,7 @@ export default auto(function Index (props) {
       'sidebarPanelTab',
       'openWidgetsModal'
     ]),
+    zoom: config.zoom,
     fileTransfers: copiedTransfer,
     transferHistory: copiedHistory,
     upgradeInfo,

package/client/components/setting-panel/col.jsx

@@ -2,6 +2,8 @@
  * two column layout, left column fixed with, right column auto width
  */
 
+import Placeholder from '../common/placeholder'
+
 export default function SettingCol (props) {
   return (
     <div className='setting-col'>
@@ -11,7 +13,12 @@ export default function SettingCol (props) {
       <div
         className='setting-row setting-row-right'
       >
-        {props.children[1]}
+        <div className='setting-col-content'>
+          {props.children[1]}
+        </div>
+        <div className='setting-col-placeholder'>
+          <Placeholder />
+        </div>
       </div>
     </div>
   )

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

@@ -38,6 +38,20 @@
   bottom 0
   top 129px
   padding 20px
+  display flex
+  flex-direction column
+  overflow hidden
+  min-height 400px
+.setting-col-content
+  flex 1
+  overflow-y auto
+  min-height 0
+.setting-col-placeholder
+  flex-shrink 0
+  display flex
+  justify-content flex-end
+  .carbonads-wrap
+    margin 8px 0 0
 .setting-tabs-bookmarks
   .setting-row-left
     width 440px
@@ -75,6 +89,10 @@
     bottom auto
     top auto
     padding 10px
+    position static
+    overflow visible
+  .setting-col-content
+    overflow visible
   .setting-tabs-bookmarks
     .setting-row-left
       width auto

package/client/components/sidebar/index.jsx

@@ -7,7 +7,8 @@ import {
   SettingOutlined,
   UpCircleOutlined,
   AppstoreOutlined,
-  ThunderboltOutlined
+  ThunderboltOutlined,
+  AimOutlined
 } from '@ant-design/icons'
 import { Tooltip, Popover } from 'antd'
 import SideBarPanel from './sidebar-panel'
@@ -42,7 +43,8 @@ export default function Sidebar (props) {
     showModal,
     showInfoModal,
     sidebarPanelTab,
-    openWidgetsModal
+    openWidgetsModal,
+    zoom
   } = props
 
   const { store } = window
@@ -85,6 +87,10 @@ export default function Sidebar (props) {
     window.store.upgradeInfo.showUpgradeModal = true
   }
 
+  const handleZoomReset = () => {
+    store.onZoomReset()
+  }
+
   const {
     onNewSsh,
     openSetting,
@@ -203,6 +209,20 @@ export default function Sidebar (props) {
             onClick={openAbout}
           />
         </SideIcon>
+        {
+          Math.round((zoom ?? 1) * 100) !== 100
+            ? (
+              <SideIcon
+                title={e('resetzoom')}
+              >
+                <AimOutlined
+                  className='iblock font16 control-icon zoom-reset-icon'
+                  onClick={handleZoomReset}
+                />
+              </SideIcon>
+              )
+            : null
+        }
         {
           !checkingRemoteVersion && !showUpgradeModal && shouldUpgrade
             ? (

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

@@ -14,6 +14,7 @@ import { Tabs, Button } from 'antd'
 import Modal from '../common/modal'
 import Link from '../common/external-link'
 import LogoElem from '../common/logo-elem'
+import Placeholder from '../common/placeholder'
 import RunningTime from './app-running-time'
 import { auto } from 'manate/react'
 import { useState } from 'react'
@@ -230,6 +231,7 @@ export default auto(function InfoModal (props) {
             <InfoCircleOutlined /> <b className='mg1r'>{window.store.installSrc}</b>
           </p>
           {renderCheckUpdate()}
+          <Placeholder />
         </>
       )
     },

package/client/components/sidebar/sidebar.styl

@@ -118,6 +118,10 @@
     color var(--text-dark)
     &:hover
       color var(--text-light)
+  .zoom-reset-icon
+    color var(--primary)
+    &:hover
+      color var(--text-light)
 
 .btns .upgrade-icon
   color var(--success)

package/client/components/terminal/drop-file-modal.jsx

@@ -1,11 +1,17 @@
-import { Component } from 'react'
 import Modal from '../common/modal'
 
 const e = window.translate
 
-export class DropFileModal extends Component {
-  renderSerialFooter () {
-    const { onSelect } = this.props
+export function DropFileModal (props) {
+  const {
+    visible,
+    files,
+    isSerial,
+    onSelect,
+    onCancel
+  } = props
+
+  const renderSerialFooter = () => {
     return (
       <>
         <button
@@ -26,8 +32,7 @@ export class DropFileModal extends Component {
     )
   }
 
-  renderSshFooter () {
-    const { onSelect } = this.props
+  const renderSshFooter = () => {
     return (
       <>
         <button
@@ -55,34 +60,35 @@ export class DropFileModal extends Component {
     )
   }
 
-  render () {
-    const {
-      visible,
-      files,
-      isSerial,
-      onCancel
-    } = this.props
-
-    if (!visible) {
-      return null
-    }
-
+  const renderList = () => {
     return (
-      <Modal
-        title='?'
-        open={visible}
-        onCancel={onCancel}
-        footer={
-          <div className='custom-modal-footer-buttons'>
-            {isSerial ? this.renderSerialFooter() : this.renderSshFooter()}
-          </div>
-        }
-        width={400}
-      >
-        <p>{files?.map(f => f.path).join(', ')}</p>
-      </Modal>
+      <ul>
+        {files?.map(f => (
+          <li key={f.path}>{f.path}</li>
+        ))}
+      </ul>
     )
   }
+
+  if (!visible) {
+    return null
+  }
+
+  return (
+    <Modal
+      title='?'
+      open={visible}
+      onCancel={onCancel}
+      footer={
+        <div className='custom-modal-footer-buttons'>
+          {isSerial ? renderSerialFooter() : renderSshFooter()}
+        </div>
+      }
+      width={400}
+    >
+      {renderList()}
+    </Modal>
+  )
 }
 
 export default DropFileModal

package/client/components/terminal/terminal.jsx

@@ -4,7 +4,8 @@ import clone from '../../common/to-simple-obj.js'
 import resolve from '../../common/resolve.js'
 import {
   Spin,
-  Dropdown
+  Dropdown,
+  Button
 } from 'antd'
 import message from '../common/message'
 import { notification } from '../common/notification'
@@ -40,6 +41,9 @@ import { getFolderFromFilePath } from '../sftp/file-read.js'
 import { CommandTrackerAddon } from './command-tracker-addon.js'
 import { Osc52Addon } from './osc52-addon.js'
 import AIIcon from '../icons/ai-icon.jsx'
+import {
+  AimOutlined
+} from '@ant-design/icons'
 import {
   getShellIntegrationCommand,
   detectRemoteShell,
@@ -90,7 +94,8 @@ class Term extends Component {
       reconnectCountdown: null,
       terminalError: null,
       dropFileModalVisible: false,
-      droppedFiles: []
+      droppedFiles: [],
+      fontSizeChanged: false
     }
     this.id = `term-${this.props.tab.id}`
     refs.add(this.id, this)
@@ -230,6 +235,10 @@ class Term extends Component {
         if (['fontFamily', 'fontSize'].includes(name)) {
           this.onResize()
         }
+        if (name === 'fontSize') {
+          this.originalFontSize = curr
+          this.setState({ fontSizeChanged: false })
+        }
       }
     }
 
@@ -291,6 +300,23 @@ class Term extends Component {
     }
     term.options.fontSize = term.options.fontSize + v
     window.store.triggerResize()
+    if (this.originalFontSize == null) {
+      this.originalFontSize = term.options.fontSize - v
+    }
+    this.setState({
+      fontSizeChanged: term.options.fontSize !== this.originalFontSize
+    })
+  }
+
+  handleResetFontSize = () => {
+    const { term } = this
+    if (!term || this.originalFontSize == null) {
+      return
+    }
+    term.options.fontSize = this.originalFontSize
+    window.store.triggerResize()
+    this.setState({ fontSizeChanged: false })
+    term.focus()
   }
 
   isActiveTerminal = () => {
@@ -453,19 +479,13 @@ class Term extends Component {
         return
       }
 
-      const hasMultiFiles = filePaths.length > 1
-
       if (isSshTerminal) {
         const behavior = this.props.config.dragDropBehavior || 'ask'
-        // multi-file drops always paste paths, skip the action modal
-        if (behavior === 'ask' && !hasMultiFiles) {
+        if (behavior === 'ask') {
           this.setState({
             dropFileModalVisible: true,
             droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
           })
-        } else if (hasMultiFiles) {
-          const filesAll = filePaths.map(path => `"${path}"`).join(' ')
-          this.attachAddon._sendData(filesAll)
         } else {
           this.handleDropFileAction(behavior, filePaths.map(path => ({ path, isRemote: false })))
         }
@@ -473,16 +493,10 @@ class Term extends Component {
       }
 
       if (isSerialTerminal) {
-        // multi-file drops always paste paths, skip the action modal
-        if (hasMultiFiles) {
-          const filesAll = filePaths.map(path => `"${path}"`).join(' ')
-          this.attachAddon._sendData(filesAll)
-        } else {
-          this.setState({
-            dropFileModalVisible: true,
-            droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
-          })
-        }
+        this.setState({
+          dropFileModalVisible: true,
+          droppedFiles: filePaths.map(path => ({ path, isRemote: false }))
+        })
         return
       }
 
@@ -1720,6 +1734,23 @@ class Term extends Component {
     Object.assign(window.store.terminalInfoProps, infoProps)
   }
 
+  renderResetFontSizeButton = () => {
+    if (!this.state.fontSizeChanged) {
+      return null
+    }
+    const txt = `${e('reset')} ${e('fontSize')}`
+    return (
+      <Button
+        className='terminal-fontsize-reset'
+        onClick={this.handleResetFontSize}
+        type='default'
+        size='small'
+        title={txt}
+        icon={<AimOutlined />}
+      />
+    )
+  }
+
   // getPwd = async () => {
   //   const { sessionId, config } = this.props
   //   const { pid } = this.state
@@ -1818,6 +1849,7 @@ class Term extends Component {
           <ReconnectOverlay
             countdown={this.state.reconnectCountdown}
           />
+          {this.renderResetFontSizeButton()}
           <DropFileModal
             visible={this.state.dropFileModalVisible}
             files={this.state.droppedFiles}

package/client/components/terminal/terminal.styl

@@ -171,3 +171,8 @@
   z-index 100
   background var(--main)
   max-width calc(100% - 24px)
+
+.terminal-fontsize-reset
+  position absolute
+  left 8px
+  bottom 4px

package/package.json

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