From 76c32c53200f33a5de8fee3587b6aa597ce6d04a Mon Sep 17 00:00:00 2001
From: Nikita Kiselev <kiselev2008@gmail.com>
Date: Fri, 19 Dec 2025 01:22:53 +0300
Subject: [PATCH] feat: add old browser checks

---
 frontend/spa/src/App.vue                     |  5 ++++-
 frontend/spa/src/BrowserNotSupported.vue     | 21 ++++++++++++++++++++
 frontend/spa/src/components/ProductsList.vue |  5 +++--
 frontend/spa/src/main.js                     |  6 +++++-
 4 files changed, 33 insertions(+), 4 deletions(-)
 create mode 100644 frontend/spa/src/BrowserNotSupported.vue

diff --git a/frontend/spa/src/App.vue b/frontend/spa/src/App.vue
index 69c0b7f..7cd63e6 100644
--- a/frontend/spa/src/App.vue
+++ b/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();
diff --git a/frontend/spa/src/BrowserNotSupported.vue b/frontend/spa/src/BrowserNotSupported.vue
new file mode 100644
index 0000000..9550865
--- /dev/null
+++ b/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>
+
diff --git a/frontend/spa/src/components/ProductsList.vue b/frontend/spa/src/components/ProductsList.vue
index 2991202..3b5db85 100644
--- a/frontend/spa/src/components/ProductsList.vue
+++ b/frontend/spa/src/components/ProductsList.vue
@@ -139,8 +139,9 @@ useIntersectionObserver(
       }
     },
     {
-      root: null,
-      rootMargin: '400px 0',
+      root: null, // viewport
+      rootMargin: '200px 0px 400px 0px', // top right bottom left
+      threshold: 0, // срабатывает, как только элемент пересекает viewport
     }
 );
 
diff --git a/frontend/spa/src/main.js b/frontend/spa/src/main.js
index a654310..9e0376d 100644
--- a/frontend/spa/src/main.js
+++ b/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())