@electerm/electerm-react 5.5.25 → 5.5.35

package/client/components/footer/cmd-history.styl

@@ -1,9 +1,20 @@
 .cmd-history-popover-content
+  position relative
   max-height 300px
   width 300px
-  overflow hidden
+  // deliberately not clipped: the item action menu is a child of the panel, but
+  // it hangs below its row and may reach past the panel's edge
   display flex
   flex-direction column
+  // Docked in the right side panel the panel *is* the container, so the history
+  // fills it instead of sizing itself like a popup. 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.
+  &.cmd-history-in-panel
+    width 100%
+    max-height none
+    height 100%
 .cmd-history-search
   flex-shrink 0
   position sticky
@@ -16,6 +27,19 @@
   justify-content space-between
   padding-bottom 8px
 
+.cmd-history-header-actions
+  display flex
+  align-items center
+  gap 6px
+
+// The footer trigger stays lit while the history is docked in the right panel,
+// same contract as the info and AI icons
+.cmd-history-trigger
+  &.active
+    color var(--success)
+    .anticon
+      color var(--success)
+
 .cmd-history-sort
   display flex
   align-items center
@@ -24,6 +48,13 @@
 .cmd-history-sort-label
   user-select none
 
+.cmd-history-move-icon
+  font-size 14px
+  padding 4px
+  cursor pointer
+  &:hover
+    color var(--primary)
+
 .cmd-history-clear-icon
   font-size 14px
   padding 4px
@@ -77,6 +108,8 @@
 .cmd-history-item-more
   cursor pointer
   padding 2px 4px
+  &.active
+    color var(--primary)
 
 .cmd-history-item-copy
   cursor pointer
@@ -84,6 +117,40 @@
   &:hover
     color blue
 
+// The item action menu is part of this panel: it is rendered inside
+// `.cmd-history-popover-content` (not in a body-level portal) so that it can
+// never outlive the popover. It hangs below the row whose ⋯ icon was clicked —
+// the component lifts it above that row when it would fall off the window.
+.cmd-history-item-menu
+  position absolute
+  right 8px
+  z-index 10
+  min-width 156px
+  padding 4px 0
+  border-radius 4px
+  background var(--main)
+  border 1px solid var(--main-darker)
+  box-shadow 0 2px 8px rgba(0, 0, 0, 0.35)
+
+.cmd-history-menu-item
+  display flex
+  align-items center
+  gap 8px
+  padding 5px 10px
+  cursor pointer
+  white-space nowrap
+  &:hover
+    background var(--main-lighter)
+  &.danger
+    color var(--error)
+
+.cmd-history-menu-icon
+  font-size 13px
+  line-height 1
+
+.cmd-history-menu-label
+  flex 1
+
 .multi-tab-run-cmd
   font-size 12px
   padding 6px 8px

package/client/components/footer/footer-entry.jsx

