From 427cc6b5d8fed7c0667af39f17551239f50b7953 Mon Sep 17 00:00:00 2001
From: Vlad Chikalkin <djchikalkin@gmail.com>
Date: Mon, 27 Jan 2025 17:28:28 +0300
Subject: [PATCH] Feature/back button (#17)

* prepare for header back button: fix pages layout
add header with back button

* set header title

* optimize layout

* remove navigation context

* make profile photo bigger

* remove page-header from main pages

* fix profile layout

* profile: use ui/Card

* fix app background

* contacts: use ui/Card component
---
 apps/web/app/(main)/contacts/page.tsx         | 17 +++---
 apps/web/app/(main)/layout.tsx                |  4 +-
 .../app/(main)/profile/[telegramId]/page.tsx  |  8 +--
 apps/web/app/layout.tsx                       |  2 +-
 .../navigation/header/back-button.tsx         | 14 +++++
 .../components/navigation/header/index.tsx    | 14 +++++
 .../navigation/header/page-title.tsx          |  5 ++
 apps/web/components/navigation/index.tsx      |  1 +
 .../{navbar.tsx => navbar/index.tsx}          |  2 +-
 .../navigation/{ => navbar}/nav-button.tsx    |  0
 apps/web/components/profile/profile-card.tsx  | 61 ++++++++++++++-----
 packages/ui/src/components/ui/card.tsx        |  2 +-
 packages/ui/src/globals.css                   |  2 +
 packages/ui/tailwind.config.ts                |  1 +
 14 files changed, 102 insertions(+), 31 deletions(-)
 create mode 100644 apps/web/components/navigation/header/back-button.tsx
 create mode 100644 apps/web/components/navigation/header/index.tsx
 create mode 100644 apps/web/components/navigation/header/page-title.tsx
 rename apps/web/components/navigation/{navbar.tsx => navbar/index.tsx} (88%)
 rename apps/web/components/navigation/{ => navbar}/nav-button.tsx (100%)

diff --git a/apps/web/app/(main)/contacts/page.tsx b/apps/web/app/(main)/contacts/page.tsx
index 6dfce36..2bd43e6 100644
--- a/apps/web/app/(main)/contacts/page.tsx
+++ b/apps/web/app/(main)/contacts/page.tsx
@@ -1,17 +1,20 @@
 import { ContactsList } from '@/components/contacts/contacts-list';
 import { ContactsFilter } from '@/components/contacts/dropdown-filter';
 import { ContactsFilterProvider } from '@/context/contacts-filter';
+import { Card } from '@repo/ui/components/ui/card';
 
 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>
-        <ContactsFilter />
-      </div>
-      <div className="bg-background p-6 pt-0">
-        <ContactsList />
-      </div>
+      <Card>
+        <div className="flex flex-row items-center justify-between space-x-4 p-4">
+          <h1 className="text-2xl font-bold">Контакты</h1>
+          <ContactsFilter />
+        </div>
+        <div className="p-4 pt-0">
+          <ContactsList />
+        </div>
+      </Card>
     </ContactsFilterProvider>
   );
 }
diff --git a/apps/web/app/(main)/layout.tsx b/apps/web/app/(main)/layout.tsx
index 69fff63..b3c37f7 100644
--- a/apps/web/app/(main)/layout.tsx
+++ b/apps/web/app/(main)/layout.tsx
@@ -3,9 +3,9 @@ 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>
+    </>
   );
 }
diff --git a/apps/web/app/(main)/profile/[telegramId]/page.tsx b/apps/web/app/(main)/profile/[telegramId]/page.tsx
index c28c768..c94b1b4 100644
--- a/apps/web/app/(main)/profile/[telegramId]/page.tsx
+++ b/apps/web/app/(main)/profile/[telegramId]/page.tsx
@@ -1,12 +1,9 @@
 import { getProfile } from '@/actions/profile';
+import { PageHeader } from '@/components/navigation';
 import { ProfileCard } from '@/components/profile/profile-card';
 import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';
 
