Unify filter/search bars onto shared CSS classes + partials

app/frontend/stylesheets/application.tailwind.css

@@ -108,6 +108,15 @@
   }
 }
 
+/* Grey a filter <select>'s "All"/blank first option like a placeholder while it
+   is the current selection. Raw CSS because the :has() selector has no Tailwind
+   utility equivalent. */
+.search-select-placeholder:has(option:first-child:checked) {
+  color: rgb(156 163 175);   /* gray-400 */
+  font-size: 0.875rem;       /* text-sm */
+  line-height: 1.5rem;       /* text-sm/6: keeps the select the height of a text input */
+}
+
 /* Optional fields get a subtle gray background */
 .optional input,
 .optional select,

app/helpers/search_form_helper.rb

@@ -0,0 +1,22 @@
+module SearchFormHelper
+  # Shared filter/search-bar field + label styling. Helpers (not `@apply` CSS or a
+  # partial) because these classes decorate ~100 heterogeneous controls — selects,
+  # remote-selects, multi-selects, date/number/text inputs — that can't funnel through
+  # one field partial, and labels appear as static tags, label_tag, and var-driven
+  # classes alike. Tailwind v4 scans app/helpers via @source, so the literal classes
+  # still get generated. Callers add per-field tweaks via `extra:` (e.g. "pr-10",
+  # "bg-white", "search-select-placeholder", "italic").
+  SEARCH_FIELD_CLASSES = "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm " \
+    "placeholder:text-sm placeholder:text-gray-400 " \
+    "focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none".freeze
+
+  SEARCH_LABEL_CLASSES = "block text-xs font-semibold uppercase text-gray-500 tracking-wide mb-1".freeze
+
+  def search_field_class(extra: nil)
+    [ SEARCH_FIELD_CLASSES, extra ].compact.join(" ")
+  end
+
+  def search_label_class(extra: nil)
+    [ SEARCH_LABEL_CLASSES, extra ].compact.join(" ")
+  end
+end

app/views/admin/ahoy_activities/index.html.erb

@@ -40,77 +40,77 @@
           <div class="flex flex-wrap lg:flex-nowrap gap-4">
 
             <div class="flex-[2] min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="<%= search_label_class %>">
                 Activity name
               </label>
               <%= text_field_tag :event_name,
                                  params[:event_name],
                                  placeholder: "e.g. view workshop, account-auth",
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="<%= search_label_class %>">
                 Properties
               </label>
               <%= text_field_tag :props,
                                  params[:props],
                                  placeholder: "Search properties...",
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="<%= search_label_class %>">
                 User
               </label>
               <%= text_field_tag :user_search,
                                  params[:user_search],
                                  placeholder: "Name or email",
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
               <%= render "admin/shared/audience_dropdown", auto_submit: false, stacked: true %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="<%= search_label_class %>">
                 Time Period
               </label>
               <%= select_tag :time_period,
                              options_for_select(
                                [["All time", "all_time"], ["Past day", "past_day"], ["Past week", "past_week"], ["Past month", "past_month"], ["Past year", "past_year"]],
                                params[:time_period] || "past_month"
                              ),
-                             class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                             class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="<%= search_label_class %>">
                 From
               </label>
               <%= date_field_tag :from,
                                  params[:from],
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-1 min-w-0">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="<%= search_label_class %>">
                 To
               </label>
               <%= date_field_tag :to,
                                  params[:to],
-                                 class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm" %>
+                                 class: search_field_class %>
             </div>
 
             <div class="flex-none w-24">
-              <label class="block text-sm font-medium text-gray-600 mb-1">
+              <label class="<%= search_label_class %>">
                 Visit ID
               </label>
               <%= number_field_tag :visit_id,
                                    params[:visit_id],
                                    placeholder: "e.g. 42",
-                                   class: "w-full px-3 py-2 border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500" %>
+                                   class: search_field_class %>
             </div>
 
           </div>

app/views/allocations/_search_boxes.html.erb

