@electerm/electerm-react 5.5.15 → 5.5.35

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

@@ -1,9 +1,14 @@
 /**
- * cmd history trigger button with popover
+ * cmd history panel with popover
+ *
+ * The panel has two homes: the footer popover (default) and the right side
+ * panel. Which one it is in is a stored preference (store.cmdHistoryInRightPanel),
+ * so the same component renders both — `inline` drops the trigger/popover and
+ * lets the right panel's own container wrap the panel body.
  */
 
-import { useState, useEffect } from 'react'
-import { Button, Empty, Popover, Dropdown } from 'antd'
+import { useState, useEffect, useLayoutEffect, useRef } from 'react'
+import { Button, Empty, Popover } from 'antd'
 import { auto } from 'manate/react'
 import SwitchLabel from '../common/switch'
 import { copy } from '../../common/clipboard'
@@ -14,12 +19,15 @@ import {
   UnorderedListOutlined,
   MoreOutlined,
   PlusOutlined,
-  CodeOutlined
+  CodeOutlined,
+  VerticalLeftOutlined,
+  VerticalAlignBottomOutlined
 } from '@ant-design/icons'
 import InputAutoFocus from '../common/input-auto-focus'
 import { getItemJSON, setItemJSON } from '../../common/safe-local-storage'
 import QuickCommandCreateModal from '../quick-commands/quick-command-create-modal'
 import MultiTabRunModal from './multi-tab-run-modal'
+import { refsStatic } from '../common/ref'
 import classNames from 'classnames'
 import './cmd-history.styl'
 
