feat(search): improve search UI with sticky bar and keyboard handling

- Add fixed search bar with glassmorphism effect (backdrop blur, semi-transparent)
- Implement clear search button in DaisyUI style
- Auto-hide keyboard on Enter key press and scroll events
- Remove search page title for cleaner UI
- Use DaisyUI theme-aware background colors instead of fixed white
- Add fixed padding offset for content below search bar

frontend/spa/src/stores/SearchStore.js

@@ -2,6 +2,7 @@ import {defineStore} from "pinia";
 import ftch from "@/utils/ftch.js";
 import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import {toRaw} from "vue";
 
 export const useSearchStore = defineStore('search', {
     state: () => ({
@@ -13,7 +14,9 @@ export const useSearchStore = defineStore('search', {
         },
 
         isLoading: false,
+        isLoadingMore: false,
         isSearchPerformed: false,
+        hasMore: false,
     }),
 
     actions: {
@@ -28,6 +31,14 @@ export const useSearchStore = defineStore('search', {
             };
         },
 
+        async fetchProducts(search, page = 1, perPage = 5) {
+            return await ftch('products', {
+                page,
+                perPage: perPage,
+                search,
+            });
+        },
+
         async performSearch() {
             if (!this.search) {
                 return this.reset();
@@ -39,11 +50,10 @@ export const useSearchStore = defineStore('search', {
 
             try {
                 this.isLoading = true;
-                this.products = await ftch('products', {
-                    page: this.page,
-                    perPage: 10,
-                    search: this.search,
-                });
+                const response = await this.fetchProducts(this.search, this.page, 10);
+                console.debug('[Search] Perform Search: ', response);
+                this.products = response;
+                this.hasMore = response?.meta?.hasMore || false;
             } catch (error) {
                 console.error(error);
             } finally {
@@ -51,6 +61,34 @@ export const useSearchStore = defineStore('search', {
                 this.isSearchPerformed = true;
             }
         },
+
+        async loadMore() {
+            try {
+                if (this.isLoading === true || this.isLoadingMore === true || this.hasMore === false) return;
+                this.isLoadingMore = true;
+                this.page++;
+
+                console.debug('[Search] Loading more products for page: ', this.page);
+
+                const response = await ftch('products', null, toRaw({
+                    page: this.page,
+                    perPage: 10,
+                    search: this.search,
+                }));
+
+                console.debug('[Search] Search results: ', response);
+
+                this.products.data.push(...response.data);
+                this.products.meta = response.meta;
+                this.hasMore = response.meta.hasMore;
+            } catch (error) {
+                console.error(error);
+            } finally {
+                this.isLoading = false;
+                this.isLoadingMore = false;
+                this.isSearchPerformed = true;
+            }
+        },
     },
 
 });