From 07b51c8c6e6466758cdcd96493c6463cfc003e93 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Sun, 6 Jul 2025 09:32:07 +0100
Subject: [PATCH] Replace custom modal with Fluxon modal

---
 .../universal_search_live/index.html.heex     | 249 ++++++++----------
 1 file changed, 114 insertions(+), 135 deletions(-)

diff --git a/lib/music_library_web/live/universal_search_live/index.html.heex b/lib/music_library_web/live/universal_search_live/index.html.heex
index 6c9ed145..dcc684ee 100644
--- a/lib/music_library_web/live/universal_search_live/index.html.heex
+++ b/lib/music_library_web/live/universal_search_live/index.html.heex
@@ -1,138 +1,117 @@
-<div id="universal-search-root">
-  <div
-    :if={@show_modal}
-    class="fixed inset-0 z-50 flex items-start justify-center pt-16 px-4 pb-6 sm:pt-24"
-  >
-    <!-- Modal backdrop -->
-    <div
-      class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity"
-      phx-click="close_modal"
-    >
-    </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"
-            />
-            <.input
-              name="query"
-              id="universal-search-input"
-              placeholder="Search records and artists..."
-              value={@search_query}
-              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} />
-      
-<!-- Empty state -->
-      <.empty_state :if={@search_query == "" and not @loading} />
-      
-<!-- No results -->
-      <.no_results
-        :if={@search_query != "" and @total_results == 0 and not @loading}
-        query={@search_query}
+<.modal
+  :if={@show_modal}
+  id="universal-search-root"
+  class="md:min-w-2xl max-w-sm md:max-w-3xl"
+  open={@show_modal}
+  on_close={JS.push("close_modal", value: %{})}
+>
+  <form class="mt-4" 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-zinc-400"
+      />
+      <.input
+        name="query"
+        id="universal-search-input"
+        placeholder="Search records and artists..."
+        value={@search_query}
+        phx-debounce="300"
+        autofocus
       />
-      
-<!-- Search results -->
-      <div :if={@total_results > 0 and not @loading} class="max-h-96 overflow-y-auto">
-        <!-- Collection results -->
-        <.search_result_group
-          :if={length(@search_results.collection) > 0}
-          title="Collection"
-          count={length(@search_results.collection)}
-          total_count={@search_counts.collection_count}
-        >
-          <.search_result_record
-            :for={{record, index} <- Enum.with_index(@search_results.collection)}
-            record={record}
-            type={:collection}
-            selected={@selected_index == index}
-            phx-click="navigate_to_record"
-            phx-value-id={record.id}
-            phx-value-type="collection"
-          />
-          <:actions>
-            <.view_all_button
-              :if={@search_counts.collection_count > length(@search_results.collection)}
-              count={@search_counts.collection_count}
-              target="collection"
-              phx-click="navigate_to_collection"
-              phx-value-query={@search_query}
-            />
-          </:actions>
-        </.search_result_group>
-        
-<!-- Wishlist results -->
-        <.search_result_group
-          :if={length(@search_results.wishlist) > 0}
-          title="Wishlist"
-          count={length(@search_results.wishlist)}
-          total_count={@search_counts.wishlist_count}
-          class="border-t border-gray-200 dark:border-gray-700"
-        >
-          <.search_result_record
-            :for={{record, index} <- Enum.with_index(@search_results.wishlist)}
-            record={record}
-            type={:wishlist}
-            selected={@selected_index == length(@search_results.collection) + index}
-            phx-click="navigate_to_record"
-            phx-value-id={record.id}
-            phx-value-type="wishlist"
-          />
-          <:actions>
-            <.view_all_button
-              :if={@search_counts.wishlist_count > length(@search_results.wishlist)}
-              count={@search_counts.wishlist_count}
-              target="wishlist"
-              phx-click="navigate_to_wishlist"
-              phx-value-query={@search_query}
-            />
-          </:actions>
-        </.search_result_group>
-        
-<!-- Artists results -->
-        <.search_result_group
-          :if={length(@search_results.artists) > 0}
-          title="Artists"
-          count={length(@search_results.artists)}
-          total_count={@search_counts.artists_count}
-          class="border-t border-gray-200 dark:border-gray-700"
-        >
-          <.search_result_artist
-            :for={{artist, index} <- Enum.with_index(@search_results.artists)}
-            artist={artist}
-            selected={
-              @selected_index ==
-                length(@search_results.collection) + length(@search_results.wishlist) + index
-            }
-            phx-click="navigate_to_artist"
-            phx-value-id={artist.musicbrainz_id}
-          />
-        </.search_result_group>
-      </div>
-      
-<!-- Footer with keyboard shortcuts -->
-      <.keyboard_shortcuts total_results={@total_results} />
     </div>
