feat: design update, show avatar in navbar

frontend/spa/src/App.vue

@@ -3,7 +3,7 @@
     <input id="app-drawer" type="checkbox" class="drawer-toggle" v-model="drawerOpen"/>
 
     <div class="drawer-content">
-      <div class="app-container h-full">
+      <div class="app-container">
         <header class="app-header bg-neutral text-neutral-content w-full" v-if="platform === 'ios'"></header>
 
         <section class="telecart-main-section">

frontend/spa/src/components/MainPage/Blocks/BaseBlock.vue

@@ -0,0 +1,35 @@
+<template>
+  <section class="px-4">
+    <header class="flex justify-between items-center mb-4">
+      <div>
+        <div v-if="title" class="font-bold uppercase">{{ title }}</div>
+        <div v-if="description" class="text-sm">{{ description }}</div>
+      </div>
+
+      <div v-if="moreLink">
+        <RouterLink :to="moreLink" class="btn btn-ghost btn-xs" @click="haptic.selectionChanged">
+          {{ moreText || 'Смотреть всё' }}
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-4">
+            <path stroke-linecap="round" stroke-linejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+          </svg>
+        </RouterLink>
+      </div>
+    </header>
+    <main>
+      <slot></slot>
+    </main>
+  </section>
+</template>
+
+<script setup>
+import {useHapticFeedback} from "@/composables/useHapticFeedback.js";
+
+const props = defineProps({
+  title: String,
+  description: String,
+  moreLink: [String, Object],
+  moreText: String,
+});
+
+const haptic = useHapticFeedback();
+</script>

frontend/spa/src/components/MainPage/Blocks/ProductsCarouselBlock.vue

@@ -1,51 +1,32 @@
 <template>
-  <section class="px-4">
-    <header class="flex justify-between items-center mb-2">
-      <div>
-        <div v-if="block.title" class="font-bold uppercase">{{ block.title }}</div>
-        <div v-if="block.description" class="text-sm">{{ block.description }}</div>
-      </div>
-
-      <div>
+  <BaseBlock
+    :title="block.title"
+    :description="block.description"
+    :moreLink="{name: 'product.categories.show', params: { category_id: block.data.category_id }}"
+    :moreText="block.data.all_text"
+  >
+    <Swiper
+        class="select-none"
+        :slides-per-view="block.data?.carousel?.slides_per_view || 2.5"
+        :space-between="block.data?.carousel?.space_between || 20"
+        :autoplay="block.data?.carousel?.autoplay || false"
+        :freeMode="freeModeSettings"
+        :lazy="true"
+        @sliderMove="hapticScroll"
+    >
+      <SwiperSlide v-for="product in block.data.products.data" :key="product.id">
         <RouterLink
-            :to="{name: 'product.categories.show',
-            params: { category_id: block.data.category_id }}"
-            class="btn btn-ghost btn-xs"
+            :to="{name: 'product.show', params: {id: product.id}}"
+            @click="slideClick(product)"
         >
-          {{ block.data.all_text || 'Смотреть всё' }}
+          <div class="text-center">
+            <img :src="product.images[0].url" :alt="product.name" loading="lazy" class="product-image"/>
+            <PriceTitle :product="product"/>
+          </div>
         </RouterLink>
-      </div>
-    </header>
-    <main>
-      <Swiper
-          class="select-none"
-          :slides-per-view="block.data?.carousel?.slides_per_view || 2.5"
-          :space-between="block.data?.carousel?.space_between || 20"
-          :autoplay="block.data?.carousel?.autoplay || false"
-          :freeMode="freeModeSettings"
-          :lazy="true"
-          @sliderMove="hapticScroll"
-      >
-        <SwiperSlide v-for="product in block.data.products.data" :key="product.id">
-          <RouterLink
-              :to="{name: 'product.show', params: {id: product.id}}"
-              @click="slideClick(product)"
-          >
-            <div class="text-center">
-              <img :src="product.images[0].url" :alt="product.name" loading="lazy" class="product-image"/>
-              <ProductTitle :title="product.name"/>
-
-              <div v-if="product.special" class="mt-1">
-                <span class="text-xs line-through mr-2">{{ product.price }}</span>
-                <span class="text-base font-medium">{{ product.special }}</span>
-              </div>
-              <p v-else class="font-medium">{{ product.price }}</p>
-            </div>
-          </RouterLink>
-        </SwiperSlide>
-      </Swiper>
-    </main>
-  </section>
+      </SwiperSlide>
+    </Swiper>
+  </BaseBlock>
 </template>
 
 <script setup>
