Add searchable vault feature for saved connections (#11121)

Co-authored-by: Eugene <inbox@null.page>

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,21 @@ 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'
+            )
+
         .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,7 @@ import { ShowSecretModalComponent } from './showSecretModal.component'
 export class VaultSettingsTabComponent extends BaseComponent {
     vaultContents: Vault|null = null
     VAULT_SECRET_TYPE_FILE = VAULT_SECRET_TYPE_FILE
-
+    searchTerm = ''
     @HostBinding('class.content-box') true
 
     constructor (
@@ -34,6 +34,13 @@ export class VaultSettingsTabComponent extends BaseComponent {
         this.vaultContents = await this.vault.load()
     }
 
+    get filteredSecrets (): VaultSecret[] {
+        const term = this.searchTerm.toLowerCase()
+        return this.vaultContents?.secrets.filter(
+            secret => this.getSecretLabel(secret).toLowerCase().includes(term),
+        ) ?? []
+    }
+
     async enableVault () {
         const modal = this.ngbModal.open(SetVaultPassphraseModalComponent)
         const newPassphrase = await modal.result.catch(() => null)