[Enhancement] Improve handling of large media collections (#272)

* Added compound index for updated media item table for performance

* Improved large number display on homepage

* Improved UI around large numbers

* Centered the content of homepage data cards

* Renamed migration

lib/pinchflat_web/controllers/pages/page_html.ex

@@ -5,9 +5,19 @@ defmodule PinchflatWeb.Pages.PageHTML do
 
   embed_templates "page_html/*"
 
-  def readable_media_filesize(media_filesize) do
-    {num, suffix} = NumberUtils.human_byte_size(media_filesize, precision: 1)
+  attr :media_filesize, :integer, required: true
 
-    "#{Float.round(num)} #{suffix}"
+  def readable_media_filesize(assigns) do
+    {num, suffix} = NumberUtils.human_byte_size(assigns.media_filesize, precision: 2)
+
+    assigns =
+      Map.merge(assigns, %{
+        num: num,
+        suffix: suffix
+      })
+
+    ~H"""
+    <.localized_number number={@num} /> <%= @suffix %>
+    """
   end
 end

lib/pinchflat_web/controllers/pages/page_html/history_table_live.ex

@@ -22,7 +22,9 @@ defmodule Pinchflat.Pages.HistoryTableLive do
     <div>
       <span class="mb-4 flex items-center">
         <.icon_button icon_name="hero-arrow-path" class="h-10 w-10" phx-click="reload_page" tooltip="Refresh" />
-        <span class="ml-2">Showing <%= length(@records) %> of <%= @total_record_count %></span>
+        <span class="ml-2">
+          Showing <.localized_number number={length(@records)} /> of <.localized_number number={@total_record_count} />
+        </span>
       </span>
       <div class="max-w-full overflow-x-auto">
         <.table rows={@records} table_class="text-white">

lib/pinchflat_web/controllers/pages/page_html/home.html.heex

@@ -1,33 +1,39 @@
 <div class="grid grid-cols-1 gap-4 md:grid-cols-4">
-  <div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
-    <a href={~p"/media_profiles"} class="mt-4 flex flex-col items-center justify-center">
-      <span class="text-md font-medium">Media Profile(s)</span>
+  <div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
+    <a href={~p"/media_profiles"} class="flex flex-col items-center py-2">
+      <span class="text-md font-medium">
+        Media <.pluralize count={@media_profile_count} word="Profile" />
+      </span>
       <h4 class="text-title-md font-bold text-white">
-        <%= @media_profile_count %>
+        <.localized_number number={@media_profile_count} />
       </h4>
     </a>
   </div>
-  <div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
-    <a href={~p"/sources"} class="mt-4 flex flex-col items-center justify-center">
-      <span class="text-md font-medium">Source(s)</span>
+  <div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
+    <a href={~p"/sources"} class="flex flex-col items-center py-2">
+      <span class="text-md font-medium">
+        <.pluralize count={@source_count} word="Source" />
+      </span>
       <h4 class="text-title-md font-bold text-white">
-        <%= @source_count %>
+        <.localized_number number={@source_count} />
       </h4>
     </a>
   </div>
-  <div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
-    <span class="mt-4 flex flex-col items-center justify-center">
-      <span class="text-md font-medium">Downloaded Media</span>
+  <div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
+    <span class="flex flex-col items-center py-2">
+      <span class="text-md font-medium">
+        <.pluralize count={@media_item_count} word="Download" />
+      </span>
       <h4 class="text-title-md font-bold text-white">
-        <%= @media_item_count %>
+        <.localized_number number={@media_item_count} />
       </h4>
     </span>
   </div>
-  <div class="rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
-    <span class="mt-4 flex flex-col items-center justify-center">
+  <div class="flex flex-col justify-center rounded-sm border px-7.5 py-6 shadow-default border-strokedark bg-boxdark">
+    <span class="flex flex-col items-center py-2">
       <span class="text-md font-medium">Library Size</span>
       <h4 class="text-title-md font-bold text-white">
-        <%= readable_media_filesize(@media_item_size) %>
+        <.readable_media_filesize media_filesize={@media_item_size} />
       </h4>
     </span>
   </div>