From c9cc19c704e614b45285648cdc7ceb0e35f06a6b Mon Sep 17 00:00:00 2001
From: vchikalkin <djchikalkin@gmail.com>
Date: Sat, 2 Aug 2025 12:37:29 +0300
Subject: [PATCH] feat(layout): integrate TelegramProvider and BackButton into
 main layout for enhanced navigation

---
 apps/web/app/(main)/layout.tsx                |  8 +++--
 .../web/components/navigation/back-button.tsx |  9 +++++
 .../components/navigation/header/index.tsx    |  6 ++--
 apps/web/components/navigation/index.ts       |  1 +
 apps/web/hooks/telegram/index.ts              |  1 +
 apps/web/hooks/telegram/use-back-button.ts    | 34 +++++++++++++++++++
 6 files changed, 52 insertions(+), 7 deletions(-)
 create mode 100644 apps/web/components/navigation/back-button.tsx
 create mode 100644 apps/web/hooks/telegram/use-back-button.ts

diff --git a/apps/web/app/(main)/layout.tsx b/apps/web/app/(main)/layout.tsx
index 16e17c0..1682268 100644
--- a/apps/web/app/(main)/layout.tsx
+++ b/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>
   );
 }
diff --git a/apps/web/components/navigation/back-button.tsx b/apps/web/components/navigation/back-button.tsx
new file mode 100644
index 0000000..29892f4
--- /dev/null
+++ b/apps/web/components/navigation/back-button.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+import { useBackButton } from '@/hooks/telegram';
+
+export function BackButton() {
+  useBackButton();
+
+  return null;
+}
diff --git a/apps/web/components/navigation/header/index.tsx b/apps/web/components/navigation/header/index.tsx
index 59f83d0..5a4c1c3 100644
--- a/apps/web/components/navigation/header/index.tsx
+++ b/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>
   );
diff --git a/apps/web/components/navigation/index.ts b/apps/web/components/navigation/index.ts
index db2f2b0..4167292 100644
--- a/apps/web/components/navigation/index.ts
+++ b/apps/web/components/navigation/index.ts
@@ -1,2 +1,3 @@
+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 019eb25..ce3313c 100644
--- a/apps/web/hooks/telegram/index.ts
+++ b/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';
diff --git a/apps/web/hooks/telegram/use-back-button.ts b/apps/web/hooks/telegram/use-back-button.ts
new file mode 100644
index 0000000..403bba5
--- /dev/null
+++ b/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;
+}