Refactor stats page with semantic components to experiment with alternative layouts

lib/music_library_web/live/stats_live/index.ex

@@ -16,93 +16,212 @@ defmodule MusicLibraryWeb.StatsLive.Index do
   def render(assigns) do
     ~H"""
     <Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
-      <div>
+      <.record_stats
-        <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        latest_record={@latest_record}
-          {gettext("Records")}
+        collection_count={@collection_count}
-        </h1>
+        wishlist_count={@wishlist_count}
-        <dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
+        scrobble_count={@scrobble_count}
-          <.album_preview
-            record={@latest_record}
-            title={gettext("Latest purchase")}
-            class="col-span-3 sm:col-span-2"
       />
-          <.counter
-            title={gettext("Collection")}
-            count={@collection_count}
-            path={~p"/collection"}
-          />
-          <.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
-          <.counter
-            title={gettext("Scrobbles")}
-            count={to_compact(@scrobble_count)}
-            tooltip={@scrobble_count}
-            path={~p"/scrobbled-tracks"}
-          />
-        </dl>
-      </div>
-
       <div class="grid gap-5 lg:grid-cols-2">
-        <div>
+        <.formats_stats collection_count_by_format={@collection_count_by_format} />
-          <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        <.types_stats collection_count_by_type={@collection_count_by_type} />
-            {gettext("Formats")}
-          </h1>
-          <.counters_by_category
-            categories_with_counts={@collection_count_by_format}
-            category_format_fn={&format_label/1}
-            category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
-          />
       </div>
-
-        <div>
-          <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Types")}
-          </h1>
-          <.counters_by_category
-            categories_with_counts={@collection_count_by_type}
-            category_format_fn={&type_label/1}
-            category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
-          />
-        </div>
-      </div>
-
       <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 class="order-first lg:order-last">
+        <.on_this_day current_date={@current_date} records_on_this_day={@records_on_this_day} />
-          <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
+      <.scrobble_activity
-              current_date={@current_date}
+        scrobble_activity_mode={@scrobble_activity_mode}
-              records={@records_on_this_day}
+        streams={@streams}
-              record_show_path={fn record -> ~p"/collection/#{record}" end}
+      />
+
+      <div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
+        <.top_collection_artists records_by_artist={@records_by_artist} />
+        <.top_collection_genres records_by_genre={@records_by_genre} />
+        <.top_release_years records_by_release_year={@records_by_release_year} />
+      </div>
+    </Layouts.app>
+    """
+  end
+
+  @impl true
+  def mount(_params, _session, socket) do
+    current_date = DateTime.now!(socket.assigns.timezone) |> DateTime.to_date()
+    latest_record = Collection.get_latest_record()
+    records_by_artists = Collection.count_records_by_artist(limit: 20)
+    records_by_genre = Collection.count_records_by_genre(limit: 20)
+    records_by_release_year = Collection.count_records_by_release_year(limit: 20)
+
+    records_on_this_day =
+      current_date
+      |> Collection.get_records_on_this_day()
+      |> Collection.group_records_by_release_group()
+
+    if connected?(socket) do
+      LastFm.subscribe_to_feed()
+    end
+
+    {:ok,
+     socket
+     |> stream_configure(:recent_tracks,
+       dom_id: fn %{track: track} -> "track-#{track.scrobbled_at_uts}" end
+     )
+     |> stream_configure(:recent_albums,
+       dom_id: fn %{album: album} -> "album-#{album.scrobbled_at_uts}" end
+     )
+     |> assign_counts()
+     |> assign_scrobble_activity()
+     |> assign(
+       current_date: current_date,
+       scrobble_activity_mode: "albums",
+       latest_record: latest_record,
+       page_title: gettext("Stats"),
+       current_section: :stats,
+       records_by_artist: records_by_artists,
+       records_by_genre: records_by_genre,
+       records_by_release_year: records_by_release_year,
+       records_on_this_day: records_on_this_day
+     )}
+  end
+
+  @impl true
+  def handle_event("refresh_lastfm_feed", _, socket) do
+    LastFm.refresh_scrobbled_tracks()
+    {:noreply, socket}
+  end
+
+  def handle_event("import", %{"id" => musicbrainz_id, "format" => format}, socket) do
+    case Records.import_from_musicbrainz_release(musicbrainz_id,
+           format: format,
+           purchased_at: nil
+         ) do
+      {:ok, record} ->
+        {:noreply,
+         socket
+         |> put_toast(:info, gettext("Record wishlisted successfully"))
+         |> push_navigate(to: ~p"/wishlist/#{record.id}")}
+
+      {:error, reason} ->
+        {:noreply,
+         socket
+         |> put_toast(
+           :error,
+           gettext("Error wishlisting record") <> ": " <> ErrorMessages.friendly_message(reason)
+         )}
+    end
+  end
+
+  def handle_event("set_scrobble_activity_mode", %{"mode" => mode}, socket)
+      when mode in ["tracks", "albums"] do
+    {:noreply,
+     socket
+     |> 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 =
+          date
+          |> Collection.get_records_on_this_day()
+          |> Collection.group_records_by_release_group()
+
+        {:noreply,
+         socket
+         |> assign(%{current_date: date, records_on_this_day: records_on_this_day})}
+
+      {:error, _reason} ->
+        {:noreply, socket}
+    end
+  end
+
+  @impl true
+  def handle_info(%{track_count: 0}, socket) do
+    {:noreply, socket}
+  end
+
+  def handle_info(%{track_count: _count}, socket) do
+    {:noreply,
+     socket
+     |> assign_scrobble_activity()}
+  end
+
+  defp top_release_years(assigns) do
+    ~H"""
+    <div>
+      <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Top 20 Release Years")}
+      </h1>
+      <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
+        <.vertical_bar_chart
+          data={@records_by_release_year}
+          color_class="bg-zinc-800 dark:bg-zinc-300"
+          label_fn={fn {year, _count} -> year end}
+          value_fn={fn {_year, count} -> count end}
+          datum_click={
+            fn {year, _count} ->
+              JS.navigate(~p"/collection?#{%{query: "release_year:#{year}"}}")
+            end
+          }
+          class="w-full"
         />
       </div>
     </div>
-      </div>
+    """
+  end
 
+  defp top_collection_genres(assigns) do
+    ~H"""
+    <div>
+      <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
+      </h1>
+      <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
+        <.vertical_bar_chart
+          data={@records_by_genre}
+          color_class="bg-zinc-500"
+          label_fn={fn {genre, _count} -> genre end}
+          value_fn={fn {_genre, count} -> count end}
+          datum_click={
+            fn {genre, _count} ->
+              JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
+            end
+          }
+          class="w-full"
+        />
+      </div>
+    </div>
+    """
+  end
+
+  defp top_collection_artists(assigns) do
+    ~H"""
+    <div>
+      <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
+      </h1>
+      <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
+        <.vertical_bar_chart
+          data={@records_by_artist}
+          color_class="bg-red-500"
+          label_fn={fn datum -> datum.name end}
+          value_fn={fn datum -> datum.count end}
+          datum_click={
+            fn datum ->
+              JS.navigate(~p"/artists/#{datum.id}")
+            end
+          }
+          class="w-full"
+        />
+      </div>
+    </div>
+    """
+  end
+
+  defp scrobble_activity(assigns) do
+    ~H"""
     <div class="flow-root">
       <div class="mt-5 flex items-center justify-between">
         <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
@@ -291,172 +410,102 @@ defmodule MusicLibraryWeb.StatsLive.Index do
         </.tabs_panel>
       </.tabs>
     </div>
-
-      <div class="mt-5 grid grid-cols-1 gap-5 lg:grid-cols-3">
-        <div>
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
-          </h1>
-          <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
-            <.vertical_bar_chart
-              data={@records_by_artist}
-              color_class="bg-red-500"
-              label_fn={fn datum -> datum.name end}
-              value_fn={fn datum -> datum.count end}
-              datum_click={
-                fn datum ->
-                  JS.navigate(~p"/artists/#{datum.id}")
-                end
-              }
-              class="w-full"
-            />
-          </div>
-        </div>
-
-        <div>
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
-          </h1>
-          <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
-            <.vertical_bar_chart
-              data={@records_by_genre}
-              color_class="bg-zinc-500"
-              label_fn={fn {genre, _count} -> genre end}
-              value_fn={fn {_genre, count} -> count end}
-              datum_click={
-                fn {genre, _count} ->
-                  JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
-                end
-              }
-              class="w-full"
-            />
-          </div>
-        </div>
-
-        <div>
-          <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-            {gettext("Top 20 Release Years")}
-          </h1>
-          <div class="mt-5 rounded-md bg-white shadow-sm dark:bg-zinc-800">
-            <.vertical_bar_chart
-              data={@records_by_release_year}
-              color_class="bg-zinc-800 dark:bg-zinc-300"
-              label_fn={fn {year, _count} -> year end}
-              value_fn={fn {_year, count} -> count end}
-              datum_click={
-                fn {year, _count} ->
-                  JS.navigate(~p"/collection?#{%{query: "release_year:#{year}"}}")
-                end
-              }
-              class="w-full"
-            />
-          </div>
-        </div>
-      </div>
-    </Layouts.app>
     """
   end
 
-  @impl true
+  defp on_this_day(assigns) do
-  def mount(_params, _session, socket) do
+    ~H"""
-    current_date = DateTime.now!(socket.assigns.timezone) |> DateTime.to_date()
+    <div class="order-first lg:order-last">
-    latest_record = Collection.get_latest_record()
+      <div class="flex items-center justify-between">
-    records_by_artists = Collection.count_records_by_artist(limit: 20)
+        <h1 class="text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-    records_by_genre = Collection.count_records_by_genre(limit: 20)
+          {gettext("On This day")}
-    records_by_release_year = Collection.count_records_by_release_year(limit: 20)
+        </h1>
-
+        <.form
-    records_on_this_day =
+          :let={f}
-      current_date
+          for={to_form(%{"current_date" => @current_date})}
-      |> Collection.get_records_on_this_day()
+          phx-change="set_current_date"
-      |> Collection.group_records_by_release_group()
+        >
-
+          <.date_picker size="xs" field={f[:current_date]}>
-    if connected?(socket) do
+            <:outer_suffix>
-      LastFm.subscribe_to_feed()
+              <.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}
+          records={@records_on_this_day}
+          record_show_path={fn record -> ~p"/collection/#{record}" end}
+        />
+      </div>
+    </div>
+    """
   end
 
-    {:ok,
+  defp types_stats(assigns) do
-     socket
+    ~H"""
-     |> stream_configure(:recent_tracks,
+    <div>
-       dom_id: fn %{track: track} -> "track-#{track.scrobbled_at_uts}" end
+      <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-     )
+        {gettext("Types")}
-     |> stream_configure(:recent_albums,
+      </h1>
-       dom_id: fn %{album: album} -> "album-#{album.scrobbled_at_uts}" end
+      <.counters_by_category
-     )
+        categories_with_counts={@collection_count_by_type}
-     |> assign_counts()
+        category_format_fn={&type_label/1}
-     |> assign_scrobble_activity()
+        category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
-     |> assign(
+      />
-       current_date: current_date,
+    </div>
-       scrobble_activity_mode: "albums",
+    """
-       latest_record: latest_record,
-       page_title: gettext("Stats"),
-       current_section: :stats,
-       records_by_artist: records_by_artists,
-       records_by_genre: records_by_genre,
-       records_by_release_year: records_by_release_year,
-       records_on_this_day: records_on_this_day
-     )}
   end
 