@@ -53,6 +34,9 @@ import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
 import {Swiper, SwiperSlide} from "swiper/vue";
 import ProductTitle from "@/components/ProductItem/ProductTitle.vue";
 import {useHapticScroll} from "@/composables/useHapticScroll.js";
+import Price from "@/components/ProductItem/Price.vue";
+import BaseBlock from "@/components/MainPage/Blocks/BaseBlock.vue";
+import PriceTitle from "@/components/ProductItem/PriceTitle.vue";
 
 const hapticScroll = useHapticScroll(20, 'selectionChanged');
 const yaMetrika = useYaMetrikaStore();

frontend/spa/src/components/MainPage/Blocks/ProductsFeedBlock.vue

@@ -1,6 +1,6 @@
 <template>
   <section class="px-4">
-    <header class="mb-2">
+    <header class="mb-4">
       <div v-if="block.title" class="font-bold uppercase">{{ block.title }}</div>
       <div v-if="block.description" class="text-sm">{{ block.description }}</div>
     </header>

frontend/spa/src/components/MainPage/Blocks/SliderBlock.vue

@@ -1,6 +1,6 @@
 <template>
-  <section>
-    <header>
+  <section class="mainpage-block">
+    <header class="mainpage-block__header">
       <div v-if="block.title" class="font-bold uppercase text-center">{{ block.title }}</div>
       <div v-if="block.description" class="text-sm text-center mb-2">{{ block.description }}</div>
     </header>

frontend/spa/src/components/Navbar.vue

@@ -21,12 +21,19 @@
     </div>
 
     <div class="navbar-end">
-      <button v-if="false" class="btn btn-ghost btn-circle">
-        <div class="indicator">
-          <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" /> </svg>
-          <span class="badge badge-xs badge-secondary indicator-item">1</span>
+      <div v-if="tgData?.user?.photo_url" class="avatar">
+        <div class="w-8 h-8 rounded-full">
+          <img :src="tgData?.user?.photo_url" alt="avatar"/>
         </div>
-      </button>
+      </div>
+
+      <div v-else class="avatar avatar-placeholder">
+        <div class="bg-primary text-primary-content w-8 rounded-full">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-5">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" />
+          </svg>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -35,13 +42,12 @@
 import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {useMiniApp} from "vue-tg";
 import {ref} from "vue";
+import {useTgData} from "@/composables/useTgData.js";
 
 const settings = useSettingsStore();
 const emits = defineEmits(['drawer']);
 
