feat: safe-top and search

spa/src/components/CategoriesInline.vue

@@ -1,13 +1,13 @@
 <template>
 <div class="flex items-center justify-center p-5 gap-2 flex-wrap">
-  <RouterLink class="btn btn-sm" to="/categories">
+  <RouterLink class="btn btn-md" to="/categories">
     <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
       <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6A2.25 2.25 0 0 1 6 3.75h2.25A2.25 2.25 0 0 1 10.5 6v2.25a2.25 2.25 0 0 1-2.25 2.25H6a2.25 2.25 0 0 1-2.25-2.25V6ZM3.75 15.75A2.25 2.25 0 0 1 6 13.5h2.25a2.25 2.25 0 0 1 2.25 2.25V18a2.25 2.25 0 0 1-2.25 2.25H6A2.25 2.25 0 0 1 3.75 18v-2.25ZM13.5 6a2.25 2.25 0 0 1 2.25-2.25H18A2.25 2.25 0 0 1 20.25 6v2.25A2.25 2.25 0 0 1 18 10.5h-2.25a2.25 2.25 0 0 1-2.25-2.25V6ZM13.5 15.75a2.25 2.25 0 0 1 2.25-2.25H18a2.25 2.25 0 0 1 2.25 2.25V18A2.25 2.25 0 0 1 18 20.25h-2.25A2.25 2.25 0 0 1 13.5 18v-2.25Z" />
     </svg>
     Каталог
   </RouterLink>
 
-  <RouterLink v-for="category in categoriesStore.topCategories" class="btn btn-sm" :to="{name: 'product.categories.show', params: {category_id: category.id}}">
+  <RouterLink v-for="category in categoriesStore.topCategories" class="btn btn-md" :to="{name: 'product.categories.show', params: {category_id: category.id}}">
     {{ category.name }}
   </RouterLink>
 </div>

spa/src/components/ProductImageSwiper.vue

@@ -34,16 +34,13 @@ onMounted(async () => {
 
   swiperEl.value?.addEventListener('swiperprogress', (num) => {
     if (haptic === false) return;
-    window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
+    //window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
     haptic = false;
     setTimeout(() => haptic = true, 50);
   });
 
-  swiperEl.value?.addEventListener('swiperreachbeginning', (event) => {
-    window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
-  });
   swiperEl.value?.addEventListener('swiperreachend', (event) => {
-    window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
+    //window.Telegram.WebApp.HapticFeedback.impactOccurred('medium');
   });
 });
 </script>

spa/src/components/ProductsList.vue

@@ -1,5 +1,31 @@
 <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">
@@ -49,16 +75,22 @@
 import NoProducts from "@/components/NoProducts.vue";
 import ProductImageSwiper from "@/components/ProductImageSwiper.vue";
 import {useProductsStore} from "@/stores/ProductsStore.js";
-import {useInfiniteScroll} from '@vueuse/core';
+import {useDebounceFn, useInfiniteScroll} from '@vueuse/core';
 import {useRoute} from "vue-router";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
-import {nextTick, onMounted, ref, watch} from "vue";
+import {nextTick, onMounted, onUnmounted, ref, watch} from "vue";
 
 const route = useRoute();
 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();
@@ -104,7 +136,18 @@ watch(() => route.params.id, async newId => {
   }
 });
 
+function handleClickOutside(e) {
+  if (!e.target.closest('input, textarea')) {
+    document.activeElement?.blur()
+  }
+}
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
 onMounted(async () => {
+  document.addEventListener('click', handleClickOutside);
   const saved = productsStore.savedCategoryId === categoryId;
   if (saved && productsStore.products.data.length > 0) {
     await nextTick();