stream_list: Use unread_counts class for showing unread count.

static/js/stream_list.js

@@ -20,6 +20,7 @@ import * as stream_sort from "./stream_sort";
 import * as topic_list from "./topic_list";
 import * as topic_zoom from "./topic_zoom";
 import * as ui from "./ui";
+import * as ui_util from "./ui_util";
 import * as unread from "./unread";
 
 export let stream_cursor;
@@ -27,24 +28,19 @@ export let stream_cursor;
 let has_scrolled = false;
 
 export function update_count_in_dom(unread_count_elem, count) {
-    const count_span = unread_count_elem.find(".count");
-    const value_span = count_span.find(".value");
+    ui_util.update_unread_count_in_dom(unread_count_elem, count);
 
+    const count_span = unread_count_elem.find(".unread_count");
     if (count === 0) {
-        count_span.hide();
         if (count_span.parent().hasClass("subscription_block")) {
             count_span.parent(".subscription_block").removeClass("stream-with-count");
         }
-        value_span.text("");
         return;
     }
 
-    count_span.show();
-
     if (count_span.parent().hasClass("subscription_block")) {
         count_span.parent(".subscription_block").addClass("stream-with-count");
     }
-    value_span.text(count);
 }
 
 class StreamSidebar {

static/styles/left_sidebar.css

@@ -100,7 +100,7 @@ li.show-more-topics {
         }
     }
 
-    .count {
+    .subscription_block .unread_count {
         margin-right: 15px;
     }
 
@@ -289,7 +289,6 @@ li.top_left_recent_topics {
     font-size: 13px;
 }
 
-#stream_filters .count,
 .topic-unread-count,
 .private_message_count {
     float: right;
@@ -313,7 +312,6 @@ li.top_left_recent_topics {
 }
 
 /* These are true "unread" counts. */
-#stream_filters .count,
 .topic-unread-count,
 .private_message_count {
     background-color: hsl(105, 2%, 50%);

static/templates/stream_sidebar_row.hbs

@@ -10,7 +10,7 @@
 
             <a href="{{uri}}" title="{{name}}" class="stream-name">{{name}}</a>
 
-            <div class="count"><div class="value"></div></div>
+            <span class="unread_count"></span>
         </div>
         <span class="stream-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
     </div>