feat(spa): UI changes

spa/src/App.vue

@@ -17,13 +17,12 @@
 </template>
 
 <script setup>
-import {computed, ref, watch} from "vue";
+import {computed, onMounted, onUnmounted, ref, watch} from "vue";
 import {useWebAppViewport} from 'vue-tg';
 import {useMiniApp, FullscreenViewport} from 'vue-tg';
 import {useRoute, useRouter} from "vue-router";
 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";
 
@@ -38,7 +37,6 @@ 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;
 
@@ -50,13 +48,7 @@ const routesToHideAppDock = [
 ];
 
 const isAppDockShown = computed(() => {
-  // Скрывать, если маршрут в списке скрываемых
+  return routesToHideAppDock.indexOf(route.name) === -1;
-  // или если мы в корзине с товарами
-  const shouldHide =
-      routesToHideAppDock.includes(route.name) ||
-      (route.name === 'cart' && cart.productsCount > 0);
-
-  return !shouldHide;
 });
 
 function navigateBack() {
@@ -77,4 +69,18 @@ watch(
     },
     {immediate: true}
 );
+
+function handleClickOutside(e) {
+  if (!e.target.closest('input')) {
+    document.activeElement?.blur();
+  }
+}
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside);
+});
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside);
+});
 </script>

spa/src/components/Dock.vue

@@ -1,40 +1,59 @@
 <template>
-<div class="telecart-dock fixed bottom-0 w-full z-50 px-10">
+  <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">
+    <div
-    <RouterLink
+        class="telecart-dock-inner flex justify-between items-center bg-base-300/10 h-full backdrop-blur-md px-2 border-base-300/90 border">
-        :to="{name: 'home'}"
+      <RouterLink
-        :class="{'active': route.name === 'home'}"
+          :to="{name: 'home'}"
-        class="telecart-dock-item"
+          :class="{'active': route.name === 'home'}"
-        @click="onDockItemClick"
+          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>
+        <svg class="size-[1.2em]" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-    </RouterLink>
+          <g fill="currentColor" stroke-linejoin="miter" stroke-linecap="butt">
-
+            <polyline points="1 11 12 2 23 11" fill="none" stroke="currentColor" stroke-miterlimit="10"
-    <RouterLink :to="{name: 'search'}" :class="{'active': route.name === 'search'}" class="telecart-dock-item" @click="onDockItemClick">
+                      stroke-width="2"></polyline>
-      <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 d="m5,13v7c0,1.105.895,2,2,2h10c1.105,0,2-.895,2-2v-7" fill="none" 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" />
+                  stroke-linecap="square" stroke-miterlimit="10" stroke-width="2"></path>
-      </svg>
+            <line x1="12" y1="22" x2="12" y2="18" fill="none" stroke="currentColor" stroke-linecap="square"
-      <span class="dock-label">Поиск</span>
+                  stroke-miterlimit="10" stroke-width="2"></line>
-    </RouterLink>
+          </g>
-
-    <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>
-      <span class="dock-label">Корзина</span>
+      </RouterLink>
-    </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>
-</div>
 </template>
 
 <script setup>
