.

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

@@ -1,21 +1,12 @@
-title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"')
+//title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appearance.dock == "off"')
 
 .content(
     [class.tabs-on-top]='config.store.appearance.tabsOnTop'    
 )
     .tab-bar(*ngIf='app.tabs.length > 0')
-        button.btn.btn-secondary(
-            *ngFor='let button of getLeftToolbarButtons()',
-            [title]='button.title',
-            (click)='button.click()',
-        )
-            i.fa([class]='"fa fa-" + button.icon')
-                
         .tabs
             tab-header(
                 *ngFor='let tab of app.tabs; let idx = index',
-                [class.pre-selected]='idx == app.tabs.indexOf(app.activeTab) - 1',
-                [class.post-selected]='idx == app.tabs.indexOf(app.activeTab) + 1',
                 [index]='idx',
                 [tab]='tab',
                 [active]='tab == app.activeTab',
@@ -25,6 +16,15 @@ title-bar(*ngIf='!config.store.appearance.useNativeFrame && config.store.appeara
                 (closeClicked)='app.closeTab(tab)',
             )
         
+        button.btn.btn-secondary(
+            *ngFor='let button of getLeftToolbarButtons()',
+            [title]='button.title',
+            (click)='button.click()',
+        )
+            i.fa([class]='"fa fa-" + button.icon')
+                
+        .drag-space
+
         button.btn.btn-secondary(
             *ngFor='let button of getRightToolbarButtons()',
             [title]='button.title',

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

@@ -47,8 +47,15 @@ $tab-border-radius: 4px;
     }
 
     &>.tabs {
-        flex: auto;
+        flex: 0 1 auto;
         display: flex;
+        min-width: 0;
+    }
+
+    &>.drag-space {
+        min-width: 100px;
+        flex: 1 0 25%;
+        -webkit-app-region: drag;
     }
 }
 

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

@@ -23,16 +23,19 @@ import { AppService, IToolbarButton, ToolbarButtonProvider } from '../api'
         trigger('animateTab', [
             state('in', style({
                 'flex-grow': '1000',
+                'flex-basis': '200px',
             })),
             transition(':enter', [
                 style({
                     'flex-grow': '1',
+                    'flex-basis': '1px',
                 }),
                 animate('250ms ease-in-out')
             ]),
             transition(':leave', [
                 animate('250ms ease-in-out', style({
                     'flex-grow': '1',
+                    'flex-basis': '1px',
                 }))
             ])
         ])

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

@@ -1,4 +1,3 @@
-.wrapper
-    .index {{index + 1}}
-    .name {{(tab.title$ || "Terminal") | async}}
-    button((click)='closeClicked.emit()') ×
+.index {{index + 1}}
+.name {{(tab.title$ || "Terminal") | async}}
+button((click)='closeClicked.emit()') ×

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

@@ -4,22 +4,17 @@ $tabs-height: 40px;
     line-height: $tabs-height - 2px;
     cursor: pointer;
 
-    flex: auto;
-    flex-basis: 0;
-    flex-grow: 1000;
+    flex: 1000 1 200px;
+    width: 200px;
 
-    display: flex;
-    overflow: hidden;
-
-    min-width: 0;
-    transition: 0.25s ease-out all;
-
-    .wrapper {
     display: flex;
     flex-direction: row;
-        flex: auto;
     min-width: 0;
-        transition: 0.25s all;
+
+    overflow: hidden;
+
+    transition: 0.25s ease-out all;
+
     border-top: 1px solid transparent;
 
     .index {
@@ -66,5 +61,4 @@ $tabs-height: 40px;
         display: block;
         opacity: 1;
     }
-    }
 }

terminus-core/src/theme.scss

@@ -98,15 +98,16 @@ app-root  {
                 }
             }
 
+            .drag-space {
+                background: $body-bg2;
+            }
+
             &>.tabs {
                 &:empty {
                     background: $body-bg2;
                 }
 
                 tab-header {
-                    background: $body-bg;
-
-                    .wrapper {
                     background: $body-bg2;
 
                     .index {
@@ -121,52 +122,23 @@ app-root  {
                         &:hover { background: $button-hover-bg !important; }
                         &:active { background: $button-active-bg !important; }
                     }
-                    }
 
                     &.active {
-                        background: $body-bg2;
-
-                        .wrapper {
                         background: $body-bg;
                     }
                 }
-
-                    &.has-activity:not(.active) {
-                        /*
-                        .wrapper .index {
-                            background: $blue;
-                            color: white;
-                            text-shadow: 0 1px 1px rgba(0,0,0,.95);
-                        }
-                        */
-                    }
-                }
             }
         }
 
         &.tabs-on-top .tab-bar {
-            margin-top: 5px;
-
             tab-header {
-                .wrapper {
                 border-top: 1px solid transparent;
-                    border-top-left-radius: $tab-border-radius;
-                    border-top-right-radius: $tab-border-radius;
-                }
 
-                &.pre-selected .wrapper {
-                    border-bottom-right-radius: $tab-border-radius;
-                }
-
-                &.post-selected .wrapper {
-                    border-bottom-left-radius: $tab-border-radius;
-                }
-
-                &.active .wrapper {
+                &.active {
                     border-top: 1px solid $teal;
                 }
 
-                &.has-activity:not(.active) .wrapper {
+                &.has-activity:not(.active) {
                     border-top: 1px solid $green;
                 }
             }
@@ -176,25 +148,13 @@ app-root  {
             margin-bottom: 3px;
 
             tab-header {
-                .wrapper {
                 border-bottom: 1px solid transparent;
-                    border-bottom-left-radius: $tab-border-radius;
-                    border-bottom-right-radius: $tab-border-radius;
-                }
 
-                &.pre-selected .wrapper {
-                    border-top-right-radius: $tab-border-radius;
-                }
-
-                &.post-selected .wrapper {
-                    border-top-left-radius: $tab-border-radius;
-                }
-
-                &.active .wrapper {
+                &.active {
                     border-bottom: 1px solid $teal;
                 }
 
-                &.has-activity:not(.active) .wrapper {
+                &.has-activity:not(.active) {
                     border-bottom: 1px solid $green;
                 }
             }

terminus-terminal/src/components/terminalSettingsTab.component.ts

@@ -45,7 +45,7 @@ export class TerminalSettingsTabComponent {
         }
         if (this.hostApp.platform == Platform.Linux) {
             exec('fc-list :spacing=mono').then(([stdout, _]) => {
-                this.fonts = stdout
+                this.fonts = stdout.toString()
                     .split('\n')
                     .filter(x => !!x)
                     .map(x => x.split(':')[1].trim())

webpack.config.js

@@ -5,5 +5,6 @@ module.exports = [
   require('./terminus-terminal/webpack.config.js'),
   require('./terminus-clickable-links/webpack.config.js'),
   require('./terminus-community-color-schemes/webpack.config.js'),
+  require('./terminus-plugin-manager/webpack.config.js'),
   require('./terminus-theme-hype/webpack.config.js'),
 ]