hotkey: Give feedback when no unreads left in followed topics.

When navigating to the next unread followed topic using
the Shift+N hotkey, we notify the user when there are no more
unread messages in followed topics.

Earlier, the hotkey simply did nothing in such a case.

We use feedback_widget to do so.

Fixes #27604.

web/src/feedback_widget.ts

@@ -152,7 +152,11 @@ export function show(opts: FeedbackWidgetOptions): void {
 
     meta.$container = $("#feedback_container");
 
-    const html = render_feedback_container({});
+    let has_undo_button = true;
+    if (opts.on_undo === undefined) {
+        has_undo_button = false;
+    }
+    const html = render_feedback_container({has_undo_button});
     meta.$container.html(html);
 
     set_up_handlers();

web/src/narrow.js

@@ -12,9 +12,11 @@ import * as compose_fade from "./compose_fade";
 import * as compose_recipient from "./compose_recipient";
 import * as compose_state from "./compose_state";
 import * as condense from "./condense";
+import * as feedback_widget from "./feedback_widget";
 import {Filter} from "./filter";
 import * as hash_parser from "./hash_parser";
 import * as hash_util from "./hash_util";
+import {$t} from "./i18n";
 import * as inbox_ui from "./inbox_ui";
 import * as inbox_util from "./inbox_util";
 import * as left_sidebar_navigation_area from "./left_sidebar_navigation_area";
@@ -776,6 +778,18 @@ export function narrow_to_next_topic(opts = {}) {
         opts.only_followed_topics,
     );
 
+    if (!next_narrow && opts.only_followed_topics) {
+        feedback_widget.show({
+            populate($container) {
+                $container.text(
+                    $t({defaultMessage: "You have no unread messages in followed topics."}),
+                );
+            },
+            title_text: $t({defaultMessage: "You're done!"}),
+        });
+        return;
+    }
+
     if (!next_narrow) {
         return;
     }

web/templates/feedback_container.hbs

@@ -1,7 +1,9 @@
 <div class="float-header">
     <h3 class="light no-margin small-line-height float-left feedback_title"></h3>
     <div class="exit-me float-right">&#215;</div>
+    {{#if has_undo_button}}
         <button class="button small rounded float-right feedback_undo" type="button" name="button"></button>
+    {{/if}}
     <div class="float-clear"></div>
 </div>
 <p class="n-margin feedback_content"></p>