fix: improve friend wishlist navigation layout

This commit is contained in:
Vaka.pro
2026-04-26 23:44:06 +03:00
parent 17d59c3639
commit 14a57b19b7
3 changed files with 22 additions and 8 deletions

View File

@@ -45,20 +45,20 @@ export function Header() {
return ( return (
<header className="container-page pt-6"> <header className="container-page pt-6">
<div className="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-border bg-surface/80 px-4 py-3 backdrop-blur"> <div className="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]">
<Link to="/" className="flex items-center gap-2"> <Link to="/" className="flex min-w-0 items-center gap-2">
<span className="inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card"> <span className="inline-flex h-9 w-9 items-center justify-center rounded-md bg-primary text-primary-foreground shadow-card">
<Gift className="h-4 w-4" /> <Gift className="h-4 w-4" />
</span> </span>
<div> <div className="min-w-0">
<div className="font-display text-lg leading-tight">{t('app.name')}</div> <div className="font-display text-lg leading-tight">{t('app.name')}</div>
<div className="text-xs text-muted"> <div className="truncate text-xs text-muted">
{t('header.signedInAs', { name: user.displayName })} {t('header.signedInAs', { name: user.displayName })}
</div> </div>
</div> </div>
</Link> </Link>
<nav className="flex flex-wrap items-center gap-1"> <nav className="flex min-w-0 items-center gap-1 overflow-x-auto whitespace-nowrap lg:justify-center">
{links.map((l) => ( {links.map((l) => (
<NavLink <NavLink
key={l.to} key={l.to}
@@ -91,7 +91,7 @@ export function Header() {
)} )}
</nav> </nav>
<div className="flex items-center gap-1"> <div className="flex shrink-0 items-center gap-1 justify-self-start lg:justify-self-end">
<LanguageSwitcher /> <LanguageSwitcher />
<Button <Button
variant="ghost" variant="ghost"

View File

@@ -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!',

View File

@@ -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();
@@ -56,7 +59,16 @@ export function PublicProfilePage() {
return ( return (
<div className="flex min-h-screen flex-col"> <div className="flex min-h-screen flex-col">
<div className="container-page flex justify-end pt-6"> <div className="container-page flex items-center justify-between gap-3 pt-6">
{user ? (
<Link to="/">
<Button variant="secondary" size="sm">
{t('public.backToMine')}
</Button>
</Link>
) : (
<span />
)}
<LanguageSwitcher /> <LanguageSwitcher />
</div> </div>
<main className="container-page flex-1 py-10"> <main className="container-page flex-1 py-10">