tooltip: Add counts in tooltip for views in left sidebar.

Earlier, tooltip in left sidebar views had only the navigation list
title shown inside it.

This commit adds more information to the tooltip by including their
respective counts.

Fixes: zulip#25901.

Co-authored-by: ecxtacy <dc.dhruvchouhan@gmail.com>

web/src/tippyjs.ts

@@ -7,11 +7,15 @@ import render_change_visibility_policy_button_tooltip from "../templates/change_
 import render_org_logo_tooltip from "../templates/org_logo_tooltip.hbs";
 import render_tooltip_templates from "../templates/tooltip_templates.hbs";
 
+import * as drafts from "./drafts.ts";
 import {$t} from "./i18n.ts";
 import * as people from "./people.ts";
+import * as scheduled_messages from "./scheduled_messages.ts";
 import * as settings_config from "./settings_config.ts";
+import * as starred_messages from "./starred_messages.ts";
 import * as stream_data from "./stream_data.ts";
 import * as ui_util from "./ui_util.ts";
+import * as unread from "./unread.ts";
 import {user_settings} from "./user_settings.ts";
 import * as util from "./util.ts";
 
@@ -190,8 +194,71 @@ export function initialize(): void {
         appendTo: () => document.body,
         onShow(instance) {
             const $container = $(instance.popper).find(".views-tooltip-container");
-            if ($container.attr("data-view-code") === user_settings.web_home_view) {
-                $container.find(".views-tooltip-home-view-note").removeClass("hide");
+            let display_count = 0;
+            const sidebar_option = $container.attr("data-view-code");
+
+            switch (sidebar_option) {
+                case user_settings.web_home_view:
+                    $container.find(".views-tooltip-home-view-note").removeClass("hide");
+                    display_count = unread.get_unread_message_count();
+                    $container.find(".views-message-count").text(
+                        $t(
+                            {
+                                defaultMessage:
+                                    "You have {display_count, plural, =0 {no unread messages} one {# unread message} other {# unread messages}}.",
+                            },
+                            {display_count},
+                        ),
+                    );
+                    break;
+                case "mentions":
+                    display_count = unread.unread_mentions_counter.size;
+                    $container.find(".views-message-count").text(
+                        $t(
+                            {
+                                defaultMessage:
+                                    "You have {display_count, plural, =0 {no unread mentions} one {# unread mention} other {# unread mentions}}.",
+                            },
+                            {display_count},
+                        ),
+                    );
+                    break;
+                case "starred_message":
+                    display_count = starred_messages.get_count();
+                    $container.find(".views-message-count").text(
+                        $t(
+                            {
+                                defaultMessage:
+                                    "You have {display_count, plural, =0 {no starred messages} one {# starred message} other {# starred messages}}.",
+                            },
+                            {display_count},
+                        ),
+                    );
+                    break;
+                case "drafts":
+                    display_count = drafts.draft_model.getDraftCount();
+                    $container.find(".views-message-count").text(
+                        $t(
+                            {
+                                defaultMessage:
+                                    "You have {display_count, plural, =0 {no drafts} one {# draft} other {# drafts}}.",
+                            },
+                            {display_count},
+                        ),
+                    );
+                    break;
+                case "scheduled_message":
+                    display_count = scheduled_messages.get_count();
+                    $container.find(".views-message-count").text(
+                        $t(
+                            {
+                                defaultMessage:
+                                    "You have {display_count, plural, =0 {no scheduled messages} one {# scheduled message} other {# scheduled messages}}.",
+                            },
+                            {display_count},
+                        ),
+                    );
+                    break;
             }
 
             // Since the tooltip is attached to the anchor tag which doesn't

web/templates/left_sidebar.hbs

@@ -89,7 +89,7 @@
                 </span>
             </li>
             <li class="top_left_mentions top_left_row hidden-for-spectators">
-                <a class="left-sidebar-navigation-label-container" href="#narrow/is/mentioned">
+                <a class="left-sidebar-navigation-label-container tippy-left-sidebar-tooltip" href="#narrow/is/mentioned" data-tooltip-template-id="mentions-tooltip-template">
                     <span class="filter-icon">
                         <i class="zulip-icon zulip-icon-at-sign" aria-hidden="true"></i>
                     </span>
@@ -134,7 +134,7 @@
                 <span class="arrow sidebar-menu-icon drafts-sidebar-menu-icon"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>
             </li>
             <li class="top_left_scheduled_messages top_left_row hidden-for-spectators">
-                <a class="left-sidebar-navigation-label-container" href="#scheduled">
+                <a class="left-sidebar-navigation-label-container tippy-left-sidebar-tooltip" href="#scheduled" data-tooltip-template-id="scheduled-tooltip-template">
                     <span class="filter-icon">
                         <i class="zulip-icon zulip-icon-calendar-days" aria-hidden="true"></i>
                     </span>

web/templates/popovers/left_sidebar/left_sidebar_condensed_views_popover.hbs

@@ -17,7 +17,7 @@
         </li>
         {{#if has_scheduled_messages }}
         <li role="none" class="link-item popover-menu-list-item condensed-views-popover-menu-scheduled-messages">
-            <a href="#scheduled" role="menuitem" class="popover-menu-link" tabindex="0">
+            <a href="#scheduled" role="menuitem" class="popover-menu-link tippy-left-sidebar-tooltip" tabindex="0" data-tooltip-template-id="scheduled-tooltip-template">
                 <i class="popover-menu-icon zulip-icon zulip-icon-calendar-days" aria-hidden="true"></i>
                 <span class="label-and-unread-wrapper">
                     <span class="popover-menu-label">{{t 'Scheduled messages' }}</span>

web/templates/tooltip_templates.hbs

@@ -112,6 +112,7 @@
 <template id="all-message-tooltip-template">
     <div class="views-tooltip-container" data-view-code="all_messages">
         <div>{{t 'Combined feed' }}</div>
+        <div class="tootlip-inner-content views-message-count italic hidden-for-spectators"></div>
         <div class="tooltip-inner-content views-tooltip-home-view-note italic hide">{{t 'This is your home view.' }}</div>
     </div>
     {{tooltip_hotkey_hints "A"}}
@@ -119,13 +120,15 @@
 <template id="recent-conversations-tooltip-template">
     <div class="views-tooltip-container" data-view-code="recent_topics">
         <div>{{t 'Recent conversations' }}</div>
-        <div class="tooltip-inner-content views-tooltip-home-view-note italic hide">{{t 'This is your home view.' }}</div>
+        <div class="tootlip-inner-content views-message-count italic hidden-for-spectators"></div>
+        <div class="tooltip-inner-content views-tooltip-home-view-note italic hide hidden-for-spectators">{{t 'This is your home view.' }}</div>
     </div>
     {{tooltip_hotkey_hints "T"}}
 </template>
 <template id="starred-message-tooltip-template">
     <div class="views-tooltip-container" data-view-code="starred_message">
         <div>{{t 'Starred messages' }}</div>
+        <div class="tootlip-inner-content views-message-count italic"></div>
     </div>
     {{tooltip_hotkey_hints "*"}}
 </template>
@@ -137,6 +140,7 @@
 <template id="inbox-tooltip-template">
     <div class="views-tooltip-container" data-view-code="inbox">
         <div>{{t 'Inbox' }}</div>
+        <div class="tootlip-inner-content views-message-count italic"></div>
         <div class="tooltip-inner-content views-tooltip-home-view-note italic hide">{{t 'This is your home view.' }}</div>
     </div>
     {{tooltip_hotkey_hints "Shift" "I"}}
@@ -144,9 +148,16 @@
 <template id="drafts-tooltip-template">
     <div class="views-tooltip-container" data-view-code="drafts">
         <div>{{t 'Drafts' }}</div>
+        <div class="tootlip-inner-content views-message-count italic"></div>
     </div>
     {{tooltip_hotkey_hints "D"}}
 </template>
+<template id="scheduled-tooltip-template">
+    <div class="views-tooltip-container" data-view-code="scheduled_message">
+        <div>{{t 'Scheduled messages'}}</div>
+        <div class="tootlip-inner-content views-message-count italic"></div>
+    </div>
+</template>
 <template id="show-all-direct-messages-template">
     {{t 'Direct message feed' }}
     {{tooltip_hotkey_hints "Shift" "P"}}
@@ -154,6 +165,7 @@
 <template id="mentions-tooltip-template">
     <div class="views-tooltip-container" data-view-code="mentions">
         <div>{{t 'Mentions' }}</div>
+        <div class="tootlip-inner-content views-message-count italic"></div>
     </div>
 </template>
 <template id="filter-streams-tooltip-template">