use ui back button for non tma mode

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

@@ -1,14 +1,22 @@
+'use client';
+
 import { UpdateProfile } from '@/components/auth';
 import { BottomNav } from '@/components/navigation';
+import { EmptyProvider } from '@/providers/empty';
 import { TelegramProvider } from '@/providers/telegram';
+import { isTMA } from '@telegram-apps/sdk-react';
 import { type PropsWithChildren } from 'react';
 
-export default async function Layout({ children }: Readonly<PropsWithChildren>) {
+export default function Layout({ children }: Readonly<PropsWithChildren>) {
+  const isTG = isTMA('simple');
+
+  const Provider = isTG ? TelegramProvider : EmptyProvider;
+
   return (
-    <TelegramProvider>
+    <Provider>
       <UpdateProfile />
       <main className="grow">{children}</main>
       <BottomNav />
-    </TelegramProvider>
+    </Provider>
   );
 }

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

@@ -1,11 +1,21 @@
 'use client';
+import { BackButton } from './back-button';
+import { cn } from '@repo/ui/lib/utils';
+import { isTMA } from '@telegram-apps/sdk-react';
 
 type Props = { title: string | undefined };
 
 export function PageHeader(props: Readonly<Props>) {
+  const isTG = isTMA('simple');
+
   return (
-    <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">
+    <div
-      {/* <BackButton /> */}
+      className={cn(
+        'sticky top-0 z-50 flex h-12 items-center rounded-b-lg bg-transparent font-bold tracking-wide backdrop-blur-md',
+        isTG ? 'px-4' : 'px-2',
+      )}
+    >
+      {!isTG && <BackButton />}
       {props.title}
     </div>
   );

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

@@ -21,10 +21,12 @@ export function useBackButton() {
   }, [onBackClick]);
 
   useEffect(() => {
-    if (isRootLevelPage(pathname)) {
+    if (backButton.isMounted()) {
-      backButton.hide();
+      if (isRootLevelPage(pathname)) {
-    } else {
+        backButton.hide();
-      backButton.show();
+      } else {
+        backButton.show();
+      }
     }
   }, [pathname]);
 }

apps/web/providers/empty.tsx

@@ -0,0 +1,5 @@
+import { type PropsWithChildren } from 'react';
+
+export function EmptyProvider({ children }: Readonly<PropsWithChildren>) {
+  return <>{children}</>;
+}