only leave a process running on macOS- fixes #4442

Bumps [macos-release](https://github.com/sindresorhus/macos-release) from 2.5.0 to 3.0.0.
- [Release notes](https://github.com/sindresorhus/macos-release/releases)
- [Commits](https://github.com/sindresorhus/macos-release/compare/v2.5.0...v3.0.0)

---
updated-dependencies:
- dependency-name: macos-release
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

.all-contributorsrc

@@ -433,6 +433,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "al-wi",
+      "name": "Alexander Wiedemann",
+      "avatar_url": "https://avatars.githubusercontent.com/u/11092199?v=4",
+      "profile": "https://github.com/al-wi",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

.eslintrc.yml

@@ -121,3 +121,8 @@ rules:
   '@typescript-eslint/no-unsafe-argument': off
   '@typescript-eslint/restrict-plus-operands': off
   '@typescript-eslint/space-infix-ops': off
+  '@typescript-eslint/no-type-alias':
+  - error
+  - allowAliases: in-unions-and-intersections
+    allowLiterals: always
+    allowCallbacks: always

.github/workflows/build.yml

@@ -11,7 +11,7 @@ jobs:
         fetch-depth: 0
 
     - name: Installing Node
-      uses: actions/setup-node@v2.2.0
+      uses: actions/setup-node@v2.4.0
       with:
         node-version: 14
 
@@ -46,7 +46,7 @@ jobs:
         fetch-depth: 0
 
     - name: Installing Node
-      uses: actions/setup-node@v2.2.0
+      uses: actions/setup-node@v2.4.0
       with:
         node-version: 14
 
@@ -139,7 +139,7 @@ jobs:
         fetch-depth: 0
 
     - name: Install Node
-      uses: actions/setup-node@v2.2.0
+      uses: actions/setup-node@v2.4.0
       with:
         node-version: 14
 
@@ -245,7 +245,7 @@ jobs:
         fetch-depth: 0
 
     - name: Installing Node
-      uses: actions/setup-node@v2.2.0
+      uses: actions/setup-node@v2.4.0
       with:
         node-version: 14
 

.github/workflows/docs.yml

@@ -12,7 +12,7 @@ jobs:
         fetch-depth: 0
 
     - name: Installing Node
-      uses: actions/setup-node@v2.2.0
+      uses: actions/setup-node@v2.4.0
       with:
         node-version: 14
 

.github/workflows/release.yml

@@ -0,0 +1,19 @@
+---
+name: "tagged-release"
+
+on:
+  push:
+    tags:
+      - "v*"
+
+jobs:
+  tagged-release:
+    name: "Tagged Release"
+    runs-on: "ubuntu-latest"
+
+    steps:
+      - uses: "marvinpinto/action-automatic-releases@latest"
+        with:
+          repo_token: "${{ secrets.GITHUB_TOKEN }}"
+          prerelease: false
+          draft: true

README.md

@@ -7,12 +7,19 @@
 
 <p align="center">
   <a href="https://ko-fi.com/J3J8KWTF">
-    <img src="https://ko-fi.com/img/githubbutton_sm.svg">
+    <img src="https://cdn.ko-fi.com/cdn/kofi3.png?v=2" width="150">
   </a>
 </p>
 
 ----
 
+### Downloads:
+
+* [Latest release](https://github.com/Eugeny/tabby/releases/latest)
+* [Nightly build](https://nightly.link/Eugeny/tabby/workflows/build/master)
+
+----
+
 **Tabby** (formerly **Terminus**) is a highly configurable terminal emulator, SSH and serial client for Windows, macOS and Linux
 
 * Integrated SSH client and connection manager
@@ -96,10 +103,10 @@ Tabby will run as a portable app on Windows, if you create a `data` folder in th
 Plugins and themes can be installed directly from the Settings view inside Tabby.
 
   * [clickable-links](https://github.com/Eugeny/tabby-clickable-links) - makes paths and URLs in the terminal clickable
+  * [docker](https://github.com/Eugeny/tabby-docker) - connect to Docker containers
   * [title-control](https://github.com/kbjr/terminus-title-control) - allows modifying the title of the terminal tabs by providing a prefix, suffix, and/or strings to be removed
   * [quick-cmds](https://github.com/Domain/terminus-quick-cmds) - quickly send commands to one or all terminal tabs
   * [save-output](https://github.com/Eugeny/tabby-save-output) - record terminal output into a file
-  * [scrollbar](https://github.com/kbjr/terminus-scrollbar) - adds a scrollbar to hterm tabs
   * [sync-config](https://github.com/starxg/terminus-sync-config) - sync the config to Gist or Gitee
 
 <a name="themes"></a>
@@ -187,6 +194,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <td align="center"><a href="https://git.io/JnP49"><img src="https://avatars.githubusercontent.com/u/63876444?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Logic Machine</b></sub></a><br /><a href="https://github.com/Eugeny/tabby/commits?author=logicmachine123" title="Documentation">📖</a></td>
     <td align="center"><a href="https://github.com/cypherbits"><img src="https://avatars.githubusercontent.com/u/10424900?v=4?s=100" width="100px;" alt=""/><br /><sub><b>cypherbits</b></sub></a><br /><a href="https://github.com/Eugeny/tabby/commits?author=cypherbits" title="Documentation">📖</a></td>
     <td align="center"><a href="https://modulolotus.net"><img src="https://avatars.githubusercontent.com/u/946421?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Matthew Davidson</b></sub></a><br /><a href="https://github.com/Eugeny/tabby/commits?author=KingMob" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/al-wi"><img src="https://avatars.githubusercontent.com/u/11092199?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Alexander Wiedemann</b></sub></a><br /><a href="https://github.com/Eugeny/tabby/commits?author=al-wi" title="Code">💻</a></td>
   </tr>
 </table>
 

app/lib/app.ts

@@ -3,6 +3,7 @@ import * as promiseIpc from 'electron-promise-ipc'
 import * as remote from '@electron/remote/main'
 import * as path from 'path'
 import * as fs from 'fs'
+import { Subject, throttleTime } from 'rxjs'
 
 import { loadConfig } from './config'
 import { Window, WindowOptions } from './window'
@@ -19,6 +20,7 @@ export class Application {
     private tray?: Tray
     private ptyManager = new PTYManager()
     private windows: Window[] = []
+    private globalHotkey$ = new Subject<void>()
     userPluginsPath: string
 
     constructor () {
@@ -33,12 +35,14 @@ export class Application {
         ipcMain.on('app:register-global-hotkey', (_event, specs) => {
             globalShortcut.unregisterAll()
             for (const spec of specs) {
-                globalShortcut.register(spec, () => {
-                    this.onGlobalHotkey()
-                })
+                globalShortcut.register(spec, () => this.globalHotkey$.next())
             }
         })
 
+        this.globalHotkey$.pipe(throttleTime(100)).subscribe(() => {
+            this.onGlobalHotkey()
+        })
+
         ;(promiseIpc as any).on('plugin-manager:install', (name, version) => {
             return pluginManager.install(this.userPluginsPath, name, version)
         })

app/lib/index.ts

@@ -1,3 +1,4 @@
+import 'v8-compile-cache'
 import './portable'
 import 'source-map-support/register'
 import './sentry'
@@ -26,7 +27,9 @@ app.on('activate', () => {
 })
 
 app.on('window-all-closed', () => {
-    app.quit()
+    if (process.platform !== 'darwin') {
+        app.quit()
+    }
 })
 
 process.on('uncaughtException' as any, err => {

app/lib/pty.ts

@@ -1,4 +1,4 @@
-import * as nodePTY from 'node-pty'
+import * as nodePTY from '@tabby-gang/node-pty'
 import { StringDecoder } from './stringDecoder'
 import { v4 as uuidv4 } from 'uuid'
 import { ipcMain } from 'electron'

app/lib/window.ts

@@ -1,7 +1,7 @@
 import * as glasstron from 'glasstron'
 
 import { Subject, Observable, debounceTime } from 'rxjs'
-import { BrowserWindow, app, ipcMain, Rectangle, Menu, screen, BrowserWindowConstructorOptions } from 'electron'
+import { BrowserWindow, app, ipcMain, Rectangle, Menu, screen, BrowserWindowConstructorOptions, TouchBar, nativeImage } from 'electron'
 import ElectronConfig = require('electron-config')
 import * as os from 'os'
 import * as path from 'path'
@@ -28,6 +28,8 @@ abstract class GlasstronWindow extends BrowserWindow {
 
 const macOSVibrancyType = process.platform === 'darwin' ? compareVersions.compare(macOSRelease().version, '10.14', '>=') ? 'fullscreen-ui' : 'dark' : null
 
+const activityIcon = nativeImage.createFromPath(`${app.getAppPath()}/assets/activity.png`)
+
 export class Window {
     ready: Promise<void>
     private visible = new Subject<boolean>()
@@ -39,6 +41,7 @@ export class Window {
     private lastVibrancy: { enabled: boolean, type?: string } | null = null
     private disableVibrancyWhileDragging = false
     private configStore: any
+    private touchBarControl: any
 
     get visible$ (): Observable<boolean> { return this.visible }
     get closed$ (): Observable<void> { return this.closed }
@@ -127,7 +130,15 @@ export class Window {
         this.window.webContents.setVisualZoomLevelLimits(1, 1)
         this.window.webContents.setZoomFactor(1)
 
-        if (process.platform !== 'darwin') {
+        if (process.platform === 'darwin') {
+            this.touchBarControl = new TouchBar.TouchBarSegmentedControl({
+                segments: [],
+                change: index => this.send('touchbar-selection', index),
+            })
+            this.window.setTouchBar(new TouchBar({
+                items: [this.touchBarControl],
+            }))
+        } else {
             this.window.setMenu(null)
         }
 
@@ -357,6 +368,14 @@ export class Window {
             this.window.close()
         })
 
+        ipcMain.on('window-set-touch-bar', (_event, segments, selectedIndex) => {
+            this.touchBarControl.segments = segments.map(s => ({
+                label: s.label,
+                icon: s.hasActivity ? activityIcon : undefined,
+            }))
+            this.touchBarControl.selectedIndex = selectedIndex
+        })
+
         this.window.webContents.on('new-window', event => event.preventDefault())
 
         ipcMain.on('window-set-disable-vibrancy-while-dragging', (_event, value) => {

app/package.json

@@ -14,6 +14,7 @@
     "watch": "webpack --progress --color --watch"
   },
   "dependencies": {
+    "@angular/cdk": "^12.2.0",
     "@electron/remote": "1.2.0",
     "any-promise": "^1.3.0",
     "electron-config": "2.0.0",
@@ -25,11 +26,12 @@
     "keytar": "^7.7.0",
     "mz": "^2.7.0",
     "native-process-working-directory": "^1.0.2",
-    "node-pty": "^0.10.1",
+    "@tabby-gang/node-pty": "^0.11.0-beta.200",
     "npm": "6",
     "rxjs": "^7.2.0",
     "source-map-support": "^0.5.19",
-    "yargs": "^17.0.1"
+    "v8-compile-cache": "^2.3.0",
+    "yargs": "^17.1.0"
   },
   "optionalDependencies": {
     "macos-native-processlist": "^2.0.0",

app/src/entry.preload.ts

@@ -1,3 +1,4 @@
+import 'v8-compile-cache'
 import '../lib/lru'
 import 'source-sans-pro/source-sans-pro.css'
 import 'source-code-pro/source-code-pro.css'

app/src/global.scss

@@ -28,7 +28,6 @@ body {
 
 .form-line {
     display: flex;
-    border-top: 1px solid rgba(0, 0, 0, 0.2);
     align-items: center;
     padding: 10px 0;
     margin: 0;

app/src/plugins.ts

@@ -58,7 +58,7 @@ nodeModule.prototype.require = function (query: string) {
     return originalModuleRequire.call(this, query)
 }
 
-export type ProgressCallback = (current: number, total: number) => void // eslint-disable-line @typescript-eslint/no-type-alias
+export type ProgressCallback = (current: number, total: number) => void
 
 export function initModuleLookup (userPluginsPath: string): void {
     global['module'].paths.map((x: string) => nodeModule.globalPaths.push(normalizePath(x)))

app/webpack.config.js

@@ -40,27 +40,14 @@ module.exports = {
             { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
             { test: /\.css$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
             {
-                test: /\.(png|svg)$/,
-                use: {
-                    loader: 'url-loader',
-                    options: {
-                        limit: 999999,
-                    },
-                },
-            },
-            {
-                test: /\.(ttf|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
-                use: {
-                    loader: 'file-loader',
-                    options: {
-                        name: 'fonts/[name].[ext]',
-                    },
-                },
+                test: /\.(png|svg|ttf|eot|otf|woff|woff2)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+                type: 'asset',
             },
         ],
     },
     externals: {
         '@electron/remote': 'commonjs @electron/remote',
+        'v8-compile-cache': 'commonjs v8-compile-cache',
         child_process: 'commonjs child_process',
         electron: 'commonjs electron',
         fs: 'commonjs fs',

app/webpack.main.config.js

@@ -34,6 +34,7 @@ module.exports = {
         ],
     },
     externals: {
+        'v8-compile-cache': 'commonjs v8-compile-cache',
         'any-promise': 'commonjs any-promise',
         electron: 'commonjs electron',
         'electron-config': 'commonjs electron-config',
@@ -43,7 +44,8 @@ module.exports = {
         glasstron: 'commonjs glasstron',
         mz: 'commonjs mz',
         npm: 'commonjs npm',
-        'node-pty': 'commonjs node-pty',
+        'node:os': 'commonjs os',
+        '@tabby-gang/node-pty': 'commonjs @tabby-gang/node-pty',
         path: 'commonjs path',
         util: 'commonjs util',
         'source-map-support': 'commonjs source-map-support',

app/yarn.lock

@@ -2,6 +2,15 @@
 # yarn lockfile v1
 
 
+"@angular/cdk@^12.2.0":
+  version "12.2.0"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-12.2.0.tgz#7c6de53522ef7cf911d86e187f3df2a90e8fee49"
+  integrity sha512-Dts+KIMz6EdzQxaWBFcNwgWAHVPkI5pnOGMidKKVOmjezSUN6mhfBKq8emgsddJMRAqz/1VHMAEaRkp0VoBKiA==
+  dependencies:
+    tslib "^2.2.0"
+  optionalDependencies:
+    parse5 "^5.0.0"
+
 "@electron/remote@1.2.0":
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/@electron/remote/-/remote-1.2.0.tgz#772eb4c3ac17aaba5a9cf05a09092f6277f5671f"
@@ -87,6 +96,13 @@
   dependencies:
     debug "^4.3.1"
 
+"@tabby-gang/node-pty@^0.11.0-beta.200":
+  version "0.11.0-beta.200"
+  resolved "https://registry.yarnpkg.com/@tabby-gang/node-pty/-/node-pty-0.11.0-beta.200.tgz#485cd6d85a04f4b272b81a9862578d7fc38cdfb5"
+  integrity sha512-32ANParjnd38SzvICaLYvEBlTZAE2sqsgEZPK6ITgd38FcCsS/yvvsDZcjkclbxApnMM2rJDaYjsZMa0lr9Iyg==
+  dependencies:
+    nan "^2.14.0"
+
 "@types/mz@2.7.4":
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/@types/mz/-/mz-2.7.4.tgz#f9d1535cb5171199b28ae6abd6ec29e856551401"
@@ -2086,13 +2102,6 @@ node-gyp@^5.0.2, node-gyp@^5.1.0:
     tar "^4.4.12"
     which "^1.3.1"
 
-node-pty@^0.10.1:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/node-pty/-/node-pty-0.10.1.tgz#cd05d03a2710315ec40221232ec04186f6ac2c6d"
-  integrity sha512-JTdtUS0Im/yRsWJSx7yiW9rtpfmxqxolrtnyKwPLI+6XqTAPW/O2MjS8FYL4I5TsMbH2lVgDb2VMjp+9LoQGNg==
-  dependencies:
-    nan "^2.14.0"
-
 noop-logger@^0.1.1:
   version "0.1.1"
   resolved "https://registry.npmjs.org/noop-logger/-/noop-logger-0.1.1.tgz"
@@ -2558,6 +2567,11 @@ parse-json@^2.2.0:
   dependencies:
     error-ex "^1.2.0"
 
+parse5@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.1.tgz#f68e4e5ba1852ac2cadc00f4555fff6c2abb6178"
+  integrity sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==
+
 path-exists@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/path-exists/-/path-exists-3.0.0.tgz"
@@ -3394,10 +3408,10 @@ tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
-tslib@^2.0.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.2.0.tgz#fb2c475977e35e241311ede2693cee1ec6698f5c"
-  integrity sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w==
+tslib@^2.0.0, tslib@^2.2.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.0.tgz#803b8cdab3e12ba581a4ca41c8839bbb0dacb09e"
+  integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
 tslib@~2.1.0:
   version "2.1.0"
@@ -3519,6 +3533,11 @@ uuid@^3.0.1, uuid@^3.3.2, uuid@^3.3.3:
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
   integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
 
+v8-compile-cache@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
+  integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
+
 validate-npm-package-license@^3.0.1, validate-npm-package-license@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz"
@@ -3726,10 +3745,10 @@ yargs@^14.2.3:
     y18n "^4.0.0"
     yargs-parser "^15.0.1"
 
-yargs@^17.0.1:
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.0.1.tgz#6a1ced4ed5ee0b388010ba9fd67af83b9362e0bb"
-  integrity sha512-xBBulfCc8Y6gLFcrPvtqKz9hz8SO0l1Ni8GgDekvBX2ro0HRQImDGnikfc33cgzcYUSncapnNcZDjVFIH3f6KQ==
+yargs@^17.1.0:
+  version "17.1.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.1.0.tgz#0cd9827a0572c9a1795361c4d1530e53ada168cf"
+  integrity sha512-SQr7qqmQ2sNijjJGHL4u7t8vyDZdZ3Ahkmo4sc1w5xI9TBX0QDdG/g4SFnxtWOsGLjwHQue57eFALfwFCnixgg==
   dependencies:
     cliui "^7.0.2"
     escalade "^3.1.1"

package.json

@@ -7,9 +7,9 @@
     "@angular/forms": "^12.0.0",
     "@angular/platform-browser": "^12.0.0",
     "@angular/platform-browser-dynamic": "^12.0.0",
-    "@fortawesome/fontawesome-free": "^5.15.3",
+    "@fortawesome/fontawesome-free": "^5.15.4",
     "@ng-bootstrap/ng-bootstrap": "^10.0.0",
-    "@sentry/cli": "^1.67.1",
+    "@sentry/cli": "^1.67.2",
     "@sentry/electron": "^2.5.1",
     "@tabby-gang/to-string-loader": "^1.1.7-beta.2",
     "@types/electron-config": "^3.2.2",
@@ -19,34 +19,34 @@
     "@types/node": "16.0.1",
     "@types/sortablejs": "^1.10.7",
     "@types/webpack-env": "^1.16.2",
-    "@typescript-eslint/eslint-plugin": "^4.28.3",
-    "@typescript-eslint/parser": "^4.28.3",
+    "@typescript-eslint/eslint-plugin": "^4.29.0",
+    "@typescript-eslint/parser": "^4.28.5",
     "apply-loader": "2.0.0",
     "axios": "^0.21.1",
     "clone-deep": "^4.0.1",
     "compare-versions": "^3.6.0",
     "core-js": "^3.15.2",
     "cross-env": "7.0.3",
-    "css-loader": "5.2.6",
-    "electron": "13.1.7",
+    "css-loader": "^6.2.0",
+    "electron": "13.1.9",
     "electron-builder": "22.10.5",
     "electron-download": "^4.1.1",
     "electron-installer-snap": "^5.1.0",
-    "electron-notarize": "^1.0.0",
-    "electron-rebuild": "^2.3.5",
-    "eslint": "^7.30.0",
+    "electron-notarize": "^1.0.1",
+    "electron-rebuild": "^3.1.1",
+    "eslint": "^7.32.0",
     "eslint-plugin-import": "^2.23.4",
     "file-loader": "^6.2.0",
-    "graceful-fs": "^4.2.6",
+    "graceful-fs": "^4.2.8",
     "html-loader": "2.1.2",
     "json-loader": "0.5.7",
     "lru-cache": "^6.0.0",
-    "macos-release": "^2.5.0",
+    "macos-release": "^3.0.0",
     "ngx-sortablejs": "^11.1.0",
     "ngx-toastr": "^14.0.0",
     "node-abi": "^2.30.0",
     "node-sass": "^6.0.1",
-    "npmlog": "4.1.2",
+    "npmlog": "5.0.0",
     "npx": "^10.2.2",
     "patch-package": "^6.4.7",
     "pug": "^3.0.2",
@@ -58,21 +58,20 @@
     "sass-loader": "^12.1.0",
     "shell-quote": "^1.7.2",
     "shelljs": "0.8.4",
-    "slugify": "^1.5.3",
+    "slugify": "^1.6.0",
     "sortablejs": "^1.14.0",
     "source-code-pro": "^2.38.0",
     "source-map-loader": "^3.0.0",
     "source-sans-pro": "3.6.0",
-    "ssh2": "^1.1.0",
-    "style-loader": "^3.1.0",
+    "ssh2": "^1.2.0",
+    "style-loader": "^3.2.1",
     "svg-inline-loader": "^0.8.2",
     "ts-loader": "^9.2.3",
     "tslib": "^2.3.0",
-    "typedoc": "^0.21.4",
+    "typedoc": "^0.21.5",
     "typescript": "^4.3.5",
-    "url-loader": "^4.1.1",
     "val-loader": "4.0.0",
-    "webpack": "^5.43.0",
+    "webpack": "^5.50.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^4.7.0",
     "yaml-loader": "0.6.0",
@@ -90,7 +89,7 @@
     "start": "cross-env TABBY_DEV=1 electron app --debug --inspect",
     "start:prod": "electron app --debug",
     "prod": "cross-env TABBY_DEV=1 electron app",
-    "docs": "typedoc --out docs/api --tsconfig tabby-core/src/tsconfig.typings.json tabby-core/src/index.ts && typedoc --out docs/api/terminal --tsconfig tabby-terminal/tsconfig.typings.json tabby-terminal/src/index.ts && typedoc --out docs/api/local --tsconfig tabby-local/tsconfig.typings.json tabby-local/src/index.ts && typedoc --out docs/api/settings --tsconfig tabby-settings/tsconfig.typings.json tabby-settings/src/index.ts",
+    "docs": "typedoc --emit --out docs/api --tsconfig tabby-core/src/tsconfig.typings.json tabby-core/src/index.ts && typedoc --emit --out docs/api/terminal --tsconfig tabby-terminal/tsconfig.typings.json tabby-terminal/src/index.ts && typedoc --emit --out docs/api/local --tsconfig tabby-local/tsconfig.typings.json tabby-local/src/index.ts && typedoc --emit --out docs/api/settings --tsconfig tabby-settings/tsconfig.typings.json tabby-settings/src/index.ts",
     "lint": "eslint --ext ts */src */lib",
     "postinstall": "node ./scripts/install-deps.js",
     "patch": "patch-package; cd web; patch-package"

patches/ssh2+1.1.0.patch

@@ -1,15 +0,0 @@
-diff --git a/node_modules/ssh2/lib/protocol/Protocol.js b/node_modules/ssh2/lib/protocol/Protocol.js
-index b4d1ee0..1e3ac66 100644
---- a/node_modules/ssh2/lib/protocol/Protocol.js
-+++ b/node_modules/ssh2/lib/protocol/Protocol.js
-@@ -254,8 +254,8 @@ class Protocol {
-       );
-       if (greeting)
-         this._onWrite(greeting);
--      this._onWrite(this._identRaw);
--      this._onWrite(CRLF);
-+      this._onWrite(Buffer.concat([this._identRaw, CRLF]));
-+      // this._onWrite(CRLF);
-     });
-   }
-   _destruct(reason) {

scripts/build-modules.js

@@ -13,6 +13,10 @@ const configs = [
 ;(async () => {
     for (const c of configs) {
         log.info('build', c)
-        await promisify(webpack)(require(c))
+        const stats = await promisify(webpack)(require(c))
+        console.log(stats.toString({ colors: true }))
+        if (stats.hasErrors()) {
+            process.exit(1)
+        }
     }
 })()

scripts/install-deps.js

@@ -20,7 +20,7 @@ sh.cd('web')
 sh.exec(`${npx} yarn install --force`)
 sh.cd('..')
 
-vars.builtinPlugins.forEach(plugin => {
+vars.allPackages.forEach(plugin => {
     log.info('deps', plugin)
     sh.cd(plugin)
     sh.exec(`${npx} yarn install --force`)

scripts/sentry-upload.js

@@ -9,7 +9,7 @@ sh.exec(`${sentryCli} releases new ${vars.version}`)
 if (process.platform === 'darwin') {
     for (const path of [
         'app/node_modules/@serialport/bindings/build/Release/bindings.node',
-        'app/node_modules/node-pty/build/Release/pty.node',
+        'app/node_modules/@tabby-gang/node-pty/build/Release/pty.node',
         'app/node_modules/fontmanager-redux/build/Release/fontmanager.node',
         'app/node_modules/macos-native-processlist/build/Release/native.node',
     ]) {

scripts/vars.js

@@ -17,14 +17,14 @@ exports.builtinPlugins = [
     'tabby-core',
     'tabby-settings',
     'tabby-terminal',
-    'tabby-electron',
-    'tabby-local',
     'tabby-web',
     'tabby-community-color-schemes',
-    'tabby-plugin-manager',
     'tabby-ssh',
     'tabby-serial',
     'tabby-telnet',
+    'tabby-electron',
+    'tabby-local',
+    'tabby-plugin-manager',
 ]
 
 exports.allPackages = [

tabby-community-color-schemes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabby-community-color-schemes",
-  "version": "1.0.148-nightly.2",
+  "version": "1.0.150",
   "description": "Community color schemes for Tabby",
   "keywords": [
     "tabby-builtin-plugin"

tabby-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabby-core",
-  "version": "1.0.148-nightly.2",
+  "version": "1.0.150",
   "description": "Tabby core",
   "keywords": [
     "tabby-builtin-plugin"
@@ -19,13 +19,11 @@
   "devDependencies": {
     "@types/js-yaml": "^4.0.0",
     "bootstrap": "^4.1.3",
-    "core-js": "^3.1.2",
     "deep-equal": "^2.0.5",
     "deepmerge": "^4.1.1",
     "electron-updater": "^4.0.6",
     "js-yaml": "^4.0.0",
     "mixpanel": "^0.13.0",
-    "ng2-dnd": "^5.0.2",
     "ngx-filesize": "^2.0.16",
     "ngx-perfect-scrollbar": "^10.1.0",
     "readable-stream": "3.6.0",

tabby-core/src/api/index.ts

@@ -25,6 +25,7 @@ export { DockingService, Screen } from '../services/docking.service'
 export { Logger, ConsoleLogger, LogService } from '../services/log.service'
 export { HomeBaseService } from '../services/homeBase.service'
 export { HotkeysService } from '../services/hotkeys.service'
+export { KeyEventData, KeyName, Keystroke } from '../services/hotkeys.util'
 export { NotificationsService } from '../services/notifications.service'
 export { ThemesService } from '../services/themes.service'
 export { ProfilesService } from '../services/profiles.service'

tabby-core/src/api/platform.ts

@@ -13,6 +13,7 @@ export interface MessageBoxOptions {
     detail?: string
     buttons: string[]
     defaultId?: number
+    cancelId?: number
 }
 
 export interface MessageBoxResult {

tabby-core/src/api/profileProvider.ts

@@ -46,6 +46,10 @@ export abstract class ProfileProvider<P extends Profile> {
 
     abstract getNewTabParameters (profile: PartialProfile<P>): Promise<NewTabParameters<BaseTabComponent>>
 
+    getSuggestedName (profile: PartialProfile<P>): string|null {
+        return null
+    }
+
     abstract getDescription (profile: PartialProfile<P>): string
 
     quickConnect (query: string): PartialProfile<P>|null {

tabby-core/src/api/selector.ts

@@ -4,5 +4,6 @@ export interface SelectorOption<T> {
     result?: T
     icon?: string
     freeInputPattern?: string
+    color?: string
     callback?: (string?) => void
 }

tabby-core/src/buttonProvider.ts

@@ -36,10 +36,12 @@ export class ButtonProvider extends ToolbarButtonProvider {
         await this.profilesService.openNewTabForProfile(profile)
 
         let recentProfiles = this.config.store.recentProfiles
-        recentProfiles = recentProfiles.filter(x => x.group !== profile.group || x.name !== profile.name)
-        recentProfiles.unshift(profile)
-        if (recentProfiles.length > 5) {
-            recentProfiles.pop()
+        if (this.config.store.terminal.showRecentProfiles > 0) {
+            recentProfiles = recentProfiles.filter(x => x.group !== profile.group || x.name !== profile.name)
+            recentProfiles.unshift(profile)
+            recentProfiles = recentProfiles.slice(0, this.config.store.terminal.showRecentProfiles)
+        } else {
+            recentProfiles = []
         }
         this.config.store.recentProfiles = recentProfiles
         this.config.save()

tabby-core/src/components/appRoot.component.pug

@@ -1,6 +1,6 @@
 title-bar(
-  *ngIf='ready && !hostWindow.isFullScreen && config.store.appearance.frame == "full" && config.store.appearance.dock == "off"',
-  [class.inset]='hostApp.platform == Platform.macOS && !hostWindow.isFullScreen'
+  *ngIf='ready && !hostWindow.isFullscreen && config.store.appearance.frame == "full" && config.store.appearance.dock == "off"',
+  [class.inset]='hostApp.platform == Platform.macOS && !hostWindow.isFullscreen'
 )
 
 .content(
@@ -10,19 +10,17 @@ title-bar(
 )
     .tab-bar
         .inset.background(*ngIf='hostApp.platform == Platform.macOS \
-        && !hostWindow.isFullScreen \
+        && !hostWindow.isFullscreen \
         && config.store.appearance.frame == "thin" \
         && (config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left")')
         .tabs(
-            dnd-sortable-container,
-            [sortableData]='app.tabs',
+            cdkDropList,
+            [cdkDropListOrientation]='(config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "bottom") ? "horizontal" : "vertical"',
+            (cdkDropListDropped)='onTabsReordered($event)',
+            cdkAutoDropGroup='app-tabs'
         )
             tab-header(
                 *ngFor='let tab of app.tabs; let idx = index',
-                dnd-sortable,
-                [sortableIndex]='idx',
-                (onDragStart)='onTabDragStart()',
-                (onDragEnd)='onTabDragEnd()',
                 [index]='idx',
                 [tab]='tab',
                 [active]='tab == app.activeTab',
@@ -30,7 +28,7 @@ title-bar(
                 [@.disabled]='hasVerticalTabs()',
                 (click)='app.selectTab(tab)',
                 [class.fully-draggable]='hostApp.platform != Platform.macOS',
-                [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
+                [class.drag-region]='hostApp.platform == Platform.macOS && !(app.tabDragActive$|async)',
             )
 
         .btn-group.background
@@ -109,6 +107,7 @@ title-bar(
         start-page.content-tab.content-tab-active(*ngIf='ready && app.tabs.length == 0')
 
         tab-body.content-tab(
+            #tabBodies,
             *ngFor='let tab of unsortedTabs',
             [class.content-tab-active]='tab == app.activeTab',
             [active]='tab == app.activeTab',

tabby-core/src/components/appRoot.component.scss

@@ -132,6 +132,14 @@ $side-tab-width: 200px;
     window-controls {
         padding-left: 10px;
     }
+
+    .cdk-drag-animating {
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    .cdk-drop-list-dragging tab-header:not(.cdk-drag-placeholder) {
+        transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    }
 }
 
 .content {

tabby-core/src/components/appRoot.component.ts

@@ -1,7 +1,8 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { Component, Inject, Input, HostListener, HostBinding } from '@angular/core'
+import { Component, Inject, Input, HostListener, HostBinding, ViewChildren } from '@angular/core'
 import { trigger, style, animate, transition, state } from '@angular/animations'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop'
 
 import { HostAppService, Platform } from '../api/hostApp'
 import { HotkeysService } from '../services/hotkeys.service'
@@ -12,6 +13,7 @@ import { UpdaterService } from '../services/updater.service'
 
 import { BaseTabComponent } from './baseTab.component'
 import { SafeModeModalComponent } from './safeModeModal.component'
+import { TabBodyComponent } from './tabBody.component'
 import { AppService, FileTransfer, HostWindowService, PlatformService, ToolbarButton, ToolbarButtonProvider } from '../api'
 
 /** @hidden */
@@ -57,7 +59,7 @@ export class AppRootComponent {
     @HostBinding('class.platform-darwin') platformClassMacOS = process.platform === 'darwin'
     @HostBinding('class.platform-linux') platformClassLinux = process.platform === 'linux'
     @HostBinding('class.no-tabs') noTabs = true
-    tabsDragging = false
+    @ViewChildren(TabBodyComponent) tabBodies: TabBodyComponent[]
     unsortedTabs: BaseTabComponent[] = []
     updatesAvailable = false
     activeTransfers: FileTransfer[] = []
@@ -126,11 +128,18 @@ export class AppRootComponent {
         this.app.tabOpened$.subscribe(tab => {
             this.unsortedTabs.push(tab)
             this.noTabs = false
+            this.app.emitTabDragEnded()
         })
 
-        this.app.tabClosed$.subscribe(tab => {
+        this.app.tabRemoved$.subscribe(tab => {
+            for (const tabBody of this.tabBodies) {
+                if (tabBody.tab === tab) {
+                    tabBody.detach()
+                }
+            }
             this.unsortedTabs = this.unsortedTabs.filter(x => x !== tab)
             this.noTabs = app.tabs.length === 0
+            this.app.emitTabDragEnded()
         })
 
         platform.fileTransferStarted$.subscribe(transfer => {
@@ -173,17 +182,6 @@ export class AppRootComponent {
         return this.config.store.appearance.tabsLocation === 'left' || this.config.store.appearance.tabsLocation === 'right'
     }
 
-    onTabDragStart () {
-        this.tabsDragging = true
-    }
-
-    onTabDragEnd () {
-        setTimeout(() => {
-            this.tabsDragging = false
-            this.app.emitTabsChanged()
-        })
-    }
-
     async generateButtonSubmenu (button: ToolbarButton) {
         if (button.submenu) {
             button.submenuItems = await button.submenu()
@@ -194,6 +192,11 @@ export class AppRootComponent {
         return submenuItems.some(x => !!x.icon)
     }
 
+    onTabsReordered (event: CdkDragDrop<BaseTabComponent[]>) {
+        moveItemInArray(this.app.tabs, event.previousIndex, event.currentIndex)
+        this.app.emitTabsChanged()
+    }
+
     private getToolbarButtons (aboveZero: boolean): ToolbarButton[] {
         let buttons: ToolbarButton[] = []
         this.config.enabledServices(this.toolbarButtonProviders).forEach(provider => {

tabby-core/src/components/baseTab.component.ts

@@ -1,5 +1,5 @@
 import { Observable, Subject } from 'rxjs'
-import { ViewRef } from '@angular/core'
+import { EmbeddedViewRef, ViewContainerRef, ViewRef } from '@angular/core'
 import { RecoveryToken } from '../api/tabRecovery'
 import { BaseComponent } from './base.component'
 
@@ -52,6 +52,10 @@ export abstract class BaseTabComponent extends BaseComponent {
      * your tab state to be saved sooner
      */
     protected recoveryStateChangedHint = new Subject<void>()
+    protected viewContainer?: ViewContainerRef
+
+    /* @hidden */
+    viewContainerEmbeddedRef?: EmbeddedViewRef<any>
 
     private progressClearTimeout: number
     private titleChange = new Subject<string>()
@@ -61,6 +65,8 @@ export abstract class BaseTabComponent extends BaseComponent {
     private activity = new Subject<boolean>()
     private destroyed = new Subject<void>()
 
+    private _destroyCalled = false
+
     get focused$ (): Observable<void> { return this.focused }
     get blurred$ (): Observable<void> { return this.blurred }
     get titleChange$ (): Observable<string> { return this.titleChange }
@@ -152,10 +158,29 @@ export abstract class BaseTabComponent extends BaseComponent {
         this.blurred.next()
     }
 
+    insertIntoContainer (container: ViewContainerRef): EmbeddedViewRef<any> {
+        this.viewContainerEmbeddedRef = container.insert(this.hostView) as EmbeddedViewRef<any>
+        this.viewContainer = container
+        return this.viewContainerEmbeddedRef
+    }
+
+    removeFromContainer (): void {
+        if (!this.viewContainer || !this.viewContainerEmbeddedRef) {
+            return
+        }
+        this.viewContainer.detach(this.viewContainer.indexOf(this.viewContainerEmbeddedRef))
+        this.viewContainerEmbeddedRef = undefined
+        this.viewContainer = undefined
+    }
+
     /**
      * Called before the tab is closed
      */
     destroy (skipDestroyedEvent = false): void {
+        if (this._destroyCalled) {
+            return
+        }
+        this._destroyCalled = true
         this.focused.complete()
         this.blurred.complete()
         this.titleChange.complete()
@@ -166,6 +191,7 @@ export abstract class BaseTabComponent extends BaseComponent {
             this.destroyed.next()
         }
         this.destroyed.complete()
+        this.hostView.destroy()
     }
 
     /** @hidden */

tabby-core/src/components/selectorModal.component.pug

@@ -1,5 +1,5 @@
 .modal-body
-    input.form-control(
+    input.form-control.form-control-lg(
         type='text',
         [(ngModel)]='filter',
         autofocus,
@@ -7,7 +7,7 @@
         (ngModelChange)='onFilterChange()'
     )
 
-    .list-group(*ngIf='filteredOptions.length')
+    .list-group.list-group-light(*ngIf='filteredOptions.length')
         a.list-group-item.list-group-item-action.d-flex.align-items-center(
             #item,
             (click)='selectOption(option)',
@@ -16,11 +16,13 @@
         )
             i.icon(
                 class='fa-fw {{option.icon}}',
+                style='color: {{option.color}}',
                 *ngIf='!iconIsSVG(option.icon)'
             )
             .icon(
                 [fastHtmlBind]='option.icon',
+                style='color: {{option.color}}',
                 *ngIf='iconIsSVG(option.icon)'
             )
-            .mr-2.title {{getOptionText(option)}}
-            .text-muted {{option.description}}
+            .title.mr-2 {{getOptionText(option)}}
+            .description.no-wrap.text-muted {{option.description}}

tabby-core/src/components/selectorModal.component.scss

@@ -16,9 +16,13 @@
 
 .title {
     margin-left: 10px;
+    flex: none;
+}
+
+.description {
+    flex: 1 1 0;
 }
 
 input {
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
+    border-radius: 0;
 }

tabby-core/src/components/selectorModal.component.ts

@@ -50,8 +50,9 @@ export class SelectorModalComponent<T> {
         if (!f) {
             this.filteredOptions = this.options.filter(x => !x.freeInputPattern)
         } else {
+            const terms = f.split(' ')
             // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
-            this.filteredOptions = this.options.filter(x => x.freeInputPattern ?? (x.name + (x.description ?? '')).toLowerCase().includes(f))
+            this.filteredOptions = this.options.filter(x => x.freeInputPattern ?? terms.every(term => (x.name + (x.description ?? '')).toLowerCase().includes(term)))
         }
         this.selectedIndex = Math.max(0, this.selectedIndex)
         this.selectedIndex = Math.min(this.filteredOptions.length - 1, this.selectedIndex)

tabby-core/src/components/selfPositioning.component.ts

@@ -0,0 +1,18 @@
+import { HostBinding, ElementRef } from '@angular/core'
+import { BaseComponent } from './base.component'
+
+export abstract class SelfPositioningComponent extends BaseComponent {
+    @HostBinding('style.left') cssLeft: string
+    @HostBinding('style.top') cssTop: string
+    @HostBinding('style.width') cssWidth: string | null
+    @HostBinding('style.height') cssHeight: string | null
+
+    constructor (protected element: ElementRef) { super() }
+
+    protected setDimensions (x: number, y: number, w: number, h: number, unit = '%'): void {
+        this.cssLeft = `${x}${unit}`
+        this.cssTop = `${y}${unit}`
+        this.cssWidth = w ? `${w}${unit}` : null
+        this.cssHeight = h ? `${h}${unit}` : null
+    }
+}

tabby-core/src/components/splitTab.component.ts

@@ -6,8 +6,8 @@ import { TabsService, NewTabParameters } from '../services/tabs.service'
 import { HotkeysService } from '../services/hotkeys.service'
 import { TabRecoveryService } from '../services/tabRecovery.service'
 
-export type SplitOrientation = 'v' | 'h' // eslint-disable-line @typescript-eslint/no-type-alias
-export type SplitDirection = 'r' | 't' | 'b' | 'l' // eslint-disable-line @typescript-eslint/no-type-alias
+export type SplitOrientation = 'v' | 'h'
+export type SplitDirection = 'r' | 't' | 'b' | 'l'
 
 /**
  * Describes a horizontal or vertical split row or column
@@ -93,13 +93,13 @@ export class SplitContainer {
         return s
     }
 
-    async serialize (): Promise<RecoveryToken> {
+    async serialize (tabsRecovery: TabRecoveryService): Promise<RecoveryToken> {
         const children: any[] = []
         for (const child of this.children) {
             if (child instanceof SplitContainer) {
-                children.push(await child.serialize())
+                children.push(await child.serialize(tabsRecovery))
             } else {
-                children.push(await child.getRecoveryToken())
+                children.push(await tabsRecovery.getFullRecoveryToken(child))
             }
         }
         return {
@@ -123,6 +123,25 @@ export interface SplitSpannerInfo {
     index: number
 }
 
+/**
+ * Represents a tab drop zone
+ */
+export type SplitDropZoneInfo = {
+    x: number
+    y: number
+    w: number
+    h: number
+} & ({
+    type: 'absolute'
+    container: SplitContainer
+    position: number
+} | {
+    type: 'relative'
+    relativeTo?: BaseTabComponent|SplitContainer
+    side: SplitDirection
+})
+
+
 /**
  * Split tab is a tab that contains other tabs and allows further splitting them
  * You'll mainly encounter it inside [[AppService]].tabs
@@ -137,6 +156,21 @@ export interface SplitSpannerInfo {
             [index]='spanner.index'
             (change)='onSpannerAdjusted(spanner)'
         ></split-tab-spanner>
+        <split-tab-drop-zone
+            *ngFor='let dropZone of _dropZones'
+            [parent]='this'
+            [dropZone]='dropZone'
+            (tabDropped)='onTabDropped($event, dropZone)'
+        >
+        </split-tab-drop-zone>
+        <split-tab-pane-label
+            *ngFor='let tab of getAllTabs()'
+            cdkDropList
+            cdkAutoDropGroup='app-tabs'
+            [tab]='tab'
+            [parent]='this'
+        >
+        </split-tab-pane-label>
     `,
     styles: [require('./splitTab.component.scss')],
 })
@@ -157,6 +191,9 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
     /** @hidden */
     _spanners: SplitSpannerInfo[] = []
 
+    /** @hidden */
+    _dropZones: SplitDropZoneInfo[] = []
+
     /** @hidden */
     _allFocusMode = false
 
@@ -166,12 +203,19 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
     private viewRefs: Map<BaseTabComponent, EmbeddedViewRef<any>> = new Map()
 
     private tabAdded = new Subject<BaseTabComponent>()
+    private tabAdopted = new Subject<BaseTabComponent>()
     private tabRemoved = new Subject<BaseTabComponent>()
     private splitAdjusted = new Subject<SplitSpannerInfo>()
     private focusChanged = new Subject<BaseTabComponent>()
     private initialized = new Subject<void>()
 
     get tabAdded$ (): Observable<BaseTabComponent> { return this.tabAdded }
+
+    /**
+     * Fired when an existing top-level tab is dragged into this tab
+     */
+    get tabAdopted$ (): Observable<BaseTabComponent> { return this.tabAdopted }
+
     get tabRemoved$ (): Observable<BaseTabComponent> { return this.tabRemoved }
 
     /**
@@ -330,46 +374,77 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
         }
     }
 
+    addTab (tab: BaseTabComponent, relative: BaseTabComponent|null, side: SplitDirection): Promise<void> {
+        return this.add(tab, relative, side)
+    }
+
     /**
      * Inserts a new `tab` to the `side` of the `relative` tab
      */
-    async addTab (tab: BaseTabComponent, relative: BaseTabComponent|null, side: SplitDirection): Promise<void> {
-        tab.parent = this
+    async add (thing: BaseTabComponent|SplitContainer, relative: BaseTabComponent|SplitContainer|null, side: SplitDirection): Promise<void> {
+        if (thing instanceof SplitTabComponent) {
+            const tab = thing
+            thing = tab.root
+            tab.root = new SplitContainer()
+            for (const child of thing.getAllTabs()) {
+                child.removeFromContainer()
+            }
+            tab.destroy()
+        }
 
-        let target = (relative ? this.getParentOf(relative) : null) ?? this.root
-        let insertIndex = relative ? target.children.indexOf(relative) : -1
+        if (thing instanceof BaseTabComponent) {
+            if (thing.parent instanceof SplitTabComponent) {
+                thing.parent.removeTab(thing)
+            }
+            thing.removeFromContainer()
+            thing.parent = this
+        }
+
+        let target = relative ? this.getParentOf(relative) : null
+        if (!target) {
+            // Rewrap the root container just in case the orientation isn't compatibile
+            target = new SplitContainer()
+            target.orientation = ['l', 'r'].includes(side) ? 'h' : 'v'
+            target.children = [this.root]
+            target.ratios = [1]
+            this.root = target
+        }
+
+        let insertIndex = relative
+            ? target.children.indexOf(relative) + ('tl'.includes(side) ? 0 : 1)
+            : 'tl'.includes(side) ? 0 : -1
 
         if (
             target.orientation === 'v' && ['l', 'r'].includes(side) ||
             target.orientation === 'h' && ['t', 'b'].includes(side)
         ) {
+            // Inserting into a container but the orientation isn't compatible
             const newContainer = new SplitContainer()
-            newContainer.orientation = target.orientation === 'v' ? 'h' : 'v'
+            newContainer.orientation = ['l', 'r'].includes(side) ? 'h' : 'v'
             newContainer.children = relative ? [relative] : []
             newContainer.ratios = [1]
-            target.children[insertIndex] = newContainer
+            target.children.splice(relative ? target.children.indexOf(relative) : -1, 1, newContainer)
             target = newContainer
-            insertIndex = 0
-        }
-
-        if (insertIndex === -1) {
-            insertIndex = 0
-        } else {
-            insertIndex += side === 'l' || side === 't' ? 0 : 1
+            insertIndex = 'tl'.includes(side) ? 0 : 1
         }
 
         for (let i = 0; i < target.children.length; i++) {
             target.ratios[i] *= target.children.length / (target.children.length + 1)
         }
+        if (insertIndex === -1) {
+            insertIndex = target.ratios.length
+        }
         target.ratios.splice(insertIndex, 0, 1 / (target.children.length + 1))
-        target.children.splice(insertIndex, 0, tab)
+        target.children.splice(insertIndex, 0, thing)
 
         this.recoveryStateChangedHint.next()
 
         await this.initialized$.toPromise()
 
-        this.attachTabView(tab)
-        this.onAfterTabAdded(tab)
+        for (const tab of thing instanceof SplitContainer ? thing.getAllTabs() : [thing]) {
+            this.attachTabView(tab)
+            this.onAfterTabAdded(tab)
+        }
     }
 
     removeTab (tab: BaseTabComponent): void {
@@ -381,8 +456,9 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
         parent.ratios.splice(index, 1)
         parent.children.splice(index, 1)
 
-        this.detachTabView(tab)
+        tab.removeFromContainer()
         tab.parent = null
+        this.viewRefs.delete(tab)
 
         this.layout()
 
@@ -401,7 +477,7 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
         }
         const position = parent.children.indexOf(tab)
         parent.children[position] = newTab
-        this.detachTabView(tab)
+        tab.removeFromContainer()
         this.attachTabView(newTab)
         tab.parent = null
         newTab.parent = this
@@ -494,7 +570,7 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
 
     /** @hidden */
     async getRecoveryToken (): Promise<any> {
-        return this.root.serialize()
+        return this.root.serialize(this.tabRecovery)
     }
 
     /** @hidden */
@@ -508,6 +584,20 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
         this.splitAdjusted.next(spanner)
     }
 
+    /** @hidden */
+    onTabDropped (tab: BaseTabComponent, zone: SplitDropZoneInfo) { // eslint-disable-line @typescript-eslint/explicit-module-boundary-types
+        if (tab === this) {
+            return
+        }
+
+        if (zone.type === 'relative') {
+            this.add(tab, zone.relativeTo ?? null, zone.side)
+        } else {
+            this.add(tab, zone.container.children[zone.position], zone.container.orientation === 'h' ? 'r' : 'b')
+        }
+        this.tabAdopted.next(tab)
+    }
+
     destroy (): void {
         super.destroy()
         for (const x of this.getAllTabs()) {
@@ -518,20 +608,24 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
     layout (): void {
         this.root.normalize()
         this._spanners = []
+        this._dropZones = []
         this.layoutInternal(this.root, 0, 0, 100, 100)
     }
 
-    private attachTabView (tab: BaseTabComponent) {
-        const ref = this.viewContainer.insert(tab.hostView) as EmbeddedViewRef<any> // eslint-disable-line @typescript-eslint/no-unnecessary-type-assertion
-        this.viewRefs.set(tab, ref)
+    private updateTitle (): void {
+        this.setTitle(this.getAllTabs().map(x => x.title).join(' | '))
+    }
 
+    private attachTabView (tab: BaseTabComponent) {
+        const ref = tab.insertIntoContainer(this.viewContainer)
+        this.viewRefs.set(tab, ref)
         tab.addEventListenerUntilDestroyed(ref.rootNodes[0], 'click', () => this.focus(tab))
 
-        tab.subscribeUntilDestroyed(tab.titleChange$, t => this.setTitle(t))
+        tab.subscribeUntilDestroyed(tab.titleChange$, () => this.updateTitle())
         tab.subscribeUntilDestroyed(tab.activity$, a => a ? this.displayActivity() : this.clearActivity())
         tab.subscribeUntilDestroyed(tab.progress$, p => this.setProgress(p))
         if (tab.title) {
-            this.setTitle(tab.title)
+            this.updateTitle()
         }
         tab.subscribeUntilDestroyed(tab.recoveryStateChangedHint$, () => {
             this.recoveryStateChangedHint.next()
@@ -541,14 +635,6 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
         })
     }
 
-    private detachTabView (tab: BaseTabComponent) {
-        const ref = this.viewRefs.get(tab)
-        if (ref) {
-            this.viewRefs.delete(tab)
-            this.viewContainer.remove(this.viewContainer.indexOf(ref))
-        }
-    }
-
     private onAfterTabAdded (tab: BaseTabComponent) {
         setImmediate(() => {
             this.layout()
@@ -560,6 +646,42 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
     private layoutInternal (root: SplitContainer, x: number, y: number, w: number, h: number) {
         const size = root.orientation === 'v' ? h : w
         const sizes = root.ratios.map(ratio => ratio * size)
+        const thickness = 10
+
+        if (root === this.root) {
+            this._dropZones.push({
+                x: x - thickness / 2,
+                y: y + thickness,
+                w: thickness,
+                h: h - thickness * 2,
+                type: 'relative',
+                side: 'l',
+            })
+            this._dropZones.push({
+                x,
+                y: y - thickness / 2,
+                w,
+                h: thickness,
+                type: 'relative',
+                side: 't',
+            })
+            this._dropZones.push({
+                x: x + w - thickness / 2,
+                y: y + thickness,
+                w: thickness,
+                h: h - thickness * 2,
+                type: 'relative',
+                side: 'r',
+            })
+            this._dropZones.push({
+                x,
+                y: y + h - thickness / 2,
+                w,
+                h: thickness,
+                type: 'relative',
+                side: 'b',
+            })
+        }
 
         root.x = x
         root.y = y
@@ -595,8 +717,63 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
                     }
                 }
             }
+
             offset += sizes[i]
 
+            if (i !== root.ratios.length - 1) {
+                // Spanner area
+                this._dropZones.push({
+                    type: 'relative',
+                    relativeTo: root.children[i],
+                    side: root.orientation === 'v' ? 'b': 'r',
+                    x: root.orientation === 'v' ? childX + thickness : childX + offset - thickness / 2,
+                    y: root.orientation === 'v' ? childY + offset - thickness / 2 : childY + thickness,
+                    w: root.orientation === 'v' ? childW - thickness * 2 : thickness,
+                    h: root.orientation === 'v' ? thickness : childH - thickness * 2,
+                })
+            }
+
+            // Sides
+            if (root.orientation === 'v') {
+                this._dropZones.push({
+                    x: childX,
+                    y: childY + thickness,
+                    w: thickness,
+                    h: childH - thickness * 2,
+                    type: 'relative',
+                    relativeTo: child,
+                    side: 'l',
+                })
+                this._dropZones.push({
+                    x: childX + w - thickness,
+                    y: childY + thickness,
+                    w: thickness,
+                    h: childH - thickness * 2,
+                    type: 'relative',
+                    relativeTo: child,
+                    side: 'r',
+                })
+            } else {
+                this._dropZones.push({
+                    x: childX + thickness,
+                    y: childY,
+                    w: childW - thickness * 2,
+                    h: thickness,
+                    type: 'relative',
+                    relativeTo: child,
+                    side: 't',
+                })
+                this._dropZones.push({
+                    x: childX + thickness,
+                    y: childY + childH - thickness,
+                    w: childW - thickness * 2,
+                    h: thickness,
+                    type: 'relative',
+                    relativeTo: child,
+                    side: 'b',
+                })
+            }
+
             if (i !== 0) {
                 this._spanners.push({
                     container: root,
@@ -612,6 +789,9 @@ export class SplitTabComponent extends BaseTabComponent implements AfterViewInit
         root.ratios = state.ratios
         root.children = children
         for (const childState of state.children) {
+            if (!childState) {
+                continue
+            }
             if (childState.type === 'app:split-tab') {
                 const child = new SplitContainer()
                 await this.recoverContainer(child, childState, duplicate)

tabby-core/src/components/splitTabDropZone.component.scss

@@ -0,0 +1,39 @@
+:host {
+    position: absolute;
+    display: flex;
+    z-index: 5;
+    padding: 15px;
+    transition: all 125ms cubic-bezier(0, 0, 0.2, 1);
+
+    > div {
+        flex: 1 1 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+
+        background: rgba(255, 255, 255, .125);
+        border-radius: 5px;
+        border: 1px solid rgba(255, 255, 255, .25);
+        transition: all 125ms cubic-bezier(0, 0, 0.2, 1);
+    }
+
+    &.highlighted {
+        padding: 0px;
+        border-radius: 3px;
+
+        > div {
+            opacity: 1;
+            background: rgba(255, 255, 255, .5);
+        }
+    }
+
+    &:not(.active) {
+        pointer-events: none;
+        opacity: 0;
+    }
+
+    ::ng-deep tab-header {
+        // placeholders
+        opacity: 0;
+    }
+}

tabby-core/src/components/splitTabDropZone.component.ts

@@ -0,0 +1,54 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { Component, Input, HostBinding, ElementRef, Output, EventEmitter } from '@angular/core'
+import { AppService } from '../services/app.service'
+import { BaseTabComponent } from './baseTab.component'
+import { SelfPositioningComponent } from './selfPositioning.component'
+import { SplitDropZoneInfo } from './splitTab.component'
+
+/** @hidden */
+@Component({
+    selector: 'split-tab-drop-zone',
+    template: `
+    <div
+        cdkDropList
+        (cdkDropListDropped)="tabDropped.emit($event.item.data); isHighlighted = false"
+        (cdkDropListEntered)="isHighlighted = true"
+        (cdkDropListExited)="isHighlighted = false"
+        cdkAutoDropGroup='app-tabs'
+    >
+    </div>
+    `,
+    styles: [require('./splitTabDropZone.component.scss')],
+})
+export class SplitTabDropZoneComponent extends SelfPositioningComponent {
+    @Input() dropZone: SplitDropZoneInfo
+    @Input() parent: BaseTabComponent
+    @Output() tabDropped = new EventEmitter<BaseTabComponent>()
+    @HostBinding('class.active') isActive = false
+    @HostBinding('class.highlighted') isHighlighted = false
+
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor (
+        element: ElementRef,
+        app: AppService,
+    ) {
+        super(element)
+        this.subscribeUntilDestroyed(app.tabDragActive$, tab => {
+            this.isActive = !!tab && tab !== this.parent && (this.dropZone.type === 'relative' || tab !== this.dropZone.container.children[this.dropZone.position])
+            this.layout()
+        })
+    }
+
+    ngOnChanges () {
+        this.layout()
+    }
+
+    layout () {
+        this.setDimensions(
+            this.dropZone.x,
+            this.dropZone.y,
+            this.dropZone.w,
+            this.dropZone.h,
+        )
+    }
+}

tabby-core/src/components/splitTabPaneLabel.component.scss

@@ -0,0 +1,35 @@
+:host {
+    position: absolute;
+    background: rgba(255, 255, 255, .25);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    pointer-events: none;
+    z-index: 10;
+    opacity: 0;
+    transition: .125s opacity cubic-bezier(0.86, 0, 0.07, 1);
+}
+
+div {
+    background: rgba(0, 0, 0, .7);
+    padding: 20px 30px;
+    font-size: 18px;
+    color: #fff;
+    display: flex;
+    align-items: center;
+    border-radius: 5px;
+    cursor: move;
+}
+
+:host.active {
+    opacity: 1;
+
+    > div {
+        pointer-events: initial;
+    }
+}
+
+label {
+    margin: 0;
+    cursor: move;
+}

tabby-core/src/components/splitTabPaneLabel.component.ts

@@ -0,0 +1,80 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { Component, Input, HostBinding, ElementRef } from '@angular/core'
+import { HotkeysService } from '../services/hotkeys.service'
+import { AppService } from '../services/app.service'
+import { BaseTabComponent } from './baseTab.component'
+import { SelfPositioningComponent } from './selfPositioning.component'
+
+/** @hidden */
+@Component({
+    selector: 'split-tab-pane-label',
+    template: `
+    <div
+        cdkDrag
+        [cdkDragData]='tab'
+        (cdkDragStarted)='onTabDragStart(tab)'
+        (cdkDragEnded)='onTabDragEnd()'
+    >
+        <i class="fa fa-window-maximize mr-3"></i>
+        <label>{{tab.title}}</label>
+    </div>
+    `,
+    styles: [require('./splitTabPaneLabel.component.scss')],
+})
+export class SplitTabPaneLabelComponent extends SelfPositioningComponent {
+    @Input() tab: BaseTabComponent
+    @Input() parent: BaseTabComponent
+    @HostBinding('class.active') isActive = false
+
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor (
+        element: ElementRef,
+        hotkeys: HotkeysService,
+        private app: AppService,
+    ) {
+        super(element)
+        this.subscribeUntilDestroyed(hotkeys.hotkey$, hk => {
+            if (hk === 'rearrange-panes' && this.parent.hasFocus) {
+                this.isActive = true
+                this.layout()
+            }
+        })
+        this.subscribeUntilDestroyed(hotkeys.hotkeyOff$, hk => {
+            if (hk === 'rearrange-panes') {
+                this.isActive = false
+            }
+        })
+    }
+
+    ngOnChanges () {
+        this.layout()
+    }
+
+    onTabDragStart (tab: BaseTabComponent): void {
+        this.app.emitTabDragStarted(tab)
+    }
+
+    onTabDragEnd (): void {
+        setTimeout(() => {
+            this.app.emitTabDragEnded()
+            this.app.emitTabsChanged()
+        })
+    }
+
+    layout () {
+        const tabElement: HTMLElement|undefined = this.tab.viewContainerEmbeddedRef?.rootNodes[0]
+
+        if (!tabElement) {
+            // being destroyed
+            return
+        }
+
+        this.setDimensions(
+            tabElement.offsetLeft,
+            tabElement.offsetTop,
+            tabElement.clientWidth,
+            tabElement.clientHeight,
+            'px'
+        )
+    }
+}

tabby-core/src/components/splitTabSpanner.component.scss

@@ -3,6 +3,7 @@
     position: absolute;
     z-index: 5;
     transition: 0.125s background;
+    background: rgba(0, 0, 0, .2);
 
     &.v {
         cursor: ns-resize;

tabby-core/src/components/splitTabSpanner.component.ts

@@ -1,5 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { Component, Input, HostBinding, ElementRef, Output, EventEmitter } from '@angular/core'
+import { SelfPositioningComponent } from './selfPositioning.component'
 import { SplitContainer } from './splitTab.component'
 
 /** @hidden */
@@ -8,20 +9,19 @@ import { SplitContainer } from './splitTab.component'
     template: '',
     styles: [require('./splitTabSpanner.component.scss')],
 })
-export class SplitTabSpannerComponent {
+export class SplitTabSpannerComponent extends SelfPositioningComponent {
     @Input() container: SplitContainer
     @Input() index: number
     @Output() change = new EventEmitter<void>()
     @HostBinding('class.active') isActive = false
     @HostBinding('class.h') isHorizontal = false
     @HostBinding('class.v') isVertical = true
-    @HostBinding('style.left') cssLeft: string
-    @HostBinding('style.top') cssTop: string
-    @HostBinding('style.width') cssWidth: string | null
-    @HostBinding('style.height') cssHeight: string | null
     private marginOffset = -5
 
-    constructor (private element: ElementRef) { }
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor (element: ElementRef) {
+        super(element)
+    }
 
     ngAfterViewInit () {
         this.element.nativeElement.addEventListener('dblclick', () => {
@@ -92,11 +92,4 @@ export class SplitTabSpannerComponent {
         this.container.ratios[this.index] = ratio
         this.change.emit()
     }
-
-    private setDimensions (x: number, y: number, w: number, h: number) {
-        this.cssLeft = `${x}%`
-        this.cssTop = `${y}%`
-        this.cssWidth = w ? `${w}%` : null
-        this.cssHeight = h ? `${h}%` : null
-    }
 }

tabby-core/src/components/startPage.component.pug

@@ -3,9 +3,9 @@ div
     h1.tabby-title Tabby
         sup α
 
-    .list-group
+    .list-group.list-group-light
         a.list-group-item.list-group-item-action.d-flex(
-            *ngFor='let button of getButtons()',
+            *ngFor='let button of getButtons(); trackBy: buttonsTrackBy',
             (click)='button.click()',
         )
             .d-flex.align-self-center([innerHTML]='sanitizeIcon(button.icon)')
@@ -13,10 +13,10 @@ div
 
 footer.d-flex.align-items-center
     .btn-group.mr-auto
-        button.btn.btn-secondary((click)='homeBase.openGitHub()')
+        button.btn.btn-dark((click)='homeBase.openGitHub()')
             i.fab.fa-github
             span GitHub
-        button.btn.btn-secondary((click)='homeBase.reportBug()')
+        button.btn.btn-dark((click)='homeBase.reportBug()')
             i.fas.fa-bug
             span Report a problem
 

tabby-core/src/components/startPage.component.ts

@@ -32,4 +32,8 @@ export class StartPageComponent {
     sanitizeIcon (icon?: string): any {
         return this.domSanitizer.bypassSecurityTrustHtml(icon ?? '')
     }
+
+    buttonsTrackBy (btn: ToolbarButton): any {
+        return btn.title + btn.icon
+    }
 }

tabby-core/src/components/tabBody.component.ts

@@ -27,6 +27,10 @@ export class TabBodyComponent implements OnChanges {
         }
     }
 
+    detach () {
+        this.placeholder?.detach()
+    }
+
     ngOnDestroy () {
         this.placeholder?.detach()
     }

tabby-core/src/components/tabHeader.component.pug

@@ -2,9 +2,18 @@
 .progressbar([style.width]='progress + "%"', *ngIf='progress != null')
 .activity-indicator(*ngIf='tab.activity$|async')
 
-.index(*ngIf='!config.store.terminal.hideTabIndex', #handle) {{index + 1}}
+.index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform === Platform.macOS', cdkDragHandle) {{index + 1}}
+.index(*ngIf='!config.store.terminal.hideTabIndex && hostApp.platform !== Platform.macOS') {{index + 1}}
+
 .name(
     [title]='tab.customTitle || tab.title',
     [class.no-hover]='config.store.terminal.hideCloseButton'
+    cdkDrag,
+    cdkDragRootElement='tab-header',
+    [cdkDragData]='tab',
+    (cdkDragStarted)='onTabDragStart(tab)',
+    (cdkDragEnded)='onTabDragEnd()',
 ) {{tab.customTitle || tab.title}}
 button(*ngIf='!config.store.terminal.hideCloseButton',(click)='app.closeTab(tab, true)') ×
+
+ng-content

tabby-core/src/components/tabHeader.component.ts

@@ -1,6 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { Component, Input, Optional, Inject, HostBinding, HostListener, ViewChild, ElementRef, NgZone } from '@angular/core'
-import { SortableComponent } from 'ng2-dnd'
+import { Component, Input, Optional, Inject, HostBinding, HostListener, NgZone } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { TabContextMenuItemProvider } from '../api/tabContextMenuProvider'
 import { BaseTabComponent } from './baseTab.component'
@@ -13,11 +12,6 @@ import { BaseComponent } from './base.component'
 import { MenuItemOptions } from '../api/menu'
 import { PlatformService } from '../api/platform'
 
-/** @hidden */
-export interface SortableComponentProxy {
-    setDragHandle: (_: HTMLElement) => void
-}
-
 /** @hidden */
 @Component({
     selector: 'tab-header',
@@ -29,17 +23,16 @@ export class TabHeaderComponent extends BaseComponent {
     @Input() @HostBinding('class.active') active: boolean
     @Input() tab: BaseTabComponent
     @Input() progress: number|null
-    @ViewChild('handle') handle?: ElementRef
+    Platform = Platform
 
     constructor (
         public app: AppService,
         public config: ConfigService,
-        private hostApp: HostAppService,
+        public hostApp: HostAppService,
         private ngbModal: NgbModal,
         private hotkeys: HotkeysService,
         private platform: PlatformService,
         private zone: NgZone,
-        @Inject(SortableComponent) private parentDraggable: SortableComponentProxy,
         @Optional() @Inject(TabContextMenuItemProvider) protected contextMenuProviders: TabContextMenuItemProvider[],
     ) {
         super()
@@ -61,18 +54,13 @@ export class TabHeaderComponent extends BaseComponent {
         })
     }
 
-    ngAfterViewInit () {
-        if (this.handle && this.hostApp.platform === Platform.macOS) {
-            this.parentDraggable.setDragHandle(this.handle.nativeElement)
-        }
-    }
-
     showRenameTabModal (): void {
         const modal = this.ngbModal.open(RenameTabModalComponent)
         modal.componentInstance.value = this.tab.customTitle || this.tab.title
         modal.result.then(result => {
             this.tab.setTitle(result)
             this.tab.customTitle = result
+            this.app.emitTabsChanged()
         }).catch(() => null)
     }
 
@@ -85,6 +73,17 @@ export class TabHeaderComponent extends BaseComponent {
         return items.slice(1)
     }
 
+    onTabDragStart (tab: BaseTabComponent) {
+        this.app.emitTabDragStarted(tab)
+    }
+
+    onTabDragEnd () {
+        setTimeout(() => {
+            this.app.emitTabDragEnded()
+            this.app.emitTabsChanged()
+        })
+    }
+
     @HostBinding('class.flex-width') get isFlexWidthEnabled (): boolean {
         return this.config.store.appearance.flexTabs
     }

tabby-core/src/components/transfersMenu.component.pug

@@ -5,7 +5,7 @@
     .icon(*ngIf='isDownload(transfer)') !{require('../icons/download.svg')}
     .icon(*ngIf='!isDownload(transfer)') !{require('../icons/upload.svg')}
     .main
-        label {{transfer.getName()}}
+        label.no-wrap([title]='transfer.getName()') {{transfer.getName()}}
         .status(*ngIf='transfer.isComplete()')
             ngb-progressbar(type='success', [value]='100')
         .status(*ngIf='transfer.isCancelled()')

tabby-core/src/components/transfersMenu.component.scss

@@ -6,6 +6,7 @@
     display: flex;
     align-items: center;
     padding: 5px 0 5px 25px;
+    width: 100%;
 
     .icon {
         padding: 4px 7px;
@@ -16,12 +17,16 @@
     }
 
     .main {
-        width: 100%;
+        display: flex;
+        flex-direction: column;
+        min-width: 0;
         margin-right: auto;
         margin-bottom: 3px;
+        width: 100%;
 
         label {
             margin: 0;
+            max-width: 100%;
         }
     }
 

tabby-core/src/components/transfersMenu.component.ts

@@ -43,6 +43,7 @@ export class TransfersMenuComponent {
                 message: 'There are active file transfers',
                 buttons: ['Abort all', 'Do not abort'],
                 defaultId: 1,
+                cancelId: 1,
             })).response === 1) {
                 return
             }

tabby-core/src/configDefaults.linux.yaml

@@ -18,6 +18,8 @@ hotkeys:
     - 'Ctrl-Shift-PageUp'
   move-tab-right:
     - 'Ctrl-Shift-PageDown'
+  rearrange-panes:
+    - 'Ctrl-Shift'
   tab-1:
     - 'Alt-1'
   tab-2:

tabby-core/src/configDefaults.macos.yaml

@@ -16,6 +16,8 @@ hotkeys:
     - '⌘-Shift-Left'
   move-tab-right:
     - '⌘-Shift-Right'
+  rearrange-panes:
+    - '⌘-Shift'
   tab-1:
     - '⌘-1'
   tab-2:

tabby-core/src/configDefaults.windows.yaml

@@ -19,6 +19,8 @@ hotkeys:
     - 'Ctrl-Shift-PageUp'
   move-tab-right:
     - 'Ctrl-Shift-PageDown'
+  rearrange-panes:
+    - 'Ctrl-Shift'
   tab-1:
     - 'Alt-1'
   tab-2:

tabby-core/src/configDefaults.yaml

@@ -16,6 +16,7 @@ appearance:
   vibrancyType: 'blur'
 terminal:
   showBuiltinProfiles: true
+  showRecentProfiles: 3
 hotkeys:
   profile:
     __nonStructural: true
@@ -30,3 +31,4 @@ enableAutomaticUpdates: true
 version: 1
 vault: null
 encrypted: false
+enableExperimentalFeatures: false

tabby-core/src/directives/cdkAutoDropGroup.directive.ts

@@ -0,0 +1,26 @@
+import { Directive, Input, OnInit } from '@angular/core'
+import { CdkDropList } from '@angular/cdk/drag-drop'
+
+class FakeDropGroup {
+    _items: Set<CdkDropList> = new Set()
+}
+
+/** @hidden */
+@Directive({
+    selector: '[cdkAutoDropGroup]',
+})
+export class CdkAutoDropGroup implements OnInit {
+    static groups: Record<string, FakeDropGroup> = {}
+
+    @Input('cdkAutoDropGroup') groupName: string
+
+    constructor (
+        private cdkDropList: CdkDropList,
+    ) { }
+
+    ngOnInit (): void {
+        CdkAutoDropGroup.groups[this.groupName] ??= new FakeDropGroup()
+        CdkAutoDropGroup.groups[this.groupName]._items.add(this.cdkDropList)
+        this.cdkDropList['_group'] = CdkAutoDropGroup.groups[this.groupName]
+    }
+}

tabby-core/src/hotkeys.ts

@@ -1,6 +1,7 @@
 import { Injectable } from '@angular/core'
 import { ProfilesService } from './services/profiles.service'
 import { HotkeyDescription, HotkeyProvider } from './api/hotkeyProvider'
+import { PartialProfile, Profile } from './api'
 
 /** @hidden */
 @Injectable()
@@ -46,6 +47,10 @@ export class AppHotkeyProvider extends HotkeyProvider {
             id: 'move-tab-right',
             name: 'Move tab to the right',
         },
+        {
+            id: 'rearrange-panes',
+            name: 'Show pane labels (for rearranging)',
+        },
         {
             id: 'tab-1',
             name: 'Tab 1',
@@ -189,9 +194,13 @@ export class AppHotkeyProvider extends HotkeyProvider {
         return [
             ...this.hotkeys,
             ...profiles.map(profile => ({
-                id: `profile.${profile.id}`,
+                id: `profile.${AppHotkeyProvider.getProfileHotkeyName(profile)}`,
                 name: `New tab: ${profile.name}`,
             })),
         ]
     }
+
+    static getProfileHotkeyName (profile: PartialProfile<Profile>): string {
+        return profile.id!.replace(/\./g, '-')
+    }
 }

tabby-core/src/index.ts

@@ -5,8 +5,8 @@ import { FormsModule } from '@angular/forms'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
 import { PerfectScrollbarModule, PERFECT_SCROLLBAR_CONFIG } from 'ngx-perfect-scrollbar'
 import { NgxFilesizeModule } from 'ngx-filesize'
-import { DndModule } from 'ng2-dnd'
 import { SortablejsModule } from 'ngx-sortablejs'
+import { DragDropModule } from '@angular/cdk/drag-drop'
 
 import { AppRootComponent } from './components/appRoot.component'
 import { CheckboxComponent } from './components/checkbox.component'
@@ -22,6 +22,8 @@ import { RenameTabModalComponent } from './components/renameTabModal.component'
 import { SelectorModalComponent } from './components/selectorModal.component'
 import { SplitTabComponent, SplitTabRecoveryProvider } from './components/splitTab.component'
 import { SplitTabSpannerComponent } from './components/splitTabSpanner.component'
+import { SplitTabDropZoneComponent } from './components/splitTabDropZone.component'
+import { SplitTabPaneLabelComponent } from './components/splitTabPaneLabel.component'
 import { UnlockVaultModalComponent } from './components/unlockVaultModal.component'
 import { WelcomeTabComponent } from './components/welcomeTab.component'
 import { TransfersMenuComponent } from './components/transfersMenu.component'
@@ -30,6 +32,7 @@ import { AutofocusDirective } from './directives/autofocus.directive'
 import { AlwaysVisibleTypeaheadDirective } from './directives/alwaysVisibleTypeahead.directive'
 import { FastHtmlBindDirective } from './directives/fastHtmlBind.directive'
 import { DropZoneDirective } from './directives/dropZone.directive'
+import { CdkAutoDropGroup } from './directives/cdkAutoDropGroup.directive'
 
 import { Theme, CLIHandler, TabContextMenuItemProvider, TabRecoveryProvider, HotkeyProvider, ConfigProvider, PlatformService, FileProvider, ToolbarButtonProvider, ProfilesService, ProfileProvider } from './api'
 
@@ -47,7 +50,6 @@ import { ButtonProvider } from './buttonProvider'
 import { SplitLayoutProfilesService } from './profiles'
 
 import 'perfect-scrollbar/css/perfect-scrollbar.css'
-import 'ng2-dnd/bundles/style.css'
 
 const PROVIDERS = [
     { provide: HotkeyProvider, useClass: AppHotkeyProvider, multi: true },
@@ -77,7 +79,7 @@ const PROVIDERS = [
         NgbModule,
         NgxFilesizeModule,
         PerfectScrollbarModule,
-        DndModule.forRoot(),
+        DragDropModule,
         SortablejsModule.forRoot({ animation: 150 }),
     ],
     declarations: [
@@ -98,10 +100,13 @@ const PROVIDERS = [
         SelectorModalComponent,
         SplitTabComponent,
         SplitTabSpannerComponent,
+        SplitTabDropZoneComponent,
+        SplitTabPaneLabelComponent,
         UnlockVaultModalComponent,
         WelcomeTabComponent,
         TransfersMenuComponent,
         DropZoneDirective,
+        CdkAutoDropGroup,
     ],
     entryComponents: [
         PromptModalComponent,
@@ -121,6 +126,7 @@ const PROVIDERS = [
         FastHtmlBindDirective,
         AlwaysVisibleTypeaheadDirective,
         SortablejsModule,
+        DragDropModule,
     ],
 })
 export default class AppModule { // eslint-disable-line @typescript-eslint/no-extraneous-class
@@ -132,9 +138,11 @@ export default class AppModule { // eslint-disable-line @typescript-eslint/no-ex
         profilesService: ProfilesService,
     ) {
         app.ready$.subscribe(() => {
-            if (config.store.enableWelcomeTab) {
-                app.openNewTabRaw({ type: WelcomeTabComponent })
-            }
+            config.ready$.toPromise().then(() => {
+                if (config.store.enableWelcomeTab) {
+                    app.openNewTabRaw({ type: WelcomeTabComponent })
+                }
+            })
         })
 
         platform.setErrorHandler(err => {
@@ -143,8 +151,9 @@ export default class AppModule { // eslint-disable-line @typescript-eslint/no-ex
 
         hotkeys.hotkey$.subscribe(async (hotkey) => {
             if (hotkey.startsWith('profile.')) {
-                const id = hotkey.split('.')[1]
-                const profile = (await profilesService.getProfiles()).find(x => x.id === id)
+                const id = hotkey.substring(hotkey.indexOf('.') + 1)
+                const profiles = await profilesService.getProfiles()
+                const profile = profiles.find(x => AppHotkeyProvider.getProfileHotkeyName(x) === id)
                 if (profile) {
                     profilesService.openNewTabForProfile(profile)
                 }

tabby-core/src/services/app.service.ts

@@ -54,7 +54,9 @@ export class AppService {
     private activeTabChange = new Subject<BaseTabComponent|null>()
     private tabsChanged = new Subject<void>()
     private tabOpened = new Subject<BaseTabComponent>()
+    private tabRemoved = new Subject<BaseTabComponent>()
     private tabClosed = new Subject<BaseTabComponent>()
+    private tabDragActive = new Subject<BaseTabComponent|null>()
     private ready = new AsyncSubject<void>()
 
     private completionObservers = new Map<BaseTabComponent, CompletionObserver>()
@@ -62,7 +64,9 @@ export class AppService {
     get activeTabChange$ (): Observable<BaseTabComponent|null> { return this.activeTabChange }
     get tabOpened$ (): Observable<BaseTabComponent> { return this.tabOpened }
     get tabsChanged$ (): Observable<void> { return this.tabsChanged }
+    get tabRemoved$ (): Observable<BaseTabComponent> { return this.tabRemoved }
     get tabClosed$ (): Observable<BaseTabComponent> { return this.tabClosed }
+    get tabDragActive$ (): Observable<BaseTabComponent|null> { return this.tabDragActive }
 
     /** Fires once when the app is ready */
     get ready$ (): Observable<void> { return this.ready }
@@ -131,21 +135,30 @@ export class AppService {
         })
 
         tab.destroyed$.subscribe(() => {
-            const newIndex = Math.max(0, this.tabs.indexOf(tab) - 1)
-            this.tabs = this.tabs.filter((x) => x !== tab)
-            if (tab === this._activeTab) {
-                this.selectTab(this.tabs[newIndex])
-            }
-            this.tabsChanged.next()
+            this.removeTab(tab)
+            this.tabRemoved.next(tab)
             this.tabClosed.next(tab)
         })
 
         if (tab instanceof SplitTabComponent) {
             tab.tabAdded$.subscribe(() => this.emitTabsChanged())
             tab.tabRemoved$.subscribe(() => this.emitTabsChanged())
+            tab.tabAdopted$.subscribe(t => {
+                this.removeTab(t)
+                this.tabRemoved.next(t)
+            })
         }
     }
 
+    removeTab (tab: BaseTabComponent): void {
+        const newIndex = Math.max(0, this.tabs.indexOf(tab) - 1)
+        this.tabs = this.tabs.filter((x) => x !== tab)
+        if (tab === this._activeTab) {
+            this.selectTab(this.tabs[newIndex])
+        }
+        this.tabsChanged.next()
+    }
+
     /**
      * Adds a new tab **without** wrapping it in a SplitTabComponent
      * @param inputs  Properties to be assigned on the new tab component instance
@@ -161,6 +174,9 @@ export class AppService {
      * @param inputs  Properties to be assigned on the new tab component instance
      */
     openNewTab <T extends BaseTabComponent> (params: NewTabParameters<T>): T {
+        if (params.type as any === SplitTabComponent) {
+            return this.openNewTabRaw(params)
+        }
         const splitTab = this.tabsService.create({ type: SplitTabComponent })
         const tab = this.tabsService.create(params)
         splitTab.addTab(tab, null, 'r')
@@ -344,6 +360,16 @@ export class AppService {
         this.hostApp.emitReady()
     }
 
+    /** @hidden */
+    emitTabDragStarted (tab: BaseTabComponent): void {
+        this.tabDragActive.next(tab)
+    }
+
+    /** @hidden */
+    emitTabDragEnded (): void {
+        this.tabDragActive.next(null)
+    }
+
     /**
      * Returns an observable that fires once
      * the tab's internal "process" (see [[BaseTabProcess]]) completes

tabby-core/src/services/config.service.ts

@@ -194,7 +194,10 @@ export class ConfigService {
     }
 
     async save (): Promise<void> {
-        this.store.__cleanup()
+        await this.ready$
+        if (!this._store) {
+            throw new Error('Cannot save an empty store')
+        }
         // Scrub undefined values
         let cleanStore = JSON.parse(JSON.stringify(this._store))
         cleanStore = await this.maybeEncryptConfig(cleanStore)
@@ -238,7 +241,7 @@ export class ConfigService {
                 const module = imp.ngModule || imp
                 if (module.ɵinj?.providers) {
                     this.servicesCache[module.pluginName] = module.ɵinj.providers.map(provider => {
-                        return provider.useClass || provider
+                        return provider.useClass ?? provider.useExisting ?? provider
                     })
                 }
             }
@@ -372,6 +375,7 @@ export class ConfigService {
                         detail: e.toString(),
                         buttons: ['Erase config', 'Quit'],
                         defaultId: 1,
+                        cancelId: 1,
                     })
                     if (result.response === 1) {
                         this.platform.quit()
@@ -382,10 +386,12 @@ export class ConfigService {
         }
         delete decryptedVault.config.vault
         delete decryptedVault.config.encrypted
+        delete decryptedVault.config.configSync
         return {
             ...decryptedVault.config,
             vault: store.vault,
             encrypted: store.encrypted,
+            configSync: store.configSync,
         }
     }
 
@@ -400,9 +406,11 @@ export class ConfigService {
         vault.config = { ...store }
         delete vault.config.vault
         delete vault.config.encrypted
+        delete vault.config.configSync
         return {
             vault: await this.vault.encrypt(vault),
             encrypted: true,
+            configSync: store.configSync,
         }
     }
 }

tabby-core/src/services/homeBase.service.ts

@@ -2,7 +2,7 @@ import { Injectable, Inject } from '@angular/core'
 import * as mixpanel from 'mixpanel'
 import { v4 as uuidv4 } from 'uuid'
 import { ConfigService } from './config.service'
-import { PlatformService, BOOTSTRAP_DATA, BootstrapData } from '../api'
+import { PlatformService, BOOTSTRAP_DATA, BootstrapData, HostAppService } from '../api'
 
 @Injectable({ providedIn: 'root' })
 export class HomeBaseService {
@@ -13,6 +13,7 @@ export class HomeBaseService {
     private constructor (
         private config: ConfigService,
         private platform: PlatformService,
+        private hostApp: HostAppService,
         @Inject(BOOTSTRAP_DATA) private bootstrapData: BootstrapData,
     ) {
         this.appVersion = platform.getAppVersion()
@@ -28,20 +29,11 @@ export class HomeBaseService {
 
     reportBug (): void {
         let body = `Version: ${this.appVersion}\n`
-        body += `Platform: ${process.platform} ${this.platform.getOSRelease()}\n`
-        const label = {
-            aix: 'OS: IBM AIX',
-            android: 'OS: Android',
-            darwin: 'OS: macOS',
-            freebsd: 'OS: FreeBSD',
-            linux: 'OS: Linux',
-            openbsd: 'OS: OpenBSD',
-            sunos: 'OS: Solaris',
-            win32: 'OS: Windows',
-        }[process.platform]
+        body += `Platform: ${this.hostApp.platform} ${process.arch} ${this.platform.getOSRelease()}\n`
         const plugins = this.bootstrapData.installedPlugins.filter(x => !x.isBuiltin).map(x => x.name)
-        body += `Plugins: ${plugins.join(', ') || 'none'}\n\n`
-        this.platform.openExternal(`https://github.com/Eugeny/tabby/issues/new?body=${encodeURIComponent(body)}&labels=${label}`)
+        body += `Plugins: ${plugins.join(', ') || 'none'}\n`
+        body += `Frontend: ${this.config.store.terminal?.frontend}\n\n`
+        this.platform.openExternal(`https://github.com/Eugeny/tabby/issues/new?body=${encodeURIComponent(body)}`)
     }
 
     enableAnalytics (): void {

tabby-core/src/services/hotkeys.service.ts

@@ -1,7 +1,7 @@
 import { Injectable, Inject, NgZone, EventEmitter } from '@angular/core'
 import { Observable, Subject } from 'rxjs'
 import { HotkeyDescription, HotkeyProvider } from '../api/hotkeyProvider'
-import { stringifyKeySequence, EventData } from './hotkeys.util'
+import { KeyEventData, getKeyName, Keystroke, KeyName, getKeystrokeName, metaKeyName, altKeyName } from './hotkeys.util'
 import { ConfigService } from './config.service'
 import { HostAppService, Platform } from '../api/hostApp'
 import { deprecate } from 'util'
@@ -12,14 +12,17 @@ export interface PartialHotkeyMatch {
     matchedLength: number
 }
 
-const KEY_TIMEOUT = 2000
-
+interface PastKeystroke {
+    keystroke: Keystroke
+    time: number
+}
 
 @Injectable({ providedIn: 'root' })
 export class HotkeysService {
+    /** @hidden @deprecated */
     key = new EventEmitter<KeyboardEvent>()
 
-    /** @hidden */
+    /** @hidden @deprecated */
     matchedHotkey = new EventEmitter<string>()
 
     /**
@@ -27,135 +30,212 @@ export class HotkeysService {
      */
     get hotkey$ (): Observable<string> { return this._hotkey }
 
+    /**
+     * Fired for once hotkey is released
+     */
+    get hotkeyOff$ (): Observable<string> { return this._hotkeyOff }
+
+    /**
+     * Fired for each singular key
+     */
+    get key$ (): Observable<KeyName> { return this._key }
+
+    /**
+     * Fired for each key event
+     */
+    get keyEvent$ (): Observable<KeyboardEvent> { return this._keyEvent }
+
+    /**
+     * Fired for each singular key combination
+     */
+    get keystroke$ (): Observable<Keystroke> { return this._keystroke }
+
     private _hotkey = new Subject<string>()
-    private currentKeystrokes: EventData[] = []
+    private _hotkeyOff = new Subject<string>()
+    private _keyEvent = new Subject<KeyboardEvent>()
+    private _key = new Subject<KeyName>()
+    private _keystroke = new Subject<Keystroke>()
     private disabledLevel = 0
     private hotkeyDescriptions: HotkeyDescription[] = []
 
+    private pressedKeys = new Set<KeyName>()
+    private pressedKeyTimestamps = new Map<KeyName, number>()
+    private pressedHotkey: string|null = null
+    private pressedKeystroke: Keystroke|null = null
+    private lastKeystrokes: PastKeystroke[] = []
+    private shouldSaveNextKeystroke = true
+    private lastEventTimestamp = 0
+
     private constructor (
         private zone: NgZone,
         private config: ConfigService,
         @Inject(HotkeyProvider) private hotkeyProviders: HotkeyProvider[],
         hostApp: HostAppService,
     ) {
-        const events = ['keydown', 'keyup']
-        events.forEach(event => {
-            document.addEventListener(event, (nativeEvent: KeyboardEvent) => {
-                if (document.querySelectorAll('input:focus').length === 0) {
-                    this.pushKeystroke(event, nativeEvent)
-                    this.processKeystrokes()
-                    this.emitKeyEvent(nativeEvent)
-                    if (hostApp.platform === Platform.Web) {
-                        nativeEvent.preventDefault()
-                        nativeEvent.stopPropagation()
-                    }
-                }
-            })
-        })
         this.config.ready$.toPromise().then(async () => {
             const hotkeys = await this.getHotkeyDescriptions()
             this.hotkeyDescriptions = hotkeys
+            const events = ['keydown', 'keyup']
+
+            events.forEach(eventType => {
+                document.addEventListener(eventType, (nativeEvent: KeyboardEvent) => {
+                    this._keyEvent.next(nativeEvent)
+                    this.pushKeyEvent(eventType, nativeEvent)
+                    if (hostApp.platform === Platform.Web && this.matchActiveHotkey(true) !== null) {
+                        nativeEvent.preventDefault()
+                        nativeEvent.stopPropagation()
+                    }
+                })
+            })
         })
 
         // deprecated
         this.hotkey$.subscribe(h => this.matchedHotkey.emit(h))
         this.matchedHotkey.subscribe = deprecate(s => this.hotkey$.subscribe(s), 'matchedHotkey is deprecated, use hotkey$')
+        this.keyEvent$.subscribe(h => this.key.next(h))
+        this.key.subscribe = deprecate(s => this.keyEvent$.subscribe(s), 'key is deprecated, use keyEvent$')
     }
 
     /**
      * Adds a new key event to the buffer
      *
-     * @param name DOM event name
+     * @param eventName DOM event name
      * @param nativeEvent event object
      */
-    pushKeystroke (name: string, nativeEvent: KeyboardEvent): void {
-        nativeEvent['event'] = name
-        this.currentKeystrokes.push({
+    pushKeyEvent (eventName: string, nativeEvent: KeyboardEvent): void {
+        if (nativeEvent.timeStamp === this.lastEventTimestamp) {
+            return
+        }
+
+        nativeEvent['event'] = eventName
+
+        const eventData = {
             ctrlKey: nativeEvent.ctrlKey,
             metaKey: nativeEvent.metaKey,
             altKey: nativeEvent.altKey,
             shiftKey: nativeEvent.shiftKey,
             code: nativeEvent.code,
             key: nativeEvent.key,
-            eventName: name,
-            time: performance.now(),
-        })
-    }
-
-    /**
-     * Check the buffer for new complete keystrokes
-     */
-    processKeystrokes (): void {
-        if (this.isEnabled()) {
-            this.zone.run(() => {
-                const matched = this.getCurrentFullyMatchedHotkey()
-                if (matched) {
-                    console.log('Matched hotkey', matched)
-                    this._hotkey.next(matched)
-                    this.clearCurrentKeystrokes()
-                }
-            })
+            eventName,
+            time: nativeEvent.timeStamp,
+            registrationTime: performance.now(),
         }
+
+        for (const [key, time] of this.pressedKeyTimestamps.entries()) {
+            if (time < performance.now() - 2000) {
+                this.removePressedKey(key)
+            }
+        }
+
+        const keyName = getKeyName(eventData)
+        if (eventName === 'keydown') {
+            this.addPressedKey(keyName, eventData)
+            this.shouldSaveNextKeystroke = true
+            this.updateModifiers(eventData)
+        }
+        if (eventName === 'keyup') {
+            const keystroke = getKeystrokeName([...this.pressedKeys])
+            if (this.shouldSaveNextKeystroke) {
+                this._keystroke.next(keystroke)
+                this.lastKeystrokes.push({
+                    keystroke,
+                    time: performance.now(),
+                })
+                this.shouldSaveNextKeystroke = false
+            }
+            this.removePressedKey(keyName)
+        }
+
+        if (this.pressedKeys.size) {
+            this.pressedKeystroke = getKeystrokeName([...this.pressedKeys])
+        } else {
+            this.pressedKeystroke = null
+        }
+
+        const matched = this.matchActiveHotkey()
+        this.zone.run(() => {
+            if (matched) {
+                this.emitHotkeyOn(matched)
+            } else if (this.pressedHotkey) {
+                this.emitHotkeyOff(this.pressedHotkey)
+            }
+        })
+
+        this.zone.run(() => {
+            this._key.next(getKeyName(eventData))
+        })
+
+        if (process.platform === 'darwin' && eventData.metaKey && eventName === 'keydown' && !['Ctrl', 'Shift', altKeyName, metaKeyName].includes(keyName)) {
+            // macOS will swallow non-modified keyups if Cmd is held down
+            this.pushKeyEvent('keyup', nativeEvent)
+        }
+
+        this.lastEventTimestamp = nativeEvent.timeStamp
     }
 
-    emitKeyEvent (nativeEvent: KeyboardEvent): void {
-        this.zone.run(() => {
-            this.key.emit(nativeEvent)
-        })
+    getCurrentKeystrokes (): Keystroke[] {
+        if (!this.pressedKeystroke) {
+            return []
+        }
+        return [...this.lastKeystrokes.map(x => x.keystroke), this.pressedKeystroke]
+    }
+
+    matchActiveHotkey (partial = false): string|null {
+        if (!this.isEnabled() || !this.pressedKeystroke) {
+            return null
+        }
+        const matches: {
+            id: string,
+            sequence: string[],
+        }[] = []
+
+        const currentSequence = this.getCurrentKeystrokes()
+
+        const config = this.getHotkeysConfig()
+        for (const id in config) {
+            for (const sequence of config[id]) {
+                if (currentSequence.length < sequence.length) {
+                    continue
+                }
+                if (sequence[sequence.length - 1] !== this.pressedKeystroke) {
+                    continue
+                }
+
+                let lastIndex = 0
+                let matched = true
+                for (const item of sequence) {
+                    const nextOffset = currentSequence.slice(lastIndex).findIndex(
+                        x => x.toLowerCase() === item.toLowerCase()
+                    )
+                    if (nextOffset === -1) {
+                        matched = false
+                        break
+                    }
+                    lastIndex += nextOffset
+                }
+
+                if (partial ? lastIndex > 0 : matched) {
+                    matches.push({
+                        id,
+                        sequence,
+                    })
+                }
+            }
+        }
+
+        matches.sort((a, b) => b.sequence.length - a.sequence.length)
+        if (!matches.length) {
+            return null
+        }
+        return matches[0].id
     }
 
     clearCurrentKeystrokes (): void {
-        this.currentKeystrokes = []
-    }
-
-    getCurrentKeystrokes (): string[] {
-        this.currentKeystrokes = this.currentKeystrokes.filter(x => performance.now() - x.time < KEY_TIMEOUT)
-        return stringifyKeySequence(this.currentKeystrokes)
-    }
-
-    getCurrentFullyMatchedHotkey (): string|null {
-        const currentStrokes = this.getCurrentKeystrokes()
-        const config = this.getHotkeysConfig()
-        for (const id in config) {
-            for (const sequence of config[id]) {
-                if (currentStrokes.length < sequence.length) {
-                    continue
-                }
-                if (sequence.every(
-                    (x: string, index: number) =>
-                        x.toLowerCase() ===
-                            currentStrokes[currentStrokes.length - sequence.length + index].toLowerCase()
-                )) {
-                    return id
-                }
-            }
-        }
-        return null
-    }
-
-    getCurrentPartiallyMatchedHotkeys (): PartialHotkeyMatch[] {
-        const currentStrokes = this.getCurrentKeystrokes()
-        const config = this.getHotkeysConfig()
-        const result: PartialHotkeyMatch[] = []
-        for (const id in config) {
-            for (const sequence of config[id]) {
-                for (let matchLength = Math.min(currentStrokes.length, sequence.length); matchLength > 0; matchLength--) {
-                    if (sequence.slice(0, matchLength).every(
-                        (x: string, index: number) =>
-                            x.toLowerCase() ===
-                                currentStrokes[currentStrokes.length - matchLength + index].toLowerCase()
-                    )) {
-                        result.push({
-                            matchedLength: matchLength,
-                            id,
-                            strokes: sequence,
-                        })
-                        break
-                    }
-                }
-            }
-        }
-        return result
+        this.lastKeystrokes = []
+        this.pressedKeys.clear()
+        this.pressedKeyTimestamps.clear()
+        this.pressedKeystroke = null
+        this.pressedHotkey = null
     }
 
     getHotkeyDescription (id: string): HotkeyDescription {
@@ -183,6 +263,42 @@ export class HotkeysService {
         ).reduce((a, b) => a.concat(b))
     }
 
+    private updateModifiers (event: KeyEventData) {
+        for (const [prop, key] of Object.entries({
+            ctrlKey: 'Ctrl',
+            metaKey: metaKeyName,
+            altKey: altKeyName,
+            shiftKey: 'Shift',
+        })) {
+            if (!event[prop] && this.pressedKeys.has(key)) {
+                this.removePressedKey(key)
+            }
+            if (event[prop] && !this.pressedKeys.has(key)) {
+                this.addPressedKey(key, event)
+            }
+        }
+    }
+
+    private emitHotkeyOn (hotkey: string) {
+        if (this.pressedHotkey) {
+            if (this.pressedHotkey === hotkey) {
+                return
+            }
+            this.emitHotkeyOff(this.pressedHotkey)
+        }
+        if (document.querySelectorAll('input:focus').length === 0) {
+            console.debug('Matched hotkey', hotkey)
+            this._hotkey.next(hotkey)
+            this.pressedHotkey = hotkey
+        }
+    }
+
+    private emitHotkeyOff (hotkey: string) {
+        console.debug('Unmatched hotkey', hotkey)
+        this._hotkeyOff.next(hotkey)
+        this.pressedHotkey = null
+    }
+
     private getHotkeysConfig () {
         return this.getHotkeysConfigRecursive(this.config.store.hotkeys)
     }
@@ -211,4 +327,14 @@ export class HotkeysService {
         }
         return keys
     }
+
+    private addPressedKey (keyName: KeyName, eventData: KeyEventData) {
+        this.pressedKeys.add(keyName)
+        this.pressedKeyTimestamps.set(keyName, eventData.registrationTime)
+    }
+
+    private removePressedKey (key: KeyName) {
+        this.pressedKeys.delete(key)
+        this.pressedKeyTimestamps.delete(key)
+    }
 }

tabby-core/src/services/hotkeys.util.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-type-alias */
 export const metaKeyName = {
     darwin: '⌘',
     win32: 'Win',
@@ -10,72 +11,67 @@ export const altKeyName = {
     linux: 'Alt',
 }[process.platform]
 
-export interface EventData {
-    ctrlKey: boolean
-    metaKey: boolean
-    altKey: boolean
-    shiftKey: boolean
+export interface KeyEventData {
+    ctrlKey?: boolean
+    metaKey?: boolean
+    altKey?: boolean
+    shiftKey?: boolean
     key: string
     code: string
     eventName: string
     time: number
+    registrationTime: number
 }
 
 const REGEX_LATIN_KEYNAME = /^[A-Za-z]$/
 
-export function stringifyKeySequence (events: EventData[]): string[] {
-    const items: string[] = []
-    events = events.slice()
+export type KeyName = string
+export type Keystroke = string
 
-    while (events.length > 0) {
-        const event = events.shift()!
-        if (event.eventName === 'keydown') {
-            const itemKeys: string[] = []
-            if (event.ctrlKey) {
-                itemKeys.push('Ctrl')
-            }
-            if (event.metaKey) {
-                itemKeys.push(metaKeyName)
-            }
-            if (event.altKey) {
-                itemKeys.push(altKeyName)
-            }
-            if (event.shiftKey) {
-                itemKeys.push('Shift')
-            }
-
-            if (['Control', 'Shift', 'Alt', 'Meta'].includes(event.key)) {
-                // TODO make this optional?
-                continue
-            }
-
-            let key = event.code
-            if (REGEX_LATIN_KEYNAME.test(event.key)) {
-                // Handle Dvorak etc via the reported "character" instead of the scancode
-                key = event.key.toUpperCase()
-            } else {
-                key = key.replace('Key', '')
-                key = key.replace('Arrow', '')
-                key = key.replace('Digit', '')
-                key = {
-                    Comma: ',',
-                    Period: '.',
-                    Slash: '/',
-                    Backslash: '\\',
-                    IntlBackslash: '`',
-                    Backquote: '~', // Electron says it's the tilde
-                    Minus: '-',
-                    Equal: '=',
-                    Semicolon: ';',
-                    Quote: '\'',
-                    BracketLeft: '[',
-                    BracketRight: ']',
-                }[key] ?? key
-            }
-
-            itemKeys.push(key)
-            items.push(itemKeys.join('-'))
+export function getKeyName (event: KeyEventData): KeyName {
+    // eslint-disable-next-line @typescript-eslint/init-declarations
+    let key: string
+    if (event.key === 'Control') {
+        key = 'Ctrl'
+    } else if (event.key === 'Meta') {
+        key = metaKeyName
+    } else if (event.key === 'Alt') {
+        key = altKeyName
+    } else if (event.key === 'Shift') {
+        key = 'Shift'
+    } else {
+        key = event.code
+        if (REGEX_LATIN_KEYNAME.test(event.key)) {
+            // Handle Dvorak etc via the reported "character" instead of the scancode
+            key = event.key.toUpperCase()
+        } else {
+            key = key.replace('Key', '')
+            key = key.replace('Arrow', '')
+            key = key.replace('Digit', '')
+            key = {
+                Comma: ',',
+                Period: '.',
+                Slash: '/',
+                Backslash: '\\',
+                IntlBackslash: '`',
+                Backquote: '~', // Electron says it's the tilde
+                Minus: '-',
+                Equal: '=',
+                Semicolon: ';',
+                Quote: '\'',
+                BracketLeft: '[',
+                BracketRight: ']',
+            }[key] ?? key
         }
     }
-    return items
+    return key
+}
+
+export function getKeystrokeName (keys: KeyName[]): Keystroke {
+    const strictOrdering: KeyName[] = ['Ctrl', metaKeyName, altKeyName, 'Shift']
+    keys = [
+        ...strictOrdering.map(x => keys.find(k => k === x)).filter(x => !!x) as KeyName[],
+        ...keys.filter(k => !strictOrdering.includes(k)),
+    ]
+    return keys.join('-')
 }

tabby-core/src/services/profiles.service.ts

@@ -42,7 +42,7 @@ export class ProfilesService {
                 tab.setTitle(profile.name)
             }
             if (profile.disableDynamicTitle) {
-                tab['enableDynamicTitle'] = false
+                tab['disableDynamicTitle'] = true
             }
             return tab
         }
@@ -84,8 +84,9 @@ export class ProfilesService {
     selectorOptionForProfile <P extends Profile, T> (profile: PartialProfile<P>): SelectorOption<T> {
         const fullProfile = this.getConfigProxyForProfile(profile)
         return {
-            icon: profile.icon,
             name: profile.group ? `${fullProfile.group} / ${fullProfile.name}` : fullProfile.name,
+            icon: profile.icon,
+            color: profile.color,
             description: this.providerForProfile(fullProfile)?.getDescription(fullProfile),
         }
     }
@@ -93,11 +94,13 @@ export class ProfilesService {
     showProfileSelector (): Promise<PartialProfile<Profile>|null> {
         return new Promise<PartialProfile<Profile>|null>(async (resolve, reject) => {
             try {
-                const recentProfiles: PartialProfile<Profile>[] = this.config.store.recentProfiles
+                let recentProfiles: PartialProfile<Profile>[] = this.config.store.recentProfiles
+                recentProfiles = recentProfiles.slice(0, this.config.store.terminal.showRecentProfiles)
 
                 let options: SelectorOption<void>[] = recentProfiles.map(p => ({
                     ...this.selectorOptionForProfile(p),
                     icon: 'fas fa-history',
+                    color: p.color,
                     callback: async () => {
                         if (p.id) {
                             p = (await this.getProfiles()).find(x => x.id === p.id) ?? p

tabby-core/src/services/tabRecovery.service.ts

@@ -20,7 +20,7 @@ export class TabRecoveryService {
     }
 
     async saveTabs (tabs: BaseTabComponent[]): Promise<void> {
-        if (!this.enabled) {
+        if (!this.enabled || !this.config.store.recoverTabs) {
             return
         }
         window.localStorage.tabsRecovery = JSON.stringify(
@@ -34,9 +34,11 @@ export class TabRecoveryService {
         const token = await tab.getRecoveryToken()
         if (token) {
             token.tabTitle = tab.title
+            token.tabCustomTitle = tab.customTitle
             if (tab.color) {
                 token.tabColor = tab.color
             }
+            token.disableDynamicTitle = tab['disableDynamicTitle']
         }
         return token
     }
@@ -54,6 +56,8 @@ export class TabRecoveryService {
                 tab.inputs = tab.inputs ?? {}
                 tab.inputs.color = token.tabColor ?? null
                 tab.inputs.title = token.tabTitle || ''
+                tab.inputs.customTitle = token.tabCustomTitle || ''
+                tab.inputs.disableDynamicTitle = token.disableDynamicTitle
                 return tab
             } catch (error) {
                 this.logger.warn('Tab recovery crashed:', token, provider, error)

tabby-core/src/services/tabs.service.ts

@@ -2,7 +2,6 @@ import { Injectable, ComponentFactoryResolver, Injector } from '@angular/core'
 import { BaseTabComponent } from '../components/baseTab.component'
 import { TabRecoveryService } from './tabRecovery.service'
 
-// eslint-disable-next-line @typescript-eslint/no-type-alias
 export interface TabComponentType<T extends BaseTabComponent> {
     // eslint-disable-next-line @typescript-eslint/prefer-function-type
     new (...args: any[]): T

tabby-core/src/services/vault.service.ts

@@ -26,7 +26,7 @@ interface StoredVault {
 
 export interface VaultSecret {
     type: string
-    key: Record<string, any>
+    key: VaultSecretKey
     value: string
 }
 
@@ -42,6 +42,9 @@ export interface Vault {
     secrets: VaultSecret[]
 }
 
+// eslint-disable-next-line @typescript-eslint/no-empty-interface
+export interface VaultSecretKey { }
+
 function migrateVaultContent (content: any): Vault {
     return {
         config: content.config,
@@ -184,7 +187,7 @@ export class VaultService {
         return _rememberedPassphrase!
     }
 
-    async getSecret (type: string, key: Record<string, any>): Promise<VaultSecret|null> {
+    async getSecret (type: string, key: VaultSecretKey): Promise<VaultSecret|null> {
         await this.ready$.toPromise()
         const vault = await this.load()
         if (!vault) {
@@ -218,7 +221,7 @@ export class VaultService {
         await this.save(vault)
     }
 
-    async removeSecret (type: string, key: Record<string, any>): Promise<void> {
+    async removeSecret (type: string, key: VaultSecretKey): Promise<void> {
         await this.ready$.toPromise()
         const vault = await this.load()
         if (!vault) {
@@ -228,7 +231,7 @@ export class VaultService {
         await this.save(vault)
     }
 
-    private keyMatches (key: Record<string, any>, secret: VaultSecret): boolean {
+    private keyMatches (key: VaultSecretKey, secret: VaultSecret): boolean {
         return Object.keys(key).every(k => secret.key[k] === key[k])
     }
 
@@ -267,9 +270,9 @@ export class VaultFileProvider extends FileProvider {
         if (!vault) {
             throw new Error('Vault is locked')
         }
-        const files = vault.secrets.filter(x => x.type === VAULT_SECRET_TYPE_FILE)
+        const files = vault.secrets.filter(x => x.type === VAULT_SECRET_TYPE_FILE) as VaultFileSecret[]
         if (files.length) {
-            const result = await this.selector.show<VaultSecret|null>('Select file', [
+            const result = await this.selector.show<VaultFileSecret|null>('Select file', [
                 {
                     name: 'Add a new file',
                     icon: 'fas fa-plus',

tabby-core/src/tabContextMenu.ts

@@ -13,6 +13,7 @@ import { TabsService } from './services/tabs.service'
 import { HotkeysService } from './services/hotkeys.service'
 import { PromptModalComponent } from './components/promptModal.component'
 import { SplitLayoutProfilesService } from './profiles'
+import { TAB_COLORS } from './utils'
 
 /** @hidden */
 @Injectable()
@@ -89,16 +90,6 @@ export class TabManagementContextMenu extends TabContextMenuItemProvider {
     }
 }
 
-const COLORS = [
-    { name: 'No color', value: null },
-    { name: 'Blue', value: '#0275d8' },
-    { name: 'Green', value: '#5cb85c' },
-    { name: 'Orange', value: '#f0ad4e' },
-    { name: 'Purple', value: '#613d7c' },
-    { name: 'Red', value: '#d9534f' },
-    { name: 'Yellow', value: '#ffd500' },
-]
-
 /** @hidden */
 @Injectable()
 export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
@@ -127,8 +118,8 @@ export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
                 },
                 {
                     label: 'Color',
-                    sublabel: COLORS.find(x => x.value === tab.color)?.name,
-                    submenu: COLORS.map(color => ({
+                    sublabel: TAB_COLORS.find(x => x.value === tab.color)?.name,
+                    submenu: TAB_COLORS.map(color => ({
                         label: color.name,
                         type: 'radio',
                         checked: tab.color === color.value,

tabby-core/src/theme.paper.scss

@@ -90,10 +90,6 @@ $list-group-border-radius: 0;
 $pre-bg: $dropdown-bg;
 $pre-color: $dropdown-link-color;
 
-$alert-danger-bg: $body-bg;
-$alert-danger-text: $red;
-$alert-danger-border: $red;
-
 $headings-font-weight: lighter;
 $headings-color: $base0;
 

tabby-core/src/theme.scss

@@ -230,24 +230,24 @@ hotkey-input-modal {
     }
 }
 
-.list-group.list-group-flush .list-group-item:not(.list-group-item-action) {
+.list-group.list-group-flush .list-group-item {
     background: transparent;
     border-color: rgba(0, 0, 0, 0.2);
 
     &:not(:last-child) {
         border-bottom: none;
     }
+
+    &.list-group-item-action {
+        &:hover, &.active {
+            background: $list-group-hover-bg;
+        }
+    }
 }
 
 .list-group-light {
     .list-group-item {
-        background: transparent;
         border: none;
-        border-top: 1px solid rgba(255, 255, 255, .05);
-
-        &:first-child {
-            border-top: none;
-        }
 
         &.list-group-item-action {
             &:hover, &.active {

tabby-core/src/theme.vars.scss

@@ -26,8 +26,8 @@ $purple: #613d7c !default;
 $content-bg: rgba(39, 49, 60, 0.65); //#1D272D;
 $content-bg-solid: #1D272D;
 
-$table-bg: rgba(255,255,255,.05);
-$table-bg-hover: rgba(255,255,255,.1);
+$table-bg: rgba(255,255,255,.025);
+$table-bg-hover: rgba(255,255,255,.05);
 $table-border-color: rgba(255,255,255,.1);
 
 $theme-colors: (
@@ -88,7 +88,7 @@ $list-group-item-padding-y: 0.8rem;
 $list-group-item-padding-x: 1rem;
 
 $list-group-hover-bg: $table-bg-hover;
-$list-group-active-bg: rgba(255,255,255,.2);
+$list-group-active-bg: rgba(255,255,255,.05);
 $list-group-active-color: $component-active-color;
 $list-group-active-border-color: translate;
 
@@ -193,3 +193,7 @@ $modal-content-border-width:        0;
 
 $progress-bg: $table-bg;
 $progress-height: 3px;
+
+$alert-bg-level: 9;
+$alert-border-level: 5;
+$alert-color-level: -5;

tabby-core/src/utils.ts

@@ -54,3 +54,13 @@ export class ResettableTimeout {
         }
     }
 }
+
+export const TAB_COLORS = [
+    { name: 'No color', value: null },
+    { name: 'Blue', value: '#0275d8' },
+    { name: 'Green', value: '#5cb85c' },
+    { name: 'Orange', value: '#f0ad4e' },
+    { name: 'Purple', value: '#613d7c' },
+    { name: 'Red', value: '#d9534f' },
+    { name: 'Yellow', value: '#ffd500' },
+]

tabby-core/yarn.lock

@@ -50,11 +50,6 @@ call-bind@^1.0.0, call-bind@^1.0.2:
     function-bind "^1.1.1"
     get-intrinsic "^1.0.2"
 
-core-js@^3.1.2:
-  version "3.15.2"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.15.2.tgz#740660d2ff55ef34ce664d7e2455119c5bdd3d61"
-  integrity sha512-tKs41J7NJVuaya8DxIOCnl8QuPHx5/ZVbFo1oKgVl1qHFBBrDctzQGtuLjPpRdNTWmKPH6oEvgN/MUID+l485Q==
-
 debug@4:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.1.tgz#f0d229c505e0c6d8c49ac553d1b13dc183f6b2ee"
@@ -374,11 +369,6 @@ ms@2.1.2:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
-ng2-dnd@^5.0.2:
-  version "5.0.2"
-  resolved "https://registry.yarnpkg.com/ng2-dnd/-/ng2-dnd-5.0.2.tgz#862278ac7dedfa14f5783bbf34014d5d73dfefb4"
-  integrity sha512-5mWWBePwvEPsNd/HkdbD543Q9mPyJofL6zkNydl8/Ah3qrrvZT2DaEPbknY08OgkXpI2qUGksc01OzzVlRQ9dQ==
-
 ngx-filesize@^2.0.16:
   version "2.0.16"
   resolved "https://registry.yarnpkg.com/ngx-filesize/-/ngx-filesize-2.0.16.tgz#fdaba04170edb6cfcdf7be932783cf913b03f016"

tabby-electron/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabby-electron",
-  "version": "1.0.148-nightly.2",
+  "version": "1.0.150",
   "description": "Electron-specific bindings",
   "keywords": [
     "tabby-builtin-plugin"
@@ -20,7 +20,8 @@
     "@angular/core": "^9.1.9"
   },
   "devDependencies": {
-    "winston": "^3.3.3",
-    "electron-promise-ipc": "^2.2.4"
+    "electron-promise-ipc": "^2.2.4",
+    "tmp-promise": "^3.0.2",
+    "winston": "^3.3.3"
   }
 }

tabby-electron/src/index.ts

@@ -1,6 +1,7 @@
 import { NgModule } from '@angular/core'
 import { PlatformService, LogService, UpdaterService, DockingService, HostAppService, ThemesService, Platform, AppService, ConfigService, WIN_BUILD_FLUENT_BG_SUPPORTED, isWindowsBuild, HostWindowService, HotkeyProvider, ConfigProvider, FileProvider } from 'tabby-core'
 import { TerminalColorSchemeProvider } from 'tabby-terminal'
+import { SFTPContextMenuItemProvider } from 'tabby-ssh'
 
 import { HyperColorSchemes } from './colorSchemes'
 import { ElectronPlatformService } from './services/platform.service'
@@ -14,11 +15,12 @@ import { ElectronHostAppService } from './services/hostApp.service'
 import { ElectronService } from './services/electron.service'
 import { ElectronHotkeyProvider } from './hotkeys'
 import { ElectronConfigProvider } from './config'
+import { EditSFTPContextMenu } from './sftpContextMenu'
 
 @NgModule({
     providers: [
         { provide: TerminalColorSchemeProvider, useClass: HyperColorSchemes, multi: true },
-        { provide: PlatformService, useClass: ElectronPlatformService },
+        { provide: PlatformService, useExisting: ElectronPlatformService },
         { provide: HostWindowService, useExisting: ElectronHostWindow },
         { provide: HostAppService, useExisting: ElectronHostAppService },
         { provide: LogService, useClass: ElectronLogService },
@@ -27,6 +29,7 @@ import { ElectronConfigProvider } from './config'
         { provide: HotkeyProvider, useClass: ElectronHotkeyProvider, multi: true },
         { provide: ConfigProvider, useClass: ElectronConfigProvider, multi: true },
         { provide: FileProvider, useClass: ElectronFileProvider, multi: true },
+        { provide: SFTPContextMenuItemProvider, useClass: EditSFTPContextMenu, multi: true },
     ],
 })
 export default class ElectronModule {

tabby-electron/src/services/electron.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { App, IpcRenderer, Shell, Dialog, Clipboard, GlobalShortcut, Screen, Remote, AutoUpdater, TouchBar, BrowserWindow, Menu, MenuItem, NativeImage } from 'electron'
+import { App, IpcRenderer, Shell, Dialog, Clipboard, GlobalShortcut, Screen, Remote, AutoUpdater, TouchBar, BrowserWindow, Menu, MenuItem, PowerSaveBlocker } from 'electron'
 import * as remote from '@electron/remote'
 
 export interface MessageBoxResponse {
@@ -15,11 +15,11 @@ export class ElectronService {
     dialog: Dialog
     clipboard: Clipboard
     globalShortcut: GlobalShortcut
-    nativeImage: typeof NativeImage
     screen: Screen
     remote: Remote
     process: any
     autoUpdater: AutoUpdater
+    powerSaveBlocker: PowerSaveBlocker
     TouchBar: typeof TouchBar
     BrowserWindow: typeof BrowserWindow
     Menu: typeof Menu
@@ -37,8 +37,8 @@ export class ElectronService {
         this.screen = remote.screen
         this.dialog = remote.dialog
         this.globalShortcut = remote.globalShortcut
-        this.nativeImage = remote.nativeImage
         this.autoUpdater = remote.autoUpdater
+        this.powerSaveBlocker = remote.powerSaveBlocker
         this.TouchBar = remote.TouchBar
         this.BrowserWindow = remote.BrowserWindow
         this.Menu = remote.Menu

tabby-electron/src/services/hostWindow.service.ts

@@ -12,9 +12,9 @@ export interface Bounds {
 
 @Injectable({ providedIn: 'root' })
 export class ElectronHostWindow extends HostWindowService {
-    get isFullscreen (): boolean { return this._isFullScreen}
+    get isFullscreen (): boolean { return this._isFullscreen }
 
-    private _isFullScreen = false
+    private _isFullscreen = false
 
     constructor (
         zone: NgZone,
@@ -23,28 +23,26 @@ export class ElectronHostWindow extends HostWindowService {
     ) {
         super()
         electron.ipcRenderer.on('host:window-enter-full-screen', () => zone.run(() => {
-            this._isFullScreen = true
+            this._isFullscreen = true
         }))
 
         electron.ipcRenderer.on('host:window-leave-full-screen', () => zone.run(() => {
-            this._isFullScreen = false
+            this._isFullscreen = false
         }))
 
-        electron.ipcRenderer.on('host:window-shown', () => {
-            zone.run(() => this.windowShown.next())
-        })
+        electron.ipcRenderer.on('host:window-shown', () => zone.run(() => this.windowShown.next()))
 
-        electron.ipcRenderer.on('host:window-close-request', () => {
-            zone.run(() => this.windowCloseRequest.next())
-        })
+        electron.ipcRenderer.on('host:window-close-request', () => zone.run(() => {
+            this.windowCloseRequest.next()
+        }))
 
-        electron.ipcRenderer.on('host:window-moved', () => {
-            zone.run(() => this.windowMoved.next())
-        })
+        electron.ipcRenderer.on('host:window-moved', () => zone.run(() => {
+            this.windowMoved.next()
+        }))
 
-        electron.ipcRenderer.on('host:window-focused', () => {
-            zone.run(() => this.windowFocused.next())
-        })
+        electron.ipcRenderer.on('host:window-focused', () => zone.run(() => {
+            this.windowFocused.next()
+        }))
     }
 
     getWindow (): BrowserWindow {
@@ -64,7 +62,7 @@ export class ElectronHostWindow extends HostWindowService {
     }
 
     toggleFullscreen (): void {
-        this.getWindow().setFullScreen(!this._isFullScreen)
+        this.getWindow().setFullScreen(!this._isFullscreen)
     }
 
     minimize (): void {

tabby-electron/src/services/platform.service.ts

@@ -1,7 +1,9 @@
 import * as path from 'path'
 import * as fs from 'fs/promises'
+import * as gracefulFS from 'graceful-fs'
 import * as fsSync from 'fs'
 import * as os from 'os'
+import { promisify } from 'util'
 import promiseIpc, { RendererProcessType } from 'electron-promise-ipc'
 import { execFile } from 'mz/child_process'
 import { Injectable, NgZone } from '@angular/core'
@@ -20,10 +22,11 @@ try {
     var wnr = require('windows-native-registry')
 } catch { }
 
-@Injectable()
+@Injectable({ providedIn: 'root' })
 export class ElectronPlatformService extends PlatformService {
     supportsWindowControls = true
     private configPath: string
+    private _configSaveInProgress = Promise.resolve()
 
     constructor (
         private hostApp: HostAppService,
@@ -107,7 +110,17 @@ export class ElectronPlatformService extends PlatformService {
     }
 
     async saveConfig (content: string): Promise<void> {
-        await fs.writeFile(this.configPath, content, 'utf8')
+        try {
+            await this._configSaveInProgress
+        } catch { }
+        this._configSaveInProgress = this._saveConfigInternal(content)
+        await this._configSaveInProgress
+    }
+
+    async _saveConfigInternal (content: string): Promise<void> {
+        const tempPath = this.configPath + '.new'
+        await fs.writeFile(tempPath, content, 'utf8')
+        await promisify(gracefulFS.rename)(tempPath, this.configPath)
     }
 
     getConfigPath (): string|null {
@@ -178,7 +191,7 @@ export class ElectronPlatformService extends PlatformService {
         this.electron.app.exit(0)
     }
 
-    async startUpload (options?: FileUploadOptions): Promise<FileUpload[]> {
+    async startUpload (options?: FileUploadOptions, paths?: string[]): Promise<FileUpload[]> {
         options ??= { multiple: false }
 
         const properties: any[] = ['openFile', 'treatPackageAsDirectory']
@@ -186,36 +199,42 @@ export class ElectronPlatformService extends PlatformService {
             properties.push('multiSelections')
         }
 
-        const result = await this.electron.dialog.showOpenDialog(
-            this.hostWindow.getWindow(),
-            {
-                buttonLabel: 'Select',
-                properties,
-            },
-        )
-        if (result.canceled) {
-            return []
+        if (!paths) {
+            const result = await this.electron.dialog.showOpenDialog(
+                this.hostWindow.getWindow(),
+                {
+                    buttonLabel: 'Select',
+                    properties,
+                },
+            )
+            if (result.canceled) {
+                return []
+            }
+            paths = result.filePaths
         }
 
-        return Promise.all(result.filePaths.map(async p => {
-            const transfer = new ElectronFileUpload(p)
+        return Promise.all(paths.map(async p => {
+            const transfer = new ElectronFileUpload(p, this.electron)
             await wrapPromise(this.zone, transfer.open())
             this.fileTransferStarted.next(transfer)
             return transfer
         }))
     }
 
-    async startDownload (name: string, mode: number, size: number): Promise<FileDownload|null> {
-        const result = await this.electron.dialog.showSaveDialog(
-            this.hostWindow.getWindow(),
-            {
-                defaultPath: name,
-            },
-        )
-        if (!result.filePath) {
-            return null
+    async startDownload (name: string, mode: number, size: number, filePath?: string): Promise<FileDownload|null> {
+        if (!filePath) {
+            const result = await this.electron.dialog.showSaveDialog(
+                this.hostWindow.getWindow(),
+                {
+                    defaultPath: name,
+                },
+            )
+            if (!result.filePath) {
+                return null
+            }
+            filePath = result.filePath
         }
-        const transfer = new ElectronFileDownload(result.filePath, mode, size)
+        const transfer = new ElectronFileDownload(filePath, mode, size, this.electron)
         await wrapPromise(this.zone, transfer.open())
         this.fileTransferStarted.next(transfer)
         return transfer
@@ -233,10 +252,12 @@ class ElectronFileUpload extends FileUpload {
     private mode: number
     private file: fs.FileHandle
     private buffer: Buffer
+    private powerSaveBlocker = 0
 
-    constructor (private filePath: string) {
+    constructor (private filePath: string, private electron: ElectronService) {
         super()
         this.buffer = Buffer.alloc(256 * 1024)
+        this.powerSaveBlocker = electron.powerSaveBlocker.start('prevent-app-suspension')
     }
 
     async open (): Promise<void> {
@@ -265,19 +286,23 @@ class ElectronFileUpload extends FileUpload {
     }
 
     close (): void {
+        this.electron.powerSaveBlocker.stop(this.powerSaveBlocker)
         this.file.close()
     }
 }
 
 class ElectronFileDownload extends FileDownload {
     private file: fs.FileHandle
+    private powerSaveBlocker = 0
 
     constructor (
         private filePath: string,
         private mode: number,
         private size: number,
+        private electron: ElectronService,
     ) {
         super()
+        this.powerSaveBlocker = electron.powerSaveBlocker.start('prevent-app-suspension')
     }
 
     async open (): Promise<void> {
@@ -306,6 +331,7 @@ class ElectronFileDownload extends FileDownload {
     }
 
     close (): void {
+        this.electron.powerSaveBlocker.stop(this.powerSaveBlocker)
         this.file.close()
     }
 }

tabby-electron/src/services/touchbar.service.ts

@@ -1,56 +1,29 @@
-import { SegmentedControlSegment, TouchBarSegmentedControl } from 'electron'
+import { ipcRenderer } from 'electron'
 import { Injectable, NgZone } from '@angular/core'
 import { AppService, HostAppService, Platform } from 'tabby-core'
-import { ElectronService } from '../services/electron.service'
-import { ElectronHostWindow } from './hostWindow.service'
 
 /** @hidden */
 @Injectable({ providedIn: 'root' })
 export class TouchbarService {
-    private tabsSegmentedControl: TouchBarSegmentedControl
-    private tabSegments: SegmentedControlSegment[] = []
-
     private constructor (
         private app: AppService,
         private hostApp: HostAppService,
-        private hostWindow: ElectronHostWindow,
-        private electron: ElectronService,
         private zone: NgZone,
     ) {
         if (this.hostApp.platform !== Platform.macOS) {
             return
         }
-        app.tabsChanged$.subscribe(() => this.updateTabs())
-        app.activeTabChange$.subscribe(() => this.updateTabs())
+        app.tabsChanged$.subscribe(() => this.update())
+        app.activeTabChange$.subscribe(() => this.update())
 
-        const activityIconPath = `${electron.app.getAppPath()}/assets/activity.png`
-        const activityIcon = this.electron.nativeImage.createFromPath(activityIconPath)
         app.tabOpened$.subscribe(tab => {
-            tab.titleChange$.subscribe(title => {
-                const segment = this.tabSegments[app.tabs.indexOf(tab)]
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (segment) {
-                    segment.label = this.shortenTitle(title)
-                    this.tabsSegmentedControl.segments = this.tabSegments
-                }
-            })
-            tab.activity$.subscribe(hasActivity => {
-                const showIcon = this.app.activeTab !== tab && hasActivity
-                const segment = this.tabSegments[app.tabs.indexOf(tab)]
-                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                if (segment) {
-                    segment.icon = showIcon ? activityIcon : undefined
-                }
-            })
+            tab.titleChange$.subscribe(() => this.update())
+            tab.activity$.subscribe(() => this.update())
         })
-    }
 
-    updateTabs (): void {
-        this.tabSegments = this.app.tabs.map(tab => ({
-            label: this.shortenTitle(tab.title),
+        ipcRenderer.on('touchbar-selection', (_event, index) => this.zone.run(() => {
+            this.app.selectTab(this.app.tabs[index])
         }))
-        this.tabsSegmentedControl.segments = this.tabSegments
-        this.tabsSegmentedControl.selectedIndex = this.app.activeTab ? this.app.tabs.indexOf(this.app.activeTab) : 0
     }
 
     update (): void {
@@ -58,20 +31,12 @@ export class TouchbarService {
             return
         }
 
-        this.tabsSegmentedControl = new this.electron.TouchBar.TouchBarSegmentedControl({
-            segments: this.tabSegments,
-            selectedIndex: this.app.activeTab ? this.app.tabs.indexOf(this.app.activeTab) : undefined,
-            change: (selectedIndex) => this.zone.run(() => {
-                this.app.selectTab(this.app.tabs[selectedIndex])
-            }),
-        })
+        const tabSegments = this.app.tabs.map(tab => ({
+            label: this.shortenTitle(tab.title),
+            hasActivity: this.app.activeTab !== tab && tab.hasActivity,
+        }))
 
-        const touchBar = new this.electron.TouchBar({
-            items: [
-                this.tabsSegmentedControl,
-            ],
-        })
-        this.hostWindow.setTouchBar(touchBar)
+        ipcRenderer.send('window-set-touch-bar', tabSegments, this.app.activeTab ? this.app.tabs.indexOf(this.app.activeTab) : undefined)
     }
 
     private shortenTitle (title: string): string {

tabby-electron/src/services/updater.service.ts

@@ -126,10 +126,11 @@ export class ElectronUpdaterService extends UpdaterService {
                 {
                     type: 'warning',
                     message: 'Installing the update will close all tabs and restart Tabby.',
-                    buttons: ['Cancel', 'Update'],
-                    defaultId: 1,
+                    buttons: ['Update', 'Cancel'],
+                    defaultId: 0,
+                    cancelId: 1,
                 }
-            )).response === 1) {
+            )).response === 0) {
                 await this.downloaded
                 this.electron.autoUpdater.quitAndInstall()
             }

tabby-electron/src/sftpContextMenu.ts

@@ -0,0 +1,59 @@
+import * as tmp from 'tmp-promise'
+import * as path from 'path'
+import * as fs from 'fs'
+import { Subject, debounceTime, debounce } from 'rxjs'
+import { Injectable } from '@angular/core'
+import { MenuItemOptions } from 'tabby-core'
+import { SFTPFile, SFTPPanelComponent, SFTPContextMenuItemProvider, SFTPSession } from 'tabby-ssh'
+import { ElectronPlatformService } from './services/platform.service'
+
+
+/** @hidden */
+@Injectable()
+export class EditSFTPContextMenu extends SFTPContextMenuItemProvider {
+    weight = 0
+
+    constructor (
+        private platform: ElectronPlatformService,
+    ) {
+        super()
+    }
+
+    async getItems (item: SFTPFile, panel: SFTPPanelComponent): Promise<MenuItemOptions[]> {
+        if (item.isDirectory) {
+            return []
+        }
+        return [
+            {
+                click: () => this.edit(item, panel.sftp),
+                label: 'Edit locally',
+            },
+        ]
+    }
+
+    private async edit (item: SFTPFile, sftp: SFTPSession) {
+        const tempDir = (await tmp.dir({ unsafeCleanup: true })).path
+        const tempPath = path.join(tempDir, item.name)
+        const transfer = await this.platform.startDownload(item.name, item.mode, item.size, tempPath)
+        if (!transfer) {
+            return
+        }
+        await sftp.download(item.fullPath, transfer)
+        this.platform.openPath(tempPath)
+
+        const events = new Subject<string>()
+        const watcher = fs.watch(tempPath, event => events.next(event))
+        events.pipe(debounceTime(1000), debounce(async event => {
+            if (event === 'rename') {
+                watcher.close()
+            }
+            const upload = await this.platform.startUpload({ multiple: false }, [tempPath])
+            if (!upload.length) {
+                return
+            }
+            sftp.upload(item.fullPath, upload[0])
+        })).subscribe()
+        watcher.on('close', () => events.complete())
+        sftp.closed$.subscribe(() => watcher.close())
+    }
+}

tabby-electron/yarn.lock

@@ -16,6 +16,19 @@ async@^3.1.0:
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.0.tgz#b3a2685c5ebb641d3de02d161002c60fc9f85720"
   integrity sha512-TR2mEZFVOj2pLStYxLht7TyfuRzaydfpxr3k9RpHIzMgw7A64dzsdqCxH1WJyQdoe8T10nDXd9wnEigmiuHIZw==
 
+balanced-match@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
+
+brace-expansion@^1.1.7:
+  version "1.1.11"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
 call-bind@^1.0.0, call-bind@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.2.tgz#b1d4e89e688119c3c9a903ad30abb2f6a919be3c"
@@ -70,6 +83,11 @@ colorspace@1.1.x:
     color "3.0.x"
     text-hex "1.0.x"
 
+concat-map@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
+
 core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
@@ -143,6 +161,11 @@ fn.name@1.x.x:
   resolved "https://registry.yarnpkg.com/fn.name/-/fn.name-1.1.0.tgz#26cad8017967aea8731bc42961d04a3d5988accc"
   integrity sha512-GRnmB5gPyJpAhTQdSZTSp9uaPSvl09KoYcMQtsB9rQoOmzs9dH6ffeccH+Z+cv6P68Hu5bC6JjRh4Ah/mHSNRw==
 
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
+
 function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
@@ -157,6 +180,18 @@ get-intrinsic@^1.0.2, get-intrinsic@^1.1.1:
     has "^1.0.3"
     has-symbols "^1.0.1"
 
+glob@^7.1.3:
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.7.tgz#3b193e9233f01d42d0b3f78294bbeeb418f94a90"
+  integrity sha512-OvD9ENzPLbegENnYP5UUfJIirTg4+XwMWGaQfQTY0JenxNvvIKP3U3/tAQSPIu/lHxXYSZmpXlUHeqAIdKzBLQ==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 has-bigints@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
@@ -174,7 +209,15 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-inherits@^2.0.3, inherits@~2.0.3:
+inflight@^1.0.4:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  integrity sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2, inherits@^2.0.3, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -267,6 +310,13 @@ logform@^2.2.0:
     ms "^2.1.1"
     triple-beam "^1.3.0"
 
+minimatch@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
+  integrity sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==
+  dependencies:
+    brace-expansion "^1.1.7"
+
 ms@^2.1.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
@@ -302,6 +352,13 @@ object.entries@^1.1.3:
     es-abstract "^1.18.0-next.1"
     has "^1.0.3"
 
+once@^1.3.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
+  dependencies:
+    wrappy "1"
+
 one-time@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/one-time/-/one-time-1.0.0.tgz#e06bc174aed214ed58edede573b433bbf827cb45"
@@ -309,6 +366,11 @@ one-time@^1.0.0:
   dependencies:
     fn.name "1.x.x"
 
+path-is-absolute@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  integrity sha1-F0uSaHNVNP+8es5r9TpanhtcX18=
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -336,6 +398,13 @@ readable-stream@^3.4.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+rimraf@^3.0.0:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
 safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -400,6 +469,20 @@ text-hex@1.0.x:
   resolved "https://registry.yarnpkg.com/text-hex/-/text-hex-1.0.0.tgz#69dc9c1b17446ee79a92bf5b884bb4b9127506f5"
   integrity sha512-uuVGNWzgJ4yhRaNSiubPY7OjISw4sw4E5Uv0wbjp+OzcbmVU/rsT8ujgcXJhn9ypzsgr5vlzpPqP+MBBKcGvbg==
 
+tmp-promise@^3.0.2:
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/tmp-promise/-/tmp-promise-3.0.2.tgz#6e933782abff8b00c3119d63589ca1fb9caaa62a"
+  integrity sha512-OyCLAKU1HzBjL6Ev3gxUeraJNlbNingmi8IrHHEsYH8LTmEuhvYfqvhn2F/je+mjf4N58UmZ96OMEy1JanSCpA==
+  dependencies:
+    tmp "^0.2.0"
+
+tmp@^0.2.0:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
+  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
+  dependencies:
+    rimraf "^3.0.0"
+
 triple-beam@^1.2.0, triple-beam@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/triple-beam/-/triple-beam-1.3.0.tgz#a595214c7298db8339eeeee083e4d10bd8cb8dd9"
@@ -463,3 +546,8 @@ winston@^3.3.3:
     stack-trace "0.0.x"
     triple-beam "^1.3.0"
     winston-transport "^4.4.0"
+
+wrappy@1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=

tabby-local/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabby-local",
-  "version": "1.0.148-nightly.2",
+  "version": "1.0.150",
   "description": "Tabby's local shell plugin",
   "keywords": [
     "tabby-builtin-plugin"
@@ -17,7 +17,6 @@
   "author": "Eugene Pankov",
   "license": "MIT",
   "dependencies": {
-    "hterm-umdjs": "1.4.1",
     "opentype.js": "^1.3.3"
   },
   "devDependencies": {

tabby-local/src/components/terminalTab.component.ts

@@ -106,10 +106,11 @@ export class TerminalTabComponent extends BaseTerminalTabComponent {
             {
                 type: 'warning',
                 message: `"${children[0].command}" is still running. Close?`,
-                buttons: ['Cancel', 'Kill'],
-                defaultId: 1,
+                buttons: ['Kill', 'Cancel'],
+                defaultId: 0,
+                cancelId: 1,
             }
-        )).response === 1
+        )).response === 0
     }
 
     ngOnDestroy (): void {

tabby-local/src/config.ts

@@ -3,9 +3,6 @@ import { ConfigProvider, Platform } from 'tabby-core'
 /** @hidden */
 export class TerminalConfigProvider extends ConfigProvider {
     defaults = {
-        hotkeys: {
-            'copy-current-path': [],
-        },
         terminal: {
             autoOpen: false,
             useConPTY: true,

tabby-local/src/profiles.ts

@@ -84,6 +84,10 @@ export class LocalProfilesService extends ProfileProvider<LocalProfile> {
         }
     }
 
+    getSuggestedName (profile: LocalProfile): string {
+        return this.getDescription(profile)
+    }
+
     getDescription (profile: PartialProfile<LocalProfile>): string {
         return profile.options?.command ?? ''
     }

tabby-local/src/services/terminal.service.ts

@@ -23,7 +23,7 @@ export class TerminalService {
         if (!profile) {
             profile = profiles.filter(x => x.type === 'local' && x.isBuiltin)[0]
         }
-        return profile as PartialProfile<LocalProfile>
+        return profile
     }
 
     /**

tabby-local/src/session.ts

@@ -1,6 +1,5 @@
 import * as psNode from 'ps-node'
 import * as fs from 'mz/fs'
-import * as os from 'os'
 import { Injector } from '@angular/core'
 import { HostAppService, ConfigService, WIN_BUILD_CONPTY_SUPPORTED, isWindowsBuild, Platform, BootstrapData, BOOTSTRAP_DATA, LogService } from 'tabby-core'
 import { BaseSession } from 'tabby-terminal'
@@ -19,8 +18,6 @@ try {
 } catch { }
 
 const windowsDirectoryRegex = /([a-zA-Z]:[^\:\[\]\?\"\<\>\|]+)/mi
-const OSC1337Prefix = Buffer.from('\x1b]1337;')
-const OSC1337Suffix = Buffer.from('\x07')
 
 // eslint-disable-next-line @typescript-eslint/no-extraneous-class
 export class PTYProxy {
@@ -90,7 +87,6 @@ export class Session extends BaseSession {
     private ptyClosed = false
     private pauseAfterExit = false
     private guessedCWD: string|null = null
-    private reportedCWD: string
     private initialCWD: string|null = null
     private config: ConfigService
     private hostApp: HostAppService
@@ -184,9 +180,7 @@ export class Session extends BaseSession {
 
         this.pty.subscribe('data', (array: Uint8Array) => {
             this.pty!.ackData(array.length)
-
-            let data = Buffer.from(array)
-            data = this.processOSC1337(data)
+            const data = Buffer.from(array)
             this.emitOutput(data)
             if (this.hostApp.platform === Platform.Windows) {
                 this.guessWindowsCWD(data.toString())
@@ -293,7 +287,7 @@ export class Session extends BaseSession {
     }
 
     supportsWorkingDirectory (): boolean {
-        return !!(this.truePID || this.reportedCWD || this.guessedCWD)
+        return !!(this.truePID ?? this.reportedCWD ?? this.guessedCWD)
     }
 
     async getWorkingDirectory (): Promise<string|null> {
@@ -336,22 +330,4 @@ export class Session extends BaseSession {
             this.guessedCWD = match[0]
         }
     }
-
-    private processOSC1337 (data: Buffer) {
-        if (data.includes(OSC1337Prefix)) {
-            const preData = data.subarray(0, data.indexOf(OSC1337Prefix))
-            const params = data.subarray(data.indexOf(OSC1337Prefix) + OSC1337Prefix.length)
-            const postData = params.subarray(params.indexOf(OSC1337Suffix) + OSC1337Suffix.length)
-            const paramString = params.subarray(0, params.indexOf(OSC1337Suffix)).toString()
-
-            if (paramString.startsWith('CurrentDir=')) {
-                this.reportedCWD = paramString.split('=')[1]
-                if (this.reportedCWD.startsWith('~')) {
-                    this.reportedCWD = os.homedir() + this.reportedCWD.substring(1)
-                }
-                data = Buffer.concat([preData, postData])
-            }
-        }
-        return data
-    }
 }

tabby-local/src/tabContextMenu.ts

@@ -138,13 +138,6 @@ export class NewTabContextMenu extends TabContextMenuItemProvider {
             })
         }
 
-        if (tab instanceof TerminalTabComponent && tab.session?.supportsWorkingDirectory()) {
-            items.push({
-                label: 'Copy current path',
-                click: () => tab.copyCurrentPath(),
-            })
-        }
-
         return items
     }
 }

tabby-local/yarn.lock

@@ -174,11 +174,6 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hterm-umdjs@1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/hterm-umdjs/-/hterm-umdjs-1.4.1.tgz#0cd5352eaf927c70b83c36146cf2c2a281dba957"
-  integrity sha512-r5JOmdDK1bZCmp3cKcuGRLVeum33H+pzD119ZxmQou+QUVe6SAVSz03HvKWVhM2Ao1Biv+fkhFDmnsaRPq0tFg==
-
 is-arguments@^1.0.4, is-arguments@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.0.tgz#62353031dfbee07ceb34656a6bde59efecae8dd9"

tabby-plugin-manager/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabby-plugin-manager",
-  "version": "1.0.148-nightly.2",
+  "version": "1.0.150",
   "description": "Tabby's plugin manager",
   "keywords": [
     "tabby-builtin-plugin"

tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts

@@ -8,7 +8,7 @@ import { PluginManagerService } from '../services/pluginManager.service'
 
 enum BusyState { Installing = 'Installing', Uninstalling = 'Uninstalling' }
 
-const FORCE_ENABLE = ['tabby-core', 'tabby-settings']
+const FORCE_ENABLE = ['tabby-core', 'tabby-settings', 'tabby-electron', 'tabby-web']
 
 /** @hidden */
 @Component({

tabby-serial/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabby-serial",
-  "version": "1.0.148-nightly.2",
+  "version": "1.0.150",
   "description": "Serial connections for Tabby",
   "keywords": [
     "tabby-builtin-plugin"

tabby-serial/src/profiles.ts

@@ -25,10 +25,10 @@ export class SerialProfilesService extends ProfileProvider<SerialProfile> {
             xon: false,
             xoff: false,
             xany: false,
-            inputMode: 'local-echo',
+            inputMode: null,
             outputMode: null,
             inputNewlines: null,
-            outputNewlines: 'crlf',
+            outputNewlines: null,
             scripts: [],
         },
     }
@@ -92,6 +92,10 @@ export class SerialProfilesService extends ProfileProvider<SerialProfile> {
         }
     }
 
+    getSuggestedName (profile: SerialProfile): string {
+        return this.getDescription(profile)
+    }
+
     getDescription (profile: SerialProfile): string {
         return profile.options.port
     }

tabby-settings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tabby-settings",
-  "version": "1.0.148-nightly.2",
+  "version": "1.0.150",
   "description": "Tabby terminal settings page",
   "keywords": [
     "tabby-builtin-plugin"

tabby-settings/src/components/configSyncSettingsTab.component.pug

@@ -0,0 +1,122 @@
+h3.mb-3 Config sync
+
+ul.nav-tabs(ngbNav, #nav='ngbNav')
+    li(ngbNavItem)
+        a(ngbNavLink) Sync
+        ng-template(ngbNavContent)
+            .form-line
+                .header
+                    .title Sync host
+
+                .input-group.w-50
+                    input.form-control(
+                        type='text',
+                        [(ngModel)]='config.store.configSync.host',
+                        (ngModelChange)='config.save()',
+                    )
+                    .input-group-append(*ngIf='config.store.configSync.host')
+                        button.btn.btn-secondary((click)='platform.openExternal("http://" + config.store.configSync.host)')
+                            i.fas.fa-external-link-alt
+
+            .form-line
+                .header
+                    .title Secret sync token
+                    .description Get it from the Tabby Web settings window
+
+                .input-group
+                    input.form-control(
+                        type='password',
+                        [(ngModel)]='config.store.configSync.token',
+                        (ngModelChange)='config.save(); testConnection()'
+                    )
+                    .input-group-append(*ngIf='config.store.configSync.token')
+                        .input-group-text
+                            i.fas.fa-fw.fa-circle-notch.fa-spin.text-warning(*ngIf='connectionSuccessful === null')
+                            i.fas.fa-fw.fa-check.text-success(*ngIf='connectionSuccessful')
+                            i.fas.fa-fw.fa-exclamation-triangle.text-danger(*ngIf='connectionSuccessful === false')
+
+            ng-container(*ngIf='config.store.configSync.token')
+                .alert.alert-danger(*ngIf='connectionSuccessful === false')
+                    i.fas.fa-exclamation-triangle
+                    span.ml-2 Connection failed: {{connectionError}}
+
+            ng-container(*ngIf='connectionSuccessful')
+                .form-line
+                    .header
+                        .title Configs
+
+                div(*ngIf='configs === null')
+                    i.fas.fa-fw.fa-circle-notch.fa-spin
+                    span.ml-2 Loading configs...
+
+                ng-container(*ngIf='configs !== null')
+                    .list-group-light
+                        .list-group-item.d-flex.align-items-center(
+                            *ngFor='let cfg of configs',
+                            [class.active]='isActiveConfig(cfg)',
+                        )
+                            i.fas.fa-fw.fa-file
+                            .ml-2.d-flex.flex-column.align-items-start
+                                div {{cfg.name}}
+                                small.text-muted Modified on {{cfg.modified_at|date:'medium'}}
+                                .badge.badge-info(*ngIf='isActiveConfig(cfg)') ACTIVE
+                            .mr-auto
+                            button.btn.btn-link.ml-1(
+                                (click)='uploadAndSync(cfg)',
+                                [class.hover-reveal]='!isActiveConfig(cfg)'
+                            )
+                                i.fas.fa-arrow-up
+                                span.ml-2(*ngIf='isActiveConfig(cfg)') Upload
+                                span.ml-2(*ngIf='!isActiveConfig(cfg)') Replace
+                            button.btn.btn-link.ml-1(
+                                (click)='downloadAndSync(cfg)',
+                                [class.hover-reveal]='!isActiveConfig(cfg)'
+                            )
+                                i.fas.fa-arrow-down
+                                span.ml-2 Download
+                        a.list-group-item.list-group-item-action.d-flex.align-items-center(
+                            href='#',
+                            (click)='uploadAsNew()'
+                        )
+                            i.fas.fa-fw.fa-cloud-upload-alt
+                            .ml-2 Upload as a new config
+
+            ng-container(*ngIf='hasMatchingRemoteConfig()')
+                .form-line
+                    .header
+                        .title Sync automatically
+                        .description Automatically upload changes and check for updates every minute
+
+                    toggle(
+                        [(ngModel)]='config.store.configSync.auto',
+                        (ngModelChange)='config.save()',
+                    )
+
+    li(ngbNavItem)
+        a(ngbNavLink) Advanced
+        ng-template(ngbNavContent)
+            .form-line
+                .header
+                    .title Sync hotkeys
+                toggle(
+                    [(ngModel)]='config.store.configSync.parts.hotkeys',
+                    (ngModelChange)='config.save()',
+                )
+
+            .form-line
+                .header
+                    .title Sync window settings
+                toggle(
+                    [(ngModel)]='config.store.configSync.parts.appearance',
+                    (ngModelChange)='config.save()',
+                )
+
+            .form-line
+                .header
+                    .title Sync Vault
+                toggle(
+                    [(ngModel)]='config.store.configSync.parts.vault',
+                    (ngModelChange)='config.save()',
+                )
+
+div([ngbNavOutlet]='nav')

tabby-settings/src/components/configSyncSettingsTab.component.ts

@@ -0,0 +1,109 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { Component } from '@angular/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { BaseComponent, ConfigService, PromptModalComponent, HostAppService, PlatformService, NotificationsService } from 'tabby-core'
+import { Config, ConfigSyncService } from '../services/configSync.service'
+
+
+/** @hidden */
+@Component({
+    selector: 'config-sync-settings-tab',
+    template: require('./configSyncSettingsTab.component.pug'),
+})
+export class ConfigSyncSettingsTabComponent extends BaseComponent {
+    connectionSuccessful: boolean|null = null
+    connectionError: Error|null = null
+    configs: Config[]|null = null
+
+    constructor (
+        public config: ConfigService,
+        public platform: PlatformService,
+        private configSync: ConfigSyncService,
+        private hostApp: HostAppService,
+        private ngbModal: NgbModal,
+        private notifications: NotificationsService,
+    ) {
+        super()
+    }
+
+    async ngOnInit () {
+        await this.testConnection()
+        this.loadConfigs()
+    }
+
+    async testConnection () {
+        if (!this.config.store.configSync.host || !this.config.store.configSync.token) {
+            return
+        }
+        this.connectionSuccessful = null
+        try {
+            await this.configSync.getUser()
+            this.connectionSuccessful = true
+            this.loadConfigs()
+        } catch (e) {
+            this.connectionSuccessful = false
+            this.connectionError = e
+            this.configs = null
+        }
+    }
+
+    async loadConfigs () {
+        this.configs = await this.configSync.getConfigs()
+    }
+
+    async uploadAsNew () {
+        let name = `New config on ${this.hostApp.platform}`
+        const modal = this.ngbModal.open(PromptModalComponent)
+        modal.componentInstance.prompt = 'Name for the new config'
+        modal.componentInstance.value = name
+        name = (await modal.result)?.value
+        if (!name) {
+            return
+        }
+        const cfg = await this.configSync.createNewConfig(name)
+        this.loadConfigs()
+        this.configSync.setConfig(cfg)
+        this.uploadAndSync(cfg)
+    }
+
+    async uploadAndSync (cfg: Config) {
+        if (this.config.store.configSync.configID !== cfg.id) {
+            if ((await this.platform.showMessageBox({
+                type: 'warning',
+                message: 'Overwrite the config on the remote side and start syncing?',
+                buttons: ['Overwrite remote and sync', 'Cancel'],
+                defaultId: 1,
+                cancelId: 1,
+            })).response === 1) {
+                return
+            }
+        }
+        this.configSync.setConfig(cfg)
+        await this.configSync.upload()
+        this.loadConfigs()
+        this.notifications.info('Config uploaded')
+    }
+
+    async downloadAndSync (cfg: Config) {
+        if ((await this.platform.showMessageBox({
+            type: 'warning',
+            message: 'Overwrite the local config and start syncing?',
+            buttons: ['Overwrite local and sync', 'Cancel'],
+            defaultId: 1,
+            cancelId: 1,
+        })).response === 1) {
+            return
+        }
+        this.configSync.setConfig(cfg)
+        await this.configSync.download()
+        this.notifications.info('Config downloaded')
+    }
+
+    hasMatchingRemoteConfig () {
+        return !!this.configs?.find(c => this.isActiveConfig(c))
+    }
+
+    isActiveConfig (c: Config) {
+        return c.id === this.config.store.configSync.configID
+    }
+}

tabby-settings/src/components/editProfileModal.component.pug

@@ -46,7 +46,10 @@
                 input.form-control.w-50(
                     type='text',
                     [(ngModel)]='profile.color',
-                    placeholder='#000000'
+                    placeholder='#000000',
+                    alwaysVisibleTypeahead,
+                    [ngbTypeahead]='colorsAutocomplete',
+                    [resultFormatter]='colorsFormatter'
                 )
 
             .form-line