Enable Ctrl/Meta+K to trigger universal search

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

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;
+      }
+    });
+  },
+};

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

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

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

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