Replace custom modal with Fluxon modal

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

@@ -1,24 +1,15 @@
-<div id="universal-search-root">
+<.modal
-  <div
   :if={@show_modal}
-    class="fixed inset-0 z-50 flex items-start justify-center pt-16 px-4 pb-6 sm:pt-24"
+  id="universal-search-root"
-  >
+  class="md:min-w-2xl max-w-sm md:max-w-3xl"
-    <!-- Modal backdrop -->
+  open={@show_modal}
-    <div
+  on_close={JS.push("close_modal", value: %{})}
-      class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
+>
-      phx-click="close_modal"
+  <form class="mt-4" phx-change="search" phx-submit="search">
-    >
-    </div>
-    
-<!-- Modal content -->
-    <div class="relative w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl">
-      <!-- Search input -->
-      <div class="p-4 border-b border-gray-200 dark:border-gray-700">
-        <form phx-change="search" phx-submit="search">
     <div class="relative">
       <.icon
         name="hero-magnifying-glass"
-              class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400"
+        class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-zinc-400"
       />
       <.input
         name="query"
@@ -28,18 +19,8 @@
         phx-debounce="300"
         autofocus
       />
-            <button
-              :if={@search_query != ""}
-              type="button"
-              phx-click="search"
-              phx-value-query=""
-              class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
-            >
-              <.icon name="hero-x-mark" class="h-5 w-5" />
-            </button>
     </div>
   </form>
-      </div>
   
 <!-- Loading state -->
   <.loading_state :if={@loading} />
@@ -88,7 +69,7 @@
       title="Wishlist"
       count={length(@search_results.wishlist)}
       total_count={@search_counts.wishlist_count}
-          class="border-t border-gray-200 dark:border-gray-700"
+      class="border-t border-zinc-200 dark:border-zinc-700"
     >
       <.search_result_record
         :for={{record, index} <- Enum.with_index(@search_results.wishlist)}
@@ -116,7 +97,7 @@
       title="Artists"
       count={length(@search_results.artists)}
       total_count={@search_counts.artists_count}
-          class="border-t border-gray-200 dark:border-gray-700"
+      class="border-t border-zinc-200 dark:border-zinc-700"
     >
       <.search_result_artist
         :for={{artist, index} <- Enum.with_index(@search_results.artists)}
@@ -133,6 +114,4 @@
   
 <!-- Footer with keyboard shortcuts -->
   <.keyboard_shortcuts total_results={@total_results} />
-    </div>
+</.modal>
-  </div>
-</div>