feat: add product sorting to collection pages with tests

Add sort functionality to /collections/:slug pages with 6 sort options
(featured, newest, price ascending/descending, name A-Z/Z-A). Sort
selection persists across category navigation via URL query params.

Refactor handle_params to be DRY using load_collection/1 helper.
Add comprehensive unit tests for PreviewData category functions and
LiveView tests for the Collection page sorting and navigation.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

lib/simpleshop_theme_web/live/shop_live/collection.ex

@@ -5,6 +5,15 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
   alias SimpleshopTheme.Media
   alias SimpleshopTheme.Theme.{CSSCache, CSSGenerator, PreviewData}
 
+  @sort_options [
+    {"featured", "Featured"},
+    {"newest", "Newest"},
+    {"price_asc", "Price: Low to High"},
+    {"price_desc", "Price: High to Low"},
+    {"name_asc", "Name: A-Z"},
+    {"name_desc", "Name: Z-A"}
+  ]
+
   @impl true
   def mount(_params, _session, socket) do
     theme_settings = Settings.get_theme_settings()
@@ -32,40 +41,62 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
       |> assign(:cart_count, 0)
       |> assign(:cart_subtotal, "£0.00")
       |> assign(:categories, PreviewData.categories())
+      |> assign(:sort_options, @sort_options)
+      |> assign(:current_sort, "featured")
 
     {:ok, socket}
   end
 
   @impl true
-  def handle_params(%{"slug" => "all"}, _uri, socket) do
-    {:noreply,
-     socket
-     |> assign(:page_title, "All Products")
-     |> assign(:collection_title, "All Products")
-     |> assign(:current_category, nil)
-     |> assign(:products, PreviewData.products())}
-  end
+  def handle_params(%{"slug" => slug} = params, _uri, socket) do
+    sort = params["sort"] || "featured"
 
-  def handle_params(%{"slug" => slug}, _uri, socket) do
-    case PreviewData.category_by_slug(slug) do
-      nil ->
+    case load_collection(slug) do
+      {:ok, title, category, products} ->
+        {:noreply,
+         socket
+         |> assign(:page_title, title)
+         |> assign(:collection_title, title)
+         |> assign(:current_category, category)
+         |> assign(:current_sort, sort)
+         |> assign(:products, sort_products(products, sort))}
+
+      :not_found ->
         {:noreply,
          socket
          |> put_flash(:error, "Collection not found")
          |> push_navigate(to: ~p"/collections/all")}
-
-      category ->
-        products = PreviewData.products_by_category(slug)
-
-        {:noreply,
-         socket
-         |> assign(:page_title, category.name)
-         |> assign(:collection_title, category.name)
-         |> assign(:current_category, category)
-         |> assign(:products, products)}
     end
   end
 
+  defp load_collection("all") do
+    {:ok, "All Products", nil, PreviewData.products()}
+  end
+
+  defp load_collection(slug) do
+    case PreviewData.category_by_slug(slug) do
+      nil -> :not_found
+      category -> {:ok, category.name, category, PreviewData.products_by_category(slug)}
+    end
+  end
+
+  @impl true
+  def handle_event("sort_changed", %{"sort" => sort}, socket) do
+    slug = if socket.assigns.current_category, do: socket.assigns.current_category.slug, else: "all"
+    {:noreply, push_patch(socket, to: ~p"/collections/#{slug}?sort=#{sort}")}
+  end
+
+  defp sort_products(products, "featured"), do: products
+  defp sort_products(products, "newest"), do: Enum.reverse(products)
+  defp sort_products(products, "price_asc"), do: Enum.sort_by(products, & &1.price)
+  defp sort_products(products, "price_desc"), do: Enum.sort_by(products, & &1.price, :desc)
+  defp sort_products(products, "name_asc"), do: Enum.sort_by(products, & &1.name)
+  defp sort_products(products, "name_desc"), do: Enum.sort_by(products, & &1.name, :desc)
+  defp sort_products(products, _), do: products
+
+  defp collection_path(slug, "featured"), do: ~p"/collections/#{slug}"
+  defp collection_path(slug, sort), do: ~p"/collections/#{slug}?sort=#{sort}"
+
   @impl true
   def render(assigns) do
     ~H"""
@@ -92,7 +123,12 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
         />
 
         <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-          <.collection_filter_bar categories={@categories} current_slug={@current_category && @current_category.slug} />
+          <.collection_filter_bar
+            categories={@categories}
+            current_slug={@current_category && @current_category.slug}
+            sort_options={@sort_options}
+            current_sort={@current_sort}
+          />
 
           <SimpleshopThemeWeb.ShopComponents.product_grid theme_settings={@theme_settings}>
             <%= for product <- @products do %>
@@ -128,42 +164,57 @@ defmodule SimpleshopThemeWeb.ShopLive.Collection do
 
   defp collection_filter_bar(assigns) do
     ~H"""
-    <nav class="mb-8" aria-label="Collection filters">
-      <ul class="flex flex-wrap gap-2">
-        <li>
-          <.link
-            navigate={~p"/collections/all"}
-            class={[
-              "px-4 py-2 rounded-full text-sm transition-colors",
-              if(@current_slug == nil, do: "font-medium", else: "hover:opacity-80")
-            ]}
-            style={if(@current_slug == nil,
-              do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
-              else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
-            )}
-          >
-            All
-          </.link>
-        </li>
-        <%= for category <- @categories do %>
+    <div class="flex flex-wrap items-center justify-between gap-4 mb-8">
+      <nav aria-label="Collection filters">
+        <ul class="flex flex-wrap gap-2">
           <li>
             <.link
-              navigate={~p"/collections/#{category.slug}"}
+              navigate={collection_path("all", @current_sort)}
               class={[
                 "px-4 py-2 rounded-full text-sm transition-colors",
-                if(@current_slug == category.slug, do: "font-medium", else: "hover:opacity-80")
+                if(@current_slug == nil, do: "font-medium", else: "hover:opacity-80")
               ]}
-              style={if(@current_slug == category.slug,
+              style={if(@current_slug == nil,
                 do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
                 else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
               )}
             >
-              {category.name}
+              All
             </.link>
           </li>
-        <% end %>
-      </ul>
-    </nav>
+          <%= for category <- @categories do %>
+            <li>
+              <.link
+                navigate={collection_path(category.slug, @current_sort)}
+                class={[
+                  "px-4 py-2 rounded-full text-sm transition-colors",
+                  if(@current_slug == category.slug, do: "font-medium", else: "hover:opacity-80")
+                ]}
+                style={if(@current_slug == category.slug,
+                  do: "background-color: var(--t-accent); color: var(--t-text-on-accent);",
+                  else: "background-color: var(--t-surface-raised); color: var(--t-text-primary);"
+                )}
+              >
+                {category.name}
+              </.link>
+            </li>
+          <% end %>
+        </ul>
+      </nav>
+
+      <form phx-change="sort_changed">
+        <select
+          name="sort"
+          class="px-4 py-2 text-sm"
+          style="background-color: var(--t-surface-raised); color: var(--t-text-primary); border: 1px solid var(--t-border-default); border-radius: var(--t-radius-input);"
+          aria-label="Sort products"
+        >
+          <%= for {value, label} <- @sort_options do %>
+            <option value={value} selected={@current_sort == value}>{label}</option>
+          <% end %>
+        </select>
+      </form>
+    </div>
     """
   end
 end