From 8cf6a7a4ca978fdc39f1f857089084ff310e262b Mon Sep 17 00:00:00 2001
From: Guillem Arias <accounts@gariasf.com>
Date: Thu, 21 May 2026 16:22:49 +0200
Subject: [PATCH] refactor(goals): migrate index search field to
 DS::SearchInput
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

#1853 just landed on `main` (`8e444ff9`), so the goals index search
input can move off the hand-rolled markup and onto the new
`DS::SearchInput` primitive. Behaviour unchanged — the
`data-goals-filter-target="input"` and
`data-action="input->goals-filter#filter"` hooks pass through via the
component's `data:` option, and the wrapper's
`flex-1 min-w-[200px]` carries through via the component's
`class:` arg.

Drops the broken `focus:ring-gray-500` lookalike (the hand-rolled
class used `focus:ring-alpha-black-100` which is fine, but the new
primitive uses the canonical
`focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900`
pattern from DS::Button — same focus contract everywhere).

Addresses sure-design's DS Drift Patrol finding on #1798.
---
 app/views/goals/index.html.erb | 21 +++++++++------------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/app/views/goals/index.html.erb b/app/views/goals/index.html.erb
index 8d2b8c9c8..db53a2fb6 100644
--- a/app/views/goals/index.html.erb
+++ b/app/views/goals/index.html.erb
@@ -108,18 +108,15 @@
 
       <% if @show_search %>
         <div class="flex flex-wrap items-center gap-2.5 mb-4">
-          <div class="relative flex-1 min-w-[200px]">
-            <input type="search"
-                   autocomplete="off"
-                   data-goals-filter-target="input"
-                   data-action="input->goals-filter#filter"
-                   aria-label="<%= t(".search.aria_label") %>"
-                   placeholder="<%= t(".search.placeholder") %>"
-                   class="block w-full border border-secondary rounded-md py-2.5 pl-10 pr-3 bg-container focus:outline-none focus:ring-2 focus:ring-alpha-black-100 sm:text-sm">
-            <div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
-              <%= icon "search", class: "text-secondary" %>
-            </div>
-          </div>
+          <%= render DS::SearchInput.new(
+                aria_label: t(".search.aria_label"),
+                placeholder: t(".search.placeholder"),
+                class: "flex-1 min-w-[200px]",
+                data: {
+                  goals_filter_target: "input",
+                  action: "input->goals-filter#filter"
+                }
+              ) %>
           <div class="inline-flex items-center gap-1 p-1 bg-surface-inset rounded-xl">
             <% %w[all on_track behind no_target_date paused completed].each do |status| %>
               <% active = status == "all" %>