fixed zooming - fixes #3684

Bump readable-stream from 2.3.7 to 3.6.0 in /terminus-core

.all-contributorsrc

@@ -216,6 +216,169 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "boxmein",
+      "name": "Johannes Kadak",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/358714?v=4",
+      "profile": "https://www.boxmein.net",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "LeSeulArtichaut",
+      "name": "LeSeulArtichaut",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/38361244?v=4",
+      "profile": "https://github.com/LeSeulArtichaut",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "CyrilTaylor",
+      "name": "Cyril Taylor",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/12631466?v=4",
+      "profile": "https://github.com/CyrilTaylor",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "nstefanou",
+      "name": "nstefanou",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/51129173?v=4",
+      "profile": "https://github.com/nstefanou",
+      "contributions": [
+        "code",
+        "plugin"
+      ]
+    },
+    {
+      "login": "orin220444",
+      "name": "orin220444",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/30747229?v=4",
+      "profile": "https://github.com/orin220444",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "Goobles",
+      "name": "Gobius Dolhain",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/8776771?v=4",
+      "profile": "https://github.com/Goobles",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "3l0w",
+      "name": "Gwilherm Folliot",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/37798980?v=4",
+      "profile": "https://github.com/3l0w",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "dimitory",
+      "name": "Dmitry Pronin",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/475955?v=4",
+      "profile": "https://github.com/Dimitory",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "JonathanBeverley",
+      "name": "Jonathan Beverley",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/20328966?v=4",
+      "profile": "https://github.com/JonathanBeverley",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "zend",
+      "name": "Zenghai Liang",
+      "avatar_url": "https://avatars1.githubusercontent.com/u/25160?v=4",
+      "profile": "https://github.com/zend",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "matishadow",
+      "name": "Mateusz Tracz",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/9083085?v=4",
+      "profile": "https://about.me/matishadow",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "pinpins",
+      "name": "pinpin",
+      "avatar_url": "https://avatars3.githubusercontent.com/u/36234677?v=4",
+      "profile": "https://zergpool.com",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "TakuroOnoda",
+      "name": "Takuro Onoda",
+      "avatar_url": "https://avatars0.githubusercontent.com/u/1407926?v=4",
+      "profile": "https://github.com/TakuroOnoda",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "frauhottelmann",
+      "name": "frauhottelmann",
+      "avatar_url": "https://avatars2.githubusercontent.com/u/902705?v=4",
+      "profile": "https://github.com/frauhottelmann",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "VectorKappa",
+      "name": "Piotr Patalong",
+      "avatar_url": "https://avatars.githubusercontent.com/u/29167842?v=4",
+      "profile": "http://patalong.pl",
+      "contributions": [
+        "design"
+      ]
+    },
+    {
+      "login": "clarkwang",
+      "name": "Clark Wang",
+      "avatar_url": "https://avatars.githubusercontent.com/u/157076?v=4",
+      "profile": "https://github.com/clarkwang",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "iamchating",
+      "name": "iamchating",
+      "avatar_url": "https://avatars.githubusercontent.com/u/7088153?v=4",
+      "profile": "https://github.com/iamchating",
+      "contributions": [
+        "code"
+      ]
+    },
+    {
+      "login": "starxg",
+      "name": "starxg",
+      "avatar_url": "https://avatars.githubusercontent.com/u/34997494?v=4",
+      "profile": "https://github.com/starxg",
+      "contributions": [
+        "plugin"
+      ]
     }
   ],
   "contributorsPerLine": 7,
@@ -223,5 +386,6 @@
   "projectOwner": "Eugeny",
   "repoType": "github",
   "repoHost": "https://github.com",
-  "commitConvention": "none"
+  "commitConvention": "none",
+  "skipCi": true
 }

.eslintrc.yml

@@ -1,6 +1,8 @@
 parser: '@typescript-eslint/parser'
 parserOptions:
-  project: tsconfig.json
+  project:
+  - tsconfig.json
+  - '*/tsconfig.typings.json'
 extends:
   - 'plugin:@typescript-eslint/all'
 plugins:
@@ -29,7 +31,6 @@ rules:
   '@typescript-eslint/no-magic-numbers': off
   '@typescript-eslint/member-delimiter-style': off
   '@typescript-eslint/promise-function-async': off
-  '@typescript-eslint/no-unnecessary-type-assertion': off
   '@typescript-eslint/require-array-sort-compare': off
   '@typescript-eslint/no-floating-promises': off
   '@typescript-eslint/prefer-readonly': off
@@ -37,6 +38,8 @@ rules:
   '@typescript-eslint/strict-boolean-expressions': off
   '@typescript-eslint/no-misused-promises': off
   '@typescript-eslint/typedef': off
+  '@typescript-eslint/consistent-type-imports': off
+  '@typescript-eslint/sort-type-union-intersection-members': off
   '@typescript-eslint/no-use-before-define':
   - error
   - classes: false
@@ -53,7 +56,8 @@ rules:
   computed-property-spacing:
   - error
   - never
-  comma-dangle:
+  comma-dangle: off
+  '@typescript-eslint/comma-dangle':
   - error
   - always-multiline
   curly: error
@@ -79,7 +83,9 @@ rules:
       args: after-used
       argsIgnorePattern: ^_
   no-undef: error
-  object-curly-spacing:
+  no-var: error
+  object-curly-spacing: off
+  '@typescript-eslint/object-curly-spacing':
   - error
   - always
   quote-props:
@@ -92,5 +98,22 @@ rules:
   - error
   - single
   - allowTemplateLiterals: true
+  '@typescript-eslint/no-confusing-void-expression': off
   '@typescript-eslint/no-non-null-assertion': off
-  '@typescript-eslint/no-unnecessary-condition': off
+  '@typescript-eslint/no-unnecessary-condition':
+  - error
+  - allowConstantLoopConditions: true
+  '@typescript-eslint/restrict-template-expressions': off
+  '@typescript-eslint/prefer-readonly-parameter-types': off
+  '@typescript-eslint/no-unsafe-member-access': off
+  '@typescript-eslint/no-unsafe-call': off
+  '@typescript-eslint/no-unsafe-return': off
+  '@typescript-eslint/no-unsafe-assignment': off
+  '@typescript-eslint/naming-convention': off
+  '@typescript-eslint/lines-between-class-members':
+  - error
+  - exceptAfterSingleLine: true
+  '@typescript-eslint/dot-notation': off
+  '@typescript-eslint/no-implicit-any-catch': off
+  '@typescript-eslint/member-ordering': off
+  '@typescript-eslint/no-var-requires': off

.github/dependabot.yml

@@ -0,0 +1,56 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 20
+- package-ecosystem: npm
+  directory: "/app"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 20
+- package-ecosystem: npm
+  directory: "/terminus-core"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 20
+- package-ecosystem: npm
+  directory: "/terminus-settings"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 20
+- package-ecosystem: npm
+  directory: "/terminus-terminal"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 20
+- package-ecosystem: npm
+  directory: "/terminus-community-color-schemes"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 20
+- package-ecosystem: npm
+  directory: "/terminus-plugin-manager"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 20
+- package-ecosystem: npm
+  directory: "/terminus-ssh"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 20
+- package-ecosystem: github-actions
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "04:00"
+  open-pull-requests-limit: 20

.github/workflows/docs.yml

@@ -11,7 +11,7 @@ jobs:
     - name: Installing Node
       uses: actions/setup-node@v1
       with:
-        version: 10
+        node-version: 15
 
     - name: Build
       run: |
@@ -23,6 +23,7 @@ jobs:
         cd ..
         rm app/node_modules/.yarn-integrity
         yarn
+        yarn run build:typings
         yarn run docs
         rsync -e "ssh -o StrictHostKeyChecking=no" -arv docs/api/ root@ajenti.org:/srv/terminus-docs/
 

.github/workflows/lint.yml

@@ -11,7 +11,7 @@ jobs:
     - name: Installing Node
       uses: actions/setup-node@v1
       with:
-        version: 10
+        node-version: 15
 
     - name: Install deps
       run: |
@@ -22,5 +22,8 @@ jobs:
         rm app/node_modules/.yarn-integrity
         yarn
 
+    - name: Build typings
+      run: yarn run build:typings
+
     - name: Lint
       run: yarn run lint

.github/workflows/linux.yml

@@ -2,7 +2,7 @@ name: Linux Build
 on: [push, pull_request]
 jobs:
   build:
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-18.04
 
     steps:
     - name: Checkout
@@ -11,23 +11,25 @@ jobs:
     - name: Install Node
       uses: actions/setup-node@v1
       with:
-        version: 10
+        node-version: 15
 
     - name: Install deps
       run: |
+        sudo apt-get install bsdtar
         npm i -g yarn@1.19.1
         cd app
         yarn
         cd ..
         rm app/node_modules/.yarn-integrity
         yarn
+        ./node_modules/.bin/patch-package
+        cd app
+        ../node_modules/.bin/patch-package
+        cd ..
 
     - name: Build native deps
       run: scripts/build-native.js
 
-    - name: Build typings
-      run: yarn run build:typings
-
     - name: Webpack
       run: yarn run build
 
@@ -39,6 +41,16 @@ jobs:
       env:
         DEBUG: electron-builder,electron-builder:*
         GH_TOKEN: ${{ secrets.GH_TOKEN }}
+        USE_HARD_LINKS: false
+
+    - name: Upload symbols
+      run: |
+        sudo npm install -g @sentry/cli --unsafe-perm
+        ./scripts/sentry-upload.js
+      env:
+        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+        SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
 
     - name: Package artifacts
       run: |
