autocomplete profile colors - fixes #4231

tabby-core/src/tabContextMenu.ts

@@ -13,6 +13,7 @@ import { TabsService } from './services/tabs.service'
 import { HotkeysService } from './services/hotkeys.service'
 import { PromptModalComponent } from './components/promptModal.component'
 import { SplitLayoutProfilesService } from './profiles'
+import { TAB_COLORS } from './utils'
 
 /** @hidden */
 @Injectable()
@@ -89,16 +90,6 @@ export class TabManagementContextMenu extends TabContextMenuItemProvider {
     }
 }
 
-const COLORS = [
-    { name: 'No color', value: null },
-    { name: 'Blue', value: '#0275d8' },
-    { name: 'Green', value: '#5cb85c' },
-    { name: 'Orange', value: '#f0ad4e' },
-    { name: 'Purple', value: '#613d7c' },
-    { name: 'Red', value: '#d9534f' },
-    { name: 'Yellow', value: '#ffd500' },
-]
-
 /** @hidden */
 @Injectable()
 export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
@@ -127,8 +118,8 @@ export class CommonOptionsContextMenu extends TabContextMenuItemProvider {
                 },
                 {
                     label: 'Color',
-                    sublabel: COLORS.find(x => x.value === tab.color)?.name,
+                    sublabel: TAB_COLORS.find(x => x.value === tab.color)?.name,
-                    submenu: COLORS.map(color => ({
+                    submenu: TAB_COLORS.map(color => ({
                         label: color.name,
                         type: 'radio',
                         checked: tab.color === color.value,

tabby-core/src/utils.ts

@@ -54,3 +54,13 @@ export class ResettableTimeout {
         }
     }
 }
+
+export const TAB_COLORS = [
+    { name: 'No color', value: null },
+    { name: 'Blue', value: '#0275d8' },
+    { name: 'Green', value: '#5cb85c' },
+    { name: 'Orange', value: '#f0ad4e' },
+    { name: 'Purple', value: '#613d7c' },
+    { name: 'Red', value: '#d9534f' },
+    { name: 'Yellow', value: '#ffd500' },
+]

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)