Add unread counts to the user sidebar.

Because of spacing issues in the right sidebar, the unread counts
appear to the left of the person's name, not the right.

It's kinda awesome that this is only 20 lines of code.

(imported from commit f5a4ea27bc4cd2e8157746ce7524a600b638930b)

zephyr/static/js/stream_list.js

@@ -65,9 +65,13 @@ function iterate_to_find(selector, data_name, context) {
     return retval;
 }
 
+// TODO: Now that the unread count functions support the user sidebar
+// as well, we probably should consider moving them to a different file.
 function get_filter_li(type, name) {
     if (type === 'stream') {
         return $("#stream_sidebar_" + subs.stream_id(name));
+    } else if (type === "private") {
+        return $(".user_sidebar_entry > a[data-email='" + name + "']");
     }
     return iterate_to_find("#" + type + "_filters > li", name);
 }
@@ -224,6 +228,11 @@ exports.update_dom_with_unread_counts = function (counts) {
         });
     });
 
+    // counts.pm_count maps people to counts
+    $.each(counts.pm_count, function(person, count) {
+        exports.set_count("private", person, count);
+    });
+
     // integer counts
     exports.set_count("global", "private-message", counts.private_message_count);
     exports.set_count("global", "mentioned-message", counts.mentioned_message_count);

zephyr/static/js/unread.js

@@ -14,7 +14,7 @@ function unread_hashkey(message) {
     if (message.type === 'stream') {
         hashkey = subs.canonicalized_name(message.stream);
     } else {
-        hashkey = message.display_reply_to;
+        hashkey = message.reply_to;
     }
 
     if (unread_counts[message.type][hashkey] === undefined) {
@@ -121,6 +121,7 @@ exports.get_counts = function () {
     res.mentioned_message_count = Object.keys(unread_mentioned).length;
     res.stream_count = {};  // hash by stream -> count
     res.subject_count = {}; // hash of hashes (stream, then subject -> count)
+    res.pm_count = {}; // Hash by email -> count
 
     function only_in_home_view(msgids) {
         return $.grep(msgids, function (msgid) {
@@ -134,7 +135,7 @@ exports.get_counts = function () {
         }
 
         var count = Object.keys(msgs).length;
-        res.stream_count[stream]= count;
+        res.stream_count[stream] = count;
 
         if (narrow.stream_in_home(stream)) {
             res.home_unread_messages += only_in_home_view(Object.keys(msgs)).length;
@@ -151,7 +152,9 @@ exports.get_counts = function () {
 
     var pm_count = 0;
     $.each(unread_counts["private"], function(index, obj) {
-        pm_count += Object.keys(obj).length;
+        var count = Object.keys(obj).length;
+        res.pm_count[index] = count;
+        pm_count += count;
     });
     res.private_message_count = pm_count;
     res.home_unread_messages += pm_count;

zephyr/static/styles/zephyr.css

@@ -231,6 +231,10 @@ a:hover code {
     text-overflow: ellipsis;
 }
 
+.user_sidebar_entry .count {
+    display: none;
+}
+
 #user_presences li.user_active {
     list-style-image: url(/static/images/presence/user-active.png);
 }

zephyr/static/templates/user_presence_row.handlebars

@@ -1,5 +1,5 @@
 {{! User Presence rows }}
 <li class="user_sidebar_entry user_{{type}}">
 <a href="#" data-email="{{email}}" title="{{name}} {{type_desc}}"
- class="{{#if my_fullname}} my_fullname{{/if}}">{{name}}</a>
+ class="{{#if my_fullname}} my_fullname{{/if}}"><span class="count">(<span class="value"></span>) </span>{{name}}</a>
 </li>