@@ -46,6 +58,8 @@ jobs:
         mv dist/*.deb artifact-deb/ || true
         mkdir artifact-rpm
         mv dist/*.rpm artifact-rpm/ || true
+        mkdir artifact-pacman
+        mv dist/*.pacman artifact-pacman/ || true
         mkdir artifact-snap
         mv dist/*.snap artifact-snap/ || true
         mkdir artifact-tar.gz
@@ -54,19 +68,25 @@ jobs:
     - uses: actions/upload-artifact@master
       name: Upload DEB
       with:
-        name: Linux .deb
+        name: Linux DEB
         path: artifact-deb
 
     - uses: actions/upload-artifact@master
       name: Upload RPM
       with:
-        name: Linux .rpm
+        name: Linux RPM
         path: artifact-rpm
 
+    - uses: actions/upload-artifact@master
+      name: Upload Pacman Package
+      with:
+        name: Linux Pacman
+        path: artifact-pacman
+
     - uses: actions/upload-artifact@master
       name: Upload Snap
       with:
-        name: Linux .snap
+        name: Linux Snap
         path: artifact-snap
 
     - uses: actions/upload-artifact@master

.github/workflows/macos.yml

@@ -2,7 +2,12 @@ name: macOS Build
 on: [push, pull_request]
 jobs:
   build:
-    runs-on: macOS-latest
+    runs-on: macos-11.0
+    strategy:
+      matrix:
+        include:
+          - arch: x86_64
+          - arch: arm64
 
     steps:
     - name: Checkout
@@ -11,43 +16,64 @@ jobs:
     - name: Installing Node
       uses: actions/setup-node@v1
       with:
-        version: 10
+        node-version: 15
 
     - name: Install deps
       run: |
-        sudo npm i -g yarn@1.19.1
+        sudo npm i -g yarn@1.22.1
         cd app
         yarn
         cd ..
         rm app/node_modules/.yarn-integrity
         yarn
+        ./node_modules/.bin/patch-package
+        cd app
+        ../node_modules/.bin/patch-package
+        cd ..
 
     - name: Build native deps
       run: scripts/build-native.js
-
-    - name: Build typings
-      run: yarn run build:typings
+      env:
+        ARCH: ${{matrix.arch}}
 
     - name: Webpack
       run: yarn run build
 
     - name: Prepackage plugins
       run: scripts/prepackage-plugins.js
+      env:
+        ARCH: ${{matrix.arch}}
+
+    - run: sed -i '' 's/updateInfo = await/\/\/updateInfo = await/g' node_modules/app-builder-lib/out/targets/ArchiveTarget.js
 
     - name: Build and sign packages
       run: scripts/build-macos.js
       if: github.repository == 'Eugeny/terminus' && github.event_name == 'push'
       env:
-        DEBUG: electron-builder,electron-builder:*
+        ARCH: ${{matrix.arch}}
         GH_TOKEN: ${{ secrets.GH_TOKEN }}
         CSC_LINK: ${{ secrets.CSC_LINK }}
         CSC_KEY_PASSWORD: ${{ secrets.CSC_KEY_PASSWORD }}
+        APPSTORE_USERNAME: ${{ secrets.APPSTORE_USERNAME }}
+        APPSTORE_PASSWORD: ${{ secrets.APPSTORE_PASSWORD }}
+        USE_HARD_LINKS: false
+        # DEBUG: electron-builder,electron-builder:*
 
     - name: Build packages without signing
       run: scripts/build-macos.js
       if: github.repository != 'Eugeny/terminus' || github.event_name != 'push'
       env:
-        DEBUG: electron-builder,electron-builder:*
+        ARCH: ${{matrix.arch}}
+        # DEBUG: electron-builder,electron-builder:*
+
+    - name: Upload symbols
+      run: |
+        sudo npm install -g @sentry/cli --unsafe-perm
+        ./scripts/sentry-upload.js
+      env:
+        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+        SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
 
     - name: Package artifacts
       run: |
@@ -59,11 +85,11 @@ jobs:
     - uses: actions/upload-artifact@master
       name: Upload PKG
       with:
-        name: macOS .pkg
+        name: macOS .pkg (${{matrix.arch}})
         path: artifact-pkg
 
     - uses: actions/upload-artifact@master
       name: Upload ZIP
       with:
-        name: macOS .zip
+        name: macOS .zip (${{matrix.arch}})
         path: artifact-zip

.github/workflows/windows.yml

@@ -11,7 +11,7 @@ jobs:
     - name: Installing Node
       uses: actions/setup-node@v1
       with:
-        version: 10
+        node-version: 14
 
     - name: Build
       shell: powershell
@@ -34,12 +34,21 @@ jobs:
       run: node scripts/build-windows.js
       if: github.repository != 'Eugeny/terminus' || github.event_name != 'push'
 
+    - name: Upload symbols
+      run: |
+        npm install @sentry/cli
+        node scripts/sentry-upload.js
+      env:
+        SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+        SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+        SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+
     - name: Package artifacts
       run: |
         mkdir artifact-setup
         mv dist/*-setup.exe artifact-setup/
         mkdir artifact-portable
-        mv dist/*-portable.exe artifact-portable/
+        mv dist/*-portable.zip artifact-portable/
 
     - uses: actions/upload-artifact@master
       name: Upload installer

.gitignore

@@ -13,6 +13,9 @@ dist
 *.xcuserstate
 *.wixpdb
 
+.DS_Store
+.DS_Store?
+
 coverage
 .nyc_output
 npm-debug.log
@@ -24,3 +27,10 @@ yarn-error.log
 docs/api
 .travis.ssh.key
 *.code-workspace
+
+.electron-symbols
+sentry.properties
+sentry-symbols.js
+
+terminus-ssh/util/pagent.exe
+*.psd

.travis.yml

@@ -1,5 +1,5 @@
 language: node_js
-node_js: 11
+node_js: 15
 
 stages:
   - Build

HACKING.md

@@ -10,27 +10,25 @@ First, install the dependencies:
 
 ```
 # macOS/Linux:
-npm install
-./scripts/install-deps.js
+yarn
 ./scripts/build-native.js
 
 # Windows:
 npm -g install windows-build-tools
-npm install
-node scripts\install-deps.js
+yarn
 node scripts\build-native.js
 ```
 
 Now, check if your build is working:
 
 ```
-npm run build
+yarn run build
 ```
 
 Start Terminus with
 
 ```
-npm start
+yarn start
 ```
 
 # Project layout

README.md

@@ -1,50 +1,104 @@
-![](https://github.com/Eugeny/terminus/raw/master/docs/readme.png)
+![](docs/readme.png)
 
 
 <p align="center">
-  <a href="https://raw.githubusercontent.com/Eugeny/terminus/master/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/eugeny/terminus.svg?label=License&style=flat-square"></a> <a href="https://ci.appveyor.com/project/Eugeny/terminus"><img alt="AppVeyor" src="https://img.shields.io/appveyor/ci/eugeny/terminus.svg?label=CI&logo=appveyor&logoColor=white&style=flat-square"></a>
-</p>
-
-<p align="center">
-  <a href="https://github.com/Eugeny/terminus/releases/latest"><img alt="GitHub All Releases" src="https://img.shields.io/github/downloads/eugeny/terminus/total.svg?label=DOWNLOAD&logo=github&style=for-the-badge"></a> <a href="https://ci.appveyor.com/project/Eugeny/terminus/build/artifacts"><img src="https://img.shields.io/badge/download-nightly%20build-magenta.svg?logo=appveyor&style=for-the-badge"/></a> <a href="https://gitter.im/terminus-terminal/community"><img alt="Gitter" src="https://img.shields.io/gitter/room/terminus/community.svg?color=blue&logo=gitter&style=for-the-badge"></a>
+  <a href="https://github.com/Eugeny/terminus/releases/latest"><img alt="GitHub All Releases" src="https://img.shields.io/github/downloads/eugeny/terminus/total.svg?label=RELEASE&logo=github&style=for-the-badge"></a> <a href="https://nightly.link/Eugeny/terminus/workflows/windows/master"><img src="https://shields.io/badge/-Nightly-blue?logo=windows&style=for-the-badge"/></a> <a href="https://nightly.link/Eugeny/terminus/workflows/macos/master"><img src="https://shields.io/badge/-Nightly-black?logo=apple&style=for-the-badge"/></a> <a href="https://nightly.link/Eugeny/terminus/workflows/linux/master"><img src="https://shields.io/badge/-Nightly-orange?logo=linux&style=for-the-badge"/></a> <a href="https://gitter.im/terminus-terminal/community"><img alt="Gitter" src="https://img.shields.io/gitter/room/terminus/community.svg?color=magenta&logo=gitter&style=for-the-badge"></a>
 </p>
 
 ----
 
-**Terminus** is a highly configurable terminal emulator for Windows, macOS and Linux
+**Terminus** is a highly configurable terminal emulator, SSH and serial client for Windows, macOS and Linux
 
-  * Theming and color schemes
-  * Fully configurable shortcuts
-  * Split panes
-  * Remembers your tabs
-  * PowerShell (and PS Core), WSL, Git-Bash, Cygwin, Cmder and CMD support
-  * Integrated SSH client and connection manager
-  * Full Unicode support including double-width characters
-  * Doesn't choke on fast-flowing outputs
-  * Proper shell experience on Windows including tab completion (via Clink)
+* Integrated SSH client and connection manager
+* Integrated serial terminal
+* Theming and color schemes
+* Fully configurable shortcuts and multi-chord shortcuts
+* Split panes
+* Remembers your tabs
+* PowerShell (and PS Core), WSL, Git-Bash, Cygwin, Cmder and CMD support
+* Direct file transfer from/to SSH sessions via Zmodem
+* Full Unicode support including double-width characters
+* Doesn't choke on fast-flowing outputs
+* Proper shell experience on Windows including tab completion (via Clink)
 
 
 [![Buy me a coffee](https://github.com/Eugeny/terminus/raw/master/docs/kofi.png)](https://ko-fi.com/eugeny)
 
 ---
 
+# Contents
+
+- [Contents](#contents)
+- [What Terminus is and isn't](#what-terminus-is-and-isnt)
+- [Terminal features](#terminal-features)
+- [SSH Client](#ssh-client)
+- [Serial Terminal](#serial-terminal)
+- [Portable](#portable)
+- [Plugins](#plugins)
+- [Themes](#themes)
+- [Contributing](#contributing)
+
+<a name="about"></a>
+# What Terminus is and isn't
+
 * **Terminus is** an alternative to Windows' standard terminal (conhost), PowerShell ISE, PuTTY or iTerm
 
 * **Terminus is not** a new shell or a MinGW or Cygwin replacement. Neither is it lightweight - if RAM usage is of importance, consider [Conemu](https://conemu.github.io) or [Alacritty](https://github.com/jwilm/alacritty)
 
----
+<a name="terminal"></a>
+# Terminal features
 
+![](docs/readme-terminal.png)
+
+* A V220 terminal + various extensions
+* Multiple nested split panes
+* Tabs on any side of the window
+* Optional dockable window with a global spawn hotkey ("Quake console")
+* Progress detection
+* Notification on process completion
+* Bracketed paste, multiline paste warnings
+* Font ligatures
+* Custom shell profiles
+* Optional RMB paste and copy-on select (PuTTY style)
+
+<a name="ssh"></a>
+# SSH Client
+
+![](docs/readme-ssh.png)
+
+* SSH2 client with a connection manager
+* X11 and port forwarding
+* Automatic jump host management
+* Agent forwarding (incl. Pageant and Windows native OpenSSH Agent)
+* Login scripts
+
+<a name="serial"></a>
+# Serial Terminal
+
+* Saved connections
+* Readline input support
+* Optional hex byte-by-byte input and hexdump output
+* Newline conversion
+* Automatic reconnection
+
+<a name="portable"></a>
+# Portable
+
+Terminus will run as a portable app on Windows, if you create a `data` folder in the same location where `Terminus.exe` lives.
+
+<a name="plugins"></a>
 # Plugins
 
 Plugins and themes can be installed directly from the Settings view inside Terminus.
 
   * [clickable-links](https://github.com/Eugeny/terminus-clickable-links) - makes paths and URLs in the terminal clickable
-  * [shell-selector](https://github.com/Eugeny/terminus-shell-selector) - a quick shell selector pane
   * [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/terminus-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>
 # Themes
 
   * [hype](https://github.com/Eugeny/terminus-theme-hype) - a Hyper inspired theme
@@ -53,8 +107,7 @@ Plugins and themes can be installed directly from the Settings view inside Termi
   * [windows10](https://www.npmjs.com/package/terminus-theme-windows10)
   * [altair](https://github.com/yxuko/terminus-altair)
 
----
-
+<a name="contributing"></a>
 # Contributing
 
 Pull requests and plugins are welcome!
@@ -62,45 +115,72 @@ Pull requests and plugins are welcome!
 See [HACKING.md](https://github.com/Eugeny/terminus/blob/master/HACKING.md) and [API docs](http://ajenti.org/terminus-docs/) for information of how the project is laid out, and a very brief plugin development tutorial.
 
 ---
+<a name="contributors"></a>
 
 Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
 <table>
   <tr>
-    <td align="center"><a href="http://www.russellmyers.com"><img src="https://avatars2.githubusercontent.com/u/184085?v=4" width="100px;" alt="Russell Myers"/><br /><sub><b>Russell Myers</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=mezner" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.morwire.com"><img src="https://avatars1.githubusercontent.com/u/3991658?v=4" width="100px;" alt="Austin Warren"/><br /><sub><b>Austin Warren</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=ehwarren" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Drachenkaetzchen"><img src="https://avatars1.githubusercontent.com/u/162974?v=4" width="100px;" alt="Felicia Hummel"/><br /><sub><b>Felicia Hummel</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=Drachenkaetzchen" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/mikemaccana"><img src="https://avatars2.githubusercontent.com/u/172594?v=4" width="100px;" alt="Mike MacCana"/><br /><sub><b>Mike MacCana</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=mikemaccana" title="Tests">⚠️</a> <a href="#design-mikemaccana" title="Design">🎨</a></td>
-    <td align="center"><a href="https://github.com/yxuko"><img src="https://avatars1.githubusercontent.com/u/1786317?v=4" width="100px;" alt="Yacine Kanzari"/><br /><sub><b>Yacine Kanzari</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=yxuko" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/BBJip"><img src="https://avatars2.githubusercontent.com/u/32908927?v=4" width="100px;" alt="BBJip"/><br /><sub><b>BBJip</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=BBJip" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Futagirl"><img src="https://avatars2.githubusercontent.com/u/33533958?v=4" width="100px;" alt="Futagirl"/><br /><sub><b>Futagirl</b></sub></a><br /><a href="#design-Futagirl" title="Design">🎨</a></td>
+    <td align="center"><a href="http://www.russellmyers.com"><img src="https://avatars2.githubusercontent.com/u/184085?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Russell Myers</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=mezner" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.morwire.com"><img src="https://avatars1.githubusercontent.com/u/3991658?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Austin Warren</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=ehwarren" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Drachenkaetzchen"><img src="https://avatars1.githubusercontent.com/u/162974?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Felicia Hummel</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=Drachenkaetzchen" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/mikemaccana"><img src="https://avatars2.githubusercontent.com/u/172594?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mike MacCana</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=mikemaccana" title="Tests">⚠️</a> <a href="#design-mikemaccana" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/yxuko"><img src="https://avatars1.githubusercontent.com/u/1786317?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Yacine Kanzari</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=yxuko" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/BBJip"><img src="https://avatars2.githubusercontent.com/u/32908927?v=4?s=100" width="100px;" alt=""/><br /><sub><b>BBJip</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=BBJip" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Futagirl"><img src="https://avatars2.githubusercontent.com/u/33533958?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Futagirl</b></sub></a><br /><a href="#design-Futagirl" title="Design">🎨</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://www.levrik.io"><img src="https://avatars3.githubusercontent.com/u/9491603?v=4" width="100px;" alt="Levin Rickert"/><br /><sub><b>Levin Rickert</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=levrik" title="Code">💻</a></td>
-    <td align="center"><a href="https://kwonoj.github.io"><img src="https://avatars2.githubusercontent.com/u/1210596?v=4" width="100px;" alt="OJ Kwon"/><br /><sub><b>OJ Kwon</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=kwonoj" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/Domain"><img src="https://avatars2.githubusercontent.com/u/903197?v=4" width="100px;" alt="domain"/><br /><sub><b>domain</b></sub></a><br /><a href="#plugin-Domain" title="Plugin/utility libraries">🔌</a> <a href="https://github.com/Eugeny/terminus/commits?author=Domain" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.jbrumond.me"><img src="https://avatars1.githubusercontent.com/u/195127?v=4" width="100px;" alt="James Brumond"/><br /><sub><b>James Brumond</b></sub></a><br /><a href="#plugin-kbjr" title="Plugin/utility libraries">🔌</a></td>
-    <td align="center"><a href="http://www.growingwiththeweb.com"><img src="https://avatars0.githubusercontent.com/u/2193314?v=4" width="100px;" alt="Daniel Imms"/><br /><sub><b>Daniel Imms</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=Tyriar" title="Code">💻</a> <a href="#plugin-Tyriar" title="Plugin/utility libraries">🔌</a> <a href="https://github.com/Eugeny/terminus/commits?author=Tyriar" title="Tests">⚠️</a></td>
-    <td align="center"><a href="https://github.com/baflo"><img src="https://avatars2.githubusercontent.com/u/834350?v=4" width="100px;" alt="Florian Bachmann"/><br /><sub><b>Florian Bachmann</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=baflo" title="Code">💻</a></td>
-    <td align="center"><a href="http://michael-kuehnel.de"><img src="https://avatars2.githubusercontent.com/u/441011?v=4" width="100px;" alt="Michael Kühnel"/><br /><sub><b>Michael Kühnel</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=mischah" title="Code">💻</a> <a href="#design-mischah" title="Design">🎨</a></td>
+    <td align="center"><a href="https://www.levrik.io"><img src="https://avatars3.githubusercontent.com/u/9491603?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Levin Rickert</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=levrik" title="Code">💻</a></td>
+    <td align="center"><a href="https://kwonoj.github.io"><img src="https://avatars2.githubusercontent.com/u/1210596?v=4?s=100" width="100px;" alt=""/><br /><sub><b>OJ Kwon</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=kwonoj" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Domain"><img src="https://avatars2.githubusercontent.com/u/903197?v=4?s=100" width="100px;" alt=""/><br /><sub><b>domain</b></sub></a><br /><a href="#plugin-Domain" title="Plugin/utility libraries">🔌</a> <a href="https://github.com/Eugeny/terminus/commits?author=Domain" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.jbrumond.me"><img src="https://avatars1.githubusercontent.com/u/195127?v=4?s=100" width="100px;" alt=""/><br /><sub><b>James Brumond</b></sub></a><br /><a href="#plugin-kbjr" title="Plugin/utility libraries">🔌</a></td>
+    <td align="center"><a href="http://www.growingwiththeweb.com"><img src="https://avatars0.githubusercontent.com/u/2193314?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Daniel Imms</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=Tyriar" title="Code">💻</a> <a href="#plugin-Tyriar" title="Plugin/utility libraries">🔌</a> <a href="https://github.com/Eugeny/terminus/commits?author=Tyriar" title="Tests">⚠️</a></td>
+    <td align="center"><a href="https://github.com/baflo"><img src="https://avatars2.githubusercontent.com/u/834350?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Florian Bachmann</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=baflo" title="Code">💻</a></td>
+    <td align="center"><a href="http://michael-kuehnel.de"><img src="https://avatars2.githubusercontent.com/u/441011?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michael Kühnel</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=mischah" title="Code">💻</a> <a href="#design-mischah" title="Design">🎨</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/NieLeben"><img src="https://avatars3.githubusercontent.com/u/47182955?v=4" width="100px;" alt="Tilmann Meyer"/><br /><sub><b>Tilmann Meyer</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=NieLeben" title="Code">💻</a></td>
-    <td align="center"><a href="http://www.jubeat.net"><img src="https://avatars3.githubusercontent.com/u/11289158?v=4" width="100px;" alt="PM Extra"/><br /><sub><b>PM Extra</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/issues?q=author%3APMExtra" title="Bug reports">🐛</a></td>
-    <td align="center"><a href="https://jjuhas.keybase.pub//"><img src="https://avatars1.githubusercontent.com/u/6438760?v=4" width="100px;" alt="Jonathan"/><br /><sub><b>Jonathan</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=IgnusG" title="Code">💻</a></td>
-    <td align="center"><a href="https://hans-koch.me"><img src="https://avatars0.githubusercontent.com/u/1093709?v=4" width="100px;" alt="Hans Koch"/><br /><sub><b>Hans Koch</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=hammster" title="Code">💻</a></td>
-    <td align="center"><a href="http://thepuzzlemaker.info"><img src="https://avatars3.githubusercontent.com/u/12666617?v=4" width="100px;" alt="Dak Smyth"/><br /><sub><b>Dak Smyth</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=ThePuzzlemaker" title="Code">💻</a></td>
-    <td align="center"><a href="http://yfwz100.github.io"><img src="https://avatars2.githubusercontent.com/u/983211?v=4" width="100px;" alt="Wang Zhi"/><br /><sub><b>Wang Zhi</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=yfwz100" title="Code">💻</a></td>
-    <td align="center"><a href="https://github.com/jack1142"><img src="https://avatars0.githubusercontent.com/u/6032823?v=4" width="100px;" alt="jack1142"/><br /><sub><b>jack1142</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=jack1142" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/NieLeben"><img src="https://avatars3.githubusercontent.com/u/47182955?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Tilmann Meyer</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=NieLeben" title="Code">💻</a></td>
+    <td align="center"><a href="http://www.jubeat.net"><img src="https://avatars3.githubusercontent.com/u/11289158?v=4?s=100" width="100px;" alt=""/><br /><sub><b>PM Extra</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/issues?q=author%3APMExtra" title="Bug reports">🐛</a></td>
+    <td align="center"><a href="https://jjuhas.keybase.pub//"><img src="https://avatars1.githubusercontent.com/u/6438760?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonathan</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=IgnusG" title="Code">💻</a></td>
+    <td align="center"><a href="https://hans-koch.me"><img src="https://avatars0.githubusercontent.com/u/1093709?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Hans Koch</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=hammster" title="Code">💻</a></td>
+    <td align="center"><a href="http://thepuzzlemaker.info"><img src="https://avatars3.githubusercontent.com/u/12666617?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dak Smyth</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=ThePuzzlemaker" title="Code">💻</a></td>
+    <td align="center"><a href="http://yfwz100.github.io"><img src="https://avatars2.githubusercontent.com/u/983211?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Wang Zhi</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=yfwz100" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/jack1142"><img src="https://avatars0.githubusercontent.com/u/6032823?v=4?s=100" width="100px;" alt=""/><br /><sub><b>jack1142</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=jack1142" title="Code">💻</a></td>
   </tr>
   <tr>
-    <td align="center"><a href="https://github.com/hdougie"><img src="https://avatars1.githubusercontent.com/u/450799?v=4" width="100px;" alt="Howie Douglas"/><br /><sub><b>Howie Douglas</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=hdougie" title="Code">💻</a></td>
-    <td align="center"><a href="https://chriskaczor.com"><img src="https://avatars2.githubusercontent.com/u/180906?v=4" width="100px;" alt="Chris Kaczor"/><br /><sub><b>Chris Kaczor</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=ckaczor" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/hdougie"><img src="https://avatars1.githubusercontent.com/u/450799?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Howie Douglas</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=hdougie" title="Code">💻</a></td>
+    <td align="center"><a href="https://chriskaczor.com"><img src="https://avatars2.githubusercontent.com/u/180906?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Chris Kaczor</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=ckaczor" title="Code">💻</a></td>
+    <td align="center"><a href="https://www.boxmein.net"><img src="https://avatars1.githubusercontent.com/u/358714?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Johannes Kadak</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=boxmein" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/LeSeulArtichaut"><img src="https://avatars1.githubusercontent.com/u/38361244?v=4?s=100" width="100px;" alt=""/><br /><sub><b>LeSeulArtichaut</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=LeSeulArtichaut" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/CyrilTaylor"><img src="https://avatars0.githubusercontent.com/u/12631466?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Cyril Taylor</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=CyrilTaylor" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/nstefanou"><img src="https://avatars3.githubusercontent.com/u/51129173?v=4?s=100" width="100px;" alt=""/><br /><sub><b>nstefanou</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=nstefanou" title="Code">💻</a> <a href="#plugin-nstefanou" title="Plugin/utility libraries">🔌</a></td>
+    <td align="center"><a href="https://github.com/orin220444"><img src="https://avatars3.githubusercontent.com/u/30747229?v=4?s=100" width="100px;" alt=""/><br /><sub><b>orin220444</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=orin220444" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/Goobles"><img src="https://avatars3.githubusercontent.com/u/8776771?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gobius Dolhain</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=Goobles" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/3l0w"><img src="https://avatars2.githubusercontent.com/u/37798980?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Gwilherm Folliot</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=3l0w" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/Dimitory"><img src="https://avatars0.githubusercontent.com/u/475955?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Dmitry Pronin</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=dimitory" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/JonathanBeverley"><img src="https://avatars1.githubusercontent.com/u/20328966?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Jonathan Beverley</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=JonathanBeverley" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/zend"><img src="https://avatars1.githubusercontent.com/u/25160?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Zenghai Liang</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=zend" title="Code">💻</a></td>
+    <td align="center"><a href="https://about.me/matishadow"><img src="https://avatars0.githubusercontent.com/u/9083085?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Mateusz Tracz</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=matishadow" title="Code">💻</a></td>
+    <td align="center"><a href="https://zergpool.com"><img src="https://avatars3.githubusercontent.com/u/36234677?v=4?s=100" width="100px;" alt=""/><br /><sub><b>pinpin</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=pinpins" title="Code">💻</a></td>
+  </tr>
+  <tr>
+    <td align="center"><a href="https://github.com/TakuroOnoda"><img src="https://avatars0.githubusercontent.com/u/1407926?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Takuro Onoda</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=TakuroOnoda" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/frauhottelmann"><img src="https://avatars2.githubusercontent.com/u/902705?v=4?s=100" width="100px;" alt=""/><br /><sub><b>frauhottelmann</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=frauhottelmann" title="Code">💻</a></td>
+    <td align="center"><a href="http://patalong.pl"><img src="https://avatars.githubusercontent.com/u/29167842?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Piotr Patalong</b></sub></a><br /><a href="#design-VectorKappa" title="Design">🎨</a></td>
+    <td align="center"><a href="https://github.com/clarkwang"><img src="https://avatars.githubusercontent.com/u/157076?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Clark Wang</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=clarkwang" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/iamchating"><img src="https://avatars.githubusercontent.com/u/7088153?v=4?s=100" width="100px;" alt=""/><br /><sub><b>iamchating</b></sub></a><br /><a href="https://github.com/Eugeny/terminus/commits?author=iamchating" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/starxg"><img src="https://avatars.githubusercontent.com/u/34997494?v=4?s=100" width="100px;" alt=""/><br /><sub><b>starxg</b></sub></a><br /><a href="#plugin-starxg" title="Plugin/utility libraries">🔌</a></td>
   </tr>
 </table>
 
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->
 
 This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!

app/assets/logo.svg

@@ -1,55 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:url(#SVGID_1_);}
-	.st1{opacity:0.16;fill:url(#SVGID_2_);}
-	.st2{fill:url(#SVGID_3_);}
-	.st3{opacity:0.16;fill:url(#SVGID_4_);}
-	.st4{fill:url(#SVGID_5_);}
-	.st5{opacity:0.15;fill:url(#SVGID_6_);}
-	.st6{fill:url(#SVGID_7_);}
-</style>
-<g>
-	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="260.9675" y1="871.1813" x2="919.1845" y2="491.1596">
-		<stop  offset="0" style="stop-color:#669ABD"/>
-		<stop  offset="1" style="stop-color:#77DBDB"/>
-	</linearGradient>
-	<polygon class="st0" points="297.54,934.52 882.6,596.72 882.61,427.82 297.54,765.65 	"/>
-	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="553.5051" y1="617.8278" x2="626.647" y2="744.5132">
-		<stop  offset="0.5588" style="stop-color:#000000;stop-opacity:0"/>
-		<stop  offset="1" style="stop-color:#000000"/>
-	</linearGradient>
-	<polygon class="st1" points="297.54,934.52 882.6,596.72 882.61,427.82 297.54,765.65 	"/>
-</g>
-<g>
-	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="114.6631" y1="744.5275" x2="334.0905" y2="871.2141">
-		<stop  offset="0" style="stop-color:#6A8FAD"/>
-		<stop  offset="1" style="stop-color:#669ABD"/>
-	</linearGradient>
-	<polygon class="st2" points="151.23,681.18 151.22,850.09 297.54,934.52 297.54,765.65 	"/>
-	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="260.9478" y1="744.5281" x2="187.8059" y2="871.2135">
-		<stop  offset="0.5588" style="stop-color:#000000;stop-opacity:0"/>
-		<stop  offset="1" style="stop-color:#000000"/>
-	</linearGradient>
-	<polygon class="st3" points="151.23,681.18 151.22,850.09 297.54,934.52 297.54,765.65 	"/>
-</g>
-<g>
-	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="114.663" y1="237.793" x2="553.5026" y2="491.1571">
-		<stop  offset="0" style="stop-color:#6A8FAD"/>
-		<stop  offset="1" style="stop-color:#669ABD"/>
-	</linearGradient>
-	<polygon class="st4" points="151.23,174.45 151.21,343.36 443.79,512.27 590.08,427.81 	"/>
-	<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="370.6562" y1="301.1281" x2="297.5094" y2="427.8221">
-		<stop  offset="0.5588" style="stop-color:#000000;stop-opacity:0"/>
-		<stop  offset="1" style="stop-color:#000000"/>
-	</linearGradient>
-	<polygon class="st5" points="151.23,174.45 151.21,343.36 443.79,512.27 590.08,427.81 	"/>
-</g>
-<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="78.0912" y1="554.4979" x2="736.3375" y2="174.4593">
-	<stop  offset="0" style="stop-color:#CCECFF"/>
-	<stop  offset="1" style="stop-color:#9FECED"/>
-</linearGradient>
-<polygon class="st6" points="297.51,765.64 151.23,681.18 590.08,427.81 151.23,174.45 297.5,90 882.61,427.82 "/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 1024 1024" xml:space="preserve" style="enable-background:new 0 0 1024 1024"><style type="text/css">.st0{fill:url(#SVGID_1_)}.st1{opacity:.16;fill:url(#SVGID_2_)}.st2{fill:url(#SVGID_3_)}.st3{opacity:.16;fill:url(#SVGID_4_)}.st4{fill:url(#SVGID_5_)}.st5{opacity:.15;fill:url(#SVGID_6_)}.st6{fill:url(#SVGID_7_)}</style><g><linearGradient id="SVGID_1_" x1="260.967" x2="919.184" y1="871.181" y2="491.16" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#669abd"/><stop offset="1" style="stop-color:#77dbdb"/></linearGradient><polygon points="297.54 934.52 882.6 596.72 882.61 427.82 297.54 765.65" class="st0"/><linearGradient id="SVGID_2_" x1="553.505" x2="626.647" y1="617.828" y2="744.513" gradientUnits="userSpaceOnUse"><stop offset=".559" style="stop-color:#000;stop-opacity:0"/><stop offset="1" style="stop-color:#000"/></linearGradient><polygon points="297.54 934.52 882.6 596.72 882.61 427.82 297.54 765.65" class="st1"/></g><g><linearGradient id="SVGID_3_" x1="114.663" x2="334.091" y1="744.528" y2="871.214" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#6a8fad"/><stop offset="1" style="stop-color:#669abd"/></linearGradient><polygon points="151.23 681.18 151.22 850.09 297.54 934.52 297.54 765.65" class="st2"/><linearGradient id="SVGID_4_" x1="260.948" x2="187.806" y1="744.528" y2="871.213" gradientUnits="userSpaceOnUse"><stop offset=".559" style="stop-color:#000;stop-opacity:0"/><stop offset="1" style="stop-color:#000"/></linearGradient><polygon points="151.23 681.18 151.22 850.09 297.54 934.52 297.54 765.65" class="st3"/></g><g><linearGradient id="SVGID_5_" x1="114.663" x2="553.503" y1="237.793" y2="491.157" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#6a8fad"/><stop offset="1" style="stop-color:#669abd"/></linearGradient><polygon points="151.23 174.45 151.21 343.36 443.79 512.27 590.08 427.81" class="st4"/><linearGradient id="SVGID_6_" x1="370.656" x2="297.509" y1="301.128" y2="427.822" gradientUnits="userSpaceOnUse"><stop offset=".559" style="stop-color:#000;stop-opacity:0"/><stop offset="1" style="stop-color:#000"/></linearGradient><polygon points="151.23 174.45 151.21 343.36 443.79 512.27 590.08 427.81" class="st5"/></g><linearGradient id="SVGID_7_" x1="78.091" x2="736.337" y1="554.498" y2="174.459" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#ccecff"/><stop offset="1" style="stop-color:#9feced"/></linearGradient><polygon points="297.51 765.64 151.23 681.18 590.08 427.81 151.23 174.45 297.5 90 882.61 427.82" class="st6"/></svg>

app/index.pug

@@ -8,17 +8,15 @@ html
             window.nodeRequire = require
         script(src='./preload.js')
         script(src='./bundle.js', defer)
-        style#custom-css
         style.
             body { transition: 0.5s background; }
     body
+        style#custom-css
         app-root
             .preload-logo
                 div
                     .terminus-logo
                     h1.terminus-title Terminus
-                        sup α 
+                        sup α
                     .progress
                         .bar(style='width: 0%')
-
-                    

app/lib/app.ts

@@ -1,38 +1,69 @@
-import { app, ipcMain, Menu, Tray, shell } from 'electron'
-import * as electron from 'electron'
+import { app, ipcMain, Menu, Tray, shell, screen, globalShortcut, MenuItemConstructorOptions } from 'electron'
+import * as promiseIpc from 'electron-promise-ipc'
+import * as remote from '@electron/remote/main'
+
 import { loadConfig } from './config'
 import { Window, WindowOptions } from './window'
+import { pluginManager } from './pluginManager'
+import { PTYManager } from './pty'
 
 export class Application {
-    private tray: Tray
+    private tray?: Tray
+    private ptyManager = new PTYManager()
     private windows: Window[] = []
 
     constructor () {
-        ipcMain.on('app:config-change', () => {
-            this.broadcast('host:config-change')
+        remote.initialize()
+        this.ptyManager.init(this)
+
+        ipcMain.on('app:config-change', (_event, config) => {
+            this.broadcast('host:config-change', config)
+        })
+
+        ipcMain.on('app:register-global-hotkey', (_event, specs) => {
+            globalShortcut.unregisterAll()
+            for (const spec of specs) {
+                globalShortcut.register(spec, () => {
+                    this.onGlobalHotkey()
+                })
+            }
+        })
+
+        ;(promiseIpc as any).on('plugin-manager:install', (path, name, version) => {
+            return pluginManager.install(path, name, version)
+        })
+
+        ;(promiseIpc as any).on('plugin-manager:uninstall', (path, name) => {
+            return pluginManager.uninstall(path, name)
         })
 
         const configData = loadConfig()
-        if (process.platform === 'linux' && ((configData.appearance || {}).opacity || 1) !== 1) {
-            app.commandLine.appendSwitch('enable-transparent-visuals')
-            app.disableHardwareAcceleration()
+        if (process.platform === 'linux') {
+            app.commandLine.appendSwitch('no-sandbox')
+            if (((configData.appearance || {}).opacity || 1) !== 1) {
+                app.commandLine.appendSwitch('enable-transparent-visuals')
+                app.disableHardwareAcceleration()
+            }
         }
 
         app.commandLine.appendSwitch('disable-http-cache')
+        app.commandLine.appendSwitch('max-active-webgl-contexts', '9000')
         app.commandLine.appendSwitch('lang', 'EN')
+        app.allowRendererProcessReuse = false
 
         for (const flag of configData.flags || [['force_discrete_gpu', '0']]) {
-            console.log('Setting Electron flag:', flag.join('='))
             app.commandLine.appendSwitch(flag[0], flag[1])
         }
     }
 
-    init () {
-        electron.screen.on('display-metrics-changed', () => this.broadcast('host:display-metrics-changed'))
+    init (): void {
+        screen.on('display-metrics-changed', () => this.broadcast('host:display-metrics-changed'))
+        screen.on('display-added', () => this.broadcast('host:displays-changed'))
+        screen.on('display-removed', () => this.broadcast('host:displays-changed'))
     }
 
     async newWindow (options?: WindowOptions): Promise<Window> {
-        let window = new Window(options)
+        const window = new Window(options)
         this.windows.push(window)
         window.visible$.subscribe(visible => {
             if (visible) {
@@ -41,6 +72,9 @@ export class Application {
                 this.enableTray()
             }
         })
+        window.closed$.subscribe(() => {
+            this.windows = this.windows.filter(x => x !== window)
+        })
         if (process.platform === 'darwin') {
             this.setupMenu()
         }
@@ -48,21 +82,39 @@ export class Application {
         return window
     }
 
-    broadcast (event, ...args) {
-        for (let window of this.windows) {
+    onGlobalHotkey (): void {
+        if (this.windows.some(x => x.isFocused() && x.isVisible())) {
+            for (const window of this.windows) {
+                window.hide()
+            }
+        } else {
+            for (const window of this.windows) {
+                window.present()
+            }
+        }
+    }
+
+    presentAllWindows (): void {
+        for (const window of this.windows) {
+            window.present()
+        }
+    }
+
+    broadcast (event: string, ...args: any[]): void {
+        for (const window of this.windows) {
             window.send(event, ...args)
         }
     }
 
-    async send (event, ...args) {
+    async send (event: string, ...args: any[]): Promise<void> {
         if (!this.hasWindows()) {
             await this.newWindow()
         }
         this.windows.filter(w => !w.isDestroyed())[0].send(event, ...args)
     }
 
-    enableTray () {
-        if (this.tray) {
+    enableTray (): void {
+        if (this.tray || process.platform === 'linux') {
             return
         }
         if (process.platform === 'darwin') {
@@ -72,7 +124,7 @@ export class Application {
             this.tray = new Tray(`${app.getAppPath()}/assets/tray.png`)
         }
 
-        this.tray.on('click', () => setTimeout(() => this.focus()));
+        this.tray.on('click', () => setTimeout(() => this.focus()))
 
         const contextMenu = Menu.buildFromTemplate([{
             label: 'Show',
@@ -86,25 +138,31 @@ export class Application {
         this.tray.setToolTip(`Terminus ${app.getVersion()}`)
     }
 
-    disableTray () {
-        if (this.tray) {
-            this.tray.destroy()
-            this.tray = null
+    disableTray (): void {
+        if (process.platform === 'linux') {
+            return
         }
+        this.tray?.destroy()
+        this.tray = null
     }
 
-    hasWindows () {
+    hasWindows (): boolean {
         return !!this.windows.length
     }
 
-    focus () {
-        for (let window of this.windows) {
+    focus (): void {
+        for (const window of this.windows) {
             window.show()
         }
     }
 
+    handleSecondInstance (argv: string[], cwd: string): void {
+        this.presentAllWindows()
+        this.windows[this.windows.length - 1].passCliArguments(argv, cwd, true)
+    }
+
     private setupMenu () {
-        let template: Electron.MenuItemConstructorOptions[] = [
+        const template: MenuItemConstructorOptions[] = [
             {
                 label: 'Application',
                 submenu: [
@@ -154,13 +212,8 @@ export class Application {
                 label: 'View',
                 submenu: [
                     { role: 'reload' },
-                    { role: 'forceReload' },
                     { role: 'toggleDevTools' },
                     { type: 'separator' },
-                    { role: 'resetZoom' },
-                    { role: 'zoomIn' },
-                    { role: 'zoomOut' },
-                    { type: 'separator' },
                     { role: 'togglefullscreen' },
                 ],
             },
@@ -183,7 +236,7 @@ export class Application {
                         },
                     },
                 ],
-            }
+            },
         ]
 
         Menu.setApplicationMenu(Menu.buildFromTemplate(template))

app/lib/bufferizedPTY.js

@@ -0,0 +1,57 @@
+/** @hidden */
+module.exports = function patchPTYModule (mod) {
+    const oldSpawn = mod.spawn
+    if (mod.patched) {
+        return
+    }
+    mod.patched = true
+    mod.spawn = (file, args, opt) => {
+        let terminal = oldSpawn(file, args, opt)
+        let timeout = null
+        let buffer = Buffer.from('')
+        let lastFlush = 0
+        let nextTimeout = 0
+
+        // Minimum prebuffering window (ms) if the input is non-stop flowing
+        const minWindow = 5
+
+        // Maximum buffering time (ms) until output must be flushed unconditionally
+        const maxWindow = 100
+
+        function flush () {
+            if (buffer.length) {
+                terminal.emit('data-buffered', buffer)
+            }
+            lastFlush = Date.now()
+            buffer = Buffer.from('')
+        }
+
+        function reschedule () {
+            if (timeout) {
+                clearTimeout(timeout)
+            }
+            nextTimeout = Date.now() + minWindow
+            timeout = setTimeout(() => {
+                timeout = null
+                flush()
+            }, minWindow)
+        }
+
+        terminal.on('data', data => {
+            if (typeof data === 'string') {
+                data = Buffer.from(data)
+            }
+            buffer = Buffer.concat([buffer, data])
+            if (Date.now() - lastFlush > maxWindow) {
+                // Taking too much time buffering, flush to keep things interactive
+                flush()
+            } else {
+                if (Date.now() > nextTimeout - maxWindow / 10) {
+                    // Extend the window if it's expiring
+                    reschedule()
+                }
+            }
+        })
+        return terminal
+    }
+}

