From 35cd81f4a3b9d907469987b47191b73b4f52a643 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 7 Jul 2025 13:40:26 +0100
Subject: [PATCH] Reposition tracklist button

---
 .../live/collection_live/show.html.heex       | 213 +++++++++---------
 1 file changed, 107 insertions(+), 106 deletions(-)

diff --git a/lib/music_library_web/live/collection_live/show.html.heex b/lib/music_library_web/live/collection_live/show.html.heex
index 5d74ccb2..a0405cf1 100644
--- a/lib/music_library_web/live/collection_live/show.html.heex
+++ b/lib/music_library_web/live/collection_live/show.html.heex
@@ -25,112 +25,127 @@
           </span>
         </p>
       </div>
-      <.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
-        <:toggle>
-          <span class="sr-only">{gettext("Actions")}</span>
+      <div>
+        <button
+          :if={@record.selected_release_id}
+          class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
+          phx-click={MusicLibraryWeb.ReleaseComponent.open("release-with-tracks-sheet")}
+        >
+          <span class="sr-only">{gettext("Show Tracks")}</span>
           <.icon
-            name="hero-ellipsis-vertical"
-            class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
+            name="hero-numbered-list"
+            class="-mt-1 h-5 w-5"
             aria-hidden="true"
             data-slot="icon"
           />
-        </:toggle>
-        <.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
-          <.dropdown_link
-            id={"actions-#{@record.id}-edit"}
-            patch={~p"/collection/#{@record}/show/edit"}
-          >
+        </button>
+        <.dropdown id={"actions-#{@record.id}"} placement="bottom-end">
+          <:toggle>
+            <span class="sr-only">{gettext("Actions")}</span>
             <.icon
-              name="hero-pencil-square"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+              name="hero-ellipsis-vertical"
+              class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
               aria-hidden="true"
               data-slot="icon"
             />
-            {gettext("Edit")}
-          </.dropdown_link>
+          </:toggle>
+          <.focus_wrap id={"actions-#{@record.id}-focus-wrap"}>
+            <.dropdown_link
+              id={"actions-#{@record.id}-edit"}
+              patch={~p"/collection/#{@record}/show/edit"}
+            >
+              <.icon
+                name="hero-pencil-square"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Edit")}
+            </.dropdown_link>
 
-          <.dropdown_link
-            id={"actions-#{@record.id}-refresh-cover"}
-            phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
-          >
-            <.icon
-              name="hero-photo"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
-              aria-hidden="true"
-              data-slot="icon"
-            />
-            {gettext("Refresh cover")}
-          </.dropdown_link>
+            <.dropdown_link
+              id={"actions-#{@record.id}-refresh-cover"}
+              phx-click={JS.push("refresh_cover", value: %{id: @record.id})}
+            >
+              <.icon
+                name="hero-photo"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Refresh cover")}
+            </.dropdown_link>
 
-          <.dropdown_link
-            id={"actions-#{@record.id}-refresh-mb-data"}
-            phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
-          >
-            <.icon
-              name="hero-arrow-path"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
-              aria-hidden="true"
-              data-slot="icon"
-            />
-            {gettext("Refresh MB data")}
-          </.dropdown_link>
+            <.dropdown_link
+              id={"actions-#{@record.id}-refresh-mb-data"}
+              phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.id})}
+            >
+              <.icon
+                name="hero-arrow-path"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Refresh MB data")}
+            </.dropdown_link>
 
-          <.dropdown_link
-            id={"actions-#{@record.id}-populate-genres"}
-            phx-click={JS.push("populate_genres", value: %{id: @record.id})}
-          >
-            <.icon
-              name="hero-sparkles"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
-              aria-hidden="true"
-              data-slot="icon"
-            />
-            {gettext("Populate genres")}
-          </.dropdown_link>
+            <.dropdown_link
+              id={"actions-#{@record.id}-populate-genres"}
+              phx-click={JS.push("populate_genres", value: %{id: @record.id})}
+            >
+              <.icon
+                name="hero-sparkles"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Populate genres")}
+            </.dropdown_link>
 
-          <.dropdown_link
-            id={"actions-#{@record.id}-extract-colors-fast"}
-            phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
-          >
-            <.icon
-              name="hero-paint-brush"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
-              aria-hidden="true"
-              data-slot="icon"
-            />
-            {gettext("Extract colors (fast)")}
-          </.dropdown_link>
+            <.dropdown_link
+              id={"actions-#{@record.id}-extract-colors-fast"}
+              phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
+            >
+              <.icon
+                name="hero-paint-brush"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Extract colors (fast)")}
+            </.dropdown_link>
 
-          <.dropdown_link
-            id={"actions-#{@record.id}-extract-colors-slow"}
-            phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
-          >
-            <.icon
-              name="hero-paint-brush"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
-              aria-hidden="true"
-              data-slot="icon"
-            />
-            {gettext("Extract colors (slow)")}
-          </.dropdown_link>
+            <.dropdown_link
+              id={"actions-#{@record.id}-extract-colors-slow"}
+              phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
+            >
+              <.icon
+                name="hero-paint-brush"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Extract colors (slow)")}
+            </.dropdown_link>
 
-          <.dropdown_separator />
-          <.dropdown_link
-            id={"actions-#{@record.id}-delete"}
-            phx-click={JS.push("delete", value: %{id: @record.id})}
-            data-confirm={gettext("Are you sure?")}
-            class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
-          >
-            <.icon
-              name="hero-trash"
-              class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
-              aria-hidden="true"
-              data-slot="icon"
-            />
-            {gettext("Delete")}
-          </.dropdown_link>
-        </.focus_wrap>
-      </.dropdown>
+            <.dropdown_separator />
+            <.dropdown_link
+              id={"actions-#{@record.id}-delete"}
+              phx-click={JS.push("delete", value: %{id: @record.id})}
+              data-confirm={gettext("Are you sure?")}
+              class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
+            >
+              <.icon
+                name="hero-trash"
+                class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
+                aria-hidden="true"
+                data-slot="icon"
+              />
+              {gettext("Delete")}
+            </.dropdown_link>
+          </.focus_wrap>
+        </.dropdown>
+      </div>
     </div>
     <div class="mt-4 md:mt-8">
       <%!-- TODO: replace with OSS version --%>
@@ -223,20 +238,6 @@
               :if={@record.selected_release_id}
               release={Records.Record.selected_release(@record)}
             />
-
-            <button
-              :if={@record.selected_release_id}
-              class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
-              phx-click={MusicLibraryWeb.ReleaseComponent.open("release-with-tracks-sheet")}
-            >
-              <span class="sr-only">{gettext("Show Tracks")}</span>
-              <.icon
-                name="hero-numbered-list"
-                class="-mt-1 h-5 w-5"
-                aria-hidden="true"
-                data-slot="icon"
-              />
-            </button>
           </dd>
         </div>
         <div