diff --git a/apps/frontend/src/components/Layout/Header.tsx b/apps/frontend/src/components/Layout/Header.tsx index e795d44..4bac00c 100644 --- a/apps/frontend/src/components/Layout/Header.tsx +++ b/apps/frontend/src/components/Layout/Header.tsx @@ -50,7 +50,7 @@ export function Header() { -
+
{t('app.name')}
{t('header.signedInAs', { name: user.displayName })} diff --git a/apps/frontend/src/i18n/i18n.tsx b/apps/frontend/src/i18n/i18n.tsx index 4d259f2..2b59f0c 100644 --- a/apps/frontend/src/i18n/i18n.tsx +++ b/apps/frontend/src/i18n/i18n.tsx @@ -80,6 +80,7 @@ const translations = { 'public.loadingWishes': 'Загрузка желаний...', 'public.notFoundTitle': 'Профиль не найден', 'public.notFoundText': 'Проверьте ссылку и попробуйте ещё раз. Slug чувствителен к регистру.', + 'public.backToMine': 'Вернуться к моим желаниям', 'public.wishlistTitle': 'Список желаний {name}', 'public.emptyTitle': 'Желаний пока нет', 'public.emptyText': 'Загляните позже!', @@ -196,6 +197,7 @@ const translations = { 'public.loadingWishes': 'Loading wishes...', 'public.notFoundTitle': 'Profile not found', 'public.notFoundText': 'Check the link and try again. Slugs are case-sensitive.', + 'public.backToMine': 'Back to my wishlist', 'public.wishlistTitle': "{name}'s wishlist", 'public.emptyTitle': 'No wishes yet', 'public.emptyText': 'Check back later!', diff --git a/apps/frontend/src/pages/PublicProfilePage.tsx b/apps/frontend/src/pages/PublicProfilePage.tsx index 4f59d4c..25d4d1a 100644 --- a/apps/frontend/src/pages/PublicProfilePage.tsx +++ b/apps/frontend/src/pages/PublicProfilePage.tsx @@ -1,5 +1,5 @@ import { useEffect, useRef } from 'react'; -import { useParams } from 'react-router-dom'; +import { Link, useParams } from 'react-router-dom'; import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; import type { PublicProfile, @@ -11,9 +11,12 @@ import { Footer } from '@/components/Layout/Footer'; import { Gift } from 'lucide-react'; import { LanguageSwitcher } from '@/components/LanguageSwitcher'; import { useI18n } from '@/i18n/i18n'; +import { useAuthStore } from '@/features/auth/authStore'; +import { Button } from '@/components/ui/Button'; export function PublicProfilePage() { const { t } = useI18n(); + const user = useAuthStore((s) => s.user); const { slug = '' } = useParams<{ slug: string }>(); const queryClient = useQueryClient(); @@ -57,6 +60,15 @@ export function PublicProfilePage() { return (
+ {user ? ( + + + + ) : ( + + )}
diff --git a/apps/frontend/src/styles/global.css b/apps/frontend/src/styles/global.css index da77a67..387c403 100644 --- a/apps/frontend/src/styles/global.css +++ b/apps/frontend/src/styles/global.css @@ -40,10 +40,10 @@ @apply mx-auto w-full max-w-6xl px-4 pt-6 sm:px-6 lg:px-8; } .app-header__inner { - @apply flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur; + @apply grid grid-cols-1 items-center gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur lg:grid-cols-[auto_minmax(0,1fr)_auto]; } .app-header__brand { - @apply flex items-center gap-2; + @apply flex min-w-0 items-center gap-2; } .app-header__brand-mark { @apply inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card; @@ -52,10 +52,10 @@ @apply font-display text-lg leading-tight; } .app-header__brand-subtitle { - @apply text-xs text-muted; + @apply truncate text-xs text-muted; } .app-header__nav { - @apply flex flex-wrap items-center gap-1; + @apply flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap lg:justify-center; } .app-header__nav-link { @apply inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium text-ink transition-colors hover:bg-ink/5; @@ -64,7 +64,7 @@ @apply bg-primary text-primary-foreground shadow-card hover:bg-primary; } .app-header__actions { - @apply flex items-center gap-1; + @apply flex shrink-0 items-center gap-1 justify-self-start lg:justify-self-end; } .app-footer { @@ -129,7 +129,7 @@ @apply flex min-h-screen flex-col; } .public-profile__toolbar { - @apply mx-auto flex w-full max-w-6xl justify-end px-4 pt-6 sm:px-6 lg:px-8; + @apply mx-auto flex w-full max-w-6xl items-center justify-between gap-3 px-4 pt-6 sm:px-6 lg:px-8; } .public-profile__main { @apply mx-auto w-full max-w-6xl flex-1 px-4 py-10 sm:px-6 lg:px-8;