cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify scrobbled tracks layout

Browse Source 
Remove no results view
This commit is contained in:
Claudio Ortolina
2025-09-16 21:01:44 +03:00
parent 08a42e3edc
commit f42f050de0
4 changed files with 74 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
+38 -41
View File
@@ -59,37 +59,28 @@
</div>
</div>
<div
:if={@tracks_empty?}
class="mt-8 p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
>
<.icon name="hero-musical-note" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
<p class="text-zinc-600 dark:text-zinc-400">
{gettext("No scrobbled tracks found")}
</p>
<p :if={@track_list_params.query != ""} class="text-sm text-zinc-500 dark:text-zinc-500 mt-2">
{gettext("Try adjusting your search or clearing the filter")}
</p>
</div>
<div :if={!@tracks_empty?} class="mt-6">
<div id="tracks" phx-update="stream" class="grid gap-4">
<div
id="empty-state"
<div class="mt-6">
<ul
class="divide-y divide-zinc-100 dark:divide-zinc-300/20 mt-5"
role="list"
id="tracks"
phx-update="stream"
>
<li
id="no-scrobbled-tracks"
class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
>
<.icon name="hero-musical-note" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
<p class="text-zinc-600 dark:text-zinc-400">
{gettext("No scrobbled tracks found")}
</p>
</div>
</li>
<div
<li
:for={{id, track} <- @streams.tracks}
id={id}
class="bg-white dark:bg-zinc-800 p-4 rounded-lg shadow-sm border border-zinc-200 dark:border-zinc-700"
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
>
<div class="flex items-center justify-between">
<div class="flex items-center space-x-4 flex-1 min-w-0">
<div :if={track.cover_url && track.cover_url != ""} class="flex-shrink-0">
<img
@@ -121,32 +112,38 @@
</div>
</div>
<div class="flex items-center space-x-2 ml-4">
<.button
patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}
size="sm"
variant="outline"
>
<.icon name="hero-pencil" class="h-4 w-4" />
<span class="sr-only">{gettext("Edit track")}</span>
</.button>
<.button
<div class="flex items-center">
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
<:toggle>
<div>
<span class="sr-only">{gettext("Actions")}</span>
<.icon
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"
/>
</div>
</:toggle>
<.dropdown_link patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}>
{gettext("Edit")}
</.dropdown_link>
<.dropdown_button
phx-click={
JS.push("delete", value: %{"scrobbled-at-uts": track.scrobbled_at_uts})
|> JS.hide(to: "##{id}")
}
data-confirm={gettext("Are you sure you want to delete this scrobbled track?")}
size="sm"
variant="outline"
class="text-red-600 hover:text-red-800 border-red-200 hover:border-red-300"
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" />
<span class="sr-only">{gettext("Delete track")}</span>
</.button>
</div>
</div>
</div>
{gettext("Delete")}
</.dropdown_button>
</.dropdown>
</div>
</li>
</ul>
<.pagination id={:bottom_pagination} pagination_params={@track_list_params} />
</div>
priv/gettext/default.pot
+4 -20
View File
@@ -15,6 +15,7 @@ msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Are you sure?"
@@ -38,6 +39,7 @@ msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Delete"
@@ -51,6 +53,7 @@ msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.ex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
@@ -912,6 +915,7 @@ msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Actions"
@@ -1332,11 +1336,6 @@ msgstr[1] ""
msgid "Album name"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Are you sure you want to delete this scrobbled track?"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/form_component.ex
#, elixir-autogen, elixir-format
msgid "Artist name"
@@ -1347,11 +1346,6 @@ msgstr ""
msgid "Cover Image URL (optional)"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Delete track"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/form_component.ex
#, elixir-autogen, elixir-format
msgid "Edit Scrobbled Track"
@@ -1362,11 +1356,6 @@ msgstr ""
msgid "Edit Track"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Edit track"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "No scrobbled tracks found"
@@ -1398,11 +1387,6 @@ msgstr ""
msgid "Track updated successfully"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Try adjusting your search or clearing the filter"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/form_component.ex
#, elixir-autogen, elixir-format
msgid "Update Track"
priv/gettext/en/LC_MESSAGES/default.po
+4 -20
View File
@@ -15,6 +15,7 @@ msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Are you sure?"
@@ -38,6 +39,7 @@ msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Delete"
@@ -51,6 +53,7 @@ msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.ex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
@@ -912,6 +915,7 @@ msgstr ""
#: lib/music_library_web/live/collection_live/show.html.heex
#: lib/music_library_web/live/online_store_template_live/index.html.heex
#: lib/music_library_web/live/scrobble_rules_live/index.html.heex
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#: lib/music_library_web/live/wishlist_live/show.html.heex
#, elixir-autogen, elixir-format
msgid "Actions"
@@ -1332,11 +1336,6 @@ msgstr[1] ""
msgid "Album name"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Are you sure you want to delete this scrobbled track?"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/form_component.ex
#, elixir-autogen, elixir-format, fuzzy
msgid "Artist name"
@@ -1347,11 +1346,6 @@ msgstr ""
msgid "Cover Image URL (optional)"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "Delete track"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/form_component.ex
#, elixir-autogen, elixir-format, fuzzy
msgid "Edit Scrobbled Track"
@@ -1362,11 +1356,6 @@ msgstr ""
msgid "Edit Track"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Edit track"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format, fuzzy
msgid "No scrobbled tracks found"
@@ -1398,11 +1387,6 @@ msgstr ""
msgid "Track updated successfully"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/index.html.heex
#, elixir-autogen, elixir-format
msgid "Try adjusting your search or clearing the filter"
msgstr ""
#: lib/music_library_web/live/scrobbled_tracks_live/form_component.ex
#, elixir-autogen, elixir-format, fuzzy
msgid "Update Track"
test/music_library_web/live/scrobbled_tracks_live_test.exs
-11
View File
@@ -96,17 +96,6 @@ defmodule MusicLibraryWeb.ScrobbledTracksLiveTest do
assert html =~ "Unique Album Title"
end
test "shows no results message for non-matching search", %{conn: conn} do
{:ok, index_live, _html} = live(conn, ~p"/scrobbled-tracks")
html =
index_live
|> form("form[phx-submit='search']", %{query: "NonexistentTrack"})
|> render_submit()
assert html =~ "Try adjusting your search"
end
end
describe "Edit track" do