From 6bef3bed053f7ffe56f59189deb769df458f2c15 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Wed, 18 Dec 2024 11:33:48 +0000
Subject: [PATCH] Add total for collection and wishlist albums in artist view

---
 .../live/artist_live/show.html.heex           | 32 ++++++++++++++++++-
 priv/gettext/default.pot                      | 12 +++++--
 2 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/lib/music_library_web/live/artist_live/show.html.heex b/lib/music_library_web/live/artist_live/show.html.heex
index 2db2e0f7..e5dd22cd 100644
--- a/lib/music_library_web/live/artist_live/show.html.heex
+++ b/lib/music_library_web/live/artist_live/show.html.heex
@@ -57,8 +57,23 @@
   </.async_result>
 
   <div :if={@artist_records.collection !== []} class="mt-4">
-    <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+    <h2 class="flex items-end font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
       {gettext("Collection")}
+      <span>
+        <span class="sr-only">
+          {gettext("Number of albums")}
+        </span>
+        <span class={[
+          "rounded-full ml-2",
+          "px-2 py-1 text-xs font-medium",
+          "ring-1 ring-inset",
+          "bg-gray-50 dark:bg-gray-400/10",
+          "text-gray-600 dark:text-gray-500",
+          "ring-gray-500/10 dark:ring-gray-400/20"
+        ]}>
+          {Enum.count(@artist_records.collection)}
+        </span>
+      </span>
     </h2>
     <%!-- TODO: replace with OSS version --%>
     <ul
@@ -99,6 +114,21 @@
   <div :if={@artist_records.wishlist !== []} class="mt-4">
     <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
       {gettext("Wishlist")}
+      <span>
+        <span class="sr-only">
+          {gettext("Number of albums")}
+        </span>
+        <span class={[
+          "rounded-full ml-2",
+          "px-2 py-1 text-xs font-medium",
+          "ring-1 ring-inset",
+          "bg-gray-50 dark:bg-gray-400/10",
+          "text-gray-600 dark:text-gray-500",
+          "ring-gray-500/10 dark:ring-gray-400/20"
+        ]}>
+          {Enum.count(@artist_records.wishlist)}
+        </span>
+      </span>
     </h2>
     <%!-- TODO: replace with OSS version --%>
     <ul
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 447d0589..e157bb61 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -328,7 +328,7 @@ msgid "Welcome to your Music Library"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:20
-#: lib/music_library_web/live/artist_live/show.html.heex:101
+#: lib/music_library_web/live/artist_live/show.html.heex:116
 #: lib/music_library_web/live/wishlist_live/index.ex:76
 #: lib/music_library_web/live/wishlist_live/show.ex:138
 #, elixir-autogen, elixir-format
@@ -455,8 +455,8 @@ msgstr ""
 msgid "Dev dashboard"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:81
-#: lib/music_library_web/live/artist_live/show.html.heex:121
+#: lib/music_library_web/live/artist_live/show.html.heex:96
+#: lib/music_library_web/live/artist_live/show.html.heex:151
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""
@@ -520,3 +520,9 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Refresh cover"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:64
+#: lib/music_library_web/live/artist_live/show.html.heex:119
+#, elixir-autogen, elixir-format
+msgid "Number of albums"
+msgstr ""