Use Fluxon elements for universal search

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

@@ -38,10 +38,15 @@
         </div>
       </div>
       <div class="flex space-x-2 md:space-x-4 items-center">
-        <MusicLibraryWeb.SearchComponents.search_trigger
+        <.button
+          variant="ghost"
+          title={gettext("Search (Ctrl+K)")}
           phx-click="open_modal"
           phx-target="#universal-search"
-        />
+        >
+          <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 gap-x-2">

lib/music_library_web/components/search_components.ex

@@ -9,37 +9,6 @@ defmodule MusicLibraryWeb.SearchComponents do
 
   alias MusicLibrary.Records.Record
 
-  @doc """
-  Renders a search trigger button that opens the universal search modal.
-
-  ## Examples
-
-      <.search_trigger />
-  """
-  attr :class, :string, default: ""
-  attr :rest, :global, include: ~w(phx-click phx-target)
-
-  def search_trigger(assigns) do
-    ~H"""
-    <button
-      type="button"
-      class={[
-        "flex items-center justify-center h-9 w-9 rounded-lg",
-        "text-zinc-500 dark:text-zinc-400",
-        "hover:text-zinc-700 dark:hover:text-zinc-300",
-        "hover:bg-zinc-100 dark:hover:bg-zinc-800",
-        "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-zinc-900",
-        "transition-colors duration-200",
-        @class
-      ]}
-      title="Search (Ctrl+K)"
-      {@rest}
-    >
-      <.icon name="hero-magnifying-glass" class="h-5 w-5" />
-    </button>
-    """
-  end
-
   @doc """
   Renders a search result item for records.
 

lib/music_library_web/live/universal_search_live/index.html.heex

@@ -24,16 +24,11 @@
               name="hero-magnifying-glass"
               class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400"
             />
-            <input
+            <.input
-              type="text"
               name="query"
               placeholder="Search records and artists..."
               value={@search_query}
               phx-debounce="300"
-              class="w-full pl-10 pr-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg
-                   bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100
-                   focus:ring-2 focus:ring-blue-500 focus:border-blue-500 dark:focus:ring-blue-400
-                   placeholder-gray-500 dark:placeholder-gray-400"
               phx-hook="SearchInput"
               id="universal-search-input"
             />

priv/gettext/default.pot

@@ -1169,3 +1169,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "to open this search"
 msgstr ""
+
+#: lib/music_library_web/components/layouts/app.html.heex
+#, elixir-autogen, elixir-format
+msgid "Search (Ctrl+K)"
+msgstr ""

priv/gettext/en/LC_MESSAGES/default.po

@@ -1169,3 +1169,8 @@ msgstr ""
 #, elixir-autogen, elixir-format
 msgid "to open this search"
 msgstr ""
+
+#: lib/music_library_web/components/layouts/app.html.heex
+#, elixir-autogen, elixir-format
+msgid "Search (Ctrl+K)"
+msgstr ""