display favorites and collections in my vault

src/_locales/en/messages.json

@@ -956,5 +956,11 @@
   },
   "back": {
     "message": "Back"
+  },
+  "collections": {
+    "message": "Collections"
+  },
+  "favorites": {
+    "message": "Favorites"
   }
 }

src/popup/app/services/auth.service.ts

@@ -67,6 +67,7 @@ class AuthService {
     logOut(callback: Function) {
         this.$rootScope.vaultCiphers = null;
         this.$rootScope.vaultFolders = null;
+        this.$rootScope.vaultCollections = null;
         callback();
     }
 }

src/popup/app/services/background.service.ts

@@ -25,3 +25,4 @@ export const settingsService = getBackgroundService<any>('settingsService');
 export const lockService = getBackgroundService<any>('lockService');
 export const totpService = getBackgroundService<any>('totpService');
 export const environmentService = getBackgroundService<any>('environmentService');
+export const collectionService = getBackgroundService<any>('collectionService');

src/popup/app/services/services.module.ts

@@ -27,5 +27,6 @@ export default angular
     .factory('lockService', backgroundServices.lockService)
     .factory('totpService', backgroundServices.totpService)
     .factory('environmentService', backgroundServices.environmentService)
+    .factory('collectionService', backgroundServices.collectionService)
 
     .name;

src/popup/app/vault/vaultController.js

