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}}