@@ -1,8 +1,9 @@
 <%# Filters — field, label, and button styling modeled on the registrants search. %>
 <% default_btn = "text-gray-600 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-800 shadow-sm" %>
 <% selected_btn = "text-white bg-blue-600 border-blue-600 hover:bg-blue-700 hover:text-white shadow-md ring-2 ring-blue-300" %>
-<% field_class = "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
-<% label_class = "block text-sm font-medium text-gray-700 mb-1" %>
+<% field_class = search_field_class %>
+<% label_class = search_label_class %>
+<% placeholder_select_class = "#{field_class} search-select-placeholder" %>
 <div class="mb-6 p-4 bg-white border border-gray-200 rounded-xl shadow-sm">
   <%= form_tag allocations_path, method: :get, class: "space-y-4",
     data: {
@@ -18,21 +19,21 @@
           <label for="source_type" class="<%= label_class %>">Source type</label>
           <%= select_tag "source_type[]",
           options_for_select({ "All" => "", "Cash" => "CashPayment", "Check" => "CheckPayment", "Stripe" => "ExternalProcessorPayment", "Discount" => "Discount" }, Array(params[:source_type]).first),
-          class: field_class %>
+          class: placeholder_select_class %>
         </div>
         <div>
           <label for="has_reverted" class="<%= label_class %>">Reverted</label>
           <%= select_tag "has_reverted",
           options_for_select({ "All" => "all", "Yes" => "yes", "No" => "no" }, params[:has_reverted] || "all"),
-          class: field_class %>
+          class: placeholder_select_class %>
         </div>
       </div>
       <div>
         <label for="payer_type" class="<%= label_class %>">Payer type</label>
         <%= select_tag "payer_type",
         options_for_select(["Person", "Organization"], params[:payer_type]),
         include_blank: "All",
-        class: field_class %>
+        class: placeholder_select_class %>
       </div>
       <div>
         <label for="person_id" class="<%= label_class %>">Person</label>
@@ -64,7 +65,7 @@
           <%= select_tag "allocatable_type",
           options_for_select(["EventRegistration"], params[:allocatable_type]),
           include_blank: true,
-          class: field_class,
+          class: placeholder_select_class,
           data: { action: "search-type-select#toggle" } %>
         </div>
         <template data-search-type-select-target="template" data-type="EventRegistration">
@@ -91,7 +92,7 @@
     </div>
     <div class="md:col-span-3 flex gap-2 justify-end">
       <%= submit_tag "Search", class: "btn btn-primary" %>
-      <%= link_to "Clear filters", allocations_path, class: "btn btn-utility-outline", data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: allocations_path %>
     </div>
   <% end %>
 </div>

app/views/bookmarks/_search_boxes.html.erb

@@ -8,8 +8,6 @@
 
   <!-- Clear filters -->
   <div class="flex sm:justify-end items-end">
-    <%= link_to "Clear filters", url,
-                class: "btn btn-utility",
-                data: { action: "collection#clearAndSubmit" } %>
+    <%= render "shared/search_clear", url: url %>
   </div>
 <% end %>

app/views/bookmarks/_search_fields.html.erb

@@ -2,11 +2,10 @@
 <div class="grid grid-cols-1 md:grid-cols-<%= show_created_by ? 4 : 3 %> gap-4 items-end mb-6">
   <!-- Keyword -->
   <div>
-    <%= label_tag :keyword, "Keyword", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= label_tag :keyword, "Keyword", class: search_label_class %>
     <div class="relative">
       <%= text_field_tag :keyword, params[:keyword],
-                         class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                         focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                         class: search_field_class %>
       <div class="absolute inset-y-0 right-0 flex items-center pr-3">
         <i class="fa fa-search text-gray-500"></i>
       </div>
@@ -16,41 +15,38 @@
   <!-- Created by (admins who can view bookmark index, or when user_id param is present) -->
   <% if show_created_by %>
     <div>
-      <%= label_tag :user_id, "Created by", class: "block text-sm font-medium text-gray-700 mb-1" %>
+      <%= label_tag :user_id, "Created by", class: search_label_class %>
       <div data-controller="searchable-select" data-searchable-select-mode-value="person">
         <%= select_tag :user_id,
                        options_from_collection_for_select(@users, :id, :full_name_with_email, params[:user_id].to_i),
                        include_blank: "All users",
                        data: { searchable_select_target: "select" },
-                       class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                           focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                       class: search_field_class %>
       </div>
     </div>
   <% end %>
 
   <!-- Bookmark Type Dropdown -->
   <div>
-    <%= label_tag :bookmarkable_type, "Bookmark type", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= label_tag :bookmarkable_type, "Bookmark type", class: search_label_class %>
     <div class="relative">
       <%= select_tag :bookmarkable_type,
                      options_for_select(@bookmarkable_types,
                                         params[:bookmarkable_type]),
                      include_blank: "All types",
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                         focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                     class: search_field_class(extra: "search-select-placeholder") %>
     </div>
   </div>
 
   <!-- Windows Type Dropdown -->
   <div>
-    <%= label_tag :windows_type, "Windows audience", class: "block text-sm font-medium text-gray-700 mb-1" %>
+    <%= label_tag :windows_type, "Windows audience", class: search_label_class %>
     <div class="relative">
       <%= select_tag :windows_type,
                      options_for_select(@windows_types_array,
                                         params[:windows_type]),
                      include_blank: true,
-                     class: "w-full rounded-lg border border-gray-300 px-3 py-2 text-gray-800 shadow-sm
-                         focus:border-blue-500 focus:ring focus:ring-blue-200 focus:outline-none" %>
+                     class: search_field_class(extra: "search-select-placeholder") %>
     </div>
   </div>
 </div>

app/views/categories/_search_boxes.html.erb

@@ -8,47 +8,44 @@
     <!-- Category Type -->
     <div>
       <%= f.label :category_type_id, "Category Type",
-                  class: "block text-sm font-medium text-gray-700" %>
+                  class: search_label_class %>
 
       <%= f.select :category_type_id,
                    options_from_collection_for_select(@category_types, :id, :name, params[:category_type_id]),
                    { include_blank: "All types" },
-                   class: "mt-1 block w-full rounded-md border border-gray-300 p-2",
+                   class: search_field_class(extra: "search-select-placeholder"),
                    onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Name Search -->
     <div>
       <%= f.label :category_name, "Name contains",
-                  class: "block text-sm font-medium text-gray-700" %>
+                  class: search_label_class %>
 
       <%= f.text_field :category_name,
                        value: params[:category_name],
                        placeholder: "e.g. Art, Music…",
-                       class: "mt-1 block w-full rounded-md border border-gray-300 p-2",
+                       class: search_field_class,
                        oninput: "this.form.requestSubmit()" %>
     </div>
 
     <!-- PUBLISHED -->
     <div class="min-w-[150px] p-2 rounded-md">
-      <label for="published" class="block text-xs font-semibold uppercase text-gray-600 tracking-wide mb-1">
+      <label for="published" class="<%= search_label_class %>">
         Published
       </label>
       <%= select_tag :published,
                      options_for_select(
                        [["All", ""], ["Published", "true"], ["Unpublished", "false"]],
                        params[:published]
                      ),
-                     class: "border border-gray-300 rounded-lg px-3 py-2 text-gray-700 w-full",
+                     class: search_field_class(extra: "search-select-placeholder"),
                      onchange: "this.form.requestSubmit()" %>
     </div>
 
     <!-- Clear -->
     <div>
-      <%= link_to "Clear filters",
-                  categories_path,
-                  class: "btn btn-utility-outline whitespace-nowrap",
-                  data: { action: "collection#clearAndSubmit" } %>
+      <%= render "shared/search_clear", url: categories_path %>
     </div>
 
   <% end %>