@electerm/electerm-react 5.5.15 → 5.5.35

package/client/components/side-panel-r/side-panel-r.jsx

@@ -1,10 +1,12 @@
-import React, { memo, useRef } from 'react'
+import React, { memo, useRef, useEffect } from 'react'
 import DragHandle from '../common/drag-handle'
 import './right-side-panel.styl'
 import {
   CloseCircleOutlined,
   PushpinOutlined,
-  BarChartOutlined
+  BarChartOutlined,
+  HistoryOutlined,
+  ThunderboltOutlined
 } from '@ant-design/icons'
 import {
   Typography,
@@ -19,17 +21,52 @@ export default memo(function RightSidePanel (
     rightPanelWidth,
     children,
     title,
-    rightPanelTab
+    rightPanelTab,
+    isMobile
   }
 ) {
   const panelRef = useRef(null)
 
+  // Esc closes the panel, but never at the terminal's expense: xterm forwards
+  // Esc to the remote shell, so stealing it there would break vim, less, etc.
+  // The guard checks the event target rather than focus state, because the
+  // keydown bubbles up from xterm's textarea inside .term-wrap — the same
+  // selector shortcut-bar-entry.jsx uses to detect terminal focus. A modal owns
+  // Esc while one is open. This hook has to stay above the early return below
+  // so the hook order never changes.
+  useEffect(() => {
+    if (!rightPanelVisible) {
+      return
+    }
+    function onKeyDown (event) {
+      if (event.key !== 'Escape' || window.store.showModal) {
+        return
+      }
+      const { target } = event
+      if (target && typeof target.closest === 'function' && target.closest('.term-wrap')) {
+        return
+      }
+      window.store.rightPanelVisible = false
+    }
+    document.addEventListener('keydown', onKeyDown)
+    return () => document.removeEventListener('keydown', onKeyDown)
+  }, [rightPanelVisible])
+
   if (!rightPanelVisible) {
     return null
   }
-  const tag = rightPanelTab === 'ai'
-    ? <Tag className='mg1r'>AI</Tag>
-    : <BarChartOutlined className='mg1r' />
+  // Mobile has no pin control (it is not rendered below), so a pin persisted
+  // from a desktop session must not turn the panel into a dock here — that
+  // would make it full height over the footer for no reachable reason.
+  const pinned = rightPanelPinned && !isMobile
+  // one glyph per tab, so the panel says what it is showing; the info tab is
+  // the fallback, since a stale or unknown tab falls back to it everywhere else
+  const tagMap = {
+    ai: <Tag className='mg1r'>AI</Tag>,
+    cmdHistory: <HistoryOutlined className='mg1r' />,
+    quickCommands: <ThunderboltOutlined className='mg1r' />
+  }
+  const tag = tagMap[rightPanelTab] || <BarChartOutlined className='mg1r' />
 
   function onDragEnd (nw) {
     window.store.setRightSidePanelWidth(nw)
@@ -46,11 +83,11 @@ export default memo(function RightSidePanel (
   }
 
   function togglePin () {
-    window.store.rightPanelPinned = !window.store.rightPanelPinned
+    window.store.setRightPanelPinned(!window.store.rightPanelPinned)
   }
 
   const panelProps = {
-    className: 'right-side-panel animate-fast' + (rightPanelPinned ? ' right-side-panel-pinned' : ''),
+    className: 'right-side-panel animate-fast' + (pinned ? ' right-side-panel-pinned' : ''),
     ref: panelRef,
     style: {
       width: `${rightPanelWidth}px`
@@ -58,7 +95,7 @@ export default memo(function RightSidePanel (
   }
 
   const pinProps = {
-    className: 'right-side-panel-pin right-side-panel-controls' + (rightPanelPinned ? ' pinned' : ''),
+    className: 'right-side-panel-pin right-side-panel-controls' + (pinned ? ' pinned' : ''),
     onClick: togglePin
   }
   const dragProps = {
@@ -73,7 +110,11 @@ export default memo(function RightSidePanel (
     <div
       {...panelProps}
     >
-      <DragHandle {...dragProps} />
+      {/* Mobile panels are full-screen drawers (see store.rightPanelWidth):
+          their width is the viewport and is not adjustable, so the resize
+          handle is not rendered — it would otherwise sit on the screen's left
+          edge and drag a size the panel never uses. */}
+      {!isMobile && <DragHandle {...dragProps} />}
       <Flex
         className='right-panel-title pd2'
         justify='space-between'
@@ -83,9 +124,11 @@ export default memo(function RightSidePanel (
           {tag} {title}
         </Typography.Text>
         <Flex>
-          <PushpinOutlined
-            {...pinProps}
-          />
+          {!isMobile && (
+            <PushpinOutlined
+              {...pinProps}
+            />
+          )}
           <CloseCircleOutlined
             className='right-side-panel-close right-side-panel-controls mg1l'
             onClick={onClose}

package/client/components/sidebar/bookmark-select.jsx

@@ -2,11 +2,13 @@
  * bookmark select
  */
 
+import { useState } from 'react'
 import { auto } from 'manate/react'
 import TreeList from '../tree-list/tree-list'
 
 export default auto(function BookmarkSelect (props) {
   const { store, from, autoFocus } = props
+  const [activeItemId, setActiveItemId] = useState('')
   const {
     listStyle,
     openedSideBar,
@@ -19,16 +21,28 @@ export default auto(function BookmarkSelect (props) {
   if (from === 'sidebar' && openedSideBar !== 'bookmarks') {
     return null
   }
-  const onClickItem = (item) => {
-    if (!store.pinned) {
+  const openBookmark = (item) => {
+    // A pinned (docked) panel stays open; anything else — including mobile,
+    // where pinning is not a reachable mode — dismisses on selection.
+    if (!(store.pinned && !store.isMobile)) {
       store.setOpenedSideBar('')
     }
     store.onSelectBookmark(item.id)
   }
+  // doubleClickToOpenBookmark: a single click only marks the row, the session
+  // opens on a double click. Touch devices have no double click, so the setting
+  // is ignored there. This is the sidebar list only — the settings bookmarks tab
+  // keeps selecting for editing on a single click.
+  const openOnDoubleClick = !!store.config.doubleClickToOpenBookmark &&
+    !store.isTouchDevice
   const base = {
     bookmarks: bookmarks || [],
     type: 'bookmarks',
-    onClickItem,
+    activeItemId: openOnDoubleClick ? activeItemId : undefined,
+    onClickItem: openOnDoubleClick
+      ? item => setActiveItemId(item.id)
+      : openBookmark,
+    onDoubleClickItem: openOnDoubleClick ? openBookmark : undefined,
     listStyle,
     staticList: true
   }

package/client/components/sidebar/history-item.jsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useEffect, useRef } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+import classnames from 'classnames'
 import createTitle, { createTitleWithTag } from '../../common/create-title'
 import { DeleteOutlined, BookFilled } from '@ant-design/icons'
 import { refsStatic } from '../common/ref'
@@ -6,18 +7,32 @@ import { refsStatic } from '../common/ref'
 export default function HistoryItem (props) {
   const { store } = window
   const {
-    item
+    item,
+    openOnDoubleClick
   } = props
+  const [active, setActive] = useState(false)
   const timeoutRef = useRef(null)
 
   const handleClick = useCallback(() => {
+    // with doubleClickToOpenBookmark on, a click only marks the row — the
+    // session opens on the double click below
+    if (openOnDoubleClick) {
+      setActive(true)
+      return
+    }
     if (timeoutRef.current) {
       clearTimeout(timeoutRef.current)
     }
     timeoutRef.current = setTimeout(() => {
       store.onSelectHistory(item.tab)
     }, 10)
-  }, [item.tab])
+  }, [item.tab, openOnDoubleClick])
+
+  const handleDoubleClick = useCallback(() => {
+    if (openOnDoubleClick) {
+      store.onSelectHistory(item.tab)
+    }
+  }, [item.tab, openOnDoubleClick])
 
   useEffect(() => {
     return () => {
@@ -47,9 +62,10 @@ export default function HistoryItem (props) {
   const tt = createTitle(item.tab)
   return (
     <div
-      className='item-list-unit'
+      className={classnames('item-list-unit', { active })}
       title={tt}
       onClick={handleClick}
+      onDoubleClick={handleDoubleClick}
     >
       <div className='elli pd1y pd2x'>
         {title}

package/client/components/sidebar/history.jsx

@@ -25,6 +25,12 @@ export default auto(function HistoryPanel (props) {
   const {
     history
   } = store
+  // doubleClickToOpenBookmark: a single click only marks the row, the session
+  // opens on a double click. Touch devices have no double click, so the setting
+  // is ignored there. Read here rather than in HistoryItem because this
+  // component is `auto` — it re-renders when the input modality flips.
+  const openOnDoubleClick = !!store.config.doubleClickToOpenBookmark &&
+    !store.isTouchDevice
   let arr = store.config.disableConnectionHistory ? [] : history
   if (sortByFrequency) {
     arr = [...arr].sort((a, b) => { return b.count - a.count })
@@ -75,6 +81,7 @@ export default auto(function HistoryPanel (props) {
               <HistoryItem
                 key={item.id}
                 item={item}
+                openOnDoubleClick={openOnDoubleClick}
               />
             )
           })

package/client/components/sidebar/index.jsx

@@ -43,17 +43,24 @@ export default function Sidebar (props) {
     openWidgetsModal,
     zoom,
     leftSideBarIcons,
-    widgetInstancesLength
+    widgetInstancesLength,
+    isMobile
   } = props
 
   const { store } = window
 
+  // pinned is desktop-only, like the right panel's: on mobile the panel spans
+  // the viewport and there is no pin control to unpin it, so a pin persisted
+  // from a desktop session must not turn into a mode the user cannot leave.
+  const pinnedActive = pinned && !isMobile
+
   const handleClickOutside = (event) => {
     const { store } = window
     // Nothing to dismiss when the panel is closed or pinned; also ignore
     // clicks while typing in an input so the panel is not yanked away
-    // mid-interaction.
-    if (!store.openedSideBar || store.pinned || hasActiveInput()) {
+    // mid-interaction. Read the pin live rather than from the render scope:
+    // this listener is attached once, so a captured value would go stale.
+    if (!store.openedSideBar || (store.pinned && !store.isMobile) || hasActiveInput()) {
       return
     }
     const target = event.target
@@ -221,10 +228,12 @@ export default function Sidebar (props) {
         setLeftSidePanelWidth={setLeftSidePanelWidth}
         leftSidePanelWidth={leftSidePanelWidth}
         leftSideBarWidth={leftSideBarWidth}
+        isMobile={isMobile}
       >
         <SideBarPanel
-          pinned={pinned}
+          pinned={pinnedActive}
           sidebarPanelTab={sidebarPanelTab}
+          isMobile={isMobile}
         />
       </SidePanel>
     </div>

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

@@ -26,15 +26,20 @@ export default function SidePanel (props) {
     onDragMove,
     left: true
   }
+  // Mobile panels are full-screen drawers: the width is the viewport and is not
+  // adjustable, so the resize handle is not rendered at all — a handle there
+  // would sit on the screen edge and drag a size the panel does not use (see
+  // store.leftSidePanelWidth, which ignores the stored width on mobile).
+  const dragHandle = props.isMobile
+    ? null
+    : <DragHandle {...dragProps} />
   return (
     <div
       {...props.sideProps}
       ref={panelRef}
       draggable={false}
     >
-      <DragHandle
-        {...dragProps}
-      />
+      {dragHandle}
       {props.children}
     </div>
   )

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

@@ -20,7 +20,7 @@ import {
 const e = window.translate
 
 export default memo(function SidebarPanel (props) {
-  const { sidebarPanelTab, pinned } = props
+  const { sidebarPanelTab, pinned, isMobile } = props
   const { store } = window
   const [openSelectModal, setOpenSelectModal] = useState(false)
   const prps = {
@@ -81,6 +81,22 @@ export default memo(function SidebarPanel (props) {
       </Tooltip>
     ]
   }
+  // No pin control on mobile: the panel spans the viewport there, so there is
+  // nothing to dock it beside, and the control row is tight enough that the
+  // pin would crowd the icons it shares it with.
+  function renderPinIcon () {
+    if (isMobile) {
+      return null
+    }
+    return (
+      <Tooltip title={e('pin')}>
+        <PushpinOutlined
+          {...prps1}
+          onClick={store.handlePin}
+        />
+      </Tooltip>
+    )
+  }
   return (
     <div
       className='sidebar-panel bookmarks-panel animate-fast'
@@ -100,12 +116,9 @@ export default memo(function SidebarPanel (props) {
           {
             renderExpandIcons()
           }
-          <Tooltip title={e('pin')}>
-            <PushpinOutlined
-              {...prps1}
-              onClick={store.handlePin}
-            />
-          </Tooltip>
+          {
+            renderPinIcon()
+          }
           <CloseOutlined
             {...prps}
             onClick={store.handleCloseSidebar}

package/client/components/terminal/shortcut-bar.styl

@@ -81,6 +81,20 @@
     bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
   .remote-monitor-bar
     bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px) + 36px)
+  // the right panel stacks on the footer exactly like the monitor bar, so it
+  // needs the same lift. Pinned is excluded: a pinned panel is a full-height
+  // dock and owns bottom 0. Mobile is excluded as well: there the panel is a
+  // full-screen drawer that covers the footer on purpose (mobile.styl).
+  &:not(.is-mobile)
+    .right-side-panel:not(.right-side-panel-pinned)
+      bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px) + 36px)
+  // A pinned panel is still a dock, but it yields to the shortcut bar rather
+  // than the other way round: the bar is z-index 400 and spans the full
+  // viewport width by design (it ignores the left sidebar too), so it would
+  // otherwise paint over the dock's bottom edge. The dock stops above the bar
+  // only — the footer sits beside the dock, not below it.
+  .right-side-panel.right-side-panel-pinned
+    bottom calc(var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
   .qm-wrap-tooltip
     bottom calc(var(--footer-stack-height, 36px) + var(--shortcut-bar-h, 44px) + var(--shortcut-bar-kb-offset, 0px))
 

package/client/components/terminal/unix-timestamp-tooltip.jsx

@@ -1,11 +1,14 @@
 /**
  * Global tooltip that detects Unix timestamps in terminal selections
  * and displays their human-readable date/time near the cursor.
+ * Clicking the tooltip (or its copy icon) copies the formatted string.
  * Registered via refsStatic as 'unix-timestamp-tooltip'.
  */
 
 import { Component } from 'react'
+import { CopyOutlined } from '@ant-design/icons'
 import { refsStatic } from '../common/ref'
+import { copy } from '../../common/clipboard'
 
 export default class UnixTimestampTooltip extends Component {
   state = {
@@ -56,6 +59,24 @@ export default class UnixTimestampTooltip extends Component {
     }
   }
 
+  handleHide = () => {
+    this.setState({ visible: false })
+  }
+
+  /**
+   * Copy on mousedown instead of click: pressing the tooltip collapses the
+   * document selection, and the terminal drops its (DOM backed) selection on
+   * that change, which would unmount this tooltip before a click could land.
+   * preventDefault also keeps the terminal selection and focus untouched.
+   * The whole tooltip is the hit area, the icon is just the affordance.
+   */
+  handleCopy = (e) => {
+    e.preventDefault()
+    e.stopPropagation()
+    copy(this.state.text)
+    this.handleHide()
+  }
+
   render () {
     const { visible, x, y, text } = this.state
     if (!visible) {
@@ -63,6 +84,10 @@ export default class UnixTimestampTooltip extends Component {
     }
     return (
       <div
+        className='unix-timestamp-tooltip pointer'
+        title={window.translate('copy')}
+        onMouseDown={this.handleCopy}
+        onMouseLeave={this.handleHide}
         style={{
           position: 'fixed',
           left: x,
@@ -73,12 +98,13 @@ export default class UnixTimestampTooltip extends Component {
           borderRadius: 4,
           fontSize: 12,
           whiteSpace: 'nowrap',
-          pointerEvents: 'none',
           transform: 'translateX(-50%)',
+          userSelect: 'none',
           zIndex: 9999
         }}
       >
         {text}
+        <CopyOutlined style={{ marginLeft: 6 }} />
       </div>
     )
   }

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

@@ -2,6 +2,9 @@
   color var(--text-dark)
   &:hover
     color var(--text)
+  // panel open: stay lit (after :hover so the "on" state survives hovering)
+  &.active
+    color var(--success)
 .terminal-info-section,
 .right-side-panel-content > .remote-monitor-details
   padding 10px 0

package/client/components/theme/terminal-theme-list.styl

@@ -1,3 +1,6 @@
 
 .theme-item.current
   border-left 3px solid var(--success)
+
+.list-item-apply-previewing
+  color var(--success)

package/client/components/theme/theme-ai-editor.jsx

@@ -190,7 +190,7 @@ export default function ThemeAiEditor (props) {
   const textAreaProps = {
     value: description,
     onChange: ev => setDescription(ev.target.value),
-    placeholder: e('createThemeByAI'),
+    placeholder: e('description'),
     autoSize: { minRows: 4, maxRows: 8 },
     disabled: loading || disabled
   }
@@ -223,7 +223,7 @@ export default function ThemeAiEditor (props) {
       <div className='pd1t'>
         <Space>
           <Button {...generateBtnProps}>
-            {e('generate')}
+            {e('submit')}
           </Button>
           <HelpIcon link='https://github.com/electerm/electerm/wiki/Create-theme-by-AI' />
         </Space>

package/client/components/theme/theme-form.jsx

@@ -14,7 +14,7 @@ import {
   validThemeProps,
   requiredThemeProps
 } from '../../common/terminal-theme'
-import { defaultTheme, defaultThemeLight } from '../../common/theme-defaults'
+import { defaultThemeId, defaultThemeLightId } from '../../common/theme-defaults'
 import generate from '../../common/uid'
 import { isAIDisabled } from '../../common/ai-feature'
 import Link from '../common/external-link'
@@ -272,7 +272,7 @@ export default function ThemeForm (props) {
     themeName,
     themeText: convertThemeToText(props.formData)
   }
-  const isDefaultTheme = id === defaultTheme().id || id === defaultThemeLight().id
+  const isDefaultTheme = id === defaultThemeId || id === defaultThemeLightId
   const disabled = readonly || isDefaultTheme
   const pickerProps = {
     onChange: onPickerChange,

package/client/components/theme/theme-list-item.jsx

@@ -2,13 +2,13 @@
  * theme list render
  */
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   CheckCircleOutlined,
+  CloseOutlined,
   PlusOutlined,
   SunOutlined,
-  MoonOutlined,
-  EyeOutlined
+  MoonOutlined
 } from '@ant-design/icons'
 import { Tag, Tooltip, Button, Space } from 'antd'
 import classnames from 'classnames'
@@ -30,46 +30,72 @@ export default function ThemeListItem (props) {
   const [tooltipVisible, setTooltipVisible] = useState(false)
   const [isPreviewing, setIsPreviewing] = useState(false)
 
-  function handleClickApply () {
-    setTooltipVisible(false)
-    setIsPreviewing(false)
-    delete window.originalTheme
+  function startPreview () {
+    // keep the very first original, hopping between themes must never
+    // overwrite it with a theme that is itself only a preview
+    if (!window.originalTheme) {
+      window.originalTheme = store.config.theme
+    }
     store.setTheme(item.id)
+    setIsPreviewing(true)
   }
 
-  function handleClickPreview () {
-    if (!isPreviewing) {
-      // Store current theme ID before changing
-      const currentTheme = window.store.config.theme
-      window.originalTheme = currentTheme
-      // Apply the preview theme
-      store.setTheme(item.id)
-      setIsPreviewing(true)
+  function cancelPreview () {
+    if (window.originalTheme) {
+      store.setTheme(window.originalTheme)
+      delete window.originalTheme
     }
+    setIsPreviewing(false)
   }
 
-  function handleTooltipVisibleChange (visible) {
-    setTooltipVisible(visible)
-    if (!visible && isPreviewing) {
-      // Restore original theme when tooltip closes during preview
+  useEffect(() => {
+    return () => {
+      // leaving the list mid preview (switching settings tab, filtering the
+      // list, ...) must not leave the user stuck on a theme never applied
       if (window.originalTheme) {
         store.setTheme(window.originalTheme)
         delete window.originalTheme
       }
-      setIsPreviewing(false)
+    }
+  }, [])
+
+  function handleClickApply () {
+    delete window.originalTheme
+    setIsPreviewing(false)
+    setTooltipVisible(false)
+    store.setTheme(item.id)
+  }
+
+  function handleClickCancel () {
+    cancelPreview()
+    setTooltipVisible(false)
+  }
+
+  function handleTooltipVisibleChange (visible) {
+    setTooltipVisible(visible)
+    // opening the popup is the preview itself; every other way of closing it
+    // (click elsewhere, esc, clicking the icon again) rolls the preview back
+    if (visible) {
+      startPreview()
+    } else {
+      cancelPreview()
     }
   }
 
+  function handleClickApplyIcon (e) {
+    // previewing must not also load the theme into the edit form
+    e.stopPropagation()
+  }
+
   function renderTooltipContent () {
     return (
       <Space.Compact>
         <Button
           size='small'
-          icon={<EyeOutlined />}
-          onClick={handleClickPreview}
-          type={isPreviewing ? 'primary' : 'default'}
+          icon={<CloseOutlined />}
+          onClick={handleClickCancel}
         >
-          {e('preview')}
+          {e('cancel')}
         </Button>
         <Button
           size='small'
@@ -96,7 +122,15 @@ export default function ThemeListItem (props) {
         placement='top'
       >
         <CheckCircleOutlined
-          className='pointer list-item-apply'
+          className={
+            classnames(
+              'pointer list-item-apply',
+              {
+                'list-item-apply-previewing': isPreviewing
+              }
+            )
+          }
+          onClick={handleClickApplyIcon}
         />
       </Tooltip>
     )