search implement

assets/views/macros/ui.html

@@ -83,6 +83,8 @@
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="{{ size }}{% if extra %} {{ extra }}{% endif %}" aria-hidden="true" {{ attrs | safe }}><path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" /></svg>
 {%- elif name == "chevron-double-left" -%}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="{{ size }}{% if extra %} {{ extra }}{% endif %}" aria-hidden="true" {{ attrs | safe }}><path stroke-linecap="round" stroke-linejoin="round" d="m18.75 4.5-7.5 7.5 7.5 7.5m-6-15L5.25 12l7.5 7.5" /></svg>
+{%- elif name == "search" -%}
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="{{ size }}{% if extra %} {{ extra }}{% endif %}" aria-hidden="true" {{ attrs | safe }}><path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" /></svg>
 {%- else -%}
 <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="{{ size }}{% if extra %} {{ extra }}{% endif %}" aria-hidden="true" {{ attrs | safe }}><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" /></svg>
 {%- endif -%}

assets/views/shop/_card.html

@@ -1,3 +1,7 @@
+{# Imported locally (not just inherited from base.html) so the card also renders
+   inside standalone htmx fragments like shop/_results.html, where Tera's import
+   chain from the layout isn't present. #}
+{% import "macros/ui.html" as ui %}
 {# Adapted from the vendored Penguin UI component
    (penguinui-components/card/ecommerce-product-card.html):
    wired to our product data + i18n + htmx add-to-cart + toast. The demo rating

assets/views/shop/_results.html

@@ -0,0 +1,13 @@
+{# Search / listing results, swapped in by htmx on each query and rendered
+   server-side on first load. Mirrors the empty-state handling of index.html. #}
+{% if products | length > 0 %}
+{% include "shop/_product_grid.html" %}
+{% elif query and query != "" %}
+<div class="rounded-radius border border-outline px-6 py-16 text-center text-on-surface/70 dark:border-outline-dark dark:text-on-surface-dark/70">
+  {{ t(key="search-empty", lang=lang | default(value='sk')) }} <span class="font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ query }}</span>
+</div>
+{% else %}
+<div class="rounded-radius border border-outline px-6 py-16 text-center text-on-surface/70 dark:border-outline-dark dark:text-on-surface-dark/70">
+  {{ t(key="shop-empty", lang=lang | default(value='sk')) }}
+</div>
+{% endif %}

assets/views/shop/index.html

@@ -5,17 +5,41 @@
 
 {% block content %}
 <div class="space-y-8">
-  <header class="space-y-2">
-    <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
-    <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
+  <header class="space-y-4">
+    <div class="space-y-2">
+      <h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="shop-title", lang=lang | default(value='sk')) }}</h1>
+      <p class="text-on-surface/70 dark:text-on-surface-dark/70">{{ t(key="shop-subtitle", lang=lang | default(value='sk')) }}</p>
+    </div>
+
+    {# Live search: htmx GETs /search as the customer types (debounced) and
+       swaps only the results below. hx-push-url keeps the URL shareable; the
+       spinner shows while a request is in flight. Degrades to a normal GET form
+       submit when JS/htmx is unavailable. #}
+    <form action="/search" method="get" role="search"
+      class="relative max-w-md"
+      hx-get="/search" hx-target="#shop-results" hx-swap="innerHTML"
+      hx-trigger="input changed delay:300ms from:input[name='q'], submit"
+      hx-push-url="true" hx-indicator="#search-spinner">
+      <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=lang | default(value='sk')) }}"
+        aria-label="{{ t(key='search-placeholder', lang=lang | default(value='sk')) }}"
+        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>
+    </form>
   </header>
 
-  {% if products | length > 0 %}
-  {% include "shop/_product_grid.html" %}
-  {% else %}
-  <div class="rounded-radius border border-outline px-6 py-16 text-center text-on-surface/70 dark:border-outline-dark dark:text-on-surface-dark/70">
-    {{ t(key="shop-empty", lang=lang | default(value='sk')) }}
+  <div id="shop-results">
+    {% include "shop/_results.html" %}
   </div>
-  {% endif %}
 </div>
 {% endblock content %}