@@ -27,21 +35,71 @@ const e = window.translate
 const SORT_BY_FREQ_KEY = 'electerm-cmd-history-sort-by-frequency'
 
 export default auto(function CmdHistory (props) {
+  const { store, inline } = props
   const [keyword, setKeyword] = useState('')
   const [sortByFrequency, setSortByFrequency] = useState(() => {
     return getItemJSON(SORT_BY_FREQ_KEY, false)
   })
-  // cmd of the item whose action menu is open / being acted on
-  const [menuOpenCmd, setMenuOpenCmd] = useState('')
+  // The item action menu is a part of this panel, not of the row it acts on:
+  // the row's ⋯ icon only reports which command was picked and where that row
+  // sits ({ cmd, top, rowTop }), and the panel renders the single menu for it.
+  // A menu per row cannot be closed with the panel — the popover content stops
+  // being re-rendered the moment the popover closes, so a per-row menu portaled
+  // to the body is left floating on its own.
+  const [menu, setMenu] = useState(null)
+  const panelRef = useRef(null)
+  const menuRef = useRef(null)
   const [quickCommandCmd, setQuickCommandCmd] = useState('')
   const [multiTabCmd, setMultiTabCmd] = useState('')
-  const { terminalCommandHistory } = props.store
+  // Footer mode only. The popover is controlled so that the trigger can be
+  // repurposed (open the right panel instead, when the history lives there) and
+  // so that "move back to footer" can open it again from the store.
+  const [open, setOpen] = useState(false)
+  const { terminalCommandHistory } = store
 
   useEffect(() => {
     setItemJSON(SORT_BY_FREQ_KEY, sortByFrequency)
   }, [sortByFrequency])
 
+  // "move back to footer" happens in the right panel, which cannot reach this
+  // component through props — it goes through the store, which needs a handle
+  useEffect(() => {
+    if (inline) {
+      return
+    }
+    refsStatic.add('CmdHistory', {
+      openPopover: () => setOpen(true)
+    })
+    return () => refsStatic.remove('CmdHistory')
+  }, [inline])
+
+  // The menu hangs below its row, which for the last rows would put it past the
+  // bottom of the window — the panel itself is not clipped, so lift the menu
+  // above its row instead. The layout effect runs before paint, so the
+  // correction is never visible.
+  useLayoutEffect(() => {
+    const el = menuRef.current
+    if (!el || !menu) {
+      return
+    }
+    const rect = el.getBoundingClientRect()
+    if (rect.bottom > window.innerHeight - 4) {
+      const above = menu.rowTop - rect.height
+      if (above !== menu.top) {
+        setMenu({
+          ...menu,
+          top: above
+        })
+      }
+    }
+  }, [menu])
+
+  function closeMenu () {
+    setMenu(null)
+  }
+
   function handleRunCommand (cmd) {
+    closeMenu()
     window.store.runCmdFromHistory(cmd)
   }
 
@@ -55,6 +113,7 @@ export default auto(function CmdHistory (props) {
   }
 
   function handleMenuAction (key, cmd) {
+    closeMenu()
     if (key === 'delete') {
       window.store.deleteCmdHistory(cmd)
     } else if (key === 'quickCommand') {
@@ -65,33 +124,49 @@ export default auto(function CmdHistory (props) {
     }
   }
 
-  function getMenuProps (cmd) {
-    return {
-      items: [
-        {
-          key: 'delete',
-          icon: <DeleteOutlined />,
-          label: e('del'),
-          danger: true
-        },
-        {
-          key: 'quickCommand',
-          icon: <PlusOutlined />,
-          label: e('addQuickCommands')
-        },
-        {
-          key: 'multiTab',
-          icon: <CodeOutlined />,
-          label: e('runInAllTerminals')
-        }
-      ],
-      onClick: ({ key, domEvent }) => {
-        // the menu renders in a portal but React events still bubble through
-        // the row, which would run the command
-        domEvent.stopPropagation()
-        handleMenuAction(key, cmd)
+  function getMenuItems () {
+    return [
+      {
+        key: 'delete',
+        icon: <DeleteOutlined />,
+        label: e('del'),
+        danger: true
+      },
+      {
+        key: 'quickCommand',
+        icon: <PlusOutlined />,
+        label: e('addQuickCommands')
+      },
+      {
+        key: 'multiTab',
+        icon: <CodeOutlined />,
+        label: e('runInAllTerminals')
       }
+    ]
+  }
+
+  // the ⋯ icon only reports the picked command and its position; the panel owns
+  // the menu itself
+  function handleToggleMenu (ev, cmd) {
+    // the row would otherwise run the command
+    ev.stopPropagation()
+    if (menu && menu.cmd === cmd) {
+      closeMenu()
+      return
+    }
+    const row = ev.currentTarget.closest('.cmd-history-item')
+    const panel = panelRef.current
+    if (!row || !panel) {
+      return
     }
+    const rowRect = row.getBoundingClientRect()
+    const panelTop = panel.getBoundingClientRect().top
+    setMenu({
+      cmd,
+      // below the row by default, above it when there is no room left
+      top: rowRect.bottom - panelTop,
+      rowTop: rowRect.top - panelTop
+    })
   }
 
   function filterArray (array, keyword) {
@@ -105,6 +180,45 @@ export default auto(function CmdHistory (props) {
     setKeyword(e.target.value)
   }
 
+  // The menu is anchored to its row, and rc-trigger re-aligns it on every
+  // scroll of the trigger's scrollable ancestors. The rows live in a 190px-tall
+  // scrolling list, so a wheel over the list drags an open menu along with the
+  // row — out of the popup and eventually off the screen, while the row it
+  // belongs to is long gone. Close it instead: the menu is only meaningful next
+  // to the row it was opened on.
+  function handleListScroll () {
+    if (menu) {
+      closeMenu()
+    }
+  }
+
+  // closing the popover hides the menu with it; dropping the selection too
+  // keeps it from coming back on the next open
+  function handlePopoverOpenChange (nextOpen) {
+    if (!nextOpen) {
+      closeMenu()
+      setOpen(false)
+      return
+    }
+    // While the history lives in the right panel this trigger never opens the
+    // popover: it opens and closes the right panel, exactly like the info and
+    // AI triggers do (store.toggleCmdHistoryPanel).
+    if (store.cmdHistoryInRightPanel) {
+      window.store.toggleCmdHistoryPanel()
+      return
+    }
+    setOpen(true)
+  }
+
+  // Dock the panel into the right side panel. The popover has to be closed on
+  // the way out, or it would be left behind pointing at a panel that is no
+  // longer in the footer.
+  function handleMoveToRightPanel () {
+    closeMenu()
+    setOpen(false)
+    window.store.moveCmdHistoryToRightPanel()
+  }
+
   const historyArray = (terminalCommandHistory || []).slice().reverse()
 
   let filtered = filterArray(historyArray, keyword)
@@ -129,7 +243,7 @@ export default auto(function CmdHistory (props) {
     return filtered.map((item, index) => {
       const cls = classNames(
         'cmd-history-item',
-        { 'menu-open': menuOpenCmd === item.cmd }
+        { 'menu-open': menu && menu.cmd === item.cmd }
       )
       return (
         <div
@@ -149,25 +263,80 @@ export default auto(function CmdHistory (props) {
               className='cmd-history-item-copy'
               onClick={(ev) => handleCopyCommand(item.cmd, ev)}
             />
-            <Dropdown
-              menu={getMenuProps(item.cmd)}
-              trigger={['click']}
-              onOpenChange={(open) => setMenuOpenCmd(open ? item.cmd : '')}
-            >
-              <Button
-                type='text'
-                size='small'
-                icon={<MoreOutlined />}
-                className='cmd-history-item-more'
-                onClick={(ev) => ev.stopPropagation()}
-              />
-            </Dropdown>
+            <Button
+              type='text'
+              size='small'
+              icon={<MoreOutlined />}
+              className={classNames(
+                'cmd-history-item-more',
+                { active: menu && menu.cmd === item.cmd }
+              )}
+              onClick={(ev) => handleToggleMenu(ev, item.cmd)}
+            />
           </div>
         </div>
       )
     })
   }
 
+  // the panel's own action menu: it renders inside the popover content, so it
+  // is hidden and revealed with the panel instead of outliving it
+  function renderItemMenu () {
+    if (!menu) {
+      return null
+    }
+    return (
+      <div
+        ref={menuRef}
+        className='cmd-history-item-menu'
+        style={{ top: `${menu.top}px` }}
+        onClick={ev => ev.stopPropagation()}
+      >
+        {
+          getMenuItems().map(item => (
+            <div
+              key={item.key}
+              className={classNames(
+                'cmd-history-menu-item',
+                { danger: item.danger }
+              )}
+              onClick={() => handleMenuAction(item.key, menu.cmd)}
+            >
+              <span className='cmd-history-menu-icon'>{item.icon}</span>
+              <span className='cmd-history-menu-label'>{item.label}</span>
+            </div>
+          ))
+        }
+      </div>
+    )
+  }
+
+  // The two "move" icons are mirror images and sit in the same slot: the
+  // popover offers to dock the panel into the right side panel, the docked
+  // panel offers to hand it back to the footer popover. The glyphs are antd's
+  // "align" pair — an arrow into a bar on the right, an arrow into a bar at the
+  // bottom — so each points at the edge the panel is going to.
+  // Note VerticalLeftOutlined is the one whose bar is on the right (arrow
+  // pointing right); VerticalRightOutlined is its mirror and points left.
+  function renderMoveIcon () {
+    if (inline) {
+      return (
+        <VerticalAlignBottomOutlined
+          className='cmd-history-move-icon pointer'
+          title={e('moveToFooter')}
+          onClick={() => window.store.moveCmdHistoryToFooter()}
+        />
+      )
+    }
+    return (
+      <VerticalLeftOutlined
+        className='cmd-history-move-icon pointer'
+        title={e('moveToRightPanel')}
+        onClick={handleMoveToRightPanel}
+      />
+    )
+  }
+
   function renderHeader () {
     if (!historyArray.length) {
       return null
@@ -182,17 +351,29 @@ export default auto(function CmdHistory (props) {
             label={e('sortByFrequency')}
           />
         </div>
-        <UnorderedListOutlined
-          className='cmd-history-clear-icon pointer clear-ai-icon icon-hover'
-          title={e('clear')}
-          onClick={handleClearAll}
-        />
+        <div className='cmd-history-header-actions'>
+          {renderMoveIcon()}
+          <UnorderedListOutlined
+            className='cmd-history-clear-icon pointer clear-ai-icon icon-hover'
+            title={e('clear')}
+            onClick={handleClearAll}
+          />
+        </div>
       </div>
     )
   }
 
   const content = (
-    <div className='cmd-history-popover-content pd2'>
+    <div
+      ref={panelRef}
+      className={classNames(
+        'cmd-history-popover-content',
+        inline
+          // docked: fill the right panel instead of sizing itself like a popup
+          ? 'cmd-history-in-panel'
+          : 'pd2'
+      )}
+    >
       <div className='cmd-history-search pd2b'>
         <InputAutoFocus
           value={keyword}
@@ -203,25 +384,18 @@ export default auto(function CmdHistory (props) {
         />
       </div>
       {renderHeader()}
-      <div className='cmd-history-list'>
+      <div className='cmd-history-list' onScroll={handleListScroll}>
         {renderList()}
       </div>
+      {renderItemMenu()}
     </div>
   )
 
-  return (
+  // The modals are siblings of the panel, never children of the popover: the
+  // content of a closed popover is no longer re-rendered, so a modal opened
+  // from inside one could not be closed once the popover went away.
+  const modals = (
     <>
-      <Popover
-        content={content}
-        trigger='click'
-        placement='topLeft'
-      >
-        <Button
-          size='small'
-          type='text'
-          icon={<HistoryOutlined />}
-        />
-      </Popover>
       {
         quickCommandCmd
           ? (
@@ -247,4 +421,44 @@ export default auto(function CmdHistory (props) {
       }
     </>
   )
+
+  // docked in the right side panel: no trigger, no popover — the right panel
+  // decides when this is on screen, via store.rightPanelTab
+  if (inline) {
+    if (store.rightPanelTab !== 'cmdHistory') {
+      return null
+    }
+    return (
+      <>
+        {content}
+        {modals}
+      </>
+    )
+  }
+
+  const rightPanelActive = store.rightPanelVisible &&
+    store.rightPanelTab === 'cmdHistory'
+
+  return (
+    <>
+      <Popover
+        content={content}
+        trigger='click'
+        placement='topLeft'
+        open={open}
+        onOpenChange={handlePopoverOpenChange}
+      >
+        <Button
+          size='small'
+          type='text'
+          className={classNames(
+            'cmd-history-trigger',
+            { active: rightPanelActive }
+          )}
+          icon={<HistoryOutlined />}
+        />
+      </Popover>
+      {modals}
+    </>
+  )
 })

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

@@ -24,7 +24,7 @@ const {
 
 export default auto(function FooterEntry (props) {
   function handleInfoPanel () {
-    window.store.openInfoPanel()
+    window.store.toggleInfoPanel()
   }
 
   function batchInput (cmd, selectedTabIds) {
@@ -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>
     )
   }
@@ -106,11 +112,19 @@ export default auto(function FooterEntry (props) {
     )
   }
 
+  function handleAIPanel () {
+    window.store.toggleAIPanel()
+  }
+
   function renderAIIcon () {
+    const { rightPanelVisible, rightPanelTab } = props.store
+    // same contract as the info icon: lit while its panel is open
+    const active = rightPanelVisible && rightPanelTab === 'ai'
     return (
       <div className='terminal-footer-unit terminal-footer-ai'>
         <AIIcon
-          onClick={window.store.handleOpenAIPanel}
+          onClick={handleAIPanel}
+          className={active ? 'active' : ''}
         />
       </div>
     )
@@ -176,11 +190,15 @@ export default auto(function FooterEntry (props) {
     if (loading) {
       return null
     }
+    const { rightPanelVisible, rightPanelTab } = props.store
+    // keep the icon lit while its panel is open so it reads as "click to close"
+    const active = rightPanelVisible && rightPanelTab === 'info'
     return (
       <div className='terminal-footer-unit terminal-footer-info'>
         <BarChartOutlined
           onClick={handleInfoPanel}
-          className='pointer font14 terminal-info-icon'
+          className={'pointer font14 terminal-info-icon' + (active ? ' active' : '')}
+          title={e('info')}
         />
       </div>
     )
@@ -202,7 +220,11 @@ export default auto(function FooterEntry (props) {
     leftSidePanelWidth,
     leftSideBarWidth,
     openedSideBar,
-    inActiveTerminal
+    inActiveTerminal,
+    rightPanelVisible,
+    rightPanelPinned,
+    rightPanelWidth,
+    isMobile
   } = props.store
   const w = leftSideBarWidth + leftSidePanelWidth
   // icon bar hidden: show a control on the left of the footer to bring the
@@ -217,16 +239,25 @@ export default auto(function FooterEntry (props) {
       </div>
       )
     : null
-  const sideProps = openedSideBar
-    ? {
-        className: 'main-footer',
-        style: {
-          left: `${w}px`
-        }
-      }
-    : {
-        className: 'main-footer'
-      }
+  // The footer mirrors the space layout.jsx reserves on both sides.
+  // Left: reserve while the panel is open OR pinned. A pinned left panel is
+  // always open, so this is a superset of the pin state — and it is what keeps
+  // the footer from painting over the panel, which spans bottom 0 in both
+  // states. Right: reserve only for a pinned panel, because the unpinned right
+  // panel is an overlay that stops above the footer and so never needs the
+  // space. Mobile reserves nothing on either side, matching layout.jsx, and the
+  // right panel has no pin control there at all.
+  const footerStyle = {}
+  if (openedSideBar && !isMobile) {
+    footerStyle.left = `${w}px`
+  }
+  if (rightPanelVisible && rightPanelPinned && !isMobile) {
+    footerStyle.right = `${rightPanelWidth}px`
+  }
+  const sideProps = {
+    className: 'main-footer',
+    style: footerStyle
+  }
   if (
     !inActiveTerminal
   ) {

package/client/components/icons/ai-icon.styl

@@ -1,3 +1,6 @@
 .ai-icon
   display inline-block
-  cursor pointer
+  cursor pointer
+  // panel open: same "on" colour the info icon and the panel pin button use
+  &.active
+    color var(--success)