Revert "removed titlebar"

This reverts commit c18936f6e50198f801a50d11822c6671ce57827a.

app/src/components/app.less

@@ -13,6 +13,7 @@
     background: @body-bg;
 }
 
+@titlebar-height: 35px;
 @tabs-height: 40px;
 @tab-border-radius: 4px;
 
@@ -28,6 +29,35 @@
     }
 }
 
+.titlebar {
+    height: @titlebar-height;
+    background: #141c23;
+    flex: none;
+    display: flex;
+    flex-direction: row;
+
+    .title {
+        flex: auto;
+        padding-left: 15px;
+        line-height: @titlebar-height;
+        -webkit-app-region: drag;
+    }
+
+    .btn-minimize, .btn-maximize, .btn-close {
+        flex: none;
+        line-height: @titlebar-height - 2px;
+        padding: 0 15px;
+        font-size: 8px;
+
+        .button-states();
+        cursor: pointer;
+    }
+
+    .btn-close {
+        font-size: 12px;
+    }
+}
+
 .tabs {
     flex: none;
     height: @tabs-height;
@@ -36,29 +66,28 @@
     display: flex;
     flex-direction: row;
 
-    &>button {
+    .btn-settings, .btn-new-tab, .tab {
-        border: none;
+        line-height: @tabs-height - 2px;
-        flex: none;
+        cursor: pointer;
-        line-height: @tabs-height;
+    }
+
+    .btn-new-tab, .btn-settings {
         padding: 0 15px;
-        font-size: 8px;
+        flex: none;
+        flex-grow: 0;
+        border-bottom: 2px solid transparent;
+        transition: 0.25s all;
+
+        text-transform: uppercase;
+        font-weight: bold;
+        color: #888;
         background: #141c23;
 
+        i {
+            margin-right: 10px;
+        }
+
         .button-states();
-        cursor: pointer;
-
-        &.btn-close {
-            font-size: 12px;
-        }
-
-        &.btn-new-tab {
-            border-bottom-left-radius: @tab-border-radius;
-            font-size: 14px;
-        }
-
-        &.btn-settings {
-            font-size: 14px;
-        }
     }
 
     .tab {
@@ -66,12 +95,6 @@
         flex-basis: 0;
         flex-grow: 1000;
 
-        &:active {
-            -webkit-app-region: drag;
-        }
-
-        line-height: @tabs-height - 2px;
-
         display: flex;
         overflow: hidden;
         min-width: 0;
@@ -157,6 +180,8 @@
             .content-wrapper {
                 //border-bottom: 2px solid #69bbea;
                 background: @body-bg;
+                border-top-left-radius: @tab-border-radius;
+                border-top-right-radius: @tab-border-radius;
             }
         }
     }

app/src/components/app.pug

@@ -1,3 +1,12 @@
+.titlebar
+    .title((dblclick)='hostApp.maximizeWindow()') Term
+    .btn-minimize((click)='hostApp.minimizeWindow()')
+        i.fa.fa-window-minimize
+    .btn-maximize((click)='hostApp.maximizeWindow()')
+        i.fa.fa-window-maximize
+    .btn-close((click)='hostApp.quit()')
+        i.fa.fa-close
+
 .tabs
     .tab(
         *ngFor='let tab of tabs; let idx = index; trackBy: tab?.id',
@@ -11,16 +20,11 @@
             div.index {{idx + 1}}
             div.name {{tab.name || 'Terminal'}}
             button((click)='closeTab(tab)') ×
-    button.btn-new-tab((click)='newTab()')
+    .btn-new-tab((click)='newTab()')
         i.fa.fa-plus
-    button.btn-settings((click)='showSettings()')
+        span Tab
+    .btn-settings((click)='showSettings()')
         i.fa.fa-cog
-    button.btn-minimize((click)='hostApp.minimizeWindow()')
-        i.fa.fa-window-minimize
-    button.btn-maximize((click)='hostApp.maximizeWindow()')
-        i.fa.fa-window-maximize
-    button.btn-close((click)='hostApp.quit()')
-        i.fa.fa-close
 
 .tabs-content
     .tab(*ngFor='let tab of tabs; trackBy: tab?.id', [class.active]='tab == activeTab')