app/lib/cli.ts

@@ -1,11 +1,11 @@
 import { app } from 'electron'
 
-export function parseArgs (argv, cwd) {
+export function parseArgs (argv: string[], cwd: string): any {
     if (argv[0].includes('node')) {
         argv = argv.slice(1)
     }
 
-    return require('yargs')
+    return require('yargs/yargs')(argv.slice(1))
         .usage('terminus [command] [arguments]')
         .command('open [directory]', 'open a shell in a directory', {
             directory: { type: 'string', 'default': cwd },
@@ -20,26 +20,26 @@ export function parseArgs (argv, cwd) {
             return yargs.option('escape', {
                 alias: 'e',
                 type: 'boolean',
-                describe: 'Perform shell escaping'
+                describe: 'Perform shell escaping',
             }).positional('text', {
-                type: 'string'
+                type: 'string',
             })
         })
         .version('version', '', app.getVersion())
         .option('debug', {
             alias: 'd',
             describe: 'Show DevTools on start',
-            type: 'boolean'
+            type: 'boolean',
         })
         .option('hidden', {
             describe: 'Start minimized',
-            type: 'boolean'
+            type: 'boolean',
         })
         .option('version', {
             alias: 'v',
             describe: 'Show version and exit',
-            type: 'boolean'
+            type: 'boolean',
         })
         .help('help')
-        .parse(argv.slice(1))
+        .parse()
 }

app/lib/config.ts

@@ -4,9 +4,9 @@ import * as yaml from 'js-yaml'
 import { app } from 'electron'
 
 export function loadConfig (): any {
-    let configPath = path.join(app.getPath('userData'), 'config.yaml')
+    const configPath = path.join(app.getPath('userData'), 'config.yaml')
     if (fs.existsSync(configPath)) {
-        return yaml.safeLoad(fs.readFileSync(configPath, 'utf8'))
+        return yaml.load(fs.readFileSync(configPath, 'utf8'))
     } else {
         return {}
     }

app/lib/index.ts

@@ -1,3 +1,6 @@
+import './portable'
+import 'source-map-support/register'
+import './sentry'
 import './lru'
 import { app, ipcMain, Menu } from 'electron'
 import { parseArgs } from './cli'
@@ -32,7 +35,7 @@ process.on('uncaughtException' as any, err => {
 })
 
 app.on('second-instance', (_event, argv, cwd) => {
-    application.send('host:second-instance', parseArgs(argv, cwd), cwd)
+    application.handleSecondInstance(argv, cwd)
 })
 
 const argv = parseArgs(process.argv, process.cwd())
@@ -46,21 +49,24 @@ if (argv.d) {
     electronDebug({
         isEnabled: true,
         showDevTools: true,
-        devToolsMode: 'undocked'
+        devToolsMode: 'undocked',
     })
 }
 
-app.on('ready', () => {
+app.on('ready', async () => {
     if (process.platform === 'darwin') {
         app.dock.setMenu(Menu.buildFromTemplate([
             {
                 label: 'New window',
                 click () {
                     this.app.newWindow()
-                }
-            }
+                },
+            },
         ]))
     }
     application.init()
-    application.newWindow({ hidden: argv.hidden })
+
+    const window = await application.newWindow({ hidden: argv.hidden })
+    await window.ready
+    window.passCliArguments(process.argv, process.cwd(), false)
 })

app/lib/lru.ts

@@ -1,13 +1,15 @@
-let lru = require('lru-cache')({ max: 256, maxAge: 250 })
-
-let fs = require('fs')
-let origLstat = fs.realpathSync.bind(fs)
+import * as LRU from 'lru-cache'
+import * as fs from 'fs'
+const lru = new LRU({ max: 256, maxAge: 250 })
+const origLstat = fs.realpathSync.bind(fs)
 
 // NB: The biggest offender of thrashing realpathSync is the node module system
 // itself, which we can't get into via any sane means.
 require('fs').realpathSync = function (p) {
     let r = lru.get(p)
-    if (r) return r
+    if (r) {
+        return r
+    }
 
     r = origLstat(p)
     lru.set(p, r)

app/lib/pluginManager.ts

@@ -0,0 +1,40 @@
+import { promisify } from 'util'
+
+
+export class PluginManager {
+    npm: any
+    npmReady?: Promise<void>
+
+    async ensureLoaded (): Promise<void> {
+        if (!this.npmReady) {
+            this.npmReady = new Promise(resolve => {
+                const npm = require('npm')
+                npm.load(err => {
+                    if (err) {
+                        console.error(err)
+                        return
+                    }
+                    npm.config.set('global', false)
+                    this.npm = npm
+                    resolve()
+                })
+            })
+        }
+        return this.npmReady
+    }
+
+    async install (path: string, name: string, version: string): Promise<void> {
+        await this.ensureLoaded()
+        this.npm.prefix = path
+        return promisify(this.npm.commands.install)([`${name}@${version}`])
+    }
+
+    async uninstall (path: string, name: string): Promise<void> {
+        await this.ensureLoaded()
+        this.npm.prefix = path
+        return promisify(this.npm.commands.remove)([name])
+    }
+}
+
+
+export const pluginManager = new PluginManager()

app/lib/portable.ts

@@ -0,0 +1,14 @@
+import * as path from 'path'
+import * as fs from 'fs'
+import * as electron from 'electron'
+
+const appPath = path.dirname(electron.app.getPath('exe'))
+
+if (fs.existsSync(path.join(appPath, 'terminus-data'))) {
+    fs.renameSync(path.join(appPath, 'terminus-data'), path.join(appPath, 'data'))
+}
+const portableData = path.join(appPath, 'data')
+if (fs.existsSync(portableData)) {
+    console.log('reset user data to ' + portableData)
+    electron.app.setPath('userData', portableData)
+}

app/lib/pty.ts

@@ -0,0 +1,154 @@
+import * as nodePTY from '@terminus-term/node-pty'
+import { v4 as uuidv4 } from 'uuid'
+import { ipcMain } from 'electron'
+import { Application } from './app'
+
+class PTYDataQueue {
+    private buffers: Buffer[] = []
+    private delta = 0
+    private maxChunk = 1024
+    private maxDelta = 1024 * 50
+    private flowPaused = false
+
+    constructor (private pty: nodePTY.IPty, private onData: (data: Buffer) => void) { }
+
+    push (data: Buffer) {
+        this.buffers.push(data)
+        this.maybeEmit()
+    }
+
+    ack (length: number) {
+        this.delta -= length
+        this.maybeEmit()
+    }
+
+    private maybeEmit () {
+        if (this.delta <= this.maxDelta && this.flowPaused) {
+            this.resume()
+            return
+        }
+        if (this.buffers.length > 0) {
+            if (this.delta > this.maxDelta && !this.flowPaused) {
+                this.pause()
+                return
+            }
+
+            const buffersToSend = []
+            let totalLength = 0
+            while (totalLength < this.maxChunk && this.buffers.length) {
+                totalLength += this.buffers[0].length
+                buffersToSend.push(this.buffers.shift())
+            }
+
+            if (buffersToSend.length === 0) {
+                return
+            }
+
+            let toSend = Buffer.concat(buffersToSend)
+            if (toSend.length > this.maxChunk) {
+                this.buffers.unshift(toSend.slice(this.maxChunk))
+                toSend = toSend.slice(0, this.maxChunk)
+            }
+            this.onData(toSend)
+            this.delta += toSend.length
+
+            if (this.buffers.length) {
+                setImmediate(() => this.maybeEmit())
+            }
+        }
+    }
+
+    private pause () {
+        this.pty.pause()
+        this.flowPaused = true
+    }
+
+    private resume () {
+        this.pty.resume()
+        this.flowPaused = false
+        this.maybeEmit()
+    }
+}
+
+export class PTY {
+    private pty: nodePTY.IPty
+    private outputQueue: PTYDataQueue
+
+    constructor (private id: string, private app: Application, ...args: any[]) {
+        this.pty = (nodePTY as any).spawn(...args)
+        for (const key of ['close', 'exit']) {
+            (this.pty as any).on(key, (...eventArgs) => this.emit(key, ...eventArgs))
+        }
+
+        this.outputQueue = new PTYDataQueue(this.pty, data => {
+            setImmediate(() => this.emit('data-buffered', data))
+        })
+
+        this.pty.on('data', data => this.outputQueue.push(Buffer.from(data)))
+    }
+
+    getPID (): number {
+        return this.pty.pid
+    }
+
+    resize (columns: number, rows: number): void {
+        if ((this.pty as any)._writable) {
+            this.pty.resize(columns, rows)
+        }
+    }
+
+    write (buffer: Buffer): void {
+        if ((this.pty as any)._writable) {
+            this.pty.write(buffer.toString())
+        }
+    }
+
+    ackData (length: number): void {
+        this.outputQueue.ack(length)
+    }
+
+    kill (signal?: string): void {
+        this.pty.kill(signal)
+    }
+
+    private emit (event: string, ...args: any[]) {
+        this.app.broadcast(`pty:${this.id}:${event}`, ...args)
+    }
+}
+
+export class PTYManager {
+    private ptys: Record<string, PTY|undefined> = {}
+
+    init (app: Application): void {
+        //require('./bufferizedPTY')(nodePTY) // eslint-disable-line @typescript-eslint/no-var-requires
+        ipcMain.on('pty:spawn', (event, ...options) => {
+            const id = uuidv4().toString()
+            event.returnValue = id
+            this.ptys[id] = new PTY(id, app, ...options)
+        })
+
+        ipcMain.on('pty:exists', (event, id) => {
+            event.returnValue = !!this.ptys[id]
+        })
+
+        ipcMain.on('pty:get-pid', (event, id) => {
+            event.returnValue = this.ptys[id]?.getPID()
+        })
+
+        ipcMain.on('pty:resize', (_event, id, columns, rows) => {
+            this.ptys[id]?.resize(columns, rows)
+        })
+
+        ipcMain.on('pty:write', (_event, id, data) => {
+            this.ptys[id]?.write(Buffer.from(data))
+        })
+
+        ipcMain.on('pty:kill', (_event, id, signal) => {
+            this.ptys[id]?.kill(signal)
+        })
+
+        ipcMain.on('pty:ack-data', (_event, id, length) => {
+            this.ptys[id]?.ackData(length)
+        })
+    }
+}

app/lib/sentry.ts

@@ -0,0 +1,19 @@
+const { init } = String(process.type) === 'main' ? require('@sentry/electron/dist/main') : require('@sentry/electron/dist/renderer')
+
+const SENTRY_DSN = 'https://4717a0a7ee0b4429bd3a0f06c3d7eec3@sentry.io/181876'
+let release = null
+try {
+    release = require('electron').app.getVersion()
+} catch {
+    release = require('@electron/remote').app.getVersion()
+}
+
+if (!process.env.TERMINUS_DEV) {
+    init({
+        dsn: SENTRY_DSN,
+        release,
+        integrations (integrations) {
+            return integrations.filter(integration => integration.name !== 'Breadcrumbs')
+        },
+    })
+}

app/lib/window.ts

@@ -1,17 +1,19 @@
+import * as glasstron from 'glasstron'
+
 import { Subject, Observable } from 'rxjs'
 import { debounceTime } from 'rxjs/operators'
-import { BrowserWindow, app, ipcMain, Rectangle, screen } from 'electron'
+import { BrowserWindow, app, ipcMain, Rectangle, Menu, screen, BrowserWindowConstructorOptions } from 'electron'
 import ElectronConfig = require('electron-config')
 import * as os from 'os'
+import * as path from 'path'
+import macOSRelease from 'macos-release'
+import * as compareVersions from 'compare-versions'
 
+import { parseArgs } from './cli'
 import { loadConfig } from './config'
 
-let SetWindowCompositionAttribute: any
-let AccentState: any
-let DwmEnableBlurBehindWindow: any
+let DwmEnableBlurBehindWindow: any = null
 if (process.platform === 'win32') {
-    SetWindowCompositionAttribute = require('windows-swca').SetWindowCompositionAttribute
-    AccentState = require('windows-swca').ACCENT_STATE
     DwmEnableBlurBehindWindow = require('windows-blurbehind').DwmEnableBlurBehindWindow
 }
 
@@ -19,26 +21,38 @@ export interface WindowOptions {
     hidden?: boolean
 }
 
+abstract class GlasstronWindow extends BrowserWindow {
+    blurType: string
+    abstract setBlur (_: boolean)
+}
+
+const macOSVibrancyType = process.platform === 'darwin' ? compareVersions.compare(macOSRelease().version, '10.14', '>=') ? 'fullscreen-ui' : 'dark' : null
+
 export class Window {
     ready: Promise<void>
     private visible = new Subject<boolean>()
-    private window: BrowserWindow
+    private closed = new Subject<void>()
+    private window?: GlasstronWindow
     private windowConfig: ElectronConfig
-    private windowBounds: Rectangle
+    private windowBounds?: Rectangle
     private closing = false
+    private lastVibrancy: { enabled: boolean, type?: string } | null = null
+    private disableVibrancyWhileDragging = false
+    private configStore: any
 
     get visible$ (): Observable<boolean> { return this.visible }
+    get closed$ (): Observable<void> { return this.closed }
 
     constructor (options?: WindowOptions) {
-        let configData = loadConfig()
+        this.configStore = loadConfig()
 
-        options = options || {}
+        options = options ?? {}
 
         this.windowConfig = new ElectronConfig({ name: 'window' })
         this.windowBounds = this.windowConfig.get('windowBoundaries')
 
-        let maximized = this.windowConfig.get('maximized')
-        let bwOptions: Electron.BrowserWindowConstructorOptions = {
+        const maximized = this.windowConfig.get('maximized')
+        const bwOptions: BrowserWindowConstructorOptions = {
             width: 800,
             height: 600,
             title: 'Terminus',
@@ -46,42 +60,48 @@ export class Window {
             minHeight: 300,
             webPreferences: {
                 nodeIntegration: true,
+                preload: path.join(__dirname, 'sentry.js'),
+                backgroundThrottling: false,
+                enableRemoteModule: true,
+                contextIsolation: false,
             },
+            maximizable: true,
             frame: false,
             show: false,
-            backgroundColor: '#00000000'
+            backgroundColor: '#00000000',
         }
 
         if (this.windowBounds) {
             Object.assign(bwOptions, this.windowBounds)
-            const closestDisplay = screen.getDisplayNearestPoint( {x: this.windowBounds.x, y: this.windowBounds.y} )
+            const closestDisplay = screen.getDisplayNearestPoint( { x: this.windowBounds.x, y: this.windowBounds.y } )
 
-            const [left1, top1, right1, bottom1] = [this.windowBounds.x, this.windowBounds.y, this.windowBounds.x + this.windowBounds.width, this.windowBounds.y + this.windowBounds.height];
-            const [left2, top2, right2, bottom2] = [closestDisplay.bounds.x, closestDisplay.bounds.y, closestDisplay.bounds.x + closestDisplay.bounds.width, closestDisplay.bounds.y + closestDisplay.bounds.height];
+            const [left1, top1, right1, bottom1] = [this.windowBounds.x, this.windowBounds.y, this.windowBounds.x + this.windowBounds.width, this.windowBounds.y + this.windowBounds.height]
+            const [left2, top2, right2, bottom2] = [closestDisplay.bounds.x, closestDisplay.bounds.y, closestDisplay.bounds.x + closestDisplay.bounds.width, closestDisplay.bounds.y + closestDisplay.bounds.height]
 
             if ((left2 > right1 || right2 < left1 || top2 > bottom1 || bottom2 < top1) && !maximized) {
-                bwOptions.x = closestDisplay.bounds.width / 2 - bwOptions.width / 2;
-                bwOptions.y = closestDisplay.bounds.height / 2 - bwOptions.height / 2;
+                bwOptions.x = closestDisplay.bounds.width / 2 - bwOptions.width / 2
+                bwOptions.y = closestDisplay.bounds.height / 2 - bwOptions.height / 2
             }
         }
 
-        if ((configData.appearance || {}).frame === 'native') {
+        if ((this.configStore.appearance || {}).frame === 'native') {
             bwOptions.frame = true
         } else {
             if (process.platform === 'darwin') {
-                bwOptions.titleBarStyle = 'hiddenInset'
+                bwOptions.titleBarStyle = 'hidden'
             }
         }
 
-        if (process.platform === 'linux') {
-            bwOptions.backgroundColor = '#131d27'
+        if (process.platform === 'darwin') {
+            this.window = new BrowserWindow(bwOptions) as GlasstronWindow
+        } else {
+            this.window = new glasstron.BrowserWindow(bwOptions)
         }
 
-        this.window = new BrowserWindow(bwOptions)
         this.window.once('ready-to-show', () => {
             if (process.platform === 'darwin') {
-                this.window.setVibrancy('dark')
-            } else if (process.platform === 'win32' && (configData.appearance || {}).vibrancy) {
+                this.window.setVibrancy(macOSVibrancyType)
+            } else if (process.platform === 'win32' && (this.configStore.appearance || {}).vibrancy) {
                 this.setVibrancy(true)
             }
 
@@ -92,11 +112,21 @@ export class Window {
                     this.window.show()
                 }
                 this.window.focus()
+                this.window.moveTop()
+            }
+        })
+
+        this.window.on('blur', () => {
+            if (this.configStore.appearance.dock !== 'off' && this.configStore.appearance?.dockHideOnBlur) {
+                this.hide()
             }
         })
 
         this.window.loadURL(`file://${app.getAppPath()}/dist/index.html?${this.window.id}`, { extraHeaders: 'pragma: no-cache\n' })
 
+        this.window.webContents.setVisualZoomLevelLimits(1, 1)
+        this.window.webContents.setZoomFactor(1)
+
         if (process.platform !== 'darwin') {
             this.window.setMenu(null)
         }
@@ -114,70 +144,126 @@ export class Window {
         })
     }
 
-    setVibrancy (enabled: boolean, type?: string) {
+    setVibrancy (enabled: boolean, type?: string, userRequested?: boolean): void {
+        if (userRequested ?? true) {
+            this.lastVibrancy = { enabled, type }
+        }
         if (process.platform === 'win32') {
             if (parseFloat(os.release()) >= 10) {
-                let attribValue = AccentState.ACCENT_DISABLED
-                if (enabled) {
-                    if (parseInt(os.release().split('.')[2]) >= 17063 && type === 'fluent') {
-                        attribValue = AccentState.ACCENT_ENABLE_ACRYLICBLURBEHIND
-                    } else {
-                        attribValue = AccentState.ACCENT_ENABLE_BLURBEHIND
-                    }
+                this.window.blurType = enabled ? type === 'fluent' ? 'acrylic' : 'blurbehind' : null
+                try {
+                    this.window.setBlur(enabled)
+                } catch (error) {
+                    console.error('Failed to set window blur', error)
                 }
-                SetWindowCompositionAttribute(this.window.getNativeWindowHandle(), attribValue, 0x00000000)
             } else {
                 DwmEnableBlurBehindWindow(this.window, enabled)
             }
+        } else if (process.platform === 'linux') {
+            this.window.setBackgroundColor(enabled ? '#00000000' : '#131d27')
+            this.window.setBlur(enabled)
+        } else {
+            this.window.setVibrancy(enabled ? macOSVibrancyType : null)
         }
     }
 
-    show () {
+    show (): void {
         this.window.show()
+        this.window.moveTop()
     }
 
-    focus () {
+    focus (): void {
         this.window.focus()
     }
 
-    send (event, ...args) {
+    send (event: string, ...args: any[]): void {
         if (!this.window) {
             return
         }
         this.window.webContents.send(event, ...args)
+        if (event === 'host:config-change') {
+            this.configStore = args[0]
+        }
     }
 
-    isDestroyed() {
-        return !this.window || this.window.isDestroyed();
+    isDestroyed (): boolean {
+        return !this.window || this.window.isDestroyed()
+    }
+
+    isFocused (): boolean {
+        return this.window.isFocused()
+    }
+
+    isVisible (): boolean {
+        return this.window.isVisible()
+    }
+
+    hide (): void {
+        if (process.platform === 'darwin') {
+            // Lose focus
+            Menu.sendActionToFirstResponder('hide:')
+        }
+        this.window.blur()
+        if (process.platform !== 'darwin') {
+            this.window.hide()
+        }
+    }
+
+    present (): void {
+        if (!this.window.isVisible()) {
+            // unfocused, invisible
+            this.window.show()
+            this.window.focus()
+        } else {
+            if (!this.configStore.appearance?.dock || this.configStore.appearance?.dock === 'off') {
+                // not docked, visible
+                setTimeout(() => {
+                    this.window.show()
+                    this.window.focus()
+                })
+            } else {
+                if (this.configStore.appearance?.dockAlwaysOnTop) {
+                    // docked, visible, on top
+                    this.window.hide()
+                } else {
+                    // docked, visible, not on top
+                    this.window.focus()
+                }
+            }
+        }
+    }
+
+    passCliArguments (argv: string[], cwd: string, secondInstance: boolean): void {
+        this.send('cli', parseArgs(argv, cwd), cwd, secondInstance)
     }
 
     private setupWindowManagement () {
         this.window.on('show', () => {
             this.visible.next(true)
-            this.window.webContents.send('host:window-shown')
+            this.send('host:window-shown')
         })
 
         this.window.on('hide', () => {
             this.visible.next(false)
         })
 
-        let moveSubscription = new Observable<void>(observer => {
+        const moveSubscription = new Observable<void>(observer => {
             this.window.on('move', () => observer.next())
         }).pipe(debounceTime(250)).subscribe(() => {
-            this.window.webContents.send('host:window-moved')
+            this.send('host:window-moved')
         })
 
         this.window.on('closed', () => {
             moveSubscription.unsubscribe()
         })
 
-        this.window.on('enter-full-screen', () => this.window.webContents.send('host:window-enter-full-screen'))
-        this.window.on('leave-full-screen', () => this.window.webContents.send('host:window-leave-full-screen'))
+        this.window.on('enter-full-screen', () => this.send('host:window-enter-full-screen'))
+        this.window.on('leave-full-screen', () => this.send('host:window-leave-full-screen'))
 
         this.window.on('close', event => {
             if (!this.closing) {
                 event.preventDefault()
-                this.window.webContents.send('host:window-close-request')
+                this.send('host:window-close-request')
                 return
             }
             this.windowConfig.set('windowBoundaries', this.windowBounds)
@@ -200,6 +286,10 @@ export class Window {
             }
         })
 
+        this.window.on('focus', () => {
+            this.send('host:window-focused')
+        })
+
         ipcMain.on('window-focus', event => {
             if (!this.window || event.sender !== this.window.webContents) {
                 return
@@ -287,10 +377,32 @@ export class Window {
         })
 
         this.window.webContents.on('new-window', event => event.preventDefault())
+
+        ipcMain.on('window-set-disable-vibrancy-while-dragging', (_event, value) => {
+            this.disableVibrancyWhileDragging = value
+        })
+
+        let moveEndedTimeout: number|null = null
+        const onBoundsChange = () => {
+            if (!this.lastVibrancy?.enabled || !this.disableVibrancyWhileDragging) {
+                return
+            }
+            this.setVibrancy(false, undefined, false)
+            if (moveEndedTimeout) {
+                clearTimeout(moveEndedTimeout)
+            }
+            moveEndedTimeout = setTimeout(() => {
+                this.setVibrancy(this.lastVibrancy.enabled, this.lastVibrancy.type)
+            }, 50)
+        }
+        this.window.on('move', onBoundsChange)
+        this.window.on('resize', onBoundsChange)
     }
 
     private destroy () {
         this.window = null
+        this.closed.next()
         this.visible.complete()
+        this.closed.complete()
     }
 }

app/package.json

@@ -1,6 +1,7 @@
 {
   "name": "terminus",
   "description": "A terminal for a modern age",
+  "private": true,
   "repository": "https://github.com/eugeny/terminus",
   "author": {
     "name": "Eugene Pankov",
@@ -13,42 +14,56 @@
     "watch": "webpack --progress --color --watch"
   },
   "dependencies": {
-    "@angular/animations": "7.2.8",
-    "@angular/common": "7.2.8",
-    "@angular/compiler": "7.2.8",
-    "@angular/core": "7.2.8",
-    "@angular/forms": "7.2.8",
-    "@angular/platform-browser": "7.2.8",
-    "@angular/platform-browser-dynamic": "7.2.8",
-    "@ng-bootstrap/ng-bootstrap": "^4.2.2",
-    "devtron": "1.4.0",
+    "@angular/animations": "^11.1.1",
+    "@angular/common": "^11.1.1",
+    "@angular/compiler": "^11.1.1",
+    "@angular/core": "^11.1.1",
+    "@angular/forms": "^11.1.1",
+    "@angular/platform-browser": "^11.1.1",
+    "@angular/platform-browser-dynamic": "^11.1.1",
+    "@electron/remote": "1.0.4",
+    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
+    "@terminus-term/node-pty": "0.10.0-terminus.3",
+    "any-promise": "^1.3.0",
     "electron-config": "2.0.0",
-    "electron-debug": "^3.0.1",
-    "electron-is-dev": "1.1.0",
-    "electron-updater": "^4.0.6",
-    "fontmanager-redux": "0.4.0",
-    "js-yaml": "3.13.1",
-    "keytar": "4.13.0",
+    "electron-debug": "^3.2.0",
+    "electron-promise-ipc": "^2.2.4",
+    "fontmanager-redux": "1.0.0",
+    "glasstron": "0.0.7",
+    "js-yaml": "4.1.0",
+    "keytar": "^7.6.0",
     "mz": "^2.7.0",
-    "ngx-toastr": "^10.2.0",
-    "node-pty": "^0.9.0-beta25",
-    "npm": "6.9.0",
+    "native-process-working-directory": "^1.0.2",
+    "ngx-toastr": "^13.2.1",
+    "npm": "6",
     "path": "0.12.7",
-    "rxjs": "^6.5.3",
-    "rxjs-compat": "^6.5.3",
-    "yargs": "^14.2.0",
-    "zone.js": "^0.8.29"
+    "rxjs": "^6.6.7",
+    "yargs": "^16.2.0",
+    "zone.js": "^0.11.4"
   },
   "optionalDependencies": {
-    "macos-native-processlist": "^1.0.1",
+    "macos-native-processlist": "^2.0.0",
+    "serialport": "^9.0.7",
     "windows-blurbehind": "^1.0.1",
-    "windows-native-registry": "^1.0.14",
-    "windows-process-tree": "^0.2.4",
-    "windows-swca": "^2.0.2"
+    "windows-native-registry": "^3.0.0",
+    "windows-process-tree": "^0.3.0"
   },
   "devDependencies": {
-    "@types/mz": "0.0.32",
-    "@types/node": "^12.7.12",
-    "node-abi": "^2.11.0"
+    "@types/mz": "2.7.3",
+    "@types/node": "14.14.35",
+    "node-abi": "^2.26.0",
+    "source-map-support": "^0.5.19"
+  },
+  "peerDependencies": {
+    "terminus-community-color-schemes": "*",
+    "terminus-core": "*",
+    "terminus-plugin-manager": "*",
+    "terminus-serial": "*",
+    "terminus-settings": "*",
+    "terminus-ssh": "*",
+    "terminus-terminal": "*"
+  },
+  "resolutions": {
+    "*/node-abi": "^2.20.0"
   }
 }

app/src/app.module.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { NgbModule } from '@ng-bootstrap/ng-bootstrap'
@@ -7,12 +8,12 @@ export function getRootModule (plugins: any[]) {
     const imports = [
         BrowserModule,
         ...plugins,
-        NgbModule.forRoot(),
+        NgbModule,
         ToastrModule.forRoot({
             positionClass: 'toast-bottom-center',
             toastClass: 'toast',
             preventDuplicates: true,
-            extendedTimeOut: 5000,
+            extendedTimeOut: 1000,
         }),
     ]
     const bootstrap = [

app/src/entry.preload.ts

@@ -3,36 +3,7 @@ import 'source-sans-pro/source-sans-pro.css'
 import 'source-code-pro/source-code-pro.css'
 import '@fortawesome/fontawesome-free/css/solid.css'
 import '@fortawesome/fontawesome-free/css/brands.css'
+import '@fortawesome/fontawesome-free/css/regular.css'
 import '@fortawesome/fontawesome-free/css/fontawesome.css'
 import 'ngx-toastr/toastr.css'
 import './preload.scss'
-
-import * as Raven from 'raven-js'
-
-const SENTRY_DSN = 'https://4717a0a7ee0b4429bd3a0f06c3d7eec3@sentry.io/181876'
-
-Raven.config(
-    SENTRY_DSN,
-    {
-        release: require('electron').remote.app.getVersion(),
-        dataCallback: (data: any) => {
-            const normalize = (filename: string) => {
-                const splitArray = filename.split('/')
-                return splitArray[splitArray.length - 1]
-            }
-
-            data.exception.values[0].stacktrace.frames.forEach((frame: any) => {
-                frame.filename = normalize(frame.filename)
-            })
-
-            data.culprit = data.exception.values[0].stacktrace.frames[0].filename
-
-            return data
-        },
-    },
-)
-
-process.on('uncaughtException' as any, (err) => {
-    Raven.captureException(err as any)
-    console.error(err)
-})

app/src/entry.ts

@@ -2,12 +2,11 @@ import 'zone.js'
 import 'core-js/proposals/reflect-metadata'
 import 'rxjs'
 
-import * as isDev from 'electron-is-dev'
-
 import './global.scss'
 import './toastr.scss'
 
-import { enableProdMode, NgModuleRef } from '@angular/core'
+import { enableProdMode, NgModuleRef, ApplicationRef } from '@angular/core'
+import { enableDebugTools } from '@angular/platform-browser'
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'
 
 import { getRootModule } from './app.module'
@@ -22,7 +21,7 @@ if (process.platform === 'win32' && !('HOME' in process.env)) {
     process.env.HOME = `${process.env.HOMEDRIVE}${process.env.HOMEPATH}`
 }
 
-if (isDev) {
+if (process.env.TERMINUS_DEV && !process.env.TERMINUS_FORCE_ANGULAR_PROD) {
     console.warn('Running in debug mode')
 } else {
     enableProdMode()
@@ -37,7 +36,14 @@ async function bootstrap (plugins: PluginInfo[], safeMode = false): Promise<NgMo
     })
     const module = getRootModule(pluginsModules)
     window['rootModule'] = module
-    return platformBrowserDynamic().bootstrapModule(module)
+    return platformBrowserDynamic().bootstrapModule(module).then(moduleRef => {
+        if (process.env.TERMINUS_DEV) {
+            const applicationRef = moduleRef.injector.get(ApplicationRef)
+            const componentRef = applicationRef.components[0]
+            enableDebugTools(componentRef)
+        }
+        return moduleRef
+    })
 }
 
 findPlugins().then(async plugins => {
@@ -50,8 +56,8 @@ findPlugins().then(async plugins => {
         window['safeModeReason'] = error
         try {
             await bootstrap(plugins, true)
-        } catch (error) {
-            console.error('Bootstrap failed:', error)
+        } catch (error2) {
+            console.error('Bootstrap failed:', error2)
         }
     }
 })

app/src/global.scss

@@ -17,6 +17,10 @@ body {
 }
 
 .btn {
+    display: inline-flex;
+    align-items: center;
+    flex-wrap: nowrap;
+
     & > svg {
         pointer-events: none;
     }
@@ -95,3 +99,42 @@ input[type=range] {
     &::-moz-range-track { @include track(); }
     &::-ms-track { @include track(); }
 }
+
+a[ngbdropdownitem] {
+    cursor: pointer;
+}
+
+ngb-typeahead-window {
+    max-height: 60vh;
+    overflow: auto;
+}
+
+
+.hover-reveal {
+    opacity: 0;
+
+    .hover-reveal-parent:hover &,
+    *:hover > &,
+    &:hover {
+      opacity: 1;
+    }
+}
+
+
+@keyframes terminalShakeFrames {
+    0% {
+        transform: translateX(0);
+    }
+    25% {
+        transform: translateX(5px);
+    }
+    50% {
+        transform: translateX(-5px);
+    }
+    75% {
+        transform: translateX(5px);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}

app/src/plugins.ts

@@ -1,28 +1,28 @@
 import * as fs from 'mz/fs'
 import * as path from 'path'
+import * as remote from '@electron/remote'
 const nodeModule = require('module') // eslint-disable-line @typescript-eslint/no-var-requires
 const nodeRequire = (global as any).require
 
-function normalizePath (path: string): string {
+function normalizePath (p: string): string {
     const cygwinPrefix = '/cygdrive/'
-    if (path.startsWith(cygwinPrefix)) {
-        path = path.substring(cygwinPrefix.length).replace('/', '\\')
-        path = path[0] + ':' + path.substring(1)
+    if (p.startsWith(cygwinPrefix)) {
+        p = p.substring(cygwinPrefix.length).replace('/', '\\')
+        p = p[0] + ':' + p.substring(1)
     }
-    return path
+    return p
 }
 
 global['module'].paths.map((x: string) => nodeModule.globalPaths.push(normalizePath(x)))
 
 if (process.env.TERMINUS_DEV) {
-    nodeModule.globalPaths.unshift(path.dirname(require('electron').remote.app.getAppPath()))
+    nodeModule.globalPaths.unshift(path.dirname(remote.app.getAppPath()))
 }
 
-const builtinPluginsPath = process.env.TERMINUS_DEV ? path.dirname(require('electron').remote.app.getAppPath()) : path.join((process as any).resourcesPath, 'builtin-plugins')
+const builtinPluginsPath = process.env.TERMINUS_DEV ? path.dirname(remote.app.getAppPath()) : path.join((process as any).resourcesPath, 'builtin-plugins')
 
 const userPluginsPath = path.join(
-    require('electron').remote.app.getPath('appData'),
-    'terminus',
+    remote.app.getPath('userData'),
     'plugins',
 )
 
@@ -64,7 +64,6 @@ const builtinModules = [
     'ngx-toastr',
     'rxjs',
     'rxjs/operators',
-    'rxjs-compat/Subject',
     'terminus-core',
     'terminus-settings',
     'terminus-terminal',
@@ -84,7 +83,7 @@ const originalRequire = (global as any).require
     if (cachedBuiltinModules[query]) {
         return cachedBuiltinModules[query]
     }
-    return originalRequire.apply(this, arguments)
+    return originalRequire.apply(this, [query])
 }
 
 const originalModuleRequire = nodeModule.prototype.require
@@ -174,8 +173,8 @@ export async function loadPlugins (foundPlugins: PluginInfo[], progress: Progres
             console.time(label)
             const packageModule = nodeRequire(foundPlugin.path)
             const pluginModule = packageModule.default.forRoot ? packageModule.default.forRoot() : packageModule.default
-            pluginModule['pluginName'] = foundPlugin.name
-            pluginModule['bootstrap'] = packageModule.bootstrap
+            pluginModule.pluginName = foundPlugin.name
+            pluginModule.bootstrap = packageModule.bootstrap
             plugins.push(pluginModule)
             console.timeEnd(label)
             await new Promise(x => setTimeout(x, 50))

app/src/preload.scss

@@ -7,6 +7,7 @@
   height: 100vh;
   display: flex;
   animation: 0.5s ease-out fadeIn;
+  background: radial-gradient(#3a66820a 0%,  #000e17 30%, black 100%);
 
   &>div {
     width: 200px;
@@ -23,6 +24,7 @@
         transition: 1s ease-out width;
         background: #a1c5e4;
         height: 3px;
+        box-shadow: 0 0 2px #ffffff1f;
       }
     }
   }
@@ -37,8 +39,8 @@
 
 
 .terminus-logo {
-  width: 160px;
-  height: 160px;
+  width: 120px;
+  height: 120px;
   background: url('../assets/logo.svg');
   background-repeat: none;
   background-size: contain;
@@ -51,7 +53,7 @@
   font-family: 'Source Sans Pro';
   text-align: center;
   font-weight: normal;
-  font-size: 42px;
+  font-size: 32px;
   margin: 0;
 
   sup {

app/src/toastr.scss

@@ -2,13 +2,20 @@
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 20px;
+  padding: 20px 0 50px;
 
   .toast {
     box-shadow: 0 1px 0 rgba(0,0,0,.25);
-    padding: 10px;
+    padding: 7px 12px;
     background-image: none;
     width: auto;
+    flex-basis: auto;
+    border-radius: 0.5rem;
+    font-size: 0.75rem;
+
+    &.toast-error {
+      background-color: #BD362F;
+    }
 
     &.toast-info {
       background-color: #555;

app/tsconfig.main.json

@@ -12,7 +12,6 @@
         "noUnusedParameters": true,
         "noImplicitReturns": true,
         "noFallthroughCasesInSwitch": true,
-        "noUnusedParameters": true,
         "noUnusedLocals": true,
         "lib": [
            "dom",

app/webpack.config.js

@@ -6,6 +6,7 @@ module.exports = {
   target: 'node',
   entry: {
     'index.ignore': 'file-loader?name=index.html!pug-html-loader!' + path.resolve(__dirname, './index.pug'),
+    sentry: path.resolve(__dirname, 'lib/sentry.ts'),
     preload: path.resolve(__dirname, 'src/entry.preload.ts'),
     bundle: path.resolve(__dirname, 'src/entry.ts'),
   },
@@ -67,7 +68,6 @@ module.exports = {
     '@ng-bootstrap/ng-bootstrap': 'commonjs @ng-bootstrap/ng-bootstrap',
     child_process: 'commonjs child_process',
     electron: 'commonjs electron',
-    'electron-is-dev': 'commonjs electron-is-dev',
     fs: 'commonjs fs',
     'ngx-toastr': 'commonjs ngx-toastr',
     module: 'commonjs module',
@@ -78,5 +78,8 @@ module.exports = {
   },
   plugins: [
     new webpack.optimize.ModuleConcatenationPlugin(),
+    new webpack.DefinePlugin({
+      'process.type': '"renderer"'
+    }),
   ],
 }

app/webpack.main.config.js

@@ -1,9 +1,10 @@
 const path = require('path')
 const webpack = require('webpack')
+const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 
 module.exports = {
   name: 'terminus-main',
-  target: 'node',
+  target: 'electron-main',
   entry: {
     main: path.resolve(__dirname, 'lib/index.ts'),
   },
@@ -33,17 +34,34 @@ module.exports = {
     ],
   },
   externals: {
+    'any-promise': 'commonjs any-promise',
     electron: 'commonjs electron',
     'electron-config': 'commonjs electron-config',
+    'electron-debug': 'commonjs electron-debug',
+    'electron-promise-ipc': 'commonjs electron-promise-ipc',
     'electron-vibrancy': 'commonjs electron-vibrancy',
     fs: 'commonjs fs',
+    glasstron: 'commonjs glasstron',
     mz: 'commonjs mz',
+    npm: 'commonjs npm',
+    '@terminus-term/node-pty': 'commonjs @terminus-term/node-pty',
     path: 'commonjs path',
-    yargs: 'commonjs yargs',
+    rxjs: 'commonjs rxjs',
+    'rxjs/operators': 'commonjs rxjs/operators',
+    util: 'commonjs util',
+    'source-map-support': 'commonjs source-map-support',
     'windows-swca': 'commonjs windows-swca',
     'windows-blurbehind': 'commonjs windows-blurbehind',
+    'yargs/yargs': 'commonjs yargs/yargs',
   },
   plugins: [
     new webpack.optimize.ModuleConcatenationPlugin(),
+    new webpack.DefinePlugin({
+      'process.type': '"main"',
+    }),
   ],
 }
+
+if (process.env.BUNDLE_ANALYZER) {
+    module.exports.plugins.push(new BundleAnalyzerPlugin())
+}

appveyor.yml

@@ -4,7 +4,7 @@ platform:
   - x64
 
 environment:
-  nodejs_version: "10"
+  nodejs_version: "15"
 
 version: "{build}"
 

build/icons/icon.svg

@@ -1,57 +1 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 23.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 1024 1024" style="enable-background:new 0 0 1024 1024;" xml:space="preserve">
-<style type="text/css">
-	.st0{opacity:0.8;fill:#00232E;}
-	.st1{fill:url(#SVGID_1_);}
-	.st2{opacity:0.16;fill:url(#SVGID_2_);}
-	.st3{fill:url(#SVGID_3_);}
-	.st4{opacity:0.16;fill:url(#SVGID_4_);}
-	.st5{fill:url(#SVGID_5_);}
-	.st6{opacity:0.15;fill:url(#SVGID_6_);}
-	.st7{fill:url(#SVGID_7_);}
-</style>
-<polygon class="st0" points="449.5,645.47 407.51,621.23 533.47,548.5 407.51,475.77 449.5,451.53 617.45,548.5 "/>
-<g>
-	<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="439.0065" y1="603.0394" x2="627.9464" y2="493.9549">
-		<stop  offset="0" style="stop-color:#669ABD"/>
-		<stop  offset="1" style="stop-color:#77DBDB"/>
-	</linearGradient>
-	<polygon class="st1" points="449.5,621.22 617.45,524.25 617.45,475.77 449.5,572.75 	"/>
-	<linearGradient id="SVGID_2_" gradientUnits="userSpaceOnUse" x1="522.9788" y1="530.3148" x2="543.9741" y2="566.6795">
-		<stop  offset="0.5588" style="stop-color:#000000;stop-opacity:0"/>
-		<stop  offset="1" style="stop-color:#000000"/>
-	</linearGradient>
-	<polygon class="st2" points="449.5,621.22 617.45,524.25 617.45,475.77 449.5,572.75 	"/>
-</g>
-<g>
-	<linearGradient id="SVGID_3_" gradientUnits="userSpaceOnUse" x1="397.0101" y1="566.6837" x2="459.9963" y2="603.0487">
-		<stop  offset="0" style="stop-color:#6A8FAD"/>
-		<stop  offset="1" style="stop-color:#669ABD"/>
-	</linearGradient>
-	<polygon class="st3" points="407.51,548.5 407.5,596.99 449.5,621.22 449.5,572.75 	"/>
-	<linearGradient id="SVGID_4_" gradientUnits="userSpaceOnUse" x1="439.0009" y1="566.6838" x2="418.0056" y2="603.0486">
-		<stop  offset="0.5588" style="stop-color:#000000;stop-opacity:0"/>
-		<stop  offset="1" style="stop-color:#000000"/>
-	</linearGradient>
-	<polygon class="st4" points="407.51,548.5 407.5,596.99 449.5,621.22 449.5,572.75 	"/>
-</g>
-<g>
-	<linearGradient id="SVGID_5_" gradientUnits="userSpaceOnUse" x1="397.0101" y1="421.2265" x2="522.9781" y2="493.9542">
-		<stop  offset="0" style="stop-color:#6A8FAD"/>
-		<stop  offset="1" style="stop-color:#669ABD"/>
-	</linearGradient>
-	<polygon class="st5" points="407.51,403.04 407.5,451.53 491.49,500.01 533.48,475.77 	"/>
-	<linearGradient id="SVGID_6_" gradientUnits="userSpaceOnUse" x1="470.4924" y1="439.4067" x2="449.4958" y2="475.774">
-		<stop  offset="0.5588" style="stop-color:#000000;stop-opacity:0"/>
-		<stop  offset="1" style="stop-color:#000000"/>
-	</linearGradient>
-	<polygon class="st6" points="407.51,403.04 407.5,451.53 491.49,500.01 533.48,475.77 	"/>
-</g>
-<linearGradient id="SVGID_7_" gradientUnits="userSpaceOnUse" x1="386.5123" y1="512.136" x2="575.4605" y2="403.0467">
-	<stop  offset="0" style="stop-color:#CCECFF"/>
-	<stop  offset="1" style="stop-color:#9FECED"/>
-</linearGradient>
-<polygon class="st7" points="449.5,572.74 407.51,548.5 533.48,475.77 407.51,403.04 449.49,378.8 617.45,475.77 "/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="Layer_1" x="0" y="0" version="1.1" viewBox="0 0 1024 1024" xml:space="preserve" style="enable-background:new 0 0 1024 1024"><style type="text/css">.st0{opacity:.8;fill:#00232e}.st1{fill:url(#SVGID_1_)}.st2{opacity:.16;fill:url(#SVGID_2_)}.st3{fill:url(#SVGID_3_)}.st4{opacity:.16;fill:url(#SVGID_4_)}.st5{fill:url(#SVGID_5_)}.st6{opacity:.15;fill:url(#SVGID_6_)}.st7{fill:url(#SVGID_7_)}</style><polygon points="449.5 645.47 407.51 621.23 533.47 548.5 407.51 475.77 449.5 451.53 617.45 548.5" class="st0"/><g><linearGradient id="SVGID_1_" x1="439.007" x2="627.946" y1="603.039" y2="493.955" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#669abd"/><stop offset="1" style="stop-color:#77dbdb"/></linearGradient><polygon points="449.5 621.22 617.45 524.25 617.45 475.77 449.5 572.75" class="st1"/><linearGradient id="SVGID_2_" x1="522.979" x2="543.974" y1="530.315" y2="566.679" gradientUnits="userSpaceOnUse"><stop offset=".559" style="stop-color:#000;stop-opacity:0"/><stop offset="1" style="stop-color:#000"/></linearGradient><polygon points="449.5 621.22 617.45 524.25 617.45 475.77 449.5 572.75" class="st2"/></g><g><linearGradient id="SVGID_3_" x1="397.01" x2="459.996" y1="566.684" y2="603.049" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#6a8fad"/><stop offset="1" style="stop-color:#669abd"/></linearGradient><polygon points="407.51 548.5 407.5 596.99 449.5 621.22 449.5 572.75" class="st3"/><linearGradient id="SVGID_4_" x1="439.001" x2="418.006" y1="566.684" y2="603.049" gradientUnits="userSpaceOnUse"><stop offset=".559" style="stop-color:#000;stop-opacity:0"/><stop offset="1" style="stop-color:#000"/></linearGradient><polygon points="407.51 548.5 407.5 596.99 449.5 621.22 449.5 572.75" class="st4"/></g><g><linearGradient id="SVGID_5_" x1="397.01" x2="522.978" y1="421.226" y2="493.954" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#6a8fad"/><stop offset="1" style="stop-color:#669abd"/></linearGradient><polygon points="407.51 403.04 407.5 451.53 491.49 500.01 533.48 475.77" class="st5"/><linearGradient id="SVGID_6_" x1="470.492" x2="449.496" y1="439.407" y2="475.774" gradientUnits="userSpaceOnUse"><stop offset=".559" style="stop-color:#000;stop-opacity:0"/><stop offset="1" style="stop-color:#000"/></linearGradient><polygon points="407.51 403.04 407.5 451.53 491.49 500.01 533.48 475.77" class="st6"/></g><linearGradient id="SVGID_7_" x1="386.512" x2="575.461" y1="512.136" y2="403.047" gradientUnits="userSpaceOnUse"><stop offset="0" style="stop-color:#ccecff"/><stop offset="1" style="stop-color:#9feced"/></linearGradient><polygon points="449.5 572.74 407.51 548.5 533.48 475.77 407.51 403.04 449.49 378.8 617.45 475.77" class="st7"/></svg>

build/linux/after-install.tpl

@@ -1,4 +1,7 @@
 #!/bin/bash
+cat > '/usr/bin/${executable}' << END
+#!/bin/sh
+'/opt/${productFilename}/${executable}' --no-sandbox $@
+END
 
-# Link to the binary
-ln -sf '/opt/${productFilename}/${executable}' '/usr/bin/${executable}'
+chmod +x '/usr/bin/${executable}'

build/mac/afterBuildHook.js

@@ -0,0 +1,16 @@
+const fs = require('fs')
+const signHook = require('./afterSignHook')
+
+module.exports = async function (params) {
+    // notarize the app on Mac OS only.
+    if (process.platform !== 'darwin' || !process.env.GITHUB_REF || !process.env.GITHUB_REF.startsWith('refs/tags/')) {
+        return
+    }
+    console.log('afterBuild hook triggered')
+
+    let pkgName = fs.readdirSync('dist').find(x => x.endsWith('.pkg'))
+    signHook({
+        appOutDir: 'dist',
+        _pathOverride: pkgName,
+    })
+}

build/mac/afterSignHook.js

@@ -6,14 +6,14 @@ const notarizer = require('electron-notarize')
 
 module.exports = async function (params) {
     // notarize the app on Mac OS only.
-    if (process.platform !== 'darwin' || process.env.GITHUB_REF !== 'refs/heads/master' || process.env.GITHUB_REF && !process.env.GITHUB_REF.startsWith('refs/tags/')) {
+    if (process.platform !== 'darwin' || !process.env.GITHUB_REF || !process.env.GITHUB_REF.startsWith('refs/tags/')) {
         return
     }
     console.log('afterSign hook triggered', params)
 
     let appId = 'org.terminus'
 
-    let appPath = path.join(params.appOutDir, `${params.packager.appInfo.productFilename}.app`)
+    let appPath = path.join(params.appOutDir, params._pathOverride || `${params.packager.appInfo.productFilename}.app`)
     if (!fs.existsSync(appPath)) {
         throw new Error(`Cannot find application at: ${appPath}`)
     }

build/mac/entitlements.plist

@@ -10,5 +10,9 @@
     <true/>
     <key>com.apple.security.cs.disable-library-validation</key>
     <true/>
+    <key>com.apple.security.device.microphone</key>
+    <true/>
+    <key>com.apple.security.device.camera</key>
+    <true/>
   </dict>
 </plist>

electron-builder.yml

@@ -0,0 +1,100 @@
+---
+appId: org.terminus
+productName: Terminus
+compression: normal
+npmRebuild: false
+afterSign: "./build/mac/afterSignHook.js"
+afterAllArtifactBuild: "./build/mac/afterBuildHook.js"
+files:
+- '**/*'
+- dist
+- '!lib'
+- '!src'
+- '!**/node_modules/*/{CHANGELOG.md,README.md,README,readme.md,readme,node.lib}'
+- '!**/node_modules/*/{test,__tests__,tests,powered-test,example,examples,docs}'
+- '!**/node_modules/@angular/common/locales'
+- '!**/node_modules/@angular/compiler/src'
+- '!**/node_modules/node-gyp'
+- '!**/node_modules/**/*.d.ts'
+- '!**/node_modules/**/*.map'
+- '!**/node_modules/**/include/node'
+- '!**/node_modules/.bin'
+- '!**/node_modules/*/*/{esm5,fesm5,esm2015,fesm2015,_esm2015,_fesm2015}'
+- '!**/*.{woff,ttf,otf,eot}'
+- '!**/*.{iml,o,hprof,orig,pyc,pyo,rbc,swp,csproj,sln,xproj}'
+- '!.editorconfig'
+- '!**/._*'
+- '!**/{.DS_Store,.git,.hg,.svn,CVS,RCS,SCCS,.gitignore,.gitattributes}'
+- '!**/{__pycache__,thumbs.db,.flowconfig,.idea,.vs,.nyc_output}'
+- '!**/{appveyor.yml,.travis.yml,circle.yml}'
+- '!**/{npm-debug.log,yarn.lock,.yarn-integrity,.yarn-metadata.json'
+extraResources:
+- builtin-plugins
+- extras
+asarUnpack:
+- dist/*.map
+publish:
+- provider: github
+
+win:
+  icon: "./build/windows/icon.ico"
+  artifactName: terminus-${version}-portable.${ext}
+  rfc3161TimeStampServer: http://sha256timestamp.ws.symantec.com/sha256/timestamp
+nsis:
+  oneClick: false
+  artifactName: terminus-${version}-setup.${ext}
+  installerIcon: "./build/windows/icon.ico"
+  allowToChangeInstallationDirectory: true
+
+mac:
+  category: public.app-category.video
+  icon: "./build/mac/icon.icns"
+  artifactName: terminus-${version}-macos-${env.ARCH}.${ext}
+  hardenedRuntime: true
+  entitlements: "./build/mac/entitlements.plist"
+  entitlementsInherit: "./build/mac/entitlements.plist"
+  extendInfo:
+    NSRequiresAquaSystemAppearance: false
+    NSCameraUsageDescription: "A subprocess requests access to the device's camera."
+    NSMicrophoneUsageDescription: "A subprocess requests access to the device's microphone."
+    NSLocationUsageDescription: "A subprocess requests access to the user's location information."
+    NSDesktopFolderUsageDescription: "A subprocess requests access to the user's Desktop folder."
+    NSDocumentsFolderUsageDescription: "A subprocess requests access to the user's Documents folder."
+    NSDownloadsFolderUsageDescription: "A subprocess requests access to the user's Downloads folder."
+    NSNetworkVolumesUsageDescription: 'A subprocess requests access to files on a network volume.'
+    NSRemovableVolumesUsageDescription: 'A subprocess requests access to files on a removable volume.'
+
+linux:
+  category: Utility
+  icon: "./build/icons"
+  artifactName: terminus-${version}-linux.${ext}
+  executableArgs:
+  - "--no-sandbox"
+  desktop:
+    StartupWMClass: terminus
+snap:
+  plugs:
+  - default
+  - system-files
+  - system-observe
+deb:
+  depends:
+  - gconf2
+  - gconf-service
+  - gnome-keyring
+  - libnotify4
+  - libsecret-1-0
+  - libappindicator1
+  - libxtst6
+  - libnss3
+  afterInstall: build/linux/after-install.tpl
+pacman:
+  depends:
+  - gnome-keyring
+  - libsecret
+rpm:
+  depends:
+  - gnome-keyring
+  fpm:
+  - '--rpm-rpmbuild-define'
+  - '_build_id_links none'

package.json

@@ -1,140 +1,80 @@
 {
   "devDependencies": {
-    "@fortawesome/fontawesome-free": "^5.11.2",
+    "@fortawesome/fontawesome-free": "^5.15.3",
+    "@sentry/cli": "^1.64.2",
+    "@sentry/electron": "^2.4.0",
+    "@terminus-term/to-string-loader": "1.1.7-beta.1",
     "@types/electron-config": "^3.2.2",
     "@types/electron-debug": "^2.1.0",
-    "@types/js-yaml": "^3.12.1",
-    "@types/node": "^12.7.12",
-    "@types/webpack-env": "1.13.9",
-    "@typescript-eslint/eslint-plugin": "^2.3.1",
-    "@typescript-eslint/parser": "^2.3.1",
+    "@types/fs-extra": "^9.0.11",
+    "@types/js-yaml": "^4.0.0",
+    "@types/node": "14.14.35",
+    "@types/webpack-env": "^1.16.0",
+    "@typescript-eslint/eslint-plugin": "^4.14.1",
+    "@typescript-eslint/parser": "^4.23.0",
     "apply-loader": "2.0.0",
-    "awesome-typescript-loader": "^5.0.0",
-    "core-js": "^3.3.2",
-    "cross-env": "6.0.3",
-    "css-loader": "3.2.0",
-    "electron": "^6.0.12",
-    "electron-builder": "^21.2.0",
-    "electron-installer-snap": "^4.0.0",
-    "electron-notarize": "^0.1.1",
-    "electron-rebuild": "^1.8.5",
-    "eslint": "^6.5.1",
-    "file-loader": "^4.1.0",
-    "graceful-fs": "^4.2.2",
-    "html-loader": "0.5.5",
+    "awesome-typescript-loader": "^5.2.1",
+    "compare-versions": "^3.6.0",
+    "core-js": "^3.12.1",
+    "cross-env": "7.0.3",
+    "css-loader": "5.2.0",
+    "electron": "12.0.6",
+    "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.26.0",
+    "eslint-plugin-import": "^2.21.1",
+    "file-loader": "^6.2.0",
+    "graceful-fs": "^4.2.6",
+    "html-loader": "2.1.2",
     "json-loader": "0.5.7",
-    "node-abi": "^2.11.0",
-    "node-gyp": "^6.0.0",
-    "node-sass": "^4.12.0",
+    "lru-cache": "^6.0.0",
+    "macos-release": "^2.4.1",
+    "node-abi": "^2.21.0",
+    "node-gyp": "^8.0.0",
+    "node-sass": "^5.0.0",
     "npmlog": "4.1.2",
-    "npx": "^10.2.0",
-    "pug": "^2.0.4",
+    "npx": "^10.2.2",
+    "patch-package": "^6.4.7",
+    "pug": "^3.0.2",
     "pug-html-loader": "1.1.5",
     "pug-lint": "^2.6.0",
     "pug-loader": "^2.4.0",
     "pug-static-loader": "2.0.0",
-    "raven-js": "3.27.2",
-    "raw-loader": "3.1.0",
-    "sass-loader": "^8.0.0",
-    "shelljs": "0.8.3",
+    "raw-loader": "4.0.2",
+    "sass-loader": "^11.0.1",
+    "shelljs": "0.8.4",
     "source-code-pro": "^2.30.2",
     "source-sans-pro": "3.6.0",
-    "style-loader": "^1.0.0",
-    "svg-inline-loader": "^0.8.0",
-    "to-string-loader": "1.1.5",
-    "tslib": "^1.10.0",
-    "typedoc": "^0.15.0",
-    "typescript": "^3.6.4",
-    "url-loader": "^2.2.0",
-    "val-loader": "1.1.1",
-    "webpack": "^4.41.1",
-    "webpack-cli": "^3.3.9",
-    "yaml-loader": "0.5.0"
+    "ssh2-streams": "^0.4.10",
+    "style-loader": "^2.0.0",
+    "svg-inline-loader": "^0.8.2",
+    "tslib": "^2.1.0",
+    "typedoc": "^0.20.36",
+    "typescript": "^3.9.9",
+    "url-loader": "^4.1.1",
+    "val-loader": "3.1.0",
+    "webpack": "^5.31.0",
+    "webpack-bundle-analyzer": "^4.4.0",
+    "webpack-cli": "^4.6.0",
+    "yaml-loader": "0.6.0"
   },
   "resolutions": {
-    "*/node-abi": "^2.8.0"
-  },
-  "build": {
-    "appId": "org.terminus",
-    "productName": "Terminus",
-    "compression": "normal",
-    "afterSign": "./build/mac/afterSignHook.js",
-    "files": [
-      "**/*",
-      "dist"
-    ],
-    "extraResources": [
-      "builtin-plugins",
-      "extras"
-    ],
-    "win": {
-      "icon": "./build/windows/icon.ico",
-      "artifactName": "terminus-${version}-setup.exe",
-      "rfc3161TimeStampServer": "http://sha256timestamp.ws.symantec.com/sha256/timestamp"
-    },
-    "nsis": {
-      "oneClick": false,
-      "artifactName": "terminus-${version}-setup.${ext}",
-      "installerIcon": "./build/windows/icon.ico"
-    },
-    "publish": [
-      {
-        "provider": "github"
-      }
-    ],
-    "portable": {
-      "artifactName": "terminus-${version}-portable.exe"
-    },
-    "mac": {
-      "category": "public.app-category.video",
-      "icon": "./build/mac/icon.icns",
-      "artifactName": "terminus-${version}-macos.${ext}",
-      "hardenedRuntime": true,
-      "entitlements": "./build/mac/entitlements.plist",
-      "entitlementsInherit": "./build/mac/entitlements.plist",
-      "extendInfo": {
-        "NSRequiresAquaSystemAppearance": false
-      }
-    },
-    "pkg": {
-      "artifactName": "terminus-${version}-macos.pkg"
-    },
-    "linux": {
-      "category": "Utilities",
-      "icon": "./build/icons",
-      "artifactName": "terminus-${version}-linux.${ext}"
-    },
-    "deb": {
-      "depends": [
-        "gconf2",
-        "gconf-service",
-        "libnotify4",
-        "libsecret-1-0",
-        "libappindicator1",
-        "libxtst6",
-        "libnss3"
-      ],
-      "afterInstall": "build/linux/after-install.tpl"
-    },
-    "rpm": {
-      "depends": [
-        "screen",
-        "gnome-python2-gnomekeyring"
-      ]
-    }
+    "*/node-abi": "^2.20.0",
+    "**/graceful-fs": "^4.2.4"
   },
   "scripts": {
-    "build": "npm run build:typings && webpack --color --config app/webpack.main.config.js && webpack --color --config app/webpack.config.js && webpack --color --config terminus-core/webpack.config.js && webpack --color --config terminus-settings/webpack.config.js && webpack --color --config terminus-terminal/webpack.config.js && webpack --color --config terminus-plugin-manager/webpack.config.js && webpack --color --config terminus-community-color-schemes/webpack.config.js && webpack --color --config terminus-ssh/webpack.config.js",
-    "build:typings": "tsc --project terminus-core/tsconfig.typings.json && tsc --project terminus-settings/tsconfig.typings.json && tsc --project terminus-terminal/tsconfig.typings.json && tsc --project terminus-plugin-manager/tsconfig.typings.json && tsc --project terminus-ssh/tsconfig.typings.json",
+    "build": "npm run build:typings && webpack --color --config app/webpack.main.config.js && webpack --color --config app/webpack.config.js && webpack --color --config terminus-core/webpack.config.js && webpack --color --config terminus-settings/webpack.config.js && webpack --color --config terminus-terminal/webpack.config.js && webpack --color --config terminus-plugin-manager/webpack.config.js && webpack --color --config terminus-community-color-schemes/webpack.config.js && webpack --color --config terminus-ssh/webpack.config.js && webpack --color --config terminus-serial/webpack.config.js",
+    "build:typings": "node scripts/build-typings.js",
     "watch": "cross-env TERMINUS_DEV=1 webpack --progress --color --watch",
-    "start": "cross-env TERMINUS_DEV=1 electron app --debug",
+    "start": "cross-env TERMINUS_DEV=1 electron app --debug --inspect",
+    "start:prod": "electron app --debug",
     "prod": "cross-env TERMINUS_DEV=1 electron app",
-    "docs": "typedoc --out docs/api terminus-core/src && typedoc --out docs/api/terminal --tsconfig terminus-terminal/tsconfig.typings.json terminus-terminal/src && typedoc --out docs/api/settings --tsconfig terminus-settings/tsconfig.typings.json terminus-settings/src",
-    "lint": "eslint --ext ts */src",
+    "docs": "typedoc --out docs/api --tsconfig terminus-core/src/tsconfig.typings.json terminus-core/src/index.ts && typedoc --out docs/api/terminal --tsconfig terminus-terminal/tsconfig.typings.json terminus-terminal/src/index.ts && typedoc --out docs/api/settings --tsconfig terminus-settings/tsconfig.typings.json terminus-settings/src/index.ts",
+    "lint": "eslint --ext ts */src */lib",
     "postinstall": "node ./scripts/install-deps.js"
   },
-  "repository": "eugeny/terminus",
-  "dependencies": {
-    "eslint-plugin-import": "^2.18.2"
-  }
+  "private": true
 }

scripts/build-linux.js

@@ -7,7 +7,7 @@ const isCI = !!process.env.GITHUB_REF
 
 builder({
     dir: true,
-    linux: ['deb', 'tar.gz', 'rpm'],
+    linux: ['deb', 'tar.gz', 'rpm', 'pacman'],
     config: {
         extraMetadata: {
             version: vars.version,

scripts/build-macos.js

@@ -3,15 +3,21 @@ const builder = require('electron-builder').build
 const vars = require('./vars')
 
 const isTag = (process.env.GITHUB_REF || '').startsWith('refs/tags/')
-const isCI = !!process.env.GITHUB_REF
+
+process.env.ARCH = process.env.ARCH || process.arch
 
 builder({
     dir: true,
     mac: ['pkg', 'zip'],
+    arm64: process.env.ARCH === 'arm64',
     config: {
         extraMetadata: {
             version: vars.version,
         },
+        npmRebuild: process.env.ARCH !== 'arm64',
     },
     publish: isTag ? 'always' : 'onTag',
-}).catch(() => process.exit(1))
+}).catch(e => {
+    console.error(e)
+    process.exit(1)
+})

scripts/build-native.js

@@ -8,6 +8,7 @@ for (let dir of ['app', 'terminus-core', 'terminus-ssh', 'terminus-terminal']) {
     const build = rebuild({
         buildPath: path.resolve(__dirname, '../' + dir),
         electronVersion: vars.electronVersion,
+        arch: process.env.ARCH ?? process.arch,
         force: true,
     })
     build.catch(e => {

scripts/build-typings.js

@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+const sh = require('shelljs')
+const vars = require('./vars')
+const log = require('npmlog')
+
+vars.builtinPlugins.forEach(plugin => {
+    log.info('typings', plugin)
+    sh.exec(`npx tsc --project ${plugin}/tsconfig.typings.json`)
+})

scripts/build-windows.js

@@ -7,7 +7,7 @@ const isCI = !!process.env.GITHUB_REF
 
 builder({
     dir: true,
-    win: ['nsis', 'portable'],
+    win: ['nsis', 'zip'],
     config: {
         extraMetadata: {
             version: vars.version,

scripts/install-deps.js

@@ -10,13 +10,13 @@ const npx = `${localBinPath}/npx`;
 log.info('deps', 'app')
 
 sh.cd('app')
-sh.exec(`${npx} yarn install`)
+sh.exec(`${npx} yarn install --force`)
 sh.cd('..')
 
 vars.builtinPlugins.forEach(plugin => {
   log.info('deps', plugin)
   sh.cd(plugin)
-  sh.exec(`${npx} yarn install`)
+  sh.exec(`${npx} yarn install --force`)
   sh.cd('..')
 })
 
@@ -25,8 +25,5 @@ if (['darwin', 'linux'].includes(process.platform)) {
   for (let x of vars.builtinPlugins) {
     sh.ln('-fs', '../' + x, x)
   }
-  for (let x of vars.bundledModules) {
-    sh.ln('-fs', '../app/node_modules/' + x, x)
-  }
   sh.cd('..')
 }

scripts/prepackage-plugins.js

@@ -15,10 +15,17 @@ vars.builtinPlugins.forEach(plugin => {
   sh.cp('-r', path.join('..', plugin), '.')
   sh.rm('-rf', path.join(plugin, 'node_modules'))
   sh.cd(plugin)
-  sh.exec(`npm install --only=prod`)
+  sh.exec(`yarn install --force --production`)
+
+
   log.info('rebuild', 'native')
   if (fs.existsSync('node_modules')) {
-    rebuild(path.resolve('.'), vars.electronVersion, process.arch, [], true)
+    rebuild({
+      buildPath: path.resolve('.'),
+      electronVersion: vars.electronVersion,
+      arch: process.env.ARCH ?? process.arch,
+      force: true,
+    })
   }
   sh.cd('..')
 })

scripts/sentry-upload.js

@@ -0,0 +1,24 @@
+#!/usr/bin/env node
+const sh = require('shelljs')
+const vars = require('./vars')
+
+const sentryCli = process.platform === 'win32' ? 'node_modules\\.bin\\sentry-cli.cmd' : 'sentry-cli'
+
+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/@terminus-term/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',
+    ]) {
+        sh.exec('dsymutil ' + path)
+    }
+}
+
+sh.exec(`${sentryCli} upload-dif app/node_modules`)
+sh.exec(`${sentryCli} releases set-commits --auto ${vars.version}`)
+for (const p of vars.builtinPlugins) {
+    sh.exec(`${sentryCli} releases files ${vars.version} upload-sourcemaps ${p}/dist -u ${p}/dist/ -d ${process.platform}-${p}`)
+}

scripts/vars.js

@@ -21,6 +21,7 @@ exports.builtinPlugins = [
   'terminus-community-color-schemes',
   'terminus-plugin-manager',
   'terminus-ssh',
+  'terminus-serial',
 ]
 exports.bundledModules = [
   '@angular',

terminus-community-color-schemes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminus-community-color-schemes",
-  "version": "1.0.92-nightly.0",
+  "version": "1.0.135-nightly.0",
   "description": "Community color schemes for Terminus",
   "keywords": [
     "terminus-builtin-plugin"
@@ -17,7 +17,7 @@
   "author": "Eugene Pankov",
   "license": "MIT",
   "peerDependencies": {
-    "@angular/core": "^7",
+    "@angular/core": "^9.1.9",
     "terminus-core": "*",
     "terminus-terminal": "*"
   }

terminus-community-color-schemes/schemes/Nord

@@ -0,0 +1,42 @@
+!
+!
+*.foreground:  #d8dee9
+*.background:  #2e3440
+*.cursorColor: #d8dee9
+!
+! Black
+*.color0:      #3b4252
+*.color8:      #373e4d
+!
+! Red
+*.color1:      #bf616a
+*.color9:      #94545d
+!
+! Green
+*.color2:      #a3be8c
+*.color10:     #809575
+!
+! Yellow
+*.color3:      #ebcb8b
+*.color11:     #b29e75
+!
+! Blue
+*.color4:      #81a1c1
+*.color12:     #68809a
+!
+! Magenta
+*.color5:      #b48ead
+*.color13:     #8c738c
+!
+! Cyan
+*.color6:      #88c0d0
+*.color14:     #6d96a5
+!
+! White
+*.color7:      #e5e9f0
+*.color15:     #aeb3bb
+!
+! Bold, Italic, Underline
+*.colorBD:     #a5abb6
+!*.colorIT:
+!*.colorUL:

terminus-community-color-schemes/src/colorSchemes.ts

@@ -1,14 +1,14 @@
 import { Injectable } from '@angular/core'
 import { TerminalColorSchemeProvider, TerminalColorScheme } from 'terminus-terminal'
 
-const schemeContents = require.context('../schemes/', true, /.*/)
+const schemeContents = require.context('../schemes/', false, /.*/)
 
 @Injectable()
 export class ColorSchemes extends TerminalColorSchemeProvider {
     async getSchemes (): Promise<TerminalColorScheme[]> {
         const schemes: TerminalColorScheme[] = []
 
-        schemeContents.keys().forEach(schemeFile => {
+        schemeContents.keys().filter(x => !x.startsWith('./')).forEach(schemeFile => {
             const lines = (schemeContents(schemeFile).default as string).split('\n')
 
             // process #define variables

terminus-community-color-schemes/tsconfig.typings.json

@@ -0,0 +1,14 @@
+{
+  "extends": "../tsconfig.json",
+  "exclude": ["node_modules", "dist", "typings"],
+  "compilerOptions": {
+    "baseUrl": "src",
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationDir": "./typings",
+    "paths": {
+      "terminus-*": ["../../terminus-*"],
+      "*": ["../../app/node_modules/*"]
+    }
+  }
+}

terminus-community-color-schemes/webpack.config.js

@@ -1,51 +1,6 @@
-const path = require('path')
-
-module.exports = {
-    target: 'node',
-    entry: 'src/index.ts',
-    context: __dirname,
-    devtool: 'cheap-module-eval-source-map',
-    output: {
-        path: path.resolve(__dirname, 'dist'),
-        filename: 'index.js',
-        pathinfo: true,
-        libraryTarget: 'umd',
-        devtoolModuleFilenameTemplate: 'webpack-terminus-community-color-schemes:///[resource-path]',
-    },
-    mode: process.env.TERMINUS_DEV ? 'development' : 'production',
-    optimization:{
-        minimize: false,
-    },
-    resolve: {
-        modules: ['.', 'src', 'node_modules', '../app/node_modules'].map(x => path.join(__dirname, x)),
-        extensions: ['.ts', '.js'],
-    },
-    module: {
-        rules: [
-            {
-                test: /\.ts$/,
-                use: {
-                    loader: 'awesome-typescript-loader',
-                    options: {
-                        configFileName: path.resolve(__dirname, 'tsconfig.json'),
-                        typeRoots: [
-                            path.resolve(__dirname, 'node_modules/@types'),
-                            path.resolve(__dirname, '../node_modules/@types'),
-                        ],
-                        paths: {
-                            "terminus-*": [path.resolve(__dirname, '../terminus-*')],
-                            "*": [path.resolve(__dirname, '../app/node_modules/*')],
-                        },
-                    },
-                },
-            },
-            { test: /[\\\/]schemes[\\\/]/, use: "raw-loader" },
-        ],
-    },
-    externals: [
-        /^rxjs/,
-        /^@angular/,
-        /^@ng-bootstrap/,
-        /^terminus-/,
-    ],
-}
+const config = require('../webpack.plugin.config')
+module.exports = config({
+    name: 'community-color-schemes',
+    dirname: __dirname,
+})
+module.exports.module.rules.push({ test: /[\\\/]schemes[\\\/]/, use: 'raw-loader' })

terminus-core/.gitignore

@@ -1,2 +1 @@
 dist
-node_modules

terminus-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "terminus-core",
-  "version": "1.0.92-nightly.0",
+  "version": "1.0.135-nightly.0",
   "description": "Terminus core",
   "keywords": [
     "terminus-builtin-plugin"
@@ -17,29 +17,32 @@
   "author": "Eugene Pankov",
   "license": "MIT",
   "devDependencies": {
-    "@types/js-yaml": "^3.9.0",
+    "@electron/remote": "1.0.4",
+    "@types/js-yaml": "^4.0.0",
     "@types/shell-escape": "^0.2.0",
     "@types/winston": "^2.3.6",
-    "axios": "^0.19.0",
+    "axios": "^0.21.1",
     "bootstrap": "^4.1.3",
+    "clone-deep": "^4.0.1",
     "core-js": "^3.1.2",
     "deepmerge": "^4.1.1",
     "electron-updater": "^4.0.6",
-    "js-yaml": "^3.9.0",
+    "js-yaml": "^4.0.0",
     "mixpanel": "^0.10.2",
     "ng2-dnd": "^5.0.2",
-    "ngx-perfect-scrollbar": "^8.0.0",
+    "ngx-perfect-scrollbar": "^10.1.0",
+    "readable-stream": "3.6.0",
     "shell-escape": "^0.2.0",
-    "uuid": "^3.3.2",
-    "winston": "^3.2.1"
+    "uuid": "^8.0.0",
+    "winston": "^3.3.3"
   },
   "peerDependencies": {
-    "@angular/animations": "^7",
-    "@angular/common": "^7",
-    "@angular/core": "^7",
-    "@angular/forms": "^7",
-    "@angular/platform-browser": "^7",
-    "@angular/platform-browser-dynamic": "^7",
-    "rxjs": "^5"
+    "@angular/animations": "^9.1.9",
+    "@angular/common": "^9.1.11",
+    "@angular/core": "^9.1.9",
+    "@angular/forms": "^9.1.11",
+    "@angular/platform-browser": "^9.1.11",
+    "@angular/platform-browser-dynamic": "^9.1.11",
+    "rxjs": "^6.6.3"
   }
 }

terminus-core/src/api/configProvider.ts

@@ -33,5 +33,5 @@ export abstract class ConfigProvider {
      * }
      * ```
      */
-    platformDefaults: {[platform: string]: any} = {}
+    platformDefaults: Record<string, any> = {}
 }

terminus-core/src/api/hotkeyProvider.ts

@@ -8,7 +8,5 @@ export interface HotkeyDescription {
  * must also provide the `hotkeys.foo` config options with the default values
  */
 export abstract class HotkeyProvider {
-    hotkeys: HotkeyDescription[] = []
-
     abstract provide (): Promise<HotkeyDescription[]>
 }

terminus-core/src/api/index.ts

@@ -1,11 +1,14 @@
+export { BaseComponent, SubscriptionContainer } from '../components/base.component'
 export { BaseTabComponent, BaseTabProcess } from '../components/baseTab.component'
+export { TabHeaderComponent } from '../components/tabHeader.component'
 export { SplitTabComponent, SplitContainer } from '../components/splitTab.component'
-export { TabRecoveryProvider, RecoveredTab } from './tabRecovery'
+export { TabRecoveryProvider, RecoveredTab, RecoveryToken } from './tabRecovery'
 export { ToolbarButtonProvider, ToolbarButton } from './toolbarButtonProvider'
 export { ConfigProvider } from './configProvider'
 export { HotkeyProvider, HotkeyDescription } from './hotkeyProvider'
 export { Theme } from './theme'
 export { TabContextMenuItemProvider } from './tabContextMenuProvider'
+export { SelectorOption } from './selector'
 
 export { AppService } from '../services/app.service'
 export { ConfigService } from '../services/config.service'
@@ -15,6 +18,9 @@ export { Logger, LogService } from '../services/log.service'
 export { HomeBaseService } from '../services/homeBase.service'
 export { HotkeysService } from '../services/hotkeys.service'
 export { HostAppService, Platform } from '../services/hostApp.service'
+export { NotificationsService } from '../services/notifications.service'
 export { ShellIntegrationService } from '../services/shellIntegration.service'
 export { ThemesService } from '../services/themes.service'
 export { TabsService } from '../services/tabs.service'
+export { UpdaterService } from '../services/updater.service'
+export * from '../utils'

terminus-core/src/api/selector.ts

@@ -0,0 +1,8 @@
+export interface SelectorOption<T> {
+    name: string
+    description?: string
+    result?: T
+    icon?: string
+    freeInputPattern?: string
+    callback?: (string?) => void
+}

terminus-core/src/api/tabContextMenuProvider.ts

@@ -1,3 +1,4 @@
+import type { MenuItemConstructorOptions } from 'electron'
 import { BaseTabComponent } from '../components/baseTab.component'
 import { TabHeaderComponent } from '../components/tabHeader.component'
 
@@ -7,5 +8,5 @@ import { TabHeaderComponent } from '../components/tabHeader.component'
 export abstract class TabContextMenuItemProvider {
     weight = 0
 
-    abstract async getItems (tab: BaseTabComponent, tabHeader?: TabHeaderComponent): Promise<Electron.MenuItemConstructorOptions[]>
+    abstract async getItems (tab: BaseTabComponent, tabHeader?: TabHeaderComponent): Promise<MenuItemConstructorOptions[]>
 }

terminus-core/src/api/tabRecovery.ts

@@ -1,3 +1,4 @@
+import deepClone from 'clone-deep'
 import { TabComponentType } from '../services/tabs.service'
 
 export interface RecoveredTab {
@@ -12,6 +13,12 @@ export interface RecoveredTab {
     options?: any
 }
 
+export interface RecoveryToken {
+    [_: string]: any
+    type: string
+    tabColor?: string|null
+}
+
 /**
  * Extend to enable recovery for your custom tab.
  * This works in conjunction with [[getRecoveryToken()]]
@@ -29,10 +36,26 @@ export interface RecoveredTab {
  * ```
  */
 export abstract class TabRecoveryProvider {
+    /**
+     * @param recoveryToken a recovery token found in the saved tabs list
+     * @returns [[boolean]] whether this [[TabRecoveryProvider]] can recover a tab from this token
+     */
+    abstract async applicableTo (recoveryToken: RecoveryToken): Promise<boolean>
+
     /**
      * @param recoveryToken a recovery token found in the saved tabs list
      * @returns [[RecoveredTab]] descriptor containing tab type and component inputs
      *          or `null` if this token is from a different tab type or is not supported
      */
-    abstract async recover (recoveryToken: any): Promise<RecoveredTab|null>
+    abstract async recover (recoveryToken: RecoveryToken): Promise<RecoveredTab>
+
+    /**
+     * @param recoveryToken a recovery token found in the saved tabs list
+     * @returns [[RecoveryToken]] a new recovery token to create the duplicate tab from
+     *
+     * The default implementation just returns a deep copy of the original token
+     */
+    duplicate (recoveryToken: RecoveryToken): RecoveryToken {
+        return deepClone(recoveryToken)
+    }
 }

terminus-core/src/api/theme.ts

@@ -10,4 +10,7 @@ export abstract class Theme {
     css: string
 
     terminalBackground: string
+
+    macOSWindowButtonsInsetX?: number
+    macOSWindowButtonsInsetY?: number
 }

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

@@ -1,13 +1,17 @@
 title-bar(
   *ngIf='!hostApp.isFullScreen && config.store.appearance.frame == "full" && config.store.appearance.dock == "off"',
-  [class.inset]='hostApp.platform == Platform.macOS'
+  [class.inset]='hostApp.platform == Platform.macOS && !hostApp.isFullScreen'
 )
 
 .content(
-    [class.tabs-on-top]='config.store.appearance.tabsLocation == "top"'
+    [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
+    [class.tabs-on-side]='hasVerticalTabs()',
 )
     .tab-bar
-        .inset.background(*ngIf='hostApp.platform == Platform.macOS && config.store.appearance.frame == "thin" && config.store.appearance.tabsLocation == "top"')
+        .inset.background(*ngIf='hostApp.platform == Platform.macOS \
+        && !hostApp.isFullScreen \
+        && config.store.appearance.frame == "thin" \
+        && (config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left")')
         .tabs(
             dnd-sortable-container,
             [sortableData]='app.tabs',
@@ -18,12 +22,11 @@ title-bar(
                 [sortableIndex]='idx',
                 (onDragStart)='onTabDragStart()',
                 (onDragEnd)='onTabDragEnd()',
-
                 [index]='idx',
                 [tab]='tab',
                 [active]='tab == app.activeTab',
-                [hasActivity]='tab.activity$|async',
                 @animateTab,
+                [@.disabled]='hasVerticalTabs()',
                 (click)='app.selectTab(tab)',
                 [class.fully-draggable]='hostApp.platform != Platform.macOS',
                 [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
@@ -38,7 +41,7 @@ title-bar(
                 button.btn.btn-secondary.btn-tab-bar(
                     [title]='button.title',
                     (click)='button.click && button.click()',
-                    [innerHTML]='sanitizeIcon(button.icon)',
+                    [fastHtmlBind]='button.icon',
                     ngbDropdownToggle,
                 )
                 div(*ngIf='button.submenu', ngbDropdownMenu)
@@ -47,8 +50,11 @@ title-bar(
                         (click)='item.click()',
                         ngbDropdownItem,
                     )
-                        .icon-wrapper([innerHTML]='sanitizeIcon(item.icon)')
-                        .ml-3 {{item.title}}
+                        .icon-wrapper(
+                            *ngIf='hasIcons(button.submenuItems)',
+                            [fastHtmlBind]='item.icon'
+                        )
+                        div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
 
         .drag-space.background([class.persistent]='config.store.appearance.frame == "thin" && hostApp.platform != Platform.macOS')
 
@@ -61,7 +67,7 @@ title-bar(
                 button.btn.btn-secondary.btn-tab-bar(
                     [title]='button.title',
                     (click)='button.click && button.click()',
-                    [innerHTML]='sanitizeIcon(button.icon)',
+                    [fastHtmlBind]='button.icon',
                     ngbDropdownToggle,
                 )
                 div(*ngIf='button.submenu', ngbDropdownMenu)
@@ -70,26 +76,32 @@ title-bar(
                         (click)='item.click()',
                         ngbDropdownItem,
                     )
-                        .icon-wrapper([innerHTML]='sanitizeIcon(item.icon)')
-                        .ml-3 {{item.title}}
+                        .icon-wrapper(
+                            *ngIf='hasIcons(button.submenuItems)',
+                            [fastHtmlBind]='item.icon'
+                        )
+                        div([class.ml-3]='hasIcons(button.submenuItems)') {{item.title}}
 
             button.btn.btn-secondary.btn-tab-bar.btn-update(
                 *ngIf='updatesAvailable',
                 title='Update available - Click to install',
-                (click)='updateApp()',
-                [innerHTML]='sanitizeIcon(updateIcon)'
+                (click)='updater.update()',
+                [fastHtmlBind]='updateIcon'
             )
 
         window-controls.background(
-            *ngIf='config.store.appearance.frame == "thin" && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
+            *ngIf='config.store.appearance.frame == "thin" \
+            && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
         )
 
-    start-page(*ngIf='ready && app.tabs.length == 0')
+    .content
+        start-page.content-tab.content-tab-active(*ngIf='ready && app.tabs.length == 0')
 
-    tab-body(
-        *ngFor='let tab of unsortedTabs',
-        [active]='tab == app.activeTab',
-        [tab]='tab',
-    )
+        tab-body.content-tab(
+            *ngFor='let tab of unsortedTabs',
+            [class.content-tab-active]='tab == app.activeTab',
+            [active]='tab == app.activeTab',
+            [tab]='tab',
+        )
 
 ng-template(ngbModalContainer)

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

@@ -15,29 +15,77 @@
 
 $tabs-height: 38px;
 $tab-border-radius: 4px;
+$side-tab-width: 200px;
 
+.wrap {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: row;
+}
 
 .content {
-    height: 100%;
-    flex: auto;
+    width: 100vw;
+    flex: 1 1 0;
+    min-height: 0;
     display: flex;
     flex-direction: column-reverse;
 
     &.tabs-on-top {
         flex-direction: column;
     }
+
+    &.tabs-on-side {
+        flex-direction: row-reverse;
+
+        &.tabs-on-top {
+            flex-direction: row;
+        }
+    }
+
 }
 
+.content.tabs-on-side > .tab-bar {
+    height: 100%;
+    width: $side-tab-width;
+    overflow-y: auto;
+    overflow-x: hidden;
+    flex-direction: column;
+    background: rgba(0, 0, 0, 0.25);
+
+    .tabs {
+        width: $side-tab-width;
+        flex: none;
+        flex-direction: column;
+
+        tab-header {
+            flex: 0 0 $tabs-height;
+        }
+    }
+
+    .drag-space {
+        flex: auto;
+    }
+
+    &>.inset {
+        opacity: 0;
+    }
+}
+
+
 .tab-bar {
     flex: none;
     height: $tabs-height;
     display: flex;
+    width: 100%;
 
     .btn-tab-bar {
         line-height: $tabs-height + 2px;
+        height: $tabs-height;
         cursor: pointer;
 
         display: flex;
+        align-items: center;
         padding: 0 15px;
         flex: 0 0 auto;
         border-bottom: 2px solid transparent;
@@ -50,6 +98,8 @@ $tab-border-radius: 4px;
         border: none;
         border-radius: 0;
 
+        align-items: center;
+
         &.dropdown-toggle::after {
             display: none;
         }
@@ -64,6 +114,7 @@ $tab-border-radius: 4px;
     &>.drag-space {
         min-width: 1px;
         flex: 1 0 1%;
+        margin-top: 2px; // for window resizing
         -webkit-app-region: drag;
 
         &.persistent {
@@ -73,7 +124,9 @@ $tab-border-radius: 4px;
 
     & > .inset {
         width: 85px;
+        height: $tabs-height;
         flex: none;
+        -webkit-app-region: drag;
     }
 
     window-controls {
@@ -81,9 +134,24 @@ $tab-border-radius: 4px;
     }
 }
 
-.tabs-content {
-    flex: auto;
-    display: flex;
+.content {
+    flex: 1 1 0;
+    position: relative;
+    min-height: 0;
+    min-width: 0;
+
+    > .content-tab {
+        position: absolute;
+        top: 0;
+        width: 100%;
+        height: 100%;
+
+        left: -1000%;
+
+        &.content-tab-active {
+            left: 0;
+        }
+    }
 }
 
 hotkey-hint {

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

@@ -1,6 +1,6 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { Component, Inject, Input, HostListener, HostBinding } from '@angular/core'
 import { trigger, style, animate, transition, state } from '@angular/animations'
-import { DomSanitizer } from '@angular/platform-browser'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 
 import { ElectronService } from '../services/electron.service'
@@ -68,15 +68,14 @@ export class AppRootComponent {
 
     private constructor (
         private docking: DockingService,
-        private electron: ElectronService,
         private hotkeys: HotkeysService,
         private updater: UpdaterService,
         private touchbar: TouchbarService,
         public hostApp: HostAppService,
         public config: ConfigService,
         public app: AppService,
-        private domSanitizer: DomSanitizer,
         @Inject(ToolbarButtonProvider) private toolbarButtonProviders: ToolbarButtonProvider[],
+        electron: ElectronService,
         log: LogService,
         ngbModal: NgbModal,
         _themes: ThemesService,
@@ -109,6 +108,15 @@ export class AppRootComponent {
                 if (hotkey === 'previous-tab') {
                     this.app.previousTab()
                 }
+                if (hotkey === 'move-tab-left') {
+                    this.app.moveSelectedTabLeft()
+                }
+                if (hotkey === 'move-tab-right') {
+                    this.app.moveSelectedTabRight()
+                }
+                if (hotkey === 'reopen-tab') {
+                    this.app.reopenLastTab()
+                }
             }
             if (hotkey === 'toggle-fullscreen') {
                 this.hostApp.toggleFullscreen()
@@ -120,27 +128,26 @@ export class AppRootComponent {
             this.docking.dock()
         })
 
-        this.hostApp.secondInstance$.subscribe(() => {
-            this.presentWindow()
-        })
-        this.hotkeys.globalHotkey.subscribe(() => {
-            this.onGlobalHotkey()
-        })
-
         this.hostApp.windowCloseRequest$.subscribe(async () => {
-            await this.app.closeAllTabs() && this.hostApp.closeWindow()
+            this.app.closeWindow()
         })
 
         if (window['safeModeReason']) {
             ngbModal.open(SafeModeModalComponent)
         }
 
-        this.updater.check().then(available => {
-            this.updatesAvailable = available
-        })
+        setInterval(() => {
+            if (this.config.store.enableAutomaticUpdates) {
+                this.updater.check().then(available => {
+                    this.updatesAvailable = available
+                })
+            }
+        }, 3600 * 12)
 
         this.touchbar.update()
 
+        this.hostApp.useBuiltinGraphics()
+
         config.changed$.subscribe(() => this.updateVibrancy())
         this.updateVibrancy()
 
@@ -167,40 +174,6 @@ export class AppRootComponent {
         })
     }
 
-    onGlobalHotkey () {
-        if (this.hostApp.getWindow().isFocused()) {
-            this.hideWindow()
-        } else {
-            this.presentWindow()
-        }
-    }
-
-    presentWindow () {
-        if (!this.hostApp.getWindow().isVisible()) {
-            // unfocused, invisible
-            this.hostApp.getWindow().show()
-            this.hostApp.getWindow().focus()
-        } else {
-            if (this.config.store.appearance.dock === 'off') {
-                // not docked, visible
-                setTimeout(() => {
-                    this.hostApp.getWindow().focus()
-                })
-            } else {
-                // docked, visible
-                this.hostApp.getWindow().hide()
-            }
-        }
-    }
-
-    hideWindow () {
-        this.electron.loseFocus()
-        this.hostApp.getWindow().blur()
-        if (this.hostApp.platform !== Platform.macOS) {
-            this.hostApp.getWindow().hide()
-        }
-    }
-
     async ngOnInit () {
         this.ready = true
 
@@ -217,18 +190,8 @@ export class AppRootComponent {
         return false
     }
 
-    async updateApp () {
-        if ((await this.electron.showMessageBox(
-            this.hostApp.getWindow(),
-            {
-                type: 'warning',
-                message: 'Installing the update will close all tabs and restart Terminus.',
-                buttons: ['Cancel', 'Update'],
-                defaultId: 1,
-            }
-        )).response === 1) {
-            this.updater.update()
-        }
+    hasVerticalTabs () {
+        return this.config.store.appearance.tabsLocation === 'left' || this.config.store.appearance.tabsLocation === 'right'
     }
 
     onTabDragStart () {
@@ -248,8 +211,8 @@ export class AppRootComponent {
         }
     }
 
-    sanitizeIcon (icon: string): any {
-        return this.domSanitizer.bypassSecurityTrustHtml(icon || '')
+    hasIcons (submenuItems: ToolbarButton[]): boolean {
+        return submenuItems.some(x => !!x.icon)
     }
 
     private getToolbarButtons (aboveZero: boolean): ToolbarButton[] {
@@ -258,8 +221,8 @@ export class AppRootComponent {
             buttons = buttons.concat(provider.provide())
         })
         return buttons
-            .filter(button => (button.weight || 0) > 0 === aboveZero)
-            .sort((a: ToolbarButton, b: ToolbarButton) => (a.weight || 0) - (b.weight || 0))
+            .filter(button => (button.weight ?? 0) > 0 === aboveZero)
+            .sort((a: ToolbarButton, b: ToolbarButton) => (a.weight ?? 0) - (b.weight ?? 0))
     }
 
     private updateVibrancy () {

terminus-core/src/components/base.component.ts

@@ -0,0 +1,54 @@
+import { Observable, Subscription } from 'rxjs'
+
+interface CancellableEvent {
+    element: HTMLElement
+    event: string
+    handler: EventListenerOrEventListenerObject
+    options?: boolean|AddEventListenerOptions
+}
+
+export class SubscriptionContainer {
+    private subscriptions: Subscription[] = []
+    private events: CancellableEvent[] = []
+
+    addEventListener (element: HTMLElement, event: string, handler: EventListenerOrEventListenerObject, options?: boolean|AddEventListenerOptions): void {
+        element.addEventListener(event, handler, options)
+        this.events.push({
+            element,
+            event,
+            handler,
+            options,
+        })
+    }
+
+    subscribe <T> (observable: Observable<T>, handler: (v: T) => void): void {
+        this.subscriptions.push(observable.subscribe(handler))
+    }
+
+    cancelAll (): void {
+        for (const s of this.subscriptions) {
+            s.unsubscribe()
+        }
+        for (const e of this.events) {
+            e.element.removeEventListener(e.event, e.handler, e.options)
+        }
+        this.subscriptions = []
+        this.events = []
+    }
+}
+
+export class BaseComponent {
+    private subscriptionContainer = new SubscriptionContainer()
+
+    addEventListenerUntilDestroyed (element: HTMLElement, event: string, handler: EventListenerOrEventListenerObject, options?: boolean|AddEventListenerOptions): void {
+        this.subscriptionContainer.addEventListener(element, event, handler, options)
+    }
+
+    subscribeUntilDestroyed <T> (observable: Observable<T>, handler: (v: T) => void): void {
+        this.subscriptionContainer.subscribe(observable, handler)
+    }
+
+    ngOnDestroy (): void {
+        this.subscriptionContainer.cancelAll()
+    }
+}

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

@@ -1,5 +1,7 @@
 import { Observable, Subject } from 'rxjs'
 import { ViewRef } from '@angular/core'
+import { RecoveryToken } from '../api/tabRecovery'
+import { BaseComponent } from './base.component'
 
 /**
  * Represents an active "process" inside a tab,
@@ -12,7 +14,12 @@ export interface BaseTabProcess {
 /**
  * Abstract base class for custom tab components
  */
-export abstract class BaseTabComponent {
+export abstract class BaseTabComponent extends BaseComponent {
+    /**
+     * Parent tab (usually a SplitTabComponent)
+     */
+    parent: BaseTabComponent|null = null
+
     /**
      * Current tab title
      */
@@ -38,7 +45,7 @@ export abstract class BaseTabComponent {
      */
     color: string|null = null
 
-    protected hasFocus = false
+    hasFocus = false
 
     /**
      * Ping this if your recovery state has been changed and you want
@@ -62,7 +69,8 @@ export abstract class BaseTabComponent {
     get destroyed$ (): Observable<void> { return this.destroyed }
     get recoveryStateChangedHint$ (): Observable<void> { return this.recoveryStateChangedHint }
 
-    constructor () {
+    protected constructor () {
+        super()
         this.focused$.subscribe(() => {
             this.hasFocus = true
         })
@@ -71,7 +79,7 @@ export abstract class BaseTabComponent {
         })
     }
 
-    setTitle (title: string) {
+    setTitle (title: string): void {
         this.title = title
         if (!this.customTitle) {
             this.titleChange.next(title)
@@ -83,7 +91,7 @@ export abstract class BaseTabComponent {
      *
      * @param  {type} progress: value between 0 and 1, or `null` to remove
      */
-    setProgress (progress: number|null) {
+    setProgress (progress: number|null): void {
         this.progress.next(progress)
         if (progress) {
             if (this.progressClearTimeout) {
@@ -118,7 +126,7 @@ export abstract class BaseTabComponent {
      * @return JSON serializable tab state representation
      *         for your [[TabRecoveryProvider]] to parse
      */
-    async getRecoveryToken (): Promise<any> {
+    async getRecoveryToken (): Promise<RecoveryToken|null> {
         return null
     }
 
@@ -136,11 +144,11 @@ export abstract class BaseTabComponent {
         return true
     }
 
-    emitFocused () {
+    emitFocused (): void {
         this.focused.next()
     }
 
-    emitBlurred () {
+    emitBlurred (): void {
         this.blurred.next()
     }
 
@@ -152,10 +160,17 @@ export abstract class BaseTabComponent {
         this.blurred.complete()
         this.titleChange.complete()
         this.progress.complete()
+        this.activity.complete()
         this.recoveryStateChangedHint.complete()
         if (!skipDestroyedEvent) {
             this.destroyed.next()
         }
         this.destroyed.complete()
     }
+
+    /** @hidden */
+    ngOnDestroy (): void {
+        this.destroy()
+        super.ngOnDestroy()
+    }
 }

terminus-core/src/components/checkbox.component.pug

@@ -1,4 +0,0 @@
-.icon(tabindex='0', [class.active]='model', (keyup.space)='click()')
-    i.fas.fa-square.off
-    i.fas.fa-check-square.on
-.text {{text}}

terminus-core/src/components/checkbox.component.scss

@@ -1,55 +0,0 @@
-:host {
-    cursor: pointer;
-    margin: 5px 0;
-
-    &:focus {
-        background: rgba(255,255,255,.05);
-        border-radius: 5px;
-    }
-
-    &:active {
-        background: rgba(255,255,255,.1);
-        border-radius: 3px;
-    }
-
-    &[disabled] {
-        opacity: 0.5;
-    }
-
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-
-    .off {
-        color: rgba(0, 0, 0, .5);
-    }
-
-    .icon {
-        position: relative;
-        flex: none;
-        width: 14px;
-        height: 14px;
-
-        i {
-            position: absolute;
-            left: 0;
-            top: -2px;
-            transition: 0.25s opacity;
-            display: block;
-            font-size: 18px;
-        }
-
-        i.on, &.active i.off {
-            opacity: 0;
-        }
-
-        i.off, &.active i.on {
-            opacity: 1;
-        }
-    }
-
-    .text {
-        flex: auto;
-        margin-left: 8px;
-    }
-}

terminus-core/src/components/checkbox.component.ts

@@ -1,18 +1,23 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { NgZone, Component, Input, HostBinding, HostListener } from '@angular/core'
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
 
 /** @hidden */
 @Component({
     selector: 'checkbox',
-    template: require('./checkbox.component.pug'),
-    styles: [require('./checkbox.component.scss')],
+    template: `
+        <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" [(ngModel)]='model'>
+            <label class="custom-control-label">{{text}}</label>
+        </div>
+    `,
     providers: [
         { provide: NG_VALUE_ACCESSOR, useExisting: CheckboxComponent, multi: true },
     ],
 })
 export class CheckboxComponent implements ControlValueAccessor {
     @HostBinding('class.active') @Input() model: boolean
-    @Input() disabled: boolean
+    @HostBinding('class.disabled') @Input() disabled: boolean
     @Input() text: string
     private changed = new Array<(val: boolean) => void>()
 

terminus-core/src/components/renameTabModal.component.ts

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { Component, Input, ElementRef, ViewChild } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
 

terminus-core/src/components/safeModeModal.component.ts

@@ -14,7 +14,7 @@ export class SafeModeModalComponent {
         this.error = window['safeModeReason']
     }
 
-    close () {
+    close (): void {
         this.modalInstance.dismiss()
     }
 }

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

@@ -0,0 +1,26 @@
+.modal-body
+    input.form-control(
+        type='text',
+        [(ngModel)]='filter',
+        autofocus,
+        [placeholder]='name',
+        (ngModelChange)='onFilterChange()'
+    )
+
+    .list-group(*ngIf='filteredOptions.length')
+        a.list-group-item.list-group-item-action.d-flex.align-items-center(
+            #item,
+            (click)='selectOption(option)',
+            [class.active]='selectedIndex == i',
+            *ngFor='let option of filteredOptions; let i = index'
+        )
+            i.icon(
+                class='fa-fw fas fa-{{option.icon}}',
+                *ngIf='!iconIsSVG(option.icon)'
+            )
+            .icon(
+                [fastHtmlBind]='option.icon',
+                *ngIf='iconIsSVG(option.icon)'
+            )
+            .mr-2.title {{getOptionText(option)}}
+            .text-muted {{option.description}}

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

@@ -0,0 +1,24 @@
+.modal-body {
+    padding: 0;
+}
+
+.list-group {
+    max-height: 70vh;
+    overflow: auto;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.icon {
+    width: 1.25rem;
+    margin-right: 0.25rem;
+}
+
+.title {
+    margin-left: 10px;
+}
+
+input {
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+}

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

@@ -0,0 +1,79 @@
+import { Component, Input, HostListener, ViewChildren, QueryList, ElementRef } from '@angular/core' // eslint-disable-line @typescript-eslint/no-unused-vars
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { SelectorOption } from '../api/selector'
+
+/** @hidden */
+@Component({
+    selector: 'selector-modal',
+    template: require('./selectorModal.component.pug'),
+    styles: [require('./selectorModal.component.scss')],
+})
+export class SelectorModalComponent<T> {
+    @Input() options: SelectorOption<T>[]
+    @Input() filteredOptions: SelectorOption<T>[]
+    @Input() filter = ''
+    @Input() name: string
+    @Input() selectedIndex = 0
+    @ViewChildren('item') itemChildren: QueryList<ElementRef>
+
+    constructor (
+        public modalInstance: NgbActiveModal,
+    ) { }
+
+    ngOnInit (): void {
+        this.onFilterChange()
+    }
+
+    @HostListener('keyup', ['$event']) onKeyUp (event: KeyboardEvent): void {
+        if (event.key === 'ArrowUp') {
+            this.selectedIndex--
+        }
+        if (event.key === 'ArrowDown') {
+            this.selectedIndex++
+        }
+        if (event.key === 'Enter') {
+            this.selectOption(this.filteredOptions[this.selectedIndex])
+        }
+        if (event.key === 'Escape') {
+            this.close()
+        }
+
+        this.selectedIndex = (this.selectedIndex + this.filteredOptions.length) % this.filteredOptions.length
+        Array.from(this.itemChildren)[this.selectedIndex]?.nativeElement.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+        })
+    }
+
+    onFilterChange (): void {
+        const f = this.filter.trim().toLowerCase()
+        if (!f) {
+            this.filteredOptions = this.options.filter(x => !x.freeInputPattern)
+        } else {
+            // 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.selectedIndex = Math.max(0, this.selectedIndex)
+        this.selectedIndex = Math.min(this.filteredOptions.length - 1, this.selectedIndex)
+    }
+
+    getOptionText (option: SelectorOption<T>): string {
+        if (option.freeInputPattern) {
+            return option.freeInputPattern.replace('%s', this.filter)
+        }
+        return option.name
+    }
+
+    selectOption (option: SelectorOption<T>): void {
+        option.callback?.(this.filter)
+        this.modalInstance.close(option.result)
+    }
+
+    close (): void {
+        this.modalInstance.dismiss()
+    }
+
+    iconIsSVG (icon?: string): boolean {
+        return icon?.startsWith('<') ?? false
+    }
+}

terminus-core/src/components/splitTab.component.scss

@@ -3,3 +3,24 @@
     position: relative;
     flex: auto;
 }
+
+::ng-deep split-tab > .child {
+    position: absolute;
+    transition: 0.125s all;
+    opacity: .75;
+
+    &.focused {
+        opacity: 1;
+    }
+
+    &.minimized {
+        opacity: .1;
+    }
+
+    &.maximized {
+        z-index: 2;
+        box-shadow: rgba(0, 0, 0, 0.25) 0px 0px 30px;
+        backdrop-filter: blur(10px);
+        border-radius: 10px;
+    }
+}

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

@@ -1,7 +1,7 @@
-import { Observable, Subject, Subscription } from 'rxjs'
-import { Component, Injectable, ViewChild, ViewContainerRef, EmbeddedViewRef, OnInit, OnDestroy } from '@angular/core'
+import { Observable, Subject } from 'rxjs'
+import { Component, Injectable, ViewChild, ViewContainerRef, EmbeddedViewRef, AfterViewInit, OnDestroy } from '@angular/core'
 import { BaseTabComponent, BaseTabProcess } from './baseTab.component'
-import { TabRecoveryProvider, RecoveredTab } from '../api/tabRecovery'
+import { TabRecoveryProvider, RecoveredTab, RecoveryToken } from '../api/tabRecovery'
 import { TabsService } from '../services/tabs.service'
 import { HotkeysService } from '../services/hotkeys.service'
 import { TabRecoveryService } from '../services/tabRecovery.service'
@@ -48,7 +48,7 @@ export class SplitContainer {
     /**
      * Remove unnecessarily nested child containers and renormalizes [[ratios]]
      */
-    normalize () {
+    normalize (): void {
         for (let i = 0; i < this.children.length; i++) {
             const child = this.children[i]
 
@@ -93,7 +93,7 @@ export class SplitContainer {
         return s
     }
 
-    async serialize () {
+    async serialize (): Promise<RecoveryToken> {
         const children: any[] = []
         for (const child of this.children) {
             if (child instanceof SplitContainer) {
@@ -140,7 +140,9 @@ export interface SplitSpannerInfo {
     `,
     styles: [require('./splitTab.component.scss')],
 })
-export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDestroy {
+export class SplitTabComponent extends BaseTabComponent implements AfterViewInit, OnDestroy {
+    static DIRECTIONS: SplitDirection[] = ['t', 'r', 'b', 'l']
+
     /** @hidden */
     @ViewChild('vc', { read: ViewContainerRef }) viewContainer: ViewContainerRef
 
@@ -155,14 +157,19 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
     /** @hidden */
     _spanners: SplitSpannerInfo[] = []
 
-    private focusedTab: BaseTabComponent
-    private hotkeysSubscription: Subscription
+    /** @hidden */
+    _allFocusMode = false
+
+    /** @hidden */
+    private focusedTab: BaseTabComponent|null = null
+    private maximizedTab: BaseTabComponent|null = null
     private viewRefs: Map<BaseTabComponent, EmbeddedViewRef<any>> = new Map()
 
     private tabAdded = 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 }
     get tabRemoved$ (): Observable<BaseTabComponent> { return this.tabRemoved }
@@ -177,6 +184,11 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
      */
     get focusChanged$ (): Observable<BaseTabComponent> { return this.focusChanged }
 
+    /**
+     * Fired once tab layout is created and child tabs can be added
+     */
+    get initialized$ (): Observable<void> { return this.initialized }
+
     /** @hidden */
     constructor (
         private hotkeys: HotkeysService,
@@ -197,8 +209,8 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
         })
         this.blurred$.subscribe(() => this.getAllTabs().forEach(x => x.emitBlurred()))
 
-        this.hotkeysSubscription = this.hotkeys.matchedHotkey.subscribe(hotkey => {
-            if (!this.hasFocus) {
+        this.subscribeUntilDestroyed(this.hotkeys.matchedHotkey, hotkey => {
+            if (!this.hasFocus || !this.focusedTab) {
                 return
             }
             switch (hotkey) {
@@ -226,6 +238,13 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
                 case 'pane-nav-down':
                     this.navigate('b')
                     break
+                case 'pane-maximize':
+                    if (this.maximizedTab) {
+                        this.maximize(null)
+                    } else if (this.getAllTabs().length > 1) {
+                        this.maximize(this.focusedTab)
+                    }
+                    break
                 case 'close-pane':
                     this.removeTab(this.focusedTab)
                     break
@@ -234,51 +253,67 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
     }
 
     /** @hidden */
-    async ngOnInit () {
+    async ngAfterViewInit (): Promise<void> {
         if (this._recoveredState) {
-            await this.recoverContainer(this.root, this._recoveredState)
+            await this.recoverContainer(this.root, this._recoveredState, this._recoveredState.duplicate)
             this.layout()
-            setImmediate(() => {
+            setTimeout(() => {
                 if (this.hasFocus) {
-                    this.getAllTabs().forEach(x => x.emitFocused())
-                    this.focusAnyIn(this.root)
+                    for (const tab of this.getAllTabs()) {
+                        this.focus(tab)
+                    }
                 }
-            })
+            }, 100)
         }
+        this.initialized.next()
+        this.initialized.complete()
     }
 
     /** @hidden */
-    ngOnDestroy () {
-        this.hotkeysSubscription.unsubscribe()
+    ngOnDestroy (): void {
+        this.tabAdded.complete()
+        this.tabRemoved.complete()
+        super.ngOnDestroy()
     }
 
     /** @returns Flat list of all sub-tabs */
-    getAllTabs () {
+    getAllTabs (): BaseTabComponent[] {
         return this.root.getAllTabs()
     }
 
-    getFocusedTab (): BaseTabComponent {
+    getFocusedTab (): BaseTabComponent|null {
         return this.focusedTab
     }
 
-    focus (tab: BaseTabComponent) {
+    getMaximizedTab (): BaseTabComponent|null {
+        return this.maximizedTab
+    }
+
+    focus (tab: BaseTabComponent): void {
         this.focusedTab = tab
         for (const x of this.getAllTabs()) {
             if (x !== tab) {
                 x.emitBlurred()
             }
         }
-        if (tab) {
-            tab.emitFocused()
-            this.focusChanged.next(tab)
+        tab.emitFocused()
+        this.focusChanged.next(tab)
+
+        if (this.maximizedTab !== tab) {
+            this.maximizedTab = null
         }
         this.layout()
     }
 
+    maximize (tab: BaseTabComponent|null): void {
+        this.maximizedTab = tab
+        this.layout()
+    }
+
     /**
      * Focuses the first available tab inside the given [[SplitContainer]]
      */
-    focusAnyIn (parent: BaseTabComponent | SplitContainer) {
+    focusAnyIn (parent?: BaseTabComponent | SplitContainer): void {
         if (!parent) {
             return
         }
@@ -292,8 +327,10 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
     /**
      * Inserts a new `tab` to the `side` of the `relative` tab
      */
-    addTab (tab: BaseTabComponent, relative: BaseTabComponent|null, side: SplitDirection) {
-        let target = (relative ? this.getParentOf(relative) : null) || this.root
+    async addTab (tab: BaseTabComponent, relative: BaseTabComponent|null, side: SplitDirection): Promise<void> {
+        tab.parent = this
+
+        let target = (relative ? this.getParentOf(relative) : null) ?? this.root
         let insertIndex = relative ? target.children.indexOf(relative) : -1
 
         if (
@@ -322,6 +359,9 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
         target.children.splice(insertIndex, 0, tab)
 
         this.recoveryStateChangedHint.next()
+
+        await this.initialized$.toPromise()
+
         this.attachTabView(tab)
 
         setImmediate(() => {
@@ -331,7 +371,7 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
         })
     }
 
-    removeTab (tab: BaseTabComponent) {
+    removeTab (tab: BaseTabComponent): void {
         const parent = this.getParentOf(tab)
         if (!parent) {
             return
@@ -341,11 +381,11 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
         parent.children.splice(index, 1)
 
         this.detachTabView(tab)
+        tab.parent = null
 
         this.layout()
 
         this.tabRemoved.next(tab)
-
         if (this.root.children.length === 0) {
             this.destroy()
         } else {
@@ -356,7 +396,11 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
     /**
      * Moves focus in the given direction
      */
-    navigate (dir: SplitDirection) {
+    navigate (dir: SplitDirection): void {
+        if (!this.focusedTab) {
+            return
+        }
+
         let rel: BaseTabComponent | SplitContainer = this.focusedTab
         let parent = this.getParentOf(rel)
         if (!parent) {
@@ -389,18 +433,19 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
         }
     }
 
-    async splitTab (tab: BaseTabComponent, dir: SplitDirection) {
+    async splitTab (tab: BaseTabComponent, dir: SplitDirection): Promise<BaseTabComponent|null> {
         const newTab = await this.tabsService.duplicate(tab)
         if (newTab) {
             this.addTab(newTab, tab, dir)
         }
+        return newTab
     }
 
     /**
      * @returns the immediate parent of `tab`
      */
     getParentOf (tab: BaseTabComponent | SplitContainer, root?: SplitContainer): SplitContainer|null {
-        root = root || this.root
+        root = root ?? this.root
         for (const child of root.children) {
             if (child instanceof SplitContainer) {
                 const r = this.getParentOf(tab, child)
@@ -427,28 +472,44 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
 
     /** @hidden */
     async getCurrentProcess (): Promise<BaseTabProcess|null> {
-        return (await Promise.all(this.getAllTabs().map(x => x.getCurrentProcess()))).find(x => !!x) || null
+        return (await Promise.all(this.getAllTabs().map(x => x.getCurrentProcess()))).find(x => !!x) ?? null
     }
 
     /** @hidden */
-    onSpannerAdjusted (spanner: SplitSpannerInfo) {
+    onSpannerAdjusted (spanner: SplitSpannerInfo): void {
         this.layout()
         this.splitAdjusted.next(spanner)
     }
 
+    destroy (): void {
+        super.destroy()
+        for (const x of this.getAllTabs()) {
+            x.destroy()
+        }
+    }
+
+    layout (): void {
+        this.root.normalize()
+        this._spanners = []
+        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)
 
-        ref.rootNodes[0].addEventListener('click', () => this.focus(tab))
+        tab.addEventListenerUntilDestroyed(ref.rootNodes[0], 'click', () => this.focus(tab))
 
-        tab.titleChange$.subscribe(t => this.setTitle(t))
-        tab.activity$.subscribe(a => a ? this.displayActivity() : this.clearActivity())
-        tab.progress$.subscribe(p => this.setProgress(p))
+        tab.subscribeUntilDestroyed(tab.titleChange$, t => this.setTitle(t))
+        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)
         }
-        tab.destroyed$.subscribe(() => {
+        tab.subscribeUntilDestroyed(tab.recoveryStateChangedHint$, () => {
+            this.recoveryStateChangedHint.next()
+        })
+        tab.subscribeUntilDestroyed(tab.destroyed$, () => {
             this.removeTab(tab)
         })
     }
@@ -461,15 +522,9 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
         }
     }
 
-    private layout () {
-        this.root.normalize()
-        this._spanners = []
-        this.layoutInternal(this.root, 0, 0, 100, 100)
-    }
-
     private layoutInternal (root: SplitContainer, x: number, y: number, w: number, h: number) {
         const size = root.orientation === 'v' ? h : w
-        const sizes = root.ratios.map(x => x * size)
+        const sizes = root.ratios.map(ratio => ratio * size)
 
         root.x = x
         root.y = y
@@ -485,14 +540,25 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
             if (child instanceof SplitContainer) {
                 this.layoutInternal(child, childX, childY, childW, childH)
             } else {
-                const element = this.viewRefs.get(child)!.rootNodes[0]
-                element.style.position = 'absolute'
-                element.style.left = `${childX}%`
-                element.style.top = `${childY}%`
-                element.style.width = `${childW}%`
-                element.style.height = `${childH}%`
+                const viewRef = this.viewRefs.get(child)
+                if (viewRef) {
+                    const element = viewRef.rootNodes[0]
+                    element.classList.toggle('child', true)
+                    element.classList.toggle('maximized', child === this.maximizedTab)
+                    element.classList.toggle('minimized', this.maximizedTab && child !== this.maximizedTab)
+                    element.classList.toggle('focused', this._allFocusMode || child === this.focusedTab)
+                    element.style.left = `${childX}%`
+                    element.style.top = `${childY}%`
+                    element.style.width = `${childW}%`
+                    element.style.height = `${childH}%`
 
-                element.style.opacity = child === this.focusedTab ? 1 : 0.75
+                    if (child === this.maximizedTab) {
+                        element.style.left = '5%'
+                        element.style.top = '5%'
+                        element.style.width = '90%'
+                        element.style.height = '90%'
+                    }
+                }
             }
             offset += sizes[i]
 
@@ -505,7 +571,7 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
         })
     }
 
-    private async recoverContainer (root: SplitContainer, state: any) {
+    private async recoverContainer (root: SplitContainer, state: any, duplicate = false) {
         const children: (SplitContainer | BaseTabComponent)[] = []
         root.orientation = state.orientation
         root.ratios = state.ratios
@@ -513,32 +579,45 @@ export class SplitTabComponent extends BaseTabComponent implements OnInit, OnDes
         for (const childState of state.children) {
             if (childState.type === 'app:split-tab') {
                 const child = new SplitContainer()
-                await this.recoverContainer(child, childState)
+                await this.recoverContainer(child, childState, duplicate)
                 children.push(child)
             } else {
-                const recovered = await this.tabRecovery.recoverTab(childState)
+                const recovered = await this.tabRecovery.recoverTab(childState, duplicate)
                 if (recovered) {
                     const tab = this.tabsService.create(recovered.type, recovered.options)
                     children.push(tab)
+                    tab.parent = this
                     this.attachTabView(tab)
                 } else {
                     state.ratios.splice(state.children.indexOf(childState), 0)
                 }
             }
         }
+        while (root.ratios.length < root.children.length) {
+            root.ratios.push(1)
+        }
+        root.normalize()
     }
 }
 
 /** @hidden */
 @Injectable()
 export class SplitTabRecoveryProvider extends TabRecoveryProvider {
-    async recover (recoveryToken: any): Promise<RecoveredTab|null> {
-        if (recoveryToken && recoveryToken.type === 'app:split-tab') {
-            return {
-                type: SplitTabComponent,
-                options: { _recoveredState: recoveryToken },
-            }
+    async applicableTo (recoveryToken: RecoveryToken): Promise<boolean> {
+        return recoveryToken.type === 'app:split-tab'
+    }
+
+    async recover (recoveryToken: RecoveryToken): Promise<RecoveredTab> {
+        return {
+            type: SplitTabComponent,
+            options: { _recoveredState: recoveryToken },
+        }
+    }
+
+    duplicate (recoveryToken: RecoveryToken): RecoveryToken {
+        return {
+            ...recoveryToken,
+            duplicate: true,
         }
-        return null
     }
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { Component, Input, HostBinding, ElementRef, Output, EventEmitter } from '@angular/core'
 import { SplitContainer } from './splitTab.component'
 
@@ -16,21 +17,25 @@ export class SplitTabSpannerComponent {
     @HostBinding('class.v') isVertical = true
     @HostBinding('style.left') cssLeft: string
     @HostBinding('style.top') cssTop: string
-    @HostBinding('style.width') cssWidth: string
-    @HostBinding('style.height') cssHeight: string
+    @HostBinding('style.width') cssWidth: string | null
+    @HostBinding('style.height') cssHeight: string | null
     private marginOffset = -5
 
     constructor (private element: ElementRef) { }
 
     ngAfterViewInit () {
+        this.element.nativeElement.addEventListener('dblclick', () => {
+            this.reset()
+        })
+
         this.element.nativeElement.addEventListener('mousedown', (e: MouseEvent) => {
             this.isActive = true
             const start = this.isVertical ? e.pageY : e.pageX
             let current = start
             const oldPosition: number = this.isVertical ? this.element.nativeElement.offsetTop : this.element.nativeElement.offsetLeft
 
-            const dragHandler = (e: MouseEvent) => {
-                current = this.isVertical ? e.pageY : e.pageX
+            const dragHandler = (dragEvent: MouseEvent) => {
+                current = this.isVertical ? dragEvent.pageY : dragEvent.pageX
                 const newPosition = oldPosition + (current - start)
                 if (this.isVertical) {
                     this.element.nativeElement.style.top = `${newPosition - this.marginOffset}px`
@@ -49,14 +54,16 @@ export class SplitTabSpannerComponent {
                 diff = Math.max(diff, -this.container.ratios[this.index - 1] + 0.1)
                 diff = Math.min(diff, this.container.ratios[this.index] - 0.1)
 
-                this.container.ratios[this.index - 1] += diff
-                this.container.ratios[this.index] -= diff
-                this.change.emit()
+                if (diff) {
+                    this.container.ratios[this.index - 1] += diff
+                    this.container.ratios[this.index] -= diff
+                    this.change.emit()
+                }
             }
 
-            document.addEventListener('mouseup', offHandler)
+            document.addEventListener('mouseup', offHandler, { passive: true })
             this.element.nativeElement.parentElement.addEventListener('mousemove', dragHandler)
-        })
+        }, { passive: true })
     }
 
     ngOnChanges () {
@@ -79,10 +86,17 @@ export class SplitTabSpannerComponent {
         }
     }
 
+    reset () {
+        const ratio = (this.container.ratios[this.index - 1] + this.container.ratios[this.index]) / 2
+        this.container.ratios[this.index - 1] = ratio
+        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}%` : 'initial'
-        this.cssHeight = h ? `${h}%` : 'initial'
+        this.cssWidth = w ? `${w}%` : null
+        this.cssHeight = h ? `${h}%` : null
     }
 }

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

@@ -13,7 +13,7 @@ import { ToolbarButton, ToolbarButtonProvider } from '../api'
 export class StartPageComponent {
     version: string
 
-    constructor (
+    private constructor (
         private config: ConfigService,
         private domSanitizer: DomSanitizer,
         public homeBase: HomeBaseService,
@@ -26,10 +26,10 @@ export class StartPageComponent {
             .map(provider => provider.provide())
             .reduce((a, b) => a.concat(b))
             .filter(x => !!x.click)
-            .sort((a: ToolbarButton, b: ToolbarButton) => (a.weight || 0) - (b.weight || 0))
+            .sort((a: ToolbarButton, b: ToolbarButton) => (a.weight ?? 0) - (b.weight ?? 0))
     }
 
-    sanitizeIcon (icon: string): any {
-        return this.domSanitizer.bypassSecurityTrustHtml(icon || '')
+    sanitizeIcon (icon?: string): any {
+        return this.domSanitizer.bypassSecurityTrustHtml(icon ?? '')
     }
 }

terminus-core/src/components/tabBody.component.scss

@@ -1,15 +1,11 @@
 :host {
-    display: none;
+    display: flex;
     flex: auto;
     position: relative;
     overflow: hidden;
 
-    &.active {
-        display: flex;
-
-        >* {
-            flex: auto;
-        }
+    >* {
+        flex: auto;
     }
 
     > perfect-scrollbar {

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

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { Component, Input, ViewChild, HostBinding, ViewContainerRef, OnChanges } from '@angular/core'
 import { BaseTabComponent } from '../components/baseTab.component'
 

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

@@ -1,7 +1,10 @@
+.colorbar([style.background-color]='tab.color', *ngIf='tab.color != null')
 .progressbar([style.width]='progress + "%"', *ngIf='progress != null')
-.index(
-    #handle,
-    [style.background-color]='tab.color',
-) {{index + 1}}
-.name([title]='tab.customTitle || tab.title') {{tab.customTitle || tab.title}}
-button((click)='app.closeTab(tab, true)') ×
+.activity-indicator(*ngIf='tab.activity$|async')
+
+.index(*ngIf='!config.store.terminal.hideTabIndex', #handle) {{index + 1}}
+.name(
+    [title]='tab.customTitle || tab.title',
+    [class.no-hover]='config.store.terminal.hideCloseButton'
+) {{tab.customTitle || tab.title}}
+button(*ngIf='!config.store.terminal.hideCloseButton',(click)='app.closeTab(tab, true)') ×

terminus-core/src/components/tabHeader.component.scss

@@ -4,8 +4,16 @@ $tabs-height: 38px;
     position: relative;
     cursor: pointer;
 
+    > * { cursor: pointer; }
+
     flex: 1000 1 200px;
     width: 200px;
+    padding: 0 10px;
+
+    &.flex-width {
+        flex: 1000 1 auto;
+        width: auto;
+    }
 
     display: flex;
     flex-direction: row;
@@ -13,14 +21,18 @@ $tabs-height: 38px;
 
     overflow: hidden;
 
+    &.vertical {
+      flex: none;
+      height: $tabs-height;
+    }
+
     .index {
         flex: none;
         font-weight: bold;
         -webkit-app-region: no-drag;
         cursor: -webkit-grab;
 
-        margin-left: 10px;
-        width: 20px;
+        width: 22px;
         border-radius: 10px;
         text-align: center;
         transition: 0.25s all;
@@ -29,7 +41,7 @@ $tabs-height: 38px;
 
     .name {
         flex: auto;
-        margin: 0 1px 0 10px;
+        margin-top: 1px;
         overflow: hidden;
         white-space: nowrap;
         text-overflow: ellipsis;
@@ -37,6 +49,10 @@ $tabs-height: 38px;
         align-self: center;
     }
 
+    .index + .name {
+        margin-left: 10px;
+    }
+
     button {
         display: block;
         flex: none;
@@ -44,13 +60,15 @@ $tabs-height: 38px;
         opacity: 0;
         -webkit-app-region: no-drag;
 
+        position: absolute;
+        right: 0;
+
         $button-size: 26px;
         width: $button-size;
         height: $button-size;
-        border-radius: $button-size / 2;
-        line-height: $button-size * 0.9;
+        border-radius: $button-size / 6;
+        line-height: $button-size;
         align-self: center;
-        margin-right: 10px;
 
         text-align: center;
         font-size: 20px;
@@ -60,6 +78,13 @@ $tabs-height: 38px;
         }
     }
 
+    &:hover .name:not(.no-hover) {
+        -webkit-mask-image: linear-gradient(black 0 0), linear-gradient(to left, transparent 0%, black 100%);
+        -webkit-mask-size: calc(100% - 60px) auto, 60px auto;
+        -webkit-mask-repeat: no-repeat;
+        -webkit-mask-position: left, right;
+    }
+
     &:hover button {
         transition: 0.25s opacity;
         display: block;
@@ -78,8 +103,30 @@ $tabs-height: 38px;
         position: absolute;
         left: 0;
         top: 0;
-        height: 5px;
-        z-index: -1;
+        height: 3px;
+        z-index: 1;
         transition: 0.25s width;
     }
+
+    .colorbar {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 3px;
+        width: 100%;
+        z-index: 1;
+    }
+
+    &.active .activity-indicator {
+        display: none;
+    }
+
+    .activity-indicator {
+        position: absolute;
+        left: 10px;
+        right: 10px;
+        bottom: 4px;
+        height: 2px;
+        z-index: -1;
+    }
 }

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

@@ -1,4 +1,6 @@
-import { Component, Input, Optional, Inject, HostBinding, HostListener, ViewChild, ElementRef } from '@angular/core'
+/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import type { MenuItemConstructorOptions } from 'electron'
+import { Component, Input, Optional, Inject, HostBinding, HostListener, ViewChild, ElementRef, NgZone } from '@angular/core'
 import { SortableComponent } from 'ng2-dnd'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { TabContextMenuItemProvider } from '../api/tabContextMenuProvider'
@@ -8,10 +10,12 @@ import { HotkeysService } from '../services/hotkeys.service'
 import { ElectronService } from '../services/electron.service'
 import { AppService } from '../services/app.service'
 import { HostAppService, Platform } from '../services/hostApp.service'
+import { ConfigService } from '../services/config.service'
+import { BaseComponent } from './base.component'
 
 /** @hidden */
 export interface SortableComponentProxy {
-    setDragHandle (_: HTMLElement)
+    setDragHandle: (_: HTMLElement) => void
 }
 
 /** @hidden */
@@ -20,24 +24,26 @@ export interface SortableComponentProxy {
     template: require('./tabHeader.component.pug'),
     styles: [require('./tabHeader.component.scss')],
 })
-export class TabHeaderComponent {
+export class TabHeaderComponent extends BaseComponent {
     @Input() index: number
     @Input() @HostBinding('class.active') active: boolean
-    @Input() @HostBinding('class.has-activity') hasActivity: boolean
     @Input() tab: BaseTabComponent
     @Input() progress: number|null
-    @ViewChild('handle') handle: ElementRef
+    @ViewChild('handle') handle?: ElementRef
 
     private constructor (
         public app: AppService,
+        public config: ConfigService,
         private electron: ElectronService,
         private hostApp: HostAppService,
         private ngbModal: NgbModal,
         private hotkeys: HotkeysService,
+        private zone: NgZone,
         @Inject(SortableComponent) private parentDraggable: SortableComponentProxy,
         @Optional() @Inject(TabContextMenuItemProvider) protected contextMenuProviders: TabContextMenuItemProvider[],
     ) {
-        this.hotkeys.matchedHotkey.subscribe((hotkey) => {
+        super()
+        this.subscribeUntilDestroyed(this.hotkeys.matchedHotkey, (hotkey) => {
             if (this.app.activeTab === this.tab) {
                 if (hotkey === 'rename-tab') {
                     this.showRenameTabModal()
@@ -48,12 +54,17 @@ export class TabHeaderComponent {
     }
 
     ngOnInit () {
-        if (this.hostApp.platform === Platform.macOS) {
+        this.subscribeUntilDestroyed(this.tab.progress$, progress => {
+            this.zone.run(() => {
+                this.progress = progress
+            })
+        })
+    }
+
+    ngAfterViewInit () {
+        if (this.handle && this.hostApp.platform === Platform.macOS) {
             this.parentDraggable.setDragHandle(this.handle.nativeElement)
         }
-        this.tab.progress$.subscribe(progress => {
-            this.progress = progress
-        })
     }
 
     showRenameTabModal (): void {
@@ -65,8 +76,8 @@ export class TabHeaderComponent {
         }).catch(() => null)
     }
 
-    async buildContextMenu (): Promise<Electron.MenuItemConstructorOptions[]> {
-        let items: Electron.MenuItemConstructorOptions[] = []
+    async buildContextMenu (): Promise<MenuItemConstructorOptions[]> {
+        let items: MenuItemConstructorOptions[] = []
         for (const section of await Promise.all(this.contextMenuProviders.map(x => x.getItems(this.tab, this)))) {
             items.push({ type: 'separator' })
             items = items.concat(section)
@@ -74,6 +85,10 @@ export class TabHeaderComponent {
         return items.slice(1)
     }
 
+    @HostBinding('class.flex-width') get isFlexWidthEnabled (): boolean {
+        return this.config.store.appearance.flexTabs
+    }
+
     @HostListener('dblclick') onDoubleClick (): void {
         this.showRenameTabModal()
     }
@@ -94,7 +109,7 @@ export class TabHeaderComponent {
         if ($event.which === 3) {
             $event.preventDefault()
 
-            const contextMenu = this.electron.remote.Menu.buildFromTemplate(await this.buildContextMenu())
+            const contextMenu = this.electron.Menu.buildFromTemplate(await this.buildContextMenu())
 
             contextMenu.popup({
                 x: $event.pageX,

terminus-core/src/components/toggle.component.scss

@@ -3,7 +3,6 @@
     $toggle-size: 18px;
     $height: 30px;
     $padding: 2px;
-    cursor: pointer;
     display: inline-flex;
     overflow: visible;
     border-radius: 3px;
@@ -16,55 +15,11 @@
     padding-left: 10px;
     margin-left: -10px;
 
-    &:focus {
-        background: rgba(255,255,255,.05);
-        border-radius: 5px;
-    }
-
-    &[disabled] {
+    &.disabled {
         opacity: 0.5;
     }
 
-    .body {
-        $border-width: 2px;
-        border-radius: 5px;
-        border: $border-width solid rgba(255, 255, 255, .2);
-        padding: $padding;
-        height: $toggle-size + $border-width * 2 + $padding * 2;
-        width: $toggle-size * 2 + $border-width * 2 + $padding * 2;
-
-        position: relative;
-
-        .toggle {
-            position: absolute;
-            border-radius: 2px;
-            width: $toggle-size;
-            height: $toggle-size;
-            background: #475158;
-            top: $padding;
-            left: $padding;
-            transition: 0.25s left;
-            line-height: 19px;
-            text-align: center;
-            font-size: 10px;
-
-            i {
-                opacity: 0;
-                transition: 0.25s opacity;
-            }
-        }
-    }
-
-    &.active .body .toggle {
-        left: $toggle-size + $padding;
-
-        i {
-            color: white;
-            opacity: 1;
-        }
-    }
-
-    &:active {
-        background: rgba(255,255,255,.1);
+    * {
+        cursor: pointer;
     }
 }

terminus-core/src/components/toggle.component.ts

@@ -6,13 +6,10 @@ import { CheckboxComponent } from './checkbox.component'
 @Component({
     selector: 'toggle',
     template: `
-      <div class="switch">
-        <div class="body">
-          <div class="toggle" [class.bg-primary]='model'>
-            <i class="fa fa-check"></i>
-          </div>
-        </div>
-      </div>
+    <div class="custom-control custom-switch">
+      <input type="checkbox" class="custom-control-input" [(ngModel)]='model'>
+      <label class="custom-control-label"></label>
+    </div>
     `,
     styles: [require('./toggle.component.scss')],
     providers: [

terminus-core/src/components/welcomeTab.component.pug

@@ -1,19 +1,36 @@
-.mb-4
-    .terminus-logo
-    h1.terminus-title Terminus
-        sup α 
+.container.mt-5.mb-5
+    .mb-4
+        .terminus-logo
+        h1.terminus-title Terminus
+            sup α
 
-.container
     .text-center.mb-5 Thank you for downloading Terminus!
 
     .form-line
         .header
             .title Enable analytics
-            .description Help us track the number of Terminus installs across the world!
-        toggle(
-            [(ngModel)]='config.store.enableAnalytics',
-            (ngModelChange)='config.save(); config.requestRestart()',
-        )
+            .description Help track the number of Terminus installs across the world!
+        toggle([(ngModel)]='config.store.enableAnalytics')
+
+
+    .form-line
+        .header
+            .title Enable global hotkey (#[strong Ctrl-Space])
+            .description Toggles the Terminus window visibility
+        toggle([(ngModel)]='enableGlobalHotkey')
+
+    .form-line
+        .header
+            .title Enable #[strong SSH] plugin
+            .description Adds an SSH connection manager UI to Terminus
+        toggle([(ngModel)]='enableSSH')
+
+    .form-line
+        .header
+            .title Enable #[strong Serial] plugin
+            .description Allows attaching Terminus to serial ports
+        toggle([(ngModel)]='enableSerial')
+
 
     .text-center.mt-5
         button.btn.btn-primary((click)='closeAndDisable()') Close and never show again