refactor(layout): remove BackButton from main layout and update navigation imports

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>
   );
 }

apps/web/components/navigation/back-button.tsx

@@ -1,9 +0,0 @@
-'use client';
-
-import { useBackButton } from '@/hooks/telegram';
-
-export function BackButton() {
-  useBackButton();
-
-  return null;
-}

apps/web/components/navigation/index.ts

@@ -1,3 +1,2 @@
-export * from './back-button';
 export * from './bottom-nav';
 export * from './header';

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';

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;
+}

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.

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);
 }