Can set current date in stats view

lib/music_library_web/live/stats_live/index.ex

@@ -81,6 +81,21 @@ defmodule MusicLibraryWeb.StatsLive.Index do
      |> assign(scrobble_activity_mode: mode)}
   end
 
+  def handle_event("set_current_date", %{"current_date" => current_date}, socket) do
+    case Date.from_iso8601(current_date) do
+      {:ok, date} ->
+        records_on_this_day = Collection.get_records_on_this_day(date)
+
+        {:noreply,
+         socket
+         |> assign(:current_date, date)
+         |> stream(:records_on_this_day, records_on_this_day, reset: true)}
+
+      {:error, _reason} ->
+        {:noreply, socket}
+    end
+  end
+
   def handle_info(%{track_count: 0}, socket) do
     {:noreply, socket}
   end

lib/music_library_web/live/stats_live/index.html.heex

@@ -487,18 +487,27 @@
   </.tabs>
 </div>
 
-<div class="mt-5 grid grid-cols-1 lg:grid-cols-5 gap-4">
-  <div class="px-4 shadow-sm">
-    <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
-      {gettext("On This day")}
-    </h1>
+<div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4">
+  <div class="lg:col-span-3 px-4 shadow-sm">
+    <div class="flex justify-between items-center">
+      <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
+        {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]} />
+      </.form>
+    </div>
     <.records_on_this_day
       current_date={@current_date}
       records={@streams.records_on_this_day}
       record_show_path={fn record -> ~p"/collection/#{record}" end}
     />
   </div>
-  <div class="lg:col-span-2">
+  <div class="lg:col-span-4">
     <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
       {gettext("Top %{n} Artists", %{n: length(@records_by_artist)})}
     </h1>
@@ -520,7 +529,7 @@
     </div>
   </div>
 
-  <div class="lg:col-span-2">
+  <div class="lg:col-span-4">
     <h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
       {gettext("Top %{n} Genres", %{n: length(@records_by_genre)})}
     </h1>