Move SearchGlobalShortcut to a colocated hook

assets/js/app.js

@@ -20,16 +20,15 @@ import "phoenix_html";
 // Establish Phoenix Socket and LiveView configuration.
 import { Socket } from "phoenix";
 import { LiveSocket } from "phoenix_live_view";
+import { hooks as colocatedHooks } from "phoenix-colocated/music_library";
 import topbar from "../vendor/topbar";
 import { Hooks as FluxonHooks, DOM as FluxonDOM } from "fluxon";
 import BarcodeScannerHook from "./barcode-scanner";
-import SearchGlobalShortcut from "./search-global-shortcut";
 import confetti from "canvas-confetti";
 import { createLiveToastHook } from "live_toast";
 
 let Hooks = FluxonHooks;
 Hooks.BarcodeScanner = BarcodeScannerHook;
-Hooks.SearchGlobalShortcut = SearchGlobalShortcut;
 Hooks.LiveToast = createLiveToastHook();
 
 let csrfToken = document
@@ -38,7 +37,7 @@ let csrfToken = document
 let liveSocket = new LiveSocket("/live", Socket, {
   longPollFallbackMs: 2500,
   params: { _csrf_token: csrfToken },
-  hooks: Hooks,
+  hooks: { ...Hooks, ...colocatedHooks },
   dom: {
     onBeforeElUpdated(from, to) {
       FluxonDOM.onBeforeElUpdated(from, to);

assets/js/search-global-shortcut.js

@@ -1,18 +0,0 @@
-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;
-      }
-    });
-  },
-};

config/config.exs

@@ -50,9 +50,9 @@ config :esbuild,
   version: "0.25.6",
   music_library: [
     args:
-      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/*),
+      ~w(js/app.js --bundle --target=es2017 --outdir=../priv/static/assets --external:/fonts/* --external:/images/* --alias:@=.),
     cd: Path.expand("../assets", __DIR__),
-    env: %{"NODE_PATH" => Path.expand("../deps", __DIR__)}
+    env: %{"NODE_PATH" => [Path.expand("../deps", __DIR__), Mix.Project.build_path()]}
   ]
 
 # Configure tailwind (the version is required)

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" />