Use tabs for scrobble activity toggle

lib/music_library_web/live/stats_live/index.ex

@@ -227,7 +227,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
      |> assign_top_albums()
      |> assign_top_artists()
      |> assign(
-       scrobble_activity_mode: :albums,
+       scrobble_activity_mode: "albums",
        latest_record: latest_record,
        page_title: gettext("Stats"),
        current_section: :stats,
@@ -274,7 +274,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     {:noreply,
      socket
      |> assign_scrobble_activity(recent_tracks)
-     |> assign(scrobble_activity_mode: String.to_existing_atom(mode))}
+     |> assign(scrobble_activity_mode: mode)}
   end
 
   def handle_info(%{track_count: 0}, socket) do

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

@@ -146,32 +146,27 @@
     </h1>
     <.refresh_lastfm_feed_button />
   </div>
-  <%!-- TODO: replace with OSS version --%>
+  <.tabs id="scrobble-activity" class="mt-4">
-  <span class="mt-5 isolate inline-flex rounded-md shadow-xs">
+    <.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
-    <.button
+      <:tab
-      phx-click={JS.push("set_scrobble_activity_mode", value: %{"mode" => :albums})}
+        name="albums"
-      class={[
+        phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
-        "rounded-l-md rounded-r-none",
-        @scrobble_activity_mode == :albums && "!bg-zinc-100 dark:!bg-zinc-700"
-      ]}
       >
         {gettext("Albums")}
-    </.button>
+      </:tab>
-    <.button
+      <:tab
-      phx-click={JS.push("set_scrobble_activity_mode", value: %{"mode" => :tracks})}
+        name="tracks"
-      class={[
+        phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
-        "-ml-px rounded-r-md rounded-l-none",
-        @scrobble_activity_mode == :tracks && "!bg-zinc-100 dark:!bg-zinc-700"
-      ]}
       >
         {gettext("Tracks")}
-    </.button>
+      </:tab>
-  </span>
+    </.tabs_list>
+
+    <.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
       <ul
-    :if={@scrobble_activity_mode == :albums}
         id="scrobble-activity-albums"
         role="list"
-    class="mt-5 rounded-md px-4 py-5 shadow-sm"
+        class="rounded-md px-4 py-5 shadow-sm"
         phx-update="stream"
       >
         <li :for={{id, album} <- @streams.recent_albums} id={id} class="group">
@@ -286,7 +281,8 @@
                 </.badge>
                 <.link
                   :if={
-                record_id = tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
+                    record_id =
+                      tracked_record?(@collected_releases, album.metadata.musicbrainz_id)
                   }
                   navigate={~p"/collection/#{record_id}"}
                 >
@@ -296,7 +292,8 @@
                 </.link>
                 <.link
                   :if={
-                record_id = tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id)
+                    record_id =
+                      tracked_record?(@wishlisted_releases, album.metadata.musicbrainz_id)
                   }
                   navigate={~p"/wishlist/#{record_id}"}
                 >
@@ -345,11 +342,12 @@
           </div>
         </li>
       </ul>
+    </.tabs_panel>
+    <.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
       <ul
-    :if={@scrobble_activity_mode == :tracks}
         id="scrobble-activity-tracks"
         role="list"
-    class="mt-5 rounded-md px-4 py-5 shadow-sm"
+        class="rounded-md px-4 py-5 shadow-sm"
         phx-update="stream"
       >
         <li :for={{id, track} <- @streams.recent_tracks} id={id} class="group">
@@ -361,7 +359,11 @@
             </span>
             <div class="relative flex space-x-3 items-center justify-between">
               <div class="flex min-w-0 justify-between space-x-4 items-center">
-            <img class="h-12 w-12 rounded-md shadow-sm" src={track.cover_url} alt={track.title} />
+                <img
+                  class="h-12 w-12 rounded-md shadow-sm"
+                  src={track.cover_url}
+                  alt={track.title}
+                />
                 <div>
                   <p
                     :if={track.artist.musicbrainz_id not in @artist_ids}
@@ -489,13 +491,17 @@
                   {gettext("No MB ID")}
                 </.badge>
                 <.link
-              :if={record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)}
+                  :if={
+                    record_id = tracked_record?(@collected_releases, track.album.musicbrainz_id)
+                  }
                   navigate={~p"/collection/#{record_id}"}
                 >
                   <.badge color="green">{gettext("Collected")}</.badge>
                 </.link>
                 <.link
-              :if={record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)}
+                  :if={
+                    record_id = tracked_record?(@wishlisted_releases, track.album.musicbrainz_id)
+                  }
                   navigate={~p"/wishlist/#{record_id}"}
                 >
                   <.badge color="yellow">{gettext("Wishlisted")}</.badge>
@@ -541,6 +547,8 @@
           </div>
         </li>
       </ul>
+    </.tabs_panel>
+  </.tabs>
 </div>
 
 <div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">

test/music_library_web/live/stats_live/index_test.exs

@@ -178,7 +178,7 @@ defmodule MusicLibraryWeb.StatsLive.IndexTest do
         |> assert_has("#album-#{machinarium_soundtrack_track.scrobbled_at_uts}",
           text: "Wishlisted"
         )
-        |> refute_has("p", text: machinarium_soundtrack_track.title)
+        |> assert_has("[hidden] p", text: machinarium_soundtrack_track.title)
         |> assert_has("p", text: machinarium_soundtrack_track.album.title)
         |> assert_has("#album-#{the_last_flight_track.scrobbled_at_uts}", text: "Collected")
         |> assert_has("#album-#{the_mystery_of_time_track.scrobbled_at_uts}",