Add hint for users with no groups or contacts

If you have no contacts or groups, display a hint about phone numbers.

// FREEBIE

js/views/conversation_search_view.js

@@ -35,6 +35,7 @@
                 if (this.maybeNumber(query)) {
                     this.new_contact_view.model.set('id', query);
                     this.new_contact_view.render().$el.show();
+                    this.hideHints();
                 } else {
                     this.new_contact_view.$el.hide();
                 }
@@ -82,11 +83,16 @@
         },
 
         resetTypeahead: function() {
+            this.hideHints();
             this.new_contact_view.$el.hide();
             this.$input.val('').focus();
             if (this.showAllContacts) {
                 this.typeahead.fetchAlphabetical().then(function() {
-                    this.typeahead_view.collection.reset(this.typeahead.models);
+                    if (this.typeahead.length > 0) {
+                        this.typeahead_view.collection.reset(this.typeahead.models);
+                    } else {
+                        this.showHints();
+                    }
                 }.bind(this));
                 this.trigger('show');
             } else {
@@ -95,6 +101,24 @@
             }
         },
 
+        showHints: function() {
+            if (!this.hintView) {
+                this.hintView = new Whisper.HintView({
+                    className: 'contact placeholder',
+                    content: "Enter a phone number to add a contact."
+                }).render();
+                this.hintView.$el.insertAfter(this.$input);
+            }
+            this.hintView.$el.show();
+        },
+
+        hideHints: function() {
+            if (this.hintView) {
+                this.hintView.remove();
+                this.hintView = null;
+            }
+        },
+
         maybeNumber: function(number) {
             return number.match(/^\+?[0-9]*$/);
         }

js/views/hint_view.js

@@ -6,7 +6,12 @@
     window.Whisper = window.Whisper || {};
 
     Whisper.HintView = Whisper.View.extend({
-        className: 'conversation placeholder',
         templateName: 'hint',
+        initialize: function(options) {
+            this.content = options.content;
+        },
+        render_attributes: function() {
+            return { content: this.content };
+        }
     });
 })();

js/views/inbox_view.js

@@ -102,7 +102,10 @@
                     this.inboxListView.$el.hide();
                 });
 
-                this.hintView = new Whisper.HintView();
+                this.hintView = new Whisper.HintView({
+                    className: 'conversation placeholder',
+                    content: "Select a contact or group to start chatting."
+                });
                 if (inboxCollection.length === 0) {
                     this.hintView.render();
                     this.hintView.$el.prependTo(this.$('.conversation-stack'));
@@ -139,6 +142,7 @@
             },
             hideHints: function() {
                 this.hintView.remove();
+                this.searchView.hideHints();
             },
             openConversation: function(e, conversation) {
                 this.hideHints();