From 109913cbfd0fda1a295cc0d2143215c943516f8a Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sat, 14 Jun 2025 09:44:47 +0300
Subject: [PATCH] Extract top albums to components

---
 .../live/stats_live/index.ex                  | 33 ++++++++
 .../live/stats_live/index.html.heex           | 80 +------------------
 priv/gettext/default.pot                      |  4 +-
 priv/gettext/en/LC_MESSAGES/default.po        |  6 +-
 4 files changed, 41 insertions(+), 82 deletions(-)

diff --git a/lib/music_library_web/live/stats_live/index.ex b/lib/music_library_web/live/stats_live/index.ex
index 605cbc8f..37fbc0a4 100644
--- a/lib/music_library_web/live/stats_live/index.ex
+++ b/lib/music_library_web/live/stats_live/index.ex
@@ -71,6 +71,39 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     """
   end
 
+  attr :albums, :list, required: true
+  attr :title, :string, required: true
+
+  def top_albums_by_period(assigns) do
+    ~H"""
+    <div>
+      <h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-200 mb-3">
+        {@title}
+      </h2>
+      <div class="space-y-2">
+        <div :for={album <- @albums} class="flex items-center space-x-3 p-2">
+          <img
+            class="w-12 h-12 rounded-md object-cover"
+            src={album.cover_url}
+            alt={album.album_title}
+          />
+          <div class="flex-1 min-w-0">
+            <p class="text-xs text-zinc-600 dark:text-zinc-400 truncate">
+              {album.artist_name}
+            </p>
+            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 truncate">
+              {album.album_title}
+            </p>
+          </div>
+          <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-300">
+            {album.play_count}
+          </div>
+        </div>
+      </div>
+    </div>
+    """
+  end
+
   def mount(_params, _session, socket) do
     latest_record = Collection.get_latest_record!()
     recent_tracks = LastFm.get_scrobbled_tracks()
diff --git a/lib/music_library_web/live/stats_live/index.html.heex b/lib/music_library_web/live/stats_live/index.html.heex
index 9f92196d..fbe063d4 100644
--- a/lib/music_library_web/live/stats_live/index.html.heex
+++ b/lib/music_library_web/live/stats_live/index.html.heex
@@ -118,83 +118,9 @@
   </h1>
 
   <div class="mt-5 grid grid-cols-1 lg:grid-cols-3 gap-5">
-    <div>
-      <h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-200 mb-3">
-        {gettext("Last 30 days")}
-      </h2>
-      <div class="space-y-2">
-        <div :for={album <- @top_albums.last_30_days} class="flex items-center space-x-3 p-2">
-          <img
-            class="w-12 h-12 rounded-md object-cover"
-            src={album.cover_url}
-            alt={album.album_title}
-          />
-          <div class="flex-1 min-w-0">
-            <p class="text-xs text-zinc-600 dark:text-zinc-400 truncate">
-              {album.artist_name}
-            </p>
-            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 truncate">
-              {album.album_title}
-            </p>
-          </div>
-          <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-300">
-            {album.play_count}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-200 mb-3">
-        {gettext("Last 90 days")}
-      </h2>
-      <div class="space-y-2">
-        <div :for={album <- @top_albums.last_90_days} class="flex items-center space-x-3 p-2">
-          <img
-            class="w-12 h-12 rounded-md object-cover"
-            src={album.cover_url}
-            alt={album.album_title}
-          />
-          <div class="flex-1 min-w-0">
-            <p class="text-xs text-zinc-600 dark:text-zinc-400 truncate">
-              {album.artist_name}
-            </p>
-            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 truncate">
-              {album.album_title}
-            </p>
-          </div>
-          <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-300">
-            {album.play_count}
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <div>
-      <h2 class="text-base font-semibold text-zinc-900 dark:text-zinc-200 mb-3">
-        {gettext("Last Year")}
-      </h2>
-      <div class="space-y-2">
-        <div :for={album <- @top_albums.last_365_days} class="flex items-center space-x-3 p-2">
-          <img
-            class="w-12 h-12 rounded-md object-cover"
-            src={album.cover_url}
-            alt={album.album_title}
-          />
-          <div class="flex-1 min-w-0">
-            <p class="text-xs text-zinc-600 dark:text-zinc-400 truncate">
-              {album.artist_name}
-            </p>
-            <p class="text-sm font-medium text-zinc-900 dark:text-zinc-300 truncate">
-              {album.album_title}
-            </p>
-          </div>
-          <div class="text-sm font-semibold text-zinc-900 dark:text-zinc-300">
-            {album.play_count}
-          </div>
-        </div>
-      </div>
-    </div>
+    <.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")} />
   </div>
 </div>
 
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 5d1df700..0c6776d8 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -898,10 +898,10 @@ msgstr ""
 
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
-msgid "Last Year"
+msgid "Top Albums"
 msgstr ""
 
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format
-msgid "Top Albums"
+msgid "Last year"
 msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 251c57d6..79de3dbe 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -897,11 +897,11 @@ msgid "Last 90 days"
 msgstr ""
 
 #: lib/music_library_web/live/stats_live/index.html.heex
-#, elixir-autogen, elixir-format
-msgid "Last Year"
+#, elixir-autogen, elixir-format, fuzzy
+msgid "Top Albums"
 msgstr ""
 
 #: lib/music_library_web/live/stats_live/index.html.heex
 #, elixir-autogen, elixir-format, fuzzy
-msgid "Top Albums"
+msgid "Last year"
 msgstr ""