Merge remote-tracking branch 'origin/main' into refactor/frontend-bem-classes
# Conflicts: # apps/frontend/src/components/Layout/Header.tsx # apps/frontend/src/pages/PublicProfilePage.tsx
This commit is contained in:
@@ -50,7 +50,7 @@ export function Header() {
|
|||||||
<span className="app-header__brand-mark">
|
<span className="app-header__brand-mark">
|
||||||
<Gift className="h-4 w-4" />
|
<Gift className="h-4 w-4" />
|
||||||
</span>
|
</span>
|
||||||
<div>
|
<div className="min-w-0">
|
||||||
<div className="app-header__brand-title">{t('app.name')}</div>
|
<div className="app-header__brand-title">{t('app.name')}</div>
|
||||||
<div className="app-header__brand-subtitle">
|
<div className="app-header__brand-subtitle">
|
||||||
{t('header.signedInAs', { name: user.displayName })}
|
{t('header.signedInAs', { name: user.displayName })}
|
||||||
|
|||||||
@@ -80,6 +80,7 @@ const translations = {
|
|||||||
'public.loadingWishes': 'Загрузка желаний...',
|
'public.loadingWishes': 'Загрузка желаний...',
|
||||||
'public.notFoundTitle': 'Профиль не найден',
|
'public.notFoundTitle': 'Профиль не найден',
|
||||||
'public.notFoundText': 'Проверьте ссылку и попробуйте ещё раз. Slug чувствителен к регистру.',
|
'public.notFoundText': 'Проверьте ссылку и попробуйте ещё раз. Slug чувствителен к регистру.',
|
||||||
|
'public.backToMine': 'Вернуться к моим желаниям',
|
||||||
'public.wishlistTitle': 'Список желаний {name}',
|
'public.wishlistTitle': 'Список желаний {name}',
|
||||||
'public.emptyTitle': 'Желаний пока нет',
|
'public.emptyTitle': 'Желаний пока нет',
|
||||||
'public.emptyText': 'Загляните позже!',
|
'public.emptyText': 'Загляните позже!',
|
||||||
@@ -196,6 +197,7 @@ const translations = {
|
|||||||
'public.loadingWishes': 'Loading wishes...',
|
'public.loadingWishes': 'Loading wishes...',
|
||||||
'public.notFoundTitle': 'Profile not found',
|
'public.notFoundTitle': 'Profile not found',
|
||||||
'public.notFoundText': 'Check the link and try again. Slugs are case-sensitive.',
|
'public.notFoundText': 'Check the link and try again. Slugs are case-sensitive.',
|
||||||
|
'public.backToMine': 'Back to my wishlist',
|
||||||
'public.wishlistTitle': "{name}'s wishlist",
|
'public.wishlistTitle': "{name}'s wishlist",
|
||||||
'public.emptyTitle': 'No wishes yet',
|
'public.emptyTitle': 'No wishes yet',
|
||||||
'public.emptyText': 'Check back later!',
|
'public.emptyText': 'Check back later!',
|
||||||
|
|||||||
@@ -1,5 +1,5 @@
|
|||||||
import { useEffect, useRef } from 'react';
|
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 { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
|
||||||
import type {
|
import type {
|
||||||
PublicProfile,
|
PublicProfile,
|
||||||
@@ -11,9 +11,12 @@ import { Footer } from '@/components/Layout/Footer';
|
|||||||
import { Gift } from 'lucide-react';
|
import { Gift } from 'lucide-react';
|
||||||
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
|
import { LanguageSwitcher } from '@/components/LanguageSwitcher';
|
||||||
import { useI18n } from '@/i18n/i18n';
|
import { useI18n } from '@/i18n/i18n';
|
||||||
|
import { useAuthStore } from '@/features/auth/authStore';
|
||||||
|
import { Button } from '@/components/ui/Button';
|
||||||
|
|
||||||
export function PublicProfilePage() {
|
export function PublicProfilePage() {
|
||||||
const { t } = useI18n();
|
const { t } = useI18n();
|
||||||
|
const user = useAuthStore((s) => s.user);
|
||||||
const { slug = '' } = useParams<{ slug: string }>();
|
const { slug = '' } = useParams<{ slug: string }>();
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
|
|
||||||
@@ -57,6 +60,15 @@ export function PublicProfilePage() {
|
|||||||
return (
|
return (
|
||||||
<div className="public-profile">
|
<div className="public-profile">
|
||||||
<div className="public-profile__toolbar">
|
<div className="public-profile__toolbar">
|
||||||
|
{user ? (
|
||||||
|
<Link to="/">
|
||||||
|
<Button variant="secondary" size="sm">
|
||||||
|
{t('public.backToMine')}
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
) : (
|
||||||
|
<span />
|
||||||
|
)}
|
||||||
<LanguageSwitcher />
|
<LanguageSwitcher />
|
||||||
</div>
|
</div>
|
||||||
<main className="public-profile__main">
|
<main className="public-profile__main">
|
||||||
|
|||||||
@@ -40,10 +40,10 @@
|
|||||||
@apply mx-auto w-full max-w-6xl px-4 pt-6 sm:px-6 lg:px-8;
|
@apply mx-auto w-full max-w-6xl px-4 pt-6 sm:px-6 lg:px-8;
|
||||||
}
|
}
|
||||||
.app-header__inner {
|
.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 {
|
.app-header__brand {
|
||||||
@apply flex items-center gap-2;
|
@apply flex min-w-0 items-center gap-2;
|
||||||
}
|
}
|
||||||
.app-header__brand-mark {
|
.app-header__brand-mark {
|
||||||
@apply inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card;
|
@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;
|
@apply font-display text-lg leading-tight;
|
||||||
}
|
}
|
||||||
.app-header__brand-subtitle {
|
.app-header__brand-subtitle {
|
||||||
@apply text-xs text-muted;
|
@apply truncate text-xs text-muted;
|
||||||
}
|
}
|
||||||
.app-header__nav {
|
.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 {
|
.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;
|
@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;
|
@apply bg-primary text-primary-foreground shadow-card hover:bg-primary;
|
||||||
}
|
}
|
||||||
.app-header__actions {
|
.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 {
|
.app-footer {
|
||||||
@@ -129,7 +129,7 @@
|
|||||||
@apply flex min-h-screen flex-col;
|
@apply flex min-h-screen flex-col;
|
||||||
}
|
}
|
||||||
.public-profile__toolbar {
|
.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 {
|
.public-profile__main {
|
||||||
@apply mx-auto w-full max-w-6xl flex-1 px-4 py-10 sm:px-6 lg:px-8;
|
@apply mx-auto w-full max-w-6xl flex-1 px-4 py-10 sm:px-6 lg:px-8;
|
||||||
|
|||||||
Reference in New Issue
Block a user