Extract search component

lib/music_library_web/components/record_components.ex

@@ -188,6 +188,25 @@ defmodule MusicLibraryWeb.RecordComponents do
     """
   end
 
+  attr :query, :string, required: true
+
+  def search_form(assigns) do
+    ~H"""
+    <form class="w-2/3" for={@query} phx-submit="search" phx-change="search">
+      <.input
+        type="search"
+        id={:query}
+        name={:query}
+        value={@query}
+        placeholder={gettext("Search")}
+        phx-debounce="500"
+        autocorrect="off"
+        autocapitalize="none"
+      />
+    </form>
+    """
+  end
+
   defp toggle_actions_menu(record_id) do
     JS.toggle(to: "#actions-#{record_id}")
     |> JS.toggle_class("pointer-events-none", to: "#records > li")

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

@@ -1,18 +1,7 @@
 <div>
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
-      <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
+      <.search_form query={@record_list_params.query} />
-        <.input
-          type="search"
-          id={:query}
-          name={:query}
-          value={@record_list_params.query}
-          placeholder={gettext("Search")}
-          phx-debounce="500"
-          autocorrect="off"
-          autocapitalize="none"
-        />
-      </form>
       <.link patch={~p"/collection/import"}>
         <.button>{gettext("Import")}</.button>
       </.link>

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

@@ -1,18 +1,7 @@
 <div>
   <header class="gap-6 mb-2">
     <div class="flex items-center justify-between gap-6 mb-2 mt-2">
-      <form class="w-2/3" for={@record_list_params.query} phx-submit="search" phx-change="search">
+      <.search_form query={@record_list_params.query} />
-        <.input
-          type="search"
-          id={:query}
-          name={:query}
-          value={@record_list_params.query}
-          placeholder={gettext("Search")}
-          phx-debounce="500"
-          autocorrect="off"
-          autocapitalize="none"
-        />
-      </form>
       <.link patch={~p"/wishlist/import"}>
         <.button>{gettext("Import")}</.button>
       </.link>

priv/gettext/default.pot

@@ -113,8 +113,8 @@ msgstr ""
 msgid "Hang in there while we get back on track"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:17
+#: lib/music_library_web/live/collection_live/index.html.heex:6
-#: lib/music_library_web/live/wishlist_live/index.html.heex:17
+#: lib/music_library_web/live/wishlist_live/index.html.heex:6
 #, elixir-autogen, elixir-format
 msgid "Import"
 msgstr ""
@@ -231,8 +231,7 @@ msgstr ""
 msgid "Saving..."
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:10
+#: lib/music_library_web/components/record_components.ex:201
-#: lib/music_library_web/live/wishlist_live/index.html.heex:10
 #, elixir-autogen, elixir-format
 msgid "Search"
 msgstr ""
@@ -254,8 +253,8 @@ msgstr ""
 msgid "Show"
 msgstr ""
 
-#: lib/music_library_web/live/collection_live/index.html.heex:23
+#: lib/music_library_web/live/collection_live/index.html.heex:12
-#: lib/music_library_web/live/wishlist_live/index.html.heex:23
+#: 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"
 msgstr ""