Extract actions_menu

lib/music_library_web/live/artist_live/show.ex

@@ -2,7 +2,7 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
   use MusicLibraryWeb, :live_view
 
   import MusicLibraryWeb.RecordComponents,
-    only: [record_grid: 1, toggle_actions_menu: 1, close_actions_menu: 1, country_label: 1]
+    only: [record_grid: 1, country_label: 1]
 
   alias MusicLibrary.Artists.ArtistInfo
   alias MusicLibrary.{Artists, Records}

lib/music_library_web/live/artist_live/show.html.heex

@@ -6,32 +6,8 @@
         <.country_flag country={@country} />
       </h1>
 
-      <div class="relative flex-none">
-        <button
-          type="button"
-          class="text-zinc-500 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-300"
-          aria-expanded="false"
-          aria-haspopup="true"
-          phx-click={toggle_actions_menu(@artist.musicbrainz_id)}
-        >
-          <span class="sr-only">{gettext("Open options")}</span>
-          <.icon
-            name="hero-ellipsis-vertical"
-            class="-mt-1 h-5 w-5"
-            aria-hidden="true"
-            data-slot="icon"
-          />
-        </button>
-        <.focus_wrap
-          id={"actions-#{@artist.musicbrainz_id}"}
-          class={[
-            "hidden pointer-events-auto absolute right-0 z-10 mt-2 w-48 origin-top-right rounded-md bg-white dark:bg-zinc-800 py-2 shadow-lg ring-1 ring-zinc-900/5 focus:outline-hidden"
-          ]}
-          role="menu"
-          aria-orientation="vertical"
-          aria-labelledby="options-menu-0-button"
-          phx-click-away={close_actions_menu(@artist.musicbrainz_id)}
-        >
+      <.actions_menu id={@artist.musicbrainz_id} background_container_target="#records > li">
+        <:links>
           <.link
             class="block px-3 py-1 text-sm leading-6 text-zinc-900 dark:text-zinc-400 hover:bg-zinc-50 dark:hover:text-zinc-300 dark:hover:bg-zinc-700"
             role="menuitem"
@@ -63,8 +39,8 @@
             />
             {gettext("Refresh info")}
           </.link>
-        </.focus_wrap>
-      </div>
+        </:links>
+      </.actions_menu>
     </div>
 
     <div class="mt-4 flex items-center justify-between">