@@ -2,12 +2,12 @@ angular
     .module('bit.vault')
 
     .controller('vaultController', function ($scope, $rootScope, cipherService, folderService, $q, $state, $stateParams, toastr,
-        syncService, utilsService, $analytics, i18nService, stateService, $timeout, $window) {
+        syncService, utilsService, $analytics, i18nService, stateService, $timeout, $window, collectionService) {
         var stateKey = 'vault',
             state = stateService.getState(stateKey) || {};
 
         $scope.i18n = i18nService;
-        $scope.showFolderCounts = !utilsService.isEdge();
+        $scope.showGroupingCounts = !utilsService.isEdge();
         $scope.disableSearch = utilsService.isEdge();
         document.getElementById('search').focus();
 
@@ -31,6 +31,11 @@ angular
             delayLoad = false;
             $scope.loaded = false;
         }
+        if (!$rootScope.vaultCollections) {
+            $rootScope.vaultCollections = [];
+            delayLoad = false;
+            $scope.loaded = false;
+        }
 
         if (delayLoad) {
             $timeout(setScrollY, 100);
@@ -42,29 +47,32 @@ angular
 
         function loadVault() {
             var decFolders = [];
+            var decCollections = [];
             var decCiphers = [];
-            var promises = [];
 
             var folderPromise = folderService.getAllDecrypted().then(function (folders) {
                 decFolders = folders;
             });
-            promises.push(folderPromise);
+
+            var collectionPromise = collectionService.getAllDecrypted().then(function (collections) {
+                decCollections = collections;
+            });
 
             var cipherPromise = cipherService.getAllDecrypted().then(function (ciphers) {
                 decCiphers = ciphers;
             });
-            promises.push(cipherPromise);
 
-            $q.all(promises).then(function () {
+            $q.all([folderPromise, collectionPromise, cipherPromise]).then(function () {
                 $scope.loaded = true;
                 $rootScope.vaultFolders = decFolders;
+                $rootScope.vaultCollections = decCollections;
                 $rootScope.vaultCiphers = decCiphers;
 
-                if ($scope.showFolderCounts) {
+                if ($scope.showGroupingCounts) {
-                    // compute item count for each folder
+                    // compute item count for each grouping
-                    for (var i = 0; i < decFolders.length; i++) {
+                    for (let i = 0; i < decFolders.length; i++) {
-                        var itemCount = 0;
+                        let itemCount = 0;
-                        for (var j = 0; j < decCiphers.length; j++) {
+                        for (let j = 0; j < decCiphers.length; j++) {
                             if (decCiphers[j].folderId === decFolders[i].id) {
                                 itemCount++;
                             }
@@ -72,6 +80,17 @@ angular
 
                         $rootScope.vaultFolders[i].itemCount = itemCount;
                     }
+                    for (let i = 0; i < decCollections.length; i++) {
+                        let itemCount = 0;
+                        for (let j = 0; j < decCiphers.length; j++) {
+                            if (decCiphers[j].collectionIds &&
+                                decCiphers[j].collectionIds.indexOf(decCollections[i].id) > -1) {
+                                itemCount++;
+                            }
+                        }
+
+                        $rootScope.vaultCollections[i].itemCount = itemCount;
+                    }
                 }
 
                 if (!delayLoad) {
@@ -153,10 +172,10 @@ angular
             }, 200);
         };
 
-        $scope.viewFolder = function (folder) {
+        $scope.viewGrouping = function (grouping) {
             storeState();
             $state.go('viewFolder', {
-                folderId: folder.id || '0',
+                folderId: grouping.id || '0',
                 animation: 'in-slide-left'
             });
         };

src/popup/app/vault/views/vault.html

@@ -9,22 +9,62 @@
     </div>
 </div>
 <div class="content content-tabs">
-    <!-- Folder List -->
+    <!-- Grouping List -->
     <div ng-if="vaultCiphers.length && vaultFolders.length && (!searchText || searchText.length < 2)">
         <div class="list">
-            <div class="list-section" style="padding-bottom: 0;">
+            <div class="list-section" ng-show="favoriteCiphers.length">
+                <div class="list-section-header">
+                    {{::i18n.favorites}}
+                    <span>{{favoriteCiphers.length}}</span>
+                </div>
+                <div class="list-section-items">
+                    <a href="#" stop-click ng-click="viewCipher(cipher)" class="list-section-item condensed"
+                       title="{{::i18n.view}}"
+                       ng-repeat="cipher in favoriteCiphers = (vaultCiphers | filter: {favorite: true} |
+                        orderBy: ['name', 'subTitle']) track by $index">
+                        <action-buttons cipher="cipher"></action-buttons>
+                        <icon cipher="cipher"></icon>
+                        <span class="text">
+                            {{cipher.name}}
+                            <i class="fa fa-share-alt text-muted" ng-if="cipher.organizationId" title="{{::i18n.shared}}"></i>
+                            <i class="fa fa-paperclip text-muted" ng-if="cipher.attachments" title="{{::i18n.attachments}}"></i>
+                        </span>
+                        <span class="detail">{{cipher.subTitle}}</span>
+                    </a>
+                </div>
+            </div>
+            <div class="list-section">
                 <div class="list-section-header">
                     {{::i18n.folders}}
                     <span>{{vaultFolders.length}}</span>
                 </div>
-                <a href="#" stop-click ng-click="viewFolder(folder)" class="list-section-item"
+                <div class="list-section-items">
+                    <a href="#" stop-click ng-click="viewGrouping(folder)" class="list-section-item"
                        ng-repeat="folder in vaultFolders | orderBy: folderSort track by $index">
-                    <i class="fa fa-folder-open text-muted"></i> {{folder.name}}
+                        <i class="fa fa-fw text-muted"
+                           ng-class="{'fa-folder-open': folder.id, 'fa-folder-open-o': !folder.id}"></i>
+                        {{folder.name}}
                         <i class="fa fa-chevron-right fa-lg"></i>
-                    <span class="item-sub-label" ng-if="showFolderCounts">{{folder.itemCount}}</span>
+                        <span class="item-sub-label" ng-if="showGroupingCounts">{{folder.itemCount}}</span>
                     </a>
                 </div>
             </div>
+            <div class="list-section" ng-if="vaultCollections.length">
+                <div class="list-section-header">
+                    {{::i18n.collections}}
+                    <span>{{vaultCollections.length}}</span>
+                </div>
+                <div class="list-section-items">
+                    <a href="#" stop-click ng-click="viewGrouping(collection)" class="list-section-item"
+                       ng-repeat="collection in vaultCollections | orderBy: ['name'] track by $index">
+                        <i class="fa fa-cube fa-fw text-muted"></i>
+                        {{collection.name}}
+                        <i class="fa fa-chevron-right fa-lg"></i>
+                        <span class="item-sub-label" ng-if="showGroupingCounts">{{collection.itemCount}}</span>
+                    </a>
+                </div>
+            </div>
+        </div>
     </div>
     <!-- Search Results List -->
     <div ng-if="vaultCiphers.length && searchText && searchText.length >= 2">