prepare for header back button: fix pages layout

add header with back button

apps/web/app/(main)/contacts/page.tsx

@@ -5,11 +5,11 @@ import { ContactsFilterProvider } from '@/context/contacts-filter';
 export default function ContactsPage() {
   return (
     <ContactsFilterProvider>
-      <div className="sticky top-0 z-50 flex flex-row items-center justify-between space-x-4 bg-background p-6 pb-2">
-        <h1 className="text-2xl font-bold">Контакты</h1>
+      <div className="sticky top-0 z-50 flex flex-row items-center justify-between space-x-4 bg-background p-4">
+        <div />
         <ContactsFilter />
       </div>
-      <div className="bg-background p-6 pt-0">
+      <div className="bg-background p-4 pt-0">
         <ContactsList />
       </div>
     </ContactsFilterProvider>

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

@@ -1,11 +1,14 @@
-import { BottomNav } from '@/components/navigation';
+import { BottomNav, PageHeader } from '@/components/navigation';
 import { type PropsWithChildren } from 'react';
 
 export default async function Layout({ children }: Readonly<PropsWithChildren>) {
   return (
-    <div className="mx-auto flex h-screen flex-col justify-between">
-      <main>{children}</main>
-      <BottomNav />
-    </div>
+    <>
+      <PageHeader />
+      <div className="mx-auto flex h-screen flex-col justify-between">
+        <main>{children}</main>
+        <BottomNav />
+      </div>
+    </>
   );
 }

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

@@ -0,0 +1,14 @@
+'use client';
+import { ArrowLeft } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+
+export function BackButton() {
+  const router = useRouter();
+
+  return (
+    <div className="m-2 cursor-pointer">
+      <ArrowLeft className="size-5" onClick={() => router.back()} />
+      <span className="sr-only">Назад</span>
+    </div>
+  );
+}

apps/web/components/navigation/header.tsx

@@ -0,0 +1,14 @@
+import { BackButton } from './back-button';
+
+type Props = {
+  title: string;
+};
+
+export function PageHeader(props: Readonly<Props>) {
+  return (
+    <div className="sticky top-0 z-50 flex items-center bg-background p-2">
+      <BackButton />
+      <span className="h-8 text-lg font-bold tracking-wide">{props.title || 'Page name'}</span>
+    </div>
+  );
+}

apps/web/components/navigation/index.tsx

@@ -1 +1,2 @@
+export * from './header';
 export * from './navbar';

apps/web/components/profile/profile-card.tsx

@@ -5,7 +5,6 @@ import { CheckboxWithText } from '@/components/profile/checkbox-with-text';
 import { ProfileField } from '@/components/profile/profile-field';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
 import { Button } from '@repo/ui/components/ui/button';
-import { Card, CardContent, CardHeader } from '@repo/ui/components/ui/card';
 import { useQuery } from '@tanstack/react-query';
 import Link from 'next/link';
 
@@ -22,15 +21,15 @@ export function ProfileCard({ telegramId }: ProfileCardProps) {
   if (!customer) return <div>Пользователь не найден</div>;
 
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center space-x-4 pb-2">
+    <div className="space-y-4 bg-background p-4">
+      <div className="flex flex-row items-center space-x-4">
         <Avatar className="size-12">
           <AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
           <AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
         </Avatar>
         <h2 className="text-2xl font-bold">{customer?.name}</h2>
-      </CardHeader>
-      <CardContent className="space-y-4">
+      </div>
+      <div className="flex flex-col gap-4">
         {telegramId ? (
           false
         ) : (
@@ -74,7 +73,7 @@ export function ProfileCard({ telegramId }: ProfileCardProps) {
         ) : (
           false
         )}
-      </CardContent>
-    </Card>
+      </div>
+    </div>
   );
 }