Uniform use of .section/1 across all stats components

lib/music_library_web/components/stats_components.ex

@@ -337,4 +337,23 @@ defmodule MusicLibraryWeb.StatsComponents do
       _other -> ""
     end
   end
+
+  attr :container_class, :string, default: nil
+  slot :title, required: true
+  slot :side_actions
+  slot :inner_block, required: true
+
+  def section(assigns) do
+    ~H"""
+    <div class={["mt-5", @container_class]}>
+      <div class="flex items-center justify-between">
+        <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+          {render_slot(@title)}
+        </h1>
+        {render_slot(@side_actions)}
+      </div>
+      {render_slot(@inner_block)}
+    </div>
+    """
+  end
 end

lib/music_library_web/live/stats_live/index.ex

@@ -227,13 +227,12 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     ~H"""
     <div class="flow-root">
       <.tabs id="scrobble-activity" class="mt-4">
-        <div class="mt-5 flex end items-center justify-between">
+        <.section>
-          <div class="flex">
+          <:title>
-            <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200 mr-2">
             {gettext("Scrobble activity")}
-            </h1>
             <.refresh_lastfm_feed_button />
-          </div>
+          </:title>
+          <:side_actions>
             <.tabs_list active_tab={@scrobble_activity_mode} variant="segmented">
               <:tab
                 name="albums"
@@ -248,7 +247,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
                 {gettext("Tracks")}
               </:tab>
             </.tabs_list>
-        </div>
+          </:side_actions>
           <.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
             <ul
               id="scrobble-activity-albums"
@@ -333,7 +332,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
             <ul
               id="scrobble-activity-tracks"
               role="list"
-            class="mt-5 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
+              class="mt-4 rounded-md bg-white p-6 shadow-sm dark:bg-zinc-800"
               phx-update="stream"
             >
               <li
@@ -412,6 +411,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
               </li>
             </ul>
           </.tabs_panel>
+        </.section>
       </.tabs>
     </div>
     """
@@ -516,25 +516,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
     """
   end
 
-  attr :container_class, :string, default: nil
-  slot :title, required: true
-  slot :side_actions
-  slot :inner_block, required: true
-
-  defp section(assigns) do
-    ~H"""
-    <div class={["mt-5", @container_class]}>
-      <div class="flex items-center justify-between">
-        <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-          {render_slot(@title)}
-        </h1>
-        {render_slot(@side_actions)}
-      </div>
-      {render_slot(@inner_block)}
-    </div>
-    """
-  end
-
   defp assign_counts(socket) do
     collection_count_by_format = Collection.count_records_by_format()
 

lib/music_library_web/live/stats_live/top_by_period.ex

@@ -1,6 +1,8 @@
 defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
   use MusicLibraryWeb, :live_component
 
+  import MusicLibraryWeb.StatsComponents, only: [section: 1]
+
   attr :id, :string, required: true
   attr :title, :string, required: true
   attr :key, :atom, required: true
@@ -19,12 +21,11 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
   @impl true
   def render(assigns) do
     ~H"""
-    <div class="mt-5">
+    <div>
       <.tabs>
-        <div class="flex justify-between">
+        <.section>
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+          <:title>{@title}</:title>
-            {@title}
+          <:side_actions>
-          </h1>
             <.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
               <:tab
                 class="flex-1"
@@ -67,7 +68,7 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
                 {gettext("∞")}
               </:tab>
             </.tabs_list>
-        </div>
+          </:side_actions>
           <.async_result :let={items} assign={assigns[@key]}>
             <:loading>
               <div class="flex h-182 items-center justify-center">
@@ -80,6 +81,7 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
               </div>
             </div>
           </.async_result>
+        </.section>
       </.tabs>
     </div>
     """