From b85ce0831cfc71b8df653bbfc1a1393d08db206e Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sat, 21 Mar 2026 18:21:39 +0000
Subject: [PATCH] Move filters/selectors to the side of the title

---
 .../live/stats_live/index.ex                  | 53 ++++++-----
 .../live/stats_live/top_by_period.ex          | 94 ++++++++++---------
 priv/gettext/default.pot                      | 10 +-
 priv/gettext/en/LC_MESSAGES/default.po        | 10 +-
 4 files changed, 85 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 35e71d36..316a483c 100644
--- a/lib/music_library_web/live/stats_live/index.ex
+++ b/lib/music_library_web/live/stats_live/index.ex
@@ -65,31 +65,34 @@ defmodule MusicLibraryWeb.StatsLive.Index do
         </div>
       </div>
 
-      <div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
+      <div class="grid grid-cols-1 gap-5 lg:grid-cols-3 mt-5">
+        <TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
+        <TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
         <div>
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("On This day")}
-          </h1>
-          <.form
-            :let={f}
-            for={to_form(%{"current_date" => @current_date})}
-            phx-change="set_current_date"
-            class="mt-4 w-fit"
-          >
-            <.date_picker size="xs" field={f[:current_date]}>
-              <:outer_suffix>
-                <.button
-                  size="xs"
-                  type="button"
-                  phx-click={
-                    JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
-                  }
-                >
-                  Today
-                </.button>
-              </:outer_suffix>
-            </.date_picker>
-          </.form>
+          <div class="flex items-center justify-between">
+            <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+              {gettext("On This day")}
+            </h1>
+            <.form
+              :let={f}
+              for={to_form(%{"current_date" => @current_date})}
+              phx-change="set_current_date"
+            >
+              <.date_picker size="xs" field={f[:current_date]}>
+                <:outer_suffix>
+                  <.button
+                    size="xs"
+                    type="button"
+                    phx-click={
+                      JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
+                    }
+                  >
+                    Today
+                  </.button>
+                </:outer_suffix>
+              </.date_picker>
+            </.form>
+          </div>
           <div class="rounded-md bg-white shadow-sm dark:bg-zinc-800">
             <.records_on_this_day
               current_date={@current_date}
@@ -98,8 +101,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
             />
           </div>
         </div>
-        <TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
-        <TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
       </div>
 
       <div class="flow-root">
diff --git a/lib/music_library_web/live/stats_live/top_by_period.ex b/lib/music_library_web/live/stats_live/top_by_period.ex
index ce88e13b..8bba3520 100644
--- a/lib/music_library_web/live/stats_live/top_by_period.ex
+++ b/lib/music_library_web/live/stats_live/top_by_period.ex
@@ -20,52 +20,54 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
   def render(assigns) do
     ~H"""
     <div>
-      <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-        {@title}
-      </h1>
-      <.tabs class="mt-4">
-        <.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
-          <:tab
-            class="flex-1"
-            name={"#{@key}_last_7_days"}
-            phx-click={JS.push("set_period", value: %{period: "last_7_days"})}
-            phx-target={@myself}
-          >
-            {gettext("7d")}
-          </:tab>
-          <:tab
-            class="flex-1"
-            name={"#{@key}_last_30_days"}
-            phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
-            phx-target={@myself}
-          >
-            {gettext("30d")}
-          </:tab>
-          <:tab
-            class="flex-1"
-            name={"#{@key}_last_90_days"}
-            phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
-            phx-target={@myself}
-          >
-            {gettext("90d")}
-          </:tab>
-          <:tab
-            class="flex-1"
-            name={"#{@key}_last_365_days"}
-            phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
-            phx-target={@myself}
-          >
-            {gettext("1y")}
-          </:tab>
-          <:tab
-            class="flex-1"
-            name={"#{@key}_all_time"}
-            phx-click={JS.push("set_period", value: %{period: "all_time"})}
-            phx-target={@myself}
-          >
-            {gettext("All time")}
-          </:tab>
-        </.tabs_list>
+      <.tabs>
+        <div class="flex justify-between">
+          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+            {@title}
+          </h1>
+          <.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
+            <:tab
+              class="flex-1"
+              name={"#{@key}_last_7_days"}
+              phx-click={JS.push("set_period", value: %{period: "last_7_days"})}
+              phx-target={@myself}
+            >
+              {gettext("7d")}
+            </:tab>
+            <:tab
+              class="flex-1"
+              name={"#{@key}_last_30_days"}
+              phx-click={JS.push("set_period", value: %{period: "last_30_days"})}
+              phx-target={@myself}
+            >
+              {gettext("30d")}
+            </:tab>
+            <:tab
+              class="flex-1"
+              name={"#{@key}_last_90_days"}
+              phx-click={JS.push("set_period", value: %{period: "last_90_days"})}
+              phx-target={@myself}
+            >
+              {gettext("90d")}
+            </:tab>
+            <:tab
+              class="flex-1"
+              name={"#{@key}_last_365_days"}
+              phx-click={JS.push("set_period", value: %{period: "last_365_days"})}
+              phx-target={@myself}
+            >
+              {gettext("1y")}
+            </:tab>
+            <:tab
+              class="flex-1"
+              name={"#{@key}_all_time"}
+              phx-click={JS.push("set_period", value: %{period: "all_time"})}
+              phx-target={@myself}
+            >
+              {gettext("∞")}
+            </:tab>
+          </.tabs_list>
+        </div>
         <.async_result :let={items} assign={assigns[@key]}>
           <:loading>
             <div class="flex h-182 items-center justify-center">
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 89a72f9c..7718a734 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -852,11 +852,6 @@ msgstr ""
 msgid "Top Artists"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/top_by_period.ex
-#, elixir-autogen, elixir-format
-msgid "All time"
-msgstr ""
-
 #: lib/music_library_web/components/scrobble_components.ex
 #, elixir-autogen, elixir-format
 msgid "Copy album MusicBrainz ID to clipboard"
@@ -2341,3 +2336,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Top 20 Release Years"
 msgstr ""
+
+#: lib/music_library_web/live/stats_live/top_by_period.ex
+#, elixir-autogen, elixir-format
+msgid "∞"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 6c960e2f..01760894 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -852,11 +852,6 @@ msgstr ""
 msgid "Top Artists"
 msgstr ""
 
-#: lib/music_library_web/live/stats_live/top_by_period.ex
-#, elixir-autogen, elixir-format
-msgid "All time"
-msgstr ""
-
 #: lib/music_library_web/components/scrobble_components.ex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Copy album MusicBrainz ID to clipboard"
@@ -2341,3 +2336,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Top 20 Release Years"
 msgstr ""
+
+#: lib/music_library_web/live/stats_live/top_by_period.ex
+#, elixir-autogen, elixir-format
+msgid "∞"
+msgstr ""