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.
zulip · Apr 23, 2024 · 4eb2ad1 · 4eb2ad1
1 parent 1d58970
commit 4eb2ad1
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 0 deletions.
diff --git a/web/src/message_view_header.ts b/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,19 +40,29 @@ 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: $t({defaultMessage: "/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: $t({defaultMessage: "/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: $t({defaultMessage: "/help/all-messages"}),
         };
     }
     const title = filter.get_title();
@@ -59,6 +71,21 @@ function get_message_view_header_context(filter: Filter | undefined): MessageVie
         title,
         is_spectator: page_params.is_spectator,
     });
+    if (title === "Mentions") {
+        return {
+            ...icon_data,
+            description: $t({defaultMessage: "Messages where you are mentioned."}),
+            link: $t({defaultMessage: "/help/view-your-mentions"}),
+        };
+    } else if (title === "Starred messages") {
+        return {
+            ...icon_data,
+            description: $t({
+                defaultMessage: "Important messages, tasks, and other useful references.",
+            }),
+            link: $t({defaultMessage: "/help/star-a-message#view-your-starred-messages"}),
+        };
+    }
     if (filter.has_operator("channel") && !filter._sub) {
         return {
             ...icon_data,

diff --git a/web/templates/navbar_icon_and_title.hbs b/web/templates/navbar_icon_and_title.hbs
@@ -4,3 +4,13 @@
 <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}}
+