clean up search form behaviour

app/views/entries/_results.html.erb

@@ -1,16 +1,8 @@
-
 <main class="flex-1 overflow-hidden">
   <div class="max-w-7xl mx-auto px-4 h-full flex flex-col py-6">
     <div class="flex items-center justify-between mb-4">
       <div>
         <h2 class="text-lg font-bold text-slate-900">Translation Table
-          <button type="button"
-                  class="text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700 inline-flex items-center p-1"
-                  aria-expanded="false"
-                  aria-controls="entries_filters"
-                  data-toggle-filters>
-            Show Filters
-          </button>
         </h2>
 
       </div>

app/views/entries/_search_form.html.erb

@@ -0,0 +1,35 @@
+        <%= form_with url: entries_path,
+          method: :get,
+          data: { turbo_stream: true } do |form| %>
+          <div id="search_hidden_fields">
+            <%= render "entries/search_hidden_fields" %>
+          </div>
+          <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 block" 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>
+            <div class="absolute inset-y-0 right-0 pr-4 flex items-center">
+              <button type="button"
+                      class="text-slate-400 hover:text-slate-600 text-2xl leading-none flex items-center justify-center <%= @query.present? ? "" : "hidden" %>"
+                      data-clear-search
+                      aria-label="Clear search"
+                      onclick="const input=this.closest('form').querySelector('input[name=q]'); if(input){input.value='';} this.closest('form').requestSubmit();">
+                ×
+              </button>
+            </div>
+            <%= 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: "const clearBtn=this.form.querySelector('[data-clear-search]'); if(clearBtn){clearBtn.classList.toggle('hidden', this.value.length===0);} this.form.requestSubmit();" %>
+          </div>
+          <button type="button"
+                  class="text-xs font-semibold uppercase tracking-wider text-slate-500 hover:text-slate-700 inline-flex items-center p-1"
+                  aria-expanded="false"
+                  aria-controls="entries_filters"
+                  data-toggle-filters>
+            Show Filters
+          </button>
+        <% end %>

app/views/entries/_search_hidden_fields.html.erb

@@ -0,0 +1,3 @@
+<%= hidden_field_tag :language, @language_code if @language_code.present? %>
+<%= hidden_field_tag :category, @category if @category.present? %>
+<%= hidden_field_tag :starts_with, @starts_with if @starts_with.present? %>

app/views/entries/index.html.erb

@@ -21,34 +21,11 @@
     </div>
   </header>
 
+
   <div class="flex-1 flex flex-col">
-    <section class="bg-white border-b border-slate-200">
+    <section id="search">
       <div class="max-w-7xl mx-auto px-4 pb-1 space-y-4">
-        <%= form_with url: entries_path,
+        <%= render "entries/search_form" %>
-          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>
-            <div class="absolute inset-y-0 right-0 pr-4 flex items-center">
-              <button type="button"
-                      class="text-slate-400 hover:text-slate-600 text-2xl leading-none <%= @query.present? ? "" : "hidden" %>"
-                      data-clear-search
-                      aria-label="Clear search"
-                      onclick="const input=this.closest('form').querySelector('input[name=q]'); if(input){input.value='';} this.closest('form').requestSubmit();">
-                ×
-              </button>
-            </div>
-            <%= 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: "const clearBtn=this.form.querySelector('[data-clear-search]'); if(clearBtn){clearBtn.classList.toggle('hidden', this.value.length===0);} this.form.requestSubmit();" %>
-          </div>
-        <% end %>
 
         <div id="entries_filters" class="hidden">
           <%= render "entries/filters" %>
@@ -59,6 +36,7 @@
     <div id="entries_results">
       <%= render "entries/results" %>
     </div>
+
   </div>
 </div>
 

app/views/entries/index.turbo_stream.erb

@@ -2,6 +2,10 @@
   <%= render "entries/filters" %>
 <% end %>
 
+<%= turbo_stream.update "search_hidden_fields" do %>
+  <%= render "entries/search_hidden_fields" %>
+<% end %>
+
 <%= turbo_stream.update "entries_results" do %>
   <%= render "entries/results" %>
 <% end %>