Add collection sorting buttons (inactive)

lib/music_library_web/live/collection_live/index.ex

@@ -10,7 +10,8 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
   @default_records_list_params %{
     query: "",
     page: 1,
-    page_size: 20
+    page_size: 20,
+    order: :alphabetical
   }
 
   @impl true

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

@@ -8,13 +8,43 @@
     </div>
   </header>
 
-  <p class="text-right text-sm max-sm:text-xs mt-8 text-zinc-900 dark:text-zinc-400">
-    {gettext(
-      "Showing <b>%{visible}</b> of <b>%{total}</b> records",
-      %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
-    )
-    |> raw()}
-  </p>
+  <div class="flex items-center justify-between gap-6 mt-8">
+    <span class="isolate inline-flex rounded-md shadow-sm">
+      <button
+        type="button"
+        class={[
+          "relative inline-flex items-center rounded-l-md bg-white px-3 py-2 text-xs sm:text-sm text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10",
+          @record_list_params.order == :alphabetical && "font-bold"
+        ]}
+      >
+        <.icon name="hero-user-solid" class="mr-1 h-4 w-4" aria-hidden="true" data-slot="icon" />
+        {gettext("A->Z")}
+      </button>
+      <button
+        type="button"
+        class={[
+          "relative -ml-px inline-flex items-center rounded-r-md bg-white px-3 py-2 text-xs sm:text-sm text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus:z-10",
+          @record_list_params.order == :purchase && "font-bold"
+        ]}
+      >
+        <.icon
+          name="hero-banknotes-solid"
+          class="mr-1 h-4 w-4"
+          aria-hidden="true"
+          data-slot="icon"
+        />
+        {gettext("Purchase")}
+      </button>
+    </span>
+
+    <p class="text-right text-sm max-sm:text-xs text-zinc-900 dark:text-zinc-400">
+      {gettext(
+        "Showing <b>%{visible}</b> of <b>%{total}</b> records",
+        %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
+      )
+      |> raw()}
+    </p>
+  </div>
 </div>
 
 <.record_list