diff --git a/web/src/filter.ts b/web/src/filter.ts
index dda2d35c61..7c3df5dad5 100644
--- a/web/src/filter.ts
+++ b/web/src/filter.ts
@@ -912,7 +912,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;
@@ -1046,6 +1051,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");
}
diff --git a/web/src/message_view_header.ts b/web/src/message_view_header.ts
index 9d1e2632b7..450d0f175c 100644
--- a/web/src/message_view_header.ts
+++ b/web/src/message_view_header.ts
@@ -19,6 +19,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;
@@ -39,27 +41,56 @@ 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) {
+
+ // TODO: If we're not in the recent or inbox view, there should be
+ // a message feed with a declared filter in the center pane. But
+ // because of an initialization order bug, this function gets
+ // called with a filter of `undefined` when loading the web app
+ // with, say, inbox as the home view.
+ //
+ // TODO: Refactor this function to move the inbox/recent cases
+ // into the caller, and this function can always get a Filter object.
+ //
+ // TODO: This ideally doesn't need a special case, we can just use
+ // `filter.get_description` for it.
+ if (filter === undefined || filter.is_in_home()) {
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/combined-feed",
};
}
+
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) {
return {
...icon_data,
@@ -70,6 +101,7 @@ function get_message_view_header_context(filter: Filter | undefined): MessageVie
}),
};
}
+
if (filter._sub) {
// We can now be certain that the narrow
// involves a stream which exists and
@@ -85,6 +117,7 @@ function get_message_view_header_context(filter: Filter | undefined): MessageVie
stream_settings_link: hash_util.channels_settings_edit_url(current_stream, "general"),
};
}
+
return icon_data;
}
diff --git a/web/styles/message_view_header.css b/web/styles/message_view_header.css
index b01afe7a5b..6498db4573 100644
--- a/web/styles/message_view_header.css
+++ b/web/styles/message_view_header.css
@@ -94,6 +94,11 @@
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
diff --git a/web/templates/navbar_icon_and_title.hbs b/web/templates/navbar_icon_and_title.hbs
index 446416cad4..48471d9f77 100644
--- a/web/templates/navbar_icon_and_title.hbs
+++ b/web/templates/navbar_icon_and_title.hbs
@@ -4,3 +4,12 @@
{{/if}}
+{{#if description}}
+ {{description}}
+ {{#if link}}
+
+
+
+ {{/if}}
+
+{{/if}}
diff --git a/web/tests/filter.test.js b/web/tests/filter.test.js
index 65d64049e6..8ad854037a 100644
--- a/web/tests/filter.test.js
+++ b/web/tests/filter.test.js
@@ -1628,11 +1628,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);
}
@@ -1703,6 +1718,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,
@@ -1731,6 +1748,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,