inbox: Add button to open stream popover in stream header.

web/src/inbox_ui.js

@@ -829,6 +829,9 @@ function get_focus_class_for_header() {
             focus_class = ".unread_count";
             break;
         }
+        case COLUMNS.ACTION_MENU: {
+            focus_class = ".inbox-stream-menu";
+        }
     }
 
     return focus_class;

web/src/stream_popover.js

@@ -120,6 +120,10 @@ function build_stream_popover(opts) {
     });
 
     popover_menus.toggle_popover_menu(elt, {
+        // Add a delay to separate `hideOnClick` and `onShow` so that
+        // `onShow` is called after `hideOnClick`.
+        // See https://github.com/atomiks/tippyjs/issues/230 for more details.
+        delay: [100, 0],
         ...left_sidebar_tippy_options,
         onCreate(instance) {
             stream_popover_instance = instance;
@@ -498,4 +502,16 @@ export function register_click_handlers() {
 
         e.stopPropagation();
     });
+
+    $("body").on("click", ".inbox-stream-menu", (e) => {
+        const elt = e.currentTarget;
+        const stream_id = Number.parseInt($(elt).attr("data-stream-id"), 10);
+
+        build_stream_popover({
+            elt,
+            stream_id,
+        });
+
+        e.stopPropagation();
+    });
 }

web/styles/inbox.css

@@ -344,7 +344,8 @@
             top: 1px;
         }
 
-        .inbox-row {
+        .inbox-row,
+        .inbox-header {
             &:focus,
             &:focus-within,
             &:hover {

web/templates/inbox_view/inbox_stream_header_row.hbs

@@ -15,5 +15,12 @@
                 <span class="unread_count tippy-zulip-tooltip on_hover_topic_read" data-stream-id="{{stream_id}}" data-tippy-content="{{t 'Mark as read' }}" role="button" tabindex="0" aria-label="{{t 'Mark as read' }}">{{unread_count}}</span>
             </div>
         </div>
+        <div class="inbox-right-part-wrapper">
+            <div class="inbox-right-part">
+                <div class="inbox-action-button inbox-stream-menu" data-stream-id="{{stream_id}}" tabindex="0">
+                    <i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
+                </div>
+            </div>
+        </div>
     </div>
 </div>