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 @@
<.button
+ id="universal-search-button"
variant="ghost"
title={gettext("Search (Ctrl+K)")}
phx-click="open_modal"
phx-target="#universal-search"
+ phx-hook="SearchGlobalShortcut"
>
{gettext("Search (Ctrl+K)")}
<.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
<.icon name="hero-magnifying-glass" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
- {gettext("Search records and artists...")}
+ Ctrl+K
+ {gettext("to open this search")}
"""
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 ""