wip: product filters

spa/src/views/Cart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 safe-top">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
     <h2 class="text-2xl">
       Корзина
       <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>

spa/src/views/CategoriesList.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5 safe-top">
+  <div class="mx-auto max-w-2xl px-4 py-4 sm:px-6 sm:py-24 lg:max-w-7xl lg:px-8 mb-5">
     <h2 class="text-3xl mb-5">Категории</h2>
 
     <div v-if="categoriesStore.isLoading" class="flex flex-col gap-4">

spa/src/views/Checkout.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-3xl mx-auto space-y-6 pb-30 safe-top">
+  <div class="max-w-3xl mx-auto space-y-6 pb-30">
     <h2 class="text-2xl text-center">
       Оформление заказа
     </h2>

spa/src/views/Home.vue

@@ -1,12 +1,14 @@
 <template>
-  <div ref="goodsRef" class="safe-top">
+  <div ref="goodsRef">
     <CategoriesInline/>
 
-    <div class="flex justify-between px-5">
-      <button @click="showFilters" class="btn">
-        <IconFunnel/>
-      </button>
-      <SearchInput/>
+    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: var(--tg-safe-area-inset-bottom);">
+      <div class="bg-base-300 flex justify-between p-2 rounded-xl shadow-md">
+        <button @click="showFilters" class="btn mr-3">
+          <IconFunnel/>
+        </button>
+        <SearchInput/>
+      </div>
     </div>
 
     <ProductsList/>
@@ -28,7 +30,6 @@ import Filters from "@/components/ProductFilters/Filters.vue";
 import {onMounted, onUnmounted, ref} from "vue";
 import {useProductsStore} from "@/stores/ProductsStore.js";
 import IconFunnel from "@/components/Icons/IconFunnel.vue";
-import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
 import {FILTERS_MAIN_PAGE_DEFAULT} from "@/components/ProductFilters/filters.js";
 import {useRoute} from "vue-router";
 
@@ -39,11 +40,13 @@ const isFiltersShow = ref(false);
 const backButton = window.Telegram.WebApp.BackButton;
 
 function showFilters() {
+  window.Telegram.WebApp.HapticFeedback.impactOccurred('soft');
   isFiltersShow.value = true;
   backButton.show();
 }
 
 function closeFilters() {
+  window.Telegram.WebApp.HapticFeedback.impactOccurred('rigid');
   isFiltersShow.value = false;
 }
 

spa/src/views/OrderCreated.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="safe-top max-w-3xl mx-auto p-4 space-y-6 pb-30 flex flex-col items-center h-full justify-center">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30 flex flex-col items-center h-full justify-center">
     <div class="flex flex-col justify-center items-center px-5">
       <div class="mb-3">
         <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-25 text-success">

spa/src/views/Product.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="safe-top">
+  <div>
     <div>
       <swiper-container ref="swiperEl" init="false">
         <swiper-slide

spa/src/views/Products.vue

@@ -1,6 +1,10 @@
 <template>
-  <div ref="goodsRef" class="safe-top">
-    <SearchInput/>
+  <div ref="goodsRef">
+    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: var(--tg-safe-area-inset-bottom);">
+      <div class="bg-base-300 flex justify-between p-2 rounded-xl shadow-md">
+        <SearchInput/>
+      </div>
+    </div>
     <ProductsList/>
   </div>
 </template>
@@ -11,6 +15,7 @@ import SearchInput from "@/components/SearchInput.vue";
 import {onMounted} from "vue";
 import {useRoute} from "vue-router";
 import {useProductsStore} from "@/stores/ProductsStore.js";
+import IconFunnel from "@/components/Icons/IconFunnel.vue";
 
 const route = useRoute();
 const productsStore = useProductsStore();

spa/src/views/Search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-20 safe-top">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-20">
     <h2 class="text-2xl mb-3">Поиск</h2>
 
     <div class="w-full">