Simplify scrobbled tracks layout

Remove no results view

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

@@ -59,94 +59,91 @@
   </div>
 </div>
 
-<div
+<div class="mt-6">
-  :if={@tracks_empty?}
+  <ul
-  class="mt-8 p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
+    class="divide-y divide-zinc-100 dark:divide-zinc-300/20 mt-5"
->
+    role="list"
-  <.icon name="hero-musical-note" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
+    id="tracks"
-  <p class="text-zinc-600 dark:text-zinc-400">
+    phx-update="stream"
-    {gettext("No scrobbled tracks found")}
+  >
-  </p>
+    <li
-  <p :if={@track_list_params.query != ""} class="text-sm text-zinc-500 dark:text-zinc-500 mt-2">
+      id="no-scrobbled-tracks"
-    {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"
       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 class="flex items-center space-x-4 flex-1 min-w-0">
+        <div :if={track.cover_url && track.cover_url != ""} class="flex-shrink-0">
-          <div :if={track.cover_url && track.cover_url != ""} class="flex-shrink-0">
+          <img
-            <img
+            class="w-12 h-12 rounded-md object-cover"
-              class="w-12 h-12 rounded-md object-cover"
+            src={track.cover_url}
-              src={track.cover_url}
+            alt={"Cover for " <> track.album.title}
-              alt={"Cover for " <> track.album.title}
+            onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
-              onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
+          />
-            />
+        </div>
-          </div>
+        <div :if={!track.cover_url || track.cover_url == ""} class="flex-shrink-0">
-          <div :if={!track.cover_url || track.cover_url == ""} class="flex-shrink-0">
+          <div class="w-12 h-12 bg-zinc-200 dark:bg-zinc-600 rounded-md flex items-center justify-center">
-            <div class="w-12 h-12 bg-zinc-200 dark:bg-zinc-600 rounded-md flex items-center justify-center">
+            <.icon name="hero-musical-note" class="h-6 w-6 text-zinc-400" />
-              <.icon name="hero-musical-note" class="h-6 w-6 text-zinc-400" />
-            </div>
-          </div>
-
-          <div class="min-w-0 flex-1">
-            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
-              {track.title}
-            </p>
-            <p class="text-sm text-zinc-600 dark:text-zinc-400 truncate">
-              {track.artist.name}
-            </p>
-            <p class="text-sm text-zinc-500 dark:text-zinc-500 truncate">
-              {track.album.title}
-            </p>
-            <p class="text-xs text-zinc-400 dark:text-zinc-600 mt-1">
-              {track.scrobbled_at_label}
-            </p>
           </div>
         </div>
 
-        <div class="flex items-center space-x-2 ml-4">
+        <div class="min-w-0 flex-1">
-          <.button
+          <p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
-            patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}
+            {track.title}
-            size="sm"
+          </p>
-            variant="outline"
+          <p class="text-sm text-zinc-600 dark:text-zinc-400 truncate">
-          >
+            {track.artist.name}
-            <.icon name="hero-pencil" class="h-4 w-4" />
+          </p>
-            <span class="sr-only">{gettext("Edit track")}</span>
+          <p class="text-sm text-zinc-500 dark:text-zinc-500 truncate">
-          </.button>
+            {track.album.title}
-          <.button
+          </p>
+          <p class="text-xs text-zinc-400 dark:text-zinc-600 mt-1">
+            {track.scrobbled_at_label}
+          </p>
+        </div>
+      </div>
+
+      <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?")}
+            data-confirm={gettext("Are you sure?")}
-            size="sm"
+            class={[
-            variant="outline"
+              "text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
-            class="text-red-600 hover:text-red-800 border-red-200 hover:border-red-300"
+            ]}
           >
-            <.icon name="hero-trash" class="h-4 w-4" />
+            {gettext("Delete")}
-            <span class="sr-only">{gettext("Delete track")}</span>
+          </.dropdown_button>
-          </.button>
+        </.dropdown>
-        </div>
       </div>
-    </div>
+    </li>
-  </div>
+  </ul>
 
   <.pagination id={:bottom_pagination} pagination_params={@track_list_params} />
 </div>

priv/gettext/default.pot

@@ -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

@@ -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

@@ -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