Make top albums clickable

lib/music_library_web/live/stats_live/index.ex

@@ -71,8 +71,23 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     """
   end
 
+  defp navigate_to_record(collected_releases, wishlisted_releases, musicbrainz_id) do
+    cond do
+      record_id = tracked_record?(collected_releases, musicbrainz_id) ->
+        JS.navigate(~p"/collection/#{record_id}")
+
+      record_id = tracked_record?(wishlisted_releases, musicbrainz_id) ->
+        JS.navigate(~p"/wishlist/#{record_id}")
+
+      true ->
+        nil
+    end
+  end
+
   attr :albums, :list, required: true
   attr :title, :string, required: true
+  attr :collected_releases, :list, required: true
+  attr :wishlisted_releases, :list, required: true
 
   def top_albums_by_period(assigns) do
     ~H"""
@@ -81,7 +96,17 @@ defmodule MusicLibraryWeb.StatsLive.Index do
         {@title}
       </h2>
       <div class="space-y-2">
-        <div :for={album <- @albums} class="flex items-center space-x-3 p-2">
+        <div
+          :for={album <- @albums}
+          phx-click={
+            navigate_to_record(@collected_releases, @wishlisted_releases, album.album_musicbrainz_id)
+          }
+          class={[
+            "flex items-center space-x-3 p-2",
+            tracked_record?(@collected_releases ++ @wishlisted_releases, album.album_musicbrainz_id) &&
+              "cursor-pointer"
+          ]}
+        >
           <img
             class="w-12 h-12 rounded-md object-cover"
             src={album.cover_url}

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

@@ -74,9 +74,24 @@
   </h1>
 
   <div class="mt-5 grid grid-cols-1 lg:grid-cols-3 gap-5">
-    <.top_albums_by_period albums={@top_albums.last_30_days} title={gettext("Last 30 days")} />
-    <.top_albums_by_period albums={@top_albums.last_90_days} title={gettext("Last 90 days")} />
-    <.top_albums_by_period albums={@top_albums.last_365_days} title={gettext("Last year")} />
+    <.top_albums_by_period
+      albums={@top_albums.last_30_days}
+      title={gettext("Last 30 days")}
+      collected_releases={@top_albums.collected_releases}
+      wishlisted_releases={@top_albums.wishlisted_releases}
+    />
+    <.top_albums_by_period
+      albums={@top_albums.last_90_days}
+      title={gettext("Last 90 days")}
+      collected_releases={@top_albums.collected_releases}
+      wishlisted_releases={@top_albums.wishlisted_releases}
+    />
+    <.top_albums_by_period
+      albums={@top_albums.last_365_days}
+      title={gettext("Last year")}
+      collected_releases={@top_albums.collected_releases}
+      wishlisted_releases={@top_albums.wishlisted_releases}
+    />
   </div>
 </div>