chore: visibility rework (#129)

Author: hmbanan666

apps/storefront-telegram/app/components/UserPointsCard.vue

@@ -1,14 +1,14 @@
 <template>
   <div class="relative w-full h-auto aspect-3/2 perspective-normal motion-preset-slide-down">
     <div
-      class="absolute inset-0 bg-primary rounded-lg"
+      class="absolute inset-0 bg-primary rounded-lg transition duration-200"
       :style="{
         transform: `rotateX(${x * 5}deg) rotateY(${y * 5}deg)`,
       }"
     />
 
     <div
-      class="z-10 w-full h-full p-4 flex flex-col justify-between tg-text-button"
+      class="z-10 w-full h-full p-4 flex flex-col justify-between transition duration-200 tg-text-button"
       :style="{
         transform: `rotateX(${x * 3}deg) rotateY(${y * 3}deg)`,
       }"

apps/storefront-telegram/app/components/catalog/CategoryBlock.vue

@@ -1,12 +1,9 @@
 <template>
   <div
-    v-element-visibility="[
-      (isVisible) => (isVisible && category?.slug) ? visibleCategory = category.slug : null,
-      observerOptions,
-    ]"
+    ref="target"
     class="flex flex-col gap-3 mb-10"
   >
-    <h2 :id="category?.slug" class="scroll-mt-28 text-2xl/5 font-semibold tracking-tight">
+    <h2 :id="category?.slug" class="scroll-mt-32 text-2xl/5 font-semibold tracking-tight">
       {{ category?.name }}
     </h2>
 
@@ -22,14 +19,21 @@
 </template>
 
 <script setup lang="ts">
-import { vElementVisibility } from '@vueuse/components'
-
 const { categoryId } = defineProps<{
   categoryId: string
 }>()
 
 const { visibleCategory, observerOptions } = useCatalog()
 
+const target = useTemplateRef<HTMLDivElement>('target')
+const targetIsVisible = useElementVisibility(target, observerOptions)
+
+watch(targetIsVisible, (isVisible) => {
+  if (isVisible && category?.slug) {
+    visibleCategory.value = category.slug
+  }
+})
+
 const menuStore = useMenuStore()
 const category = menuStore.menu?.categories.find((c) => c.id === categoryId)
 const products = category?.products.filter((p) => p.isAvailableForPurchase && p.variants.length)

apps/storefront-telegram/app/composables/useCatalog.ts

@@ -1,7 +1,7 @@
 function _useCatalog() {
   const visibleCategory = ref<string | null>(null)
 
-  const observerOptions = { rootMargin: '0px 0px 0px 0px' }
+  const observerOptions = { rootMargin: '0px 0px -150px 0px' }
 
   const scrollToCategory = useDebounceFn(() => {
     const category = window.document.getElementById(`to-${visibleCategory.value}`)

apps/storefront-telegram/app/utils/init.ts

@@ -92,7 +92,7 @@ export async function init(options: {
 
   // Gyroscope
   postEvent('web_app_start_gyroscope', {
-    refresh_rate: 500,
+    refresh_rate: 80,
   })
 
   if (mountViewport.isAvailable()) {