@electerm/electerm-react 5.5.25 → 5.5.56

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

@@ -2,6 +2,58 @@
   max-height calc(100vh - 100px)
   overflow-y scroll
   padding 20px 0 10px 0
+
+// Docked in the right side panel the panel *is* the container, so the quick
+// commands fill it instead of sizing themselves like the footer box. The parent
+// (.right-side-panel-content) is an absolutely positioned box with top and
+// bottom set, so 100% resolves to a real height and the list scrolls inside it
+// rather than scrolling the panel.
+.qm-panel-in-right-panel
+  display flex
+  flex-direction column
+  width 100%
+  height 100%
+  > .pd2
+    display flex
+    flex-direction column
+    height 100%
+    min-height 0
+    width 100%
+  .qm-flex
+    flex-shrink 0
+    // the footer box is as wide as the footer; the right panel is not, and the
+    // search + label + sort + actions row does not fit in one line there
+    flex-wrap wrap
+  // ...so give the search a line of its own and let it fill it, instead of
+  // sitting at its footer width with a gap beside it. `flex-basis: 100%` is what
+  // forces the wrap; the controls then share the line below.
+  .qm-search-input
+    flex 1 1 100%
+    max-width none
+  .qm-list-wrap
+    flex 1
+    min-height 0
+    max-height none
+    overflow-y auto
+
+.qm-panel-actions
+  display flex
+  align-items center
+  gap 6px
+
+.qm-move-icon
+  font-size 14px
+  padding 4px
+  cursor pointer
+  &:hover
+    color var(--primary)
+
+// The footer Q stays lit while the panel is docked in the right panel, same
+// contract as the info, AI and cmd history icons
+.quick-command-trigger
+  &.active
+    color var(--success)
+
 .qm-wrap-tooltip
   background var(--main)
   position absolute
@@ -80,6 +132,12 @@
     width 100%
   .qm-label-select
     width 100%
+  // The docked panel's search claims a whole row with `flex-basis: 100%`, which
+  // is a width only while `.qm-flex` is a row. Here it is a column, so the same
+  // basis would be 100% of the *height* and would push the controls off the
+  // panel. Same specificity as the rule above it, declared later, so it wins.
+  .qm-panel-in-right-panel .qm-search-input
+    flex none
 
 // On mobile, stack the quick-command row (name / delay / command / remove)
 // vertically instead of side by side — the horizontal Space.Compact layout

package/client/components/quick-commands/quick-commands-box.jsx

@@ -1,17 +1,29 @@
 /**
- * quick commands footer selection wrap
+ * quick commands panel
+ *
+ * The panel has two homes: the floating footer box (default) and the right side
+ * panel. Which one it is in is a stored preference
+ * (store.quickCommandsInRightPanel), so the same component renders both —
+ * `inline` drops the floating box and lets the right panel's own container wrap
+ * the panel body.
  */
 
 import { useState } from 'react'
-import { quickCommandLabelsLsKey, pinnedQuickCommandBarKey } from '../../common/constants'
-import { sortBy } from 'lodash-es'
+import { auto } from 'manate/react'
+import {
+  quickCommandLabelsLsKey,
+  pinnedQuickCommandBarKey
+} from '../../common/constants'
+import { sortBy, pick } from 'lodash-es'
 import { Button, Input, Select, Space, Flex } from 'antd'
 import * as ls from '../../common/safe-local-storage'
 import CmdItem from './quick-command-item'
 import {
   EditOutlined,
   CloseCircleOutlined,
-  PushpinOutlined
+  PushpinOutlined,
+  VerticalLeftOutlined,
+  VerticalAlignBottomOutlined
 } from '@ant-design/icons'
 import classNames from 'classnames'
 import onDropFunc from './on-drop'
@@ -22,9 +34,42 @@ const e = window.translate
 const addQuickCommands = 'addQuickCommands'
 const { Option } = Select
 
