From 12686f071226c3777473881692b84a1517162146 Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Sat, 2 Aug 2025 13:48:17 +0300
Subject: [PATCH] refactor(layout): remove BackButton from main layout and
 update navigation imports

---
 apps/web/app/(main)/layout.tsx                 |  3 +--
 apps/web/components/navigation/back-button.tsx |  9 ---------
 apps/web/components/navigation/index.ts        |  1 -
 apps/web/hooks/telegram/index.ts               |  1 +
 apps/web/hooks/telegram/use-viewport.ts        | 12 ++++++++++++
 apps/web/providers/telegram.tsx                |  5 ++++-
 apps/web/utils/telegram/init.ts                | 14 ++++++++++++--
 7 files changed, 30 insertions(+), 15 deletions(-)
 delete mode 100644 apps/web/components/navigation/back-button.tsx
 create mode 100644 apps/web/hooks/telegram/use-viewport.ts

diff --git a/apps/web/app/(main)/layout.tsx b/apps/web/app/(main)/layout.tsx
index 1682268..942e3e4 100644
--- a/apps/web/app/(main)/layout.tsx
+++ b/apps/web/app/(main)/layout.tsx
@@ -1,5 +1,5 @@
 import { UpdateProfile } from '@/components/auth';
-import { BackButton, BottomNav } from '@/components/navigation';
+import { BottomNav } from '@/components/navigation';
 import { TelegramProvider } from '@/providers/telegram';
 import { type PropsWithChildren } from 'react';
 
@@ -9,7 +9,6 @@ export default async function Layout({ children }: Readonly<PropsWithChildren>)
       <UpdateProfile />
       <main className="grow">{children}</main>
       <BottomNav />
-      <BackButton />
     </TelegramProvider>
   );
 }
diff --git a/apps/web/components/navigation/back-button.tsx b/apps/web/components/navigation/back-button.tsx
deleted file mode 100644
index 29892f4..0000000
--- a/apps/web/components/navigation/back-button.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-'use client';
-
-import { useBackButton } from '@/hooks/telegram';
-
-export function BackButton() {
-  useBackButton();
-
-  return null;
-}
diff --git a/apps/web/components/navigation/index.ts b/apps/web/components/navigation/index.ts
index 4167292..db2f2b0 100644
--- a/apps/web/components/navigation/index.ts
+++ b/apps/web/components/navigation/index.ts
@@ -1,3 +1,2 @@
-export * from './back-button';
 export * from './bottom-nav';
 export * from './header';
diff --git a/apps/web/hooks/telegram/index.ts b/apps/web/hooks/telegram/index.ts
index ce3313c..2f1cbc1 100644
--- a/apps/web/hooks/telegram/index.ts
+++ b/apps/web/hooks/telegram/index.ts
@@ -1,3 +1,4 @@
 export * from './use-back-button';
 export * from './use-client-once';
 export * from './use-did-mount';
+export * from './use-viewport';
diff --git a/apps/web/hooks/telegram/use-viewport.ts b/apps/web/hooks/telegram/use-viewport.ts
new file mode 100644
index 0000000..65b2b5e
--- /dev/null
+++ b/apps/web/hooks/telegram/use-viewport.ts
@@ -0,0 +1,12 @@
+import { useClientOnce } from './use-client-once';
+import { swipeBehavior } from '@telegram-apps/sdk-react';
+
+export function useViewport() {
+  useClientOnce(() => {
+    if (swipeBehavior.disableVertical.isAvailable()) {
+      swipeBehavior.disableVertical();
+    }
+  });
+
+  return null;
+}
diff --git a/apps/web/providers/telegram.tsx b/apps/web/providers/telegram.tsx
index 2be20d6..26aefba 100644
--- a/apps/web/providers/telegram.tsx
+++ b/apps/web/providers/telegram.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable sonarjs/function-return-type */
 'use client';
 
-import { useClientOnce, useDidMount } from '@/hooks/telegram';
+import { useBackButton, useClientOnce, useDidMount, useViewport } from '@/hooks/telegram';
 import { setLocale } from '@/utils/i18n/locale';
 import { init } from '@/utils/telegram/init';
 import { initData, useSignal } from '@telegram-apps/sdk-react';
@@ -28,6 +28,9 @@ function RootInner({ children }: PropsWithChildren) {
     init(debug);
   });
 
+  useViewport();
+  useBackButton();
+
   const initDataUser = useSignal(initData.user);
 
   // Set the user locale.
diff --git a/apps/web/utils/telegram/init.ts b/apps/web/utils/telegram/init.ts
index 00e4a81..44d4b71 100644
--- a/apps/web/utils/telegram/init.ts
+++ b/apps/web/utils/telegram/init.ts
@@ -1,17 +1,19 @@
 /* eslint-disable no-console */
 /* eslint-disable promise/prefer-await-to-then */
+
 import {
   backButton,
   $debug as debugSDK,
   initData,
   init as initSDK,
   miniApp,
+  swipeBehavior,
 } from '@telegram-apps/sdk-react';
 
 /**
  * Initializes the application and configures its dependencies.
  */
-export function init(debug: boolean): void {
+export async function init(debug: boolean): Promise<void> {
   // Set @telegram-apps/sdk-react debug mode.
   if (debug) debugSDK.set(debug);
 
@@ -20,10 +22,18 @@ export function init(debug: boolean): void {
   initSDK();
 
   // Mount all components used in the project.
-  if (backButton.isSupported()) backButton.mount();
+  if (backButton.isSupported()) {
+    backButton.mount();
+  }
+
   miniApp.mount();
+
   initData.restore();
 
+  if (swipeBehavior.mount.isAvailable()) {
+    swipeBehavior.mount();
+  }
+
   // Add Eruda if needed.
   if (debug) import('eruda').then((library) => library.default.init()).catch(console.error);
 }