chore: some rework (#146)

Author: hmbanan666

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

@@ -1,9 +1,9 @@
 <template>
   <div
-    v-if="isCatalogPage"
-    class="tg-safe-area tg-text-button bg-gradient-to-b from-indigo-950 to-indigo-700 motion-preset-slide-down"
+    v-if="isCatalogPage && !channelStore.isKitchenOpened"
+    class="tg-safe-area -mb-[calc(var(--tg-viewport-content-safe-area-inset-top)+var(--tg-viewport-safe-area-inset-top))] tg-text-button bg-gradient-to-b from-indigo-950 to-indigo-800 motion-preset-slide-down"
   >
-    <div class="px-4 py-4 max-w-[28rem] mx-auto tg-content-safe-area-top">
+    <div class="p-4 max-w-[28rem] mx-auto tg-content-safe-area-top">
       <div class="pt-6 flex flex-row items-center gap-2">
         <UIcon name="i-lucide-moon" class="size-12 motion-preset-oscillate-sm motion-preset-seesaw motion-duration-3000" />
 
@@ -16,10 +16,12 @@
       </div>
     </div>
 
-    <div class="tg-bg-secondary h-6 w-full rounded-t-lg overflow-hidden" />
+    <div class="tg-bg-secondary h-4 w-full rounded-t-lg overflow-hidden" />
   </div>
 </template>
 
 <script setup lang="ts">
 const { isCatalogPage } = useNavigation()
+
+const channelStore = useChannelStore()
 </script>

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

@@ -1,14 +1,31 @@
 function _useCatalog() {
   const visibleCategory = ref<string | null>(null)
+  const lastVisibleCategory = ref<string | null>(null)
 
   const observerOptions = { rootMargin: '0px 0px 200px 0px' }
 
-  const scrollToCategoryInHorizontalMenu = useDebounceFn(() => {
+  function scrollToCategoryInHorizontalMenu() {
+    if (!visibleCategory.value || lastVisibleCategory.value === visibleCategory.value) {
+      return
+    }
+
+    lastVisibleCategory.value = visibleCategory.value
+
     const category = window.document.getElementById(`to-${visibleCategory.value}`)
-    category?.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
-  }, 800)
+    if (!category) {
+      return
+    }
+
+    category.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'start' })
+  }
 
-  watch(visibleCategory, () => scrollToCategoryInHorizontalMenu())
+  onMounted(() => {
+    // Activate scroll watcher after some time
+    setTimeout(() => {
+      lastVisibleCategory.value = visibleCategory.value
+      setInterval(scrollToCategoryInHorizontalMenu, 250)
+    }, 2000)
+  })
 
   function scrollToCategory(slug: string) {
     const category = window.document.getElementById(slug)

apps/storefront-telegram/app/stores/channel.ts

@@ -15,6 +15,8 @@ export const useChannelStore = defineStore('channel', () => {
   const selectedKitchenId = ref<string | undefined>('m68foq9qtpsxd69eayom7bjn') // Фрунзе
   const selectedKitchen = computed(() => kitchens.value.find((kitchen) => kitchen.id === selectedKitchenId.value))
 
+  const isKitchenOpened = computed(() => false)
+
   const initDataRaw = useSignal(_initDataRaw)
 
   async function update() {
@@ -53,6 +55,7 @@ export const useChannelStore = defineStore('channel', () => {
 
     selectedKitchenId,
     selectedKitchen,
+    isKitchenOpened,
 
     update,
   }