use turbo streams to do multiple updates on one search request

app/views/entries/index.html.erb

@@ -10,8 +10,7 @@
         </div>
         <div class="flex items-center gap-3">
           <span class="text-xs font-semibold text-emerald-700 bg-emerald-50 px-3 py-1 rounded-full border border-emerald-200">Read-only public view</span>
-          <%= link_to "Download XLSX",
-                      download_entries_path(format: :xlsx),
+          <%= link_to "Download XLSX", download_entries_path(format: :xlsx),
                       class: "text-xs font-bold text-indigo-700 px-3 py-2 rounded-md border border-indigo-200 bg-indigo-50 hover:bg-indigo-100 transition" %>
           <%= link_to "Sign In", "#", class: "bg-indigo-600 text-white px-4 py-2 rounded-lg text-sm font-semibold hover:bg-indigo-700 transition" %>
         </div>
@@ -20,7 +19,39 @@
   </header>
 
   <div class="flex-1 flex flex-col">
-    <%= render "entries/filters" %>
+    <section class="bg-white border-b border-slate-200">
+      <div class="max-w-7xl mx-auto px-4 pb-6 space-y-4">
+        <%= form_with url: entries_path,
+          method: :get,
+          data: { turbo_stream: true } do |form| %>
+          <div class="relative">
+            <div class="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
+              <svg class="h-5 w-5 text-slate-400" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+              </svg>
+            </div>
+            <% if @query.present? %>
+              <div class="absolute inset-y-0 right-0 pr-4 flex items-center">
+                <%= link_to "×",
+                  entries_path(category: @category.presence, language: @language_code.presence, starts_with: @starts_with.presence),
+                  class: "text-slate-400 hover:text-slate-600 text-2xl leading-none",
+                  aria: { label: "Clear search" },
+                  data: { turbo_stream: true } %>
+              </div>
+            <% end %>
+            <%= form.text_field :q,
+              value: @query,
+              placeholder: "Search words, phrases, or biblical terms...",
+              class: "block w-full pl-11 pr-10 mt-2 mb-2 py-4 bg-white border border-slate-200 rounded-2xl shadow-sm focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500 transition",
+              oninput: "this.form.requestSubmit()" %>
+          </div>
+        <% end %>
+
+        <%= turbo_frame_tag "entries_filters" do %>
+          <%= render "entries/filters" %>
+        <% end %>
+      </div>
+    </section>
 
     <%= turbo_frame_tag "entries_results" do %>
       <%= render "entries/results" %>