users: add dropdown actions to username tooltips.

app/javascript/src/javascripts/user_tooltips.js

@@ -25,6 +25,19 @@ UserTooltip.initialize = function () {
     onShow: UserTooltip.on_show,
     onHide: UserTooltip.on_hide,
   });
+
+  delegate("body", {
+    allowHTML: true,
+    interactive: true,
+    theme: "common-tooltip",
+    target: ".user-tooltip-menu-button",
+    placement: "bottom",
+    touch: false,
+    trigger: "click",
+    content: (element) => {
+      return $(element).parents(".user-tooltip").find(".user-tooltip-menu").get(0);
+    }
+  });
 };
 
 UserTooltip.on_show = async function (instance) {

app/javascript/src/styles/specific/user_tooltips.scss

@@ -6,9 +6,9 @@
     margin-bottom: 1em;
     display: grid;
     grid:
-      "avatar header-top"
-      "avatar header-bottom" /
-      32px 1fr;
+      "avatar header-top menu"
+      "avatar header-bottom menu" /
+      32px 1fr 32px;
     column-gap: 0.25em;
 
     .user-tooltip-avatar {
@@ -54,6 +54,31 @@
       color: var(--muted-text-color);
       font-size: 0.75em;
     }
+
+    a.user-tooltip-menu-button {
+      color: var(--muted-text-color);
+      grid-area: menu;
+      align-self: center;
+      text-align: center;
+      width: 28px;
+      height: 28px;
+      line-height: 28px;
+      border-radius: 50%;
+
+      &:hover {
+        background-color: var(--subnav-menu-background-color);
+      }
+    }
+
+    > ul.user-tooltip-menu {
+      display: none;
+    }
+
+    ul.user-tooltip-menu {
+      .icon {
+        width: 1.5em;
+      }
+    }
   }
 
   .user-tooltip-stats {