@electerm/electerm-react 5.5.15 → 5.5.25

package/client/components/theme/theme-list-item.jsx

@@ -2,13 +2,13 @@
  * theme list render
  */
 
-import { useState } from 'react'
+import { useEffect, useState } from 'react'
 import {
   CheckCircleOutlined,
+  CloseOutlined,
   PlusOutlined,
   SunOutlined,
-  MoonOutlined,
-  EyeOutlined
+  MoonOutlined
 } from '@ant-design/icons'
 import { Tag, Tooltip, Button, Space } from 'antd'
 import classnames from 'classnames'
@@ -30,46 +30,72 @@ export default function ThemeListItem (props) {
   const [tooltipVisible, setTooltipVisible] = useState(false)
   const [isPreviewing, setIsPreviewing] = useState(false)
 
-  function handleClickApply () {
-    setTooltipVisible(false)
-    setIsPreviewing(false)
-    delete window.originalTheme
+  function startPreview () {
+    // keep the very first original, hopping between themes must never
+    // overwrite it with a theme that is itself only a preview
+    if (!window.originalTheme) {
+      window.originalTheme = store.config.theme
+    }
     store.setTheme(item.id)
+    setIsPreviewing(true)
   }
 
-  function handleClickPreview () {
-    if (!isPreviewing) {
-      // Store current theme ID before changing
-      const currentTheme = window.store.config.theme
-      window.originalTheme = currentTheme
-      // Apply the preview theme
-      store.setTheme(item.id)
-      setIsPreviewing(true)
+  function cancelPreview () {
+    if (window.originalTheme) {
+      store.setTheme(window.originalTheme)
+      delete window.originalTheme
     }
+    setIsPreviewing(false)
   }
 
-  function handleTooltipVisibleChange (visible) {
-    setTooltipVisible(visible)
-    if (!visible && isPreviewing) {
-      // Restore original theme when tooltip closes during preview
+  useEffect(() => {
+    return () => {
+      // leaving the list mid preview (switching settings tab, filtering the
+      // list, ...) must not leave the user stuck on a theme never applied
       if (window.originalTheme) {
         store.setTheme(window.originalTheme)
         delete window.originalTheme
       }
-      setIsPreviewing(false)
+    }
+  }, [])
+
+  function handleClickApply () {
+    delete window.originalTheme
+    setIsPreviewing(false)
+    setTooltipVisible(false)
+    store.setTheme(item.id)
+  }
+
+  function handleClickCancel () {
+    cancelPreview()
+    setTooltipVisible(false)
+  }
+
+  function handleTooltipVisibleChange (visible) {
+    setTooltipVisible(visible)
+    // opening the popup is the preview itself; every other way of closing it
+    // (click elsewhere, esc, clicking the icon again) rolls the preview back
+    if (visible) {
+      startPreview()
+    } else {
+      cancelPreview()
     }
   }
 
+  function handleClickApplyIcon (e) {
+    // previewing must not also load the theme into the edit form
+    e.stopPropagation()
+  }
+
   function renderTooltipContent () {
     return (
       <Space.Compact>
         <Button
           size='small'
-          icon={<EyeOutlined />}
-          onClick={handleClickPreview}
-          type={isPreviewing ? 'primary' : 'default'}
+          icon={<CloseOutlined />}
+          onClick={handleClickCancel}
         >
-          {e('preview')}
+          {e('cancel')}
         </Button>
         <Button
           size='small'
@@ -96,7 +122,15 @@ export default function ThemeListItem (props) {
         placement='top'
       >
         <CheckCircleOutlined
-          className='pointer list-item-apply'
+          className={
+            classnames(
+              'pointer list-item-apply',
+              {
+                'list-item-apply-previewing': isPreviewing
+              }
+            )
+          }
+          onClick={handleClickApplyIcon}
         />
       </Tooltip>
     )

package/client/css/mobile.styl

@@ -11,6 +11,34 @@
   .remote-monitor-bar
     position fixed
 
+  // Side panels are full-screen drawers on mobile: they start at the viewport
+  // edge (the left one covers the icon bar too, so no strip of terminal is left
+  // showing) and run to the bottom edge — footer included. On desktop the
+  // footer is reserved *beside* the panel because it holds the panel's own
+  // trigger; on mobile the drawer is dismissed from its header (✕ / the
+  // bookmark/history tabs) instead, so there is nothing to keep clear. The
+  // inline width already comes from store.leftSidePanelWidth / rightPanelWidth,
+  // which are the viewport width here.
+  // Both are on the fixed frame (the right panel explicitly: its bottom edge
+  // must not drift from the fixed footer when the visual viewport changes), and
+  // both have to outrank the footer's 200 — it comes later in the DOM, so at an
+  // equal rank it would paint over the drawer. The left drawer lives inside
+  // .sidebar, which is its own stacking context (z-index 100), so lifting the
+  // drawer alone is not enough: the whole sidebar column has to clear the
+  // footer. The right panel is a root-level child, so its own z-index suffices.
+  // The icon bar takes no extra room from this: it is 43px wide and the footer
+  // starts at 44px.
+  .sidebar
+    z-index 250
+  .sidebar-list
+    left 0
+    bottom 0
+    z-index 250
+  .right-side-panel
+    position fixed
+    bottom 0
+    z-index 250
+
   // ---- 1. Tabs: show only current tab + dropdown, close icon always visible
   .tabs.mobile-tabs
     display flex

package/client/store/common.js

@@ -10,6 +10,7 @@ import {
   leftSidePanelWidthKey,
   leftSideBarOpenKey,
   rightSidebarWidthKey,
+  rightPanelPinnedKey,
   addPanelWidthLsKey,
   connectionMap,
   lastAiChatSessionIdKey,
@@ -42,6 +43,18 @@ export default Store => {
     window.store.setConfig(ext)
   }
 
+  // The footer info icon is a toggle: the same click opens and closes the
+  // panel, so the trigger never has to be hunted down in the panel header.
+  Store.prototype.toggleInfoPanel = action(function () {
+    const { store } = window
+    const isOpen = store.rightPanelVisible && store.rightPanelTab === 'info'
+    store.rightPanelVisible = !isOpen
+    store.rightPanelTab = 'info'
+    if (!isOpen) {
+      store.openInfoPanelAction()
+    }
+  })
+
   Store.prototype.openInfoPanel = action(function () {
     const { store } = window
     store.rightPanelVisible = true
@@ -122,7 +135,13 @@ export default Store => {
     Object.assign(window.store._termSearchOptions, update)
   }
 
+  // Both panel widths are desktop-only preferences: on mobile the panel is a
+  // full-width drawer whose width is fixed, so a drag (or any other caller)
+  // must not overwrite the desktop value that is still in localStorage.
   Store.prototype.setLeftSidePanelWidth = function (v) {
+    if (window.store.isMobile) {
+      return
+    }
     ls.setItem(leftSidePanelWidthKey, v)
     window.store._leftSidePanelWidth = v
   }
@@ -144,9 +163,22 @@ export default Store => {
   }
 
   Store.prototype.setRightSidePanelWidth = function (v) {
+    if (window.store.isMobile) {
+      return
+    }
     ls.setItem(rightSidebarWidthKey, v)
     window.store._rightPanelWidth = v
   }
+
+  // Persist the pin the same way the left sidebar does (sidebarPinnedKey):
+  // pinned is a durable layout preference, not a per-session toggle. It matters
+  // more here because pinned and unpinned are visibly different modes — the
+  // unpinned panel is an overlay that clears the footer, the pinned one is a
+  // full-height dock.
+  Store.prototype.setRightPanelPinned = function (v) {
+    ls.setItem(rightPanelPinnedKey, v + '')
+    window.store.rightPanelPinned = v
+  }
   Store.prototype.beforeExit = function (evt) {
     const { confirmBeforeExit } = window.store.config
     if (
@@ -286,6 +318,18 @@ export default Store => {
     }
   }
 
+  // Same toggle contract as toggleInfoPanel: the footer AI button opens and
+  // closes its own panel. The open path must go through handleOpenAIPanel so
+  // the missing-config prompt still fires; closing must not touch config.
+  Store.prototype.toggleAIPanel = function () {
+    const { store } = window
+    if (store.rightPanelVisible && store.rightPanelTab === 'ai') {
+      store.rightPanelVisible = false
+      return
+    }
+    store.handleOpenAIPanel()
+  }
+
   Store.prototype.explainWithAi = function (txt) {
     const { store } = window
     store.handleOpenAIPanel()

package/client/store/init-state.js

@@ -18,6 +18,7 @@ import {
   localAddrBookmarkLsKey,
   leftSidePanelWidthKey,
   rightSidebarWidthKey,
+  rightPanelPinnedKey,
   addPanelWidthLsKey,
   qmSortByFrequencyKey,
   resolutionsLsKey,
@@ -125,7 +126,7 @@ export default () => {
     terminalInfoProps: {},
     rightPanelVisible: false,
     rightPanelTab: 'info',
-    rightPanelPinned: false,
+    rightPanelPinned: ls.getItem(rightPanelPinnedKey) === 'true',
     _rightPanelWidth: parseInt(ls.getItem(rightSidebarWidthKey), 10) || 500,
     showAIConfigModal: false,
 

package/client/store/sidebar.js

@@ -25,7 +25,11 @@ export default Store => {
   // through this one method.
   Store.prototype.openLeftSidePanel = function (field = 'bookmarks') {
     const { store } = window
-    if (store.pinned) {
+    // A pinned panel is already open, so there is nothing to toggle — except
+    // on mobile, where pinning is not a reachable mode (no pin control) and
+    // the panel is a full-width overlay. Honouring a stale desktop pin here
+    // would leave the bookmark button dead on arrival.
+    if (store.pinned && !store.isMobile) {
       return
     }
     store.setOpenedSideBar(store.openedSideBar ? '' : field)

package/client/store/store.js

@@ -61,10 +61,15 @@ class Store {
     return window.store.innerWidth
   }
 
+  // Mobile turns a side panel into a full-screen drawer: it spans the whole
+  // viewport and its width is not user-adjustable. So the stored desktop width
+  // is ignored here, and so is the icon bar (the drawer covers it) — and the
+  // old 500px cap, which left a strip of terminal showing on windows between
+  // 500 and 600px, i.e. the top of the mobile range.
   get leftSidePanelWidth () {
     const { store } = window
     if (store.isMobile) {
-      return Math.min(store.innerWidth - store.leftSideBarWidth, 500)
+      return store.innerWidth
     }
     return store._leftSidePanelWidth
   }
@@ -78,10 +83,12 @@ class Store {
     return store._leftSideBarOpen ? sidebarWidth : 0
   }
 
+  // Same as leftSidePanelWidth: full-screen drawer on mobile, width not
+  // user-adjustable.
   get rightPanelWidth () {
     const { store } = window
     if (store.isMobile) {
-      return Math.min(store.innerWidth, 500)
+      return store.innerWidth
     }
     return store._rightPanelWidth
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@electerm/electerm-react",
-  "version": "5.5.15",
+  "version": "5.5.25",
   "description": "react components src for electerm",
   "main": "./client/components/main/main.jsx",
   "license": "MIT",