[staging only] Show Recent Group PMs in right sidebar.

Show up to 10 of your recent group PM conversations in the right
sidebar.  Clicking on the links narrows to the huddle and opens the
compose box for the huddle.  The green circles have opacity
proportional to the number of users present in the huddle.

This is feature flagged to staging only.

Some of this code was written by Allen before commits were squashed.

Known issue: unread counts disappear on certain refresh events.

(imported from commit 3b44665150ba20594d8b0295cb30df03601c1d52)

static/js/activity.js

@@ -199,6 +199,30 @@ function update_users() {
     compose_fade.update_faded_users();
 }
 
+exports.update_huddles = function () {
+    var section = $('#group-pm-list').expectOne();
+
+    var huddles = exports.get_huddles().slice(0, 10);
+
+    if (huddles.length === 0 || !feature_flags.show_huddles) {
+        section.hide();
+        return;
+    }
+
+    var group_pms = _.map(huddles, function (huddle) {
+        return {
+            emails: huddle,
+            name: exports.full_huddle_name(huddle),
+            fraction_present: exports.huddle_fraction_present(huddle, presence_info),
+            short_name: exports.short_huddle_name(huddle)
+        };
+    });
+
+    var html = templates.render('group_pms', {group_pms: group_pms});
+    $('#group-pms').expectOne().html(html);
+    section.show();
+};
+
 function status_from_timestamp(baseline_time, presence) {
     if (presence.website === undefined) {
         return 'offline';
@@ -242,6 +266,7 @@ function focus_ping() {
             }
         });
         update_users();
+        exports.update_huddles();
     });
 }
 
@@ -282,6 +307,7 @@ exports.set_user_statuses = function (users, server_time) {
     });
 
     update_users();
+    exports.update_huddles();
 };
 
 return exports;

static/js/feature_flags.js

@@ -44,6 +44,7 @@ exports.left_side_userlist = page_params.staging ||
 exports.fade_users_when_composing = page_params.staging || is_customer4;
 exports.use_socket = page_params.staging;
 exports.notify_on_send_not_in_view = false;
+exports.show_huddles = page_params.staging;
 
 // Still burning in...
 exports.mark_read_at_bottom = true;

static/js/stream_list.js

@@ -64,7 +64,11 @@ function get_filter_li(type, name) {
     if (type === 'stream') {
         return $("#stream_sidebar_" + subs.stream_id(name));
     } else if (type === "private") {
+        if (name.indexOf(",") < 0) {
             return $("li.user_sidebar_entry[data-email='" + name + "']");
+        } else {
+            return $("li.group-pms-sidebar-entry[data-emails='" + name + "']");
+        }
     }
     return iterate_to_find("#" + type + "_filters > li", name);
 }
@@ -120,6 +124,9 @@ function update_count_in_dom(count_span, value_span, count) {
         else if (count_span.parent().hasClass("user_sidebar_entry")) {
             count_span.parent(".user_sidebar_entry").removeClass("user-with-count");
         }
+        else if (count_span.parent().hasClass("group-pms-sidebar-entry")) {
+            count_span.parent(".group-pms-sidebar-entry").removeClass("group-with-count");
+        }
         value_span.text('');
         return;
     }
@@ -132,6 +139,9 @@ function update_count_in_dom(count_span, value_span, count) {
     else if (count_span.parent().hasClass("user_sidebar_entry")) {
         count_span.parent(".user_sidebar_entry").addClass("user-with-count");
     }
+    else if (count_span.parent().hasClass("group-pms-sidebar-entry")) {
+            count_span.parent(".group-pms-sidebar-entry").addClass("group-with-count");
+    }
     value_span.text(count);
 }
 

static/js/ui.js

@@ -1303,7 +1303,7 @@ $(function () {
         timerender.set_full_datetime(message, time_elem);
     });
 
