diff --git a/assets/js/app.js b/assets/js/app.js index 93798dd9..e2466f85 100644 --- a/assets/js/app.js +++ b/assets/js/app.js @@ -23,14 +23,11 @@ import { LiveSocket } from "phoenix_live_view"; import topbar from "../vendor/topbar"; import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon"; import BarcodeScannerHook from "./barcode-scanner"; -import { SearchHook, SearchInputHook } from "./search"; import confetti from "canvas-confetti"; import { createLiveToastHook } from "live_toast"; let Hooks = FluxonHooks; Hooks.BarcodeScanner = BarcodeScannerHook; -Hooks.Search = SearchHook; -Hooks.SearchInput = SearchInputHook; Hooks.LiveToast = createLiveToastHook(); let csrfToken = document diff --git a/assets/js/search.js b/assets/js/search.js deleted file mode 100644 index bbc86fd1..00000000 --- a/assets/js/search.js +++ /dev/null @@ -1,56 +0,0 @@ -// Search hook for universal search functionality -const SearchHook = { - mounted() { - this.setupGlobalKeyboardShortcuts(); - this.setupSearchInputFocus(); - }, - - updated() { - this.setupSearchInputFocus(); - }, - - setupGlobalKeyboardShortcuts() { - // Add global keyboard event listener for Ctrl/Cmd + K - document.addEventListener('keydown', (e) => { - // Check for Ctrl+K (Windows/Linux) or Cmd+K (Mac) - if ((e.ctrlKey || e.metaKey) && e.key === 'k') { - e.preventDefault(); - // Send event to the universal search LiveView - const searchContainer = document.getElementById('universal-search'); - if (searchContainer) { - searchContainer.dispatchEvent(new CustomEvent('phx:open_modal', { - bubbles: true, - detail: {} - })); - } - } - }); - }, - - setupSearchInputFocus() { - // Auto-focus search input when modal opens - const searchInput = document.getElementById('universal-search-input'); - if (searchInput) { - // Small delay to ensure modal is fully rendered - setTimeout(() => { - searchInput.focus(); - }, 100); - } - } -}; - -// Hook for search input with auto-focus -const SearchInputHook = { - mounted() { - this.el.focus(); - }, - - updated() { - // Maintain focus during updates - if (document.activeElement !== this.el) { - this.el.focus(); - } - } -}; - -export { SearchHook, SearchInputHook }; \ No newline at end of file diff --git a/lib/music_library_web/components/layouts/app.html.heex b/lib/music_library_web/components/layouts/app.html.heex index 3588f3c3..a15c1503 100644 --- a/lib/music_library_web/components/layouts/app.html.heex +++ b/lib/music_library_web/components/layouts/app.html.heex @@ -118,7 +118,7 @@ -
+
{live_render(@socket, MusicLibraryWeb.UniversalSearchLive.Index, id: "universal-search", session: %{} 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 0154f138..60d7511c 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 @@ -4,8 +4,6 @@ class="fixed inset-0 z-50 flex items-start justify-center pt-16 px-4 pb-6 sm:pt-24" phx-window-keydown="key_navigation" phx-key="keydown" - phx-hook="Search" - id="search-modal" >
<.input name="query" + id="universal-search-input" placeholder="Search records and artists..." value={@search_query} phx-debounce="300" - phx-hook="SearchInput" - id="universal-search-input" + autofocus />