streams: Move subscriber count from channel pills to channel cards.

Previously, the number of subscribers was displayed on channel pills.

This commit removes the subscriber count from the channel pills and
adds it to the channel cards. The count is styled similarly to the
number of group members in group cards, with the text 'N subscribers'
(or '1 subscriber' for single subscribers).

Fixes: #32235.

web/src/stream_card_popover.ts

@@ -6,6 +6,7 @@ import render_stream_card_popover from "../templates/popovers/stream_card_popove
 import * as browser_history from "./browser_history.ts";
 import * as hash_util from "./hash_util.ts";
 import * as modals from "./modals.ts";
+import * as peer_data from "./peer_data.ts";
 import * as popover_menus from "./popover_menus.ts";
 import * as stream_data from "./stream_data.ts";
 import * as sub_store from "./sub_store.ts";
@@ -25,6 +26,7 @@ export function initialize(): void {
             const stream_id_str = $elt.attr("data-stream-id");
             assert(stream_id_str !== undefined);
             stream_id = Number.parseInt(stream_id_str, 10);
+            const subscribers_count = peer_data.get_subscriber_count(stream_id);
 
             instance.setContent(
                 ui_util.parse_html(
@@ -32,6 +34,7 @@ export function initialize(): void {
                         stream: {
                             ...sub_store.get(stream_id),
                         },
+                        subscribers_count,
                     }),
                 ),
             );

web/src/stream_pill.ts

@@ -2,7 +2,6 @@ import assert from "minimalistic-assert";
 
 import render_input_pill from "../templates/input_pill.hbs";
 
-import {$t} from "./i18n.ts";
 import type {InputPillContainer} from "./input_pill.ts";
 import * as peer_data from "./peer_data.ts";
 import * as stream_data from "./stream_data.ts";
@@ -19,14 +18,6 @@ export type StreamPillWidget = InputPillContainer<StreamPill>;
 
 export type StreamPillData = StreamSubscription & {type: "stream"};
 
-function format_stream_name_and_subscriber_count(sub: StreamSubscription): string {
-    const sub_count = peer_data.get_subscriber_count(sub.stream_id);
-    return $t(
-        {defaultMessage: "{stream_name}: {sub_count} users"},
-        {stream_name: sub.name, sub_count},
-    );
-}
-
 export function create_item_from_stream_name(
     stream_name: string,
     current_items: CombinedPill[],
@@ -83,9 +74,6 @@ export function get_user_ids(pill_widget: StreamPillWidget | CombinedPillContain
 export function get_display_value_from_item(item: StreamPill): string {
     const stream = stream_data.get_sub_by_id(item.stream_id);
     assert(stream !== undefined);
-    if (item.show_subscriber_count) {
-        return format_stream_name_and_subscriber_count(stream);
-    }
     return stream.name;
 }
 

web/templates/popovers/stream_card_popover.hbs

@@ -12,6 +12,11 @@
             {{> ../stream_settings/stream_description
               rendered_description=stream.rendered_description}}
         </li>
+        <li role="none" class="popover-menu-list-item text-item italic">
+            {{#tr}}
+            {subscribers_count, plural, =0 {No subscribers} =1 {1 subscriber} other {# subscribers}}
+            {{/tr}}
+        </li>
         <li role="separator" class="popover-menu-separator hidden-for-spectators"></li>
         <li role="none" class="link-item popover-menu-list-item hidden-for-spectators">
             <a role="menuitem" class="open_stream_settings popover-menu-link" tabindex="0">

web/tests/stream_pill.test.cjs

@@ -87,14 +87,8 @@ run_test("create_item", ({override}) => {
 });
 
 run_test("display_value", () => {
-    assert.deepEqual(
-        stream_pill.get_display_value_from_item(denmark_pill),
-        "translated: Denmark: 3 users",
-    );
-    assert.deepEqual(
-        stream_pill.get_display_value_from_item(sweden_pill),
-        "translated: Sweden: 5 users",
-    );
+    assert.deepEqual(stream_pill.get_display_value_from_item(denmark_pill), "Denmark");
+    assert.deepEqual(stream_pill.get_display_value_from_item(sweden_pill), "Sweden");
     sweden_pill.show_subscriber_count = false;
     assert.deepEqual(stream_pill.get_display_value_from_item(sweden_pill), "Sweden");
 });
@@ -125,7 +119,7 @@ run_test("generate_pill_html", () => {
         "<div class='pill 'data-stream-id=\"101\" tabindex=0>\n" +
             '    <span class="pill-label">\n' +
             '        <span class="pill-value">\n' +
-            '<i class="zulip-icon zulip-icon-hashtag stream-privacy-type-icon" aria-hidden="true"></i>            translated: Denmark: 3 users\n' +
+            '<i class="zulip-icon zulip-icon-hashtag stream-privacy-type-icon" aria-hidden="true"></i>            Denmark\n' +
             "        </span></span>\n" +
             '    <div class="exit">\n' +
             '        <a role="button" class="zulip-icon zulip-icon-close pill-close-button"></a>\n' +