@@ -60,6 +79,8 @@ function onDockItemClick() {
 
 .telecart-dock-inner {
   border-radius: var(--radius-field);
+  border-width: var(--border);
+  border-style: solid;
 }
 
 .telecart-dock-item {
@@ -67,12 +88,13 @@ function onDockItemClick() {
   flex-direction: column;
   align-items: center;
   border-radius: var(--radius-field);
-  padding: 5px 10px;
+  padding: 5px 13px;
-  min-width: 85px;
+  min-width: 90px;
 }
 
 .telecart-dock-item.active {
   background-color: var(--color-primary);
   backdrop-filter: blur(var(--blur-sm));
+  color: var(--color-primary-content);
 }
 </style>

spa/src/components/ProductFilters/Components/ProductPrice.vue

@@ -6,6 +6,7 @@
         От
         <input
             type="number"
+            inputmode="numeric"
             class="grow"
             min="0"
             step="50"
@@ -18,6 +19,7 @@
         До
         <input
             type="number"
+            inputmode="numeric"
             class="grow"
             min="0"
             step="50"

spa/src/stores/ProductFiltersStore.js

@@ -1,18 +1,21 @@
 import {defineStore} from "pinia";
 import {getFiltersForMainPage} from "@/utils/ftch.js";
 import {md5} from "js-md5";
-import {toRaw} from "vue";
 
 export const useProductFiltersStore = defineStore('product_filters', {
     state: () => ({
         isLoading: false,
         draft: {},
         applied: {},
+        default: {},
         fullPath: '',
     }),
 
     getters: {
         paramsHashForRouter: (state) => md5(JSON.stringify({ filters: state.applied })),
+
+        isFiltersChanged: (state) =>
+            md5(JSON.stringify({ filters: state.applied })) !== md5(JSON.stringify({ filters: state.default })),
     },
 
     actions: {
@@ -22,6 +25,7 @@ export const useProductFiltersStore = defineStore('product_filters', {
             try {
                 this.isLoading = true;
                 const response = await getFiltersForMainPage();
+                this.default = response.data;
                 return response.data;
             } catch (error) {
                 console.log(error);

spa/src/style.css

@@ -48,7 +48,6 @@ html {
     display: flex;
     justify-content: center;
     align-items: center;
-    box-shadow: 0px -1px 3px 1px #000000;
     color: white;
 }
 

spa/src/views/Cart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-30">
+  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-40">
     <h2 class="text-2xl text-center">
       Корзина
       <span v-if="cart.isLoading" class="loading loading-spinner loading-md"></span>
@@ -109,17 +109,9 @@
         </div>
       </div>
 
-      <div class="fixed px-4 pb-10 pt-4 bottom-0 left-0 w-full bg-base-200 z-50 flex justify-between items-center gap-2 border-t-1 border-t-base-300">
+      <div class="fixed px-4 pt-4 bottom-25 left-0 w-full z-50 flex justify-end items-center gap-2">
-        <div>
-          <div v-if="lastTotal">
-            <span class="text-xs text-base-content mr-2">{{ lastTotal.title }}:</span><br>
-            <span v-if="cart.isLoading" class="loading loading-spinner loading-xs"></span>
-            <span v-else class="text-accent font-bold">{{ lastTotal.text }}</span>
-          </div>
-        </div>
-
         <button
-            class="btn btn-primary select-none"
+            class="btn btn-primary select-none shadow-xl"
             :disabled="cart.canCheckout === false"
             @click="goToCheckout"
         >

spa/src/views/Filters.vue

@@ -66,9 +66,6 @@ const router = useRouter();
 const emit = defineEmits(['close', 'apply']);
 
 const filtersStore = useProductFiltersStore();
-
-const mainButton = window.Telegram.WebApp.MainButton;
-const secondaryButton = window.Telegram.WebApp.SecondaryButton;
 const haptic = window.Telegram.WebApp.HapticFeedback;
 
 const applyFilters = async () => {
@@ -80,7 +77,7 @@ const applyFilters = async () => {
 }
 
 const resetFilters = async () => {
-  filtersStore.applied = await filtersStore.fetchFiltersForMainPage();
+  filtersStore.applied = filtersStore.default;
   console.debug('Filters: reset filters. Hash for router: ', filtersStore.paramsHashForRouter);
   haptic.notificationOccurred('success');
   await nextTick();

spa/src/views/Home.vue

@@ -1,21 +1,28 @@
 <template>
-  <div ref="goodsRef" class="pb-10">
+  <div ref="goodsRef" class="pb-20">
     <CategoriesInline/>
 
+
     <div class="px-5 fixed z-50 w-full opacity-90" style="bottom: calc(var(--tg-safe-area-inset-bottom) + 80px);">
       <div class="flex justify-center">
-        <button @click="showFilters" class="btn shadow-xl">
+        <button
-          <IconFunnel/> Фильтры
+            @click="showFilters"
+            class="btn shadow-xl relative"
+            :class="{'btn-accent' : filtersStore.isFiltersChanged}"
+        >
+          <IconFunnel/>
+          Фильтры
+          <span v-if="filtersStore.isFiltersChanged" class="status status-primary"></span>
         </button>
       </div>
     </div>
 
     <ProductsList
-      :products="products"
+        :products="products"
-      :hasMore="hasMore"
+        :hasMore="hasMore"
-      :isLoading="isLoading"
+        :isLoading="isLoading"
-      :isLoadingMore="isLoadingMore"
+        :isLoadingMore="isLoadingMore"
-      @loadMore="onLoadMore"
+        @loadMore="onLoadMore"
     />
   </div>
 </template>
@@ -23,7 +30,7 @@
 <script setup>
 import ProductsList from "@/components/ProductsList.vue";
 import CategoriesInline from "../components/CategoriesInline.vue";
-import {onActivated, onMounted, ref, toRaw} from "vue";
+import {onMounted, ref, toRaw} from "vue";
 import IconFunnel from "@/components/Icons/IconFunnel.vue";
 import {useRouter} from "vue-router";
 import ftch from "@/utils/ftch.js";
@@ -93,15 +100,17 @@ onMounted(async () => {
   await fetchProducts();
   window.scrollTo(0, 0);
 });
-
-onActivated(async () => {
-  console.debug('Home: Activated Home');
-});
 </script>
 
-<style>
+<style scoped>
-.floating-panel {
+.filters-status {
-  border-radius: var(--radius-field);
+  background-color: var(--color-info);
-  border: var(--border) solid var(--color-base-200);
+  color: var(--color-info);
+  box-shadow: 0 2px 3px -1px color-mix(in oklab, currentColor calc(var(--depth) * 100%), #0000);
+  aspect-ratio: 1;
+  border-radius: var(--radius-selector);
+  width: .5rem;
+  height: .5rem;
+  display: inline-block;
 }
 </style>

spa/src/views/Products.vue

@@ -1,10 +1,5 @@
 <template>
   <div ref="goodsRef" class="pb-10">
-    <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
         :products="productsStore.products.data"
         :hasMore="productsStore.products.meta.hasMore"
@@ -17,11 +12,9 @@
 
 <script setup>
 import ProductsList from "@/components/ProductsList.vue";
-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";
 
 defineOptions({
   name: 'Products'

spa/src/views/Search.vue

@@ -73,23 +73,9 @@
 <script setup>
 import {useSearchStore} from "@/stores/SearchStore.js";
 import {useDebounceFn} from "@vueuse/core";
-import {nextTick, onMounted, onUnmounted, ref} from "vue";
+import {ref} from "vue";
 
 const searchStore = useSearchStore();
 const searchInput = ref(null);
 const debouncedSearch = useDebounceFn(() => searchStore.performSearch(), 500);
-
-function handleClickOutside(e) {
-  if (!e.target.closest('input')) {
-    document.activeElement?.blur();
-  }
-}
-
-onUnmounted(() => {
-  document.removeEventListener('click', handleClickOutside);
-});
-
-onMounted(() => {
-  document.addEventListener('click', handleClickOutside);
-});
 </script>