autocomplete profile colors - fixes #4231

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

@@ -46,7 +46,10 @@
                 input.form-control.w-50(
                     type='text',
                     [(ngModel)]='profile.color',
-                    placeholder='#000000'
+                    placeholder='#000000',
+                    alwaysVisibleTypeahead,
+                    [ngbTypeahead]='colorsAutocomplete',
+                    [resultFormatter]='colorsFormatter'
                 )
 
             .form-line

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

@@ -2,7 +2,7 @@
 import { Observable, OperatorFunction, debounceTime, map, distinctUntilChanged } from 'rxjs'
 import { Component, Input, ViewChild, ViewContainerRef, ComponentFactoryResolver, Injector } from '@angular/core'
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
-import { ConfigProxy, ConfigService, Profile, ProfileProvider, ProfileSettingsComponent, ProfilesService } from 'tabby-core'
+import { ConfigProxy, ConfigService, Profile, ProfileProvider, ProfileSettingsComponent, ProfilesService, TAB_COLORS } from 'tabby-core'
 
 const iconsData = require('../../../tabby-core/src/icons.json')
 const iconsClassList = Object.keys(iconsData).map(
@@ -39,6 +39,16 @@ export class EditProfileModalComponent<P extends Profile> {
         )].sort() as string[]
     }
 
+    colorsAutocomplete = text$ => text$.pipe(
+        debounceTime(200),
+        distinctUntilChanged(),
+        map((q: string) => TAB_COLORS.filter(x => !q || x.toString().startsWith(q)).map(x => x.value))
+    )
+
+    colorsFormatter = value => {
+        return TAB_COLORS.find(x => x.value === value)?.name ?? value
+    }
+
     ngOnInit () {
         this._profile = this.profile
         this.profile = this.profilesService.getConfigProxyForProfile(this.profile)