@electerm/electerm-react 5.5.15 → 5.5.25

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/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/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

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

@@ -1,4 +1,4 @@
-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 {
@@ -19,14 +19,44 @@ 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
   }
+  // 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
   const tag = rightPanelTab === 'ai'
     ? <Tag className='mg1r'>AI</Tag>
     : <BarChartOutlined className='mg1r' />
@@ -46,11 +76,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 +88,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 +103,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 +117,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

@@ -20,7 +20,9 @@ export default auto(function BookmarkSelect (props) {
     return null
   }
   const onClickItem = (item) => {
-    if (!store.pinned) {
+    // 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)

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,