Open universal search modal instantly via client-side JS

Replace phx-click server event with Fluxon.open_dialog for zero-latency
modal opening. The modal DOM is now always present (no :if conditional) so
it can be shown instantly; the server syncs state in the background.

Fix test selectors that now match the always-present modal form by scoping
to forms without phx-target (which the modal form always has).
This commit is contained in:
Claudio Ortolina
2026-05-07 20:43:15 +01:00
parent fa7a01b489
commit 621b35d824
6 changed files with 12 additions and 11 deletions
@@ -11,7 +11,6 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
~H"""
<div id={@id} phx-hook="UniversalSearchNavigation">
<.structured_modal
:if={@show_modal}
id="universal-search-root"
open={@show_modal}
on_close={JS.push("close_modal", value: %{}, target: "#universal-search")}
@@ -184,8 +183,10 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
id="universal-search-button"
variant="soft"
title={gettext("Search (Cmd/Ctrl+K)")}
phx-click="open_modal"
phx-target="#universal-search"
phx-click={
Fluxon.open_dialog("universal-search-root")
|> JS.push("open_modal", target: "#universal-search")
}
phx-hook=".SearchGlobalShortcut"
>
<span class="sr-only">{gettext("Search (Cmd/Ctrl+K)")}</span>