settings UI tweaks

app/src/global.scss

@@ -163,6 +163,10 @@ ngb-typeahead-window {
     margin: -7px 0;
 }
 
+.content-box {
+    max-width: 600px;
+}
+
 
 // Windows high contrast mode
 @media screen and (forced-colors: active) {

tabby-local/src/components/shellSettingsTab.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, HostBinding } from '@angular/core'
 import { WIN_BUILD_CONPTY_SUPPORTED, WIN_BUILD_CONPTY_STABLE, isWindowsBuild, ConfigService } from 'tabby-core'
 
 /** @hidden */
@@ -9,6 +9,8 @@ export class ShellSettingsTabComponent {
     isConPTYAvailable: boolean
     isConPTYStable: boolean
 
+    @HostBinding('class.content-box') true
+
     constructor (
         public config: ConfigService,
     ) {

tabby-plugin-manager/src/components/pluginsSettingsTab.component.ts

@@ -2,7 +2,7 @@
 import { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, first, tap, flatMap, map } from 'rxjs'
 import semverGt from 'semver/functions/gt'
 
-import { Component, Input } from '@angular/core'
+import { Component, HostBinding, Input } from '@angular/core'
 import { ConfigService, PlatformService, PluginInfo } from 'tabby-core'
 import { PluginManagerService } from '../services/pluginManager.service'
 
@@ -25,6 +25,8 @@ export class PluginsSettingsTabComponent {
     @Input() erroredPlugin: string
     @Input() errorMessage: string
 
+    @HostBinding('class.content-box') true
+
     constructor (
         private config: ConfigService,
         private platform: PlatformService,

tabby-settings/src/api.ts

@@ -5,6 +5,8 @@ export abstract class SettingsTabProvider {
     id: string
     icon: string
     title: string
+    weight = 0
+    prioritized = false
 
     getComponentType (): any {
         return null

tabby-settings/src/components/configSyncSettingsTab.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { Component } from '@angular/core'
+import { Component, HostBinding } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { BaseComponent, ConfigService, PromptModalComponent, HostAppService, PlatformService, NotificationsService } from 'tabby-core'
 import { Config, ConfigSyncService } from '../services/configSync.service'
@@ -15,6 +15,8 @@ export class ConfigSyncSettingsTabComponent extends BaseComponent {
     connectionError: Error|null = null
     configs: Config[]|null = null
 
+    @HostBinding('class.content-box') true
+
     constructor (
         public config: ConfigService,
         public platform: PlatformService,

tabby-settings/src/components/profilesSettingsTab.component.ts

@@ -1,7 +1,7 @@
 import { v4 as uuidv4 } from 'uuid'
 import slugify from 'slugify'
 import deepClone from 'clone-deep'
-import { Component, Inject } from '@angular/core'
+import { Component, HostBinding, Inject } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { ConfigService, HostAppService, Profile, SelectorService, ProfilesService, PromptModalComponent, PlatformService, BaseComponent, PartialProfile, ProfileProvider } from 'tabby-core'
 import { EditProfileModalComponent } from './editProfileModal.component'
@@ -25,6 +25,8 @@ export class ProfilesSettingsTabComponent extends BaseComponent {
     profileGroups: ProfileGroup[]
     filter = ''
 
+    @HostBinding('class.content-box') true
+
     constructor (
         public config: ConfigService,
         public hostApp: HostAppService,

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

@@ -1,5 +1,3 @@
-button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='restartApp()') Restart the app to apply changes
-
 .content
     ul.nav-pills(ngbNav, #nav='ngbNav', [activeId]='activeTab', orientation='vertical')
         li(ngbNavItem='application')
@@ -7,80 +5,92 @@ button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='res
                 i.fas.fa-fw.fa-window-maximize.mr-2
                 | Application
             ng-template(ngbNavContent)
-                .tabby-logo.mt-3
+                .content-box
-                h1.tabby-title Tabby
+                    .tabby-logo.mt-3
-                    sup α
+                    h1.tabby-title Tabby
+                        sup α
 
-                .text-center
+                    .text-center
-                    .text-muted {{homeBase.appVersion}}
+                        .text-muted {{homeBase.appVersion}}
 
-                    .mb-5.mt-3
+                        .mb-5.mt-3
-                        button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.openGitHub()')
+                            button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.openGitHub()')
-                            i.fab.fa-github
+                                i.fab.fa-github
-                            span GitHub
+                                span GitHub
 
-                        button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.reportBug()')
+                            button.btn.btn-secondary.mr-3.mb-2((click)='homeBase.reportBug()')
-                            i.fas.fa-bug
+                                i.fas.fa-bug
-                            span Report a problem
+                                span Report a problem
 
-                        button.btn.btn-secondary.mr-3.mb-2(
+                            button.btn.btn-secondary.mr-3.mb-2(
-                            (click)='showReleaseNotes()',
+                                (click)='showReleaseNotes()',
-                        )
-                            i.fas.fa-book
-                            span What's new
-
-                        button.btn.btn-secondary.mr-3.mb-2(
-                            *ngIf='!updateAvailable && hostApp.platform !== Platform.Web',
-                            (click)='checkForUpdates()',
-                            [disabled]='checkingForUpdate'
-                        )
-                            i.fas.fa-sync(
-                                [class.fa-spin]='checkingForUpdate'
                             )
-                            span Check for updates
+                                i.fas.fa-book
+                                span What's new
 
-                        button.btn.btn-info.mr-3.mb-2(
+                            button.btn.btn-secondary.mr-3.mb-2(
-                            *ngIf='updateAvailable',
+                                *ngIf='!updateAvailable && hostApp.platform !== Platform.Web',
-                            (click)='updater.update()',
+                                (click)='checkForUpdates()',
+                                [disabled]='checkingForUpdate'
+                            )
+                                i.fas.fa-sync(
+                                    [class.fa-spin]='checkingForUpdate'
+                                )
+                                span Check for updates
+
+                            button.btn.btn-info.mr-3.mb-2(
+                                *ngIf='updateAvailable',
+                                (click)='updater.update()',
+                            )
+                                i.fas.fa-sync
+                                span Update
+
+                    .form-line(*ngIf='platform.isShellIntegrationSupported()')
+                        .header
+                            .title Shell integration
+                            .description Allows quickly opening a terminal in the selected folder
+                        toggle([ngModel]='isShellIntegrationInstalled', (ngModelChange)='toggleShellIntegration()')
+
+                    .form-line(*ngIf='hostApp.platform !== Platform.Web')
+                        .header
+                            .title Enable analytics
+                            .description We're only tracking your Tabby and OS versions.
+                        toggle(
+                            [(ngModel)]='config.store.enableAnalytics',
+                            (ngModelChange)='saveConfiguration(true)',
                         )
-                            i.fas.fa-sync
-                            span Update
 
-                .form-line(*ngIf='platform.isShellIntegrationSupported()')
+                    .form-line(*ngIf='hostApp.platform !== Platform.Web')
-                    .header
+                        .header
-                        .title Shell integration
+                            .title Automatic Updates
-                        .description Allows quickly opening a terminal in the selected folder
+                            .description Enable automatic installation of updates when they become available.
-                    toggle([ngModel]='isShellIntegrationInstalled', (ngModelChange)='toggleShellIntegration()')
+                        toggle([(ngModel)]='config.store.enableAutomaticUpdates', (ngModelChange)='saveConfiguration()')
 
-                .form-line(*ngIf='hostApp.platform !== Platform.Web')
+                    .form-line(*ngIf='hostApp.platform !== Platform.Web')
-                    .header
+                        .header
-                        .title Enable analytics
+                            .title Debugging
-                        .description We're only tracking your Tabby and OS versions.
-                    toggle(
-                        [(ngModel)]='config.store.enableAnalytics',
-                        (ngModelChange)='saveConfiguration(true)',
-                    )
 
-                .form-line(*ngIf='hostApp.platform !== Platform.Web')
+                        button.btn.btn-secondary((click)='hostWindow.openDevTools()')
-                    .header
+                            i.fas.fa-bug
-                        .title Automatic Updates
+                            span Open DevTools
-                        .description Enable automatic installation of updates when they become available.
-                    toggle([(ngModel)]='config.store.enableAutomaticUpdates', (ngModelChange)='saveConfiguration()')
 
-                .form-line(*ngIf='hostApp.platform !== Platform.Web')
+        ng-container(*ngFor='let provider of settingsProviders')
-                    .header
+            li(*ngIf='provider.prioritized', [ngbNavItem]='provider.id')
-                        .title Debugging
+                a(ngbNavLink)
+                    i(class='fas fa-fw mr-2 fa-{{provider.icon}}')
+                    | {{provider.title}}
+                ng-template(ngbNavContent)
+                    settings-tab-body([provider]='provider')
 
-                    button.btn.btn-secondary((click)='hostWindow.openDevTools()')
+        .mb-3
-                        i.fas.fa-bug
-                        span Open DevTools
 
-        li(*ngFor='let provider of settingsProviders', [ngbNavItem]='provider.id')
+        ng-container(*ngFor='let provider of settingsProviders')
-            a(ngbNavLink)
+            li(*ngIf='!provider.prioritized', [ngbNavItem]='provider.id')
-                i(class='fas fa-fw mr-2 fa-{{provider.icon || "puzzle-piece"}}')
+                a(ngbNavLink)
-                | {{provider.title}}
+                    i(class='fas fa-fw mr-2 fa-{{provider.icon || "puzzle-piece"}}')
-            ng-template(ngbNavContent)
+                    | {{provider.title}}
-                settings-tab-body([provider]='provider')
+                ng-template(ngbNavContent)
+                    settings-tab-body([provider]='provider')
 
         li(ngbNavItem='config-file')
             a(ngbNavLink)
@@ -118,3 +128,5 @@ button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='res
                             | Show config file
 
     div([ngbNavOutlet]='nav')
+
+button.btn.btn-warning.btn-block(*ngIf='config.restartRequested', '(click)'='restartApp()') Restart the app to apply changes

tabby-settings/src/components/settingsTab.component.scss

@@ -16,7 +16,7 @@
 
         > .nav {
             padding: 20px 10px;
-            width: 190px;
+            width: 212px;
             flex: none;
             overflow-y: auto;
             flex-wrap: nowrap;
@@ -29,6 +29,10 @@
 
             > ::ng-deep .tab-pane {
                 height: 100%;
+
+                > settings-tab-body > * {
+                    display: block;
+                }
             }
         }
     }

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

@@ -51,7 +51,7 @@ export class SettingsTabComponent extends BaseTabComponent {
         this.setTitle('Settings')
         this.settingsProviders = config.enabledServices(this.settingsProviders)
         this.settingsProviders = this.settingsProviders.filter(x => !!x.getComponentType())
-        this.settingsProviders.sort((a, b) => a.title.localeCompare(b.title))
+        this.settingsProviders.sort((a, b) => a.weight - b.weight + a.title.localeCompare(b.title))
 
         this.configDefaults = yaml.dump(config.getDefaults())
 

tabby-settings/src/components/vaultSettingsTab.component.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { Component } from '@angular/core'
+import { Component, HostBinding } from '@angular/core'
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { BaseComponent, VaultService, VaultSecret, Vault, PlatformService, ConfigService, VAULT_SECRET_TYPE_FILE, PromptModalComponent, VaultFileSecret } from 'tabby-core'
 import { SetVaultPassphraseModalComponent } from './setVaultPassphraseModal.component'
@@ -14,6 +14,8 @@ export class VaultSettingsTabComponent extends BaseComponent {
     vaultContents: Vault|null = null
     VAULT_SECRET_TYPE_FILE = VAULT_SECRET_TYPE_FILE
 
+    @HostBinding('class.content-box') true
+
     constructor (
         public vault: VaultService,
         public config: ConfigService,

tabby-settings/src/components/windowSettingsTab.component.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import { debounce } from 'utils-decorators/dist/esm/debounce/debounce'
-import { Component, Inject, NgZone, Optional } from '@angular/core'
+import { Component, HostBinding, Inject, NgZone, Optional } from '@angular/core'
 import {
     DockingService,
     ConfigService,
@@ -25,6 +25,8 @@ export class WindowSettingsTabComponent extends BaseComponent {
     Platform = Platform
     isFluentVibrancySupported = false
 
+    @HostBinding('class.content-box') true
+
     constructor (
         public config: ConfigService,
         public hostApp: HostAppService,

tabby-settings/src/settings.ts

@@ -51,7 +51,8 @@ export class VaultSettingsTabProvider extends SettingsTabProvider {
 export class ProfilesSettingsTabProvider extends SettingsTabProvider {
     id = 'profiles'
     icon = 'window-restore'
-    title = 'Profiles'
+    title = 'Profiles & connections'
+    prioritized = true
 
     getComponentType (): any {
         return ProfilesSettingsTabComponent

tabby-ssh/src/components/sshSettingsTab.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, HostBinding } from '@angular/core'
 import { X11Socket } from '../session/x11'
 import { ConfigService, HostAppService, Platform } from 'tabby-core'
 
@@ -10,6 +10,8 @@ export class SSHSettingsTabComponent {
     Platform = Platform
     defaultX11Display: string
 
+    @HostBinding('class.content-box') true
+
     constructor (
         public config: ConfigService,
         public hostApp: HostAppService,

tabby-terminal/src/components/appearanceSettingsTab.component.pug

@@ -33,88 +33,89 @@ h3.mb-3 Appearance
     .col-12.col-md-6
         color-scheme-preview([scheme]='config.store.terminal.colorScheme', [fontPreview]='true')
 
-.form-line
+.content-box
-    .header
+    .form-line
-        .title Terminal background
+        .header
+            .title Terminal background
 
-    .btn-group(
+        .btn-group(
-        [(ngModel)]='config.store.terminal.background',
+            [(ngModel)]='config.store.terminal.background',
-        (ngModelChange)='config.save()',
+            (ngModelChange)='config.save()',
-        ngbRadioGroup
+            ngbRadioGroup
+        )
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"theme"'
+                )
+                | From theme
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"colorScheme"'
+                )
+                | From color scheme
+
+    .form-line
+        .header
+            .title Cursor shape
+
+        .btn-group(
+            [(ngModel)]='config.store.terminal.cursor',
+            (ngModelChange)='config.save()',
+            ngbRadioGroup
+        )
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"block"'
+                )
+                | █
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"beam"'
+                )
+                | |
+            label.btn.btn-secondary(ngbButtonLabel)
+                input(
+                    type='radio',
+                    ngbButton,
+                    [value]='"underline"'
+                )
+                | ▁
+
+    .form-line
+        .header
+            .title Blink cursor
+
+        toggle(
+            [(ngModel)]='config.store.terminal.cursorBlink',
+            (ngModelChange)='config.save()',
+        )
+
+    .form-line
+        .header
+            .title Fallback font
+            .description A second font family used to display characters missing in the main font
+
+        input.form-control(
+            type='text',
+            [ngbTypeahead]='fontAutocomplete',
+            [(ngModel)]='config.store.terminal.fallbackFont',
+            (ngModelChange)='config.save()'
+        )
+
+
+    .form-line
+        .header
+            .title Custom CSS
+
+    textarea.form-control.mb-5(
+        [(ngModel)]='config.store.appearance.css',
+        (ngModelChange)='saveConfiguration()',
     )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"theme"'
-            )
-            | From theme
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"colorScheme"'
-            )
-            | From color scheme
-
-.form-line
-    .header
-        .title Cursor shape
-
-    .btn-group(
-        [(ngModel)]='config.store.terminal.cursor',
-        (ngModelChange)='config.save()',
-        ngbRadioGroup
-    )
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"block"'
-            )
-            | █
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"beam"'
-            )
-            | |
-        label.btn.btn-secondary(ngbButtonLabel)
-            input(
-                type='radio',
-                ngbButton,
-                [value]='"underline"'
-            )
-            | ▁
-
-.form-line
-    .header
-        .title Blink cursor
-
-    toggle(
-        [(ngModel)]='config.store.terminal.cursorBlink',
-        (ngModelChange)='config.save()',
-    )
-
-.form-line
-    .header
-        .title Fallback font
-        .description A second font family used to display characters missing in the main font
-
-    input.form-control(
-        type='text',
-        [ngbTypeahead]='fontAutocomplete',
-        [(ngModel)]='config.store.terminal.fallbackFont',
-        (ngModelChange)='config.save()'
-    )
-
-
-.form-line
-    .header
-        .title Custom CSS
-
-textarea.form-control.mb-5(
-    [(ngModel)]='config.store.appearance.css',
-    (ngModelChange)='saveConfiguration()',
-)

tabby-terminal/src/components/colorSchemeSettingsTab.component.ts

@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
 import deepEqual from 'deep-equal'
 
-import { Component, Inject, Input, ChangeDetectionStrategy, ChangeDetectorRef } from '@angular/core'
+import { Component, Inject, Input, ChangeDetectionStrategy, ChangeDetectorRef, HostBinding } from '@angular/core'
 import { ConfigService, PlatformService } from 'tabby-core'
 import { TerminalColorSchemeProvider } from '../api/colorSchemeProvider'
 import { TerminalColorScheme } from '../api/interfaces'
@@ -23,6 +23,8 @@ export class ColorSchemeSettingsTabComponent {
     currentStockScheme: TerminalColorScheme|null = null
     currentCustomScheme: TerminalColorScheme|null = null
 
+    @HostBinding('class.content-box') true
+
     constructor (
         @Inject(TerminalColorSchemeProvider) private colorSchemeProviders: TerminalColorSchemeProvider[],
         private changeDetector: ChangeDetectorRef,

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

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core'
+import { Component, HostBinding } from '@angular/core'
 import { ConfigService, HostAppService, Platform, PlatformService } from 'tabby-core'
 
 /** @hidden */
@@ -8,6 +8,8 @@ import { ConfigService, HostAppService, Platform, PlatformService } from 'tabby-
 export class TerminalSettingsTabComponent {
     Platform = Platform
 
+    @HostBinding('class.content-box') true
+
     constructor (
         public config: ConfigService,
         public hostApp: HostAppService,