feat(spa): add custom dock

spa/src/App.vue

@@ -11,37 +11,7 @@
       </RouterView>
 
       <CartButton v-if="settings.store_enabled"/>
-
+      <Dock v-if="isAppDockShown"/>
-      <div
-          v-if="isAppDockShown"
-          class="app-dock dock"
-      >
-        <RouterLink :to="{name: 'home'}" :class="{'dock-active': route.name === 'home'}">
-          <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
-          <span class="dock-label">Главная</span>
-        </RouterLink>
-
-        <RouterLink :to="{name: 'search'}" :class="{'dock-active': route.name === 'search'}">
-          <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
-          </svg>
-          <span class="dock-label">Поиск</span>
-        </RouterLink>
-
-        <RouterLink
-            v-if="settings.store_enabled"
-            :to="{name: 'cart'}"
-            :class="{'dock-active': route.name === 'cart'}"
-        >
-          <div class="indicator">
-            <span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
-            <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-              <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
-            </svg>
-          </div>
-          <span class="dock-label">Корзина</span>
-        </RouterLink>
-      </div>
     </section>
   </div>
 </template>
@@ -55,6 +25,7 @@ import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
 import {useCartStore} from "@/stores/CartStore.js";
 import CartButton from "@/components/CartButton.vue";
+import Dock from "@/components/Dock.vue";
 
 const tg = useMiniApp();
 const platform = ref();
@@ -75,6 +46,7 @@ const routesToHideAppDock = [
     'product.show',
     'checkout',
     'order_created',
+    'filters',
 ];
 
 const isAppDockShown = computed(() => {

spa/src/components/Dock.vue

@@ -0,0 +1,78 @@
+<template>
+<div class="telecart-dock fixed bottom-0 w-full z-50 px-10">
+  <div class="telecart-dock-inner flex justify-between items-center bg-base-300/10 text-primary-content h-full backdrop-blur-md px-2 border-base-300/90 border">
+    <RouterLink
+        :to="{name: 'home'}"
+        :class="{'active': route.name === 'home'}"
+        class="telecart-dock-item"
+        @click="onDockItemClick"
+    >
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt"><polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="2"></polyline><path d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path><line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></line></g></svg>
+      <span class="dock-label">Главная</span>
+    </RouterLink>
+
+    <RouterLink :to="{name: 'search'}" :class="{'active': route.name === 'search'}" class="telecart-dock-item" @click="onDockItemClick">
+      <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
+      </svg>
+      <span class="dock-label">Поиск</span>
+    </RouterLink>
+
+    <RouterLink
+        v-if="settings.store_enabled"
+        :to="{name: 'cart'}"
+        :class="{'active': route.name === 'cart'}"
+        class="telecart-dock-item"
+        @click="onDockItemClick"
+    >
+      <div class="indicator">
+        <span class="indicator-item indicator-end badge badge-secondary badge-xs">{{ cart.productsCount }}</span>
+        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 3h1.386c.51 0 .955.343 1.087.835l.383 1.437M7.5 14.25a3 3 0 0 0-3 3h15.75m-12.75-3h11.218c1.121-2.3 2.1-4.684 2.924-7.138a60.114 60.114 0 0 0-16.536-1.84M7.5 14.25 5.106 5.272M6 20.25a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Zm12.75 0a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0Z" />
+        </svg>
+      </div>
+      <span class="dock-label">Корзина</span>
+    </RouterLink>
+  </div>
+</div>
+</template>
+
+<script setup>
+import {useRoute} from "vue-router";
+import {useCartStore} from "@/stores/CartStore.js";
+import {useSettingsStore} from "@/stores/SettingsStore.js";
+
+const route = useRoute();
+const cart = useCartStore();
+const settings = useSettingsStore();
+const haptic = window.Telegram.WebApp.HapticFeedback;
+
+function onDockItemClick() {
+  haptic.selectionChanged();
+}
+</script>
+
+<style scoped>
+.telecart-dock {
+  padding-bottom: calc(var(--tg-safe-area-inset-bottom) + 5px);
+  height: calc(70px + var(--tg-safe-area-inset-bottom));
+}
+
+.telecart-dock-inner {
+  border-radius: var(--radius-field);
+}
+
+.telecart-dock-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  border-radius: var(--radius-field);
+  padding: 5px 10px;
+  min-width: 85px;
+}
+
+.telecart-dock-item.active {
+  background-color: var(--color-primary);
+  backdrop-filter: blur(var(--blur-sm));
+}
+</style>

spa/src/style.css

@@ -52,11 +52,6 @@ html {
     color: white;
 }
 
-.app-dock {
-    padding-bottom: var(--tg-safe-area-inset-bottom);
-    height: calc(64px + var(--tg-safe-area-inset-bottom));
-}
-
 .swiper-pagination-bullets > .swiper-pagination-bullet {
     background-color: red;
     color: red;