buddy_list: Don't rerender whole header when toggling sections.

This will be necessary to get the triangle to rotate when toggled.

web/src/buddy_list.ts

@@ -354,22 +354,59 @@ export class BuddyList extends BuddyListConf {
         }
     }
 
-    render_section_headers(): void {
+    update_section_header_counts(): void {
-        const {
+        const {total_human_subscribers_count, other_users_count, participant_ids_set} =
-            current_sub,
+            this.render_data;
-            total_human_subscribers_count,
+        const subscriber_section_user_count =
+            total_human_subscribers_count - this.participant_user_ids.length;
+
+        const formatted_participants_count = get_formatted_sub_count(participant_ids_set.size);
+        const formatted_sub_users_count = get_formatted_sub_count(subscriber_section_user_count);
+        const formatted_other_users_count = get_formatted_sub_count(other_users_count);
+
+        $("#buddy-list-participants-container .buddy-list-heading-user-count").text(
+            formatted_participants_count,
+        );
+        $("#buddy-list-users-matching-view-container .buddy-list-heading-user-count").text(
+            formatted_sub_users_count,
+        );
+        $("#buddy-list-other-users-container .buddy-list-heading-user-count").text(
+            formatted_other_users_count,
+        );
+
+        $("#buddy-list-participants-section-heading").attr(
+            "data-user-count",
+            participant_ids_set.size,
+        );
+        $("#buddy-list-users-matching-view-section-heading").attr(
+            "data-user-count",
+            subscriber_section_user_count,
+        );
+        $("#buddy-list-users-other-users-section-heading").attr(
+            "data-user-count",
             other_users_count,
-            total_human_users,
+        );
-            hide_headers,
+    }
-            participant_ids_set,
+
-        } = this.render_data;
+    render_section_headers(): void {
+        const {hide_headers, participant_ids_set} = this.render_data;
+        // We only show the participants list if it has members, so updating even if we're updating
+        // the count, that can affect if we show/hide this section.
+        const show_participants_list = !hide_headers && participant_ids_set.size;
+        $("#buddy-list-participants-container").toggleClass("no-display", !show_participants_list);
+        if ($(".buddy-list-subsection-header").children().length) {
+            this.update_section_header_counts();
+            return;
+        }
+
+        const {current_sub, total_human_subscribers_count, other_users_count, total_human_users} =
+            this.render_data;
         $(".buddy-list-subsection-header").empty();
 
         // If we're in the mode of hiding headers, that means we're only showing the "other users"
         // section, so hide the other two sections.
         $("#buddy-list-users-matching-view-container").toggleClass("no-display", hide_headers);
-        const show_participants_list = !hide_headers && participant_ids_set.size;
+
-        $("#buddy-list-participants-container").toggleClass("no-display", !show_participants_list);
         // This is the case where every subscriber is in the participants list. In this case, we
         // hide the "others in this channel" section.
         if (

web/templates/buddy_list/section_header.hbs

@@ -1,4 +1,4 @@
 <h5 id="{{id}}" data-user-count="{{user_count}}" class="buddy-list-heading no-style hidden-for-spectators">
-    {{header_text}} ({{user_count}})
+    {{header_text}} (<span class="buddy-list-heading-user-count">{{user_count}}</span>)
 </h5>
 <i class="buddy-list-section-toggle {{toggle_class}} fa fa-sm {{#if is_collapsed}}fa-caret-right{{else}}fa-caret-down{{/if}}" aria-hidden="true"></i>

web/tests/lib/buddy_list.js

@@ -44,4 +44,5 @@ exports.stub_buddy_list_elements = () => {
     $("#buddy-list-other-users-container .view-all-users-link").length = 0;
     $("#buddy-list-users-matching-view-container .view-all-subscribers-link").remove = noop;
     $("#buddy-list-other-users-container .view-all-users-link").remove = noop;
+    $(".buddy-list-subsection-header").children = () => [];
 };