-const tg = useMiniApp();
-const platform = ref();
-platform.value = tg.platform;
+const tgData = useTgData();
 
 function toggleDrawer() {
   emits('drawer');

frontend/spa/src/components/ProductItem/Price.vue

@@ -0,0 +1,24 @@
+<template>
+  <div v-if="special">
+    <span class="old-price text-stone-500 line-through mr-1">{{ price }}</span>
+    <span class="curr-price font-medium">{{ special }}</span>
+  </div>
+  <div v-else class="font-medium">{{ price }}</div>
+</template>
+
+<script setup>
+const props = defineProps({
+  price: String,
+  special: [String, Boolean],
+});
+</script>
+
+<style scoped>
+.old-price {
+  font-size: 0.65rem;
+}
+
+.curr-price {
+  font-size: .9rem;
+}
+</style>

frontend/spa/src/components/ProductItem/PriceTitle.vue

@@ -0,0 +1,15 @@
+<template>
+  <div class="mt-2 text-center space-y-0.5">
+    <Price :price="product.price" :special="product.special"/>
+    <ProductTitle :title="product.name"/>
+  </div>
+</template>
+
+<script setup>
+import ProductTitle from "@/components/ProductItem/ProductTitle.vue";
+import Price from "@/components/ProductItem/Price.vue";
+
+const props = defineProps({
+  product: Object,
+});
+</script>

frontend/spa/src/components/ProductItem/ProductTitle.vue

@@ -1,5 +1,5 @@
 <template>
-  <h3 class="product-title mt-4 text-sm">{{ title }}</h3>
+  <h3 class="product-title text-sm/4">{{ title }}</h3>
 </template>
 
 <script setup>

frontend/spa/src/components/ProductsList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div>
-      <h2 v-if="categoryName" class="text-lg font-bold mb-5 text-center">{{ categoryName }}</h2>
+      <h2 v-if="categoryName" class="text-lg font-bold mb-5">{{ categoryName }}</h2>
 
       <template v-if="products.length > 0">
         <div
@@ -15,14 +15,7 @@
               @click="productClick(product, index)"
           >
             <ProductImageSwiper :images="product.images"/>
-            <ProductTitle :title="product.name"/>
-
-            <div v-if="product.special" class="mt-1">
-              <p class="text-xs line-through mr-2">{{ product.price }}</p>
-              <p class="text-lg font-medium">{{ product.special }}</p>
-            </div>
-            <p v-else class="mt-1 text-lg font-medium">{{ product.price }}</p>
-
+            <PriceTitle :product="product"/>
           </RouterLink>
           <div ref="bottom" style="height: 1px;"></div>
         </div>
@@ -75,6 +68,8 @@ import IconFunnel from "@/components/Icons/IconFunnel.vue";
 import {useProductFiltersStore} from "@/stores/ProductFiltersStore.js";
 import {useRouter} from "vue-router";
 import ProductTitle from "@/components/ProductItem/ProductTitle.vue";
+import Price from "@/components/ProductItem/Price.vue";
+import PriceTitle from "@/components/ProductItem/PriceTitle.vue";
 
 const router = useRouter();
 const haptic = window.Telegram.WebApp.HapticFeedback;

frontend/spa/src/composables/useHapticFeedback.js

@@ -0,0 +1,3 @@
+export function useHapticFeedback() {
+    return window.Telegram?.WebApp?.HapticFeedback;
+}

frontend/spa/src/composables/useTgData.js

@@ -0,0 +1,3 @@
+export function useTgData() {
+    return window.Telegram?.WebApp?.initDataUnsafe;
+}

frontend/spa/src/router.js

@@ -34,6 +34,13 @@ const routes = [
 export const router = createRouter({
     history: createWebHashHistory('/image/catalog/tgshopspa/'),
     routes,
+    scrollBehavior(to, from, savedPosition) {
+        if (savedPosition) {
+            return savedPosition;
+        }
+
+        return {top: 0, behavior: 'smooth'};
+    },
 });
 
 router.beforeEach((to, from, next) => {

frontend/spa/src/style.css

@@ -12,9 +12,6 @@ html, body, #app {
     --swiper-pagination-bullet-size: 6px;
     --swiper-pagination-color: #777;
     --swiper-pagination-bottom: -5px;
-}
-
-html {
     --product_list_title_max_lines: 2;
     --tc-navbar-min-height: 3rem;
 }
@@ -68,7 +65,3 @@ html {
             /*+ 1rem*/
     );
 }
-
-.swiper-pagination-bullets {
-    top: 10px;
-}

frontend/spa/src/views/BaseViewWrapper.vue

@@ -0,0 +1,14 @@
+<template>
+  <main class="px-4 mt-4">
+    <header v-if="title" class="font-bold uppercase mb-4">{{ title }}</header>
+    <section>
+      <slot></slot>
+    </section>
+  </main>
+</template>
+
+<script setup>
+const props = defineProps({
+  title: String,
+});
+</script>

frontend/spa/src/views/Cart.vue

@@ -1,10 +1,5 @@
 <template>
-  <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>
-    </h2>
-
+  <BaseViewWrapper title="Корзина">
     <div v-if="cart.attention" role="alert" class="alert alert-warning">
       <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 shrink-0 stroke-current" fill="none" viewBox="0 0 24 24">
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
@@ -19,7 +14,7 @@
       <span>{{ cart.error_warning }}</span>
     </div>
 
-    <div v-if="cart.items.length > 0">
+    <div v-if="cart.items.length > 0" class="pb-10">
       <div
           v-for="(item, index) in cart.items"
           :key="item.cart_id"
@@ -28,7 +23,7 @@
       >
         <div class="card-body">
           <div class="flex">
-            <div class="avatar mr-5">
+            <div class="mr-2">
               <div class="w-16 rounded">
                 <img :src="item.thumb"/>
               </div>
@@ -128,7 +123,7 @@
       <p class="text-lg mb-3">{{ settings.texts.text_empty_cart }}</p>
       <RouterLink class="btn btn-primary" to="/">Начать покупки</RouterLink>
     </div>
-  </div>
+  </BaseViewWrapper>
 </template>
 
 <script setup>
@@ -143,6 +138,7 @@ import {useRoute, useRouter} from "vue-router";
 import {useSettingsStore} from "@/stores/SettingsStore.js";
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
 import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+import BaseViewWrapper from "@/views/BaseViewWrapper.vue";
 
 const route = useRoute();
 const yaMetrika = useYaMetrikaStore();

frontend/spa/src/views/CategoriesList.vue

@@ -1,7 +1,5 @@
 <template>
-  <div class="px-4 mt-4">
-    <h2 class="font-bold uppercase mb-4">Категории</h2>
-
+  <BaseViewWrapper title="Категории">
     <div v-if="categoriesStore.isLoading" class="flex flex-col gap-4">
       <div class="skeleton h-14 w-full"></div>
       <div class="skeleton h-14 w-full"></div>
@@ -51,7 +49,7 @@
         </li>
       </TransitionGroup>
     </template>
-  </div>
+  </BaseViewWrapper>
 </template>
 
 <script setup>
@@ -61,6 +59,7 @@ import {useCategoriesStore} from "@/stores/CategoriesStore.js";
 import {useRoute} from "vue-router";
 import CategoryItem from "@/components/CategoriesList/CategoryItem.vue";
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
+import BaseViewWrapper from "@/views/BaseViewWrapper.vue";
 
 const route = useRoute();
 const categoriesStore = useCategoriesStore();

frontend/spa/src/views/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="goodsRef" class="space-y-4 mt-4">
+  <div ref="goodsRef" class="space-y-8 mt-4">
     <MainPage/>
   </div>
 </template>

frontend/spa/src/views/Search.vue

@@ -1,32 +1,28 @@
 <template>
-  <div class="max-w-3xl mx-auto p-4 space-y-6 pb-20">
-    <h2 class="text-2xl mb-5 text-center">Поиск</h2>
-
-    <div class="w-full">
-      <label class="input w-full">
-        <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-          <g
-              stroke-linejoin="round"
-              stroke-linecap="round"
-              stroke-width="2.5"
-              fill="none"
-              stroke="currentColor"
-          >
-            <circle cx="11" cy="11" r="8"></circle>
-            <path d="m21 21-4.3-4.3"></path>
-          </g>
-        </svg>
-        <input
-            ref="searchInput"
-            type="search"
-            class="grow input-lg"
-            placeholder="Поиск по магазину"
-            v-model="searchStore.search"
-            @search="debouncedSearch"
-            @input="debouncedSearch"
-        />
-      </label>
-    </div>
+  <BaseViewWrapper title="Поиск">
+    <label class="input w-full mb-4">
+      <svg class="h-[1em] opacity-50" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+        <g
+            stroke-linejoin="round"
+            stroke-linecap="round"
+            stroke-width="2.5"
+            fill="none"
+            stroke="currentColor"
+        >
+          <circle cx="11" cy="11" r="8"></circle>
+          <path d="m21 21-4.3-4.3"></path>
+        </g>
+      </svg>
+      <input
+          ref="searchInput"
+          type="search"
+          class="grow input-lg"
+          placeholder="Поиск по магазину"
+          v-model="searchStore.search"
+          @search="debouncedSearch"
+          @input="debouncedSearch"
+      />
+    </label>
 
     <div v-if="searchStore.isLoading === false && searchStore.products.data.length > 0">
       <RouterLink
@@ -43,7 +39,7 @@
 
         <div class="ml-5 p-0">
           <h2 class="card-title">{{ product.name }}</h2>
-          <p>{{ product.price }}</p>
+          <Price :price="product.price" :special="product.special"/>
         </div>
       </RouterLink>
     </div>
@@ -67,7 +63,7 @@
       <h2 class="text-xl font-semibold mb-2">Товары не найдены</h2>
       <p class="text-sm mb-4">Попробуйте изменить или уточнить запрос</p>
     </div>
-  </div>
+  </BaseViewWrapper>
 </template>
 
 <script setup>
@@ -77,6 +73,8 @@ import {onMounted, ref} from "vue";
 import {useYaMetrikaStore} from "@/stores/yaMetrikaStore.js";
 import {useRoute} from "vue-router";
 import {YA_METRIKA_GOAL} from "@/constants/yaMetrikaGoals.js";
+import BaseViewWrapper from "@/views/BaseViewWrapper.vue";
+import Price from "@/components/ProductItem/Price.vue";
 
 const route = useRoute();
 const yaMetrika = useYaMetrikaStore();