@electerm/electerm-react 1.100.18 → 1.100.30

package/client/common/default-setting.js

@@ -68,5 +68,6 @@ export default {
   sshSftpSplitView: false,
   showCmdSuggestions: false,
   startDirectoryLocal: '',
-  allowMultiInstance: false
+  allowMultiInstance: false,
+  disableDeveloperTool: false
 }

package/client/common/get-category-color.js

@@ -0,0 +1,19 @@
+/**
+ * Get default color from current category or random color
+ */
+
+import { getRandomDefaultColor } from './rand-hex-color.js'
+
+export function getColorFromCategory (bookmarkGroups, currentBookmarkGroupId) {
+  if (!currentBookmarkGroupId || !bookmarkGroups) {
+    return getRandomDefaultColor()
+  }
+
+  const currentGroup = bookmarkGroups.find(group => group.id === currentBookmarkGroupId)
+
+  if (currentGroup && currentGroup.color) {
+    return currentGroup.color
+  }
+
+  return getRandomDefaultColor()
+}

package/client/components/bookmark-form/bookmark-category-select.jsx

@@ -0,0 +1,80 @@
+/**
+ * Common bookmark category select component that automatically updates color when category changes
+ */
+
+import { useEffect } from 'react'
+import { TreeSelect, Form } from 'antd'
+import formatBookmarkGroups from './bookmark-group-tree-format'
+
+const FormItem = Form.Item
+const e = window.translate
+
+export default function BookmarkCategorySelect ({
+  bookmarkGroups = [],
+  form,
+  formItemLayout,
+  name = 'category',
+  onChange
+}) {
+  const tree = formatBookmarkGroups(bookmarkGroups)
+
+  // Watch for category field changes using Form.useWatch
+  const categoryId = Form.useWatch(name, form)
+
+  // Find the selected category
+  const findCategory = (groups, id) => {
+    for (const group of groups) {
+      if (group.id === id) {
+        return group
+      }
+      if (group.bookmarkGroupTree && group.bookmarkGroupTree.length > 0) {
+        const found = findCategory(group.bookmarkGroupTree, id)
+        if (found) return found
+      }
+    }
+    return null
+  }
+
+  // Watch for category field changes and update color accordingly
+  useEffect(() => {
+    if (categoryId) {
+      const category = findCategory(bookmarkGroups, categoryId)
+      if (category && category.color) {
+        form.setFieldsValue({
+          color: category.color
+        })
+      }
+    }
+  }, [categoryId, bookmarkGroups, form])
+
+  const handleCategoryChange = (categoryId) => {
+    const category = findCategory(bookmarkGroups, categoryId)
+
+    // Only update the color field if the category has a color
+    if (category && category.color) {
+      form.setFieldsValue({
+        color: category.color
+      })
+    }
+
+    // Call the original onChange if provided
+    if (onChange) {
+      onChange(categoryId)
+    }
+  }
+
+  return (
+    <FormItem
+      {...formItemLayout}
+      label={e('bookmarkCategory')}
+      name={name}
+    >
+      <TreeSelect
+        treeData={tree}
+        treeDefaultExpandAll
+        showSearch
+        onChange={handleCategoryChange}
+      />
+    </FormItem>
+  )
+}

package/client/components/bookmark-form/form-ssh-common.jsx

@@ -5,7 +5,6 @@ import {
   Input,
   InputNumber,
   Radio,
-  TreeSelect,
   Select,
   Form
 } from 'antd'
