Fix mobile UI and shortcut button functions

Author: zxdong262

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "electerm-android",
-  "version": "5.0.7",
+  "version": "5.0.8",
   "description": "electerm for Android — a free and open-source ssh/sftp/telnet/RDP/VNC/Spice/ftp client, built on the electerm-web codebase with Capacitor.",
   "main": "src/app/app.js",
   "type": "module",
@@ -47,7 +47,7 @@
   "preferGlobal": true,
   "devDependencies": {
     "@ant-design/icons": "^6.2.5",
-    "@electerm/electerm-react": "^5.0.7",
+    "@electerm/electerm-react": "^5.0.8",
     "@electerm/electerm-resource": "2.2.1",
     "@fontsource/maple-mono": "^5.2.6",
     "@novnc/novnc": "^1.7.0",

package.json

@@ -85,7 +85,12 @@ const charKeys = {
 
 // Button layout. Each entry: { id, label, type }
 // type: 'seq' = terminal sequence, 'char' = insert character,
-//       'toggle' = modifier toggle, 'done' = dismiss keyboard
+//       'toggle' = modifier toggle, 'done' = dismiss keyboard,
+//       'hide' = collapse the bar (keep the keyboard)
+//
+// NOTE: the 'hide' button is intentionally NOT in this list. It is rendered
+// outside the scroll container (see render()) so it stays pinned to the left
+// even when the user scrolls the key row all the way to the end.
 const buttonLayout = [
   { id: 'esc', label: 'ESC', type: 'seq' },
   { id: 'tab', label: 'TAB', type: 'seq' },
@@ -124,6 +129,7 @@ export default class KeyboardAccessoryBar extends Component {
     super(props)
     this.state = {
       visible: false,
+      hidden: false,
       isTerminal: false,
       ctrlActive: false,
       altActive: false
@@ -137,13 +143,32 @@ export default class KeyboardAccessoryBar extends Component {
     // Use focusin/focusout (bubbling) to detect when any input is focused.
     document.addEventListener('focusin', this.handleFocusIn, true)
     document.addEventListener('focusout', this.handleFocusOut, true)
+    this._syncBarHeight()
+  }
+
+  componentDidUpdate () {
+    this._syncBarHeight()
   }
 
   componentWillUnmount () {
     document.removeEventListener('focusin', this.handleFocusIn, true)
     document.removeEventListener('focusout', this.handleFocusOut, true)
     clearTimeout(this._focusTimer)
     this._restoreSendData()
+    // Give the reserved space back.
+    document.documentElement.style.setProperty('--kb-bar-h', '0px')
+  }
+
+  /**
+   * Publish the bar's height as --kb-bar-h on :root so the page can reserve
+   * that much space at the bottom and the bar never covers content (see the
+   * matching rules in keyboard-accessory-bar.styl). 0 when hidden/collapsed.
+   */
+  _syncBarHeight = () => {
+    const h = (this.state.visible && !this.state.hidden && this._barEl)
+      ? this._barEl.offsetHeight
+      : 0
+    document.documentElement.style.setProperty('--kb-bar-h', h + 'px')
   }
 
   handleFocusIn = (e) => {
@@ -159,7 +184,7 @@ export default class KeyboardAccessoryBar extends Component {
     // Small delay so focusout→focusin rapid switching (e.g. tapping a bar
     // button) doesn't cause a hide→show flicker.
     this._focusTimer = setTimeout(() => {
-      this.setState({ visible: true, isTerminal })
+      this.setState({ visible: true, hidden: false, isTerminal })
     }, 50)
   }
 
@@ -173,6 +198,7 @@ export default class KeyboardAccessoryBar extends Component {
       if (!isInput) {
         this.setState({
           visible: false,
+          hidden: false,
           ctrlActive: false,
           altActive: false
         })
@@ -318,11 +344,18 @@ export default class KeyboardAccessoryBar extends Component {
     const { isTerminal } = this.state
 
     switch (btn.type) {
+      case 'hide': {
+        // Collapse the bar but keep the keyboard open so the user can still
+        // type. A floating button (rendered in render()) brings it back.
+        this.setState({ hidden: true, ctrlActive: false, altActive: false })
+        this._restoreSendData()
+        break
+      }
       case 'done': {
         // Dismiss the keyboard by blurring the focused element.
         const el = document.activeElement
         if (el && el.blur) el.blur()
-        this.setState({ visible: false, ctrlActive: false, altActive: false })
+        this.setState({ visible: false, hidden: false, ctrlActive: false, altActive: false })
         this._restoreSendData()
         break
       }
@@ -382,6 +415,7 @@ export default class KeyboardAccessoryBar extends Component {
       const active = btn.id === 'ctrl' ? ctrlActive : altActive
       cls += active ? ' kb-key-active' : ''
     }
+    if (btn.id === 'hide') cls += ' kb-key-hide'
     if (btn.id === 'done') cls += ' kb-key-done'
     if (btn.id === 'backspace') cls += ' kb-key-wide'
     if (btn.id === 'enter') cls += ' kb-key-enter'
@@ -401,12 +435,46 @@ export default class KeyboardAccessoryBar extends Component {
   }
 
   render () {
-    if (!this.state.visible) return null
+    const { visible, hidden } = this.state
+    if (!visible) return null
+    // Collapsed: render just a small floating button to bring the bar back.
+    // The keyboard stays open; only the bar is hidden.
+    if (hidden) {
+      return (
+        <button
+          className='kb-accessory-show'
+          aria-label='Show keyboard toolbar'
+          // Keep focus on the terminal/input underneath.
+          onMouseDown={(e) => e.preventDefault()}
+          onTouchStart={(e) => e.preventDefault()}
+          onClick={() => this.setState({ hidden: false })}
+          type='button'
+        >
+          ▴
+        </button>
+      )
+    }
     const { isTerminal } = this.state
     return (
-      <div className='kb-accessory-bar'>
-        <div className='kb-accessory-scroll'>
-          {buttonLayout.map(btn => this.renderButton(btn))}
+      <div
+        className='kb-accessory-bar'
+        ref={(el) => { this._barEl = el }}
+      >
+        <div className='kb-accessory-row'>
+          {/* Pinned hide button — always visible at the left, never scrolls. */}
+          <button
+            className='kb-key kb-key-hide'
+            aria-label='Hide keyboard toolbar'
+            onMouseDown={(e) => e.preventDefault()}
+            onTouchStart={(e) => e.preventDefault()}
+            onClick={(e) => this.handleButton({ id: 'hide', type: 'hide' }, e)}
+            type='button'
+          >
+            ▾
+          </button>
+          <div className='kb-accessory-scroll'>
+            {buttonLayout.map(btn => this.renderButton(btn))}
+          </div>
         </div>
         {!isTerminal && (
           <div className='kb-accessory-hint'>

src/client/web-components/keyboard-accessory-bar.jsx

@@ -18,11 +18,19 @@
   -webkit-user-select none
   -webkit-tap-highlight-color transparent
 
+// Row that holds the pinned hide button + the horizontally scrolling keys.
+.kb-accessory-row
+  display flex
+  align-items center
+  gap 6px
+  padding 4px 6px
+
 .kb-accessory-scroll
+  flex 1 1 auto
+  min-width 0
   display flex
   align-items center
   gap 2px
-  padding 4px 6px
   overflow-x auto
   overflow-y hidden
   scrollbar-width none
@@ -69,6 +77,40 @@
   &:active
     opacity 0.7
 
+// Hide (collapse) button — pinned to the left of the bar, outside the scroll
+// area, so it is always reachable even when the key row is scrolled to the end.
+.kb-key-hide
+  flex-shrink 0
+  font-size 15px
+  opacity 0.8
+  &:active
+    opacity 0.55
+
+// Floating "bring the bar back" button shown while the bar is collapsed.
+.kb-accessory-show
+  position fixed
+  right 10px
+  bottom 10px
+  z-index 9998
+  width 36px
+  height 36px
+  border-radius 50%
+  border 1px solid var(--border-color, #3a3d42)
+  background var(--primary, #4a90d9)
+  color #fff
+  font-size 16px
+  line-height 1
+  display flex
+  align-items center
+  justify-content center
+  box-shadow 0 2px 8px rgba(0, 0, 0, 0.3)
+  cursor pointer
+  user-select none
+  -webkit-user-select none
+  -webkit-tap-highlight-color transparent
+  &:active
+    opacity 0.7
+
 .kb-key-wide
   min-width 48px
 
@@ -80,3 +122,30 @@
   font-size 10px
   color var(--text-light, #8b909f)
   text-align center
+
+// ---------------------------------------------------------------------------
+// Reserve space so the accessory bar never covers page content.
+//
+// The bar publishes its live height as --kb-bar-h (in px) on :root via JS
+// (KeyboardAccessoryBar._syncBarHeight). It is set to the bar's pixel height
+// while the bar is visible & expanded, and 0 otherwise — so these rules are
+// no-ops unless the bar is actually on screen.
+:root
+  --kb-bar-h 0px
+
+.is-mobile
+  // Lift the footer (which carries the batch input) so its own input is not
+  // hidden behind the bar. .main-footer is position:absolute; bottom:0.
+  .main-footer
+    bottom var(--kb-bar-h, 0px)
+  // Shrink the terminal area by the bar height so the last terminal rows are
+  // not covered. border-box keeps .term-wrap inside its layout cell; xterm's
+  // FitAddon re-measures the (now shorter) .xterm and drops rows accordingly.
+  .term-wrap
+    box-sizing border-box
+    padding-bottom var(--kb-bar-h, 0px)
+  // Fullscreen terminal: term-wrap-1 is the inset box (bottom:10px).
+  &.fullscreen
+    .session-wrap.session-current
+      .term-wrap-1
+        bottom calc(10px + var(--kb-bar-h, 0px)) !important