+  </form>
+  
+<!-- Loading state -->
+  <.loading_state :if={@loading} />
+  
+<!-- Empty state -->
+  <.empty_state :if={@search_query == "" and not @loading} />
+  
+<!-- No results -->
+  <.no_results
+    :if={@search_query != "" and @total_results == 0 and not @loading}
+    query={@search_query}
+  />
+  
+<!-- Search results -->
+  <div :if={@total_results > 0 and not @loading} class="max-h-96 overflow-y-auto">
+    <!-- Collection results -->
+    <.search_result_group
+      :if={length(@search_results.collection) > 0}
+      title="Collection"
+      count={length(@search_results.collection)}
+      total_count={@search_counts.collection_count}
+    >
+      <.search_result_record
+        :for={{record, index} <- Enum.with_index(@search_results.collection)}
+        record={record}
+        type={:collection}
+        selected={@selected_index == index}
+        phx-click="navigate_to_record"
+        phx-value-id={record.id}
+        phx-value-type="collection"
+      />
+      <:actions>
+        <.view_all_button
+          :if={@search_counts.collection_count > length(@search_results.collection)}
+          count={@search_counts.collection_count}
+          target="collection"
+          phx-click="navigate_to_collection"
+          phx-value-query={@search_query}
+        />
+      </:actions>
+    </.search_result_group>
+    
+<!-- Wishlist results -->
+    <.search_result_group
+      :if={length(@search_results.wishlist) > 0}
+      title="Wishlist"
+      count={length(@search_results.wishlist)}
+      total_count={@search_counts.wishlist_count}
+      class="border-t border-zinc-200 dark:border-zinc-700"
+    >
+      <.search_result_record
+        :for={{record, index} <- Enum.with_index(@search_results.wishlist)}
+        record={record}
+        type={:wishlist}
+        selected={@selected_index == length(@search_results.collection) + index}
+        phx-click="navigate_to_record"
+        phx-value-id={record.id}
+        phx-value-type="wishlist"
+      />
+      <:actions>
+        <.view_all_button
+          :if={@search_counts.wishlist_count > length(@search_results.wishlist)}
+          count={@search_counts.wishlist_count}
+          target="wishlist"
+          phx-click="navigate_to_wishlist"
+          phx-value-query={@search_query}
+        />
+      </:actions>
+    </.search_result_group>
+    
+<!-- Artists results -->
+    <.search_result_group
+      :if={length(@search_results.artists) > 0}
+      title="Artists"
+      count={length(@search_results.artists)}
+      total_count={@search_counts.artists_count}
+      class="border-t border-zinc-200 dark:border-zinc-700"
+    >
+      <.search_result_artist
+        :for={{artist, index} <- Enum.with_index(@search_results.artists)}
+        artist={artist}
+        selected={
+          @selected_index ==
+            length(@search_results.collection) + length(@search_results.wishlist) + index
+        }
+        phx-click="navigate_to_artist"
+        phx-value-id={artist.musicbrainz_id}
+      />
+    </.search_result_group>
   </div>
-</div>
+  
+<!-- Footer with keyboard shortcuts -->
+  <.keyboard_shortcuts total_results={@total_results} />
+</.modal>