Improved UI around large numbers

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

@@ -95,11 +95,27 @@ defmodule PinchflatWeb.CustomComponents.TextComponents do
     """
   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-text={"Intl.NumberFormat().format(#{@number})"}><%= @number %></span>
+    <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

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

@@ -2,7 +2,7 @@
   <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 <%= if @media_profile_count == 1, do: "Profile", else: "Profiles" %>
+        Media <.pluralize count={@media_profile_count} word="Profile" />
       </span>
       <h4 class="text-title-md font-bold text-white">
         <.localized_number number={@media_profile_count} />
@@ -12,7 +12,7 @@
   <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">
-        <%= if @source_count == 1, do: "Source", else: "Sources" %>
+        <.pluralize count={@source_count} word="Source" />
       </span>
       <h4 class="text-title-md font-bold text-white">
         <.localized_number number={@source_count} />
@@ -22,7 +22,7 @@
   <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">
-        <%= if @media_item_count == 1, do: "Download", else: "Downloads" %>
+        <.pluralize count={@media_item_count} word="Download" />
       </span>
       <h4 class="text-title-md font-bold text-white">
         <.localized_number number={@media_item_count} />

lib/pinchflat_web/controllers/sources/source_html/index.html.heex

@@ -19,11 +19,12 @@
           </.subtle_link>
         </:col>
         <:col :let={source} label="Type"><%= source.collection_type %></:col>
-        <:col :let={source} label="Pending"><%= source.pending_count %></:col>
-        <:col :let={source} label="Downloaded"><%= source.downloaded_count %></:col>
+        <:col :let={source} label="Pending"><.localized_number number={source.pending_count} /></:col>
+        <:col :let={source} label="Downloaded"><.localized_number number={source.downloaded_count} /></:col>
         <:col :let={source} label="Retention">
           <%= if source.retention_period_days && source.retention_period_days > 0 do %>
-            <%= source.retention_period_days %> day(s)
+            <.localized_number number={source.retention_period_days} />
+            <.pluralize count={source.retention_period_days} word="day" />
           <% else %>
             <span class="text-lg">∞</span>
           <% end %>

lib/pinchflat_web/controllers/sources/source_html/media_item_table_live.ex

@@ -23,7 +23,9 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
       <header class="flex justify-between items-center mb-4">
         <span class="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 <%= @filtered_record_count %></span>
+          <span class="ml-2">
+            Showing <.localized_number number={length(@records)} /> of <.localized_number number={@filtered_record_count} />
+          </span>
         </span>
         <div class="bg-meta-4 rounded-md">
           <div class="relative">
@@ -49,12 +51,12 @@ defmodule Pinchflat.Sources.MediaItemTableLive do
             <%= StringUtils.truncate(media_item.title, 50) %>
           </.subtle_link>
         </:col>
-        <:col :let={media_item} label="Upload Date">
-          <%= DateTime.to_date(media_item.uploaded_at) %>
-        </:col>
         <:col :let={media_item} :if={@media_state == "other"} label="Manually Ignored?">
           <.icon name={if media_item.prevent_download, do: "hero-check", else: "hero-x-mark"} />
         </:col>
+        <:col :let={media_item} label="Upload Date">
+          <%= DateTime.to_date(media_item.uploaded_at) %>
+        </:col>
         <:col :let={media_item} label="" class="flex justify-end">
           <.icon_link href={~p"/sources/#{@source.id}/media/#{media_item.id}/edit"} icon="hero-pencil-square" class="mr-4" />
         </:col>

lib/pinchflat_web/controllers/sources/source_html/source_form.html.heex

@@ -95,7 +95,8 @@
       type="number"
       label="Retention Period (days)"
       min="0"
-      help="Days between when media is *downloaded* and when it's deleted. Leave blank to keep media indefinitely"
+      help="Days between when media is <em>downloaded</em> and when it's deleted. Leave blank to keep media indefinitely"
+      html_help={true}
     />
 
     <section x-show="advancedMode">

test/pinchflat_web/controllers/sources/media_item_table_live_test.exs

@@ -27,7 +27,7 @@ defmodule PinchflatWeb.Sources.MediaItemTableLiveTest do
 
       {:ok, _view, html} = live_isolated(conn, MediaItemTableLive, session: create_session(source))
 
-      assert html =~ "Showing 1 of 1"
+      assert html =~ "Showing"
       assert html =~ "Title"
       assert html =~ media_item.title
     end