From 2265ecc97917b58e84f2cbf6dcf0ef00284e9df6 Mon Sep 17 00:00:00 2001
From: Samuel Imolorhe <samuelimolo4real@gmail.com>
Date: Sun, 3 Dec 2023 20:01:27 +0100
Subject: [PATCH 1/2] Added setting to enable scrollbar in tab list

---
 .../components/header/header.component.html   |   3 +-
 .../components/header/header.component.ts     |   3 +-
 .../window-switcher.component.html            |   1 +
 .../window-switcher.component.ts              |   6 +
 .../containers/altair/altair.component.html   |   2 +-
 .../modules/altair/utils/settings.schema.json |   4 +
 .../altair/utils/validate_settings_schema.js  | 300 ++++++++++--------
 .../src/scss/components/_window-switcher.scss |  12 +-
 .../src/types/state/settings.interfaces.ts    |   5 +
 9 files changed, 190 insertions(+), 146 deletions(-)

diff --git a/packages/altair-app/src/app/modules/altair/components/header/header.component.html b/packages/altair-app/src/app/modules/altair/components/header/header.component.html
index 01eb626dd4..d7c12ac7e7 100644
--- a/packages/altair-app/src/app/modules/altair/components/header/header.component.html
+++ b/packages/altair-app/src/app/modules/altair/components/header/header.component.html
@@ -1,6 +1,6 @@
 <div
   class="header__logo-wrapper"
-  [ngClass]="{ 'header__logo-wrapper--experimental': experimentalEnabled }"
+  [ngClass]="{ 'header__logo-wrapper--experimental': settings?.enableExperimental}"
 >
   <img src="assets/img/altair_logo.svg" alt="logo" class="header__logo" />
 </div>
@@ -11,6 +11,7 @@
   [activeWindowId]="activeWindowId"
   [closedWindows]="closedWindows"
   [isElectron]="isElectron"
+  [enableScrollbar]="settings?.enableTablistScrollbar"
   (newWindowChange)="newWindowChange.emit($event)"
   (activeWindowChange)="activeWindowChange.emit($event)"
   (removeWindowChange)="removeWindowChange.emit($event)"
diff --git a/packages/altair-app/src/app/modules/altair/components/header/header.component.ts b/packages/altair-app/src/app/modules/altair/components/header/header.component.ts
index 66391a5c8d..37d50c4381 100644
--- a/packages/altair-app/src/app/modules/altair/components/header/header.component.ts
+++ b/packages/altair-app/src/app/modules/altair/components/header/header.component.ts
@@ -5,6 +5,7 @@ import {
   EnvironmentState,
 } from 'altair-graphql-core/build/types/state/environments.interfaces';
 import { PerWindowState } from 'altair-graphql-core/build/types/state/per-window.interfaces';
+import { SettingsState } from 'altair-graphql-core/build/types/state/settings.interfaces';
 import { WindowState } from 'altair-graphql-core/build/types/state/window.interfaces';
 import { externalLink } from '../../utils';
 
