@electerm/electerm-react 5.5.15 → 5.5.35

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,22 +198,69 @@ export default function QuickCommandsFooterBox (props) {
     })
   }
 
-  const {
-    openQuickCommandBar,
-    pinnedQuickCommandBar,
-    qmSortByFrequency,
-    inActiveTerminal,
-    leftSidePanelWidth,
-    leftSideBarWidth,
-    openedSideBar
-  } = 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}
+      />
+    )
+  }
+
+  // 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 all = props.currentQuickCommands
-  // if (!all.length) {
-  //   return renderNoCmd()
-  // }
+
   const keyword0 = keyword.toLowerCase()
   const filtered = filterArray(all, keyword0, label)
   const sorted = qmSortByFrequency
@@ -184,68 +273,94 @@ 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'
-  const w = openedSideBar ? leftSideBarWidth + leftSidePanelWidth : leftSideBarWidth
+  // Mirrors the footer's left offset. Mobile reserves nothing for the side
+  // panel — it is a full-screen drawer there (store.leftSidePanelWidth returns
+  // the viewport width), so adding it would push the popup off-screen.
+  const w = openedSideBar && !isMobile
+    ? leftSideBarWidth + leftSidePanelWidth
+    : leftSideBarWidth
+  // Keep the popup's horizontal extent in step with the footer (same `w`
+  // expression above). A pinned right panel is a dock that reserves its width
+  // in layout.jsx, so give that width up here too — otherwise the popup's right
+  // end slides under the dock. Unpinned is an overlay and reserves nothing, and
+  // mobile is excluded to match layout.jsx.
+  const qmStyle = {
+    left: w
+  }
+  if (rightPanelVisible && rightPanelPinned && !isMobile) {
+    qmStyle.right = rightPanelWidth
+  }
   const qmProps = {
     className: 'qm-wrap-tooltip',
-    style: {
-      left: w
+    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-form-elem.jsx

@@ -4,12 +4,16 @@ import {
   Select,
   Input
 } from 'antd'
+import { RobotOutlined } from '@ant-design/icons'
 import message from '../common/message'
 import SwitchLabel from '../common/switch'
 import { useState } from 'react'
 import generate from '../../common/uid'
 import InputAutoFocus from '../common/input-auto-focus'
 import renderQm from './quick-commands-list-form'
+import QuickCommandAiEditor from './quick-command-ai-editor'
+import ResponsiveTabs from '../common/responsive-tabs'
+import { isAIDisabled } from '../../common/ai-feature'
 import ShortcutEdit from '../shortcuts/shortcut-editor'
 import { getKeysTakenData } from '../shortcuts/shortcut-utils'
 import deepCopy from 'json-deep-copy'
@@ -18,6 +22,8 @@ import HelpIcon from '../common/help-icon'
 
 const FormItem = Form.Item
 const { Option } = Select
+const manualTab = 'qm-form-manual'
+const aiTab = 'qm-form-ai'
 const e = window.translate
 
 export default function QuickCommandForm (props) {
@@ -25,6 +31,7 @@ export default function QuickCommandForm (props) {
   const { store, formData } = props
   const { quickCommandTags = [] } = store
   const [shortcut, setShortcut] = useState(formData.shortcut || '')
+  const [tab, setTab] = useState(manualTab)
   const uid = formData.id || generate()
   const updateConfig = (name, value) => {
     form.setFieldsValue({
@@ -86,6 +93,22 @@ export default function QuickCommandForm (props) {
     message.success(e('saved'))
     props.onSaved?.()
   }
+
+  // AI generated quick command: write it into the same form (so the user can
+  // review/edit it) and jump back to the manual tab, where the save button is
+  function handleAiGenerated (data) {
+    const update = {
+      name: data.name,
+      commands: data.commands,
+      inputOnly: data.inputOnly
+    }
+    if (data.labels.length) {
+      update.labels = data.labels
+    }
+    form.setFieldsValue(update)
+    setTab(manualTab)
+  }
+
   const initialValues = formData
   if (!initialValues.labels) {
     initialValues.labels = []
@@ -112,6 +135,111 @@ export default function QuickCommandForm (props) {
     return `{{${t}}}`
   }).join(', ')
   const wiki = 'https://github.com/electerm/electerm/wiki/quick-command-templates'
+  const aiDisabled = isAIDisabled()
+  // renderQm() uses hooks internally, so it must run on every render
+  const qmItem = renderQm(form)
+  const manualPane = (
+    <>
+      <FormItem
+        label={e('quickCommandName')}
+        rules={[{
+          max: 60, message: '60 chars max'
+        }, {
+          required: true, message: 'Name required'
+        }]}
+        hasFeedback
+        name='name'
+      >
+        <InputAutoFocus />
+      </FormItem>
+      {qmItem}
+      <FormItem
+        name='labels'
+        label={e('label')}
+      >
+        <Select
+          mode='tags'
+        >
+          {
+            quickCommandTags.map(q => {
+              return (
+                <Option value={q} key={'qmt-' + q}>
+                  {q}
+                </Option>
+              )
+            })
+          }
+        </Select>
+      </FormItem>
+      <FormItem
+        label={e('settingShortcuts')}
+        name='shortcut'
+      >
+        <div>
+          <Input className='hide' />
+          <ShortcutEdit
+            {...editorProps}
+          />
+        </div>
+      </FormItem>
+      <FormItem
+        label={e('inputOnly')}
+        name='inputOnly'
+        valuePropName='checked'
+      >
+        <SwitchLabel />
+      </FormItem>
+      <FormItem>
+        <p>
+          <Button
+            type='primary'
+            htmlType='submit'
+          >{e('save')}
+          </Button>
+        </p>
+      </FormItem>
+      <p>
+        <b className='mg1r'>{e('templates')}:</b>
+        <span className='mg1r'>{templatesStr}</span>
+        <HelpIcon
+          link={wiki}
+        />
+      </p>
+    </>
+  )
+  const tabsProps = {
+    activeKey: tab,
+    onChange: setTab,
+    className: 'qm-form-tabs',
+    size: 'small',
+    items: [
+      {
+        key: manualTab,
+        label: e('quickCommand')
+      },
+      ...(!aiDisabled
+        ? [{
+            key: aiTab,
+            label: (
+              <span className='qm-form-tab-ai'>
+                <RobotOutlined className='mg1r' />
+                AI
+              </span>
+            )
+          }]
+        : [])
+    ]
+  }
+  const aiPane = (
+    <>
+      <ResponsiveTabs {...tabsProps} />
+      {
+        tab === aiTab
+          ? <QuickCommandAiEditor onChange={handleAiGenerated} />
+          : manualPane
+      }
+    </>
+  )
   return (
     <>
       <Form
@@ -121,71 +249,7 @@ export default function QuickCommandForm (props) {
         layout='vertical'
         initialValues={initialValues}
       >
-        <FormItem
-          label={e('quickCommandName')}
-          rules={[{
-            max: 60, message: '60 chars max'
-          }, {
-            required: true, message: 'Name required'
-          }]}
-          hasFeedback
-          name='name'
-        >
-          <InputAutoFocus />
-        </FormItem>
-        {renderQm(form)}
-        <FormItem
-          name='labels'
-          label={e('label')}
-        >
-          <Select
-            mode='tags'
-          >
-            {
-              quickCommandTags.map(q => {
-                return (
-                  <Option value={q} key={'qmt-' + q}>
-                    {q}
-                  </Option>
-                )
-              })
-            }
-          </Select>
-        </FormItem>
-        <FormItem
-          label={e('settingShortcuts')}
-          name='shortcut'
-        >
-          <div>
-            <Input className='hide' />
-            <ShortcutEdit
-              {...editorProps}
-            />
-          </div>
-        </FormItem>
-        <FormItem
-          label={e('inputOnly')}
-          name='inputOnly'
-          valuePropName='checked'
-        >
-          <SwitchLabel />
-        </FormItem>
-        <FormItem>
-          <p>
-            <Button
-              type='primary'
-              htmlType='submit'
-            >{e('save')}
-            </Button>
-          </p>
-        </FormItem>
-        <p>
-          <b className='mg1r'>{e('templates')}:</b>
-          <span className='mg1r'>{templatesStr}</span>
-          <HelpIcon
-            link={wiki}
-          />
-        </p>
+        {aiDisabled ? manualPane : aiPane}
       </Form>
     </>
   )

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/list.jsx

@@ -9,7 +9,7 @@ import createName, { createTitleTag } from '../../common/create-title'
 import classnames from 'classnames'
 import { noop } from 'lodash-es'
 import highlight from '../common/highlight'
-import { settingSyncId, settingCommonId, staticNewItemTabs } from '../../common/constants'
+import { staticNewItemTabs, undeletableIds } from '../../common/constants'
 import getInitItem from '../../common/init-setting-item'
 
 const e = window.translate
@@ -64,7 +64,7 @@ export default class ItemList extends React.PureComponent {
   }
 
   renderDelBtn = item => {
-    if (!item.id || [settingSyncId, settingCommonId].includes(item.id) || item.id.startsWith('default')) {
+    if (!item.id || undeletableIds.has(item.id)) {
       return null
     }
     const { shouldConfirmDel } = this.props

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/side-panel-r/right-side-panel.styl

@@ -2,13 +2,23 @@
   position absolute
   right 0
   top 36px
-  bottom 0
+  // Unpinned is an overlay, so stop above the footer: the footer is app chrome
+  // and holds the very icon that toggles this panel, so a full-height overlay
+  // would bury its own trigger. 36px is footerHeight (common/constants.js).
+  // Two cases move or remove the footer, and are handled where their sibling
+  // rules already live — see shortcut-bar.styl (.shortcut-bar-on lifts the
+  // footer) and term-fullscreen.styl (rdp/vnc/spice fullscreen hides it).
+  bottom 36px
   z-index 200
   background var(--main)
   color var(--text)
   border-left 1px solid var(--main-darker)
+  // Pinned is a dock, not an overlay: it owns the whole right column, top to
+  // bottom. The layout squeezes the terminal out of the way instead
+  // (layout.jsx reserves rightPanelWidth), so covering the footer is intended.
   &.right-side-panel-pinned
     top 0
+    bottom 0
 
   .drag-handle
     left 0