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
2025-01-27 17:28:28 +03:00 · 2025-01-27 17:28:28 +03:00 · 427cc6b5d8
commit 427cc6b5d8
parent efa6d2138b
14 changed files with 102 additions and 31 deletions
--- 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">
+      <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="bg-background p-6 pt-0">
+        <div className="p-4 pt-0">
          <ContactsList />
        </div>
+      </Card>
    </ContactsFilterProvider>
  );
 }
--- 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>
+    </>
  );
 }
--- 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>
  );
--- 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>
--- a/apps/web/components/navigation/header/back-button.tsx
+++ 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>
+  );
+}
--- a/apps/web/components/navigation/header/index.tsx
+++ 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>
+  );
+}
--- a/apps/web/components/navigation/header/page-title.tsx
+++ 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>;
+}
--- a/apps/web/components/navigation/index.tsx
+++ b/apps/web/components/navigation/index.tsx
@ -1 +1,2 @@
+export * from './header';
 export * from './navbar';
--- a/apps/web/components/navigation/navbar/index.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="Записи" />
--- a/apps/web/components/navigation/navbar/nav-button.tsx
+++ b/apps/web/components/navigation/navbar/nav-button.tsx
--- 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>
+  );
+}
--- 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}
    />
--- 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%;
--- 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: {