@electerm/electerm-react 5.5.9 → 5.5.25

package/client/components/bookmark-form/common/vv-file-field.jsx

@@ -0,0 +1,137 @@
+/**
+ * bookmark form - load a .vv (virt-viewer) connection file
+ *
+ * Registered as field type 'vvFile' in ./fields.jsx and used by
+ * ../config/spice.js. Fills host/port/password/title/proxy from the file and
+ * reports anything it could not honour instead of dropping it silently.
+ */
+import { useState } from 'react'
+import {
+  Form,
+  Button,
+  Alert
+} from 'antd'
+import { FileAddOutlined } from '@ant-design/icons'
+import fs from '../../../common/fs'
+import { tailFormItemLayout } from '../../../common/form-layout'
+import { parseVv, describeVv } from '../../../common/parse-vv'
+
+const FormItem = Form.Item
+
+/**
+ * window.translate echoes an unknown key back capitalised, so an unmapped
+ * 'loadVvFile' would render as "LoadVvFile". The key IS in
+ * ~/dev/electerm-locales, but the app consumes the published
+ * @electerm/electerm-locales, so it stays unknown until that ships and the dep
+ * is bumped. Fall back to the literal, which is what en_us resolves to anyway
+ * (capitalizeFirstLetter('load .vv file')), so nothing changes visually when
+ * the translation does land.
+ */
+function vvLabel () {
+  const t = window.translate('loadVvFile')
+  return t === 'LoadVvFile' ? 'Load .vv file' : t
+}
+
+/**
+ * Open the native file dialog, filtered to .vv files.
+ * window.api.openDialog is dialog.showOpenDialogSync in the main process
+ * (see src/app/lib/ipc.js), so the full Electron options object is accepted.
+ * @returns {Promise<string|null>} selected path, or null when cancelled
+ */
+async function pickVvFile () {
+  const files = await window.api.openDialog({
+    title: 'Choose a .vv connection file',
+    message: 'Choose a .vv connection file',
+    properties: [
+      'openFile',
+      'showHiddenFiles',
+      'noResolveAliases',
+      'treatPackageAsDirectory',
+      'dontAddToRecent'
+    ],
+    filters: [
+      { name: 'Virt Viewer connection file', extensions: ['vv'] },
+      { name: 'All files', extensions: ['*'] }
+    ]
+  }).catch(() => false)
+  if (!files || !files.length) {
+    return null
+  }
+  return files[0]
+}
+
+export default function VvFileField ({ form }) {
+  const [hint, setHint] = useState(null)
+  const [loading, setLoading] = useState(false)
+
+  const load = async () => {
+    setLoading(true)
+    setHint(null)
+    try {
+      const filePath = await pickVvFile()
+      if (!filePath) {
+        return
+      }
+      // fs.readFile resolves the file as a utf8 string (src/app/lib/fs.js)
+      const text = await fs.readFile(filePath)
+      const parsed = parseVv(text)
+
+      if (!parsed.ok) {
+        setHint({ type: 'error', text: describeVv(parsed) })
+        return
+      }
+
+      // Only push the keys the file actually defined, so loading a .vv on top
+      // of a partly filled form does not wipe the other fields.
+      form.setFieldsValue(parsed.fields)
+
+      const notes = parsed.warnings.slice()
+      if (parsed.ignored.length) {
+        notes.push(
+          'skipped: ' + parsed.ignored.map(d => d.key).join(', ')
+        )
+      }
+      if (parsed.unknown.length) {
+        notes.push(
+          'unrecognised: ' + parsed.unknown.map(d => d.key).join(', ')
+        )
+      }
+
+      const summary = describeVv(parsed)
+      setHint({
+        type: notes.length ? 'warning' : 'success',
+        text: summary + (notes.length ? ' -- ' + notes.join('; ') : '')
+      })
+    } catch (err) {
+      setHint({ type: 'error', text: 'cannot read file: ' + err.message })
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <FormItem
+      {...tailFormItemLayout}
+    >
+      <Button
+        icon={<FileAddOutlined />}
+        loading={loading}
+        onClick={load}
+      >
+        {vvLabel()}
+      </Button>
+      {
+        hint && (
+          <Alert
+            className='mg1t'
+            type={hint.type}
+            title={hint.text}
+            showIcon
+            closable
+            onClose={() => setHint(null)}
+          />
+        )
+      }
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/config/spice.js

@@ -26,6 +26,7 @@ const spiceConfig = {
       fields: [
         commonFields.category,
         commonFields.colorTitle,
+        { type: 'vvFile', name: '__vv__', label: '' },
         { type: 'input', name: 'host', label: () => e('host'), rules: [{ required: true, message: e('host') + ' required' }] },
         commonFields.port,
         { type: 'switch', name: 'viewOnly', label: () => e('viewOnly'), valuePropName: 'checked' },

package/client/components/common/remote-pointer.js

@@ -0,0 +1,49 @@
+/**
+ * Pointer coordinate mapping for remote desktop surfaces.
+ *
+ * The remote surface is rendered with `object-fit: contain`, so the element
+ * box and the drawn surface rarely match: one axis gets letterbox margins.
+ * Deriving the scale from the element box alone therefore sends the pointer
+ * to the wrong place (the classic "only the top-left region reacts" bug), and
+ * each session used to re-implement that math. Shared here instead.
+ */
+
+function clamp (v, max) {
+  return Math.max(0, Math.min(v, max))
+}
+
+/**
+ * visible remote surface rect inside a `object-fit: contain` element
+ */
+export function containRect (el, sourceWidth, sourceHeight) {
+  if (!el || !sourceWidth || !sourceHeight) {
+    return null
+  }
+  const rect = el.getBoundingClientRect()
+  if (!rect.width || !rect.height) {
+    return null
+  }
+  const scale = Math.min(
+    rect.width / sourceWidth,
+    rect.height / sourceHeight
+  )
+  return {
+    scale,
+    left: rect.left + (rect.width - sourceWidth * scale) / 2,
+    top: rect.top + (rect.height - sourceHeight * scale) / 2
+  }
+}
+
+/**
+ * pointer event -> remote framebuffer pixel, clamped to the surface
+ */
+export function eventToRemotePos (e, el, sourceWidth, sourceHeight) {
+  const rect = containRect(el, sourceWidth, sourceHeight)
+  if (!rect || !rect.scale) {
+    return { x: 0, y: 0 }
+  }
+  return {
+    x: clamp(Math.round((e.clientX - rect.left) / rect.scale), sourceWidth - 1),
+    y: clamp(Math.round((e.clientY - rect.top) / rect.scale), sourceHeight - 1)
+  }
+}

package/client/components/common/remote-session-shell.jsx

@@ -0,0 +1,137 @@
+/**
+ * Shared shell for remote desktop sessions (RDP / VNC / SPICE).
+ *
+ * Layout is a plain flex column:
+ *
+ *   [ control bar ]   auto height, wraps when the window is narrow
+ *   [ viewport    ]   flex: 1, holds the remote surface
+ *
+ * The control bar owns a real height instead of being positioned over the
+ * surface, so the old "- 10 / - 80" guesses are gone and the surface can
+ * never be covered by the bar.
+ *
+ * The viewport is measured with a ResizeObserver rather than derived from
+ * the layout props, because in fullscreen the session is re-parented to the
+ * whole window by term-fullscreen.styl and those props are stale. Measured
+ * size is what lets the remote surface scale up to fill the screen.
+ */
+import { PureComponent, createRef } from 'react'
+import { Spin } from 'antd'
+import classnames from 'classnames'
+import './remote-session-shell.styl'
+
+export default class RemoteSessionShell extends PureComponent {
+  constructor (props) {
+    super(props)
+    this.viewRef = createRef()
+    this.state = {
+      width: 0,
+      height: 0
+    }
+  }
+
+  componentDidMount () {
+    this.observeViewport()
+  }
+
+  componentDidUpdate () {
+    // the viewport node is stable, this only re-observes if React swapped it
+    this.observeViewport()
+  }
+
+  componentWillUnmount () {
+    this.unobserveViewport()
+  }
+
+  observeViewport = () => {
+    const el = this.viewRef.current
+    if (!el || this.viewEl === el) {
+      return
+    }
+    this.unobserveViewport()
+    this.viewEl = el
+    this.observer = new ResizeObserver(this.measureViewport)
+    this.observer.observe(el)
+    this.measureViewport()
+  }
+
+  unobserveViewport = () => {
+    if (this.observer) {
+      this.observer.disconnect()
+      this.observer = null
+    }
+    this.viewEl = null
+  }
+
+  measureViewport = () => {
+    const el = this.viewRef.current
+    if (!el) {
+      return
+    }
+    const { clientWidth: width, clientHeight: height } = el
+    const { width: prevWidth, height: prevHeight } = this.state
+    if (width === prevWidth && height === prevHeight) {
+      return
+    }
+    this.setState({
+      width,
+      height
+    })
+    this.props.onViewportResize?.(width, height)
+  }
+
+  // measured viewport box, 0 until the first layout pass
+  getViewportSize = () => {
+    const { width, height } = this.state
+    return {
+      width,
+      height
+    }
+  }
+
+  render () {
+    const {
+      loading,
+      fit,
+      wrapClassName,
+      controlLeft,
+      controlRight,
+      floatControl,
+      overlay,
+      children
+    } = this.props
+    const cls = classnames(
+      'remote-session-wrap',
+      'session-v-wrap',
+      wrapClassName,
+      {
+        fit: !!fit
+      }
+    )
+    return (
+      <Spin
+        spinning={!!loading}
+        className='remote-session-spin'
+      >
+        <div className={cls}>
+          <div className='remote-session-control session-v-info'>
+            <div className='remote-session-control-left'>
+              {controlLeft}
+            </div>
+            <div className='remote-session-control-right'>
+              {controlRight}
+            </div>
+          </div>
+          <div
+            className='remote-session-viewport'
+            ref={this.viewRef}
+          >
+            {children}
+          </div>
+          {overlay}
+          {floatControl}
+        </div>
+      </Spin>
+    )
+  }
+}

package/client/components/common/remote-session-shell.styl

@@ -0,0 +1,80 @@
+// shared remote session (rdp/vnc/spice) shell, see remote-session-shell.jsx
+
+.remote-session-wrap
+  display flex
+  flex-direction column
+  width 100%
+  height 100%
+  min-height 0
+  background var(--main)
+
+// antd Spin root carries the className, both levels must pass the height on
+// or the session inside has nothing to resolve `height: 100%` against
+.remote-session-spin
+  height 100%
+  > .ant-spin-container
+    height 100%
+
+// control bar: one row while there is room, wraps to more rows when the
+// window is narrow, so no action icon ever gets pushed out of reach
+.remote-session-control
+  position relative
+  flex 0 0 auto
+  display flex
+  flex-wrap wrap
+  align-items center
+  justify-content space-between
+  row-gap 4px
+  padding 4px 8px
+  z-index 300
+
+.remote-session-control-left
+.remote-session-control-right
+  display flex
+  flex-wrap wrap
+  align-items center
+  row-gap 4px
+  min-width 0
+
+.remote-session-control-right
+  margin-left auto
+
+.remote-session-viewport
+  position relative
+  flex 1 1 auto
+  display flex
+  min-width 0
+  min-height 0
+  overflow auto
+  // scrolled when fit is off, i.e. the remote surface at its own size
+  &::-webkit-scrollbar
+    width 16px
+    height 16px
+    background var(--main-darker)
+  &::-webkit-scrollbar-track
+    background var(--main-darker)
+    box-shadow inset 0 0 5px var(--main-darker)
+  &::-webkit-scrollbar-thumb
+    background var(--primary)
+    border-radius 0
+  &::-webkit-scrollbar-corner
+    background var(--main-darker)
+  > *
+    flex 0 0 auto
+    margin auto
+
+// fit: scale the remote surface to the viewport, keeping the source aspect
+// ratio, so at most one axis keeps empty margin and fullscreen has as little
+// empty space as the ratio allows
+.remote-session-wrap.fit
+  .remote-session-viewport
+    overflow hidden
+    > *
+      width 100%
+      height 100%
+      margin 0
+
+// surface that should always fill the viewport (noVNC sizes its canvas itself)
+.remote-session-fill
+  width 100%
+  height 100%

package/client/components/common/responsive-tabs.jsx

@@ -0,0 +1,89 @@
+/**
+ * antd Tabs wrapper that collapses to a single tab selector when narrow.
+ *
+ * A row of tabs is the first thing to break down on a phone: antd keeps them
+ * on one line and hides the overflow behind its own dropdown, so the active
+ * tab ends up buried. On mobile this wrapper renders only the active tab with
+ * a down arrow on the right instead — click it to pick another tab from a
+ * dropdown.
+ *
+ * - desktop: every prop is forwarded to antd Tabs untouched, so it is a
+ *   drop-in replacement (`items` / `activeKey` / `onChange` / `type` / `size`
+ *   / `destroyOnHidden` ... all behave as before)
+ * - mobile: renders the active tab only; the tabs come from the same `items`
+ *   array, so callers don't have to describe their tabs twice. The caller's
+ *   `className` goes on the wrapper element (the button carries the
+ *   `responsive-tabs-mobile` class), so a class like `.setting-tabs` keeps
+ *   positioning the selector exactly where it positioned the tab bar.
+ *
+ * Which breakpoint counts as mobile is decided by the caller via `isMobile`
+ * (the setting panel collapses at its own 800px drill-down breakpoint, the
+ * theme form at the global 600px one). When omitted it follows the global
+ * `store.isMobile`.
+ */
+
+import { auto } from 'manate/react'
+import { Dropdown, Tabs } from 'antd'
+import { DownOutlined } from '@ant-design/icons'
+import classNames from 'classnames'
+import './responsive-tabs.styl'
+
+export default auto(function ResponsiveTabs (props) {
+  const {
+    isMobile,
+    items = [],
+    activeKey,
+    onChange,
+    className,
+    ...rest
+  } = props
+  const mobile = isMobile === undefined
+    ? window.store.isMobile
+    : isMobile
+  if (!mobile) {
+    return (
+      <Tabs
+        {...rest}
+        className={className}
+        items={items}
+        activeKey={activeKey}
+        onChange={onChange}
+      />
+    )
+  }
+  const current = items.find(item => item.key === activeKey) || items[0]
+  if (!current) {
+    return null
+  }
+  // item level onClick, same as the session tabs dropdown (tabs/index.jsx):
+  // it fires with the item's own key and keeps onChange single argument
+  const menu = {
+    selectable: true,
+    selectedKeys: [String(activeKey)],
+    items: items.map(item => {
+      return {
+        key: item.key,
+        label: item.label,
+        disabled: item.disabled,
+        onClick: () => onChange && onChange(item.key)
+      }
+    })
+  }
+  return (
+    <div className={classNames('responsive-tabs-mobile-wrap', className)}>
+      <Dropdown
+        menu={menu}
+        trigger={['click']}
+        placement='bottomLeft'
+      >
+        <button
+          type='button'
+          className='responsive-tabs-mobile'
+        >
+          <span className='responsive-tabs-mobile-label elli'>{current.label}</span>
+          <DownOutlined className='responsive-tabs-mobile-icon' />
+        </button>
+      </Dropdown>
+    </div>
+  )
+})

package/client/components/common/responsive-tabs.styl

@@ -0,0 +1,34 @@
+// common/responsive-tabs — the mobile (collapsed) tab bar, see responsive-tabs.jsx
+//
+// .responsive-tabs-mobile-wrap is the element the caller's className lands on
+// (e.g. `.setting-tabs`, which positions the bar absolutely), the button is
+// always full width inside it.
+.responsive-tabs-mobile
+  box-sizing border-box
+  display flex
+  align-items center
+  width 100%
+  height 36px
+  padding 0 10px
+  font-size 13px
+  line-height 1
+  color var(--text)
+  background transparent
+  border 1px solid var(--main-light)
+  border-radius 4px
+  cursor pointer
+  overflow hidden
+  &:hover
+    color var(--primary)
+    border-color var(--primary)
+.responsive-tabs-mobile-label
+  flex 1
+  min-width 0
+  display flex
+  align-items center
+  text-align left
+.responsive-tabs-mobile-icon
+  flex-shrink 0
+  margin-left 8px
+  font-size 11px
+  color var(--text-light)

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) {
@@ -106,11 +106,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 +184,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 +214,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 +233,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)

package/client/components/layout/layout.jsx

@@ -151,7 +151,13 @@ export default auto(function Layout (props) {
     'leftSidePanelWidth',
     'leftSideBarWidth',
     'openedSideBar',
-    'currentQuickCommands'
+    '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 sessionsProps = {
     styles: styles.wrapStyles,

package/client/components/main/main.jsx

@@ -148,7 +148,12 @@ export default auto(function Index (props) {
     'is-mac': isMac,
     'not-mac': !isMac,
     'is-win': isWin,
-    pinned,
+    // The left sidebar dock is desktop-only (see sidebar/index.jsx). This
+    // class drives the docked-layout CSS — the footer's left offset and the
+    // sidebar panel's top padding — so it has to follow the same gate as the
+    // layout maths in layout.jsx, or a pin persisted from a desktop session
+    // would restyle the mobile layout.
+    pinned: pinned && !store.isMobile,
     'not-win': !isWin,
     'qm-pinned': pinnedQuickCommandBar,
     fullscreen,
@@ -226,6 +231,7 @@ export default auto(function Index (props) {
     transferHistory: copiedHistory,
     upgradeInfo,
     pinned,
+    isMobile: store.isMobile,
     leftSideBarIcons: config.leftSideBarIcons,
     widgetInstancesLength: widgetInstances.length
   }
@@ -253,7 +259,8 @@ export default auto(function Index (props) {
     rightPanelPinned: store.rightPanelPinned,
     rightPanelWidth: store.rightPanelWidth,
     title: rightPanelTitle,
-    rightPanelTab
+    rightPanelTab,
+    isMobile: store.isMobile
   }
   const sshConfigProps = {
     ...pick(store, [