From 492360a2592786c6232e3030e58168df7bbcfb99 Mon Sep 17 00:00:00 2001
From: Jason Zimdars <jz@37signals.com>
Date: Tue, 19 Nov 2024 10:31:53 -0600
Subject: [PATCH] Still a little odd that it's a separate form but this
 conceptually belongs here

---
 app/views/bubbles/_filters.html.erb | 17 ++++++++++++++++-
 app/views/bubbles/index.html.erb    | 10 ----------
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/views/bubbles/_filters.html.erb b/app/views/bubbles/_filters.html.erb
index 36528da16..333a0381d 100644
--- a/app/views/bubbles/_filters.html.erb
+++ b/app/views/bubbles/_filters.html.erb
@@ -65,7 +65,22 @@
         </form>
       </div>
 
-      <%= form_with url: bubbles_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width margin-block-start", style: "--border-color: var(--color-subtle)" do %>
+      <div class="pad fill-shade border-radius margin-block-end">
+        <%= form_tag bubbles_path, class: "flex align-center gap input input--actor txt-small fill-white border-radius", method: :get do %>
+          <% @filter.to_params.each do |key, value| %>
+            <%= filter_hidden_field_tag key, value %>
+          <% end %>
+
+          <%= search_field_tag "terms[]", nil, class: "input full-width", placeholder: "By keyword…", id: nil %>
+
+          <button class="btn">
+            <span  class="for-screen-reader">Apply</span>
+            <%= image_tag "arrow-right.svg", aria: { hidden: true }, size: 24 %>
+          </button>
+        <% end %>
+      </div>
+
+      <%= form_with url: bubbles_path, id: :filter_form, method: :get, class: "flex flex-column gap full-width", style: "--border-color: var(--color-subtle)" do %>
         <% Array(params[:terms]).each do |term| %>
           <%= hidden_field_tag "terms[]", term, id: nil %>
         <% end %>
diff --git a/app/views/bubbles/index.html.erb b/app/views/bubbles/index.html.erb
index d80eb616e..ac070cb13 100644
--- a/app/views/bubbles/index.html.erb
+++ b/app/views/bubbles/index.html.erb
@@ -31,16 +31,6 @@
 </section>
 
 <section class="bubbles-list unpad-inline center margin-block-start">
-  <header class="flex-inline align-center gap txt-small margin-block-end-half center">
-    <%= form_tag bubbles_path, method: :get do %>
-      <% @filter.to_params.each do |key, value| %>
-        <%= filter_hidden_field_tag key, value %>
-      <% end %>
-
-      <%= search_field_tag "terms[]", nil, class: "input center flex-inline", placeholder: "Type to filter…", id: nil %>
-    <% end %>
-  </header>
-
   <ul class="unpad margin-none flex flex-column txt-align-start center">
     <%= render partial: "bubbles/list/bubble", collection: @bubbles, cached: true %>
   </ul>