From d24a4386e2cf7cb63e88e6045e1f6f7b4d7ef001 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Tue, 15 Jul 2025 16:22:36 +0100
Subject: [PATCH] Make top artists rows clickable

---
 .../components/stats_components.ex            | 25 ++++++++++---------
 1 file changed, 13 insertions(+), 12 deletions(-)

diff --git a/lib/music_library_web/components/stats_components.ex b/lib/music_library_web/components/stats_components.ex
index ac76e17c..0df55606 100644
--- a/lib/music_library_web/components/stats_components.ex
+++ b/lib/music_library_web/components/stats_components.ex
@@ -134,7 +134,18 @@ defmodule MusicLibraryWeb.StatsComponents do
     ~H"""
     <div class="mt-4">
       <div class="space-y-2">
-        <div :for={artist <- @artists} class="flex items-center space-x-3 p-2">
+        <div
+          :for={artist <- @artists}
+          phx-click={
+            artist.artist_musicbrainz_id != "" &&
+              JS.navigate(~p"/artists/#{artist.artist_musicbrainz_id}")
+          }
+          class={[
+            "flex items-center space-x-3 p-2",
+            artist.artist_musicbrainz_id != "" &&
+              "cursor-pointer hover:bg-zinc-50 dark:hover:bg-zinc-800"
+          ]}
+        >
           <img
             :if={artist.artist_musicbrainz_id != ""}
             class="w-12 h-12 rounded-md object-cover"
@@ -149,17 +160,7 @@ defmodule MusicLibraryWeb.StatsComponents do
             <.icon name="hero-user" class="w-6 h-6 text-zinc-400" />
           </div>
           <div class="flex-1 min-w-0">
-            <.link
-              :if={artist.artist_musicbrainz_id != ""}
-              class="text-sm font-medium text-zinc-900 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-400 truncate"
-              navigate={~p"/artists/#{artist.artist_musicbrainz_id}"}
-            >
-              {artist.artist_name}
-            </.link>
-            <p
-              :if={artist.artist_musicbrainz_id == ""}
-              class="text-sm font-medium text-zinc-500 dark:text-zinc-400 truncate"
-            >
+            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 hover:text-zinc-700 dark:hover:text-zinc-400 truncate">
               {artist.artist_name}
             </p>
           </div>