Improve layout of artist section headers

lib/music_library_web/live/artist_live/record_components.ex

@@ -12,15 +12,14 @@ defmodule MusicLibraryWeb.ArtistLive.RecordComponents do
   def grid(assigns) do
     ~H"""
     <div class="mt-4">
-      <h2 class="flex items-end font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
+      <header class="flex items-center justify-between">
-        {@title}
+        <h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
-        <span class="ml-2">
+          {@title}
-          <span class="sr-only">
+        </h2>
-            {gettext("Number of records")}
+        <span class="ml-2 text-sm font-normal text-zinc-700 dark:text-zinc-300">
-          </span>
+          {ngettext("1 record", "%{count} records", @records_count)}
-          <.round_badge text={@records_count} />
         </span>
-      </h2>
+      </header>
       <%!-- TODO: replace with OSS version --%>
       <ul
         id={@id}

lib/music_library_web/live/artist_live/show.html.heex

@@ -1,6 +1,8 @@
 <div class="mt-4 px-4 sm:px-6 lg:px-8">
-  <h1 class="flex items-end mt-1 font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+  <header class="flex mt-1 gap-1">
-    {@artist.name}
+    <h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
+      {@artist.name}
+    </h1>
     <.async_result :let={artist_info} assign={@artist_info}>
       <:loading>
         <div class="ml-2">
@@ -24,15 +26,15 @@
           {gettext("Error loading play count")}
         </div>
       </:failed>
-      <span :if={artist_info.play_count > 0} class="ml-2">
+      <.round_badge :if={artist_info.on_tour} text={gettext("On Tour")} />
-        <span class="sr-only">
+      <span
-          {gettext("Number of scrobbles")}
+        :if={artist_info.play_count > 0}
-        </span>
+        class="ml-2 text-sm font-normal text-zinc-700 dark:text-zinc-300 grow text-right"
-        <.round_badge :if={artist_info.on_tour} text={gettext("On Tour")} />
+      >
-        <.round_badge text={artist_info.play_count} />
+        {ngettext("1 scrobble", "%{count} scrobbles", artist_info.play_count)}
       </span>
     </.async_result>
-  </h1>
+  </header>
 
   <.async_result :let={artist_info} assign={@artist_info}>
     <:loading>

priv/gettext/default.pot

@@ -30,7 +30,7 @@ msgid "Choose a value"
 msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:14
-#: lib/music_library_web/live/artist_live/show.html.heex:65
+#: lib/music_library_web/live/artist_live/show.html.heex:67
 #: lib/music_library_web/live/collection_live/index.ex:143
 #: lib/music_library_web/live/collection_live/show.ex:115
 #: lib/music_library_web/live/collection_live/show.ex:132
@@ -306,7 +306,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:74
+#: lib/music_library_web/live/artist_live/show.html.heex:76
 #: lib/music_library_web/live/wishlist_live/index.ex:154
 #: lib/music_library_web/live/wishlist_live/show.ex:130
 #, elixir-autogen, elixir-format
@@ -433,27 +433,22 @@ msgstr ""
 msgid "Dev dashboard"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/record_components.ex:43
+#: lib/music_library_web/live/artist_live/record_components.ex:42
 #, elixir-autogen, elixir-format
 msgid "View details"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:29
+#: lib/music_library_web/live/artist_live/show.html.heex:60
-#, elixir-autogen, elixir-format
-msgid "Number of scrobbles"
-msgstr ""
-
-#: lib/music_library_web/live/artist_live/show.html.heex:58
 #, elixir-autogen, elixir-format
 msgid "Biography"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:40
+#: lib/music_library_web/live/artist_live/show.html.heex:42
 #, elixir-autogen, elixir-format
 msgid "Loading biography"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:7
+#: lib/music_library_web/live/artist_live/show.html.heex:9
 #, elixir-autogen, elixir-format
 msgid "Loading play count"
 msgstr ""
@@ -493,12 +488,12 @@ msgstr ""
 msgid "Records"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:51
+#: lib/music_library_web/live/artist_live/show.html.heex:53
 #, elixir-autogen, elixir-format
 msgid "Error loading biography"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/show.html.heex:24
+#: lib/music_library_web/live/artist_live/show.html.heex:26
 #, elixir-autogen, elixir-format
 msgid "Error loading play count"
 msgstr ""
@@ -513,12 +508,21 @@ msgstr ""
 msgid "Errors"
 msgstr ""
 
-#: lib/music_library_web/live/artist_live/record_components.ex:19
+#: lib/music_library_web/live/artist_live/show.html.heex:29
-#, elixir-autogen, elixir-format
-msgid "Number of records"
-msgstr ""
-
-#: lib/music_library_web/live/artist_live/show.html.heex:31
 #, elixir-autogen, elixir-format
 msgid "On Tour"
 msgstr ""
+
+#: lib/music_library_web/live/artist_live/record_components.ex:20
+#, elixir-autogen, elixir-format
+msgid "1 record"
+msgid_plural "%{count} records"
+msgstr[0] ""
+msgstr[1] ""
+
+#: lib/music_library_web/live/artist_live/show.html.heex:34
+#, elixir-autogen, elixir-format
+msgid "1 scrobble"
+msgid_plural "%{count} scrobbles"
+msgstr[0] ""
+msgstr[1] ""