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;
+    }
+  }
+}