-export default function QuickCommandsFooterBox (props) {
+export default auto(function QuickCommandsFooterBox (props) {
+  const { store, inline } = props
   const [keyword, setKeyword] = useState('')
   const [label, setLabel] = useState(ls.getItem(quickCommandLabelsLsKey, ''))
+  // read through the store so the panel re-renders on its own: it is rendered
+  // in two different places (footer box and right panel), and only one of them
+  // gets props from the layout
+  const {
+    openQuickCommandBar,
+    pinnedQuickCommandBar,
+    qmSortByFrequency,
+    quickCommandsInRightPanel,
+    inActiveTerminal,
+    leftSidePanelWidth,
+    leftSideBarWidth,
+    openedSideBar,
+    rightPanelVisible,
+    rightPanelPinned,
+    rightPanelWidth,
+    isMobile
+  } = pick(store, [
+    'openQuickCommandBar',
+    'pinnedQuickCommandBar',
+    'qmSortByFrequency',
+    'quickCommandsInRightPanel',
+    'inActiveTerminal',
+    'leftSidePanelWidth',
+    'leftSideBarWidth',
+    'openedSideBar',
+    'rightPanelVisible',
+    'rightPanelPinned',
+    'rightPanelWidth',
+    'isMobile'
+  ])
+  const all = store.currentQuickCommands
+  const quickCommandTags = store.quickCommandTags
 
   function handleTogglePinned () {
     const current = !window.store.pinnedQuickCommandBar
@@ -58,12 +103,12 @@ export default function QuickCommandsFooterBox (props) {
     setLabel(v)
   }
 
-  // function filterFunc (v, opt) {
-  //   const c = opt.props.children.toLowerCase()
-  //   const m = opt.props.cmd.toLowerCase()
-  //   const vv = v.toLowerCase()
-  //   return c.includes(vv) || m.includes(vv)
-  // }
+  // Dock the panel into the right side panel. The footer box unmounts on the
+  // way out (it is gated on quickCommandsInRightPanel), so there is nothing to
+  // clean up here — unlike the cmd history popover, which has to be closed.
+  function handleMoveToRightPanel () {
+    window.store.moveQuickCommandsToRightPanel()
+  }
 
   function onDragOver (e) {
     e.preventDefault()
@@ -114,9 +159,6 @@ export default function QuickCommandsFooterBox (props) {
   }
 
   function renderItem (item) {
-    const {
-      qmSortByFrequency
-    } = props
     return (
       <CmdItem
         item={item}
@@ -156,26 +198,69 @@ export default function QuickCommandsFooterBox (props) {
     })
   }
 
-  const {
-    openQuickCommandBar,
-    pinnedQuickCommandBar,
-    qmSortByFrequency,
-    inActiveTerminal,
-    leftSidePanelWidth,
-    leftSideBarWidth,
-    openedSideBar,
-    rightPanelVisible,
-    rightPanelPinned,
-    rightPanelWidth,
-    isMobile
-  } = props
-  if ((!openQuickCommandBar && !pinnedQuickCommandBar) || !inActiveTerminal) {
-    return null
+  // The two "move" icons are mirror images and sit in the same slot: the footer
+  // box offers to dock the panel into the right side panel, the docked panel
+  // offers to hand it back to the footer. Same glyph pair as the cmd history
+  // panel (cmd-history.jsx), so the two panels read the same way.
+  // Note VerticalLeftOutlined is the one whose bar is on the right (arrow
+  // pointing right); VerticalAlignBottomOutlined points at the footer.
+  function renderMoveIcon () {
+    if (inline) {
+      return (
+        <VerticalAlignBottomOutlined
+          className='qm-move-icon pointer'
+          title={e('moveToFooter')}
+          onClick={() => window.store.moveQuickCommandsToFooter()}
+        />
+      )
+    }
+    return (
+      <VerticalLeftOutlined
+        className='qm-move-icon pointer'
+        title={e('moveToRightPanel')}
+        onClick={handleMoveToRightPanel}
+      />
+    )
   }
-  const all = props.currentQuickCommands
-  // if (!all.length) {
-  //   return renderNoCmd()
-  // }
+
+  // Docked, the right panel owns the pin and the close button (both live in its
+  // title bar), so the panel keeps only the actions that are about the quick
+  // commands themselves. A pin left over from the footer is kept in the store
+  // and comes back with the panel, so nothing is silently lost.
+  function renderActions () {
+    const tp = pinnedQuickCommandBar
+      ? 'primary'
+      : 'text'
+    return (
+      <div className='qm-panel-actions mg2l'>
+        {renderMoveIcon()}
+        <Space.Compact>
+          {
+            !inline && (
+              <Button
+                onClick={handleTogglePinned}
+                icon={<PushpinOutlined />}
+                type={tp}
+              />
+            )
+          }
+          <Button
+            onClick={window.store.handleOpenQuickCommandsSetting}
+            icon={<EditOutlined />}
+          />
+          {
+            !inline && (
+              <Button
+                onClick={handleClose}
+                icon={<CloseCircleOutlined />}
+              />
+            )
+          }
+        </Space.Compact>
+      </div>
+    )
+  }
+
   const keyword0 = keyword.toLowerCase()
   const filtered = filterArray(all, keyword0, label)
   const sorted = qmSortByFrequency
@@ -188,9 +273,6 @@ export default function QuickCommandsFooterBox (props) {
     className: 'qm-label-select',
     allowClear: true
   }
-  const tp = pinnedQuickCommandBar
-    ? 'primary'
-    : 'text'
   const cls = classNames('qm-list-wrap')
   const type = qmSortByFrequency ? 'primary' : 'default'
   // Mirrors the footer's left offset. Mobile reserves nothing for the side
@@ -214,56 +296,71 @@ export default function QuickCommandsFooterBox (props) {
     className: 'qm-wrap-tooltip',
     style: qmStyle
   }
+
+  const content = (
+    <div className='pd2'>
+      <Flex justify='space-between' className='qm-flex'>
+        <Input.Search
+          value={keyword}
+          onChange={handleChange}
+          placeholder=''
+          className='qm-search-input'
+        />
+        <Flex gap='small'>
+          <Select
+            {...sprops}
+          >
+            {quickCommandTags.map(
+              renderTag
+            )}
+          </Select>
+          <Button
+            type={type}
+            onClick={window.store.handleSortByFrequency}
+          >
+            {e('sortByFrequency')}
+          </Button>
+        </Flex>
+        {renderActions()}
+      </Flex>
+      <div className={cls}>
+        {sorted.map(renderItem)}
+        {
+          !sorted.length && renderNoCmd()
+        }
+      </div>
+    </div>
+  )
+
+  // docked in the right side panel: no floating box, no pin/close of its own —
+  // the right panel decides when this is on screen, via store.rightPanelTab
+  if (inline) {
+    if (store.rightPanelTab !== 'quickCommands') {
+      return null
+    }
+    return (
+      <div className='qm-panel-in-right-panel'>
+        {content}
+      </div>
+    )
+  }
+
+  // Dormant while the panel is docked: the box would otherwise float over the
+  // terminal with nothing to show for it, and a pin left on would keep
+  // reserving the strip of height it occupies (see layout.jsx).
+  if (
+    quickCommandsInRightPanel ||
+    (!openQuickCommandBar && !pinnedQuickCommandBar) ||
+    !inActiveTerminal
+  ) {
+    return null
+  }
+
   return (
     <div
       {...qmProps}
     >
-      <div className='pd2'>
-        <Flex justify='space-between' className='qm-flex'>
-          <Input.Search
-            value={keyword}
-            onChange={handleChange}
-            placeholder=''
-            className='qm-search-input'
-          />
-          <Flex gap='small'>
-            <Select
-              {...sprops}
-            >
-              {props.quickCommandTags.map(
-                renderTag
-              )}
-            </Select>
-            <Button
-              type={type}
-              onClick={window.store.handleSortByFrequency}
-            >
-              {e('sortByFrequency')}
-            </Button>
-          </Flex>
-          <Space.Compact className='mg2l'>
-            <Button
-              onClick={handleTogglePinned}
-              icon={<PushpinOutlined />}
-              type={tp}
-            />
-            <Button
-              onClick={window.store.handleOpenQuickCommandsSetting}
-              icon={<EditOutlined />}
-            />
-            <Button
-              onClick={handleClose}
-              icon={<CloseCircleOutlined />}
-            />
-          </Space.Compact>
-        </Flex>
-        <div className={cls}>
-          {sorted.map(renderItem)}
-          {
-            !sorted.length && renderNoCmd()
-          }
-        </div>
-      </div>
+      {content}
     </div>
   )
-}
+})

package/client/components/quick-commands/quick-commands-select.jsx

@@ -5,6 +5,11 @@
  * on touch (mobile) and mouse (desktop) — the old hover-to-open model was
  * unreliable on Android, where a tap synthesizes mouseleave and cancels the
  * open timer.
+ *
+ * The panel has two homes (see quick-commands-box.jsx): the footer box and the
+ * right side panel. While it is docked, this button is repurposed to open and
+ * close that panel, exactly like the info and AI icons do — and `active` (fed
+ * by the footer, which is already reactive) keeps it lit while it is showing.
  */
 
 import { PureComponent } from 'react'
@@ -14,15 +19,21 @@ import './qm.styl'
 export default class QuickCommandsFooter extends PureComponent {
   handleClick = () => {
     const { store } = window
+    if (store.quickCommandsInRightPanel) {
+      store.toggleQuickCommandsPanel()
+      return
+    }
     store.openQuickCommandBar = !store.openQuickCommandBar
   }
 
   render () {
+    const { active } = this.props
     return (
       <div className='fleft relative quick-command-trigger-wrap'>
         <Button
           size='small'
           type='text'
+          className={'quick-command-trigger' + (active ? ' active' : '')}
           onClick={this.handleClick}
         >
           Q

package/client/components/session/session-control.jsx

@@ -8,6 +8,7 @@ import {
   PaperClipOutlined,
   ApartmentOutlined,
   MoreOutlined,
+  MenuOutlined,
   ColumnWidthOutlined,
   LogoutOutlined,
   PlusOutlined,
@@ -39,6 +40,7 @@ export default function SessionControl (props) {
     keepaliveEnabled,
     broadcastInput,
     wrapDisabled,
+    pasteWhenContextMenu,
     onChangePane,
     toggleCheckSftpPathFollowSsh,
     onSshSftpSplitView,
@@ -47,6 +49,7 @@ export default function SessionControl (props) {
     toggleWrap,
     onFullscreen,
     onOpenSearch,
+    onOpenContextMenu,
     onExitGracefully,
     onZoomFontSize
   } = props
@@ -279,7 +282,35 @@ export default function SessionControl (props) {
     )
   }
 
-  function renderTermControls () {
+  /**
+   * Touch devices have no right click, so the terminal's context menu needs a
+   * visible way in: this icon, next to the fullscreen icon on the desktop
+   * toolbar and next to the three-dot toggle in the mobile one (see below).
+   * Hidden when there is no menu to open — `pasteWhenContextMenu` turns both
+   * right click and the long press into a paste (see terminal.jsx), and it
+   * only ever acts on the terminal pane.
+   */
+  function renderContextMenuIcon (inMobileBar) {
+    if (
+      !isTouchDevice ||
+      pasteWhenContextMenu ||
+      tab.pane !== paneMap.terminal
+    ) {
+      return null
+    }
+    const cls = classnames(
+      'iblock pointer spliter context-menu-control-icon',
+      inMobileBar ? 'mobile-context-menu-toggle' : 'mg1r icon-info'
+    )
+    return (
+      <MenuOutlined
+        className={cls}
+        onClick={onOpenContextMenu}
+      />
+    )
+  }
+
+  function renderTermControls (skipContextMenuIcon) {
     const { pane } = tab
     if (pane !== paneMap.terminal) {
       return null
@@ -287,6 +318,7 @@ export default function SessionControl (props) {
     return (
       <div className='fright term-controls'>
         {renderFontSizeIcons()}
+        {skipContextMenuIcon ? null : renderContextMenuIcon()}
         {renderFullscreenIcon()}
         {renderSearchIcon()}
       </div>
@@ -303,12 +335,13 @@ export default function SessionControl (props) {
         {renderBroadcastIcon()}
         {renderWrapIcon()}
         {renderExitGracefullyIcon()}
-        {renderTermControls()}
+        {renderTermControls(true)}
       </div>
     )
     return (
       <div className='terminal-control mobile-session-control'>
         {renderPaneControl()}
+        {renderContextMenuIcon(true)}
         <Popover
           content={extraIcons}
           trigger='click'

package/client/components/session/session-control.styl

@@ -14,6 +14,7 @@
     flex 1
     min-width 0
 .mobile-control-toggle
+.mobile-context-menu-toggle
   font-size 16px
   line-height 32px
   color var(--text)
@@ -21,6 +22,10 @@
   &:hover
     color var(--text-light)
 
+// touch-only terminal context menu icon, in the bar next to the toggle above
+.mobile-context-menu-toggle
+  margin-right 10px
+
 // Popover content — icons laid out in a row, wrapping as needed
 .mobile-control-icons
   display flex

package/client/components/session/session.jsx

@@ -480,6 +480,17 @@ export default class SessionWrapper extends Component {
     refs.get('term-' + this.props.tab.id)?.toggleSearch()
   }
 
+  // touch-only: the toolbar menu icon opens the same context menu a right
+  // click (or a long press) does, anchored just below the icon itself
+  handleOpenContextMenu = (evt) => {
+    const term = refs.get('term-' + this.props.tab.id)
+    if (!term) {
+      return
+    }
+    const rect = evt.currentTarget.getBoundingClientRect()
+    term.openContextMenuAtPoint(rect.left, rect.bottom)
+  }
+
   handleZoomFontSize = (v) => {
     const term = refs.get('term-' + this.props.tab.id)
     if (!term?.term) {
@@ -625,6 +636,7 @@ export default class SessionWrapper extends Component {
           keepaliveEnabled={this.state.keepaliveEnabled}
           broadcastInput={this.state.broadcastInput}
           wrapDisabled={this.state.wrapDisabled}
+          pasteWhenContextMenu={!!this.props.config.pasteWhenContextMenu}
           onChangePane={(pane) => this.onChangePane(pane)}
           toggleCheckSftpPathFollowSsh={this.toggleCheckSftpPathFollowSsh}
           onSshSftpSplitView={this.handleSshSftpSplitView}
@@ -634,6 +646,7 @@ export default class SessionWrapper extends Component {
           onFullscreen={this.handleFullscreen}
           onZoomFontSize={this.handleZoomFontSize}
           onOpenSearch={this.handleOpenSearch}
+          onOpenContextMenu={this.handleOpenContextMenu}
           onExitGracefully={this.handleExitGracefully}
         />
         <Suspense fallback={null}>

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

@@ -574,7 +574,9 @@ export default class SettingCommon extends Component {
             'allowMultiInstance',
             'disableDeveloperTool',
             'switchTabOnHover',
+            'doubleClickToOpenBookmark',
             'disableTabIndex',
+            'onlyShowTitleInTab',
             'disableShortcutBar',
             'debug'
           ]

package/client/components/setting-panel/tab-widgets.jsx

@@ -1,11 +1,13 @@
 import SettingCol from './col'
 import WidgetControl from '../widgets/widget-control'
+import WidgetInstanceDetail from '../widgets/widget-instance-detail'
 import WidgetList from '../widgets/widgets-list'
+import { auto } from 'manate/react'
 import {
   settingMap
 } from '../../common/constants'
 
-export default function TabWidgets (props) {
+export default auto(function TabWidgets (props) {
   const {
     settingTab
   } = props
@@ -15,8 +17,14 @@ export default function TabWidgets (props) {
   const {
     settingItem,
     listProps,
-    formProps
+    formProps,
+    store
   } = props
+  // The right column shows whatever the list selected: a widget definition (run
+  // form) or a running instance (its detail + log). A definition has `info`, an
+  // instance has `widgetId` — and an instance that has been stopped stays the
+  // selected item on purpose, so its log is still readable after it dies.
+  const isInstance = !!(settingItem && settingItem.widgetId)
   return (
     <div
       className='setting-tabs-profile'
@@ -25,11 +33,23 @@ export default function TabWidgets (props) {
         <WidgetList
           {...listProps}
         />
-        <WidgetControl
-          {...formProps}
-          key={settingItem.id}
-        />
+        {
+          isInstance
+            ? (
+              <WidgetInstanceDetail
+                key={settingItem.id}
+                instance={settingItem}
+                store={store}
+              />
+              )
+            : (
+              <WidgetControl
+                {...formProps}
+                key={settingItem.id}
+              />
+              )
+        }
       </SettingCol>
     </div>
   )
-}
+})

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

@@ -902,12 +902,6 @@ export default class FileSection extends React.Component {
     this.transfer()
   }
 
-  zipAndTransfer = async () => {
-    this.transfer(transfer => {
-      transfer.zip = true
-    })
-  }
-
   newFile = () => {
     return this.newItem(false)
   }
@@ -1098,13 +1092,6 @@ export default class FileSection extends React.Component {
         icon: iconType,
         text: transferText
       })
-      // if (isDirectory && !this.props.isFtp) {
-      //   res.push({
-      //     func: 'zipAndTransfer',
-      //     icon: 'FileZipOutlined',
-      //     text: e('compressAndTransfer')
-      //   })
-      // }
     }
     if (!isDirectory && isRealFile && isLocal) {
       res.push({

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

@@ -4,7 +4,9 @@ import './right-side-panel.styl'
 import {
   CloseCircleOutlined,
   PushpinOutlined,
-  BarChartOutlined
+  BarChartOutlined,
+  HistoryOutlined,
+  ThunderboltOutlined
 } from '@ant-design/icons'
 import {
   Typography,
@@ -57,9 +59,14 @@ export default memo(function RightSidePanel (
   // 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
-  const tag = rightPanelTab === 'ai'
-    ? <Tag className='mg1r'>AI</Tag>
-    : <BarChartOutlined className='mg1r' />
+  // 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)