From 4584b7bcb82ed95e179dc0938c8c2ed620267bb0 Mon Sep 17 00:00:00 2001 From: Claudio Ortolina Date: Sun, 8 Mar 2026 13:21:33 +0000 Subject: [PATCH] Remove drop down from record set items Have just a bin icon, and rely on drag and drop. This solves a massive performance issue with the page, which is traceable to the Fluxon dropdowns, particularly the Class.merge logic used to merge Tailwind classes --- .../live/record_set_live/index.ex | 72 ++++--------------- .../live/record_set_live/show.ex | 68 ++++-------------- priv/gettext/default.pot | 12 ---- priv/gettext/en/LC_MESSAGES/default.po | 12 ---- .../live/record_set_live/index_test.exs | 36 ---------- .../live/record_set_live/show_test.exs | 17 ----- 6 files changed, 27 insertions(+), 190 deletions(-) diff --git a/lib/music_library_web/live/record_set_live/index.ex b/lib/music_library_web/live/record_set_live/index.ex index 4e25a9ea..53642540 100644 --- a/lib/music_library_web/live/record_set_live/index.ex +++ b/lib/music_library_web/live/record_set_live/index.ex @@ -228,20 +228,6 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do {:noreply, update_record_set_in_list(socket, updated_set)} end - def handle_event("move_up", %{"set-id" => set_id, "record-id" => record_id}, socket) do - record_set = RecordSets.get_record_set!(set_id) - {:ok, updated_set} = RecordSets.move_record_in_set(record_set, record_id, :up) - - {:noreply, update_record_set_in_list(socket, updated_set)} - end - - def handle_event("move_down", %{"set-id" => set_id, "record-id" => record_id}, socket) do - record_set = RecordSets.get_record_set!(set_id) - {:ok, updated_set} = RecordSets.move_record_in_set(record_set, record_id, :down) - - {:noreply, update_record_set_in_list(socket, updated_set)} - end - def handle_event("reorder", %{"set_id" => set_id, "record_ids" => record_ids}, socket) do record_set = RecordSets.get_record_set!(set_id) {:ok, updated_set} = RecordSets.reorder_records_in_set(record_set, record_ids) @@ -387,50 +373,20 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do aria-hidden="true" /> -
- <.dropdown - id={"item-actions-#{@record_set.id}-#{item.record.id}"} - placement="bottom-end" - > - <:toggle> - {gettext("Actions")} - <.icon - name="hero-ellipsis-vertical" - class="size-5 text-zinc-800 dark:text-zinc-200 cursor-pointer" - aria-hidden="true" - data-slot="icon" - /> - - <.dropdown_button - :if={item.position > 0} - phx-click="move_up" - phx-value-set-id={@record_set.id} - phx-value-record-id={item.record.id} - > - {gettext("Move left")} - - <.dropdown_button - :if={item.position < length(@record_set.items) - 1} - phx-click="move_down" - phx-value-set-id={@record_set.id} - phx-value-record-id={item.record.id} - > - {gettext("Move right")} - - <.separator /> - <.dropdown_button - phx-click="remove_record" - phx-value-set-id={@record_set.id} - phx-value-record-id={item.record.id} - data-confirm={gettext("Remove this record from the set?")} - class={[ - "text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!" - ]} - > - {gettext("Remove")} - - -
+

<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />

diff --git a/lib/music_library_web/live/record_set_live/show.ex b/lib/music_library_web/live/record_set_live/show.ex index 7b735ee8..672a8762 100644 --- a/lib/music_library_web/live/record_set_live/show.ex +++ b/lib/music_library_web/live/record_set_live/show.ex @@ -109,47 +109,19 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do aria-hidden="true" /> -
- <.dropdown - id={"item-actions-#{item.record.id}"} - placement="bottom-end" - > - <:toggle> - {gettext("Actions")} - <.icon - name="hero-ellipsis-vertical" - class="size-5 text-zinc-800 dark:text-zinc-200 cursor-pointer" - aria-hidden="true" - data-slot="icon" - /> - - <.dropdown_button - :if={item.position > 0} - phx-click="move_up" - phx-value-record-id={item.record.id} - > - {gettext("Move left")} - - <.dropdown_button - :if={item.position < length(@record_set.items) - 1} - phx-click="move_down" - phx-value-record-id={item.record.id} - > - {gettext("Move right")} - - <.separator /> - <.dropdown_button - phx-click="remove_record" - phx-value-record-id={item.record.id} - data-confirm={gettext("Remove this record from the set?")} - class={[ - "text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!" - ]} - > - {gettext("Remove")} - - -
+

<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />

