Adding Tab Location "left"

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

@@ -3,12 +3,45 @@ title-bar(
   [class.inset]='hostApp.platform == Platform.macOS'
 )
 
-.content(
+.wrap
-    [class.tabs-on-top]='config.store.appearance.tabsLocation == "top"'
+  .tab-bar.vertical(
-)
+    *ngIf='config.store.appearance.tabsLocation == "left"'
+  )
+      .inset.background(*ngIf='hostApp.platform == Platform.macOS \
+        && config.store.appearance.frame == "thin"')
+      .tabs.vertical(
+          dnd-sortable-container,
+          [sortableData]='app.tabs',
+      )
+          tab-header(
+              *ngFor='let tab of app.tabs; let idx = index',
+              dnd-sortable,
+              [sortableIndex]='idx',
+              (onDragStart)='onTabDragStart()',
+              (onDragEnd)='onTabDragEnd()',
+
+              [index]='idx',
+              [tab]='tab',
+              [active]='tab == app.activeTab',
+              [hasActivity]='tab.activity$|async',
+              @animateTab,
+              (click)='app.selectTab(tab)',
+              [class.fully-draggable]='hostApp.platform != Platform.macOS',
+              [class.drag-region]='hostApp.platform == Platform.macOS && !tabsDragging',
+              [class.vertical]='true',
+          )
+
+
+  .content(
+      [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
+      [class.with-side-tab]='config.store.appearance.tabsLocation == "left"',
+  )
       .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 \
+            && config.store.appearance.frame == "thin" \
+            && (config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left")')
           .tabs(
+              *ngIf='config.store.appearance.tabsLocation != "left"'
               dnd-sortable-container,
               [sortableData]='app.tabs',
           )
@@ -87,7 +120,8 @@ title-bar(
               )
 
           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')

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

@@ -15,10 +15,18 @@
 
 $tabs-height: 38px;
 $tab-border-radius: 4px;
+$side-tab-width: 200px;
 
+.wrap {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  flex-direction: row;
+}
 
 .content {
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
     flex: auto;
     display: flex;
     flex-direction: column-reverse;
@@ -26,12 +34,24 @@ $tab-border-radius: 4px;
     &.tabs-on-top {
         flex-direction: column;
     }
+
+    &.with-side-tab {
+        width: calc(100% - #{$side-tab-width});
+    }
+
 }
 
 .tab-bar {
     flex: none;
     height: $tabs-height;
     display: flex;
+    width: 100%;
+    &.vertical {
+        height: 100%;
+        width: $side-tab-width;
+        overflow-y: auto;
+        overflow-x: hidden;
+    }
 
     .btn-tab-bar {
         line-height: $tabs-height + 2px;
@@ -59,6 +79,12 @@ $tab-border-radius: 4px;
         flex: 0 1 auto;
         display: flex;
         min-width: 0;
+
+        &.vertical {
+          width: $side-tab-width;
+          flex: auto;
+          flex-direction: column;
+        }
     }
 
     &>.drag-space {

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

@@ -13,6 +13,11 @@ $tabs-height: 38px;
 
     overflow: hidden;
 
+    &.vertical {
+      flex: none;
+      height: $tabs-height;
+    }
+
     .index {
         flex: none;
         font-weight: bold;

terminus-settings/src/components/settingsTab.component.pug

@@ -51,6 +51,13 @@ ngb-tabset.vertical(type='pills', [activeId]='activeTab')
                             [value]='"bottom"'
                         )
                         | At the bottom
+                    label.btn.btn-secondary(ngbButtonLabel)
+                        input(
+                            type='radio',
+                            ngbButton,
+                            [value]='"left"'
+                        )
+                        | At the left
 
             .form-line
                 .header

terminus-settings/src/components/settingsTab.component.ts

@@ -65,7 +65,7 @@ export class SettingsTabComponent extends BaseTabComponent {
         const onConfigChange = () => {
             this.configFile = config.readRaw()
             this.padWindowControls = hostApp.platform === Platform.macOS
-                && config.store.appearance.tabsLocation === 'bottom'
+                && config.store.appearance.tabsLocation !== 'top'
         }
 
         this.configSubscription = config.changed$.subscribe(onConfigChange)

terminus-ssh/package.json

@@ -10,7 +10,7 @@
   "scripts": {
     "build": "webpack --progress --color",
     "watch": "webpack --progress --color --watch",
-    "postinstall": "xcopy /i node_modules\\ssh2\\util\\pagent.exe util\\"
+    "postinstall": "xcopy /i /y node_modules\\ssh2\\util\\pagent.exe util\\"
   },
   "files": [
     "dist",

terminus-terminal/src/api/baseTerminalTab.component.ts

@@ -348,7 +348,7 @@ export class BaseTerminalTabComponent extends BaseTabComponent implements OnInit
 
         this.topPadded = this.hostApp.platform === Platform.macOS
             && this.config.store.appearance.frame === 'thin'
-            && this.config.store.appearance.tabsLocation === 'bottom'
+            && this.config.store.appearance.tabsLocation !== 'top'
 
         if (this.config.store.terminal.background === 'colorScheme') {
             if (this.config.store.terminal.colorScheme.background) {