From 5e732317675d269e9d1eee0007041fb265bb9260 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Thu, 17 Jul 2025 17:32:24 +0100
Subject: [PATCH] Move SearchGlobalShortcut to a colocated hook

---
 assets/js/app.js                              |  5 ++---
 assets/js/search-global-shortcut.js           | 18 ---------------
 config/config.exs                             |  4 ++--
 lib/music_library_web/components/layouts.ex   |  2 ++
 .../components/layouts/app.html.heex          | 22 ++++++++++++++++++-
 5 files changed, 27 insertions(+), 24 deletions(-)
 delete mode 100644 assets/js/search-global-shortcut.js

diff --git a/assets/js/app.js b/assets/js/app.js
index 00eb1b73..f8760cda 100644
--- a/assets/js/app.js
+++ b/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);
diff --git a/assets/js/search-global-shortcut.js b/assets/js/search-global-shortcut.js
deleted file mode 100644
index 23c0abfd..00000000
--- a/assets/js/search-global-shortcut.js
+++ /dev/null
@@ -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;
-      }
-    });
-  },
-};
diff --git a/config/config.exs b/config/config.exs
index bd5def83..0e353857 100644
--- a/config/config.exs
+++ b/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)
diff --git a/lib/music_library_web/components/layouts.ex b/lib/music_library_web/components/layouts.ex
index c7c5b614..08fbaeaa 100644
--- a/lib/music_library_web/components/layouts.ex
+++ b/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
diff --git a/lib/music_library_web/components/layouts/app.html.heex b/lib/music_library_web/components/layouts/app.html.heex
index f634dc80..e9beec63 100644
--- a/lib/music_library_web/components/layouts/app.html.heex
+++ b/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" />