Factor out popup menu component.

Factor out the popup menu inside user tooltips into a reusable
component.

app/components/popup_menu_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class PopupMenuComponent < ApplicationComponent
+  include ViewComponent::SlotableV2
+
+  renders_many :items
+end

app/components/popup_menu_component/popup_menu_component.html.erb

@@ -0,0 +1,11 @@
+<div class="popup-menu">
+  <a class="popup-menu-button" href="javascript:void(0)">
+    <i class="fas fa-ellipsis-h"></i>
+  </a>
+
+  <ul class="popup-menu-content">
+    <% items.each do |item| %>
+      <li><%= item %></li>
+    <% end %>
+  </ul>
+</div>

app/components/popup_menu_component/popup_menu_component.js

@@ -0,0 +1,26 @@
+import { delegate } from 'tippy.js';
+import 'tippy.js/dist/tippy.css';
+
+class PopupMenuComponent {
+  static initialize() {
+    delegate("body", {
+      allowHTML: true,
+      interactive: true,
+      theme: "common-tooltip",
+      target: "a.popup-menu-button",
+      placement: "bottom-start",
+      trigger: "click",
+      content: PopupMenuComponent.content,
+    });
+  }
+
+  static content(element) {
+    let $content = $(element).parents(".popup-menu").find(".popup-menu-content");
+    $content.show();
+    return $content.get(0);
+  }
+}
+
+$(document).ready(PopupMenuComponent.initialize);
+
+export default PopupMenuComponent;

app/components/popup_menu_component/popup_menu_component.scss

@@ -0,0 +1,23 @@
+div.popup-menu {
+  a.popup-menu-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    color: var(--muted-text-color);
+
+    &:hover {
+      background-color: var(--subnav-menu-background-color);
+    }
+  }
+
+  ul.popup-menu-content {
+    display: none;
+
+    .icon {
+      width: 1.5em;
+    }
+  }
+}

app/javascript/packs/application.js

@@ -39,6 +39,7 @@ export { default as CurrentUser } from '../src/javascripts/current_user.js';
 export { default as Dtext } from '../src/javascripts/dtext.js';
 export { default as IqdbQuery } from '../src/javascripts/iqdb_queries.js';
 export { default as Note } from '../src/javascripts/notes.js';
+export { default as PopupMenuComponent } from "../../components/popup_menu_component/popup_menu_component.js";
 export { default as Post } from '../src/javascripts/posts.js.erb';
 export { default as PostModeMenu } from '../src/javascripts/post_mode_menu.js';
 export { default as PostTooltip } from '../src/javascripts/post_tooltips.js';

app/javascript/src/javascripts/user_tooltips.js

@@ -25,19 +25,6 @@ UserTooltip.initialize = function () {
     onShow: UserTooltip.on_show,
     onHide: UserTooltip.on_hide,
   });
-
-  delegate("#user-tooltips", {
-    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

@@ -57,29 +57,11 @@
       font-size: 0.75em;
     }
 
-    a.user-tooltip-menu-button {
+    div.popup-menu {
-      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;
-      }
     }
   }
 

app/views/layouts/default.html.erb

@@ -93,6 +93,7 @@
   <div id="tooltips">
     <div id="post-tooltips"></div>
     <div id="user-tooltips"></div>
+    <div id="popup-menus"></div>
   </div>
 
   <script type="application/javascript">

app/views/users/show.html+tooltip.erb

@@ -44,54 +44,45 @@
       <% end %>
     </div>
 
-    <a class="user-tooltip-menu-button" href="javascript:void(0)">
+    <%= render PopupMenuComponent.new do |menu| %>
-      <i class="fas fa-ellipsis-h"></i>
+      <%= menu.item do %>
-    </a>
-
-    <ul class="user-tooltip-menu">
-      <li>
         <%= link_to new_dmail_path(dmail: { to_id: @user.id }) do %>
-          <i class="icon far fa-envelope"></i>
+          <i class="icon far fa-envelope"></i> Send Message
-          Send Message
         <% end %>
-      </li>
+      <% end %>
 
       <% if !@user.is_platinum? %>
-        <li>
+        <%= menu.item do %>
           <%= link_to new_user_upgrade_path(user_id: @user.id) do %>
-            <i class="icon fas fa-gift"></i>
+            <i class="icon fas fa-gift"></i> Gift Upgrade
-            Gift Upgrade
           <% end %>
-        </li>
+        <% end %>
       <% end %>
 
       <% if policy(UserFeedback.new(user: @user)).create? %>
-        <li>
+        <%= menu.item do %>
           <%= link_to new_user_feedback_path(user_feedback: { user_id: @user.id }) do %>
-            <i class="icon fas fa-file-signature"></i>
+            <i class="icon fas fa-file-signature"></i> Give Feedback
-            Give Feedback
           <% end %>
-        </li>
+        <% end %>
       <% end %>
 
       <% if policy(CurrentUser.user).promote? %>
-        <li>
+        <%= menu.item do %>
           <%= link_to edit_admin_user_path(@user.id) do %>
-            <i class="icon fas fa-user-plus"></i>
+            <i class="icon fas fa-user-plus"></i> Promote User
-            Promote User
           <% end %>
-        </li>
+        <% end %>
       <% end %>
 
       <% if policy(Ban.new(user: @user)).create? %>
-        <li>
+        <%= menu.item do %>
           <%= link_to new_ban_path(ban: { user_id: @user.id }) do %>
-            <i class="icon fas fa-user-slash"></i>
+            <i class="icon fas fa-user-slash"></i> Ban User
-            Ban User
           <% end %>
-        </li>
+        <% end %>
       <% end %>
-    </ul>
+    <% end %>
   </div>
 
   <ul class="user-tooltip-stats">