@@ -15,9 +14,9 @@ import {
 import { formItemLayout, tailFormItemLayout } from '../../common/form-layout'
 import InputAutoFocus from '../common/input-auto-focus'
 import encodes from './encodes'
-import formatBookmarkGroups from './bookmark-group-tree-format'
 import renderRunScripts from './render-delayed-scripts.jsx'
 import { ColorPickerItem } from './color-picker-item.jsx'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 import './bookmark-form.styl'
 
@@ -38,7 +37,6 @@ export default function renderCommon (props) {
     onChangeAuthType,
     filterAuthType = a => a
   } = props
-  const tree = formatBookmarkGroups(bookmarkGroups)
   const authTypesFiltered = authTypes.filter(filterAuthType)
 
   // ips is ipaddress string[]
@@ -140,17 +138,11 @@ export default function renderCommon (props) {
           step={1}
         />
       </FormItem>
-      <FormItem
-        {...formItemLayout}
-        label={e('bookmarkCategory')}
-        name='category'
-      >
-        <TreeSelect
-          treeData={tree}
-          treeDefaultExpandAll
-          showSearch
-        />
-      </FormItem>
+      <BookmarkCategorySelect
+        bookmarkGroups={bookmarkGroups}
+        form={form}
+        formItemLayout={formItemLayout}
+      />
       <FormItem
         {...formItemLayout}
         label={e('title')}

package/client/components/bookmark-form/ftp-form-ui.jsx

@@ -7,7 +7,6 @@ import {
   Input,
   Form,
   InputNumber,
-  TreeSelect,
   Switch
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
@@ -19,10 +18,10 @@ import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults, isEmpty } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
-import formatBookmarkGroups from './bookmark-group-tree-format'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import ProfileItem from './profile-form-item'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -55,7 +54,7 @@ export default function FtpFormUi (props) {
     type: terminalFtpType,
     port: 21,
     category: initBookmarkGroupId,
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     user: '',
     password: '',
     secure: false
@@ -66,7 +65,6 @@ export default function FtpFormUi (props) {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         <FormItem
@@ -131,17 +129,10 @@ export default function FtpFormUi (props) {
         >
           <Switch />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         <FormItem
           {...formItemLayout}
           label='type'

package/client/components/bookmark-form/local-form-ui.jsx

@@ -6,7 +6,6 @@ import { useEffect } from 'react'
 import {
   Tabs,
   Input,
-  TreeSelect,
   Form
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
@@ -14,7 +13,6 @@ import {
   newBookmarkIdPrefix,
   terminalLocalType
 } from '../../common/constants'
-import formatBookmarkGroups from './bookmark-group-tree-format'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import useSubmit from './use-submit'
 import useUI from './use-ui'
@@ -24,7 +22,8 @@ import renderTermBg from './render-bg'
 import { defaults } from 'lodash-es'
 import renderRunScripts from './render-delayed-scripts.jsx'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { getColorFromCategory } from '../../common/get-category-color.js'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -60,7 +59,7 @@ export default function LocalFormUi (props) {
     term: props.store.config.terminalType,
     displayRaw: false,
     type: terminalLocalType,
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     runScripts: [{}],
     enableSsh: true
   }
@@ -69,7 +68,6 @@ export default function LocalFormUi (props) {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         {renderRunScripts()}
@@ -90,17 +88,10 @@ export default function LocalFormUi (props) {
         >
           <Input.TextArea autoSize={{ minRows: 1 }} />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         <FormItem
           {...formItemLayout}
           label='type'

package/client/components/bookmark-form/rdp-form-ui.jsx

@@ -7,7 +7,6 @@ import {
   Input,
   Form,
   InputNumber,
-  TreeSelect,
   Alert
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
@@ -20,11 +19,11 @@ import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults, isEmpty } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
-import formatBookmarkGroups from './bookmark-group-tree-format'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import ProfileItem from './profile-form-item'
 import Link from '../common/external-link'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -57,7 +56,7 @@ export default function RdpFormUi (props) {
     type: terminalRdpType,
     port: 3389,
     category: initBookmarkGroupId,
-    color: getRandomDefaultColor()
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId)
 
   }
   initialValues = defaults(initialValues, defaultValues)
@@ -65,7 +64,6 @@ export default function RdpFormUi (props) {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     const alertProps = {
       message: (
         <Link to={rdpWikiLink}>WIKI: {rdpWikiLink}</Link>
@@ -150,17 +148,10 @@ export default function RdpFormUi (props) {
         >
           <Input />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         <FormItem
           {...formItemLayout}
           label='type'

package/client/components/bookmark-form/serial-form-ui.jsx

@@ -11,8 +11,7 @@ import {
   Select,
   Switch,
   AutoComplete,
-  Form,
-  TreeSelect
+  Form
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
 import parseInt10 from '../../common/parse-int10'
@@ -24,7 +23,6 @@ import {
   terminalSerialType,
   newBookmarkIdPrefix
 } from '../../common/constants'
-import formatBookmarkGroups from './bookmark-group-tree-format'
 import defaultSettings from '../../common/default-setting'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import useSubmit from './use-submit'
@@ -33,8 +31,9 @@ import useQm from './use-quick-commands'
 import copy from 'json-deep-copy'
 import renderTermBg from './render-bg'
 import { defaults } from 'lodash-es'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import { ColorPickerItem } from './color-picker-item.jsx'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const { Option } = Select
@@ -67,7 +66,7 @@ export default function SerialFormUi (props) {
     : currentBookmarkGroupId
   let initialValues = copy(props.formData)
   const defaultValues = {
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     baudRate: 9600,
     dataBits: 8,
     lock: true,
@@ -91,7 +90,6 @@ export default function SerialFormUi (props) {
       serials = [],
       loaddingSerials
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         <FormItem
@@ -257,17 +255,11 @@ export default function SerialFormUi (props) {
         >
           <Input />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+          formItemLayout={formItemLayout}
+        />
       </div>
     )
   }

package/client/components/bookmark-form/ssh-form-ui.jsx

@@ -26,7 +26,7 @@ import renderAuth from './render-auth-ssh'
 import renderTermBg from './render-bg'
 import renderSshTunnel from './render-ssh-tunnel'
 import renderConnectionHopping from './render-connection-hopping'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import defaultSetting from '../../common/default-setting'
 import './bookmark-form.styl'
 
@@ -61,7 +61,7 @@ export default function BookmarkFormUI (props) {
     port: 22,
     authType: authTypeMap.password,
     id: '',
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     term: props.store.config.terminalType,
     displayRaw: false,
     encode: encodes[0],

package/client/components/bookmark-form/telnet-form-ui.jsx

@@ -21,7 +21,7 @@ import useUI from './use-ui'
 import useQm from './use-quick-commands'
 import renderCommon from './form-ssh-common'
 import renderTermBg from './render-bg'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import copy from 'json-deep-copy'
 import { defaultsDeep, isEmpty } from 'lodash-es'
 import renderAuth from './render-auth-ssh'
@@ -65,7 +65,7 @@ export default function TelnetFormUI (props) {
     id: '',
     username: 'root',
     password: 'guest',
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     runScripts: [{}],
     term: defaultSettings.terminalType,
     displayRaw: false,

package/client/components/bookmark-form/vnc-form-ui.jsx

@@ -7,7 +7,6 @@ import {
   Input,
   Form,
   InputNumber,
-  TreeSelect,
   Switch,
   Tabs
 } from 'antd'
@@ -20,12 +19,12 @@ import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults, isEmpty } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
-import formatBookmarkGroups from './bookmark-group-tree-format'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
 import renderProxy from './proxy'
 import ConnectionHopping from './render-connection-hopping.jsx'
 import ProfileItem from './profile-form-item'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -58,7 +57,7 @@ export default function VncFormUi (props) {
     type: terminalVncType,
     port: 5900,
     category: initBookmarkGroupId,
-    color: getRandomDefaultColor(),
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId),
     viewOnly: false,
     scaleViewport: true,
     connectionHoppings: []
@@ -100,7 +99,6 @@ export default function VncFormUi (props) {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         <FormItem
@@ -181,17 +179,10 @@ export default function VncFormUi (props) {
         >
           <Input.TextArea autoSize={{ minRows: 1 }} />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         {
           renderProxy(props)
         }

package/client/components/bookmark-form/web-form-ui.jsx

@@ -6,7 +6,6 @@ import { useEffect } from 'react'
 import {
   Input,
   Form,
-  TreeSelect,
   Switch
 } from 'antd'
 import { formItemLayout } from '../../common/form-layout'
@@ -18,9 +17,9 @@ import useSubmit from './use-submit'
 import copy from 'json-deep-copy'
 import { defaults } from 'lodash-es'
 import { ColorPickerItem } from './color-picker-item.jsx'
-import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
-import formatBookmarkGroups from './bookmark-group-tree-format'
+import { getColorFromCategory } from '../../common/get-category-color.js'
 import findBookmarkGroupId from '../../common/find-bookmark-group-id'
+import BookmarkCategorySelect from './bookmark-category-select.jsx'
 
 const FormItem = Form.Item
 const e = window.translate
@@ -52,14 +51,13 @@ export default function LocalFormUi (props) {
   const defaultValues = {
     type: terminalWebType,
     category: initBookmarkGroupId,
-    color: getRandomDefaultColor()
+    color: getColorFromCategory(bookmarkGroups, currentBookmarkGroupId)
   }
   initialValues = defaults(initialValues, defaultValues)
   function renderCommon () {
     const {
       bookmarkGroups = []
     } = props
-    const tree = formatBookmarkGroups(bookmarkGroups)
     return (
       <div className='pd1x'>
         <FormItem
@@ -100,17 +98,10 @@ export default function LocalFormUi (props) {
         >
           <Input.TextArea autoSize={{ minRows: 1 }} />
         </FormItem>
-        <FormItem
-          {...formItemLayout}
-          label={e('bookmarkCategory')}
-          name='category'
-        >
-          <TreeSelect
-            treeData={tree}
-            treeDefaultExpandAll
-            showSearch
-          />
-        </FormItem>
+        <BookmarkCategorySelect
+          bookmarkGroups={bookmarkGroups}
+          form={form}
+        />
         <FormItem
           {...formItemLayout}
           label={e('useragent')}

package/client/components/quick-commands/quick-commands-list.jsx

@@ -145,9 +145,19 @@ export default class QuickCommandsList extends List {
     const f = keyword
       ? list.filter((item) => {
         const n = (item.name || '').toLowerCase()
-        const c = (item.command || '').toLowerCase()
         const k = keyword.toLowerCase()
-        return n.includes(k) || c.includes(k)
+
+        // Check if item has commands array
+        if (item.commands && Array.isArray(item.commands)) {
+          // Search in each command in the commands array
+          return n.includes(k) || item.commands.some(cmd =>
+            (cmd.command || '').toLowerCase().includes(k)
+          )
+        } else {
+          // Fallback to the old behavior for backward compatibility
+          const c = (item.command || '').toLowerCase()
+          return n.includes(k) || c.includes(k)
+        }
       })
       : list
     return labels.length

package/client/components/setting-panel/setting-common.jsx

@@ -670,6 +670,7 @@ export default class SettingCommon extends Component {
             'confirmBeforeExit',
             'hideIP',
             'allowMultiInstance',
+            'disableDeveloperTool',
             'debug'
           ].map(this.renderToggle)
         }

package/client/components/sftp/file-read.js

@@ -46,8 +46,8 @@ export const getLocalFileInfo = async (filePath) => {
   const stat = await fs.lstatAsync(filePath)
   return {
     size: stat.size,
-    accessTime: stat.atime,
-    modifyTime: stat.mtime,
+    accessTime: stat.atime || stat.atimeMs,
+    modifyTime: stat.mtime || stat.mtimeMs,
     mode: stat.mode,
     owner: stat.uid,
     group: stat.gid,

package/client/components/sftp/sftp-entry.jsx

@@ -526,9 +526,14 @@ export default class Sftp extends Component {
       if (updates.remotePath !== undefined) {
         updates.remoteKeyword = ''
       }
+
+      // For selectedFiles updates, call setState immediately for better responsiveness
+      if (updates.selectedFiles !== undefined) {
+        return this.setState(...args)
+      }
     }
 
-    // Call setState with the modified arguments
+    // For other updates, use runIdle to avoid blocking the UI
     runIdle(() => this.setState(...args))
   }
 

package/client/components/terminal/terminal.jsx

@@ -151,7 +151,7 @@ class Term extends Component {
           this.attachAddon._sendData(PS1_SETUP_CMD)
           this.term.cwdId = cwdId
         } else {
-          log.warn('Term or attachAddon not ready for PS1_SETUP_CMD in componentDidUpdate')
+          console.warn('Term or attachAddon not ready for PS1_SETUP_CMD in componentDidUpdate')
         }
       } else {
         if (this.attachAddon) {
@@ -895,7 +895,7 @@ class Term extends Component {
       if (this.attachAddon) {
         this.attachAddon._sendData(PS1_SETUP_CMD)
       } else {
-        log.warn('attachAddon not ready for PS1_SETUP_CMD in getCwd fallback')
+        console.warn('attachAddon not ready for PS1_SETUP_CMD in getCwd fallback')
       }
     }
   }
@@ -1065,7 +1065,7 @@ class Term extends Component {
         const cmd = `cd "${startFolder}"\r`
         this.attachAddon._sendData(cmd)
       } else {
-        log.warn('attachAddon not ready for cd command in runInitScript')
+        console.warn('attachAddon not ready for cd command in runInitScript')
       }
     }
 
@@ -1074,7 +1074,7 @@ class Term extends Component {
         this.attachAddon._sendData(PS1_SETUP_CMD)
         this.term.cwdId = cwdId
       } else {
-        log.warn('Term or attachAddon not ready for PS1_SETUP_CMD in runInitScript')
+        console.warn('Term or attachAddon not ready for PS1_SETUP_CMD in runInitScript')
       }
     }
 

package/client/components/tree-list/category-color-picker.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ColorPicker } from '../bookmark-form/color-picker.jsx'
+
+export function CategoryColorPicker ({ value, onChange }) {
+  return (
+    <ColorPicker
+      value={value}
+      onChange={onChange}
+    />
+  )
+}

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

@@ -195,6 +195,16 @@ export default function TreeListItem (props) {
     }
   )
   const tag = isGroup ? '' : createTitleTag(item)
+  const colorTag = isGroup && item.color
+    ? (
+      <span
+        className='category-color-tag'
+        style={{
+          backgroundColor: item.color
+        }}
+      />
+      )
+    : null
   const title = isGroup
     ? item.title
     : createName(item)
@@ -236,7 +246,7 @@ export default function TreeListItem (props) {
       <div
         {...titleProps}
       >
-        {tag}{titleHighlight}
+        {colorTag}{tag}{titleHighlight}
       </div>
       {
         isGroup

package/client/components/tree-list/tree-list.jsx

@@ -28,6 +28,8 @@ import TreeExpander from './tree-expander'
 import TreeListItem from './tree-list-item'
 import TreeSearch from './tree-search'
 import MoveItemModal from './move-item-modal'
+import { CategoryColorPicker } from './category-color-picker.jsx'
+import { getRandomDefaultColor } from '../../common/rand-hex-color.js'
 
 export default class ItemListTree extends Component {
   constructor (props) {
@@ -41,7 +43,9 @@ export default class ItemListTree extends Component {
       moveItem: null,
       moveItemIsGroup: false,
       bookmarkGroupTitle: '',
+      bookmarkGroupColor: '',
       categoryTitle: '',
+      categoryColor: '',
       categoryId: ''
     }
   }
@@ -110,7 +114,8 @@ export default class ItemListTree extends Component {
   handleCancelNew = () => {
     this.setState({
       showNewBookmarkGroupForm: false,
-      bookmarkGroupTitle: ''
+      bookmarkGroupTitle: '',
+      bookmarkGroupColor: ''
     })
   }
 
@@ -123,7 +128,8 @@ export default class ItemListTree extends Component {
   handleCancelEdit = () => {
     this.setState({
       categoryId: '',
-      categoryTitle: ''
+      categoryTitle: '',
+      categoryColor: ''
     })
   }
 
@@ -140,6 +146,7 @@ export default class ItemListTree extends Component {
   handleSubmitEdit = () => {
     const {
       categoryTitle,
+      categoryColor,
       categoryId
     } = this.state
     if (!categoryTitle) {
@@ -153,6 +160,9 @@ export default class ItemListTree extends Component {
       return this.handleCancelEdit()
     }
     obj.title = categoryTitle
+    if (categoryColor) {
+      obj.color = categoryColor
+    }
     this.setState({
       categoryId: ''
     })
@@ -181,6 +191,18 @@ export default class ItemListTree extends Component {
     })
   }
 
+  handleChangeBookmarkGroupColor = color => {
+    this.setState({
+      bookmarkGroupColor: color
+    })
+  }
+
+  handleChangeCategoryColor = color => {
+    this.setState({
+      categoryColor: color
+    })
+  }
+
   handleNewBookmark = () => {
     this.props.onClickItem(getInitItem([], settingMap.bookmarks))
   }
@@ -197,11 +219,15 @@ export default class ItemListTree extends Component {
       showNewBookmarkGroupForm: false
     }, () => {
       this.onSubmit = false
-      window.store.addBookmarkGroup({
+      const newGroup = {
         id: uid(),
         title: this.state.bookmarkGroupTitle,
         bookmarkIds: []
-      })
+      }
+      if (this.state.bookmarkGroupColor) {
+        newGroup.color = this.state.bookmarkGroupColor
+      }
+      window.store.addBookmarkGroup(newGroup)
     })
   }
 
@@ -227,6 +253,9 @@ export default class ItemListTree extends Component {
       level: 2,
       bookmarkIds: []
     }
+    if (this.state.bookmarkGroupColor) {
+      newCat.color = this.state.bookmarkGroupColor
+    }
     bookmarkGroups.unshift(newCat)
     const cat = bookmarkGroups.find(
       d => d.id === id
@@ -244,6 +273,7 @@ export default class ItemListTree extends Component {
     this.setState({
       showNewBookmarkGroupForm: true,
       bookmarkGroupTitle: '',
+      bookmarkGroupColor: getRandomDefaultColor(),
       parentId: ''
     })
   }
@@ -309,6 +339,7 @@ export default class ItemListTree extends Component {
     if (isGroup) {
       this.setState({
         categoryTitle: '' + item.title,
+        categoryColor: item.color || '',
         categoryId: item.id,
         bookmarkGroupSubParentId: ''
       })
@@ -322,7 +353,8 @@ export default class ItemListTree extends Component {
       return {
         showNewBookmarkGroupForm: true,
         parentId: item.id,
-        bookmarkGroupTitle: ''
+        bookmarkGroupTitle: '',
+        bookmarkGroupColor: ''
       }
     })
     window.store.expandedKeys.push(item.id)
@@ -519,7 +551,8 @@ export default class ItemListTree extends Component {
 
   editCategory = () => {
     const {
-      categoryTitle
+      categoryTitle,
+      categoryColor
     } = this.state
     const confirm = (
       <span>
@@ -527,11 +560,18 @@ export default class ItemListTree extends Component {
         <CloseOutlined className='mg1l pointer' onClick={this.handleCancelEdit} />
       </span>
     )
+    const colorPicker = (
+      <CategoryColorPicker
+        value={categoryColor || getRandomDefaultColor()}
+        onChange={this.handleChangeCategoryColor}
+      />
+    )
     return (
       <InputAutoFocus
         value={categoryTitle}
         onChange={this.handleChangeEdit}
         onPressEnter={this.handleSubmitEdit}
+        addonBefore={colorPicker}
         addonAfter={confirm}
       />
     )
@@ -693,6 +733,7 @@ export default class ItemListTree extends Component {
   renderNewCat = (group) => {
     const {
       bookmarkGroupTitle,
+      bookmarkGroupColor,
       parentId,
       showNewBookmarkGroupForm
     } = this.state
@@ -705,12 +746,19 @@ export default class ItemListTree extends Component {
         <CloseOutlined className='mg1l pointer' onClick={this.handleCancelNew} />
       </span>
     )
+    const colorPicker = (
+      <CategoryColorPicker
+        value={bookmarkGroupColor || getRandomDefaultColor()}
+        onChange={this.handleChangeBookmarkGroupColor}
+      />
+    )
     return (
       <div className='pd1y'>
         <InputAutoFocus
           value={bookmarkGroupTitle}
           onPressEnter={this.handleSubmit}
           onChange={this.handleChangeBookmarkGroupTitle}
+          addonBefore={colorPicker}
           addonAfter={confirm}
           onBlur={this.handleBlurBookmarkGroupTitle}
         />

package/client/components/tree-list/tree-list.styl

@@ -67,4 +67,13 @@
   top 0
   width 12px
   font-size 11px
-  line-height 30px
+  line-height 30px
+
+.category-color-tag
+  display inline-block
+  width 12px
+  height 12px
+  margin-right 6px
+  border-radius 2px
+  border 1px solid rgba(0,0,0,0.1)
+  vertical-align middle

package/client/store/load-data.js

@@ -81,17 +81,22 @@ export async function addTabFromCommandLine (store, opts) {
     const opts = safeParse(options.opts)
     if (opts !== options.opts) {
       Object.assign(update, opts)
+      update.fromCmdLine = true
     }
   }
-  if (options.type) {
-    update.type = options.type
+  if (options.tp) {
+    update.type = options.tp
+    update.fromCmdLine = true
   }
   Object.assign(conf, update)
   if (options.privateKeyPath) {
     conf.privateKey = await fs.readFile(options.privateKeyPath)
   }
   log.debug('command line opts', conf)
-  if (conf.username && conf.host) {
+  if (
+    (conf.username && conf.host) ||
+    conf.fromCmdLine
+  ) {
     store.addTab(conf)
   } else if (
     options.initFolder &&

package/client/store/sync.js

@@ -514,7 +514,8 @@ export default (Store) => {
       'modelAI',
       'roleAI',
       'languageAI',
-      'proxyAI'
+      'proxyAI',
+      'disableDeveloperTool'
     ]
     return pick(store.config, configSyncKeys)
   }

package/package.json

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