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">
+  <div class="flex items-center justify-between gap-6 mt-8">
-    {gettext(
+    <span class="isolate inline-flex rounded-md shadow-sm">
-      "Showing <b>%{visible}</b> of <b>%{total}</b> records",
+      <button
-      %{visible: Enum.count(@streams.records), total: @record_list_params.total_entries}
+        type="button"
-    )
+        class={[
-    |> raw()}
+          "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",
-  </p>
+          @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

priv/gettext/default.pot

@@ -31,7 +31,7 @@ msgstr ""
 
 #: lib/music_library_web/components/layouts/app.html.heex:14
 #: lib/music_library_web/live/artist_live/show.html.heex:73
-#: lib/music_library_web/live/collection_live/index.ex:78
+#: lib/music_library_web/live/collection_live/index.ex:79
 #: lib/music_library_web/live/collection_live/show.ex:115
 #: lib/music_library_web/live/collection_live/show.ex:132
 #, elixir-autogen, elixir-format
@@ -59,8 +59,8 @@ msgstr ""
 msgid "Edit"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:124
+#: lib/music_library_web/live/collection_live/index.ex:125
-#: lib/music_library_web/live/collection_live/index.ex:131
+#: lib/music_library_web/live/collection_live/index.ex:132
 #: lib/music_library_web/live/stats_live/index.ex:53
 #: lib/music_library_web/live/stats_live/index.ex:59
 #: lib/music_library_web/live/wishlist_live/index.ex:121
@@ -170,6 +170,7 @@ msgid "Previous"
 msgstr ""
 
 #: lib/music_library_web/components/record_components.ex:170
+#: lib/music_library_web/live/collection_live/index.html.heex:36
 #: lib/music_library_web/live/wishlist_live/show.html.heex:135
 #, elixir-autogen, elixir-format
 msgid "Purchase"
@@ -185,7 +186,7 @@ msgstr ""
 msgid "Purchased on"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:116
+#: lib/music_library_web/live/collection_live/index.ex:117
 #: lib/music_library_web/live/stats_live/index.ex:45
 #: lib/music_library_web/live/wishlist_live/index.ex:113
 #, elixir-autogen, elixir-format
@@ -236,7 +237,7 @@ msgstr ""
 msgid "Show"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:12
+#: lib/music_library_web/live/collection_live/index.html.heex:41
 #: lib/music_library_web/live/wishlist_live/index.html.heex:12
 #, elixir-autogen, elixir-format
 msgid "Showing <b>%{visible}</b> of <b>%{total}</b> records"
@@ -258,7 +259,7 @@ msgstr ""
 msgid "Success!"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:20
+#: lib/music_library_web/live/collection_live/index.ex:21
 #: lib/music_library_web/live/collection_live/show.ex:12
 #: lib/music_library_web/live/wishlist_live/index.ex:20
 #: lib/music_library_web/live/wishlist_live/show.ex:10
@@ -410,7 +411,7 @@ msgstr ""
 msgid "Details"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.ex:43
+#: lib/music_library_web/live/collection_live/index.ex:44
 #, elixir-autogen, elixir-format
 msgid "Import from MusicBrainz · Collection"
 msgstr ""
@@ -506,3 +507,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Error loading play count"
 msgstr ""
+
+#: lib/music_library_web/live/collection_live/index.html.heex:21
+#, elixir-autogen, elixir-format
+msgid "A->Z"
+msgstr ""