Better encapsulation for universal search

lib/music_library_web/components/layouts.ex

@@ -10,7 +10,7 @@ defmodule MusicLibraryWeb.Layouts do
   """
   use MusicLibraryWeb, :html
 
-  alias Phoenix.LiveView.ColocatedHook
+  import MusicLibraryWeb.UniversalSearchLive.Index, only: [universal_search_trigger: 1]
 
   embed_templates "layouts/*"
 

lib/music_library_web/components/layouts/app.html.heex

@@ -38,37 +38,7 @@
         </div>
       </div>
       <div class="flex space-x-2 md:space-x-4 items-center">
-        <script :type={ColocatedHook} name=".SearchGlobalShortcut">
+        <.universal_search_trigger />
-          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"
-        >
-          <span class="sr-only">{gettext("Search (Ctrl+K)")}</span>
-          <.icon name="hero-magnifying-glass" class="h-5 w-5" />
-        </.button>
         <.dropdown placement="bottom-end">
           <:toggle>
             <button class="flex items-center text-zinc-500 hover:text-zinc-700 dark:text-zinc-300 dark:hover:text-zinc-200 gap-x-2">
@@ -150,9 +120,4 @@
   </div>
 </main>
 
-<div>
+{MusicLibraryWeb.UniversalSearchLive.Index.live(@socket)}
-  {live_render(@socket, MusicLibraryWeb.UniversalSearchLive.Index,
-    id: "universal-search",
-    session: %{}
-  )}
-</div>

lib/music_library_web/live/universal_search_live/index.ex

@@ -4,6 +4,47 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
   import MusicLibraryWeb.SearchComponents
 
   alias MusicLibrary.Search
+  alias Phoenix.LiveView.ColocatedHook
+
+  def live(socket) do
+    live_render(socket, __MODULE__, id: "universal-search", session: %{})
+  end
+
+  def universal_search_trigger(assigns) do
+    ~H"""
+    <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"
+    >
+      <span class="sr-only">{gettext("Search (Ctrl+K)")}</span>
+      <.icon name="hero-magnifying-glass" class="h-5 w-5" />
+    </.button>
+    """
+  end
 
   @impl true
   def mount(_params, _session, socket) do

priv/gettext/default.pot

@@ -1135,7 +1135,7 @@ msgstr[1] ""
 msgid "Close"
 msgstr ""
 
-#: lib/music_library_web/components/layouts/app.html.heex
+#: lib/music_library_web/live/universal_search_live/index.ex
 #, elixir-autogen, elixir-format
 msgid "Search (Ctrl+K)"
 msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -1135,7 +1135,7 @@ msgstr[1] ""
 msgid "Close"
 msgstr ""
 
-#: lib/music_library_web/components/layouts/app.html.heex
+#: lib/music_library_web/live/universal_search_live/index.ex
 #, elixir-autogen, elixir-format
 msgid "Search (Ctrl+K)"
 msgstr ""