buddy_list: Add three dot menu beside search button, with invite link.

Fixes part of #31653.

web/src/sidebar_ui.ts

@@ -1,6 +1,8 @@
 import $ from "jquery";
+import type * as tippy from "tippy.js";
 
 import render_left_sidebar from "../templates/left_sidebar.hbs";
+import render_buddy_list_popover from "../templates/popovers/buddy_list_popover.hbs";
 import render_right_sidebar from "../templates/right_sidebar.hbs";
 
 import {buddy_list} from "./buddy_list";
@@ -9,14 +11,18 @@ import {localstorage} from "./localstorage";
 import * as message_lists from "./message_lists";
 import * as message_viewport from "./message_viewport";
 import {page_params} from "./page_params";
+import * as popover_menus from "./popover_menus";
 import * as rendered_markdown from "./rendered_markdown";
 import * as resize from "./resize";
 import * as settings_config from "./settings_config";
 import * as settings_data from "./settings_data";
 import * as spectators from "./spectators";
 import {current_user} from "./state_data";
+import * as ui_util from "./ui_util";
 import {user_settings} from "./user_settings";
 
+let buddy_list_popover_instance: tippy.Instance | undefined;
+
 function save_sidebar_toggle_status(): void {
     const ls = localstorage();
     ls.set("left-sidebar", $("body").hasClass("hide-left-sidebar"));
@@ -81,8 +87,10 @@ export function update_invite_user_option(): void {
         !settings_data.user_can_create_multiuse_invite()
     ) {
         $("#right-sidebar .invite-user-link").hide();
+        $("#buddy-list-menu-icon").hide();
     } else {
         $("#right-sidebar .invite-user-link").show();
+        $("#buddy-list-menu-icon").show();
     }
 }
 
@@ -277,4 +285,29 @@ export function initialize_right_sidebar(): void {
         e.stopPropagation();
         buddy_list.toggle_other_users_section();
     });
+
+    $("#user-list").on("click", "#buddy-list-menu-icon", (e) => {
+        e.stopPropagation();
+        popover_menus.toggle_popover_menu(
+            $("#buddy-list-menu-icon")[0]!,
+            {
+                theme: "popover-menu",
+                placement: "right",
+                onCreate(instance) {
+                    buddy_list_popover_instance = instance;
+                    instance.setContent(ui_util.parse_html(render_buddy_list_popover()));
+                },
+                onHidden() {
+                    if (buddy_list_popover_instance !== undefined) {
+                        buddy_list_popover_instance.destroy();
+                        buddy_list_popover_instance = undefined;
+                    }
+                },
+            },
+            {
+                show_as_overlay_on_mobile: true,
+                show_as_overlay_always: false,
+            },
+        );
+    });
 }

web/styles/right_sidebar.css

@@ -62,9 +62,9 @@ $user_status_emoji_width: 24px;
     }
 }
 
-.buddy-list-section li {
+.buddy-list-section li,
+#userlist-header {
     .user-list-sidebar-menu-icon {
-        visibility: hidden;
         justify-self: stretch;
         display: flex;
         align-items: center;
@@ -104,7 +104,6 @@ $user_status_emoji_width: 24px;
 
     &:hover {
         .user-list-sidebar-menu-icon {
-            visibility: visible;
             cursor: pointer;
             color: var(--color-vdots-visible);
 
@@ -122,6 +121,16 @@ $user_status_emoji_width: 24px;
     list-style-position: inside; /* Draw the bullets inside our box */
     line-height: var(--line-height-sidebar-row);
 
+    .user-list-sidebar-menu-icon {
+        visibility: hidden;
+    }
+
+    li:hover {
+        .user-list-sidebar-menu-icon {
+            visibility: visible;
+        }
+    }
+
     & li {
         overflow: hidden;
         white-space: nowrap;
@@ -352,7 +361,7 @@ $user_status_emoji_width: 24px;
     cursor: pointer;
     display: grid;
     grid-template-rows: var(--line-height-sidebar-row-prominent);
-    grid-template-columns: minmax(0, 1fr);
+    grid-template-columns: minmax(0, 1fr) auto;
     align-items: center;
     margin-right: var(--width-simplebar-scroll-hover);
 
@@ -382,6 +391,11 @@ $user_status_emoji_width: 24px;
         opacity: 1;
         cursor: pointer;
     }
+
+    #buddy-list-menu-icon {
+        justify-content: center;
+        display: grid;
+    }
 }
 
 .right-sidebar-shortcuts {

web/templates/popovers/buddy_list_popover.hbs

@@ -0,0 +1,12 @@
+<div class="popover-menu" id="stream-actions-menu-popover" data-simplebar data-simplebar-tab-index="-1">
+    <ul role="menu" class="popover-menu-list">
+        <li role="none" class="link-item">
+            <a class="invite-user-link popover-menu-link" role="button">
+            <i class="popover-menu-icon zulip-icon zulip-icon-user-plus" aria-hidden="true"></i>
+            <span class="popover-menu-label">
+                {{t 'Invite users to organization' }}
+            </span>
+            </a>
+        </li>
+    </ul>
+</div>

web/templates/right_sidebar.hbs

@@ -8,6 +8,9 @@
                     </h4>
                     <i id="user_filter_icon" class="fa fa-search"></i>
                 </span>
+                <span id="buddy-list-menu-icon" class="user-list-sidebar-menu-icon">
+                    <i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i>
+                </span>
             </div>
             <div class="notdisplayed" id="user_search_section">
                 <input class="user-list-filter home-page-input filter_text_input" type="text" autocomplete="off" placeholder="{{t 'Search people' }}" />