navbar: Describe views in top navbar.

Adds description in views styled like
stream descriptions also adds a help center
link to the appropriate page at the end of
each description.
Fixes #29769.

web/src/filter.ts

@@ -915,7 +915,12 @@ export class Filter {
         return "#"; // redirect to All
     }
 
-    add_icon_data(context: {title: string; is_spectator: boolean}): IconData {
+    add_icon_data(context: {
+        title: string;
+        description?: string;
+        link?: string;
+        is_spectator: boolean;
+    }): IconData {
         // We have special icons for the simple narrows available for the via sidebars.
         const term_types = this.sorted_term_types();
         let icon;
@@ -1049,6 +1054,25 @@ export class Filter {
         return undefined;
     }
 
+    get_description(): {description: string; link: string} | undefined {
+        const term_types = this.sorted_term_types();
+        switch (term_types[0]) {
+            case "is-mentioned":
+                return {
+                    description: $t({defaultMessage: "Messages where you are mentioned."}),
+                    link: "/help/view-your-mentions",
+                };
+            case "is-starred":
+                return {
+                    description: $t({
+                        defaultMessage: "Important messages, tasks, and other useful references.",
+                    }),
+                    link: "/help/star-a-message#view-your-starred-messages",
+                };
+        }
+        return undefined;
+    }
+
     allow_use_first_unread_when_narrowing(): boolean {
         return this.can_mark_messages_read() || this.has_operator("is");
     }

web/src/message_view_header.ts

@@ -18,6 +18,8 @@ import type {StreamSubscription} from "./sub_store";
 
 type MessageViewHeaderContext = {
     title: string;
+    description?: string;
+    link?: string;
     is_spectator?: boolean;
     sub_count?: string | number;
     formatted_sub_count?: string;
@@ -38,25 +40,39 @@ function get_message_view_header_context(filter: Filter | undefined): MessageVie
     if (recent_view_util.is_visible()) {
         return {
             title: $t({defaultMessage: "Recent conversations"}),
+            description: $t({defaultMessage: "Overview of ongoing conversations."}),
             zulip_icon: "recent",
+            link: "/help/recent-conversations",
         };
     }
     if (inbox_util.is_visible()) {
         return {
             title: $t({defaultMessage: "Inbox"}),
+            description: $t({
+                defaultMessage: "Overview of your conversations with unread messages.",
+            }),
             zulip_icon: "inbox",
+            link: "/help/inbox",
         };
     }
     if (filter === undefined) {
         return {
             title: $t({defaultMessage: "Combined feed"}),
+            description: $t({
+                defaultMessage: "All your messages except those in muted channels and topics.",
+            }),
             zulip_icon: "all-messages",
+            link: "/help/all-messages",
         };
     }
     const title = filter.get_title();
+    const description = filter.get_description()?.description;
+    const link = filter.get_description()?.link;
     assert(title !== undefined);
     const icon_data = filter.add_icon_data({
         title,
+        description,
+        link,
         is_spectator: page_params.is_spectator,
     });
     if (filter.has_operator("channel") && !filter._sub) {

web/styles/zulip.css

@@ -1733,6 +1733,11 @@ div.focused-message-list {
         padding-left: 10px;
         overflow: hidden;
         text-overflow: ellipsis;
+
+        .help_link_widget,
+        .fa {
+            margin: 0;
+        }
     }
 
     /* The very last element in the navbar is the search icon, the second

web/templates/navbar_icon_and_title.hbs

@@ -4,3 +4,12 @@
 <i class="fa fa-{{icon}}" aria-hidden="true"></i>
 {{/if}}
 <span class="message-header-navbar-title">{{title}}</span>
+{{#if description}}
+    <span class="narrow_description rendered_markdown">{{description}}
+        {{#if link}}
+        <a class="help_link_widget" href="{{link}}" target="_blank" rel="noopener noreferrer">
+            <i class="fa fa-question-circle-o" aria-hidden="true"></i>
+        </a>
+        {{/if}}
+    </span>
+{{/if}}

web/tests/filter.test.js

@@ -1602,11 +1602,26 @@ test("navbar_helpers", () => {
         assert.deepEqual(filter.get_title(), test_case.title);
     }
 
+    function test_get_description(test_case) {
+        const filter = new Filter(test_case.terms);
+        const description = filter.get_description();
+
+        if (test_case.description !== undefined && test_case.link !== undefined) {
+            assert.deepEqual(description, {
+                description: test_case.description,
+                link: test_case.link,
+            });
+        } else {
+            assert.strictEqual(description, undefined);
+        }
+    }
+
     function test_helpers(test_case) {
         // debugging tip: add a `console.log(test_case)` here
         test_common_narrow(test_case);
         test_add_icon_data(test_case);
         test_get_title(test_case);
+        test_get_description(test_case);
         test_redirect_url_with_search(test_case);
     }
 
@@ -1677,6 +1692,8 @@ test("navbar_helpers", () => {
             zulip_icon: "star-filled",
             title: "translated: Starred messages",
             redirect_url_with_search: "/#narrow/is/starred",
+            description: "translated: Important messages, tasks, and other useful references.",
+            link: "/help/star-a-message#view-your-starred-messages",
         },
         {
             terms: in_home,
@@ -1705,6 +1722,8 @@ test("navbar_helpers", () => {
             zulip_icon: "at-sign",
             title: "translated: Mentions",
             redirect_url_with_search: "/#narrow/is/mentioned",
+            description: "translated: Messages where you are mentioned.",
+            link: "/help/view-your-mentions",
         },
         {
             terms: is_resolved,