From ad74560cf947a930d644022386c981fbfe3468d5 Mon Sep 17 00:00:00 2001
From: Claudio Ortolina <cloud8421@gmail.com>
Date: Mon, 7 Jul 2025 11:36:41 +0100
Subject: [PATCH] Enable Ctrl/Meta+K to trigger universal search

---
 assets/js/app.js                               |  2 ++
 assets/js/search-global-shortcut.js            | 18 ++++++++++++++++++
 .../components/layouts/app.html.heex           |  2 ++
 .../components/search_components.ex            |  3 ++-
 priv/gettext/default.pot                       | 10 +++++-----
 priv/gettext/en/LC_MESSAGES/default.po         | 10 +++++-----
 6 files changed, 34 insertions(+), 11 deletions(-)
 create mode 100644 assets/js/search-global-shortcut.js

diff --git a/assets/js/app.js b/assets/js/app.js
index e2466f85..00eb1b73 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -23,11 +23,13 @@ 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 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
diff --git a/assets/js/search-global-shortcut.js b/assets/js/search-global-shortcut.js
new file mode 100644
index 00000000..23c0abfd
--- /dev/null
+++ b/assets/js/search-global-shortcut.js
@@ -0,0 +1,18 @@
+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/lib/music_library_web/components/layouts/app.html.heex b/lib/music_library_web/components/layouts/app.html.heex
index a15c1503..9e7e7589 100644
--- a/lib/music_library_web/components/layouts/app.html.heex
+++ b/lib/music_library_web/components/layouts/app.html.heex
@@ -39,10 +39,12 @@
       </div>
       <div class="flex space-x-2 md:space-x-4 items-center">
         <.button
+          id="universal-search-button"
           variant="ghost"
           title={gettext("Search (Ctrl+K)")}
           phx-click="open_modal"
           phx-target="#universal-search"
+          phx-hook="SearchGlobalShortcut"
         >
           <span class="sr-only">{gettext("Search (Ctrl+K)")}</span>
           <.icon name="hero-magnifying-glass" class="h-5 w-5" />
diff --git a/lib/music_library_web/components/search_components.ex b/lib/music_library_web/components/search_components.ex
index ba0cd571..797b5df5 100644
--- a/lib/music_library_web/components/search_components.ex
+++ b/lib/music_library_web/components/search_components.ex
@@ -201,7 +201,8 @@ defmodule MusicLibraryWeb.SearchComponents do
     <div class="p-8 text-center">
       <.icon name="hero-magnifying-glass" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
       <p class="text-sm text-zinc-500 dark:text-zinc-500 mt-2">
-        {gettext("Search records and artists...")}
+        <kbd class="px-2 py-1 bg-zinc-100 dark:bg-zinc-700 rounded text-xs">Ctrl+K</kbd>
+        {gettext("to open this search")}
       </p>
     </div>
     """
diff --git a/priv/gettext/default.pot b/priv/gettext/default.pot
index 93c66457..057e9d04 100644
--- a/priv/gettext/default.pot
+++ b/priv/gettext/default.pot
@@ -1162,11 +1162,6 @@ msgstr ""
 msgid "Search (Ctrl+K)"
 msgstr ""
 
-#: lib/music_library_web/components/search_components.ex
-#, elixir-autogen, elixir-format
-msgid "Search records and artists..."
-msgstr ""
-
 #: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format
 msgid "Artist image"
@@ -1176,3 +1171,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "Artist updated successfully"
 msgstr ""
+
+#: lib/music_library_web/components/search_components.ex
+#, elixir-autogen, elixir-format
+msgid "to open this search"
+msgstr ""
diff --git a/priv/gettext/en/LC_MESSAGES/default.po b/priv/gettext/en/LC_MESSAGES/default.po
index 4a22ae5c..ac64fa2e 100644
--- a/priv/gettext/en/LC_MESSAGES/default.po
+++ b/priv/gettext/en/LC_MESSAGES/default.po
@@ -1162,11 +1162,6 @@ msgstr ""
 msgid "Search (Ctrl+K)"
 msgstr ""
 
-#: lib/music_library_web/components/search_components.ex
-#, elixir-autogen, elixir-format
-msgid "Search records and artists..."
-msgstr ""
-
 #: lib/music_library_web/live/artist_live/form_component.ex
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Artist image"
@@ -1176,3 +1171,8 @@ msgstr ""
 #, elixir-autogen, elixir-format, fuzzy
 msgid "Artist updated successfully"
 msgstr ""
+
+#: lib/music_library_web/components/search_components.ex
+#, elixir-autogen, elixir-format
+msgid "to open this search"
+msgstr ""