HeagBoKaT/cats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI: modern editorial redesign — stone palette, blue-purple gradient, clean typography

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 13:19:05 +03:00
parent cfc6001d62
commit 7fa7394739
13 changed files with 402 additions and 536 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
client/src/components/CatCard.tsx
View File

@@ -4,7 +4,7 @@ import { useAuth } from '@/hooks/useAuth';
import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes'; import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
import { useToast } from '@/components/Toast'; import { useToast } from '@/components/Toast';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Heart, MessageCircle } from 'lucide-react'; import { Heart } from 'lucide-react';
interface CatCardProps { interface CatCardProps {
cat: Cat; cat: Cat;
@@ -23,14 +23,12 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
const toggleLike = async () => { const toggleLike = async () => {
if (isOwner || !user) return; if (isOwner || !user) return;
if (liked) { if (liked) {
setLiked(false); setLiked(false); setLikeCount((c) => c - 1);
setLikeCount((c) => c - 1);
try { await unlikeMutation.mutateAsync(); } try { await unlikeMutation.mutateAsync(); }
catch { setLiked(true); setLikeCount((c) => c + 1); } catch { setLiked(true); setLikeCount((c) => c + 1); }
} else { } else {
setLiked(true); setLiked(true); setLikeCount((c) => c + 1);
setLikeCount((c) => c + 1); toast('❤️');
toast('Нравится ❤️');
try { await likeMutation.mutateAsync(); } try { await likeMutation.mutateAsync(); }
catch { setLiked(false); setLikeCount((c) => c - 1); } catch { setLiked(false); setLikeCount((c) => c - 1); }
} }
@@ -41,28 +39,24 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
}); });
return ( return (
<article className="animate-fade-in-up mb-4 last:mb-0"> <article className="animate-rise mb-4 last:mb-0">
<div className="card overflow-hidden"> <div className="card border overflow-hidden">
<div <div
className="flex items-center justify-between px-4 py-3 cursor-pointer group" className="flex items-center gap-3 px-4 pt-4 pb-2 cursor-pointer"
onClick={() => onOpen(cat.id)} onClick={() => onOpen(cat.id)}
> >
<div className="flex items-center gap-3"> <Avatar className="h-9 w-9 border">
<Avatar className="h-10 w-10 ring-1 ring-[var(--border)]"> <AvatarFallback className="text-xs avatar">
<AvatarFallback className="text-sm avatar-initials">
{cat.username.charAt(0).toUpperCase()} {cat.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<h3 className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors"> <h3 className="text-sm font-semibold">@{cat.username}</h3>
@{cat.username}
</h3>
<time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time> <time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time>
</div> </div>
</div> </div>
</div>
<figure className="cursor-pointer bg-[var(--secondary)] img-shimmer" onClick={() => onOpen(cat.id)}> <figure className="cursor-pointer bg-[var(--secondary)]" onClick={() => onOpen(cat.id)}>
<img <img
src={cat.image_url} src={cat.image_url}
alt={cat.caption || 'Фото кота'} alt={cat.caption || 'Фото кота'}
@@ -73,8 +67,8 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
</figure> </figure>
{cat.caption && ( {cat.caption && (
<div className="px-4 pt-3 pb-0.5 cursor-pointer" onClick={() => onOpen(cat.id)}> <div className="px-4 pt-3 pb-1 cursor-pointer" onClick={() => onOpen(cat.id)}>
<p className="text-[15px] leading-[1.4]"> <p className="text-sm leading-[1.45]">
<span className="font-semibold mr-1.5">@{cat.username}</span> <span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption} {cat.caption}
</p> </p>
@@ -82,11 +76,11 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
)} )}
<div className="flex items-center justify-between px-4 py-3"> <div className="flex items-center justify-between px-4 py-3">
<div className="flex items-center gap-5"> <div className="flex items-center gap-4">
<button <button
onClick={toggleLike} onClick={toggleLike}
disabled={isOwner || !user} disabled={isOwner || !user}
className={`btn-icon flex items-center gap-1.5 text-[14px] font-medium ${ className={`flex items-center gap-1.5 text-sm font-medium transition-all ${
isOwner isOwner
? 'text-[var(--fg-tertiary)] cursor-not-allowed' ? 'text-[var(--fg-tertiary)] cursor-not-allowed'
: liked : liked
@@ -94,22 +88,25 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
: 'text-[var(--fg-secondary)] hover:text-[var(--fg)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
}`} }`}
> >
<Heart className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`} /> <Heart
{likeCount > 0 && <span className="tabular-nums">{likeCount}</span>} className={`h-[18px] w-[18px] transition-all ${
liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-pop' : 'stroke-[1.5]'
}`}
/>
{likeCount > 0 && <span className="tabular-nums text-xs">{likeCount}</span>}
</button> </button>
<button <button
onClick={() => onOpen(cat.id)} onClick={() => onOpen(cat.id)}
className="btn-icon flex items-center gap-1.5 text-[14px] font-medium text-[var(--fg-secondary)] hover:text-[var(--fg)]" className="flex items-center gap-1 text-sm font-medium text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors"
> >
<MessageCircle className="h-5 w-5 stroke-[1.5]" /> <span className="text-base leading-none">💬</span>
<span className="hidden sm:inline text-[13px]">Комментарии</span>
</button> </button>
</div> </div>
<span className="flex items-center gap-1 text-[12px] text-[var(--fg-tertiary)]"> <span className="flex items-center gap-1 text-xs text-[var(--fg-tertiary)]">
<span>🏆</span> <span>🏆</span>
<span className="font-medium">{cat.user_points}</span> <span className="font-medium text-[var(--fg-secondary)]">{cat.user_points}</span>
</span> </span>
</div> </div>
</div> </div>

47
client/src/components/CatModal.tsx
View File

@@ -28,9 +28,9 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]); useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]);
useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, []); useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, []);
useEffect(() => { useEffect(() => {
const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); }; const h = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
window.addEventListener('keydown', handler); window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', handler); return () => window.removeEventListener('keydown', h);
}, [onClose]); }, [onClose]);
const cat = data?.cat; const cat = data?.cat;
@@ -44,7 +44,7 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
catch { setLiked(true); setLikeCount((c) => c + 1); } catch { setLiked(true); setLikeCount((c) => c + 1); }
} else { } else {
setLiked(true); setLikeCount((c) => c + 1); setLiked(true); setLikeCount((c) => c + 1);
toast('Нравится ❤️'); toast('❤️');
try { await likeMutation.mutateAsync(); refetchLike(); } try { await likeMutation.mutateAsync(); refetchLike(); }
catch { setLiked(false); setLikeCount((c) => c - 1); } catch { setLiked(false); setLikeCount((c) => c - 1); }
} }
@@ -52,19 +52,16 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
const handleDelete = async () => { const handleDelete = async () => {
if (!isOwner || !cat) return; if (!isOwner || !cat) return;
try { try { await deleteMutation.mutateAsync(cat.id); toast('Удалено'); onClose(); }
await deleteMutation.mutateAsync(cat.id); catch { toast('Ошибка удаления', 'error'); }
toast('Удалено');
onClose();
} catch { toast('Ошибка удаления', 'error'); }
}; };
if (isLoading || !cat) { if (isLoading || !cat) {
return ( return (
<div className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center" onClick={onClose}> <div className="fixed inset-0 z-[60] bg-black/40 flex items-center justify-center" onClick={onClose}>
<div className="flex items-center gap-3 px-6 py-4 bg-white rounded-full shadow-lg animate-scale-in"> <div className="flex items-center gap-3 px-6 py-4 bg-white rounded-full shadow-lg animate-scale-in">
<div className="h-5 w-5 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" /> <div className="h-5 w-5 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" />
<span className="text-[14px] font-medium text-[var(--fg-secondary)]">Загрузка...</span> <span className="text-sm font-medium text-[var(--fg-secondary)]">Загрузка...</span>
</div> </div>
</div> </div>
); );
@@ -75,18 +72,18 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
}); });
return ( return (
<div className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center" onClick={onClose}> <div className="fixed inset-0 z-[60] bg-black/40 flex items-end sm:items-center justify-center" onClick={onClose}>
<div <div
className="w-full sm:max-w-xl bg-white sm:rounded-2xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-scale-in" className="w-full sm:max-w-xl bg-white sm:rounded-xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
<div className="flex items-center justify-between px-5 py-4 border-b shrink-0"> <div className="flex items-center justify-between px-5 py-4 border-b shrink-0">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Avatar className="h-9 w-9"> <Avatar className="h-9 w-9 border">
<AvatarFallback className="text-sm avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-sm avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<span className="text-[15px] font-semibold">@{cat.username}</span> <span className="text-sm font-semibold">@{cat.username}</span>
<p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p> <p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p>
</div> </div>
</div> </div>
@@ -118,11 +115,11 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-3"> <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Avatar className="h-8 w-8 shrink-0 mt-0.5"> <Avatar className="h-8 w-8 shrink-0 mt-0.5 border">
<AvatarFallback className="text-[10px] avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-[10px] avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<p className="text-[15px] leading-[1.4]"> <p className="text-sm leading-[1.45]">
<span className="font-semibold mr-1.5">@{cat.username}</span> <span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption || 'Без подписи'} {cat.caption || 'Без подписи'}
</p> </p>
@@ -135,18 +132,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
<button <button
onClick={toggleLike} onClick={toggleLike}
disabled={isOwner || !user} disabled={isOwner || !user}
className={`btn-icon flex items-center gap-1.5 text-[15px] font-medium ${ className={`flex items-center gap-1.5 text-sm font-medium transition-all ${
isOwner isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-[var(--danger)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
? 'text-[var(--fg-tertiary)] cursor-not-allowed'
: liked
? 'text-[var(--danger)]'
: 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
}`} }`}
> >
<Heart className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`} /> <Heart className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-pop' : 'stroke-[1.5]'}`} />
{likeCount > 0 && <span className="tabular-nums">{likeCount}</span>} {likeCount > 0 && <span className="tabular-nums">{likeCount}</span>}
</button> </button>
<span className="flex items-center gap-1.5 text-[13px] text-[var(--fg-secondary)]"> <span className="flex items-center gap-1.5 text-xs text-[var(--fg-secondary)]">
<span>🏆</span> <span>🏆</span>
<span className="font-semibold">{cat.user_points}</span> <span className="font-semibold">{cat.user_points}</span>
<span className="text-[var(--fg-tertiary)]">баллов</span> <span className="text-[var(--fg-tertiary)]">баллов</span>

47
client/src/components/FeedSidebar.tsx
View File

@@ -2,14 +2,9 @@ import { useAuth } from '@/hooks/useAuth';
import { useCats } from '@/hooks/useCats'; import { useCats } from '@/hooks/useCats';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { Trophy, Sparkles } from 'lucide-react';
function MedalBadge({ rank }: { rank: number }) { function Medal({ rank }: { rank: number }) {
const colors = [ const colors = ['bg-blue-100 text-blue-700', 'bg-stone-100 text-stone-500', 'bg-amber-100 text-amber-700'];
'bg-amber-100 text-amber-600 shadow-[0_0_0_1px_rgba(217,119,6,0.15)]',
'bg-gray-100 text-gray-500 shadow-[0_0_0_1px_rgba(107,114,128,0.15)]',
'bg-orange-100 text-orange-600 shadow-[0_0_0_1px_rgba(234,88,12,0.15)]',
];
return ( return (
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold ${colors[rank] || 'text-[var(--fg-tertiary)]'}`}> <span className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold ${colors[rank] || 'text-[var(--fg-tertiary)]'}`}>
{rank + 1} {rank + 1}
@@ -36,49 +31,43 @@ export default function FeedSidebar() {
return ( return (
<div className="space-y-5"> <div className="space-y-5">
{user && ( {user && (
<Link to="/profile" className="card flex items-center gap-3 p-3 hover:shadow-md transition-all group"> <Link to="/profile" className="card border p-3.5 flex items-center gap-3 transition-all hover:shadow-md group">
<Avatar className="h-11 w-11 ring-1 ring-[var(--border)]"> <Avatar className="h-11 w-11 border">
<AvatarFallback className="text-sm font-semibold avatar-initials"> <AvatarFallback className="text-sm font-semibold avatar">
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-[14px] font-semibold truncate group-hover:text-[var(--primary)] transition-colors">{user.username}</p> <p className="text-sm font-semibold truncate group-hover:text-[var(--primary)] transition-colors">{user.username}</p>
<p className="text-[12px] text-[var(--fg-secondary)]">🏆 {user.points} баллов</p> <p className="text-xs text-[var(--fg-secondary)]">🏆 {user.points} баллов</p>
</div> </div>
</Link> </Link>
)} )}
<div className="card p-4"> <div className="card border p-4">
<div className="flex items-center gap-2 mb-4"> <h3 className="text-xs font-bold text-[var(--fg-secondary)] mb-4 flex items-center gap-1.5">
<Trophy className="h-4 w-4 text-amber-500" strokeWidth={1.5} /> <span>🏆</span> Лидеры
<h3 className="text-[11px] font-bold text-[var(--fg-secondary)] uppercase tracking-[0.08em]">Лидеры</h3> </h3>
</div>
{topUsers.length === 0 ? ( {topUsers.length === 0 ? (
<p className="text-[13px] text-[var(--fg-tertiary)] text-center py-4">Пока нет пользователей</p> <p className="text-xs text-[var(--fg-tertiary)] text-center py-4">Пока нет пользователей</p>
) : ( ) : (
<div className="space-y-2.5"> <div className="space-y-2.5">
{topUsers.map(([id, u], i) => ( {topUsers.map(([id, u], i) => (
<Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group"> <Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group">
<MedalBadge rank={i} /> <Medal rank={i} />
<Avatar className="h-8 w-8"> <Avatar className="h-7 w-7">
<AvatarFallback className="text-[10px] avatar-initials">{u.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-[9px] avatar">{u.username.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar> </Avatar>
<span className="text-[14px] flex-1 truncate font-medium group-hover:text-[var(--primary)] transition-colors">{u.username}</span> <span className="text-sm flex-1 truncate font-medium group-hover:text-[var(--primary)] transition-colors">{u.username}</span>
<span className="text-[12px] font-semibold text-[var(--fg-secondary)] tabular-nums">{u.points}</span> <span className="text-xs font-semibold text-[var(--fg-secondary)] tabular-nums">{u.points}</span>
</Link> </Link>
))} ))}
</div> </div>
)} )}
</div> </div>
<div className="px-1 text-[11px] text-[var(--fg-tertiary)]"> <p className="px-1 text-[11px] text-[var(--fg-tertiary)]">Catstagram · сообщество котоводов</p>
<div className="flex items-center gap-1.5">
<Sparkles className="h-3 w-3" strokeWidth={1.5} />
<span>Catstagram · Сообщество котоводов</span>
</div>
</div>
</div> </div>
); );
} }

24
client/src/components/Navbar.tsx
View File

@@ -10,25 +10,25 @@ export default function Navbar() {
if (!user) return null; if (!user) return null;
return ( return (
<nav className="sticky top-0 z-50 bg-[var(--surface)]/80 backdrop-blur-xl border-b"> <nav className="sticky top-0 z-50 glass">
<div className="mx-auto flex h-14 max-w-[660px] items-center justify-between px-4"> <div className="mx-auto flex h-14 max-w-[660px] items-center justify-between px-4">
<Link to="/feed" className="text-[19px] font-bold gradient-text tracking-tight"> <Link to="/feed" className="text-lg font-bold text-gradient tracking-tight">
Catstagram Catstagram
</Link> </Link>
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-1">
<NavLink to="/feed" active={location.pathname === '/feed'} emoji="🏠" label="Лента" /> <NavLink to="/feed" active={location.pathname === '/feed'} emoji="🏠" label="Лента" />
<NavLink to="/upload" active={location.pathname === '/upload'} emoji="➕" label="Добавить" short /> <NavLink to="/upload" active={location.pathname === '/upload'} emoji="📷" label="Добавить" />
<Link to="/profile" className="ml-2 relative"> <Link to="/profile" className="ml-2 relative">
<Avatar className="h-8 w-8 ring-1 ring-[var(--border)] hover:ring-[var(--primary)] transition-all"> <Avatar className="h-8 w-8 border hover:border-[var(--primary)] transition-all">
<AvatarFallback className="text-[11px] avatar-initials"> <AvatarFallback className="text-[11px] avatar">
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
{user.is_admin && ( {user.is_admin && (
<span className="absolute -top-1 -right-1 h-3.5 w-3.5 rounded-full bg-[var(--primary)] flex items-center justify-center"> <span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-[var(--primary)] flex items-center justify-center shadow-sm">
<Shield className="h-2 w-2 text-white" strokeWidth={3} /> <Shield className="h-2.5 w-2.5 text-white" strokeWidth={3} />
</span> </span>
)} )}
</Link> </Link>
@@ -38,18 +38,18 @@ export default function Navbar() {
); );
} }
function NavLink({ to, active, emoji, label, short }: { to: string; active: boolean; emoji: string; label: string; short?: boolean }) { function NavLink({ to, active, emoji, label }: { to: string; active: boolean; emoji: string; label: string }) {
return ( return (
<Link <Link
to={to} to={to}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-full text-[13px] font-medium transition-all ${ className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${
active active
? 'bg-[var(--primary-soft)] text-[var(--primary)]' ? 'bg-[var(--primary-soft)] text-[var(--primary)]'
: 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]'
}`} }`}
> >
<span className="text-[15px] leading-none">{emoji}</span> <span className="text-base leading-none">{emoji}</span>
{(!short || true) && <span className={short ? 'hidden sm:inline' : ''}>{label}</span>} <span className="hidden sm:inline">{label}</span>
</Link> </Link>
); );
} }

10
client/src/components/Toast.tsx
View File

@@ -1,9 +1,7 @@
import { createContext, useContext, useState, useCallback, ReactNode } from 'react'; import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
type ToastType = 'success' | 'error'; type ToastType = 'success' | 'error';
interface ToastItem { id: number; message: string; type: ToastType; } interface ToastItem { id: number; message: string; type: ToastType; }
interface ToastContextType { toast: (message: string, type?: ToastType) => void; } interface ToastContextType { toast: (message: string, type?: ToastType) => void; }
const ToastContext = createContext<ToastContextType>(null!); const ToastContext = createContext<ToastContextType>(null!);
@@ -15,7 +13,7 @@ export function ToastProvider({ children }: { children: ReactNode }) {
const addToast = useCallback((message: string, type: ToastType = 'success') => { const addToast = useCallback((message: string, type: ToastType = 'success') => {
const id = nextId++; const id = nextId++;
setToasts((prev) => [...prev, { id, message, type }]); setToasts((prev) => [...prev, { id, message, type }]);
setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 2000); setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 1800);
}, []); }, []);
return ( return (
@@ -25,11 +23,11 @@ export function ToastProvider({ children }: { children: ReactNode }) {
{toasts.map((t) => ( {toasts.map((t) => (
<div <div
key={t.id} key={t.id}
className="animate-toast-in rounded-full px-5 py-2.5 text-[14px] font-medium shadow-lg pointer-events-auto" className="animate-toast-in rounded-full px-5 py-2.5 text-sm font-medium shadow-lg pointer-events-auto"
style={{ style={{
background: t.type === 'error' background: t.type === 'error'
? 'linear-gradient(135deg, #ff3b30, #ff6b6b)' ? 'linear-gradient(135deg, #dc2626, #f87171)'
: 'linear-gradient(135deg, #007aff, #5856d6)', : 'linear-gradient(135deg, #2563eb, #7c3aed)',
color: 'white', color: 'white',
}} }}
> >

165
client/src/index.css
View File

@@ -2,27 +2,29 @@
@plugin "tailwindcss-animate"; @plugin "tailwindcss-animate";
:root { :root {
--bg: #f2f2f7; --bg: #fafaf9;
--surface: #ffffff; --surface: #ffffff;
--surface-hover: #f8f8fa; --surface-hover: #f5f5f4;
--fg: #1c1c1e; --fg: #0c0c0c;
--fg-secondary: #8a8a8e; --fg-secondary: #737373;
--fg-tertiary: #aeaeb2; --fg-tertiary: #a3a3a3;
--primary: #007aff; --primary: #2563eb;
--primary-hover: #0056cc; --primary-hover: #1d4ed8;
--primary-light: #e8f2ff; --primary-light: #eff6ff;
--primary-soft: rgba(0, 122, 255, 0.08); --primary-soft: rgba(37, 99, 235, 0.06);
--secondary: #f2f2f5; --secondary: #f5f5f4;
--border: #e5e5ea; --border: #e7e5e4;
--danger: #ff3b30; --border-light: #f0efed;
--danger-hover: #d6342b; --danger: #dc2626;
--danger-light: #ffe8e6; --danger-hover: #b91c1c;
--success: #34c759; --danger-light: #fef2f2;
--success-light: #e8f8ed; --success: #16a34a;
--success-light: #f0fdf4;
--radius: 10px;
--radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.06); --shadow-md: 0 4px 16px rgba(0,0,0,0.06);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.08); --shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
--shadow-card: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.02);
} }
* { border-color: var(--border); } * { border-color: var(--border); }
@@ -30,76 +32,74 @@
body { body {
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
"Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
line-height: 1.5; line-height: 1.5;
letter-spacing: -0.01em; letter-spacing: -0.015em;
} }
::selection { background: var(--primary); color: white; }
/* ── Animations ── */ /* ── Animations ── */
@keyframes fade-in-up { @keyframes rise {
from { opacity: 0; transform: translateY(8px); } from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
@keyframes scale-in { @keyframes scale-in {
from { opacity: 0; transform: scale(0.96); } from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); } to { opacity: 1; transform: scale(1); }
} }
@keyframes heart-bounce { @keyframes pop {
0% { transform: scale(1); } 0% { transform: scale(1); }
25% { transform: scale(1.35); } 40% { transform: scale(1.3); }
50% { transform: scale(0.9); }
75% { transform: scale(1.1); }
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
@keyframes toast-in { @keyframes toast-in {
from { opacity: 0; transform: translateY(16px) scale(0.95); } from { opacity: 0; transform: translateY(12px) scale(0.95); }
to { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 1; transform: translateY(0) scale(1); }
} }
@keyframes skeleton-pulse { @keyframes skeleton {
0% { opacity: 0.6; } 0% { opacity: 0.5; }
50% { opacity: 1; } 50% { opacity: 1; }
100% { opacity: 0.6; } 100% { opacity: 0.5; }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-4px); }
} }
.animate-fade-in-up { animation: fade-in-up 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .animate-rise { animation: rise 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-scale-in { animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .animate-scale-in { animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-heart { animation: heart-bounce 0.4s cubic-bezier(0.16, 1, 0.3, 1); } .animate-pop { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-toast-in { animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .animate-toast-in { animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-skeleton { animation: skeleton-pulse 1.5s ease-in-out infinite; } .animate-skeleton { animation: skeleton 1.5s ease-in-out infinite; }
.animate-float { animation: float 3s ease-in-out infinite; }
/* ── Card ── */ /* ── Card ── */
.card { .card {
background: var(--surface); background: var(--surface);
border-radius: 16px; border-radius: var(--radius-lg);
box-shadow: var(--shadow-card); box-shadow: var(--shadow-sm);
border: 1px solid var(--border);
transition: box-shadow 0.2s, transform 0.15s; transition: box-shadow 0.2s, transform 0.15s;
} }
.card-hover:hover {
box-shadow: var(--shadow-md);
transform: translateY(-1px);
}
/* ── Avatar ── */ /* ── Avatar ── */
.avatar-initials { .avatar {
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 600; font-weight: 600;
color: white; color: white;
background: linear-gradient(135deg, var(--primary), #5856d6); background: var(--primary);
user-select: none; user-select: none;
} }
/* ── Buttons ── */ /* ── Button Icon ── */
.btn-icon { .btn-icon {
display: inline-flex; display: inline-flex;
@@ -110,22 +110,53 @@ body {
cursor: pointer; cursor: pointer;
border: none; border: none;
} }
.btn-icon:active { transform: scale(0.9); } .btn-icon:active { transform: scale(0.88); }
.link-accent { /* ── Tags ── */
color: var(--primary);
.tag {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.125rem 0.625rem;
border-radius: 9999px;
font-size: 0.6875rem;
font-weight: 600; font-weight: 600;
transition: opacity 0.15s;
} }
.link-accent:hover { opacity: 0.8; text-decoration: underline; }
/* ── Utilities ── */ /* ── Gradient text ── */
.text-gradient {
background: linear-gradient(135deg, #2563eb, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Focus ── */
.focus-ring {
transition: border-color 0.15s, box-shadow 0.15s;
}
.focus-ring:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px var(--primary-soft);
outline: none;
}
/* ── Utility ── */
.text-secondary { color: var(--fg-secondary); } .text-secondary { color: var(--fg-secondary); }
.text-tertiary { color: var(--fg-tertiary); } .text-tertiary { color: var(--fg-tertiary); }
.scrollbar-none::-webkit-scrollbar { display: none; } /* ── Glass nav ── */
.scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
.glass {
background: rgba(255,255,255,0.72);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(231,229,228,0.5);
}
/* ── Image shimmer ── */ /* ── Image shimmer ── */
@@ -137,26 +168,6 @@ body {
content: ''; content: '';
position: absolute; position: absolute;
inset: 0; inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
animation: skeleton-pulse 1.5s ease-in-out infinite; animation: skeleton 1.5s ease-in-out infinite;
}
/* ── Gradient text ── */
.gradient-text {
background: linear-gradient(135deg, #007aff, #5856d6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Focus ring ── */
.input-focus {
transition: border-color 0.15s, box-shadow 0.15s;
}
.input-focus:focus {
border-color: var(--primary);
box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.15);
outline: none;
} }

131
client/src/pages/AdminPage.tsx
View File

@@ -8,15 +8,12 @@ import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { ArrowLeft, Trash2, Shield, Edit3, Save, X, Search } from 'lucide-react'; import { ArrowLeft, Trash2, Shield, Edit3, Save, X, Search } from 'lucide-react';
import { useToast } from '@/components/Toast'; import { useToast } from '@/components/Toast';
type Tab = 'users' | 'cats';
export default function AdminPage() { export default function AdminPage() {
const { user } = useAuth(); const { user } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const { toast } = useToast(); const { toast } = useToast();
const qc = useQueryClient(); const qc = useQueryClient();
const [tab, setTab] = useState<Tab>('users'); const [tab, setTab] = useState<'users' | 'cats'>('users');
const [searchUser, setSearchUser] = useState('');
const usersQuery = useQuery({ const usersQuery = useQuery({
queryKey: ['admin', 'users'], queryKey: ['admin', 'users'],
@@ -33,23 +30,23 @@ export default function AdminPage() {
const deleteUserMut = useMutation({ const deleteUserMut = useMutation({
mutationFn: (id: number) => adminDeleteUser(id), mutationFn: (id: number) => adminDeleteUser(id),
onSuccess: () => { qc.invalidateQueries({ queryKey: ['admin'] }); toast('Пользователь удалён'); }, onSuccess: () => { qc.invalidateQueries({ queryKey: ['admin'] }); toast('Пользователь удалён'); },
onError: () => toast('Ошибка удаления', 'error'), onError: () => toast('Ошибка', 'error'),
}); });
const deleteCatMut = useMutation({ const deleteCatMut = useMutation({
mutationFn: (id: number) => adminDeleteCat(id), mutationFn: (id: number) => adminDeleteCat(id),
onSuccess: () => { qc.invalidateQueries({ queryKey: ['admin'] }); toast('Пост удалён'); }, onSuccess: () => { qc.invalidateQueries({ queryKey: ['admin'] }); toast('Пост удалён'); },
onError: () => toast('Ошибка удаления', 'error'), onError: () => toast('Ошибка', 'error'),
}); });
if (!user?.is_admin) { if (!user?.is_admin) {
return ( return (
<div className="flex flex-col items-center justify-center py-24"> <div className="flex flex-col items-center justify-center py-24">
<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]"> <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]">
<Shield className="h-8 w-8 text-[var(--fg-tertiary)]" strokeWidth={1.5} /> <Shield className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
</div> </div>
<p className="text-[17px] font-semibold mb-1.5">Доступ запрещён</p> <p className="text-base font-semibold mb-1">Доступ запрещён</p>
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px] mt-2">Вернуться в ленту</Button> <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">Вернуться в ленту</Button>
</div> </div>
); );
} }
@@ -57,112 +54,84 @@ export default function AdminPage() {
const users = usersQuery.data?.users ?? []; const users = usersQuery.data?.users ?? [];
const cats = catsQuery.data?.cats ?? []; const cats = catsQuery.data?.cats ?? [];
const filteredUsers = users.filter((u: any) =>
u.username.toLowerCase().includes(searchUser.toLowerCase())
);
return ( return (
<div className="mx-auto max-w-[700px] px-4 py-6 animate-fade-in-up"> <div className="mx-auto max-w-[700px] px-4 py-6 animate-rise">
<button onClick={() => navigate(-1)} <button onClick={() => navigate(-1)}
className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group"> className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
<ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" /> <ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
Назад
</button> </button>
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<Shield className="h-6 w-6 text-[var(--primary)]" strokeWidth={1.5} /> <div className="h-10 w-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
<h1 className="text-[22px] font-bold">Админ-панель</h1> <Shield className="h-5 w-5 text-white" strokeWidth={1.5} />
</div>
<h1 className="text-xl font-bold">Админ-панель</h1>
</div> </div>
{/* Tabs */} <div className="flex gap-2 mb-5">
<div className="flex gap-1 mb-5"> <TabBtn active={tab === 'users'} onClick={() => setTab('users')}>Пользователи ({users.length})</TabBtn>
<button onClick={() => setTab('users')} <TabBtn active={tab === 'cats'} onClick={() => setTab('cats')}>Посты ({cats.length})</TabBtn>
className={`px-4 py-2 rounded-lg text-[14px] font-medium transition-all ${tab === 'users' ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'}`}>
Пользователи ({users.length})
</button>
<button onClick={() => setTab('cats')}
className={`px-4 py-2 rounded-lg text-[14px] font-medium transition-all ${tab === 'cats' ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'}`}>
Посты ({cats.length})
</button>
</div> </div>
{tab === 'users' && ( {tab === 'users' && (
<> <div className="card border divide-y">
<div className="relative mb-4"> <div className="px-4 py-2.5 text-xs font-bold text-[var(--fg-secondary)] uppercase tracking-wider">Пользователи</div>
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-[var(--fg-tertiary)]" strokeWidth={1.5} /> {users.length === 0 && <div className="px-4 py-8 text-center text-sm text-[var(--fg-tertiary)]">Нет пользователей</div>}
<input value={searchUser} onChange={e => setSearchUser(e.target.value)} {users.map((u: any) => <UserRow key={u.id} u={u} onDelete={() => deleteUserMut.mutate(u.id)} qc={qc} />)}
placeholder="Поиск пользователя..."
className="w-full h-10 pl-9 pr-4 text-[14px] rounded-xl bg-white border input-focus" />
</div> </div>
<div className="card divide-y">
<div className="px-4 py-2.5 text-[12px] font-bold text-[var(--fg-secondary)] uppercase tracking-widest">
<span>Пользователи</span>
</div>
{filteredUsers.length === 0 && (
<div className="px-4 py-8 text-center text-[14px] text-[var(--fg-tertiary)]">Нет пользователей</div>
)}
{filteredUsers.map((u: any) => (
<UserRow key={u.id} u={u} onDelete={() => deleteUserMut.mutate(u.id)} qc={qc} />
))}
</div>
</>
)} )}
{tab === 'cats' && ( {tab === 'cats' && (
<div className="card divide-y"> <div className="card border divide-y">
<div className="px-4 py-2.5 text-[12px] font-bold text-[var(--fg-secondary)] uppercase tracking-widest"> <div className="px-4 py-2.5 text-xs font-bold text-[var(--fg-secondary)] uppercase tracking-wider">Все посты</div>
<span>Все посты</span> {cats.length === 0 && <div className="px-4 py-8 text-center text-sm text-[var(--fg-tertiary)]">Нет постов</div>}
</div> {cats.map((c: any) => <CatRow key={c.id} c={c} onDelete={() => deleteCatMut.mutate(c.id)} qc={qc} />)}
{cats.length === 0 && (
<div className="px-4 py-8 text-center text-[14px] text-[var(--fg-tertiary)]">Нет постов</div>
)}
{cats.map((c: any) => (
<CatRow key={c.id} c={c} onDelete={() => deleteCatMut.mutate(c.id)} qc={qc} />
))}
</div> </div>
)} )}
</div> </div>
); );
} }
function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
return (
<button onClick={onClick}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${active ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'}`}>
{children}
</button>
);
}
function UserRow({ u, onDelete, qc }: { u: any; onDelete: () => void; qc: any }) { function UserRow({ u, onDelete, qc }: { u: any; onDelete: () => void; qc: any }) {
const [editing, setEditing] = useState(false); const [editing, setEditing] = useState(false);
const [points, setPoints] = useState(u.points); const [points, setPoints] = useState(u.points);
const { toast } = useToast(); const { toast } = useToast();
const savePoints = async () => { const savePoints = async () => {
try { try { await adminSetPoints(u.id, points); qc.invalidateQueries({ queryKey: ['admin'] }); setEditing(false); toast('Готово'); }
await adminSetPoints(u.id, points); catch { toast('Ошибка', 'error'); }
qc.invalidateQueries({ queryKey: ['admin'] });
setEditing(false);
toast('Баллы обновлены');
} catch { toast('Ошибка', 'error'); }
}; };
return ( return (
<div className="flex items-center gap-3 px-4 py-3"> <div className="flex items-center gap-3 px-4 py-3">
<Avatar className="h-10 w-10 ring-1 ring-[var(--border)]"> <Avatar className="h-10 w-10 border">
<AvatarFallback className="text-sm avatar-initials">{u.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-xs avatar">{u.username.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar> </Avatar>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-[15px] font-semibold truncate">@{u.username}</span> <span className="text-sm font-semibold truncate">@{u.username}</span>
{u.is_admin && <span className="text-[10px] px-2 py-0.5 rounded-full bg-[var(--primary-light)] text-[var(--primary)] font-semibold">Админ</span>} {u.is_admin && <span className="tag bg-[var(--primary-light)] text-[var(--primary)]">Админ</span>}
</div> </div>
<div className="flex items-center gap-2 text-[12px] text-[var(--fg-secondary)]">
{editing ? ( {editing ? (
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5 mt-0.5">
<input type="number" value={points} min={0} onChange={e => setPoints(Math.max(0, parseInt(e.target.value) || 0))} <input type="number" value={points} min={0} onChange={e => setPoints(Math.max(0, parseInt(e.target.value) || 0))}
className="w-20 h-7 px-2 text-[13px] rounded-lg border input-focus" autoFocus /> className="w-20 h-7 px-2 text-xs rounded-lg border focus-ring" autoFocus />
<button onClick={savePoints} className="btn-icon h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button> <button onClick={savePoints} className="btn-icon h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button>
<button onClick={() => { setEditing(false); setPoints(u.points); }} className="btn-icon h-7 w-7 text-[var(--fg-tertiary)] hover:bg-[var(--secondary)]"><X className="h-3.5 w-3.5" /></button> <button onClick={() => { setEditing(false); setPoints(u.points); }} className="btn-icon h-7 w-7 text-[var(--fg-tertiary)] hover:bg-[var(--secondary)]"><X className="h-3.5 w-3.5" /></button>
</div> </div>
) : ( ) : (
<span>🏆 {u.points} баллов</span> <span className="text-xs text-[var(--fg-secondary)]">🏆 {u.points} баллов</span>
)} )}
</div> </div>
</div>
{!u.is_admin && ( {!u.is_admin && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<button onClick={() => { setEditing(true); setPoints(u.points); }} <button onClick={() => { setEditing(true); setPoints(u.points); }}
@@ -185,12 +154,8 @@ function CatRow({ c, onDelete, qc }: { c: any; onDelete: () => void; qc: any })
const { toast } = useToast(); const { toast } = useToast();
const saveCaption = async () => { const saveCaption = async () => {
try { try { await adminUpdateCaption(c.id, caption); qc.invalidateQueries({ queryKey: ['admin'] }); setEditing(false); toast('Готово'); }
await adminUpdateCaption(c.id, caption); catch { toast('Ошибка', 'error'); }
qc.invalidateQueries({ queryKey: ['admin'] });
setEditing(false);
toast('Описание обновлено');
} catch { toast('Ошибка', 'error'); }
}; };
return ( return (
@@ -199,17 +164,17 @@ function CatRow({ c, onDelete, qc }: { c: any; onDelete: () => void; qc: any })
<img src={c.image_url} alt="" className="h-full w-full object-cover" /> <img src={c.image_url} alt="" className="h-full w-full object-cover" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<span className="text-[14px] font-semibold">@{c.username}</span> <span className="text-sm font-semibold">@{c.username}</span>
{editing ? ( {editing ? (
<div className="flex items-center gap-1.5 mt-0.5"> <div className="flex items-center gap-1.5 mt-0.5">
<input type="text" value={caption} onChange={e => setCaption(e.target.value)} <input type="text" value={caption} onChange={e => setCaption(e.target.value)}
className="flex-1 h-7 px-2 text-[13px] rounded-lg border input-focus" autoFocus className="flex-1 h-7 px-2 text-xs rounded-lg border focus-ring" autoFocus
onKeyDown={e => { if (e.key === 'Enter') saveCaption(); if (e.key === 'Escape') { setEditing(false); setCaption(c.caption || ''); } }} /> onKeyDown={e => { if (e.key === 'Enter') saveCaption(); if (e.key === 'Escape') { setEditing(false); setCaption(c.caption || ''); } }} />
<button onClick={saveCaption} className="btn-icon h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button> <button onClick={saveCaption} className="btn-icon h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button>
<button onClick={() => { setEditing(false); setCaption(c.caption || ''); }} className="btn-icon h-7 w-7 text-[var(--fg-tertiary)] hover:bg-[var(--secondary)]"><X className="h-3.5 w-3.5" /></button> <button onClick={() => { setEditing(false); setCaption(c.caption || ''); }} className="btn-icon h-7 w-7 text-[var(--fg-tertiary)] hover:bg-[var(--secondary)]"><X className="h-3.5 w-3.5" /></button>
</div> </div>
) : ( ) : (
<p className="text-[12px] text-[var(--fg-secondary)] truncate">{c.caption || 'Без подписи'}</p> <p className="text-xs text-[var(--fg-secondary)] truncate">{c.caption || 'Без подписи'}</p>
)} )}
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">

66
client/src/pages/CatPage.tsx
View File

@@ -38,7 +38,7 @@ export default function CatPage() {
catch { setLiked(true); } catch { setLiked(true); }
} else { } else {
setLiked(true); setLiked(true);
toast('Нравится ❤️'); toast('❤️');
try { await likeMutation.mutateAsync(); refetchLike(); } try { await likeMutation.mutateAsync(); refetchLike(); }
catch { setLiked(false); } catch { setLiked(false); }
} }
@@ -46,22 +46,19 @@ export default function CatPage() {
const handleDelete = async () => { const handleDelete = async () => {
if (!isOwner || !cat) return; if (!isOwner || !cat) return;
try { try { await deleteMutation.mutateAsync(cat.id); toast('Удалено'); navigate('/feed'); }
await deleteMutation.mutateAsync(cat.id); catch { toast('Ошибка удаления', 'error'); }
toast('Удалено');
navigate('/feed');
} catch { toast('Ошибка удаления', 'error'); }
}; };
if (isLoading) { if (isLoading) {
return ( return (
<div className="mx-auto max-w-[580px] px-4 py-8"> <div className="mx-auto max-w-[580px] px-4 py-8">
<Skeleton className="mb-4 h-5 w-20 rounded-full" /> <Skeleton className="mb-4 h-4 w-20 rounded-lg" />
<Skeleton className="aspect-[4/3] w-full rounded-2xl" /> <Skeleton className="aspect-[4/3] w-full rounded-xl" />
<div className="mt-5 space-y-3"> <div className="mt-5 space-y-3">
<Skeleton className="h-5 w-32 rounded-full" /> <Skeleton className="h-4 w-32 rounded-lg" />
<Skeleton className="h-4 w-48 rounded-full" /> <Skeleton className="h-3 w-48 rounded-lg" />
<Skeleton className="h-4 w-24 rounded-full" /> <Skeleton className="h-3 w-24 rounded-lg" />
</div> </div>
</div> </div>
); );
@@ -69,13 +66,12 @@ export default function CatPage() {
if (isError || !cat) { if (isError || !cat) {
return ( return (
<div className="flex flex-col items-center justify-center py-24 animate-fade-in-up"> <div className="flex flex-col items-center justify-center py-24 animate-rise">
<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]"> <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]">
<span className="text-2xl">🔍</span> <span className="text-xl">🔍</span>
</div> </div>
<p className="text-[17px] font-semibold mb-1.5">Кот не найден</p> <p className="text-base font-semibold mb-1">Кот не найден</p>
<p className="text-[14px] text-[var(--fg-secondary)] mb-6">Возможно, публикация была удалена</p> <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">В ленту</Button>
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
</div> </div>
); );
} }
@@ -85,15 +81,14 @@ export default function CatPage() {
}); });
return ( return (
<div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in-up"> <div className="mx-auto max-w-[580px] px-4 py-6 animate-rise">
<button onClick={() => navigate(-1)} <button onClick={() => navigate(-1)}
className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group"> className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
<ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" /> <ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
Назад
</button> </button>
<div className="card overflow-hidden"> <div className="card border overflow-hidden">
<div className="bg-[var(--secondary)] relative img-shimmer"> <div className="bg-[var(--secondary)] relative">
{!imageLoaded && ( {!imageLoaded && (
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" /> <div className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
@@ -107,12 +102,12 @@ export default function CatPage() {
<div className="p-5 space-y-4"> <div className="p-5 space-y-4">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group"> <Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group">
<Avatar className="h-10 w-10 ring-1 ring-[var(--border)]"> <Avatar className="h-10 w-10 border">
<AvatarFallback className="text-sm avatar-initials">{cat.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-sm avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<span className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">@{cat.username}</span> <span className="text-sm font-semibold group-hover:text-[var(--primary)] transition-colors">@{cat.username}</span>
<p className="text-[12px] text-[var(--fg-tertiary)]">{dateStr}</p> <p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p>
</div> </div>
</Link> </Link>
{isOwner && ( {isOwner && (
@@ -123,7 +118,7 @@ export default function CatPage() {
</div> </div>
{cat.caption && ( {cat.caption && (
<p className="text-[15px] leading-[1.4]"> <p className="text-sm leading-[1.45]">
<span className="font-semibold mr-1.5">@{cat.username}</span> <span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption} {cat.caption}
</p> </p>
@@ -131,28 +126,25 @@ export default function CatPage() {
<div className="border-t" /> <div className="border-t" />
<div className="flex items-center gap-6"> <div className="flex items-center justify-between">
<button onClick={toggleLike} disabled={isOwner || !user} <button onClick={toggleLike} disabled={isOwner || !user}
className={`btn-icon flex items-center gap-2 text-[15px] font-medium ${ className={`flex items-center gap-2 text-sm font-medium transition-all ${
isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-[var(--danger)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]' isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-[var(--danger)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
}`}> }`}>
<Heart className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`} /> <Heart className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-pop' : 'stroke-[1.5]'}`} />
{cat.likes_count > 0 && <span className="tabular-nums">{cat.likes_count}</span>} {cat.likes_count > 0 && <span className="tabular-nums">{cat.likes_count}</span>}
</button> </button>
<span className="flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)]"> <span className="flex items-center gap-1.5 text-xs text-[var(--fg-secondary)]">
<span>🏆</span> <span>🏆</span>
<span className="font-semibold">{cat.user_points}</span> <span className="font-semibold">{cat.user_points}</span>
<span className="text-[var(--fg-tertiary)]">баллов</span>
</span> </span>
</div> </div>
<div className="pt-1"> <Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-lg text-xs h-8">
<Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-full text-[12px] h-8 gap-1"> <ArrowLeft className="h-3.5 w-3.5 mr-1" strokeWidth={1.5} /> В ленту
<ArrowLeft className="h-3.5 w-3.5" strokeWidth={1.5} /> В ленту
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>
</div>
); );
} }

57
client/src/pages/FeedPage.tsx
View File

@@ -10,18 +10,18 @@ function FeedSkeleton() {
return ( return (
<div className="space-y-4"> <div className="space-y-4">
{Array.from({ length: 3 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="card overflow-hidden"> <div key={i} className="card border overflow-hidden">
<div className="flex items-center gap-3 px-4 py-3"> <div className="flex items-center gap-3 px-4 pt-4 pb-2">
<div className="h-10 w-10 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-9 w-9 rounded-full bg-[var(--secondary)] animate-skeleton" />
<div className="space-y-2"> <div className="space-y-2">
<div className="h-3.5 w-28 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-3 w-28 rounded-full bg-[var(--secondary)] animate-skeleton" />
<div className="h-2.5 w-16 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-2.5 w-16 rounded-full bg-[var(--secondary)] animate-skeleton" />
</div> </div>
</div> </div>
<div className="aspect-[4/3] w-full bg-[var(--secondary)] animate-skeleton" /> <div className="aspect-[4/3] w-full bg-[var(--secondary)] animate-skeleton" />
<div className="p-4 space-y-2"> <div className="p-4 space-y-2">
<div className="h-3.5 w-40 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-3 w-40 rounded-full bg-[var(--secondary)] animate-skeleton" />
<div className="h-3.5 w-20 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-3 w-20 rounded-full bg-[var(--secondary)] animate-skeleton" />
</div> </div>
</div> </div>
))} ))}
@@ -40,7 +40,7 @@ export default function FeedPage() {
<main className="flex-1 min-w-0"> <main className="flex-1 min-w-0">
{data && data.totalPages > 0 && ( {data && data.totalPages > 0 && (
<div className="flex items-center justify-between mb-4"> <div className="flex items-center justify-between mb-4">
<h2 className="text-[12px] font-bold text-[var(--fg-secondary)] uppercase tracking-[0.08em]">Лента</h2> <h2 className="text-xs font-bold text-[var(--fg-secondary)] uppercase tracking-wider">Лента</h2>
<span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{data.total} публикаций</span> <span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{data.total} публикаций</span>
</div> </div>
)} )}
@@ -48,28 +48,27 @@ export default function FeedPage() {
{isLoading && <FeedSkeleton />} {isLoading && <FeedSkeleton />}
{isError && ( {isError && (
<div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in-up"> <div className="flex flex-col items-center justify-center py-24 text-center animate-rise">
<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--danger-light)]"> <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--danger-light)]">
<span className="text-2xl">😿</span> <span className="text-xl">😿</span>
</div> </div>
<p className="text-[17px] font-semibold mb-1.5">Не удалось загрузить</p> <p className="text-base font-semibold mb-1">Не удалось загрузить</p>
<p className="text-[14px] text-[var(--fg-secondary)] mb-6 max-w-xs">Проверьте подключение и попробуйте снова</p> <p className="text-sm text-[var(--fg-secondary)] mb-5">Попробуйте снова</p>
<Button variant="outline" onClick={() => refetch()} className="rounded-full text-[13px] gap-1.5"> <Button variant="outline" onClick={() => refetch()} className="rounded-lg text-xs gap-1.5">
<RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} /> <RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} /> Попробовать снова
Попробовать снова
</Button> </Button>
</div> </div>
)} )}
{data && data.cats.length === 0 && ( {data && data.cats.length === 0 && (
<div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in-up"> <div className="flex flex-col items-center justify-center py-24 text-center animate-rise">
<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--primary-light)]"> <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--primary-light)]">
<span className="text-2xl">🐱</span> <span className="text-xl">🐱</span>
</div> </div>
<p className="text-[17px] font-semibold mb-1.5">Пока нет котов</p> <p className="text-base font-semibold mb-1">Пока нет котов</p>
<p className="text-[14px] text-[var(--fg-secondary)] mb-6">Будьте первым, кто загрузит фото кота</p> <p className="text-sm text-[var(--fg-secondary)] mb-5">Будьте первым, кто загрузит фото кота</p>
<Button onClick={() => window.location.href = '/upload'} className="rounded-full text-[13px]" <Button onClick={() => window.location.href = '/upload'} className="rounded-lg text-xs"
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}> style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
Загрузить кота Загрузить кота
</Button> </Button>
</div> </div>
@@ -84,24 +83,24 @@ export default function FeedPage() {
{data.totalPages > 1 && ( {data.totalPages > 1 && (
<nav className="flex items-center justify-center gap-3 mt-6 pb-6"> <nav className="flex items-center justify-center gap-3 mt-6 pb-6">
<Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1} <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1}
className="rounded-full text-[13px] h-9 px-4 gap-0.5"> className="rounded-lg text-xs h-9 px-4">
<ChevronLeft className="h-4 w-4" strokeWidth={1.5} /> Назад <ChevronLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
</Button> </Button>
<div className="flex gap-1.5"> <div className="flex gap-1">
{Array.from({ length: data.totalPages }, (_, i) => i + 1).map((p) => ( {Array.from({ length: Math.min(data.totalPages, 7) }, (_, i) => i + 1).map((p) => (
<button key={p} onClick={() => setPage(p)} <button key={p} onClick={() => setPage(p)}
className={`h-8 w-8 rounded-full text-[13px] font-medium transition-all ${ className={`h-8 w-8 rounded-lg text-xs font-medium transition-all ${
p === page ? 'text-white shadow-md' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]' p === page ? 'text-white shadow-sm' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'
}`} }`}
style={p === page ? { background: 'linear-gradient(135deg, #007aff, #5856d6)' } : {}}> style={p === page ? { background: 'linear-gradient(135deg, #2563eb, #7c3aed)' } : {}}>
{p} {p}
</button> </button>
))} ))}
</div> </div>
<Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages} <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages}
className="rounded-full text-[13px] h-9 px-4 gap-0.5"> className="rounded-lg text-xs h-9 px-4">
Вперёд <ChevronRight className="h-4 w-4" strokeWidth={1.5} /> Вперёд <ChevronRight className="h-4 w-4" strokeWidth={1.5} />
</Button> </Button>
</nav> </nav>

85
client/src/pages/LoginPage.tsx
View File

@@ -3,7 +3,6 @@ import { Link, Navigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Cat } from 'lucide-react';
export default function LoginPage() { export default function LoginPage() {
const { user, login } = useAuth(); const { user, login } = useAuth();
@@ -18,68 +17,43 @@ export default function LoginPage() {
e.preventDefault(); e.preventDefault();
setError(''); setError('');
setLoading(true); setLoading(true);
try { try { await login(username, password); }
await login(username, password); catch (err: any) { setError(err.response?.data?.error || 'Ошибка входа'); }
} catch (err: any) { finally { setLoading(false); }
setError(err.response?.data?.error || 'Ошибка входа');
} finally { setLoading(false); }
}; };
return ( return (
<div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]"> <div className="flex min-h-screen items-center justify-center p-5" style={{ background: 'linear-gradient(135deg, #fafaf9 0%, #f0f0ef 100%)' }}>
<div className="w-full max-w-sm animate-fade-in-up"> <div className="w-full max-w-sm animate-rise">
<div className="text-center mb-10"> <div className="text-center mb-10">
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full animate-float" <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-xl shadow-sm"
style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}> style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
<Cat className="h-10 w-10 text-white" strokeWidth={1.5} /> <svg className="h-8 w-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
<path d="M12 2C7.58 2 4 5.58 4 10c0 3.78 2.58 7.02 6 8.12V20h4v-1.88c3.42-1.1 6-4.34 6-8.12 0-4.42-3.58-8-8-8z" />
<circle cx="12" cy="10" r="3" />
</svg>
</div> </div>
<h1 className="text-[28px] font-bold gradient-text">Catstagram</h1> <h1 className="text-2xl font-bold text-gradient">Catstagram</h1>
<p className="text-[15px] text-[var(--fg-secondary)] mt-1.5"> <p className="text-sm text-[var(--fg-secondary)] mt-1.5">Войдите, чтобы смотреть котов</p>
Войдите, чтобы смотреть котов
</p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-1.5"> <Input value={username} onChange={(e) => setUsername(e.target.value)}
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1"> placeholder="Имя пользователя" required autoFocus
Имя пользователя className="h-12 text-sm rounded-xl bg-white border focus-ring" />
</label> <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
<Input placeholder="Пароль" required
value={username} className="h-12 text-sm rounded-xl bg-white border focus-ring" />
onChange={(e) => setUsername(e.target.value)}
placeholder="your_cat_lover"
required
autoFocus
className="h-12 text-[15px] rounded-xl bg-white border input-focus"
/>
</div>
<div className="space-y-1.5">
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">
Пароль
</label>
<Input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
required
className="h-12 text-[15px] rounded-xl bg-white border input-focus"
/>
</div>
{error && ( {error && (
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in-up"> <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-rise">
<span>⚠️</span> <span>⚠️</span><span>{error}</span>
<span>{error}</span>
</div> </div>
)} )}
<Button <Button type="submit" disabled={loading}
type="submit" className="w-full h-12 rounded-xl text-sm font-semibold transition-all active:scale-[0.98]"
disabled={loading} style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
className="w-full h-12 rounded-xl text-[15px] font-semibold transition-all active:scale-[0.98]"
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
>
{loading ? ( {loading ? (
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" /> <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
@@ -89,16 +63,9 @@ export default function LoginPage() {
</Button> </Button>
</form> </form>
<div className="relative my-8"> <p className="mt-8 text-center text-sm text-[var(--fg-secondary)]">
<div className="absolute inset-0 flex items-center"><div className="w-full border-t"></div></div>
<div className="relative flex justify-center">
<span className="px-4 text-[13px] text-[var(--fg-tertiary)] bg-[var(--bg)]">или</span>
</div>
</div>
<p className="text-center text-[14px] text-[var(--fg-secondary)]">
Нет аккаунта?{' '} Нет аккаунта?{' '}
<Link to="/register" className="link-accent">Зарегистрироваться</Link> <Link to="/register" className="font-semibold text-[var(--primary)] hover:opacity-80 transition-opacity">Зарегистрироваться</Link>
</p> </p>
</div> </div>
</div> </div>

84
client/src/pages/ProfilePage.tsx
View File

@@ -6,14 +6,13 @@ import CatModal from '@/components/CatModal';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from '@/components/ui/skeleton';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { ArrowLeft, Plus, LogOut, Heart, Shield } from 'lucide-react'; import { ArrowLeft, Plus, LogOut, Shield } from 'lucide-react';
export default function ProfilePage() { export default function ProfilePage() {
const { id: paramId } = useParams<{ id?: string }>(); const { id: paramId } = useParams<{ id?: string }>();
const navigate = useNavigate(); const navigate = useNavigate();
const { user: me, logout } = useAuth(); const { user: me, logout } = useAuth();
const [modalCatId, setModalCatId] = useState<number | null>(null); const [modalCatId, setModalCatId] = useState<number | null>(null);
const [tab, setTab] = useState<'photos'>('photos');
const profileUserId = paramId ? parseInt(paramId) : me?.id; const profileUserId = paramId ? parseInt(paramId) : me?.id;
const isMe = !paramId || (me && profileUserId === me.id); const isMe = !paramId || (me && profileUserId === me.id);
@@ -45,10 +44,10 @@ export default function ProfilePage() {
if (!profileUser && !isMe) { if (!profileUser && !isMe) {
return ( return (
<div className="flex flex-col items-center justify-center py-24 animate-fade-in-up"> <div className="flex flex-col items-center justify-center py-24 animate-rise">
<div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]"><span className="text-2xl">🔍</span></div> <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]"><span className="text-xl">🔍</span></div>
<p className="text-[17px] font-semibold mb-1.5">Пользователь не найден</p> <p className="text-base font-semibold mb-1">Пользователь не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px] mt-2">Вернуться в ленту</Button> <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">Вернуться в ленту</Button>
</div> </div>
); );
} }
@@ -58,23 +57,22 @@ export default function ProfilePage() {
const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0); const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
return ( return (
<div className="mx-auto max-w-[660px] px-4 py-6 animate-fade-in-up"> <div className="mx-auto max-w-[660px] px-4 py-6 animate-rise">
{!isMe && ( {!isMe && (
<button onClick={() => navigate(-1)} className="mb-4 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group"> <button onClick={() => navigate(-1)} className="mb-4 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
<ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" /> <ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
Назад
</button> </button>
)} )}
<div className="flex items-center gap-6 mb-8"> <div className="flex items-center gap-6 mb-8">
<Avatar className="h-20 w-20 shrink-0 ring-2 ring-[var(--primary)]/20 ring-offset-2"> <Avatar className="h-20 w-20 shrink-0">
<AvatarFallback className="text-[26px] font-bold" style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)', color: 'white', borderRadius: '50%', display: 'flex', alignItems: 'center', justifyContent: 'center', width: '100%', height: '100%' }}> <AvatarFallback className="text-2xl font-bold avatar" style={{ borderRadius: '50%' }}>
{initials} {initials}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-2"> <div className="flex items-center gap-3 mb-3">
<h1 className="text-[20px] font-bold truncate">@{profileUser?.username}</h1> <h1 className="text-xl font-bold truncate">@{profileUser?.username}</h1>
<div className="flex items-center gap-1 ml-auto"> <div className="flex items-center gap-1 ml-auto">
{isMe && me?.is_admin && ( {isMe && me?.is_admin && (
<Link to="/admin" className="btn-icon h-8 w-8 text-[var(--primary)] hover:bg-[var(--primary-light)]" title="Админ-панель"> <Link to="/admin" className="btn-icon h-8 w-8 text-[var(--primary)] hover:bg-[var(--primary-light)]" title="Админ-панель">
@@ -89,66 +87,44 @@ export default function ProfilePage() {
</div> </div>
</div> </div>
<div className="flex items-center gap-6 text-[14px] mb-3"> <div className="flex items-center gap-6">
<div className="text-center"> <div><span className="font-bold">{cats.length}</span><span className="text-xs text-[var(--fg-secondary)] ml-1">фото</span></div>
<p className="font-bold text-[16px]">{cats.length}</p> <div><span className="font-bold">{totalLikes}</span><span className="text-xs text-[var(--fg-secondary)] ml-1">❤️</span></div>
<p className="text-[11px] text-[var(--fg-secondary)]">публикаций</p> <div><span className="font-bold">🏆{profileUser?.points ?? 0}</span></div>
</div>
<div className="text-center">
<p className="font-bold text-[16px]">{totalLikes}</p>
<p className="text-[11px] text-[var(--fg-secondary)]">лайков</p>
</div>
<div className="text-center">
<p className="font-bold text-[16px]">🏆{profileUser?.points ?? 0}</p>
<p className="text-[11px] text-[var(--fg-secondary)]">баллов</p>
</div>
</div> </div>
{isMe && ( {isMe && (
<div className="mt-3">
<Link to="/upload"> <Link to="/upload">
<Button size="sm" className="rounded-full text-[13px] h-8 gap-1.5" <Button size="sm" className="rounded-lg text-xs h-8 gap-1.5"
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}> style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
<Plus className="h-3.5 w-3.5" strokeWidth={2} /> <Plus className="h-3.5 w-3.5" strokeWidth={2} /> Новая публикация
Новая публикация
</Button> </Button>
</Link> </Link>
</div>
)} )}
</div> </div>
</div> </div>
<div className="flex gap-1 mb-5">
<button onClick={() => setTab('photos')}
className={`px-5 py-2.5 text-[14px] font-medium rounded-lg transition-all ${
tab === 'photos' ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]'
}`}>
Фото
</button>
</div>
{cats.length === 0 ? ( {cats.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in-up"> <div className="flex flex-col items-center justify-center py-16 text-center animate-rise">
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--secondary)]"><span className="text-xl">📸</span></div> <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]"><span className="text-xl">📸</span></div>
<p className="text-[15px] font-medium mb-1">Пока нет котов</p> <p className="text-sm font-medium mb-1">Пока нет котов</p>
<p className="text-[13px] text-[var(--fg-secondary)] mb-5 max-w-xs"> <p className="text-xs text-[var(--fg-secondary)] mb-5">{isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}</p>
{isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
</p>
{isMe && ( {isMe && (
<Link to="/upload"><Button size="sm" className="rounded-full text-[13px]" <Link to="/upload"><Button size="sm" className="rounded-lg text-xs"
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>Загрузить кота</Button></Link> style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>Загрузить кота</Button></Link>
)} )}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-3 gap-1.5"> <div className="grid grid-cols-3 gap-1.5">
{cats.map((cat) => ( {cats.map((cat) => (
<button key={cat.id} onClick={() => setModalCatId(cat.id)} <button key={cat.id} onClick={() => setModalCatId(cat.id)}
className="group relative aspect-square overflow-hidden bg-[var(--secondary)] rounded-xl shadow-sm"> className="group relative aspect-square overflow-hidden bg-[var(--secondary)] rounded-xl">
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} <img src={cat.image_url} alt={cat.caption || 'Фото кота'}
className="h-full w-full object-cover transition-all duration-300 group-hover:scale-105" loading="lazy" /> className="h-full w-full object-cover transition-all duration-300 group-hover:scale-105" loading="lazy" />
<div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3"> <div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2.5">
<div className="flex items-center gap-1.5 text-white text-[13px] font-semibold drop-shadow-sm"> <span className="text-white text-xs font-semibold drop-shadow">❤️ {cat.likes_count}</span>
<Heart className="h-4 w-4 fill-white" strokeWidth={2} />
<span>{cat.likes_count}</span>
</div>
</div> </div>
</button> </button>
))} ))}

68
client/src/pages/RegisterPage.tsx
View File

@@ -3,7 +3,6 @@ import { Link, Navigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Cat } from 'lucide-react';
export default function RegisterPage() { export default function RegisterPage() {
const { user, register } = useAuth(); const { user, register } = useAuth();
@@ -20,50 +19,46 @@ export default function RegisterPage() {
setError(''); setError('');
if (password !== confirm) { setError('Пароли не совпадают'); return; } if (password !== confirm) { setError('Пароли не совпадают'); return; }
setLoading(true); setLoading(true);
try { try { await register(username, password); }
await register(username, password); catch (err: any) { setError(err.response?.data?.error || 'Ошибка регистрации'); }
} catch (err: any) { finally { setLoading(false); }
setError(err.response?.data?.error || 'Ошибка регистрации');
} finally { setLoading(false); }
}; };
return ( return (
<div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]"> <div className="flex min-h-screen items-center justify-center p-5" style={{ background: 'linear-gradient(135deg, #fafaf9 0%, #f0f0ef 100%)' }}>
<div className="w-full max-w-sm animate-fade-in-up"> <div className="w-full max-w-sm animate-rise">
<div className="text-center mb-10"> <div className="text-center mb-10">
<div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full animate-float" <div className="mx-auto mb-5 flex h-16 w-16 items-center justify-center rounded-xl shadow-sm"
style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}> style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
<Cat className="h-10 w-10 text-white" strokeWidth={1.5} /> <svg className="h-8 w-8 text-white" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth={1.5}>
<path d="M12 2C7.58 2 4 5.58 4 10c0 3.78 2.58 7.02 6 8.12V20h4v-1.88c3.42-1.1 6-4.34 6-8.12 0-4.42-3.58-8-8-8z" />
<circle cx="12" cy="10" r="3" />
</svg>
</div> </div>
<h1 className="text-[28px] font-bold gradient-text">Catstagram</h1> <h1 className="text-2xl font-bold text-gradient">Catstagram</h1>
<p className="text-[15px] text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p> <p className="text-sm text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
<div className="space-y-1.5"> <Input value={username} onChange={(e) => setUsername(e.target.value)}
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">Имя пользователя</label> placeholder="Имя пользователя" minLength={3} required autoFocus
<Input value={username} onChange={(e) => setUsername(e.target.value)} placeholder="your_cat_lover" minLength={3} required autoFocus className="h-12 text-[15px] rounded-xl bg-white border input-focus" /> className="h-12 text-sm rounded-xl bg-white border focus-ring" />
</div> <Input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
<div className="space-y-1.5"> placeholder="Пароль (мин. 4 символа)" minLength={4} required
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">Пароль</label> className="h-12 text-sm rounded-xl bg-white border focus-ring" />
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)} placeholder="Минимум 4 символа" minLength={4} required className="h-12 text-[15px] rounded-xl bg-white border input-focus" /> <Input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)}
</div> placeholder="Подтвердите пароль" required
<div className="space-y-1.5"> className="h-12 text-sm rounded-xl bg-white border focus-ring" />
<label className="text-[13px] font-medium text-[var(--fg-secondary)] ml-1">Подтвердите пароль</label>
<Input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)} placeholder="Повторите пароль" required className="h-12 text-[15px] rounded-xl bg-white border input-focus" />
</div>
{error && ( {error && (
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in-up"> <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-rise">
<span>⚠️</span><span>{error}</span> <span>⚠️</span><span>{error}</span>
</div> </div>
)} )}
<Button <Button type="submit" disabled={loading}
type="submit" disabled={loading} className="w-full h-12 rounded-xl text-sm font-semibold transition-all active:scale-[0.98]"
className="w-full h-12 rounded-xl text-[15px] font-semibold active:scale-[0.98] transition-all" style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}
>
{loading ? ( {loading ? (
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" /> <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
@@ -73,16 +68,9 @@ export default function RegisterPage() {
</Button> </Button>
</form> </form>
<div className="relative my-8"> <p className="mt-8 text-center text-sm text-[var(--fg-secondary)]">
<div className="absolute inset-0 flex items-center"><div className="w-full border-t"></div></div>
<div className="relative flex justify-center">
<span className="px-4 text-[13px] text-[var(--fg-tertiary)] bg-[var(--bg)]">или</span>
</div>
</div>
<p className="text-center text-[14px] text-[var(--fg-secondary)]">
Уже есть аккаунт?{' '} Уже есть аккаунт?{' '}
<Link to="/login" className="link-accent">Войти</Link> <Link to="/login" className="font-semibold text-[var(--primary)] hover:opacity-80 transition-opacity">Войти</Link>
</p> </p>
</div> </div>
</div> </div>

67
client/src/pages/UploadPage.tsx
View File

@@ -6,7 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/components/Toast'; import { useToast } from '@/components/Toast';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { ArrowLeft, Upload, X, Image } from 'lucide-react'; import { ArrowLeft, Upload, X } from 'lucide-react';
export default function UploadPage() { export default function UploadPage() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -23,20 +23,17 @@ export default function UploadPage() {
}, [preview]); }, [preview]);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ const { getRootProps, getInputProps, isDragActive } = useDropzone({
onDrop, onDrop, accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] }, maxFiles: 1, maxSize: 10 * 1024 * 1024,
accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] },
maxFiles: 1, maxSize: 10 * 1024 * 1024,
}); });
const handleUpload = async () => { const handleUpload = async () => {
if (!file) return; if (!file) return;
const fd = new FormData(); const fd = new FormData();
fd.append('image', file); fd.append('image', file); fd.append('caption', caption);
fd.append('caption', caption);
try { try {
const result = await uploadMutation.mutateAsync(fd); const result = await uploadMutation.mutateAsync(fd);
if (user) updateUser({ ...user, points: (user.points || 0) + 10 }); if (user) updateUser({ ...user, points: (user.points || 0) + 1 });
toast('+1 балл 🎉'); toast('+1 🎉');
navigate(`/cat/${result.cat.id}`); navigate(`/cat/${result.cat.id}`);
} catch { toast('Ошибка загрузки', 'error'); } } catch { toast('Ошибка загрузки', 'error'); }
}; };
@@ -46,64 +43,58 @@ export default function UploadPage() {
return ( return (
<div className="mx-auto max-w-[580px] px-4 py-6"> <div className="mx-auto max-w-[580px] px-4 py-6">
<button onClick={() => navigate(-1)} <button onClick={() => navigate(-1)}
className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors group"> className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
<ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" /> <ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
Назад
</button> </button>
<h1 className="text-[22px] font-bold mb-6 gradient-text">Новая публикация</h1> <h1 className="text-xl font-bold mb-6 text-gradient">Новая публикация</h1>
{!preview ? ( {!preview ? (
<div {...getRootProps()} <div {...getRootProps()}
className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all ${ className={`border-2 border-dashed rounded-xl p-14 text-center cursor-pointer transition-all ${
isDragActive ? 'border-[var(--primary)] bg-[var(--primary-light)] scale-[1.02]' : 'border-[var(--border)] hover:bg-[var(--secondary)] hover:border-[var(--fg-tertiary)]' isDragActive ? 'border-[var(--primary)] bg-[var(--primary-soft)] scale-[1.01]' : 'border-[var(--border)] hover:bg-[var(--secondary)]'
}`}> }`}>
<input {...getInputProps()} /> <input {...getInputProps()} />
<div className="mb-5 flex justify-center"> <div className="mb-5 flex justify-center">
<div className="h-16 w-16 rounded-full bg-[var(--secondary)] flex items-center justify-center"> <div className="h-14 w-14 rounded-xl bg-[var(--secondary)] flex items-center justify-center">
{isDragActive ? <Image className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.5} /> : <Upload className="h-7 w-7 text-[var(--fg-secondary)]" strokeWidth={1.5} />} <Upload className="h-6 w-6 text-[var(--fg-secondary)]" strokeWidth={1.5} />
</div> </div>
</div> </div>
<p className="text-[16px] font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}</p> <p className="text-sm font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото'}</p>
<p className="text-[14px] text-[var(--fg-secondary)] mb-6">или нажмите, чтобы выбрать</p> <p className="text-xs text-[var(--fg-secondary)] mb-5">или нажмите, чтобы выбрать</p>
<Button variant="outline" size="sm" className="rounded-full text-[13px] px-6">Выбрать файл</Button> <Button variant="outline" size="sm" className="rounded-lg text-xs px-5">Выбрать файл</Button>
<p className="mt-5 text-[12px] text-[var(--fg-tertiary)]">JPG, PNG, GIF, WebP · до 10 МБ</p> <p className="mt-4 text-[11px] text-[var(--fg-tertiary)]">JPG, PNG, GIF, WebP · до 10 МБ</p>
</div> </div>
) : ( ) : (
<div className="space-y-5 animate-fade-in-up"> <div className="space-y-5 animate-rise">
<div className="relative bg-[var(--secondary)] rounded-2xl overflow-hidden shadow-sm"> <div className="relative bg-[var(--secondary)] rounded-xl overflow-hidden">
<img src={preview!} alt="Preview" className="max-h-[420px] w-full object-contain" /> <img src={preview!} alt="Preview" className="max-h-[420px] w-full object-contain" />
<button onClick={clearFile} <button onClick={clearFile}
className="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all backdrop-blur-sm"> className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all">
<X className="h-4 w-4" strokeWidth={2} /> <X className="h-4 w-4" strokeWidth={2} />
</button> </button>
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Avatar className="h-9 w-9 shrink-0 ring-1 ring-[var(--border)]"> <Avatar className="h-9 w-9 shrink-0 border">
<AvatarFallback className="text-xs avatar-initials">{user?.username?.charAt(0).toUpperCase() || '?'}</AvatarFallback> <AvatarFallback className="text-xs avatar">{user?.username?.charAt(0).toUpperCase() || '?'}</AvatarFallback>
</Avatar> </Avatar>
<div className="flex-1"> <div className="flex-1">
<p className="text-[14px] font-semibold mb-1.5">{user?.username}</p> <p className="text-sm font-semibold mb-1">{user?.username}</p>
<textarea placeholder="Напишите подпись к фото..." value={caption} onChange={(e) => setCaption(e.target.value)} <textarea placeholder="Подпись..." value={caption} onChange={(e) => setCaption(e.target.value)}
maxLength={200} rows={3} maxLength={200} rows={3}
className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.4]" /> className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.4]" />
<div className="flex items-center justify-between mt-1"> <div className="flex justify-end mt-1">
<span className="text-[11px] text-[var(--fg-tertiary)]">{caption.length > 150 ? `Осталось ${200 - caption.length} символов` : ''}</span>
<span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{caption.length}/200</span> <span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{caption.length}/200</span>
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center justify-between pt-3 border-t"> <div className="flex items-center justify-between pt-3 border-t">
<div className="flex items-center gap-2 text-[13px] text-[var(--fg-secondary)]"> <span className="text-xs text-[var(--fg-secondary)]">🏆 +1 балл</span>
<span>🏆</span>
<span className="font-medium">+1 балл</span>
<span className="text-[var(--fg-tertiary)]">за публикацию</span>
</div>
<Button onClick={handleUpload} disabled={uploadMutation.isPending} <Button onClick={handleUpload} disabled={uploadMutation.isPending}
size="sm" className="rounded-full text-[14px] px-6 h-10 disabled:opacity-60" size="sm" className="rounded-lg text-sm px-6 h-10 disabled:opacity-60"
style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}> style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
{uploadMutation.isPending ? ( {uploadMutation.isPending ? (
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" /> <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
@@ -114,7 +105,7 @@ export default function UploadPage() {
</div> </div>
{uploadMutation.isError && ( {uploadMutation.isError && (
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in-up"> <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-rise">
<span>⚠️</span><span>Не удалось загрузить. Попробуйте снова.</span> <span>⚠️</span><span>Не удалось загрузить. Попробуйте снова.</span>
</div> </div>
)} )}