From 194e9e2de36469e8ffe3b107eab82efa4686ece4 Mon Sep 17 00:00:00 2001
From: Priec <filippriec@gmail.com>
Date: Thu, 25 Jun 2026 16:36:50 +0200
Subject: [PATCH] search needs button now

---
 assets/views/shop/_search.html | 37 ++++++++++++++++++++--------------
 1 file changed, 22 insertions(+), 15 deletions(-)

diff --git a/assets/views/shop/_search.html b/assets/views/shop/_search.html
index 48d6b45..4c12044 100644
--- a/assets/views/shop/_search.html
+++ b/assets/views/shop/_search.html
@@ -16,7 +16,9 @@
   <form action="/search" method="get" role="search"
     hx-get="/search" hx-target="#shop-results" hx-swap="innerHTML"
     hx-push-url="true" hx-indicator="#search-spinner"
-    hx-trigger="submit, change, keyup changed delay:350ms from:input[name='q']"
+    {# The text query runs only on submit (Enter / the Search button); the
+       sort / per-page / in-stock controls still apply immediately on change. #}
+    hx-trigger="submit, change from:select, change from:input[type='checkbox']"
     class="space-y-3">
 
     {# Category comes from the sidebar; keep it on the query so searching /
@@ -24,20 +26,25 @@
     <input type="hidden" name="category" value="{{ selected_category | default(value='all') }}" />
 
     <!-- search box -->
-    <div class="relative max-w-xl">
-      <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-on-surface/50 dark:text-on-surface-dark/50">
-        {{ ui::icon(name="search", size="size-5") }}
-      </span>
-      <input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
-        placeholder="{{ t(key='search-placeholder', lang=L) }}"
-        aria-label="{{ t(key='search-placeholder', lang=L) }}"
-        class="w-full rounded-radius border border-outline bg-surface py-2 pl-10 pr-10 text-sm text-on-surface placeholder:text-on-surface/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50 dark:focus-visible:outline-primary-dark" />
-      <span id="search-spinner" class="htmx-indicator pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-on-surface/50 dark:text-on-surface-dark/50">
-        <svg class="size-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-          <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-          <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.4 0 0 5.4 0 12h4Z"></path>
-        </svg>
-      </span>
+    <div class="flex max-w-xl gap-2">
+      <div class="relative flex-1">
+        <span class="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3 text-on-surface/50 dark:text-on-surface-dark/50">
+          {{ ui::icon(name="search", size="size-5") }}
+        </span>
+        <input type="search" name="q" value="{{ query | default(value='') }}" autocomplete="off"
+          placeholder="{{ t(key='search-placeholder', lang=L) }}"
+          aria-label="{{ t(key='search-placeholder', lang=L) }}"
+          class="w-full rounded-radius border border-outline bg-surface py-2 pl-10 pr-10 text-sm text-on-surface placeholder:text-on-surface/50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:border-outline-dark dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50 dark:focus-visible:outline-primary-dark" />
+        <span id="search-spinner" class="htmx-indicator pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3 text-on-surface/50 dark:text-on-surface-dark/50">
+          <svg class="size-4 animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" aria-hidden="true">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 0 1 8-8V0C5.4 0 0 5.4 0 12h4Z"></path>
+          </svg>
+        </span>
+      </div>
+      <button type="submit" class="shrink-0 rounded-radius bg-primary px-5 text-sm font-bold text-on-primary transition hover:opacity-90 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary dark:bg-primary-dark dark:text-on-primary-dark dark:focus-visible:outline-primary-dark">
+        {{ t(key="search-button", lang=L) }}
+      </button>
     </div>
 
     <!-- sort + product card style switch -->