cloud/music_library
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Replace custom modal with Fluxon modal

Browse Source
This commit is contained in:
Claudio Ortolina
2025-07-06 09:32:07 +01:00
parent 29986b7041
commit 07b51c8c6e
1 changed files with 114 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/music_library_web/live/universal_search_live/index.html.heex
+102 -123
View File
@@ -1,138 +1,117 @@
<div id="universal-search-root"> <.modal
<div :if={@show_modal}
:if={@show_modal} id="universal-search-root"
class="fixed inset-0 z-50 flex items-start justify-center pt-16 px-4 pb-6 sm:pt-24" class="md:min-w-2xl max-w-sm md:max-w-3xl"
> open={@show_modal}
<!-- Modal backdrop --> on_close={JS.push("close_modal", value: %{})}
<div >
class="fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity" <form class="mt-4" phx-change="search" phx-submit="search">
phx-click="close_modal" <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
/>
</div> </div>
</form>
<!-- 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 -->
<.loading_state :if={@loading} /> <.loading_state :if={@loading} />
<!-- Empty state --> <!-- Empty state -->
<.empty_state :if={@search_query == "" and not @loading} /> <.empty_state :if={@search_query == "" and not @loading} />
<!-- No results --> <!-- No results -->
<.no_results <.no_results
:if={@search_query != "" and @total_results == 0 and not @loading} :if={@search_query != "" and @total_results == 0 and not @loading}
query={@search_query} query={@search_query}
/> />
<!-- Search results --> <!-- Search results -->
<div :if={@total_results > 0 and not @loading} class="max-h-96 overflow-y-auto"> <div :if={@total_results > 0 and not @loading} class="max-h-96 overflow-y-auto">
<!-- Collection results --> <!-- Collection results -->
<.search_result_group <.search_result_group
:if={length(@search_results.collection) > 0} :if={length(@search_results.collection) > 0}
title="Collection" title="Collection"
count={length(@search_results.collection)} count={length(@search_results.collection)}
total_count={@search_counts.collection_count} total_count={@search_counts.collection_count}
> >
<.search_result_record <.search_result_record
:for={{record, index} <- Enum.with_index(@search_results.collection)} :for={{record, index} <- Enum.with_index(@search_results.collection)}
record={record} record={record}
type={:collection} type={:collection}
selected={@selected_index == index} selected={@selected_index == index}
phx-click="navigate_to_record" phx-click="navigate_to_record"
phx-value-id={record.id} phx-value-id={record.id}
phx-value-type="collection" phx-value-type="collection"
/> />
<:actions> <:actions>
<.view_all_button <.view_all_button
:if={@search_counts.collection_count > length(@search_results.collection)} :if={@search_counts.collection_count > length(@search_results.collection)}
count={@search_counts.collection_count} count={@search_counts.collection_count}
target="collection" target="collection"
phx-click="navigate_to_collection" phx-click="navigate_to_collection"
phx-value-query={@search_query} phx-value-query={@search_query}
/> />
</:actions> </:actions>
</.search_result_group> </.search_result_group>
<!-- Wishlist results --> <!-- Wishlist results -->
<.search_result_group <.search_result_group
:if={length(@search_results.wishlist) > 0} :if={length(@search_results.wishlist) > 0}
title="Wishlist" title="Wishlist"
count={length(@search_results.wishlist)} count={length(@search_results.wishlist)}
total_count={@search_counts.wishlist_count} 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 <.search_result_record
:for={{record, index} <- Enum.with_index(@search_results.wishlist)} :for={{record, index} <- Enum.with_index(@search_results.wishlist)}
record={record} record={record}
type={:wishlist} type={:wishlist}
selected={@selected_index == length(@search_results.collection) + index} selected={@selected_index == length(@search_results.collection) + index}
phx-click="navigate_to_record" phx-click="navigate_to_record"
phx-value-id={record.id} phx-value-id={record.id}
phx-value-type="wishlist" phx-value-type="wishlist"
/> />
<:actions> <:actions>
<.view_all_button <.view_all_button
:if={@search_counts.wishlist_count > length(@search_results.wishlist)} :if={@search_counts.wishlist_count > length(@search_results.wishlist)}
count={@search_counts.wishlist_count} count={@search_counts.wishlist_count}
target="wishlist" target="wishlist"
phx-click="navigate_to_wishlist" phx-click="navigate_to_wishlist"
phx-value-query={@search_query} phx-value-query={@search_query}
/> />
</:actions> </:actions>
</.search_result_group> </.search_result_group>
<!-- Artists results --> <!-- Artists results -->
<.search_result_group <.search_result_group
:if={length(@search_results.artists) > 0} :if={length(@search_results.artists) > 0}
title="Artists" title="Artists"
count={length(@search_results.artists)} count={length(@search_results.artists)}
total_count={@search_counts.artists_count} 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 <.search_result_artist
:for={{artist, index} <- Enum.with_index(@search_results.artists)} :for={{artist, index} <- Enum.with_index(@search_results.artists)}
artist={artist} artist={artist}
selected={ selected={
@selected_index == @selected_index ==
length(@search_results.collection) + length(@search_results.wishlist) + index length(@search_results.collection) + length(@search_results.wishlist) + index
} }
phx-click="navigate_to_artist" phx-click="navigate_to_artist"
phx-value-id={artist.musicbrainz_id} phx-value-id={artist.musicbrainz_id}
/> />
</.search_result_group> </.search_result_group>
</div> </div>
<!-- Footer with keyboard shortcuts --> <!-- Footer with keyboard shortcuts -->
<.keyboard_shortcuts total_results={@total_results} /> <.keyboard_shortcuts total_results={@total_results} />
</div> </.modal>
</div>
</div>