Add subscribe button in narrowed view when stream has no messages.

A temporary message appears on successful subscription, with a button
offering to unsubscribe in case the user subscribed by accident.

frontend_tests/node_tests/templates.js

@@ -606,7 +606,7 @@ function render(template_name, args) {
     html += render('bookend', args);
 
     global.write_test_output("bookend.handlebars", html);
-    assert.equal($(html).text().trim(), 'subscribed to stream');
+    assert.equal($(html).text().trim(), "subscribed to stream\n    \n        \n            \n            Unsubscribe");
 }());
 
 (function unsubscribed_trailing_bookend() {

static/js/click_handlers.js

@@ -276,10 +276,6 @@ $(function () {
         compose.start('private', {trigger: 'empty feed message'});
         e.preventDefault();
     });
-    $('.empty_feed_join').click(function (e) {
-        subs.show_and_focus_on_narrow();
-        e.preventDefault();
-    });
 
     function handle_compose_click(e) {
         // Don't let clicks in the compose area count as

static/js/message_list.js

@@ -364,9 +364,7 @@ exports.MessageList.prototype = {
         }
         var trailing_bookend_content, subscribed = stream_data.is_subscribed(stream);
         if (subscribed) {
-            if (this.last_message_historical) {
             trailing_bookend_content = this.subscribed_bookend_content(stream);
-            }
         } else {
             if (!this.last_message_historical) {
                 trailing_bookend_content = this.unsubscribed_bookend_content(stream);

static/js/message_list_view.js

@@ -512,7 +512,16 @@ MessageListView.prototype = {
         if (last_message_group !== undefined) {
             list.last_message_historical = _.last(last_message_group.message_containers).msg.historical;
         }
+
+        var stream_name = narrow.stream();
+        if (stream_name !== undefined) {
+            // If user narrows to a stream, doesn't update
+            // trailing bookend if user is subscribed.
+            var sub = stream_data.get_sub(stream_name);
+            if (!sub.subscribed) {
                 list.update_trailing_bookend();
+            }
+        }
 
         if (list === current_msg_list) {
             // Update the fade.

static/js/subs.js

@@ -804,6 +804,25 @@ $(function () {
         }
     });
 
+    $('.empty_feed_sub_unsub').click(function (e) {
+        e.preventDefault();
+
+        $('#subscription-status').hide();
+        var stream_name = narrow.stream();
+        if (stream_name === undefined) {
+            return;
+        }
+        var sub = stream_data.get_sub(stream_name);
+
+        if (sub.subscribed) {
+            ajaxUnsubscribe(stream_name);
+        } else {
+            ajaxSubscribe(stream_name);
+        }
+        $('.empty_feed_notice').hide();
+        $('#empty_narrow_message').show();
+    });
+
     $("#subscriptions_table").on("show", ".subscription_settings", function (e) {
         var subrow = $(e.target).closest('.subscription_row');
         var colorpicker = subrow.find('.colorpicker');

static/styles/zulip.css

@@ -2649,6 +2649,10 @@ div.floating_recipient {
     margin-right: 10px;
 }
 
+.sub_button_row {
+    text-align: center;
+}
+
 button.primary {
     background-color: #89a0b3;
     padding: 2px;
@@ -2822,6 +2826,16 @@ button.topic_edit_cancel {
     text-align: center;
 }
 
+#subscription-status {
+    width: 200px;
+    position: absolute;
+    left: 50%;
+    margin-left: -100px;
+    bottom: 30px;
+    text-align: center;
+    border-radius: 2px;
+}
+
 #empty_narrow_private_message p,
 #empty_narrow_message p {
     text-align: center;

static/templates/bookend.handlebars

@@ -3,12 +3,14 @@
 {{#if bookend_content}}
 <div class="{{#if trailing}}trailing_bookend{{/if}} bookend sub-unsub-message">
     <span>{{bookend_content}}</span>
-    {{^subscribed}}
     <div class="sub_button_row">
         <button class="btn stream_sub_unsub_button btn-default" type="button" name="subscription">
+            {{#if subscribed}}
+            Unsubscribe
+            {{else}}
             Subscribe
+            {{/if}}
         </button>
     </div>
-    {{/subscribed}}
 </div>
 {{/if}}

templates/zerver/home.html

@@ -37,9 +37,12 @@
             {{ _('start the conversation') }}</a>?</p>
       </div>
       <div id="nonsubbed_stream_narrow_message" class="empty_feed_notice">
-        <h4>{{ _("You aren't subscribed to this stream!") }}</h4>
-
-        <p>{{ _('Want to') }} <a href="#" class="empty_feed_join">{{ _('join it') }}</a>?</p>
+        <h4>{{ _("You aren't subscribed to this stream and nobody has talked about that yet!") }}</h4>
+        <div class="sub_button_row">
+          <button class="btn empty_feed_sub_unsub btn-default" type="button" name="subscription">
+            Subscribe
+          </button>
+        </div>
       </div>
       <div id="empty_star_narrow_message" class="empty_feed_notice">
         <h4>{{ _("You haven't starred anything yet!") }}</h4>