[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/components/custom_components/table_components.ex

@@ -2,7 +2,8 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
   @moduledoc false
   use Phoenix.Component
 
-  alias PinchflatWeb.CoreComponents
+  import PinchflatWeb.CoreComponents
+  import PinchflatWeb.CustomComponents.TextComponents
 
   @doc """
   Renders a table component with the given rows and columns.
@@ -76,11 +77,13 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
             phx-click={@page_number != 1 && "page_change"}
             phx-value-direction="dec"
           >
-            <CoreComponents.icon name="hero-chevron-left" />
+            <.icon name="hero-chevron-left" />
           </span>
         </li>
         <li>
-          <span class="mx-2">Page <%= @page_number %> of <%= @total_pages %></span>
+          <span class="mx-2">
+            Page <.localized_number number={@page_number} /> of <.localized_number number={@total_pages} />
+          </span>
         </li>
         <li>
           <span
@@ -92,7 +95,7 @@ defmodule PinchflatWeb.CustomComponents.TableComponents do
             phx-click={@page_number != @total_pages && "page_change"}
             phx-value-direction="inc"
           >
-            <CoreComponents.icon name="hero-chevron-right" />
+            <.icon name="hero-chevron-right" />
           </span>
         </li>
       </ul>

lib/pinchflat_web/components/custom_components/text_components.ex

@@ -94,4 +94,28 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     <time><%= Calendar.strftime(Timex.Timezone.convert(@datetime, @timezone), @format) %></time>
     """
   end
+
+  @doc """
+  Renders a localized number using the Intl.NumberFormat API, falling back to the raw number if needed
+  """
+  attr :number, :any, required: true
+
+  def localized_number(assigns) do
+    ~H"""
+    <span x-data x-text={"Intl.NumberFormat().format(#{@number})"}><%= @number %></span>
+    """
+  end
+
+  @doc """
+  Renders a word with a suffix if the count is not 1
+  """
+  attr :word, :string, required: true
+  attr :count, :integer, required: true
+  attr :suffix, :string, default: "s"
+
+  def pluralize(assigns) do
+    ~H"""
+    <%= @word %><%= if @count == 1, do: "", else: @suffix %>
+    """
+  end
 end