Move filters/selectors to the side of the title

lib/music_library_web/live/stats_live/index.ex

@@ -65,8 +65,11 @@ 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>
+          <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>
@@ -74,7 +77,6 @@ defmodule MusicLibraryWeb.StatsLive.Index do
               :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>
@@ -90,6 +92,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
                 </: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">

lib/music_library_web/live/stats_live/top_by_period.ex

@@ -20,10 +20,11 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
   def render(assigns) do
     ~H"""
     <div>
+      <.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 class="mt-4">
           <.tabs_list active_tab={name_from_period(@key, @period)} variant="segmented" size="xs">
             <:tab
               class="flex-1"
@@ -63,9 +64,10 @@ defmodule MusicLibraryWeb.StatsLive.TopByPeriod do
               phx-click={JS.push("set_period", value: %{period: "all_time"})}
               phx-target={@myself}
             >
-            {gettext("All time")}
+              {gettext("∞")}
             </:tab>
           </.tabs_list>
+        </div>
         <.async_result :let={items} assign={assigns[@key]}>
           <:loading>
             <div class="flex h-182 items-center justify-center">

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 ""

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 ""