search bar is at the navbar now

assets/views/base.html

@@ -103,21 +103,21 @@
           <img src="/static/img/logo.jpg" alt="{{ t(key='brand', lang=lang | default(value='sk')) }}" width="260" height="52" class="h-8 w-auto dark:rounded-radius dark:bg-white dark:px-1.5 dark:py-0.5" />
         </a>
 
-        <!-- in-header search → existing GET /search (q param). Only on the home
+        <!-- in-header search → existing GET /search (q param). Hidden on small
-             page; elsewhere the shop's own toolbar carries the search box. Hidden
+             screens; the shop page keeps its compact mobile search row there. -->
-             on small screens (a compact copy lives in the mobile menu below). -->
+        <form action="/search" method="get" role="search" class="hidden min-w-0 flex-1 md:flex md:max-w-sm lg:max-w-md">
-        {% if on_home | default(value=false) %}
+          {% if selected_category and selected_category != "all" %}
-        <form action="/search" method="get" role="search" class="hidden min-w-0 flex-1 md:flex md:max-w-xl">
+          <input type="hidden" name="category" value="{{ selected_category }}" />
+          {% endif %}
           <div class="flex min-w-0 flex-1 overflow-hidden rounded-radius border border-outline transition focus-within:border-primary dark:border-outline-dark dark:focus-within:border-primary-dark">
             <span class="pointer-events-none flex items-center bg-surface-alt pl-3.5 text-on-surface/40 dark:bg-surface-dark-alt dark:text-on-surface-dark/40">{{ ui::icon(name="search", size="size-[18px]") }}</span>
-            <input type="search" name="q" autocomplete="off"
+            <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="min-w-0 flex-1 border-0 bg-surface-alt px-2.5 py-2.5 text-sm text-on-surface placeholder:text-on-surface/50 focus:outline-none dark:bg-surface-dark-alt dark:text-on-surface-dark dark:placeholder:text-on-surface-dark/50" />
             <button type="submit" class="shrink-0 bg-cta px-5 text-sm font-bold text-on-cta transition hover:opacity-90 dark:bg-cta-dark dark:text-on-cta-dark">{{ t(key="search-button", lang=lang | default(value='sk')) }}</button>
           </div>
         </form>
-        {% endif %}
 
         <!-- right side: kurz + account + cart + settings + mobile toggle -->
         <div class="ml-auto flex items-center gap-2 sm:gap-3">

assets/views/shop/_search.html

@@ -26,7 +26,7 @@
     <input type="hidden" name="category" value="{{ selected_category | default(value='all') }}" />
 
     <!-- search box -->
-    <div class="flex max-w-xl gap-2">
+    <div class="flex max-w-xl gap-2 md:hidden">
       <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") }}