feat: add old browser checks

frontend/spa/src/App.vue

@@ -8,7 +8,9 @@
 
         <section class="telecart-main-section">
           <FullscreenViewport v-if="platform === 'ios' || platform === 'android'"/>
-
+          <div class="fixed inset-0 z-50 bg-white flex items-center justify-center text-center p-4">
+            <BrowserNotSupported/>
+          </div>
           <AppDebugMessage v-if="settings.app_debug"/>
 
           <RouterView v-slot="{ Component, route }">
@@ -72,6 +74,7 @@ import Dock from "@/components/Dock.vue";
 import AppDebugMessage from "@/components/AppDebugMessage.vue";
 import PrivacyPolicy from "@/components/PrivacyPolicy.vue";
 import {useSwipeBack} from "@/composables/useSwipeBack.js";
+import BrowserNotSupported from "@/BrowserNotSupported.vue";
 
 const tg = useMiniApp();
 const platform = ref();

frontend/spa/src/BrowserNotSupported.vue

@@ -0,0 +1,21 @@
+<template>
+  <div style="z-index: 99999" class="fixed top-0 left-0 w-full h-full bg-base-100">
+    <div class="flex flex-col items-center justify-center h-full px-4">
+      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-20 mb-4">
+        <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+      </svg>
+
+      <h1 class="font-semibold text-2xl mb-2 text-center">Обновите браузер</h1>
+      <p class="text-sm text-base-content/70 text-center mb-4">
+        Ваш браузер не поддерживает необходимые функции для работы приложения.
+      </p>
+      <p class="text-xs text-base-content/50 text-center">
+        Пожалуйста, обновите Telegram до последней версии или используйте более современный браузер.
+      </p>
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>
+

frontend/spa/src/components/ProductsList.vue

@@ -139,8 +139,9 @@ useIntersectionObserver(
       }
     },
     {
-      root: null,
+      root: null, // viewport
-      rootMargin: '400px 0',
+      rootMargin: '200px 0px 400px 0px', // top right bottom left
+      threshold: 0, // срабатывает, как только элемент пересекает viewport
     }
 );
 

frontend/spa/src/main.js

@@ -105,7 +105,11 @@ settings.load()
                 document.documentElement.style.setProperty(key, settings.theme.variables[key]);
             }
 
-            setTelegramUIColors();
+            try {
+                setTelegramUIColors();
+            } catch (e) {
+                console.error('Could not set Telegram UI Colors', e);
+            }
         }
     )
     .then(() => new AppMetaInitializer(settings).init())