Can sort wishlisted records by insertion

lib/music_library/records.ex

@@ -70,6 +70,13 @@ defmodule MusicLibrary.Records do
             {:desc, r.purchased_at},
             order_alphabetically()
           ])
+
+        :insertion ->
+          initial_search
+          |> order_by([r], [
+            {:desc, r.inserted_at},
+            order_alphabetically()
+          ])
       end
 
     Enum.reduce(parsed_query, search_with_order, fn

lib/music_library_web/live/wishlist_live/index.ex

@@ -47,11 +47,13 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
 
   defp apply_action(socket, :index, params) do
     query = params["query"] || ""
+    order = parse_order(params["order"] || "insertion")
     total_records = Wishlist.search_records_count(query)
 
     record_list_params =
       @default_records_list_params
       |> merge_query(query)
+      |> merge_order(order)
       |> merge_pagination(params, total_records)
 
     load_and_assign_records(socket, record_list_params)
@@ -154,6 +156,10 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
     Map.put(record_list_params, :query, query)
   end
 
+  defp merge_order(record_list_params, order) do
+    Map.put(record_list_params, :order, order)
+  end
+
   defp merge_pagination(record_list_params, params, total_records) do
     record_list_params
     |> Map.put(:page, parse_int_or_default(params["page"], record_list_params.page))
@@ -170,6 +176,19 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
     String.to_integer(value)
   end
 
+  defp parse_order("alphabetical"), do: :alphabetical
+  defp parse_order("insertion"), do: :insertion
+
+  defp order_path(record_list_params, order) do
+    qs =
+      record_list_params
+      |> Map.take([:query])
+      |> Map.put(:order, order)
+      |> Enum.filter(fn {_, v} -> v not in ["", nil] end)
+
+    ~p"/wishlist?#{qs}"
+  end
+
   defp back_path(record_list_params) do
     qs =
       record_list_params

lib/music_library_web/live/wishlist_live/index.html.heex

@@ -18,6 +18,35 @@
       </.link>
     </div>
   </header>
+
+  <div class="flex items-end justify-between gap-6 mt-8">
+    <span class="isolate inline-flex rounded-md shadow-xs">
+      <.button
+        patch={order_path(@record_list_params, :insertion)}
+        as="link"
+        size="sm"
+        class={[
+          "rounded-l-md rounded-r-none",
+          @record_list_params.order == :insertion && "!bg-zinc-100 dark:!bg-zinc-700"
+        ]}
+      >
+        <.icon name="hero-star" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
+        {gettext("Insertion")}
+      </.button>
+      <.button
+        patch={order_path(@record_list_params, :alphabetical)}
+        as="link"
+        size="sm"
+        class={[
+          "-ml-px rounded-r-md rounded-l-none",
+          @record_list_params.order == :alphabetical && "!bg-zinc-100 dark:!bg-zinc-700"
+        ]}
+      >
+        <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
+        {gettext("A->Z")}
+      </.button>
+    </span>
+  </div>
 </div>
 
 <.record_list