feat: search component and loading splashscreen

spa/src/components/ProductsList.vue

@@ -1,31 +1,5 @@
 <template>
   <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-6 lg:max-w-7xl lg:px-8">
-    <div
-        class="search-wrapper p-2 w-full"
-    >
-      <label class="input w-full">
-        <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <g
-              stroke-linejoin="round"
-              stroke-linecap="round"
-              stroke-width="2.5"
-              fill="none"
-              stroke="currentColor"
-          >
-            <circle cx="11" cy="11" r="8"></circle>
-            <path d="m21 21-4.3-4.3"></path>
-          </g>
-        </svg>
-        <input
-            v-model="productsStore.search"
-            @input="debouncedSearch"
-            type="search"
-            class="grow input-lg"
-            placeholder="Поиск по магазину"
-        />
-      </label>
-    </div>
-
     <h2 class="text-lg font-bold mb-5 text-center">{{ productsStore.products.meta.currentCategoryName }}</h2>
 
     <div v-if="productsStore.products.data.length > 0">
@@ -75,7 +49,7 @@
 import NoProducts from "@/components/NoProducts.vue";
 import ProductImageSwiper from "@/components/ProductImageSwiper.vue";
 import {useProductsStore} from "@/stores/ProductsStore.js";
-import {useDebounceFn, useInfiniteScroll} from '@vueuse/core';
+import {useInfiniteScroll} from '@vueuse/core';
 import {useRoute} from "vue-router";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {nextTick, onMounted, onUnmounted, ref, watch} from "vue";
@@ -85,12 +59,6 @@ const categoryId = route.params.category_id ?? null;
 const productsStore = useProductsStore();
 const settings = useSettingsStore();
 const bottom = ref(null);
-const debounceMs = 500;
-
-const debouncedSearch = useDebounceFn(() => {
-  productsStore.reset();
-  loadMore();
-}, debounceMs);
 
 function haptic() {
   window.Telegram.WebApp.HapticFeedback.selectionChanged();

spa/src/components/SearchInput.vue

@@ -0,0 +1,38 @@
+<template>
+  <div class="search-wrapper px-5 w-full">
+    <label class="input w-full">
+      <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <g
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            stroke-width="2.5"
+            fill="none"
+            stroke="currentColor"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.3-4.3"></path>
+        </g>
+      </svg>
+      <input
+          readonly
+          class="grow input-lg"
+          placeholder="Поиск по магазину"
+          @click="showSearchPage"
+      />
+    </label>
+  </div>
+</template>
+
+<script setup>
+import {useRouter} from "vue-router";
+import {useSearchStore} from "@/stores/SearchStore.js";
+
+const router = useRouter();
+
+function showSearchPage() {
+  router.push({name: 'search'});
+  useSearchStore().reset();
+}
+</script>
+
+