Feat: implement window controls overlay

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

@@ -1,16 +1,20 @@
 title-bar(
   *ngIf='ready && !hostWindow.isFullscreen && config.store.appearance.frame == "full" && config.store.appearance.dock == "off"',
   (dblclick)='hostWindow.toggleMaximize()',
+  [class.hide-controls]='hostApp.platform !== Platform.Linux && !hostWindow.isFullscreen',
   [class.inset]='hostApp.platform == Platform.macOS && !hostWindow.isFullscreen'
 )
 
 .content(
     *ngIf='ready',
     [class.tabs-on-top]='config.store.appearance.tabsLocation == "top" || config.store.appearance.tabsLocation == "left"',
-    [class.tabs-on-side]='hasVerticalTabs()',
+    [class.tabs-on-left]='hasVerticalTabs() && config.store.appearance.tabsLocation == "left"',
+    [class.tabs-titlebar-enabled]='config.store.appearance.frame == "full"',
+    [class.tabs-on-right]='hasVerticalTabs() && config.store.appearance.tabsLocation == "right"',
 )
     .tab-bar(
         *ngIf='!hostWindow.isFullscreen || config.store.appearance.tabsInFullscreen',
+        [class.tab-bar-no-controls-overlay]='hostApp.platform == Platform.macOS',
         (dblclick)='hostWindow.toggleMaximize()'
     )
         .inset.background(*ngIf='hostApp.platform == Platform.macOS \
@@ -81,7 +85,7 @@ title-bar(
 
         window-controls.background(
             *ngIf='config.store.appearance.frame == "thin" \
-            && (hostApp.platform == Platform.Windows || hostApp.platform == Platform.Linux)',
+            && (hostApp.platform == Platform.Linux)',
         )
 
     .content

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

@@ -35,17 +35,16 @@ $tab-border-radius: 4px;
         flex-direction: column;
     }
 
-    &.tabs-on-side {
+    &.tabs-on-right {
         flex-direction: row-reverse;
-
-        &.tabs-on-top {
-            flex-direction: row;
-        }
     }
 
+    &.tabs-on-left {
+        flex-direction: row;
+    }
 }
 
-.content.tabs-on-side > .tab-bar {
+.content.tabs-on-left > .tab-bar, .content.tabs-on-right > .tab-bar {
     height: 100%;
     width: var(--side-tab-width);
     overflow-y: auto;
@@ -76,6 +75,18 @@ $tab-border-radius: 4px;
     }
 }
 
+.content.tabs-on-left > .tab-bar.tab-bar-no-controls-overlay, .content.tabs-titlebar-enabled {
+    .tabs {
+        padding-top: 0 !important;
+    }
+}
+
+.content.tabs-on-right > .tab-bar {
+    .tabs {
+        // Account for WCO on Windows.
+        padding-top: 36px;
+    }
+}
 
 .tab-bar {
     flex: none;
@@ -125,7 +136,9 @@ $tab-border-radius: 4px;
         }
 
         &.persistent {
-          min-width: 72px; // 2 x 36 px height, ie 2 squares
+        //   min-width: 72px; // 2 x 36 px height, ie 2 squares
+        // Given WCO on Windows, the min-width of the window buttons is about 138px.
+            min-width: 138px;
         }
     }
 

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

@@ -23,4 +23,11 @@ $titlebar-height: 30px;
             display: none;
         }
     }
+
+    // Account for WCO on Windows.
+    &.hide-controls {
+        window-controls {
+            display: none;
+        }
+    }
  }