Show all contacts when inbox is empty

background.html

@@ -26,7 +26,7 @@
     </div>
   </script>
   <script type='text/x-tmpl-mustache' id='hint'>
-      <p> Select a contact to start chatting. </p>
+      <p> Select a contact or group to start chatting. </p>
   </script>
   <script type='text/x-tmpl-mustache' id='conversation'>
     <div class='panel'>

js/models/conversations.js

@@ -395,6 +395,17 @@
         }
     },
 
+    fetchAlphabetical: function() {
+        return new Promise(function(resolve) {
+            this.fetch({
+                index: {
+                    name: 'search', // 'search' index on tokens array
+                },
+                limit: 100
+            }).always(resolve);
+        }.bind(this));
+    },
+
     fetchGroups: function(number) {
         return this.fetch({
             index: {

js/views/conversation_search_view.js

@@ -84,8 +84,15 @@
         resetTypeahead: function() {
             this.new_contact_view.$el.hide();
             this.$input.val('').focus();
-            this.typeahead_view.collection.reset([]);
+            if (this.showAllContacts) {
-            this.trigger('hide');
+                this.typeahead.fetchAlphabetical().then(function() {
+                    this.typeahead_view.collection.reset(this.typeahead.models);
+                }.bind(this));
+                this.trigger('show');
+            } else {
+                this.typeahead_view.collection.reset([]);
+                this.trigger('hide');
+            }
         },
 
         maybeNumber: function(number) {

js/views/inbox_view.js

@@ -106,6 +106,12 @@
                 if (inboxCollection.length === 0) {
                     this.hintView.render();
                     this.hintView.$el.prependTo(this.$('.conversation-stack'));
+                    this.searchView.showAllContacts = true;
+                    this.searchView.reset();
+                    this.listenToOnce(inboxCollection, 'add', function() {
+                        this.searchView.showAllContacts = false;
+                        this.searchView.reset();
+                    }.bind(this));
                 }
 
                 new SocketView().render().$el.appendTo(this.$('.socket-status'));