Add searchable vault feature for saved connections

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

@@ -4,7 +4,6 @@
     .m-3(translate) Vault is an always-encrypted container for secrets such as SSH passwords and private key passphrases.
     button.btn.btn-primary.m-2((click)='enableVault()', translate) Set master passphrase
 
-
 div(*ngIf='vault.isEnabled()')
     .d-flex.align-items-center.mb-3
         h3.m-0(translate) Vault
@@ -19,12 +18,22 @@ div(*ngIf='vault.isEnabled()')
                     span(translate) Erase the Vault
 
     div(*ngIf='vaultContents')
+        .input-group.mb-4
+            .input-group-text
+                i.fas.fa-fw.fa-search
+            input.form-control(
+                type='search',
+                [placeholder]='"Filter"|translate',
+                [(ngModel)]='searchTerm',
+                (ngModelChange)='updateFilteredSecrets()'
+            )
+
         .text-center(*ngIf='!vaultContents.secrets.length')
             i.fas.fa-empty-set.fa-3x
             h3.m-3(translate) Vault is empty
 
         .list-group
-            .list-group-item.d-flex.align-items-center.p-1.ps-3(*ngFor='let secret of vaultContents.secrets')
+            .list-group-item.d-flex.align-items-center.p-1.ps-3(*ngFor='let secret of filteredSecrets')
                 i.fas.fa-key
                 .me-auto {{getSecretLabel(secret)}}
 

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

@@ -14,7 +14,8 @@ import { ShowSecretModalComponent } from './showSecretModal.component'
 export class VaultSettingsTabComponent extends BaseComponent {
     vaultContents: Vault|null = null
     VAULT_SECRET_TYPE_FILE = VAULT_SECRET_TYPE_FILE
-
+    searchTerm = ''
+    filteredSecrets: any[] = []
     @HostBinding('class.content-box') true
 
     constructor (
@@ -32,6 +33,18 @@ export class VaultSettingsTabComponent extends BaseComponent {
 
     async loadVault (): Promise<void> {
         this.vaultContents = await this.vault.load()
+        this.filteredSecrets = this.vaultContents?.secrets ?? []
+    }
+
+    updateFilteredSecrets () {
+        if (!this.vaultContents?.secrets) {
+            this.filteredSecrets = []
+            return
+        }
+        const term = this.searchTerm.toLowerCase()
+        this.filteredSecrets = this.vaultContents.secrets.filter((secret) =>
+            this.getSecretLabel(secret).toLowerCase().includes(term),
+        )
     }
 
     async enableVault () {