Extract actions_menu

lib/music_library_web/components/add_record_component.ex

@@ -1,8 +1,7 @@
 defmodule MusicLibraryWeb.AddRecordComponent do
   use MusicLibraryWeb, :live_component
 
-  import MusicLibraryWeb.RecordComponents,
+  import MusicLibraryWeb.RecordComponents, only: [format_label: 1, type_label: 1]
-    only: [toggle_actions_menu: 1, close_actions_menu: 1, format_label: 1, type_label: 1]
 
   alias MusicBrainz.ReleaseGroupSearchResult
   alias MusicLibrary.Records
@@ -88,37 +87,9 @@ defmodule MusicLibraryWeb.AddRecordComponent do
             )}
           </p>
         </div>
-        <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(@release_group.id)}
-            phx-click-away={close_actions_menu(@release_group.id)}
-          >
-            <span class="sr-only">{gettext("Choose which format to import")}</span>
-            <.icon name={@icon_name} class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
-          </button>
-          <!--
-          Dropdown menu, show/hide based on menu state.
 
-          Entering: "transition ease-out duration-100"
+        <.actions_menu id={@release_group.id} background_container_target="#records > li">
-            From: "transform opacity-0 scale-95"
+          <:links>
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-          <.focus_wrap
-            id={"actions-#{@release_group.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"
-          >
             <.link
               :for={format <- Records.Record.formats()}
               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"
@@ -131,8 +102,8 @@ defmodule MusicLibraryWeb.AddRecordComponent do
             >
               {format_label(format)}
             </.link>
-          </.focus_wrap>
+          </:links>
-        </div>
+        </.actions_menu>
       </div>
     </li>
     """

lib/music_library_web/components/core_components.ex

@@ -194,6 +194,57 @@ defmodule MusicLibraryWeb.CoreComponents do
     """
   end
 
+  attr :id, :string, required: true
+  attr :class, :string, default: nil
+  attr :background_container_target, :string, required: true
+  slot :links, required: true
+  slot :button, required: false
+
+  def actions_menu(assigns) do
+    ~H"""
+    <div class={["relative flex-none", @class]}>
+      <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(@id, @background_container_target)}
+      >
+        {render_slot(@button) || default_actions_menu_button(%{})}
+      </button>
+      <.focus_wrap
+        id={"actions-#{@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(@id, @background_container_target)}
+      >
+        {render_slot(@links)}
+      </.focus_wrap>
+    </div>
+    """
+  end
+
+  defp default_actions_menu_button(assigns) do
+    ~H"""
+    <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" />
+    """
+  end
+
+  defp toggle_actions_menu(id, background_container_target) do
+    JS.toggle(to: "#actions-#{id}")
+    |> JS.toggle_class("pointer-events-none", to: background_container_target)
+  end
+
+  defp close_actions_menu(id, background_container_target) do
+    JS.hide(to: "#actions-#{id}")
+    |> JS.remove_class("pointer-events-none", to: background_container_target)
+  end
+
   ## JS Commands
 
   def show(js \\ %JS{}, selector) do

lib/music_library_web/components/record_components.ex

@@ -95,42 +95,8 @@ defmodule MusicLibraryWeb.RecordComponents do
             </p>
           </div>
           <%!-- TODO: replace with OSS version --%>
-          <div class="relative flex-none">
+          <.actions_menu id={record.id} background_container_target="#records > li">
-            <button
+            <:links>
-              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(record.id)}
-              phx-click-away={close_actions_menu(record.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>
-            <!--
-              Dropdown menu, show/hide based on menu state.
-
-              Entering: "transition ease-out duration-100"
-                From: "transform opacity-0 scale-95"
-                To: "transform opacity-100 scale-100"
-              Leaving: "transition ease-in duration-75"
-                From: "transform opacity-100 scale-100"
-                To: "transform opacity-0 scale-95"
-            -->
-            <.focus_wrap
-              id={"actions-#{record.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"
-            >
               <.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"
@@ -185,8 +151,8 @@ defmodule MusicLibraryWeb.RecordComponents do
               >
                 {gettext("Delete")}
               </.link>
-            </.focus_wrap>
+            </:links>
-          </div>
+          </.actions_menu>
         </div>
       </li>
     </ul>
@@ -270,42 +236,8 @@ defmodule MusicLibraryWeb.RecordComponents do
             <p class="pointer-events-none mt-2 block truncate text-sm font-medium text-zinc-900 dark:text-zinc-300">
               {record.title}
             </p>
-            <div class="relative flex-none mt-2">
+            <.actions_menu id={record.id} background_container_target="#records > li" class="mt-2">
-              <button
+              <:links>
-                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(record.id)}
-                phx-click-away={close_actions_menu(record.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>
-              <!--
-              Dropdown menu, show/hide based on menu state.
-
-              Entering: "transition ease-out duration-100"
-                From: "transform opacity-0 scale-95"
-                To: "transform opacity-100 scale-100"
-              Leaving: "transition ease-in duration-75"
-                From: "transform opacity-100 scale-100"
-                To: "transform opacity-0 scale-95"
-            -->
-              <.focus_wrap
-                id={"actions-#{record.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"
-              >
                 <.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"
@@ -360,8 +292,8 @@ defmodule MusicLibraryWeb.RecordComponents do
                 >
                   {gettext("Delete")}
                 </.link>
-              </.focus_wrap>
+              </:links>
-            </div>
+            </.actions_menu>
           </div>
           <p class="pointer-events-none block text-sm font-medium text-zinc-500">
             {format_label(record.format)} · {type_label(record.type)}
@@ -450,14 +382,4 @@ defmodule MusicLibraryWeb.RecordComponents do
       country_code
     end
   end
-
-  def toggle_actions_menu(record_id) do
-    JS.toggle(to: "#actions-#{record_id}")
-    |> JS.toggle_class("pointer-events-none", to: "#records > li")
-  end
-
-  def close_actions_menu(record_id) do
-    JS.hide(to: "#actions-#{record_id}")
-    |> JS.remove_class("pointer-events-none", to: "#records > li")
-  end
 end

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">
+      <.actions_menu id={@artist.musicbrainz_id} background_container_target="#records > li">
-        <button
+        <:links>
-          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)}
-        >
           <.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>
+        </:links>
-      </div>
+      </.actions_menu>
     </div>
 
     <div class="mt-4 flex items-center justify-between">

lib/music_library_web/live/collection_live/show.ex

@@ -3,8 +3,6 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
 
   import MusicLibraryWeb.RecordComponents,
     only: [
-      toggle_actions_menu: 1,
-      close_actions_menu: 1,
       format_label: 1,
       type_label: 1,
       release_summary: 1

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

@@ -28,32 +28,8 @@
           )} · {type_label(@record.type)}
         </p>
       </div>
-      <div class="relative flex-none">
+      <.actions_menu id={@record.id} background_container_target="#records > li">
-        <button
+        <:links>
-          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(@record.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-#{@record.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(@record.id)}
-        >
           <.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"
@@ -134,8 +110,8 @@
             />
             {gettext("Delete")}
           </.link>
-        </.focus_wrap>
+        </:links>
-      </div>
+      </.actions_menu>
     </div>
     <div class="mt-4">
       <%!-- TODO: replace with OSS version --%>

lib/music_library_web/live/stats_live/index.ex

@@ -216,16 +216,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     |> DateTime.to_iso8601()
   end
 
-  defp toggle_actions_menu(track_id) do
-    JS.toggle(to: "#actions-#{track_id}")
-    |> JS.toggle_class("pointer-events-none", to: "#scrobble-activity > li")
-  end
-
-  defp close_actions_menu(track_id) do
-    JS.hide(to: "#actions-#{track_id}")
-    |> JS.remove_class("pointer-events-none", to: "#scrobble-activity > li")
-  end
-
   defp resolve_timezone! do
     Application.get_env(:music_library, MusicLibraryWeb)
     |> Keyword.fetch!(:timezone)

lib/music_library_web/live/stats_live/index.html.heex

@@ -220,7 +220,7 @@
             </.link>
           </div>
 
-          <div
+          <.actions_menu
             :if={
               album.metadata.musicbrainz_id !== "" and
                 !tracked_record?(
@@ -228,38 +228,14 @@
                   album.metadata.musicbrainz_id
                 )
             }
-            class="relative flex-none"
+            id={album.scrobbled_at_uts}
+            background_container_target="#records > li"
           >
-            <button
+            <: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(album.scrobbled_at_uts)}
-              phx-click-away={close_actions_menu(album.scrobbled_at_uts)}
-            >
               <span class="sr-only">{gettext("Choose which format to import")}</span>
               <.icon name="hero-star" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
-            </button>
+            </:button>
-            <!--
+            <:links>
-          Dropdown menu, show/hide based on menu state.
-
-          Entering: "transition ease-out duration-100"
-            From: "transform opacity-0 scale-95"
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-            <.focus_wrap
-              id={"actions-#{album.scrobbled_at_uts}"}
-              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"
-            >
               <.link
                 :for={format <- Records.Record.formats()}
                 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"
@@ -275,8 +251,8 @@
               >
                 {format_label(format)}
               </.link>
-            </.focus_wrap>
+            </:links>
-          </div>
+          </.actions_menu>
         </div>
       </div>
     </li>
@@ -345,7 +321,7 @@
             </.link>
           </div>
 
-          <div
+          <.actions_menu
             :if={
               track.album.musicbrainz_id !== "" and
                 !tracked_record?(
@@ -353,38 +329,14 @@
                   track.album.musicbrainz_id
                 )
             }
-            class="relative flex-none"
+            id={track.scrobbled_at_uts}
+            background_container_target="#records > li"
           >
-            <button
+            <: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(track.scrobbled_at_uts)}
-              phx-click-away={close_actions_menu(track.scrobbled_at_uts)}
-            >
               <span class="sr-only">{gettext("Choose which format to import")}</span>
               <.icon name="hero-star" class="-mt-1 h-5 w-5" aria-hidden="true" data-slot="icon" />
-            </button>
+            </:button>
-            <!--
+            <:links>
-          Dropdown menu, show/hide based on menu state.
-
-          Entering: "transition ease-out duration-100"
-            From: "transform opacity-0 scale-95"
-            To: "transform opacity-100 scale-100"
-          Leaving: "transition ease-in duration-75"
-            From: "transform opacity-100 scale-100"
-            To: "transform opacity-0 scale-95"
-        -->
-            <.focus_wrap
-              id={"actions-#{track.scrobbled_at_uts}"}
-              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"
-            >
               <.link
                 :for={format <- Records.Record.formats()}
                 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"
@@ -400,8 +352,8 @@
               >
                 {format_label(format)}
               </.link>
-            </.focus_wrap>
+            </:links>
-          </div>
+          </.actions_menu>
         </div>
       </div>
     </li>

lib/music_library_web/live/wishlist_live/show.ex

@@ -3,8 +3,6 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
 
   import MusicLibraryWeb.RecordComponents,
     only: [
-      toggle_actions_menu: 1,
-      close_actions_menu: 1,
       format_label: 1,
       type_label: 1,
       release_summary: 1

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

@@ -30,32 +30,8 @@
           · {format_label(@record.format)} · {type_label(@record.type)}
         </p>
       </div>
-      <div class="relative flex-none">
+      <.actions_menu id={@record.id} background_container_target="#records > li">
-        <button
+        <:links>
-          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(@record.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-#{@record.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(@record.id)}
-        >
           <.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"
@@ -156,8 +132,8 @@
             />
             {gettext("Delete")}
           </.link>
-        </.focus_wrap>
+        </:links>
-      </div>
+      </.actions_menu>
     </div>
 
     <div class="mt-4">

priv/gettext/default.pot

@@ -123,10 +123,7 @@ msgstr ""
 msgid "No results"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/components/core_components.ex
-#: lib/music_library_web/live/artist_live/show.html.heex
-#: lib/music_library_web/live/collection_live/show.html.heex
-#: lib/music_library_web/live/wishlist_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Open options"
 msgstr ""
@@ -283,7 +280,6 @@ msgstr ""
 msgid "Scrobble activity"
 msgstr ""
 
-#: lib/music_library_web/components/add_record_component.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Choose which format to import"

priv/gettext/en/LC_MESSAGES/default.po

@@ -123,10 +123,7 @@ msgstr ""
 msgid "No results"
 msgstr ""
 
-#: lib/music_library_web/components/record_components.ex
+#: lib/music_library_web/components/core_components.ex
-#: lib/music_library_web/live/artist_live/show.html.heex
-#: lib/music_library_web/live/collection_live/show.html.heex
-#: lib/music_library_web/live/wishlist_live/show.html.heex
 #, elixir-autogen, elixir-format
 msgid "Open options"
 msgstr ""
@@ -283,7 +280,6 @@ msgstr ""
 msgid "Scrobble activity"
 msgstr ""
 
-#: lib/music_library_web/components/add_record_component.ex
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
 msgid "Choose which format to import"