feat(layout): integrate TelegramProvider and BackButton into main layout for enhanced navigation

apps/web/app/(main)/layout.tsx

@@ -1,13 +1,15 @@
 import { UpdateProfile } from '@/components/auth';
-import { BottomNav } from '@/components/navigation';
+import { BackButton, BottomNav } from '@/components/navigation';
+import { TelegramProvider } from '@/providers/telegram';
 import { type PropsWithChildren } from 'react';
 
 export default async function Layout({ children }: Readonly<PropsWithChildren>) {
   return (
-    <>
+    <TelegramProvider>
       <UpdateProfile />
       <main className="grow">{children}</main>
       <BottomNav />
-    </>
+      <BackButton />
+    </TelegramProvider>
   );
 }

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

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

apps/web/components/navigation/header/index.tsx

@@ -1,13 +1,11 @@
 'use client';
 
-import { BackButton } from './back-button';
-
 type Props = { title: string | undefined };
 
 export function PageHeader(props: Readonly<Props>) {
   return (
-    <div className="sticky top-0 z-50 flex h-12 items-center rounded-b-lg bg-transparent px-2 font-bold tracking-wide backdrop-blur-md">
-      <BackButton />
+    <div className="sticky top-0 z-50 flex h-12 items-center rounded-b-lg bg-transparent px-4 font-bold tracking-wide backdrop-blur-md">
+      {/* <BackButton /> */}
       {props.title}
     </div>
   );

apps/web/components/navigation/index.ts

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

apps/web/hooks/telegram/index.ts

@@ -1,2 +1,3 @@
+export * from './use-back-button';
 export * from './use-client-once';
 export * from './use-did-mount';

apps/web/hooks/telegram/use-back-button.ts

@@ -0,0 +1,34 @@
+'use client';
+
+import { backButton } from '@telegram-apps/sdk-react';
+import { usePathname, useRouter } from 'next/navigation';
+import { useCallback, useEffect } from 'react';
+
+export function useBackButton() {
+  const { back } = useRouter();
+  const pathname = usePathname();
+
+  const onBackClick = useCallback(() => {
+    if (pathname !== '/') {
+      back();
+    }
+  }, [pathname, back]);
+
+  useEffect(() => {
+    const off = backButton.onClick(onBackClick);
+
+    return off;
+  }, [onBackClick]);
+
+  useEffect(() => {
+    if (isRootLevelPage(pathname)) {
+      backButton.hide();
+    } else {
+      backButton.show();
+    }
+  }, [pathname]);
+}
+
+function isRootLevelPage(path: string) {
+  return path.split('/').filter(Boolean).length === 1;
+}