cipher listing titles

src/_locales/en/messages.json

@@ -512,6 +512,9 @@
   "searchCollection": {
     "message": "Search collection"
   },
+  "searchType": {
+    "message": "Search type"
+  },
   "noneFolder": {
     "message": "No Folder",
     "description": "This is the folder for uncategorized items"
@@ -1015,6 +1018,12 @@
   "identities": {
     "message": "Identities"
   },
+  "logins": {
+    "message": "Logins"
+  },
+  "secureNotes": {
+    "message": "Secure Notes"
+  },
   "clear": {
     "message": "Clear"
   },
@@ -1073,5 +1082,8 @@
   },
   "types": {
     "message": "Types"
+  },
+  "allItems": {
+    "message": "All Items"
   }
 }

src/popup2/vault/ciphers.component.html

@@ -20,7 +20,8 @@
     <ng-container *ngIf="(ciphers | searchCiphers: searchText) as searchedCiphers">
         <div class="box list only-list" *ngIf="searchedCiphers.length > 0">
             <div class="box-header">
-                Some name here
+                {{groupingTitle}}
+                <span class="flex-right">{{searchedCiphers.length}}</span>
             </div>
             <div class="box-content">
                 <app-ciphers-list [ciphers]="searchedCiphers" title="{{'viewItem' | i18n}}"

src/popup2/vault/ciphers.component.ts

@@ -11,9 +11,14 @@ import {
     Router,
 } from '@angular/router';
 
+import { FolderService } from 'jslib/abstractions/folder.service';
+import { CollectionService } from 'jslib/abstractions/collection.service';
 import { CipherService } from 'jslib/abstractions/cipher.service';
+import { I18nService } from 'jslib/abstractions/i18n.service';
 import { StateService } from 'jslib/abstractions/state.service';
 
+import { CipherType } from 'jslib/enums/cipherType';
+
 import { CipherView } from 'jslib/models/view/cipherView';
 
 import { BroadcasterService } from 'jslib/angular/services/broadcaster.service';
@@ -29,6 +34,7 @@ const ComponentId = 'CiphersComponent';
     templateUrl: 'ciphers.component.html',
 })
 export class CiphersComponent extends BaseCiphersComponent implements OnInit, OnDestroy {
+    groupingTitle: string;
     searchText: string;
     state: any;
 
@@ -36,20 +42,54 @@ export class CiphersComponent extends BaseCiphersComponent implements OnInit, On
         private router: Router, private location: Location,
         private ngZone: NgZone, private broadcasterService: BroadcasterService,
         private changeDetectorRef: ChangeDetectorRef, private stateService: StateService,
-        private popupUtils: PopupUtilsService) {
+        private popupUtils: PopupUtilsService, private i18nService: I18nService,
+        private folderService: FolderService, private collectionService: CollectionService) {
         super(cipherService);
     }
 
     async ngOnInit() {
         this.route.queryParams.subscribe(async (params) => {
             if (params.type) {
+                this.searchPlaceholder = this.i18nService.t('searchType');
                 const t = parseInt(params.type, null);
+                switch (t) {
+                    case CipherType.Login:
+                        this.groupingTitle = this.i18nService.t('logins');
+                        break;
+                    case CipherType.Card:
+                        this.groupingTitle = this.i18nService.t('cards');
+                        break;
+                    case CipherType.Identity:
+                        this.groupingTitle = this.i18nService.t('identities');
+                        break;
+                    case CipherType.SecureNote:
+                        this.groupingTitle = this.i18nService.t('secureNotes');
+                        break;
+                    default:
+                        break;
+                }
                 await super.load((c) => c.type === t);
             } else if (params.folderId) {
-                await super.load((c) => c.folderId === params.folderId);
+                const folderId = params.folderId === 'none' ? null : params.folderId;
+                this.searchPlaceholder = this.i18nService.t('searchFolder');
+                if (folderId != null) {
+                    const folder = await this.folderService.get(folderId);
+                    if (folder != null) {
+                        this.groupingTitle = (await folder.decrypt()).name;
+                    }
+                } else {
+                    this.groupingTitle = this.i18nService.t('noneFolder');
+                }
+                await super.load((c) => c.folderId === folderId);
             } else if (params.collectionId) {
+                this.searchPlaceholder = this.i18nService.t('searchCollection');
+                const collection = await this.collectionService.get(params.collectionId);
+                if (collection != null) {
+                    this.groupingTitle = (await collection.decrypt()).name;
+                }
                 await super.load((c) => c.collectionIds.indexOf(params.collectionId) > -1);
             } else {
+                this.groupingTitle = this.i18nService.t('allItems');
                 await super.load();
             }
 

src/popup2/vault/groupings.component.ts

@@ -156,7 +156,7 @@ export class GroupingsComponent extends BaseGroupingsComponent implements OnInit
 
     async selectFolder(folder: FolderView) {
         super.selectFolder(folder);
-        this.router.navigate(['/ciphers'], { queryParams: { folderId: folder.id } });
+        this.router.navigate(['/ciphers'], { queryParams: { folderId: folder.id || 'none' } });
     }
 
     async selectCollection(collection: CollectionView) {