added vault searching

src/popup2/vault/ciphers.component.html

@@ -5,8 +5,10 @@
             <span>{{'back' | i18n}}</span>
         </button>
     </div>
-    <div class="center">
-        {{searchPlaceholder || ('searchVault' | i18n)}}
+    <div class="search">
+        <input type="search" placeholder="{{searchPlaceholder || ('searchVault' | i18n)}}" id="search"
+               [(ngModel)]="searchText" appAutofocus>
+        <i class="fa fa-search"></i>
     </div>
     <div class="right">
         <button type="button" appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">

src/popup2/vault/ciphers.component.ts

@@ -26,6 +26,8 @@ const BroadcasterSubscriptionId = 'CiphersComponent';
     templateUrl: 'ciphers.component.html',
 })
 export class CiphersComponent extends BaseCiphersComponent implements OnInit, OnDestroy {
+    searchText: string;
+
     constructor(cipherService: CipherService, private route: ActivatedRoute,
         private router: Router, private location: Location,
         private ngZone: NgZone, private broadcasterService: BroadcasterService,

src/popup2/vault/current-tab.component.html

@@ -5,8 +5,10 @@
             <i class="fa fa-refresh fa-lg"></i>
         </button>
     </div>
-    <div class="center">
-        <span class="title">{{'currentTab' | i18n}}</span>
+    <div class="search">
+        <input type="search" placeholder="{{'searchVault' | i18n}}" id="search"
+               [(ngModel)]="searchText" (input)="searchVault()" appAutofocus>
+        <i class="fa fa-search"></i>
     </div>
     <div class="right">
         <button type="button" appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">

src/popup2/vault/current-tab.component.ts

@@ -40,8 +40,8 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
     loginCiphers: CipherView[];
     url: string;
     domain: string;
+    searchText: string;
     canAutofill = false;
-    searchText: string = null;
     inSidebar = false;
     showPopout = true;
     disableSearch = false;
@@ -135,7 +135,7 @@ export class CurrentTabComponent implements OnInit, OnDestroy {
     }
 
     searchVault() {
-
+        this.router.navigate(['/tabs/vault'], { queryParams: { searchText: this.searchText } });
     }
 
     private async load() {

src/popup2/vault/groupings.component.html

@@ -2,8 +2,10 @@
     <div class="left">
         <app-pop-out></app-pop-out>
     </div>
-    <div class="center">
-        <span class="title">{{'myVault' | i18n}}</span>
+    <div class="search">
+        <input type="search" placeholder="{{'searchVault' | i18n}}" id="search"
+               [(ngModel)]="searchText" appAutofocus>
+        <i class="fa fa-search"></i>
     </div>
     <div class="right">
         <button appBlurClick (click)="addCipher()" title="{{'addItem' | i18n}}">
@@ -12,8 +14,15 @@
     </div>
 </header>
 <content>
-    <p *ngIf="!loaded" class="text-muted">{{'loading' | i18n}}</p>
-    <ng-container *ngIf="loaded">
+    <div class="no-items" *ngIf="!ciphers || !ciphers.length">
+        <i class="fa fa-spinner fa-spin fa-3x" *ngIf="!loaded"></i>
+        <ng-container *ngIf="loaded">
+            <i class="fa fa-frown-o fa-4x"></i>
+            <p>{{'noItemsInList' | i18n}}</p>
+            <button (click)="addCipher()" class="btn block primary link">{{'addItem' | i18n}}</button>
+        </ng-container>
+    </div>
+    <ng-container *ngIf="ciphers && ciphers.length && (!searchText || searchText.length < 2)">
         <div class="box list" *ngIf="favoriteCiphers">
             <div class="box-header">
                 {{'favorites' | i18n}}
@@ -111,4 +120,16 @@
             </div>
         </div>
     </ng-container>
+    <ng-container *ngIf="ciphers && ciphers.length && searchText && searchText.length > 1 &&
+                  (ciphers | searchCiphers: searchText) as searchedCiphers">
+        <div class="no-items" *ngIf="!searchedCiphers.length">
+            <p>{{'noItemsInList' | i18n}}</p>
+        </div>
+        <div class="box list only-list" *ngIf="searchedCiphers.length > 0">
+            <div class="box-content">
+                <app-ciphers-list [ciphers]="searchedCiphers" title="{{'viewItem' | i18n}}"
+                                  (onSelected)="selectCipher($event)"></app-ciphers-list>
+            </div>
+        </div>
+    </ng-container>
 </content>

src/popup2/vault/groupings.component.ts

@@ -5,7 +5,10 @@ import {
     OnDestroy,
     OnInit,
 } from '@angular/core';
-import { Router } from '@angular/router';
+import {
+    ActivatedRoute,
+    Router,
+} from '@angular/router';
 
 import { CipherType } from 'jslib/enums/cipherType';
 
@@ -36,11 +39,12 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
     collectionCounts = new Map<string, number>();
     typeCounts = new Map<CipherType, number>();
     showNoFolderCiphers = false;
+    searchText: string;
 
     constructor(collectionService: CollectionService, folderService: FolderService,
         private cipherService: CipherService, private router: Router,
         private ngZone: NgZone, private broadcasterService: BroadcasterService,
-        private changeDetectorRef: ChangeDetectorRef) {
+        private changeDetectorRef: ChangeDetectorRef, private route: ActivatedRoute) {
         super(collectionService, folderService);
     }
 
@@ -61,7 +65,13 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
             })
         });
 
-        this.load();
+        this.route.queryParams.subscribe(async (params) => {
+            if (params.searchText) {
+                this.searchText = params.searchText;
+            }
+
+            this.load();
+        });
     }
 
     ngOnDestroy() {

src/scss/base.scss

@@ -145,6 +145,41 @@ header {
     .title {
         font-weight: bold;
     }
+
+    .search {
+        padding: 7px;
+        width: 100%;
+        text-align: left;
+        position: relative;
+        display: flex;
+
+        .fa {
+            position: absolute;
+            top: 15px;
+            left: 15px;
+            color: lighten($brand-primary, 30%);
+        }
+
+        input {
+            width: 100%;
+            margin: 0;
+            background: darken($brand-primary, 8%);
+            border: none;
+            color: white;
+            padding: 5px 10px 5px 30px;
+            border-radius: $border-radius;
+
+            &:focus {
+                border-radius: $border-radius;
+                outline: none;
+                background: darken($brand-primary, 10%);
+            }
+
+            &::-webkit-input-placeholder {
+                color: lighten($brand-primary, 35%);
+            }
+        }
+    }
 }
 
 .content {
@@ -232,3 +267,17 @@ content {
         bottom: 55px;
     }
 }
+
+.no-items {
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+
+    .fa {
+        margin-bottom: 10px;
+        color: $list-icon-color;
+    }
+}