@@ -277,20 +249,6 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do {:noreply, assign(socket, :record_set, updated_set)} end - def handle_event("move_up", %{"record-id" => record_id}, socket) do - {:ok, updated_set} = - RecordSets.move_record_in_set(socket.assigns.record_set, record_id, :up) - - {:noreply, assign(socket, :record_set, updated_set)} - end - - def handle_event("move_down", %{"record-id" => record_id}, socket) do - {:ok, updated_set} = - RecordSets.move_record_in_set(socket.assigns.record_set, record_id, :down) - - {:noreply, assign(socket, :record_set, updated_set)} - end - def handle_event("reorder", %{"record_ids" => record_ids}, socket) do {:ok, updated_set} = RecordSets.reorder_records_in_set(socket.assigns.record_set, record_ids) diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot index 237ba001..1dd5601b 100644 --- a/priv/gettext/default.pot +++ b/priv/gettext/default.pot @@ -1614,18 +1614,6 @@ msgstr "" msgid "Edit Set" msgstr "" -#: lib/music_library_web/live/record_set_live/index.ex -#: lib/music_library_web/live/record_set_live/show.ex -#, elixir-autogen, elixir-format -msgid "Move left" -msgstr "" - -#: lib/music_library_web/live/record_set_live/index.ex -#: lib/music_library_web/live/record_set_live/show.ex -#, elixir-autogen, elixir-format -msgid "Move right" -msgstr "" - #: lib/music_library_web/live/record_set_live/form.ex #, elixir-autogen, elixir-format msgid "Name" diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po index 2f72e432..7747c69f 100644 --- a/priv/gettext/en/LC_MESSAGES/default.po +++ b/priv/gettext/en/LC_MESSAGES/default.po @@ -1614,18 +1614,6 @@ msgstr "" msgid "Edit Set" msgstr "" -#: lib/music_library_web/live/record_set_live/index.ex -#: lib/music_library_web/live/record_set_live/show.ex -#, elixir-autogen, elixir-format -msgid "Move left" -msgstr "" - -#: lib/music_library_web/live/record_set_live/index.ex -#: lib/music_library_web/live/record_set_live/show.ex -#, elixir-autogen, elixir-format -msgid "Move right" -msgstr "" - #: lib/music_library_web/live/record_set_live/form.ex #, elixir-autogen, elixir-format msgid "Name" diff --git a/test/music_library_web/live/record_set_live/index_test.exs b/test/music_library_web/live/record_set_live/index_test.exs index 408610c6..648f8ecb 100644 --- a/test/music_library_web/live/record_set_live/index_test.exs +++ b/test/music_library_web/live/record_set_live/index_test.exs @@ -135,40 +135,4 @@ defmodule MusicLibraryWeb.RecordSetLive.IndexTest do assert ids_in_order == [r3.id, r1.id, r2.id] end end - - describe "Reorder records" do - test "moves a record left (up)", %{conn: conn} do - {set, [r1, r2 | _]} = record_set_with_records(3) - - {:ok, view, _html} = live(conn, ~p"/record-sets") - - view - |> element( - "button[phx-click='move_up'][phx-value-set-id='#{set.id}'][phx-value-record-id='#{r2.id}']" - ) - |> render_click() - - updated = RecordSets.get_record_set!(set.id) - ids_in_order = Enum.map(updated.items, & &1.record.id) - assert Enum.at(ids_in_order, 0) == r2.id - assert Enum.at(ids_in_order, 1) == r1.id - end - - test "moves a record right (down)", %{conn: conn} do - {set, [r1, r2 | _]} = record_set_with_records(3) - - {:ok, view, _html} = live(conn, ~p"/record-sets") - - view - |> element( - "button[phx-click='move_down'][phx-value-set-id='#{set.id}'][phx-value-record-id='#{r1.id}']" - ) - |> render_click() - - updated = RecordSets.get_record_set!(set.id) - ids_in_order = Enum.map(updated.items, & &1.record.id) - assert Enum.at(ids_in_order, 0) == r2.id - assert Enum.at(ids_in_order, 1) == r1.id - end - end end diff --git a/test/music_library_web/live/record_set_live/show_test.exs b/test/music_library_web/live/record_set_live/show_test.exs index 90867899..0c0c69c9 100644 --- a/test/music_library_web/live/record_set_live/show_test.exs +++ b/test/music_library_web/live/record_set_live/show_test.exs @@ -64,23 +64,6 @@ defmodule MusicLibraryWeb.RecordSetLive.ShowTest do end end - describe "Reorder records" do - test "moves a record right (down)", %{conn: conn} do - {set, [r1, r2 | _]} = record_set_with_records(3) - - {:ok, view, _html} = live(conn, ~p"/record-sets/#{set}") - - view - |> element("button[phx-click='move_down'][phx-value-record-id='#{r1.id}']") - |> render_click() - - updated = RecordSets.get_record_set!(set.id) - ids_in_order = Enum.map(updated.items, & &1.record.id) - assert Enum.at(ids_in_order, 0) == r2.id - assert Enum.at(ids_in_order, 1) == r1.id - end - end - describe "Drag-and-drop reorder" do test "reorders records via reorder event", %{conn: conn} do {set, [r1, r2, r3]} = record_set_with_records(3)