-type Props = {
-  params: Promise<{
-    telegramId: string;
-  }>;
-};
+type Props = { params: Promise<{ telegramId: string }> };
 
 export default async function ProfilePage(props: Readonly<Props>) {
   const parameters = await props.params;
@@ -21,6 +18,7 @@ export default async function ProfilePage(props: Readonly<Props>) {
 
   return (
     <HydrationBoundary state={dehydrate(queryClient)}>
+      <PageHeader title="Профиль контакта" />
       <ProfileCard telegramId={telegramId} />
     </HydrationBoundary>
   );
diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
index 49adbfd..6c91944 100644
--- a/apps/web/app/layout.tsx
+++ b/apps/web/app/layout.tsx
@@ -16,7 +16,7 @@ export default async function RootLayout({ children }: Readonly<PropsWithChildre
 
   return (
     <html lang={locale}>
-      <body className="bg-secondary">
+      <body className="bg-app-background">
         <I18nProvider>
           <ThemeProvider>
             <AuthProvider>
diff --git a/apps/web/components/navigation/header/back-button.tsx b/apps/web/components/navigation/header/back-button.tsx
new file mode 100644
index 0000000..6486c48
--- /dev/null
+++ b/apps/web/components/navigation/header/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>
+  );
+}
diff --git a/apps/web/components/navigation/header/index.tsx b/apps/web/components/navigation/header/index.tsx
new file mode 100644
index 0000000..1dbc698
--- /dev/null
+++ b/apps/web/components/navigation/header/index.tsx
@@ -0,0 +1,14 @@
+'use client';
+import { BackButton } from './back-button';
+import { PageTitle } from './page-title';
+
+type Props = { title: string | undefined };
+
+export function PageHeader(props: Readonly<Props>) {
+  return (
+    <div className="sticky top-0 z-50 flex items-center bg-background p-2">
+      <BackButton />
+      <PageTitle title={props.title} />
+    </div>
+  );
+}
diff --git a/apps/web/components/navigation/header/page-title.tsx b/apps/web/components/navigation/header/page-title.tsx
new file mode 100644
index 0000000..967c468
--- /dev/null
+++ b/apps/web/components/navigation/header/page-title.tsx
@@ -0,0 +1,5 @@
+type Props = { readonly title: string | undefined };
+
+export function PageTitle(props: Readonly<Props>) {
+  return <span className="h-8 text-lg font-bold tracking-wide">{props?.title}</span>;
+}
diff --git a/apps/web/components/navigation/index.tsx b/apps/web/components/navigation/index.tsx
index f5899d0..bb1137c 100644
--- a/apps/web/components/navigation/index.tsx
+++ b/apps/web/components/navigation/index.tsx
@@ -1 +1,2 @@
+export * from './header';
 export * from './navbar';
diff --git a/apps/web/components/navigation/navbar.tsx b/apps/web/components/navigation/navbar/index.tsx
similarity index 88%
rename from apps/web/components/navigation/navbar.tsx
rename to apps/web/components/navigation/navbar/index.tsx
index 3ef6747..997576e 100644
--- a/apps/web/components/navigation/navbar.tsx
+++ b/apps/web/components/navigation/navbar/index.tsx
@@ -3,7 +3,7 @@ import { BookOpen, Newspaper, PlusCircle, User, Users } from 'lucide-react';
 
 export function BottomNav() {
   return (
-    <nav className="sticky inset-x-0 bottom-0 border-t border-border bg-background">
+    <nav className="fixed inset-x-0 bottom-0 border-t border-border bg-background">
       <div className="grid grid-cols-5">
         <NavButton href="/dashboard" icon={<Newspaper />} label="Главное" />
         <NavButton href="/records" icon={<BookOpen />} label="Записи" />
diff --git a/apps/web/components/navigation/nav-button.tsx b/apps/web/components/navigation/navbar/nav-button.tsx
similarity index 100%
rename from apps/web/components/navigation/nav-button.tsx
rename to apps/web/components/navigation/navbar/nav-button.tsx
diff --git a/apps/web/components/profile/profile-card.tsx b/apps/web/components/profile/profile-card.tsx
index e2b8361..0d33969 100644
--- a/apps/web/components/profile/profile-card.tsx
+++ b/apps/web/components/profile/profile-card.tsx
@@ -5,32 +5,35 @@ 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 { Card } from '@repo/ui/components/ui/card';
 import { useQuery } from '@tanstack/react-query';
 import Link from 'next/link';
 
-type ProfileCardProps = {
+type ProfileProps = {
   readonly telegramId?: string;
 };
 
-export function ProfileCard({ telegramId }: ProfileCardProps) {
+export function ProfileCard(props: ProfileProps) {
+  return (
+    <div className="space-y-4">
+      <Person {...props} />
+      <ProfileFields {...props} />
+    </div>
+  );
+}
+
+export function ProfileFields({ telegramId }: ProfileProps) {
   const { data: customer } = useQuery({
     queryFn: () => getProfile({ telegramId }),
     queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
   });
 
-  if (!customer) return <div>Пользователь не найден</div>;
+  if (!customer) return null;
 
   return (
-    <Card>
-      <CardHeader className="flex flex-row items-center space-x-4 pb-2">
-        <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">
+    <Card className="p-4">
+      <div className="flex flex-col gap-4">
+        {telegramId ? false : <ProfileFieldsHeader />}
         {telegramId ? (
           false
         ) : (
@@ -74,7 +77,37 @@ export function ProfileCard({ telegramId }: ProfileCardProps) {
         ) : (
           false
         )}
-      </CardContent>
+      </div>
     </Card>
   );
 }
+
+function Person({ telegramId }: ProfileProps) {
+  const { data: customer } = useQuery({
+    queryFn: () => getProfile({ telegramId }),
+    queryKey: telegramId ? ['profile', 'telegramId', telegramId] : ['profile'],
+  });
+
+  if (!customer) return null;
+
+  return (
+    <Card className="p-4">
+      <div className="flex flex-col items-center space-y-2">
+        <Avatar className="size-20">
+          <AvatarImage alt={customer?.name} src={customer.photoUrl || ''} />
+          <AvatarFallback>{customer?.name.charAt(0)}</AvatarFallback>
+        </Avatar>
+        <h2 className="text-2xl font-bold">{customer?.name}</h2>
+      </div>
+    </Card>
+  );
+}
+
+function ProfileFieldsHeader() {
+  return (
+    <div className="flex flex-row justify-between">
+      <h1 className="text-lg font-bold text-muted-foreground">Ваши данные</h1>
+      <div />
+    </div>
+  );
+}
diff --git a/packages/ui/src/components/ui/card.tsx b/packages/ui/src/components/ui/card.tsx
index e5b0b1b..8bb58a8 100644
--- a/packages/ui/src/components/ui/card.tsx
+++ b/packages/ui/src/components/ui/card.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
   ({ className, ...props }, ref) => (
     <div
-      className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
+      className={cn('rounded-lg bg-card text-card-foreground shadow-sm', className)}
       ref={ref}
       {...props}
     />
diff --git a/packages/ui/src/globals.css b/packages/ui/src/globals.css
index be31070..f7c0d53 100644
--- a/packages/ui/src/globals.css
+++ b/packages/ui/src/globals.css
@@ -4,6 +4,7 @@
 
 @layer base {
   :root {
+    --app-background: 240 4.8% 95.9%;
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
     --card: 0 0% 100%;
@@ -32,6 +33,7 @@
   }
 
   .dark {
+    --app-background: 240 3.7% 7%;
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
     --card: 240 10% 3.9%;
diff --git a/packages/ui/tailwind.config.ts b/packages/ui/tailwind.config.ts
index 9821c34..7c11487 100644
--- a/packages/ui/tailwind.config.ts
+++ b/packages/ui/tailwind.config.ts
@@ -35,6 +35,7 @@ const config = {
           DEFAULT: 'hsl(var(--accent))',
           foreground: 'hsl(var(--accent-foreground))',
         },
+        'app-background': 'hsl(var(--app-background))',
         background: 'hsl(var(--background))',
         border: 'hsl(var(--border))',
         card: {