If vault has too many sites, only show a folder list

src/_locales/en/messages.json

@@ -312,8 +312,8 @@
     "description": "Edit"
   },
   "noSitesInList": {
-    "message": "There are no sites in list.",
+    "message": "There are no sites to list.",
-    "description": "There are no sites in list."
+    "description": "There are no sites to list."
   },
   "siteInformation": {
     "message": "Site Information",

src/popup/app/vault/vaultController.js

@@ -75,11 +75,14 @@
         };
 
         $scope.searchSites = function () {
-            if (!$scope.searchText) {
+            if (!$scope.searchText || $scope.searchText.length < 3) {
                 return;
             }
 
-            return function (site) {
+            return searchSite;
+        };
+
+        function searchSite(site) {
             var searchTerm = $scope.searchText.toLowerCase();
             if (site.name && site.name.toLowerCase().indexOf(searchTerm) !== -1) {
                 return true;
@@ -87,10 +90,12 @@
             if (site.username && site.username.toLowerCase().indexOf(searchTerm) !== -1) {
                 return true;
             }
+            if (site.uri && site.uri.toLowerCase().indexOf(searchTerm) !== -1) {
+                return true;
+            }
 
             return false;
-            };
+        }
-        };
 
         $scope.addSite = function () {
             $state.go('addSite', {
@@ -109,6 +114,10 @@
             });
         };
 
+        $scope.viewFolder = function (folder) {
+            // TODO: vault folder page
+        };
+
         $scope.clipboardError = function (e) {
             toastr.info(i18n.browserNotSupportClipboard);
         };

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

@@ -8,7 +8,21 @@
     </div>
 </div>
 <div class="content content-tabs">
-    <div ng-if="vaultSites.length">
+    <div ng-if="vaultSites.length && vaultSites.length >= 100 && vaultFolders.length && (!searchText || searchText.length < 3)">
+        <div class="list">
+            <div class="list-section">
+                <div class="list-section-header">
+                    {{i18n.folders}}
+                </div>
+                <a href="javascript:void(0)" ng-click="viewFolder(folder)" class="list-section-item"
+                   ng-repeat="folder in vaultFolders | orderBy: folderSort">
+                    {{folder.name}}
+                    <i class="fa fa-chevron-right fa-lg"></i>
+                </a>
+            </div>
+        </div>
+    </div>
+    <div ng-if="vaultSites.length && (vaultSites.length < 100 || (searchText && searchText.length >= 3))">
         <div class="list">
             <div class="list-grouped" ng-repeat="folder in vaultFolders | orderBy: folderSort" ng-show="vaultFolders.length">
                 <div ng-if="(vaultSites | filter: { folderId: folder.id } | filter: searchSites()).length">
@@ -17,8 +31,8 @@
                     </div>
                     <a href="javascript:void(0)" ng-click="viewSite(site)"
                        class="list-grouped-item condensed" title="{{i18n.edit}} {{site.name}}"
-                       ng-repeat="site in folderSites = (vaultSites | filter: { folderId: folder.id }
+                       ng-repeat="site in vaultSites | filter: { folderId: folder.id }
-                            | filter: searchSites() | orderBy: ['name', 'username'])">
+                            | filter: searchSites() | orderBy: ['name', 'username']">
                         <span class="btn-list" ng-click="$event.stopPropagation()" title="{{i18n.copyPassword}}" ngclipboard
                               ngclipboard-error="clipboardError(e)" ngclipboard-success="clipboardSuccess(e, i18n.password)"
                               data-clipboard-text="{{site.password}}" ng-class="{'disabled': !site.password}">

src/popup/less/components.less

@@ -431,5 +431,6 @@
         display: block;
         text-align: center;
         padding: 0 10px;
+        width: 100%;
     }
 }