feat: add filters to mainpage

spa/src/App.vue

@@ -2,8 +2,8 @@
   <div class="app-container h-full">
     <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
     <RouterView v-slot="{ Component, route }">
-      <Transition name="route" mode="out-in" appear>
-        <component :is="Component" :key="route.fullPath" />
+      <Transition name="route" appear>
+        <component :is="Component" :key="route.fullPath"/>
       </Transition>
     </RouterView>
     <CartButton v-if="settings.store_enabled"/>
@@ -11,8 +11,8 @@
 </template>
 
 <script setup>
-import {onMounted, ref, watch} from "vue";
-import {useWebAppViewport, useBackButton} from 'vue-tg';
+import {ref, watch} from "vue";
+import {useWebAppViewport} from 'vue-tg';
 import {useMiniApp, FullscreenViewport} from 'vue-tg';
 import {useRoute, useRouter} from "vue-router";
 import CartButton from "@/components/CartButton.vue";
@@ -28,47 +28,25 @@ disableVerticalSwipes();
 const router = useRouter();
 const route = useRoute();
 const settings = useSettingsStore();
+const backButton = window.Telegram.WebApp.BackButton;
+const haptic = window.Telegram.WebApp.HapticFeedback;
+
+function navigateBack() {
+  haptic.impactOccurred('light');
+  router.back();
+}
 
 watch(
     () => route.name,
     () => {
       if (route.name === 'home') {
-        window.Telegram.WebApp.BackButton.hide();
-        window.Telegram.WebApp.BackButton.offClick();
+        backButton.hide();
+        backButton.offClick(navigateBack);
       } else {
-        window.Telegram.WebApp.BackButton.show();
-        window.Telegram.WebApp.BackButton.onClick(() => {
-          window.Telegram.WebApp.HapticFeedback.impactOccurred('light');
-          router.back();
-        });
+        backButton.show();
+        backButton.onClick(navigateBack);
       }
     },
     {immediate: true}
 );
 </script>
-
-
-<style scoped>
-/* очень мягкий fade+slide */
-.route-enter-from,
-.route-leave-to {
-  opacity: 0;
-  transform: translateY(6px);
-}
-.route-enter-active,
-.route-leave-active {
-  transition: opacity .18s ease, transform .18s ease;
-}
-
-/* уважение к reduced motion */
-@media (prefers-reduced-motion: reduce) {
-  .route-enter-active,
-  .route-leave-active {
-    transition: opacity .12s linear;
-  }
-  .route-enter-from,
-  .route-leave-to {
-    transform: none;
-  }
-}
-</style>