Convert universal search into a live component

lib/music_library_web/components/layouts/app.html.heex

@@ -130,4 +130,4 @@
   </div>
 </main>
 
-{MusicLibraryWeb.UniversalSearchLive.Index.live(@socket)}
+<.live_component module={MusicLibraryWeb.UniversalSearchLive.Index} id="universal-search" />

lib/music_library_web/live/universal_search_live/index.ex

@@ -1,15 +1,11 @@
 defmodule MusicLibraryWeb.UniversalSearchLive.Index do
-  use MusicLibraryWeb, :live_view
+  use MusicLibraryWeb, :live_component
 
   import MusicLibraryWeb.SearchComponents
 
   alias MusicLibrary.Search
   alias Phoenix.LiveView.ColocatedHook
 
-  def live(socket) do
-    live_render(socket, __MODULE__, id: "universal-search", session: %{})
-  end
-
   def universal_search_trigger(assigns) do
     ~H"""
     <script :type={ColocatedHook} name=".SearchGlobalShortcut">
@@ -47,7 +43,7 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
   end
 
   @impl true
-  def mount(_params, _session, socket) do
+  def mount(socket) do
     {:ok,
      socket
      |> assign(:show_modal, false)

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

@@ -1,10 +1,11 @@
-<.structured_modal
+<div id={@id}>
+  <.structured_modal
     :if={@show_modal}
     id="universal-search-root"
     open={@show_modal}
-  on_close={JS.push("close_modal", value: %{})}
->
-  <form class="mt-4 text-sm" phx-change="search" phx-submit="search">
+    on_close={JS.push("close_modal", value: %{}, target: "#universal-search")}
+  >
+    <form class="mt-4 text-sm" phx-change="search" phx-submit="search" phx-target={@myself}>
       <div class="relative">
         <.icon
           name="hero-magnifying-glass"
@@ -43,6 +44,7 @@
           phx-click="navigate_to_record"
           phx-value-id={record.id}
           phx-value-type="collection"
+          phx-target={@myself}
         />
         <:actions>
           <.view_all_button
@@ -51,6 +53,7 @@
             target="collection"
             phx-click="navigate_to_collection"
             phx-value-query={@search_query}
+            phx-target={@myself}
           />
         </:actions>
       </.search_result_group>
@@ -70,6 +73,7 @@
           phx-click="navigate_to_record"
           phx-value-id={record.id}
           phx-value-type="wishlist"
+          phx-target={@myself}
         />
         <:actions>
           <.view_all_button
@@ -78,6 +82,7 @@
             target="wishlist"
             phx-click="navigate_to_wishlist"
             phx-value-query={@search_query}
+            phx-target={@myself}
           />
         </:actions>
       </.search_result_group>
@@ -96,10 +101,12 @@
           image_data_hash={image_data_hash}
           phx-click="navigate_to_artist"
           phx-value-id={artist.musicbrainz_id}
+          phx-target={@myself}
         />
       </.search_result_group>
     </div>
     
 <!-- Footer with keyboard shortcuts -->
     <.results_footer total_results={@total_results} />
-</.structured_modal>
+  </.structured_modal>
+</div>