typing: Display several people are typing...

Displays "Several people are typing..." when more than 3 users
are typing to avoid typing notifications in streams being too noisy.

A side effect is it shows the same message in pms too.

static/js/typing_events.js

@@ -19,6 +19,10 @@ import * as typing_data from "./typing_data";
 // and expire its typing status
 const TYPING_STARTED_EXPIRY_PERIOD = 15000; // 15s
 
+// If number of users typing exceed this,
+// we render "Several people are typing..."
+const MAX_USERS_TO_DISPLAY_NAME = 3;
+
 // Note!: There are also timing constants in typing_status.js
 // that make typing indicators work.
 
@@ -50,10 +54,17 @@ function get_users_typing_for_narrow() {
 export function render_notifications_for_narrow() {
     const user_ids = get_users_typing_for_narrow();
     const users_typing = user_ids.map((user_id) => people.get_by_user_id(user_id));
-    if (users_typing.length === 0) {
+    const num_of_users_typing = users_typing.length;
+
+    if (num_of_users_typing === 0) {
         $("#typing_notifications").hide();
     } else {
-        $("#typing_notifications").html(render_typing_notifications({users: users_typing}));
+        $("#typing_notifications").html(
+            render_typing_notifications({
+                users: users_typing,
+                several_users: num_of_users_typing >= MAX_USERS_TO_DISPLAY_NAME,
+            }),
+        );
         $("#typing_notifications").show();
     }
 }

static/templates/typing_notifications.hbs

@@ -1,6 +1,10 @@
 {{! Typing notifications }}
 <ul id="typing_notification_list">
-    {{#each users}}
-    {{> typing_notification}}
-    {{/each}}
+    {{#if several_users}}
+        <li class="typing_notification">{{t "Several people are typing…" }}</li>
+    {{else}}
+        {{#each users}}
+        {{> typing_notification}}
+        {{/each}}
+    {{/if}}
 </ul>