Replace custom modal with Fluxon modal
This commit is contained in:
Claudio Ortolina
@@ -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
|
||||||
</div>
|
name="hero-magnifying-glass"
|
||||||
|
class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-zinc-400"
|
||||||
<!-- Modal content -->
|
/>
|
||||||
<div class="relative w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl">
|
<.input
|
||||||
<!-- Search input -->
|
name="query"
|
||||||
<div class="p-4 border-b border-gray-200 dark:border-gray-700">
|
id="universal-search-input"
|
||||||
<form phx-change="search" phx-submit="search">
|
placeholder="Search records and artists..."
|
||||||
<div class="relative">
|
value={@search_query}
|
||||||
<.icon
|
phx-debounce="300"
|
||||||
name="hero-magnifying-glass"
|
autofocus
|
||||||
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}
|
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<!-- 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>
|
</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>
|
||||||
</div>
|
|
||||||
|
<!-- Footer with keyboard shortcuts -->
|
||||||
|
<.keyboard_shortcuts total_results={@total_results} />
|
||||||
|
</.modal>
|
||||||
|
|||||||
Reference in New Issue
Block a user