@electerm/electerm-react 5.5.9 → 5.5.15

package/client/common/download.jsx

@@ -7,6 +7,18 @@ import { chooseSaveDirectory } from './choose-save-folder'
 import { DownloadOutlined } from '@ant-design/icons'
 
 export default async function download (filename, text) {
+  // iOS WKWebView: sandbox targets are invisible to the Files app and
+  // blob-anchor downloads are a no-op — save to Documents (visible in
+  // Files) via the native bridge instead (see
+  // web-components/native-file-save.js).
+  if (window.et && window.et.isWebApp && window.et.saveTextNative) {
+    try {
+      await window.et.saveTextNative(filename, text)
+      return
+    } catch (e) {
+      console.log('native save failed, falling back to sandbox save:', e)
+    }
+  }
   const opts = window.et.isWebApp
     ? { filename, content: text }
     : undefined

package/client/common/resolve.js

@@ -13,24 +13,30 @@ export const isWslDistroRoot = (path) => {
 }
 
 export default function resolve (basePath, nameOrDot) {
+  // Callers can hand this a value that is not a path yet (a session path that
+  // is still loading, a missing tab option, ...). Reading `.includes` off it
+  // used to throw and take the whole renderer down with a white screen, so
+  // anything that is not a string is treated as an empty path here.
+  const base = typeof basePath === 'string' ? basePath : ''
+  const name = typeof nameOrDot === 'string' ? nameOrDot : ''
   const hasWinDrive = (path) => /^[a-zA-Z]:/.test(path)
-  const isWin = basePath.includes('\\') || nameOrDot.includes('\\') || hasWinDrive(basePath) || hasWinDrive(nameOrDot)
+  const isWin = base.includes('\\') || name.includes('\\') || hasWinDrive(base) || hasWinDrive(name)
   const sep = isWin ? '\\' : '/'
-  if (/^[a-zA-Z]:/.test(nameOrDot)) {
-    return nameOrDot.replace(/^\//, '').replace(/\//g, sep)
+  if (/^[a-zA-Z]:/.test(name)) {
+    return name.replace(/^\//, '').replace(/\//g, sep)
   }
-  if (nameOrDot.startsWith('/')) {
-    return nameOrDot.replace(/\\/g, sep)
+  if (name.startsWith('/')) {
+    return name.replace(/\\/g, sep)
   }
-  if (nameOrDot.startsWith('\\\\')) {
-    return nameOrDot
+  if (name.startsWith('\\\\')) {
+    return name
   }
-  if (nameOrDot === '..') {
-    if (isWslDistroRoot(basePath)) {
+  if (name === '..') {
+    if (isWslDistroRoot(base)) {
       return '/'
     }
-    const baseEndsWithSep = basePath.endsWith(sep)
-    const parts = basePath.split(sep)
+    const baseEndsWithSep = base.endsWith(sep)
+    const parts = base.split(sep)
     if (parts.length > 1) {
       parts.pop()
       if (isWin && parts.length === 1) {
@@ -40,10 +46,10 @@ export default function resolve (basePath, nameOrDot) {
     }
     return '/'
   }
-  if (isWslDistroRoot(basePath) && !basePath.endsWith(sep)) {
-    return basePath + sep + nameOrDot
+  if (isWslDistroRoot(base) && !base.endsWith(sep)) {
+    return base + sep + name
   }
-  const result = basePath.endsWith(sep) ? basePath + nameOrDot : basePath + sep + nameOrDot
+  const result = base.endsWith(sep) ? base + name : base + sep + name
   return isWin && result.length === 3 && result.endsWith(':\\') ? '/' : result
 }
 

package/client/components/ai/ai-history-item.jsx

@@ -30,7 +30,7 @@ export default function AiHistoryItem (props) {
       onClick={() => onSelect(item)}
       className='pointer'
     >
-      {displayItem}
+      <span className='ai-history-label'>{displayItem}</span>
     </Tag>
   )
 

package/client/components/ai/ai-history.jsx

@@ -5,6 +5,7 @@ import { useState, useEffect } from 'react'
 import { Space } from 'antd'
 import { safeGetItemJSON, safeSetItemJSON } from '../../common/safe-local-storage'
 import AiHistoryItem from './ai-history-item'
+import './ai-history.styl'
 
 const MAX_HISTORY = 20
 

package/client/components/ai/ai-history.styl

@@ -0,0 +1,23 @@
+// AI history items (ai-history.jsx / ai-history-item.jsx)
+//
+// Each entry is an antd Tag: nowrap, no max-width, and the text is a user
+// written description up to 50 chars long. Space renders an inline-flex box,
+// which shrink-to-fits its widest *unwrappable* child — so one long entry
+// pushes the whole panel into horizontal scrolling instead of using the width
+// it already has. The label gets its own ellipsis box so the tag can shrink to
+// the available width while the close icon stays reachable.
+.ai-bookmark-history
+  .ant-space
+    display flex
+  .ant-space-item
+    min-width 0
+  .ant-tag
+    max-width 100%
+
+.ai-history-label
+  display inline-block
+  // leave room for the tag close icon
+  max-width calc(100% - 16px)
+  overflow hidden
+  text-overflow ellipsis
+  vertical-align middle

package/client/components/bookmark-form/common/color-picker.styl

@@ -10,6 +10,9 @@
   width 92px
 .color-picker-box
   width 420px
+  // the popover is portaled to the body, a 420px box simply falls off a phone
+  // screen (measured: the swatch list and the antd picker still fit at 280px)
+  max-width calc(100vw - 40px)
 
 .color-picker-defaults
   width 200px

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)