-  @impl true
+  defp formats_stats(assigns) do
-  def handle_event("refresh_lastfm_feed", _, socket) do
+    ~H"""
-    LastFm.refresh_scrobbled_tracks()
+    <div>
-    {:noreply, socket}
+      <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
+        {gettext("Formats")}
+      </h1>
+      <.counters_by_category
+        categories_with_counts={@collection_count_by_format}
+        category_format_fn={&format_label/1}
+        category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
+      />
+    </div>
+    """
   end
 
-  def handle_event("import", %{"id" => musicbrainz_id, "format" => format}, socket) do
+  defp record_stats(assigns) do
-    case Records.import_from_musicbrainz_release(musicbrainz_id,
+    ~H"""
-           format: format,
+    <div>
-           purchased_at: nil
+      <h1 class="mt-5 text-base font-semibold text-zinc-900 lg:text-2xl dark:text-zinc-200">
-         ) do
+        {gettext("Records")}
-      {:ok, record} ->
+      </h1>
-        {:noreply,
+      <dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
-         socket
+        <.album_preview
-         |> put_toast(:info, gettext("Record wishlisted successfully"))
+          record={@latest_record}
-         |> push_navigate(to: ~p"/wishlist/#{record.id}")}
+          title={gettext("Latest purchase")}
-
+          class="col-span-3 sm:col-span-2"
-      {:error, reason} ->
+        />
-        {:noreply,
+        <.counter
-         socket
+          title={gettext("Collection")}
-         |> put_toast(
+          count={@collection_count}
-           :error,
+          path={~p"/collection"}
-           gettext("Error wishlisting record") <> ": " <> ErrorMessages.friendly_message(reason)
+        />
-         )}
+        <.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
-    end
+        <.counter
-  end
+          title={gettext("Scrobbles")}
-
+          count={to_compact(@scrobble_count)}
-  def handle_event("set_scrobble_activity_mode", %{"mode" => mode}, socket)
+          tooltip={@scrobble_count}
-      when mode in ["tracks", "albums"] do
+          path={~p"/scrobbled-tracks"}
-    {:noreply,
+        />
-     socket
+      </dl>
-     |> assign(scrobble_activity_mode: mode)}
+    </div>
-  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 =
-          date
-          |> Collection.get_records_on_this_day()
-          |> Collection.group_records_by_release_group()
-
-        {:noreply,
-         socket
-         |> assign(%{current_date: date, records_on_this_day: records_on_this_day})}
-
-      {:error, _reason} ->
-        {:noreply, socket}
-    end
-  end
-
-  @impl true
-  def handle_info(%{track_count: 0}, socket) do
-    {:noreply, socket}
-  end
-
-  def handle_info(%{track_count: _count}, socket) do
-    {:noreply,
-     socket
-     |> assign_scrobble_activity()}
   end
 
   defp assign_counts(socket) do