@@ -14,7 +15,6 @@ import { externalLink } from '../../utils';
   styles: [],
 })
 export class HeaderComponent {
-  @Input() experimentalEnabled = false;
   @Input() windows: WindowState = {};
   @Input() windowIds: string[] = [];
   @Input() closedWindows: PerWindowState[] = [];
@@ -23,6 +23,7 @@ export class HeaderComponent {
   @Input() headerPanels: AltairPanel[] = [];
   @Input() activeEnvironment?: EnvironmentState;
   @Input() environments?: EnvironmentsState;
+  @Input() settings?: SettingsState;
   @Output() activeWindowChange = new EventEmitter<string>();
   @Output() newWindowChange = new EventEmitter();
   @Output() removeWindowChange = new EventEmitter<string>();
diff --git a/packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.html b/packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.html
index 4f220f4d86..ee6c06f396 100644
--- a/packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.html
+++ b/packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.html
@@ -2,6 +2,7 @@
   sortablejs
   [sortablejsOptions]="sortableOptions"
   class="window-switcher__list"
+  [ngClass]="{'window-switcher__no-scrollbar': !enableScrollbar}"
 >
   <li
     class="window-switcher__item"
diff --git a/packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts b/packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts
index 471f2ede90..289224b44d 100644
--- a/packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts
+++ b/packages/altair-app/src/app/modules/altair/components/window-switcher/window-switcher.component.ts
@@ -5,6 +5,7 @@ import {
   Output,
   EventEmitter,
   ViewChild,
+  HostBinding,
 } from '@angular/core';
 import { AltairConfig } from 'altair-graphql-core/build/config';
 import { PerWindowState } from 'altair-graphql-core/build/types/state/per-window.interfaces';
@@ -26,6 +27,7 @@ export class WindowSwitcherComponent implements OnInit {
   @Input() closedWindows: PerWindowState[] = [];
   @Input() activeWindowId = '';
   @Input() isElectron = false;
+  @Input() enableScrollbar = false;
   @Output() activeWindowChange = new EventEmitter();
   @Output() newWindowChange = new EventEmitter();
   @Output() removeWindowChange = new EventEmitter();
@@ -34,6 +36,10 @@ export class WindowSwitcherComponent implements OnInit {
   @Output() repositionWindowChange = new EventEmitter();
   @Output() reopenClosedWindowChange = new EventEmitter();
 
+  @HostBinding('class.window-switcher__no-scrollbar') get noScrollbar() {
+    return !this.enableScrollbar;
+  }
+
   @ViewChild(ContextMenuComponent, { static: true })
   public windowTabMenu?: ContextMenuComponent;
 
diff --git a/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html b/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html
index 56207702d8..c2b8ac080c 100644
--- a/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html
+++ b/packages/altair-app/src/app/modules/altair/containers/altair/altair.component.html
@@ -19,7 +19,6 @@
       </div>
     </div>
     <app-header
-      [experimentalEnabled]="(settings$ | async)?.enableExperimental"
       [windows]="windows"
       [windowIds]="windowIds"
       [activeWindowId]="activeWindowId"
@@ -28,6 +27,7 @@
       [headerPanels]="headerPanels$ | async"
       [activeEnvironment]="activeEnvironment$ | async"
       [environments]="environments$ | async"
+      [settings]="settings$ | async"
       (newWindowChange)="newWindow()"
       (activeWindowChange)="setActiveWindow($event)"
       (removeWindowChange)="removeWindow($event)"
diff --git a/packages/altair-app/src/app/modules/altair/utils/settings.schema.json b/packages/altair-app/src/app/modules/altair/utils/settings.schema.json
index d3e7a6b9b9..6099e65da8 100644
--- a/packages/altair-app/src/app/modules/altair/utils/settings.schema.json
+++ b/packages/altair-app/src/app/modules/altair/utils/settings.schema.json
@@ -63,6 +63,10 @@
             "description": "Enable experimental features.\nNote: Might be unstable",
             "type": "boolean"
         },
+        "enableTablistScrollbar": {
+            "description": "Enable the scrollbar in the tab list",
+            "type": "boolean"
+        },
         "historyDepth": {
             "description": "Number of items allowed in history pane",
             "type": "number"
diff --git a/packages/altair-app/src/app/modules/altair/utils/validate_settings_schema.js b/packages/altair-app/src/app/modules/altair/utils/validate_settings_schema.js
index 35b14e0609..770496a10e 100644
--- a/packages/altair-app/src/app/modules/altair/utils/validate_settings_schema.js
+++ b/packages/altair-app/src/app/modules/altair/utils/validate_settings_schema.js
@@ -195,139 +195,139 @@ var validate = (function() {
                         var valid1 = errors === errs_1;
                       }
                       if (valid1) {
-                        if (data.historyDepth === undefined) {
+                        if (data.enableTablistScrollbar === undefined) {
                           valid1 = true;
                         } else {
                           var errs_1 = errors;
-                          if ((typeof data.historyDepth !== "number")) {
+                          if (typeof data.enableTablistScrollbar !== "boolean") {
                             validate.errors = [{
                               keyword: 'type',
-                              dataPath: (dataPath || '') + '.historyDepth',
-                              schemaPath: '#/properties/historyDepth/type',
+                              dataPath: (dataPath || '') + '.enableTablistScrollbar',
+                              schemaPath: '#/properties/enableTablistScrollbar/type',
                               params: {
-                                type: 'number'
+                                type: 'boolean'
                               },
-                              message: 'should be number'
+                              message: 'should be boolean'
                             }];
                             return false;
                           }
                           var valid1 = errors === errs_1;
                         }
                         if (valid1) {
-                          var data1 = data.language;
-                          if (data1 === undefined) {
+                          if (data.historyDepth === undefined) {
                             valid1 = true;
                           } else {
                             var errs_1 = errors;
-                            var errs_2 = errors;
-                            if (typeof data1 !== "string") {
+                            if ((typeof data.historyDepth !== "number")) {
                               validate.errors = [{
                                 keyword: 'type',
-                                dataPath: (dataPath || '') + '.language',
-                                schemaPath: '#/definitions/SettingsLanguage/type',
+                                dataPath: (dataPath || '') + '.historyDepth',
+                                schemaPath: '#/properties/historyDepth/type',
                                 params: {
-                                  type: 'string'
+                                  type: 'number'
                                 },
-                                message: 'should be string'
+                                message: 'should be number'
                               }];
                               return false;
                             }
-                            var schema2 = refVal2.enum;
-                            var valid2;
-                            valid2 = false;
-                            for (var i2 = 0; i2 < schema2.length; i2++)
-                              if (equal(data1, schema2[i2])) {
-                                valid2 = true;
-                                break;
-                              } if (!valid2) {
-                              validate.errors = [{
-                                keyword: 'enum',
-                                dataPath: (dataPath || '') + '.language',
-                                schemaPath: '#/definitions/SettingsLanguage/enum',
-                                params: {
-                                  allowedValues: schema2
-                                },
-                                message: 'should be equal to one of the allowed values'
-                              }];
-                              return false;
-                            } else {}
-                            if (errors === errs_2) {}
-                            var valid2 = errors === errs_2;
-                            if (valid2) {}
-                            if (errors === errs_1) {}
                             var valid1 = errors === errs_1;
                           }
                           if (valid1) {
-                            var data1 = data['plugin.list'];
+                            var data1 = data.language;
                             if (data1 === undefined) {
                               valid1 = true;
                             } else {
                               var errs_1 = errors;
-                              if (Array.isArray(data1)) {
-                                var errs__1 = errors;
-                                var valid1;
-                                for (var i1 = 0; i1 < data1.length; i1++) {
-                                  var errs_2 = errors;
-                                  if (typeof data1[i1] !== "string") {
-                                    validate.errors = [{
-                                      keyword: 'type',
-                                      dataPath: (dataPath || '') + '[\'plugin.list\'][' + i1 + ']',
-                                      schemaPath: '#/properties/plugin.list/items/type',
-                                      params: {
-                                        type: 'string'
-                                      },
-                                      message: 'should be string'
-                                    }];
-                                    return false;
-                                  }
-                                  var valid2 = errors === errs_2;
-                                  if (!valid2) break;
-                                }
-                                if (errs__1 == errors) {}
-                              } else {
+                              var errs_2 = errors;
+                              if (typeof data1 !== "string") {
                                 validate.errors = [{
                                   keyword: 'type',
-                                  dataPath: (dataPath || '') + '[\'plugin.list\']',
-                                  schemaPath: '#/properties/plugin.list/type',
+                                  dataPath: (dataPath || '') + '.language',
+                                  schemaPath: '#/definitions/SettingsLanguage/type',
                                   params: {
-                                    type: 'array'
+                                    type: 'string'
                                   },
-                                  message: 'should be array'
+                                  message: 'should be string'
                                 }];
                                 return false;
                               }
+                              var schema2 = refVal2.enum;
+                              var valid2;
+                              valid2 = false;
+                              for (var i2 = 0; i2 < schema2.length; i2++)
+                                if (equal(data1, schema2[i2])) {
+                                  valid2 = true;
+                                  break;
+                                } if (!valid2) {
+                                validate.errors = [{
+                                  keyword: 'enum',
+                                  dataPath: (dataPath || '') + '.language',
+                                  schemaPath: '#/definitions/SettingsLanguage/enum',
+                                  params: {
+                                    allowedValues: schema2
+                                  },
+                                  message: 'should be equal to one of the allowed values'
+                                }];
+                                return false;
+                              } else {}
+                              if (errors === errs_2) {}
+                              var valid2 = errors === errs_2;
+                              if (valid2) {}
                               if (errors === errs_1) {}
                               var valid1 = errors === errs_1;
                             }
                             if (valid1) {
-                              if (data['request.withCredentials'] === undefined) {
+                              var data1 = data['plugin.list'];
+                              if (data1 === undefined) {
                                 valid1 = true;
                               } else {
                                 var errs_1 = errors;
-                                if (typeof data['request.withCredentials'] !== "boolean") {
+                                if (Array.isArray(data1)) {
+                                  var errs__1 = errors;
+                                  var valid1;
+                                  for (var i1 = 0; i1 < data1.length; i1++) {
+                                    var errs_2 = errors;
+                                    if (typeof data1[i1] !== "string") {
+                                      validate.errors = [{
+                                        keyword: 'type',
+                                        dataPath: (dataPath || '') + '[\'plugin.list\'][' + i1 + ']',
+                                        schemaPath: '#/properties/plugin.list/items/type',
+                                        params: {
+                                          type: 'string'
+                                        },
+                                        message: 'should be string'
+                                      }];
+                                      return false;
+                                    }
+                                    var valid2 = errors === errs_2;
+                                    if (!valid2) break;
+                                  }
+                                  if (errs__1 == errors) {}
+                                } else {
                                   validate.errors = [{
                                     keyword: 'type',
-                                    dataPath: (dataPath || '') + '[\'request.withCredentials\']',
-                                    schemaPath: '#/properties/request.withCredentials/type',
+                                    dataPath: (dataPath || '') + '[\'plugin.list\']',
+                                    schemaPath: '#/properties/plugin.list/type',
                                     params: {
-                                      type: 'boolean'
+                                      type: 'array'
                                     },
-                                    message: 'should be boolean'
+                                    message: 'should be array'
                                   }];
                                   return false;
                                 }
+                                if (errors === errs_1) {}
                                 var valid1 = errors === errs_1;
                               }
                               if (valid1) {
-                                if (data['response.hideExtensions'] === undefined) {
+                                if (data['request.withCredentials'] === undefined) {
                                   valid1 = true;
                                 } else {
                                   var errs_1 = errors;
-                                  if (typeof data['response.hideExtensions'] !== "boolean") {
+                                  if (typeof data['request.withCredentials'] !== "boolean") {
                                     validate.errors = [{
                                       keyword: 'type',
-                                      dataPath: (dataPath || '') + '[\'response.hideExtensions\']',
-                                      schemaPath: '#/properties/response.hideExtensions/type',
+                                      dataPath: (dataPath || '') + '[\'request.withCredentials\']',
+                                      schemaPath: '#/properties/request.withCredentials/type',
                                       params: {
                                         type: 'boolean'
                                       },
@@ -338,15 +338,15 @@ var validate = (function() {
                                   var valid1 = errors === errs_1;
                                 }
                                 if (valid1) {
-                                  if (data['schema.reloadOnStart'] === undefined) {
+                                  if (data['response.hideExtensions'] === undefined) {
                                     valid1 = true;
                                   } else {
                                     var errs_1 = errors;
-                                    if (typeof data['schema.reloadOnStart'] !== "boolean") {
+                                    if (typeof data['response.hideExtensions'] !== "boolean") {
                                       validate.errors = [{
                                         keyword: 'type',
-                                        dataPath: (dataPath || '') + '[\'schema.reloadOnStart\']',
-                                        schemaPath: '#/properties/schema.reloadOnStart/type',
+                                        dataPath: (dataPath || '') + '[\'response.hideExtensions\']',
+                                        schemaPath: '#/properties/response.hideExtensions/type',
                                         params: {
                                           type: 'boolean'
                                         },
@@ -357,95 +357,95 @@ var validate = (function() {
                                     var valid1 = errors === errs_1;
                                   }
                                   if (valid1) {
-                                    var data1 = data['script.allowedCookies'];
-                                    if (data1 === undefined) {
+                                    if (data['schema.reloadOnStart'] === undefined) {
                                       valid1 = true;
                                     } else {
                                       var errs_1 = errors;
-                                      if (Array.isArray(data1)) {
-                                        var errs__1 = errors;
-                                        var valid1;
-                                        for (var i1 = 0; i1 < data1.length; i1++) {
-                                          var errs_2 = errors;
-                                          if (typeof data1[i1] !== "string") {
-                                            validate.errors = [{
-                                              keyword: 'type',
-                                              dataPath: (dataPath || '') + '[\'script.allowedCookies\'][' + i1 + ']',
-                                              schemaPath: '#/properties/script.allowedCookies/items/type',
-                                              params: {
-                                                type: 'string'
-                                              },
-                                              message: 'should be string'
-                                            }];
-                                            return false;
-                                          }
-                                          var valid2 = errors === errs_2;
-                                          if (!valid2) break;
-                                        }
-                                        if (errs__1 == errors) {}
-                                      } else {
+                                      if (typeof data['schema.reloadOnStart'] !== "boolean") {
                                         validate.errors = [{
                                           keyword: 'type',
-                                          dataPath: (dataPath || '') + '[\'script.allowedCookies\']',
-                                          schemaPath: '#/properties/script.allowedCookies/type',
+                                          dataPath: (dataPath || '') + '[\'schema.reloadOnStart\']',
+                                          schemaPath: '#/properties/schema.reloadOnStart/type',
                                           params: {
-                                            type: 'array'
+                                            type: 'boolean'
                                           },
-                                          message: 'should be array'
+                                          message: 'should be boolean'
                                         }];
                                         return false;
                                       }
-                                      if (errors === errs_1) {}
                                       var valid1 = errors === errs_1;
                                     }
                                     if (valid1) {
-                                      if (data.tabSize === undefined) {
+                                      var data1 = data['script.allowedCookies'];
+                                      if (data1 === undefined) {
                                         valid1 = true;
                                       } else {
                                         var errs_1 = errors;
-                                        if ((typeof data.tabSize !== "number")) {
+                                        if (Array.isArray(data1)) {
+                                          var errs__1 = errors;
+                                          var valid1;
+                                          for (var i1 = 0; i1 < data1.length; i1++) {
+                                            var errs_2 = errors;
+                                            if (typeof data1[i1] !== "string") {
+                                              validate.errors = [{
+                                                keyword: 'type',
+                                                dataPath: (dataPath || '') + '[\'script.allowedCookies\'][' + i1 + ']',
+                                                schemaPath: '#/properties/script.allowedCookies/items/type',
+                                                params: {
+                                                  type: 'string'
+                                                },
+                                                message: 'should be string'
+                                              }];
+                                              return false;
+                                            }
+                                            var valid2 = errors === errs_2;
+                                            if (!valid2) break;
+                                          }
+                                          if (errs__1 == errors) {}
+                                        } else {
                                           validate.errors = [{
                                             keyword: 'type',
-                                            dataPath: (dataPath || '') + '.tabSize',
-                                            schemaPath: '#/properties/tabSize/type',
+                                            dataPath: (dataPath || '') + '[\'script.allowedCookies\']',
+                                            schemaPath: '#/properties/script.allowedCookies/type',
                                             params: {
-                                              type: 'number'
+                                              type: 'array'
                                             },
-                                            message: 'should be number'
+                                            message: 'should be array'
                                           }];
                                           return false;
                                         }
+                                        if (errors === errs_1) {}
                                         var valid1 = errors === errs_1;
                                       }
                                       if (valid1) {
-                                        if (data.theme === undefined) {
+                                        if (data.tabSize === undefined) {
                                           valid1 = true;
                                         } else {
                                           var errs_1 = errors;
-                                          if (typeof data.theme !== "string") {
+                                          if ((typeof data.tabSize !== "number")) {
                                             validate.errors = [{
                                               keyword: 'type',
-                                              dataPath: (dataPath || '') + '.theme',
-                                              schemaPath: '#/properties/theme/type',
+                                              dataPath: (dataPath || '') + '.tabSize',
+                                              schemaPath: '#/properties/tabSize/type',
                                               params: {
-                                                type: 'string'
+                                                type: 'number'
                                               },
-                                              message: 'should be string'
+                                              message: 'should be number'
                                             }];
                                             return false;
                                           }
                                           var valid1 = errors === errs_1;
                                         }
                                         if (valid1) {
-                                          if (data['theme.dark'] === undefined) {
+                                          if (data.theme === undefined) {
                                             valid1 = true;
                                           } else {
                                             var errs_1 = errors;
-                                            if (typeof data['theme.dark'] !== "string") {
+                                            if (typeof data.theme !== "string") {
                                               validate.errors = [{
                                                 keyword: 'type',
-                                                dataPath: (dataPath || '') + '[\'theme.dark\']',
-                                                schemaPath: '#/properties/theme.dark/type',
+                                                dataPath: (dataPath || '') + '.theme',
+                                                schemaPath: '#/properties/theme/type',
                                                 params: {
                                                   type: 'string'
                                                 },
@@ -456,15 +456,15 @@ var validate = (function() {
                                             var valid1 = errors === errs_1;
                                           }
                                           if (valid1) {
-                                            if (data['theme.editorFontFamily'] === undefined) {
+                                            if (data['theme.dark'] === undefined) {
                                               valid1 = true;
                                             } else {
                                               var errs_1 = errors;
-                                              if (typeof data['theme.editorFontFamily'] !== "string") {
+                                              if (typeof data['theme.dark'] !== "string") {
                                                 validate.errors = [{
                                                   keyword: 'type',
-                                                  dataPath: (dataPath || '') + '[\'theme.editorFontFamily\']',
-                                                  schemaPath: '#/properties/theme.editorFontFamily/type',
+                                                  dataPath: (dataPath || '') + '[\'theme.dark\']',
+                                                  schemaPath: '#/properties/theme.dark/type',
                                                   params: {
                                                     type: 'string'
                                                   },
@@ -475,34 +475,34 @@ var validate = (function() {
                                               var valid1 = errors === errs_1;
                                             }
                                             if (valid1) {
-                                              if (data['theme.editorFontSize'] === undefined) {
+                                              if (data['theme.editorFontFamily'] === undefined) {
                                                 valid1 = true;
                                               } else {
                                                 var errs_1 = errors;
-                                                if ((typeof data['theme.editorFontSize'] !== "number")) {
+                                                if (typeof data['theme.editorFontFamily'] !== "string") {
                                                   validate.errors = [{
                                                     keyword: 'type',
-                                                    dataPath: (dataPath || '') + '[\'theme.editorFontSize\']',
-                                                    schemaPath: '#/properties/theme.editorFontSize/type',
+                                                    dataPath: (dataPath || '') + '[\'theme.editorFontFamily\']',
+                                                    schemaPath: '#/properties/theme.editorFontFamily/type',
                                                     params: {
-                                                      type: 'number'
+                                                      type: 'string'
                                                     },
-                                                    message: 'should be number'
+                                                    message: 'should be string'
                                                   }];
                                                   return false;
                                                 }
                                                 var valid1 = errors === errs_1;
                                               }
                                               if (valid1) {
-                                                if (data['theme.fontsize'] === undefined) {
+                                                if (data['theme.editorFontSize'] === undefined) {
                                                   valid1 = true;
                                                 } else {
                                                   var errs_1 = errors;
-                                                  if ((typeof data['theme.fontsize'] !== "number")) {
+                                                  if ((typeof data['theme.editorFontSize'] !== "number")) {
                                                     validate.errors = [{
                                                       keyword: 'type',
-                                                      dataPath: (dataPath || '') + '[\'theme.fontsize\']',
-                                                      schemaPath: '#/properties/theme.fontsize/type',
+                                                      dataPath: (dataPath || '') + '[\'theme.editorFontSize\']',
+                                                      schemaPath: '#/properties/theme.editorFontSize/type',
                                                       params: {
                                                         type: 'number'
                                                       },
@@ -513,8 +513,28 @@ var validate = (function() {
                                                   var valid1 = errors === errs_1;
                                                 }
                                                 if (valid1) {
+                                                  if (data['theme.fontsize'] === undefined) {
+                                                    valid1 = true;
+                                                  } else {
+                                                    var errs_1 = errors;
+                                                    if ((typeof data['theme.fontsize'] !== "number")) {
+                                                      validate.errors = [{
+                                                        keyword: 'type',
+                                                        dataPath: (dataPath || '') + '[\'theme.fontsize\']',
+                                                        schemaPath: '#/properties/theme.fontsize/type',
+                                                        params: {
+                                                          type: 'number'
+                                                        },
+                                                        message: 'should be number'
+                                                      }];
+                                                      return false;
+                                                    }
+                                                    var valid1 = errors === errs_1;
+                                                  }
                                                   if (valid1) {
-                                                    if (valid1) {}
+                                                    if (valid1) {
+                                                      if (valid1) {}
+                                                    }
                                                   }
                                                 }
                                               }
@@ -604,6 +624,10 @@ validate.schema = {
       "description": "Enable experimental features.\nNote: Might be unstable",
       "type": "boolean"
     },
+    "enableTablistScrollbar": {
+      "description": "Enable the scrollbar in the tab list",
+      "type": "boolean"
+    },
     "historyDepth": {
       "description": "Number of items allowed in history pane",
       "type": "number"
diff --git a/packages/altair-app/src/scss/components/_window-switcher.scss b/packages/altair-app/src/scss/components/_window-switcher.scss
index 6b1fb2d3ec..71826b9d85 100644
--- a/packages/altair-app/src/scss/components/_window-switcher.scss
+++ b/packages/altair-app/src/scss/components/_window-switcher.scss
@@ -29,11 +29,13 @@ app-window-switcher {
     var(--shadow-weight) var(--shadow-height);
   background-attachment: local, local, scroll, scroll;
 
-  scrollbar-width: none;
-
-  &::-webkit-scrollbar {
-    width: 0;
-    height: 0;
+  &.window-switcher__no-scrollbar {
+    scrollbar-width: none;
+  
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
   }
 
   &::-webkit-scrollbar-thumb {
diff --git a/packages/altair-core/src/types/state/settings.interfaces.ts b/packages/altair-core/src/types/state/settings.interfaces.ts
index 1157521912..58b27119d5 100644
--- a/packages/altair-core/src/types/state/settings.interfaces.ts
+++ b/packages/altair-core/src/types/state/settings.interfaces.ts
@@ -128,4 +128,9 @@ export interface SettingsState {
    * @default []
    */
   'script.allowedCookies'?: string[];
+
+  /**
+   * Enable the scrollbar in the tab list
+   */
+  enableTablistScrollbar?: boolean;
 }

From 839b168c3275e59478bb1c303d28b6b460043abd Mon Sep 17 00:00:00 2001
From: Samuel Imolorhe <samuelimolo4real@gmail.com>
Date: Sun, 3 Dec 2023 22:17:37 +0100
Subject: [PATCH 2/2] updated snapshots

---
 .../__snapshots__/window-switcher.component.spec.ts.snap    | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/altair-app/src/app/modules/altair/components/window-switcher/__snapshots__/window-switcher.component.spec.ts.snap b/packages/altair-app/src/app/modules/altair/components/window-switcher/__snapshots__/window-switcher.component.spec.ts.snap
index e50f84ce5d..dbaa0db6e1 100644
--- a/packages/altair-app/src/app/modules/altair/components/window-switcher/__snapshots__/window-switcher.component.spec.ts.snap
+++ b/packages/altair-app/src/app/modules/altair/components/window-switcher/__snapshots__/window-switcher.component.spec.ts.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`WindowSwitcherComponent should render correctly 1`] = `
-<app-window-switcher>
+<app-window-switcher
+  class="window-switcher__no-scrollbar"
+>
   <ul
-    class="window-switcher__list"
+    class="window-switcher__list window-switcher__no-scrollbar"
     sortablejs=""
   >