Features: 1) Add appStore integration for managing search overlay state in search.vue; 2) Enhance expiration date formatting in promocodes.vue with detailed and localized time display; 3) Replace avatar image handling in settings.vue with nuxt-img for better performance and format support;

Fixes: 1) Add missing type annotations for `isSearchActive` in `useSearchUi.ts`; 2) Resolve improper conditional rendering in empty state templates across multiple files; 3) Remove unnecessary `console.log` calls in `goTo` function;

Extra: 1) Update SCSS styles including border thickness, colors, and padding tweaks; 2) Refactor `loader.vue` to use `<span>` instead of `<li>` for dots and adjust size; 3) Clean up obsolete TODOs, comments, and unused imports.

storefront/components/base/header/search.vue

@@ -69,6 +69,7 @@ import { useSearchUI } from "@/composables/search";
 
 const {t} = useI18n();
 const router = useRouter();
+const appStore = useAppStore();
 
 const {
   query,
@@ -93,10 +94,17 @@ function submitSearch() {
   }
 }
 
+watch(
+  () => isSearchActive.value,
+  (state) => {
+    appStore.setOverflowHidden(state);
+  },
+  { immediate: true }
+);
+
 function goTo(category: string, item: any) {
   let path = "/";
-  console.log('c', category)
-  console.log(item)
+
   switch (category) {
     case "products":
       path = `/product/${item.slug}`;

storefront/components/profile/navigation.vue

@@ -98,6 +98,8 @@ const { logout } = useLogout();
 
     @include hover {
       color: $accentDark;
+      background-color: #f5f5f5;
+      border-color: #f5f5f5;
     }
 
     &.active {

storefront/components/ui/loader.vue

@@ -1,8 +1,8 @@
 <template>
   <div class="loader">
-    <li class="loader__dots" id="dot-1"></li>
-    <li class="loader__dots" id="dot-2"></li>
-    <li class="loader__dots" id="dot-3"></li>
+    <span class="loader__dots" id="dot-1"></span>
+    <span class="loader__dots" id="dot-2"></span>
+    <span class="loader__dots" id="dot-3"></span>
   </div>
 </template>
 
@@ -17,8 +17,8 @@
   list-style: none;
 
   &__dots {
-    width: 12px;
-    height: 12px;
+    width: 10px;
+    height: 10px;
     border-radius: 50%;
     background-color: $white;
   }

storefront/composables/search/useSearchUi.ts

@@ -4,7 +4,7 @@ import { useDebounceFn } from '@vueuse/core';
 
 export function useSearchUI() {
   const query = ref('');
-  const isSearchActive = ref(false);
+  const isSearchActive = ref<boolean>(false);
   const { search, loading, searchResults } = useSearch();
 
   const filteredSearchResults = computed(() => {

storefront/pages/product/[slug].vue

@@ -97,7 +97,7 @@
         </div>
       </div>
       <client-only>
-        <div class="characteristics" id="characteristics">
+        <div class="characteristics" id="characteristics" v-if="attributes.length">
           <div class="characteristics__wrapper">
             <h6 class="characteristics__title">{{ t('product.characteristics') }}</h6>
             <div class="characteristics__list">
@@ -330,7 +330,7 @@ watch(
     gap: 25px;
 
     &-description {
-      color: $accent;
+      color: $black;
       font-size: 16px;
       font-weight: 600;
     }

storefront/pages/profile/cart.vue

@@ -17,7 +17,7 @@
             :isToolsVisible="true"
         />
       </div>
-      <p class="cart__empty">{{ t('profile.cart.empty') }}</p>
+      <p class="cart__empty" v-else>{{ t('profile.cart.empty') }}</p>
     </div>
   </div>
 </template>

storefront/pages/profile/orders.vue

@@ -63,8 +63,7 @@
 <script setup lang="ts">
 import {usePageTitle} from "~/composables/utils";
 import {useOrders} from "~/composables/orders";
-import {CURRENCY, orderStatuses} from "~/config/constants";
-import {useDate} from "~/composables/date";
+import {orderStatuses} from "~/config/constants";
 import {useRouteQuery} from "@vueuse/router";
 
 const {t} = useI18n();

storefront/pages/profile/promocodes.vue

@@ -18,11 +18,23 @@
         </div>
         <div class="promocodes__item-right">
           <p class="promocodes__item-text">{{ promocode.node.discount }} {{ promocode.node.discountType === 'percent' ? '%' : CURRENCY }}</p>
-          <div class="promocodes__item-expire">{{ t('profile.promocodes.until') }} {{ useDate(promocode.node.endTime, locale) }}</div>
+          <div class="promocodes__item-expire">
+            {{ t('profile.promocodes.until') }}
+            {{
+              useDate(promocode.node.endTime, locale, {
+                  year: 'numeric',
+                  month: 'long',
+                  day: '2-digit',
+                  hour: '2-digit',
+                  minute: '2-digit',
+                  second: '2-digit'
+              })
+            }}
+          </div>
         </div>
       </div>
     </div>
-    <p class="promocodes__empty">{{ t('profile.promocodes.empty') }}</p>
+    <p class="promocodes__empty" v-else>{{ t('profile.promocodes.empty') }}</p>
   </div>
 </template>
 
@@ -49,7 +61,7 @@ const copyCode = (code: string) => {
     console.error(err);
   });
 };
-// TODO: display time for expire date
+
 const { setPageTitle } = usePageTitle();
 
 setPageTitle(t('breadcrumbs.promocodes'));
@@ -73,7 +85,7 @@ setPageTitle(t('breadcrumbs.promocodes'));
 
   &__item {
     border-radius: $default_border_radius;
-    border: 1px solid $accent;
+    border: 2px solid $accent;
     display: flex;
     align-items: stretch;
     justify-content: space-between;
@@ -82,7 +94,7 @@ setPageTitle(t('breadcrumbs.promocodes'));
       display: flex;
       align-items: center;
       gap: 20px;
-      padding: 7px 25px;
+      padding: 7px 15px;
 
       & p {
         font-weight: 600;

storefront/pages/profile/settings.vue

@@ -5,7 +5,14 @@
         <div class="settings__avatar">
           <input type="file" id="avatar" @change="uploadAvatar" />
           <label for="avatar">
-            <img class="settings__avatar-image" v-if="user?.avatar" :src="user?.avatar" alt="">
+            <nuxt-img
+                class="settings__avatar-image"
+                v-if="user?.avatar"
+                :src="user?.avatar"
+                alt="avatar"
+                format="webp"
+                densities="x1"
+            />
             <icon name="material-symbols-light:person-outline-rounded" size="100" v-else />
             <span class="settings__avatar-inner">
               <icon name="material-symbols:upload" size="40" />

storefront/pages/profile/wishlist.vue

@@ -43,7 +43,7 @@
           />
         </div>
       </div>
-      <p class="wishlist__empty">{{ t('profile.wishlist.empty') }}</p>
+      <p class="wishlist__empty" v-else>{{ t('profile.wishlist.empty') }}</p>
     </div>
   </div>
 </template>

storefront/plugins/apollo.ts

@@ -9,7 +9,7 @@ export default defineNuxtPlugin((nuxtApp) => {
   const runtime = useRuntimeConfig();
   const localeCookie = useCookie(useAppConfig().COOKIES_LOCALE_KEY);
   const token = useCookie(useAppConfig().COOKIES_ACCESS_TOKEN_KEY).value || '';
-  const { $apollo } = nuxtApp;
+  const { $apollo } = nuxtApp as any;
 
   const errorLink = onError((err) => {
     nuxtApp.callHook('apollo:error', err);