stream_list: Add tooltip in left sidebar when clicking opens feed.

web/src/stream_list.ts

@@ -1,8 +1,10 @@
 import $ from "jquery";
 import _ from "lodash";
 import assert from "minimalistic-assert";
+import * as tippy from "tippy.js";
 
 import render_filter_topics from "../templates/filter_topics.hbs";
+import render_go_to_channel_feed_tooltip from "../templates/go_to_channel_feed_tooltip.hbs";
 import render_stream_privacy from "../templates/stream_privacy.hbs";
 import render_stream_sidebar_row from "../templates/stream_sidebar_row.hbs";
 import render_stream_subheader from "../templates/streams_subheader.hbs";
@@ -29,6 +31,7 @@ import * as stream_topic_history from "./stream_topic_history";
 import * as stream_topic_history_util from "./stream_topic_history_util";
 import * as sub_store from "./sub_store";
 import type {StreamSubscription} from "./sub_store";
+import {LONG_HOVER_DELAY} from "./tippyjs";
 import * as topic_list from "./topic_list";
 import * as topic_list_data from "./topic_list_data";
 import * as ui_util from "./ui_util";
@@ -827,6 +830,7 @@ export function initialize({
     build_stream_list(false);
     update_subscribe_to_more_streams_link();
     initialize_stream_cursor();
+    initialize_tippy_tooltips();
     set_event_handlers({on_stream_click});
 
     $("#stream_filters").on("click", ".show-more-topics", (e) => {
@@ -846,6 +850,23 @@ export function initialize({
     });
 }
 
+export function initialize_tippy_tooltips(): void {
+    tippy.default("#stream_filters li .subscription_block .stream-name", {
+        delay: LONG_HOVER_DELAY,
+        onShow(instance) {
+            const stream_id = stream_id_for_elt($(instance.reference).parents("li.narrow-filter"));
+            const current_narrow_stream_id = narrow_state.stream_id();
+            const current_topic = narrow_state.topic();
+            if (!(current_narrow_stream_id === stream_id && current_topic)) {
+                return false;
+            }
+            instance.setContent(ui_util.parse_html(render_go_to_channel_feed_tooltip()));
+            return undefined;
+        },
+        appendTo: () => document.body,
+    });
+}
+
 export function set_event_handlers({
     on_stream_click,
 }: {

web/templates/go_to_channel_feed_tooltip.hbs

@@ -0,0 +1,2 @@
+<div>{{t "Go to channel feed"}}</div>
+{{tooltip_hotkey_hints "s"}}