Move SearchGlobalShortcut to a colocated hook

lib/music_library_web/components/layouts.ex

@@ -10,6 +10,8 @@ defmodule MusicLibraryWeb.Layouts do
   """
   use MusicLibraryWeb, :html
 
+  alias Phoenix.LiveView.ColocatedHook
+
   embed_templates "layouts/*"
 
   attr :current_section, :atom, required: true

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

@@ -38,13 +38,33 @@
         </div>
       </div>
       <div class="flex space-x-2 md:space-x-4 items-center">
+        <script :type={ColocatedHook} name=".SearchGlobalShortcut">
+          export default {
+            mounted() {
+              const universalSearchButton = document.querySelector("#universal-search-button");
+
+              document.addEventListener("keydown", (event) => {
+                switch (event.key) {
+                  case "k":
+                    if (event.metaKey || event.ctrlKey) {
+                      event.preventDefault();
+                      universalSearchButton.click();
+                    }
+                    break;
+                  default:
+                    break;
+                }
+              });
+            },
+          };
+        </script>
         <.button
           id="universal-search-button"
           variant="ghost"
           title={gettext("Search (Ctrl+K)")}
           phx-click="open_modal"
           phx-target="#universal-search"
-          phx-hook="SearchGlobalShortcut"
+          phx-hook=".SearchGlobalShortcut"
         >
           <span class="sr-only">{gettext("Search (Ctrl+K)")}</span>
           <.icon name="hero-magnifying-glass" class="h-5 w-5" />