-    $('#user_presences').on('click', '.selectable_sidebar_block', function (e) {
+    $('#user_presences').expectOne().on('click', '.selectable_sidebar_block', function (e) {
         var email = $(e.target).parents('li').attr('data-email');
         narrow.by('pm-with', email, {trigger: 'sidebar'});
         // The preventDefault is necessary so that clicking the
@@ -1321,6 +1321,14 @@ $(function () {
         popovers.hide_all();
     });
 
+    $('#group-pms').expectOne().on('click', '.selectable_sidebar_block', function (e) {
+        var emails = $(e.target).parents('li').attr('data-emails');
+        narrow.by('pm-with', emails, {trigger: 'sidebar'});
+        e.preventDefault();
+        e.stopPropagation();
+        popovers.hide_all();
+    });
+
     $('#streams_inline_cog').tooltip({ placement: 'left',
                                        animation: false });
 

static/js/zulip.js

@@ -363,6 +363,8 @@ function mark_all_as_read(cont) {
 }
 
 function process_loaded_for_unread(messages) {
+    activity.process_loaded_messages(messages);
+    activity.update_huddles();
     unread.process_loaded_messages(messages);
     update_unread_counts();
 }

static/styles/zulip.css

@@ -410,38 +410,38 @@ a:hover code {
     background-color: #ccd6cc;
 }
 
-#user_presences {
+#user_presences, #group-pms {
     list-style-position: inside; /* Draw the bullets inside our box */
     margin-left: 0;
     overflow-y:  hidden;
 }
-#user_presences:hover {
+#user_presences:hover, #group-pms:hover {
     overflow-y: auto;
 }
 
-#user_presences li:hover {
+#user_presences li:hover, #group-pms li:hover {
     background-color: #e2e8dd;
 }
 
-#user_presences .user_sidebar_entry:hover {
+#user_presences .user_sidebar_entry:hover, #group-pms .group-pms-sidebar-entry:hover {
     cursor: pointer;
 }
 
-#user_presences li {
+#user_presences li, #group-pms li {
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
 }
 
-.user_sidebar_entry .count {
+.user_sidebar_entry .count, .group-pms-sidebar-entry .count {
     display: none;
 }
 
-#user_presences li {
+#user_presences li, #group-pms li {
     list-style-type: none;
 }
 
-.user-status-indicator {
+.user-status-indicator, .group-pm-status-indicator {
     display: block;
     width: 8px;
     height: 8px;
@@ -453,7 +453,7 @@ a:hover code {
     margin-right: 0.5em;
 }
 
-.user_active .user-status-indicator {
+.user_active .user-status-indicator, .group-pm-status-indicator {
     background-color: #44C21D;
     border-color: #44C21D;
 }
@@ -476,7 +476,7 @@ a:hover code {
     border-color: gray;
 }
 
-#user_presences a {
+#user_presences a, #group-pms a {
     color: #333;
 }
 
@@ -533,7 +533,8 @@ ul.filters {
     position: relative;
 }
 
-.user_sidebar_entry .selectable_sidebar_block {
+.user_sidebar_entry .selectable_sidebar_block,
+.group-pms-sidebar-entry .selectable_sidebar_block {
     width: 170px;
     overflow: hidden;
     display: block;
@@ -545,7 +546,12 @@ ul.filters {
     width: 150px;
 }
 
+.group-pms-sidebar-entry.group-with-count .selectable_sidebar_block {
+    width: 170px;
+}
+
 .user_sidebar_entry .count,
+.group-pms-sidebar-entry .count,
 #global_filters .count,
 #stream_filters .count {
     position: absolute;
@@ -559,6 +565,10 @@ ul.filters {
     font-weight: normal;
 }
 
+.group-pms-sidebar-entry .count {
+    right: 2px;
+}
+
 #stream_filters .count,
 #global_filters .count {
     margin-left: 0.5em;
@@ -566,6 +576,7 @@ ul.filters {
 }
 
 .user_sidebar_entry .count,
+.group-pms-sidebar-entry .count,
 #global_filters .count
 {
     line-height: 11px;
@@ -2516,7 +2527,11 @@ li.expanded_subject {
     margin-right: 5px;
 }
 
-#streams_header, #userlist-header, #sharethelove-header {
+#group-pm-list {
+    display: none;
+}
+
+#streams_header, #userlist-header, #sharethelove-header, #group-pm-header {
     border-top: 1px solid #ddd;
     margin-top: 5px;
     margin-right: 10px;

static/templates/group_pms.handlebars

@@ -0,0 +1,10 @@
+{{! User Presence rows }}
+{{#each group_pms}}
+<li data-emails="{{emails}}" class="group-pms-sidebar-entry narrow-filter">
+  <span class="selectable_sidebar_block">
+    <span class="group-pm-status-indicator" style="background:rgba(68,194,29,{{fraction_present}});"></span>
+      <a href="#" data-name="{{name}}" title="{{name}}"  class="">{{short_name}}</a>
+  </span>
+  <span class="count"><span class="value"></span></span>
+</li>
+{{/each}}

templates/zerver/right-sidebar.html

@@ -35,4 +35,11 @@
                  <a id="invite-user-link" href="#invite-user" data-toggle="modal"><i class="icon-vector-plus-sign"></i>Invite coworkers</a>
               {% endif %}
               </div>
+              <div id="group-pm-list">
+                <div id="group-pm-header">
+                  <h4 class='sidebar-title' id='group-pm-title'>RECENT GROUP PMs</h4>
+                </div>
+                <ul id="group-pms" class="filters scrolling_list">
+                </ul>
+              </div>
           </div>