@@ -72,9 +72,15 @@ export default auto(function FooterEntry (props) {
   }
 
   function renderQuickCommands () {
+    const { rightPanelVisible, rightPanelTab, quickCommandsInRightPanel } = props.store
+    // the Q button only owns the right panel while the panel lives there; in
+    // the footer it toggles the floating box instead, which shows its own state
+    const active = quickCommandsInRightPanel &&
+      rightPanelVisible &&
+      rightPanelTab === 'quickCommands'
     return (
       <div className='terminal-footer-unit terminal-footer-qm'>
-        <Qm />
+        <Qm active={active} />
       </div>
     )
   }

package/client/components/layout/layout.jsx

@@ -37,6 +37,7 @@ export default auto(function Layout (props) {
       height,
       isMobile,
       pinnedQuickCommandBar,
+      quickCommandsInRightPanel,
       leftSidePanelWidth,
       leftSideBarWidth,
       pinned,
@@ -49,7 +50,14 @@ export default auto(function Layout (props) {
       shortcutBarKbOffset
     } = props.store
     const monitorHeight = isRemoteMonitorBarVisible(props.store) ? remoteMonitorBarHeight : 0
-    const h = height - footerHeight - monitorHeight - (inActiveTerminal && pinnedQuickCommandBar ? quickCommandBoxHeight : 0) - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0) + resizeTrigger
+    // a pin left on while the panel is docked in the right side panel reserves
+    // nothing: the footer box is not rendered then (quick-commands-box.jsx)
+    const qmPinnedHeight = inActiveTerminal &&
+      pinnedQuickCommandBar &&
+      !quickCommandsInRightPanel
+      ? quickCommandBoxHeight
+      : 0
+    const h = height - footerHeight - monitorHeight - qmPinnedHeight - (shortcutBarVisible ? shortcutBarHeight + shortcutBarKbOffset : 0) + resizeTrigger
     const l = pinned && !isMobile ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
     const r = rightPanelVisible && rightPanelPinned && !isMobile ? rightPanelWidth : 0
     return {
@@ -141,24 +149,9 @@ export default auto(function Layout (props) {
   const footerProps = {
     store
   }
-  const qmProps = pick(store, [
-    'quickCommandTags',
-    'qmSortByFrequency',
-    'openQuickCommandBar',
-    'pinnedQuickCommandBar',
-    'qmSortByFrequency',
-    'inActiveTerminal',
-    'leftSidePanelWidth',
-    'leftSideBarWidth',
-    'openedSideBar',
-    'currentQuickCommands',
-    // the quick-command popup mirrors the footer's horizontal extent, so it
-    // needs the same right-panel state the footer uses
-    'rightPanelVisible',
-    'rightPanelPinned',
-    'rightPanelWidth',
-    'isMobile'
-  ])
+  const qmProps = {
+    store
+  }
   const sessionsProps = {
     styles: styles.wrapStyles,
     sizes,

package/client/components/main/main.jsx

@@ -29,6 +29,8 @@ import { isAIDisabled } from '../../common/ai-feature'
 import { ConfigProvider } from 'antd'
 import { NotificationContainer } from '../common/notification'
 import RightSidePanel from '../side-panel-r/side-panel-r'
+import CmdHistory from '../footer/cmd-history'
+import QuickCommandsFooterBox from '../quick-commands/quick-commands-box'
 import ConnectionHoppingWarning from './connection-hopping-warnning'
 import SshConfigLoadNotify from '../ssh-config/ssh-config-load-notify'
 import LoadSshConfigs from '../ssh-config/load-ssh-configs'
@@ -94,6 +96,7 @@ export default auto(function Index (props) {
     store.checkForDbUpgrade()
     store.handleGetSerials()
     store.checkPendingDeepLink()
+    store.checkPendingVvFile()
   }, [])
 
   // Track the actual input modality rather than a static capability probe:
@@ -128,6 +131,7 @@ export default auto(function Index (props) {
     pinned,
     isSecondInstance,
     pinnedQuickCommandBar,
+    quickCommandsInRightPanel,
     installSrc,
     fileTransfers,
     uiThemeConfig,
@@ -155,7 +159,9 @@ export default auto(function Index (props) {
     // would restyle the mobile layout.
     pinned: pinned && !store.isMobile,
     'not-win': !isWin,
-    'qm-pinned': pinnedQuickCommandBar,
+    // the pinned quick-command box only shapes the layout while it is actually
+    // in the footer — docked in the right panel it renders there instead
+    'qm-pinned': pinnedQuickCommandBar && !quickCommandsInRightPanel,
     fullscreen,
     // terminal fullscreen keeps the footer visible (rdp/vnc/spice fullscreen
     // does not — the footer would be an empty bar there)
@@ -282,6 +288,7 @@ export default auto(function Index (props) {
     showAIConfig: store.showAIConfig,
     rightPanelTab,
     agentRunning: store.agentRunning,
+    aiContextInfo: store.aiContextInfo,
     currentChatSessionId: store.currentChatSessionId,
     showChatSessions: store.showChatSessions
   }
@@ -358,6 +365,12 @@ export default auto(function Index (props) {
         <RightSidePanel {...rightPanelProps}>
           {!isAIDisabled() && <AIChat {...aiChatProps} />}
           <TerminalInfo key={store.activeTabId} store={store} {...deepCopy(store.terminalInfoProps)} />
+          {/* the cmd history panel has two homes; the footer popover is the
+              other one, and both are the same component (see cmd-history.jsx) */}
+          <CmdHistory store={store} inline />
+          {/* same for the quick command panel: the footer box is the other home
+              (see quick-commands-box.jsx) */}
+          <QuickCommandsFooterBox store={store} inline />
         </RightSidePanel>
         <SshConfigLoadNotify {...sshConfigProps} />
         <LoadSshConfigs

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/setting-panel/setting-common.jsx

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