From 70f1ef98bd1c926b325860ea59431169bea06aaa Mon Sep 17 00:00:00 2001
From: Gorbachev Egor <7gorbachevm@gmail.com>
Date: Wed, 22 Nov 2023 09:58:18 +0700
Subject: [PATCH 1/2] Prevent telegram swipe down closing

---
 src/index.css                                 | 18 +++++
 .../preventTelegramSwipeDownClosing.tsx       | 68 +++++++++++++++++++
 src/screens/app.tsx                           |  9 ++-
 src/screens/deck-review/deck-screen.tsx       | 13 +++-
 4 files changed, 103 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/telegram/preventTelegramSwipeDownClosing.tsx

diff --git a/src/index.css b/src/index.css
index 9d7ee5eb..c688ebfc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -10,6 +10,24 @@
   -webkit-text-size-adjust: 100%;
 }
 
+.fixed-container {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow: hidden;
+}
+
+.scrollable-content {
+  height: 100%;
+  overflow-y: scroll;
+  transform: translate3d(0, 0, 0);
+  -webkit-overflow-scrolling: touch;
+
+  padding: 0 16px 0 16px;
+}
+
 body {
   margin: 0;
   display: flex;
diff --git a/src/lib/telegram/preventTelegramSwipeDownClosing.tsx b/src/lib/telegram/preventTelegramSwipeDownClosing.tsx
new file mode 100644
index 00000000..26d9b616
--- /dev/null
+++ b/src/lib/telegram/preventTelegramSwipeDownClosing.tsx
@@ -0,0 +1,68 @@
+// @ts-nocheck
+import React, { ReactNode, useEffect } from "react";
+import WebApp from "@twa-dev/sdk";
+
+function throttle(func, limit) {
+  let inThrottle;
+  return function () {
+    const args = arguments;
+    const context = this;
+    if (!inThrottle) {
+      func.apply(context, args);
+      inThrottle = true;
+      setTimeout(() => (inThrottle = false), limit);
+    }
+  };
+}
+
+type Props = {
+  condition: boolean;
+  children: ReactNode;
+  withScroll: boolean;
+};
+
+export const PreventTelegramSwipeDownClosing = (props: Props) => {
+  const { condition, children, withScroll } = props;
+
+  useEffect(() => {
+    if (!condition) {
+      return;
+    }
+    const scrollableElement = document.querySelector(".scrollable-content");
+
+    const onTouchMove = throttle((e) => {
+      if (withScroll) {
+        requestAnimationFrame(() => {
+          e.preventDefault();
+        });
+      } else {
+        e.preventDefault();
+      }
+    }, 100);
+
+    scrollableElement.addEventListener("touchmove", onTouchMove, false);
+  }, []);
+
+  if (!condition) {
+    return children;
+  }
+
+  return (
+    <div className="fixed-container">
+      <div className="scrollable-content">{children}</div>
+    </div>
+  );
+};
+
+const isMobileIos = /iPad|iPhone|iPod/.test(navigator.userAgent);
+
+export const PreventTelegramSwipeDownClosingIos = (props: {
+  children: ReactNode;
+  withScroll: boolean;
+}) => {
+  return (
+    <PreventTelegramSwipeDownClosing condition={isMobileIos} withScroll={props.withScroll}>
+      {props.children}
+    </PreventTelegramSwipeDownClosing>
+  );
+};
diff --git a/src/screens/app.tsx b/src/screens/app.tsx
index c37aba8e..30526075 100644
--- a/src/screens/app.tsx
+++ b/src/screens/app.tsx
@@ -12,6 +12,7 @@ import { UserSettingsStoreProvider } from "../store/user-settings-store-context.
 import { UserSettingsMain } from "./user-settings/user-settings-main.tsx";
 import { deckListStore } from "../store/deck-list-store.ts";
 import { FullScreenLoader } from "./deck-list/full-screen-loader.tsx";
+import { PreventTelegramSwipeDownClosingIos } from "../lib/telegram/preventTelegramSwipeDownClosing.tsx";
 
 export const App = observer(() => {
   if (deckListStore.isSharedDeckLoading || deckListStore.isDeckRemoving) {
@@ -34,9 +35,11 @@ export const App = observer(() => {
       )}
       {screenStore.screen.type === "cardQuickAddForm" && <QuickAddCardForm />}
       {screenStore.screen.type === "userSettings" && (
-        <UserSettingsStoreProvider>
-          <UserSettingsMain />
-        </UserSettingsStoreProvider>
+        <PreventTelegramSwipeDownClosingIos withScroll={false}>
+          <UserSettingsStoreProvider>
+            <UserSettingsMain />
+          </UserSettingsStoreProvider>
+        </PreventTelegramSwipeDownClosingIos>
       )}
     </div>
   );
diff --git a/src/screens/deck-review/deck-screen.tsx b/src/screens/deck-review/deck-screen.tsx
index 55d21b58..1a540fe7 100644
--- a/src/screens/deck-review/deck-screen.tsx
+++ b/src/screens/deck-review/deck-screen.tsx
@@ -4,14 +4,23 @@ import { Review } from "./review.tsx";
 import { DeckPreview } from "./deck-preview.tsx";
 import { useReviewStore } from "../../store/review-store-context.tsx";
 import { DeckFinished } from "./deck-finished.tsx";
+import { PreventTelegramSwipeDownClosingIos } from "../../lib/telegram/preventTelegramSwipeDownClosing.tsx";
 
 export const DeckScreen = observer(() => {
   const reviewStore = useReviewStore();
 
   if (reviewStore.isFinished) {
-    return <DeckFinished />;
+    return (
+      <PreventTelegramSwipeDownClosingIos withScroll={false}>
+        <DeckFinished />
+      </PreventTelegramSwipeDownClosingIos>
+    );
   } else if (reviewStore.currentCardId) {
-    return <Review />;
+    return (
+      <PreventTelegramSwipeDownClosingIos withScroll={false}>
+        <Review />
+      </PreventTelegramSwipeDownClosingIos>
+    );
   }
   return <DeckPreview />;
 });

From b0c9eff0c326ca13c8b65960dd9e52dab0653f71 Mon Sep 17 00:00:00 2001
From: Gorbachev Egor <7gorbachevm@gmail.com>
Date: Wed, 22 Nov 2023 09:58:30 +0700
Subject: [PATCH 2/2] Prevent telegram swipe down closing

---
 .../telegram/preventTelegramSwipeDownClosing.tsx    | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/lib/telegram/preventTelegramSwipeDownClosing.tsx b/src/lib/telegram/preventTelegramSwipeDownClosing.tsx
index 26d9b616..0c2ac1a0 100644
--- a/src/lib/telegram/preventTelegramSwipeDownClosing.tsx
+++ b/src/lib/telegram/preventTelegramSwipeDownClosing.tsx
@@ -1,11 +1,12 @@
 // @ts-nocheck
 import React, { ReactNode, useEffect } from "react";
-import WebApp from "@twa-dev/sdk";
 
 function throttle(func, limit) {
   let inThrottle;
   return function () {
+    // eslint-disable-next-line
     const args = arguments;
+    // eslint-disable-next-line
     const context = this;
     if (!inThrottle) {
       func.apply(context, args);
@@ -41,6 +42,11 @@ export const PreventTelegramSwipeDownClosing = (props: Props) => {
     }, 100);
 
     scrollableElement.addEventListener("touchmove", onTouchMove, false);
+
+    return () => {
+      scrollableElement.removeEventListener("touchMove", onTouchMove, false);
+    };
+    // eslint-disable-next-line
   }, []);
 
   if (!condition) {
@@ -61,7 +67,10 @@ export const PreventTelegramSwipeDownClosingIos = (props: {
   withScroll: boolean;
 }) => {
   return (
-    <PreventTelegramSwipeDownClosing condition={isMobileIos} withScroll={props.withScroll}>
+    <PreventTelegramSwipeDownClosing
+      condition={isMobileIos}
+      withScroll={props.withScroll}
+    >
       {props.children}
     </PreventTelegramSwipeDownClosing>
   );