Remove universal search hooks

- Global shortcuts don't work
- Focus input on open can be achieved just with 'autofocus' attribute
- Maintaining focus when input is active can be achieved just by adding
  an ID to the input

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

assets/js/search.js

@@ -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 };

lib/music_library_web/components/layouts/app.html.heex

@@ -118,7 +118,7 @@
   </div>
 </main>
 
-<div phx-hook="Search" id="search-global-hook">
+<div>
   {live_render(@socket, MusicLibraryWeb.UniversalSearchLive.Index,
     id: "universal-search",
     session: %{}

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"
   >
     <!-- Modal backdrop -->
     <div
@@ -26,11 +24,11 @@
             />
             <.input
               name="query"
+              id="universal-search-input"
               placeholder="Search records and artists..."
               value={@search_query}
               phx-debounce="300"
-              phx-hook="SearchInput"
+              autofocus
-              id="universal-search-input"
             />
             <button
               :if={@search_query != ""}