feat(spa): add dock

spa/src/App.vue

@@ -9,19 +9,52 @@
           <component :is="Component" :key="route.fullPath"/>
         </KeepAlive>
       </RouterView>
+
       <CartButton v-if="settings.store_enabled"/>
+
+      <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>
 
 <script setup>
-import {ref, watch} from "vue";
+import {computed, 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";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
+import {useCartStore} from "@/stores/CartStore.js";
+import CartButton from "@/components/CartButton.vue";
 
 const tg = useMiniApp();
 const platform = ref();
@@ -34,9 +67,26 @@ const router = useRouter();
 const route = useRoute();
 const settings = useSettingsStore();
 const filtersStore = useProductFiltersStore();
+const cart = useCartStore();
 const backButton = window.Telegram.WebApp.BackButton;
 const haptic = window.Telegram.WebApp.HapticFeedback;
 
+const routesToHideAppDock = [
+    'product.show',
+    'checkout',
+    'order_created',
+];
+
+const isAppDockShown = computed(() => {
+  // Скрывать, если маршрут в списке скрываемых
+  // или если мы в корзине с товарами
+  const shouldHide =
+      routesToHideAppDock.includes(route.name) ||
+      (route.name === 'cart' && cart.productsCount > 0);
+
+  return !shouldHide;
+});
+
 function navigateBack() {
   haptic.impactOccurred('light');
   router.back();

spa/src/components/CartButton.vue

@@ -24,7 +24,7 @@ const router = useRouter();
 const route = useRoute();
 
 const isCartBtnShow = computed(() => {
-  return route.name !== 'cart' && route.name !== 'checkout' && route.name !== 'order_created' && route.name !== 'filters';
+  return route.name === 'product.show';
 });
 
 

spa/src/style.css

@@ -52,6 +52,11 @@ 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;

spa/src/views/Cart.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
-    <h2 class="text-2xl">
+    <h2 class="text-2xl text-center">
       Корзина
       <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
     </h2>
@@ -119,7 +119,7 @@
         </div>
 
         <button
-            class="btn btn-primary"
+            class="btn btn-primary select-none"
             :disabled="cart.canCheckout === false"
             @click="goToCheckout"
         >
@@ -132,8 +132,9 @@
         v-else
         class="text-center rounded-2xl"
     >
+      <div class="text-5xl mb-4">🛒</div>
       <p class="text-lg mb-3">Ваша корзина пуста</p>
-      <RouterLink class="btn btn-primary" to="/">Начать покупки.</RouterLink>
+      <RouterLink class="btn btn-primary" to="/">Начать покупки</RouterLink>
     </div>
   </div>
 </template>

spa/src/views/Home.vue

@@ -2,12 +2,11 @@
   <div ref="goodsRef" class="pb-10">
     <CategoriesInline/>
 
-    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 5px);">
+    <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 80px);">
-      <div class="floating-panel bg-base-200 flex justify-between p-2 shadow-md">
+      <div class="flex justify-center">
-        <button @click="showFilters" class="btn mr-3">
+        <button @click="showFilters" class="btn shadow-xl">
-          <IconFunnel/>
+          <IconFunnel/> Фильтры
         </button>
-        <SearchInput/>
       </div>
     </div>
 
@@ -24,7 +23,6 @@
 <script setup>
 import ProductsList from "@/components/ProductsList.vue";
 import CategoriesInline from "../components/CategoriesInline.vue";
-import SearchInput from "@/components/SearchInput.vue";
 import {onActivated, onMounted, ref, toRaw} from "vue";
 import IconFunnel from "@/components/Icons/IconFunnel.vue";
 import {useRouter} from "vue-router";

spa/src/views/Search.vue

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