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

UI: тёплый современный дизайн + русификация

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 10:38:01 +03:00
parent e4b25fe4b7
commit ea0df060e8
17 changed files with 576 additions and 527 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/index.html
View File

@@ -4,7 +4,7 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐱</text></svg>" /> <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐱</text></svg>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Catstagram</title> <title>Catstagram — фото котов</title>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

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

@@ -24,88 +24,86 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
const handleDoubleClick = () => { const handleDoubleClick = () => {
setShowHeart(true); setShowHeart(true);
setTimeout(() => setShowHeart(false), 600); setTimeout(() => setShowHeart(false), 500);
if (!liked && !isOwner) { if (!liked && !isOwner) handleLikeAction();
handleLikeAction();
}
}; };
const handleLikeAction = async () => { const handleLikeAction = async () => {
if (isOwner || !user) return; if (isOwner || !user) return;
setAnimating(true); setAnimating(true);
setTimeout(() => setAnimating(false), 400); setTimeout(() => setAnimating(false), 450);
if (liked) { if (liked) {
setLiked(false); setLiked(false);
setLikeCount((c) => c - 1); setLikeCount((c) => c - 1);
try { try {
const res = await unlikeMutation.mutateAsync(); const res = await unlikeMutation.mutateAsync();
if (res.ownerPoints !== undefined && cat.user_id === user.id) { if (res.ownerPoints !== undefined && cat.user_id === user.id)
updateUser({ ...user, points: res.ownerPoints }); updateUser({ ...user, points: res.ownerPoints });
} } 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('Liked', 'like'); toast('Нравится ♥', 'like');
try { try { await likeMutation.mutateAsync(); }
await likeMutation.mutateAsync(); catch { setLiked(false); setLikeCount((c) => c - 1); }
} catch {
setLiked(false);
setLikeCount((c) => c - 1);
}
} }
}; };
const handleLike = () => { const handleLike = () => handleLikeAction();
handleLikeAction();
const formatDate = (dateStr: string) => {
const d = new Date(dateStr);
const now = new Date();
const diff = now.getTime() - d.getTime();
const days = Math.floor(diff / (1000 * 60 * 60 * 24));
if (days === 0) return 'Сегодня';
if (days === 1) return 'Вчера';
return d.toLocaleDateString('ru-RU', { day: 'numeric', month: 'long' });
}; };
return ( return (
<div className="animate-fade-in border-b pb-6 mb-6"> <div className="animate-fade-in bg-white rounded-2xl shadow-sm border border-border/60 overflow-hidden mb-5">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between mb-3"> <div className="flex items-center justify-between px-4 py-3">
<div className="flex items-center gap-2.5"> <div
<Avatar className="h-7 w-7"> className="flex items-center gap-2.5 cursor-pointer"
<AvatarFallback className="text-[10px] bg-foreground text-background"> onClick={() => window.location.href = `/profile/${cat.user_id}`}
>
<Avatar className="h-8 w-8 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
{cat.username.charAt(0).toUpperCase()} {cat.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-sm font-medium">@{cat.username}</span> <div>
<span className="text-xs text-muted-foreground"> <span className="text-sm font-semibold text-foreground">@{cat.username}</span>
{new Date(cat.created_at).toLocaleDateString('en-US', { <span className="ml-2 text-xs text-muted-foreground">{formatDate(cat.created_at)}</span>
month: 'short', </div>
day: 'numeric',
})}
</span>
</div> </div>
</div> </div>
{/* Image */} {/* Image */}
<div <div
className="relative bg-muted rounded-sm overflow-hidden cursor-pointer mb-3" className="relative bg-gradient-to-b from-transparent to-muted/30 cursor-pointer"
onDoubleClick={handleDoubleClick} onDoubleClick={handleDoubleClick}
onClick={() => onOpen(cat.id)} onClick={() => onOpen(cat.id)}
> >
<img <img
src={cat.image_url} src={cat.image_url}
alt={cat.caption || 'Cat photo'} alt={cat.caption || 'Фото кота'}
className="w-full max-h-[500px] object-contain select-none" className="w-full max-h-[520px] object-contain select-none"
draggable={false} draggable={false}
loading="lazy" loading="lazy"
/> />
{showHeart && ( {showHeart && (
<div className="absolute inset-0 flex items-center justify-center pointer-events-none"> <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<Heart className="heart-burst h-20 w-20 text-white" strokeWidth={1.5} /> <Heart className="heart-burst h-24 w-24 text-white drop-shadow-xl" strokeWidth={1.5} />
</div> </div>
)} )}
</div> </div>
{/* Actions */} {/* Actions */}
<div className="flex items-center justify-between mb-2"> <div className="px-4 pt-3 pb-1">
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<button <button
onClick={handleLike} onClick={handleLike}
@@ -113,26 +111,26 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
className={`like-btn ${animating ? 'heart-animate' : ''}`} className={`like-btn ${animating ? 'heart-animate' : ''}`}
> >
<Heart <Heart
className={`h-5 w-5 ${ className={`h-6 w-6 transition-all ${
liked ? 'fill-[#e00] text-[#e00]' : 'text-foreground' liked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
}`} }`}
strokeWidth={liked ? 2 : 1.5} strokeWidth={liked ? 2.5 : 1.5}
/> />
</button> </button>
<button onClick={() => onOpen(cat.id)} className="hover:text-muted-foreground transition-colors"> <button onClick={() => onOpen(cat.id)} className="hover:text-primary transition-colors">
<MessageCircle className="h-5 w-5" strokeWidth={1.5} /> <MessageCircle className="h-6 w-6" strokeWidth={1.5} />
</button> </button>
</div> </div>
</div> </div>
{/* Likes */} {/* Likes */}
<div className="mb-1"> <div className="px-4 pb-0.5">
<span className="text-sm font-semibold">{likeCount.toLocaleString()} likes</span> <span className="text-sm font-bold">{likeCount.toLocaleString('ru-RU')} отметок «Нравится»</span>
</div> </div>
{/* Caption */} {/* Caption */}
{cat.caption && ( {cat.caption && (
<div className="mb-0.5"> <div className="px-4 pb-0.5">
<span className="text-sm"> <span className="text-sm">
<span className="font-semibold mr-1.5">@{cat.username}</span> <span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption} {cat.caption}
@@ -140,13 +138,15 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
</div> </div>
)} )}
{/* Comment link */} {/* Comments link */}
<div className="px-4 pb-3">
<button <button
onClick={() => onOpen(cat.id)} onClick={() => onOpen(cat.id)}
className="text-sm text-muted-foreground hover:text-foreground transition-colors mt-0.5" className="text-sm text-muted-foreground hover:text-foreground transition-colors"
> >
View comments Смотреть комментарии
</button> </button>
</div> </div>
</div>
); );
} }

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

@@ -24,18 +24,9 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
const [likeCount, setLikeCount] = useState(0); const [likeCount, setLikeCount] = useState(0);
const [animating, setAnimating] = useState(false); const [animating, setAnimating] = useState(false);
useEffect(() => { useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]);
if (likeData) setLiked(likeData.liked); useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]);
}, [likeData]); useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, []);
useEffect(() => {
if (data?.cat) setLikeCount(data.cat.likes_count);
}, [data]);
useEffect(() => {
document.body.style.overflow = 'hidden';
return () => { document.body.style.overflow = ''; };
}, []);
const cat = data?.cat; const cat = data?.cat;
const isOwner = cat && user && cat.user_id === user.id; const isOwner = cat && user && cat.user_id === user.id;
@@ -43,32 +34,23 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
const handleLike = async () => { const handleLike = async () => {
if (isOwner || !user || !cat) return; if (isOwner || !user || !cat) return;
setAnimating(true); setAnimating(true);
setTimeout(() => setAnimating(false), 400); setTimeout(() => setAnimating(false), 450);
if (liked) { if (liked) {
setLiked(false); setLiked(false);
setLikeCount((c) => c - 1); setLikeCount((c) => c - 1);
try { try {
const res = await unlikeMutation.mutateAsync(); const res = await unlikeMutation.mutateAsync();
if (res.ownerPoints !== undefined && cat.user_id === user.id) { if (res.ownerPoints !== undefined && cat.user_id === user.id)
updateUser({ ...user, points: res.ownerPoints }); updateUser({ ...user, points: res.ownerPoints });
}
refetchLike(); refetchLike();
} catch { } catch { setLiked(true); setLikeCount((c) => c + 1); }
setLiked(true);
setLikeCount((c) => c + 1);
}
} else { } else {
setLiked(true); setLiked(true);
setLikeCount((c) => c + 1); setLikeCount((c) => c + 1);
toast('Liked', 'like'); toast('Нравится ♥', 'like');
try { try { await likeMutation.mutateAsync(); refetchLike(); }
await likeMutation.mutateAsync(); catch { setLiked(false); setLikeCount((c) => c - 1); }
refetchLike();
} catch {
setLiked(false);
setLikeCount((c) => c - 1);
}
} }
}; };
@@ -76,80 +58,70 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
if (!isOwner || !cat) return; if (!isOwner || !cat) return;
try { try {
await deleteMutation.mutateAsync(cat.id); await deleteMutation.mutateAsync(cat.id);
toast('Deleted', 'success'); toast('Удалено', 'success');
onClose(); onClose();
} catch { } catch { toast('Ошибка удаления', 'error'); }
toast('Failed to delete', 'error');
}
}; };
if (isLoading || !cat) { if (isLoading || !cat) {
return ( return (
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40" onClick={onClose}> <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={onClose}>
<div className="h-5 w-5 animate-spin rounded-full border-2 border-foreground/30 border-t-foreground" /> <div className="h-6 w-6 animate-spin rounded-full border-2 border-white/40 border-t-white" />
</div> </div>
); );
} }
return ( return (
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4" onClick={onClose}>
<div <div
className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4" className="animate-scale-in flex max-h-[85vh] w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden"
onClick={onClose}
>
<div
className="animate-scale-in flex max-h-[85vh] w-full max-w-3xl bg-white"
onClick={(e) => e.stopPropagation()} onClick={(e) => e.stopPropagation()}
> >
{/* Image */} {/* Image */}
<div className="flex-1 bg-muted flex items-center justify-center min-h-[400px]"> <div className="flex-1 bg-muted flex items-center justify-center min-h-[400px]">
<img <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="max-h-[85vh] w-full object-contain" />
src={cat.image_url}
alt={cat.caption || 'Cat photo'}
className="max-h-[85vh] w-full object-contain"
/>
</div> </div>
{/* Details panel */} {/* Sidebar */}
<div className="flex w-[320px] flex-col border-l"> <div className="flex w-[340px] flex-col border-l">
<div className="flex items-center justify-between px-4 py-3 border-b"> <div className="flex items-center justify-between px-5 py-3.5 border-b">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<Avatar className="h-7 w-7"> <Avatar className="h-8 w-8 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="text-[10px] bg-foreground text-background"> <AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
{cat.username.charAt(0).toUpperCase()} {cat.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-sm font-medium">@{cat.username}</span> <span className="text-sm font-semibold">@{cat.username}</span>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{isOwner && ( {isOwner && (
<button onClick={handleDelete} className="p-1 text-muted-foreground hover:text-destructive transition-colors"> <button onClick={handleDelete} className="p-1.5 rounded-lg text-muted-foreground hover:text-destructive hover:bg-red-50 transition-colors">
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</button> </button>
)} )}
<button onClick={onClose} className="p-1 text-muted-foreground hover:text-foreground transition-colors"> <button onClick={onClose} className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors">
<X className="h-4 w-4" /> <X className="h-4.5 w-4.5" />
</button> </button>
</div> </div>
</div> </div>
{/* Caption */} {/* Body */}
<div className="flex-1 overflow-y-auto px-4 py-3"> <div className="flex-1 overflow-y-auto px-5 py-4">
<div className="flex items-start gap-2.5"> <div className="flex items-start gap-2.5">
<Avatar className="h-7 w-7 shrink-0"> <Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="text-[10px] bg-foreground text-background"> <AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
{cat.username.charAt(0).toUpperCase()} {cat.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<p className="text-sm"> <p className="text-sm">
<span className="font-semibold mr-1.5">@{cat.username}</span> <span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption || 'No caption'} {cat.caption || 'Без подписи'}
</p> </p>
<p className="mt-2 text-xs text-muted-foreground"> <p className="mt-2 text-xs text-muted-foreground">
{new Date(cat.created_at).toLocaleDateString('en-US', { {new Date(cat.created_at).toLocaleDateString('ru-RU', {
year: 'numeric', year: 'numeric', month: 'long', day: 'numeric',
month: 'long', hour: '2-digit', minute: '2-digit',
day: 'numeric',
})} })}
</p> </p>
</div> </div>
@@ -157,7 +129,7 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
</div> </div>
{/* Actions */} {/* Actions */}
<div className="border-t px-4 py-3"> <div className="border-t px-5 py-3.5">
<div className="flex items-center gap-4 mb-2"> <div className="flex items-center gap-4 mb-2">
<button <button
onClick={handleLike} onClick={handleLike}
@@ -165,17 +137,18 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
className={`like-btn ${animating ? 'heart-animate' : ''}`} className={`like-btn ${animating ? 'heart-animate' : ''}`}
> >
<Heart <Heart
className={`h-5 w-5 ${ className={`h-6 w-6 transition-all ${
liked ? 'fill-[#e00] text-[#e00]' : 'text-foreground' liked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
}`} }`}
strokeWidth={liked ? 2 : 1.5} strokeWidth={liked ? 2.5 : 1.5}
/> />
</button> </button>
<button className="hover:text-muted-foreground transition-colors"> <button className="hover:text-primary transition-colors">
<MessageCircle className="h-5 w-5" strokeWidth={1.5} /> <MessageCircle className="h-6 w-6" strokeWidth={1.5} />
</button> </button>
</div> </div>
<span className="text-sm font-semibold">{likeCount.toLocaleString()} likes</span> <span className="text-sm font-bold">{likeCount.toLocaleString('ru-RU')} отметок «Нравится»</span>
<p className="text-xs text-muted-foreground mt-1">🏆 {cat.user_points} баллов</p>
</div> </div>
</div> </div>
</div> </div>

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

@@ -2,7 +2,7 @@ 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 } from 'lucide-react'; import { Trophy, Cat } from 'lucide-react';
export default function FeedSidebar() { export default function FeedSidebar() {
const { user } = useAuth(); const { user } = useAuth();
@@ -25,44 +25,52 @@ export default function FeedSidebar() {
<div className="space-y-6"> <div className="space-y-6">
{user && ( {user && (
<Link to="/profile" className="flex items-center gap-3 group"> <Link to="/profile" className="flex items-center gap-3 group">
<Avatar className="h-10 w-10"> <Avatar className="h-12 w-12 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="bg-foreground text-background text-sm"> <AvatarFallback className="bg-gradient-to-br from-orange-400 to-rose-500 text-white text-sm font-medium">
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<p className="text-sm font-medium group-hover:underline">{user.username}</p> <p className="text-sm font-semibold group-hover:text-primary transition-colors">{user.username}</p>
<p className="text-xs text-muted-foreground">{user.points} pts</p> <p className="text-xs text-muted-foreground">🏆 {user.points} баллов</p>
</div> </div>
</Link> </Link>
)} )}
<div> <div>
<div className="flex items-center gap-1.5 mb-3"> <div className="flex items-center gap-2 mb-4">
<Trophy className="h-3.5 w-3.5 text-muted-foreground" /> <div className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-50">
<h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Leaderboard</h3> <Trophy className="h-3.5 w-3.5 text-amber-600" />
</div> </div>
<h3 className="text-sm font-semibold">Таблица лидеров</h3>
</div>
{topUsers.length === 0 ? ( {topUsers.length === 0 ? (
<p className="text-xs text-muted-foreground">No users yet</p> <p className="text-sm text-muted-foreground">Пока нет пользователей</p>
) : ( ) : (
<div className="space-y-2.5"> <div className="space-y-3">
{topUsers.map(([id, u], i) => ( {topUsers.map(([id, u], i) => (
<Link key={id} to={`/profile/${id}`} className="flex items-center gap-2.5 group"> <Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group">
<span className={`w-4 text-center text-xs font-mono font-bold ${ <span className={`w-5 text-center text-xs font-bold ${
i === 0 ? 'text-foreground' : 'text-muted-foreground' i === 0 ? 'text-amber-500' : i === 1 ? 'text-stone-400' : i === 2 ? 'text-orange-400' : 'text-muted-foreground'
}`}>{i + 1}</span> }`}>{i + 1}</span>
<Avatar className="h-6 w-6"> <Avatar className="h-8 w-8">
<AvatarFallback className="text-[9px] bg-foreground text-background"> <AvatarFallback className="text-[10px] bg-gradient-to-br from-orange-400 to-rose-500 text-white">
{u.username.charAt(0).toUpperCase()} {u.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-xs flex-1 truncate group-hover:underline">{u.username}</span> <span className="text-sm flex-1 truncate font-medium group-hover:text-primary transition-colors">{u.username}</span>
<span className="text-xs font-mono text-muted-foreground">{u.points}</span> <span className="text-xs font-semibold text-muted-foreground">{u.points}</span>
</Link> </Link>
))} ))}
</div> </div>
)} )}
</div> </div>
<div className="pt-4 text-xs text-muted-foreground/60 space-y-1">
<p>Catstagram · Делись фото котов</p>
<p>© 2026</p>
</div>
</div> </div>
); );
} }

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

@@ -1,7 +1,8 @@
import { Link, useNavigate } from 'react-router-dom'; import { Link, useNavigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { LogOut, Plus, Home, User } from 'lucide-react'; import { Button } from '@/components/ui/button';
import { LogOut, Plus, Home, Cat } from 'lucide-react';
export default function Navbar() { export default function Navbar() {
const { user, logout } = useAuth(); const { user, logout } = useAuth();
@@ -10,29 +11,40 @@ export default function Navbar() {
if (!user) return null; if (!user) return null;
return ( return (
<nav className="sticky top-0 z-50 border-b bg-white"> <nav className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur-md shadow-sm">
<div className="mx-auto flex h-12 max-w-5xl items-center justify-between px-4"> <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
<Link to="/feed" className="text-base font-semibold tracking-tight"> <Link to="/feed" className="flex items-center gap-2 group">
<div className="flex h-8 w-8 items-center justify-center rounded-xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-sm transition-transform group-hover:scale-105">
<Cat className="h-4.5 w-4.5 text-white" />
</div>
<span className="text-base font-bold tracking-tight text-foreground">
Catstagram Catstagram
</span>
</Link> </Link>
<div className="flex items-center gap-0.5"> <div className="flex items-center gap-0.5">
<Link to="/feed" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors"> <Link to="/feed">
<Home className="h-4 w-4" /> <Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary">
<Home className="h-4.5 w-4.5" />
</Button>
</Link> </Link>
<Link to="/upload" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors"> <Link to="/upload">
<Plus className="h-4 w-4" /> <Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary">
<Plus className="h-4.5 w-4.5" />
</Button>
</Link> </Link>
<Link to="/profile" className="flex h-9 w-9 items-center justify-center rounded hover:bg-secondary transition-colors"> <Link to="/profile">
<Avatar className="h-6 w-6"> <Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl">
<AvatarFallback className="text-[9px] bg-foreground text-background"> <Avatar className="h-7 w-7">
<AvatarFallback className="text-[10px] bg-gradient-to-br from-orange-400 to-rose-500 text-white">
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
</Button>
</Link> </Link>
<button <button
onClick={() => { logout(); navigate('/login'); }} onClick={() => { logout(); navigate('/login'); }}
className="flex h-9 w-9 items-center justify-center rounded text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors" className="flex h-9 w-9 items-center justify-center rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"
> >
<LogOut className="h-4 w-4" /> <LogOut className="h-4 w-4" />
</button> </button>

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

@@ -7,13 +7,15 @@ interface StoryCircleProps {
export default function StoryCircle({ user }: StoryCircleProps) { export default function StoryCircle({ user }: StoryCircleProps) {
return ( return (
<div className="flex flex-col items-center gap-1 w-14 shrink-0"> <div className="flex flex-col items-center gap-1.5 w-16 shrink-0 group cursor-pointer">
<Avatar className="h-12 w-12 border border-border"> <div className="rounded-full p-0.5 bg-gradient-to-br from-orange-400 to-rose-500">
<AvatarFallback className="bg-foreground text-background text-sm"> <Avatar className="h-13 w-13 border-2 border-white">
<AvatarFallback className="bg-foreground text-background text-sm font-medium">
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-[10px] text-muted-foreground truncate w-full text-center"> </div>
<span className="text-[11px] text-muted-foreground truncate w-full text-center group-hover:text-foreground transition-colors">
{user.username} {user.username}
</span> </span>
</div> </div>

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

@@ -3,7 +3,7 @@ import { X } from 'lucide-react';
type ToastType = 'success' | 'error' | 'info' | 'like'; type ToastType = 'success' | 'error' | 'info' | 'like';
interface Toast { interface ToastItem {
id: number; id: number;
message: string; message: string;
type: ToastType; type: ToastType;
@@ -14,44 +14,35 @@ interface ToastContextType {
} }
const ToastContext = createContext<ToastContextType>(null!); const ToastContext = createContext<ToastContextType>(null!);
let nextId = 0; let nextId = 0;
const iconMap: Record<ToastType, string> = {
success: '✓',
error: '✕',
info: '·',
like: '♥',
};
export function ToastProvider({ children }: { children: ReactNode }) { export function ToastProvider({ children }: { children: ReactNode }) {
const [toasts, setToasts] = useState<Toast[]>([]); const [toasts, setToasts] = useState<ToastItem[]>([]);
const addToast = useCallback((message: string, type: ToastType = 'info') => { const addToast = useCallback((message: string, type: ToastType = 'info') => {
const id = nextId++; const id = nextId++;
setToasts((prev) => [...prev, { id, message, type }]); setToasts((prev) => [...prev, { id, message, type }]);
setTimeout(() => { setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 2500);
setToasts((prev) => prev.filter((t) => t.id !== id));
}, 2200);
}, []); }, []);
const remove = (id: number) => { const remove = (id: number) => setToasts((prev) => prev.filter((t) => t.id !== id));
setToasts((prev) => prev.filter((t) => t.id !== id));
};
return ( return (
<ToastContext.Provider value={{ toast: addToast }}> <ToastContext.Provider value={{ toast: addToast }}>
{children} {children}
<div className="fixed bottom-4 right-4 z-[100] flex flex-col gap-1.5"> <div className="fixed bottom-5 right-5 z-[100] flex flex-col gap-2">
{toasts.map((t) => ( {toasts.map((t) => (
<div <div
key={t.id} key={t.id}
className="animate-slide-up flex items-center gap-2 bg-foreground text-background px-3 py-2 text-sm shadow-lg" className={`animate-slide-up flex items-center gap-2.5 rounded-xl px-4 py-2.5 text-sm font-medium shadow-lg backdrop-blur-sm ${
t.type === 'error'
? 'bg-destructive text-destructive-foreground'
: 'bg-foreground/90 text-background'
}`}
> >
<span className="opacity-70">{iconMap[t.type]}</span>
<span>{t.message}</span> <span>{t.message}</span>
<button onClick={() => remove(t.id)} className="ml-2 opacity-50 hover:opacity-100"> <button onClick={() => remove(t.id)} className="opacity-60 hover:opacity-100 transition-opacity">
<X className="h-3 w-3" /> <X className="h-3.5 w-3.5" />
</button> </button>
</div> </div>
))} ))}

105
client/src/index.css
View File

@@ -1,30 +1,33 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "tailwindcss-animate"; @plugin "tailwindcss-animate";
:root { @custom-variant dark (&:is(.dark *));
--background: #ffffff;
--foreground: #0a0a0a;
--card: #ffffff;
--card-foreground: #0a0a0a;
--popover: #ffffff;
--popover-foreground: #0a0a0a;
--primary: #0a0a0a;
--primary-foreground: #ffffff;
--secondary: #f5f5f5;
--secondary-foreground: #0a0a0a;
--muted: #f7f7f7;
--muted-foreground: #8a8a8a;
--accent: #f0f0f0;
--accent-foreground: #0a0a0a;
--destructive: #e00;
--destructive-foreground: #fff;
--border: #e8e8e8;
--input: #e8e8e8;
--ring: #0a0a0a;
--radius: 0;
--accent-coral: #ff6b35; :root {
--accent-coral-light: #fff4f0; --background: #faf7f3;
--foreground: #1c1613;
--card: #ffffff;
--card-foreground: #1c1613;
--popover: #ffffff;
--popover-foreground: #1c1613;
--primary: #e85d3a;
--primary-foreground: #ffffff;
--secondary: #fff0eb;
--secondary-foreground: #e85d3a;
--muted: #f5f0ec;
--muted-foreground: #8a7f75;
--accent: #fceae3;
--accent-foreground: #1c1613;
--destructive: #e03e2f;
--destructive-foreground: #ffffff;
--border: #e8e0d8;
--input: #e8e0d8;
--ring: #e85d3a;
--radius: 0.75rem;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
--shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04);
--shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04);
} }
* { * {
@@ -34,48 +37,53 @@
body { body {
background-color: var(--background); background-color: var(--background);
color: var(--foreground); color: var(--foreground);
font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
} }
::selection {
background: #e85d3a;
color: white;
}
/* Heart animation */ /* Heart animation */
@keyframes heart-pop { @keyframes heart-pop {
0% { transform: scale(1); } 0% { transform: scale(1); }
25% { transform: scale(1.25); } 25% { transform: scale(1.3); }
50% { transform: scale(0.9); } 50% { transform: scale(0.9); }
75% { transform: scale(1.1); } 75% { transform: scale(1.1); }
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
.heart-animate { .heart-animate {
animation: heart-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); animation: heart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
/* Double tap heart burst */ /* Double tap heart */
@keyframes heart-burst { @keyframes heart-burst {
0% { transform: scale(0) rotate(-15deg); opacity: 1; } 0% { transform: scale(0) rotate(-12deg); opacity: 1; }
60% { transform: scale(1.3) rotate(5deg); opacity: 0.8; } 55% { transform: scale(1.2) rotate(3deg); opacity: 0.8; }
100% { transform: scale(1.8) rotate(0deg); opacity: 0; } 100% { transform: scale(1.6) rotate(0deg); opacity: 0; }
} }
.heart-burst { .heart-burst {
animation: heart-burst 0.6s ease-out forwards; animation: heart-burst 0.5s ease-out forwards;
} }
/* Fade in */ /* Fade in */
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; transform: translateY(6px); } from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
.animate-fade-in { .animate-fade-in {
animation: fade-in 0.3s ease-out; animation: fade-in 0.35s ease-out;
} }
/* Scale in */ /* Scale in */
@keyframes scale-in { @keyframes scale-in {
from { opacity: 0; transform: scale(0.97); } from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); } to { opacity: 1; transform: scale(1); }
} }
@@ -83,9 +91,9 @@ body {
animation: scale-in 0.2s ease-out; animation: scale-in 0.2s ease-out;
} }
/* Slide up for toasts */ /* Slide up */
@keyframes slide-up { @keyframes slide-up {
from { opacity: 0; transform: translateY(12px); } from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
@@ -93,14 +101,14 @@ body {
animation: slide-up 0.25s ease-out; animation: slide-up 0.25s ease-out;
} }
/* Skeleton shimmer */ /* Shimmer */
@keyframes shimmer { @keyframes shimmer {
0% { background-position: -200% 0; } 0% { background-position: -200% 0; }
100% { background-position: 200% 0; } 100% { background-position: 200% 0; }
} }
.skeleton-shimmer { .skeleton-shimmer {
background: linear-gradient(90deg, #f0f0f0 25%, #fafafa 50%, #f0f0f0 75%); background: linear-gradient(90deg, #f0e8e2 25%, #faf7f3 50%, #f0e8e2 75%);
background-size: 200% 100%; background-size: 200% 100%;
animation: shimmer 1.2s ease-in-out infinite; animation: shimmer 1.2s ease-in-out infinite;
} }
@@ -111,29 +119,18 @@ body {
} }
.page-enter-active { .page-enter-active {
opacity: 1; opacity: 1;
transition: opacity 0.15s ease-out; transition: opacity 0.18s ease-out;
} }
/* Like button press */ /* Like button press */
.like-btn { .like-btn {
transition: transform 0.1s; transition: transform 0.1s;
cursor: pointer;
} }
.like-btn:active { .like-btn:active {
transform: scale(0.8); transform: scale(0.8);
} }
/* Hide scrollbar for stories */ /* Scrollbar hide */
.scrollbar-none::-webkit-scrollbar { .scrollbar-none::-webkit-scrollbar { display: none; }
display: none; .scrollbar-none { -ms-overflow-style: none; scrollbar-width: none; }
}
.scrollbar-none {
-ms-overflow-style: none;
scrollbar-width: none;
}
/* Terax-style divider */
.divider-clean {
height: 1px;
background: #e8e8e8;
margin: 24px 0;
}

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

@@ -34,24 +34,21 @@ export default function CatPage() {
const handleLike = async () => { const handleLike = async () => {
if (isOwner || !user || !cat) return; if (isOwner || !user || !cat) return;
setAnimating(true); setAnimating(true);
setTimeout(() => setAnimating(false), 400); setTimeout(() => setAnimating(false), 450);
if (isLiked) { if (isLiked) {
setLiked(false); setLiked(false);
try { try {
const res = await unlikeMutation.mutateAsync(); const res = await unlikeMutation.mutateAsync();
if (res.ownerPoints !== undefined && cat.user_id === user.id) { if (res.ownerPoints !== undefined && cat.user_id === user.id)
updateUser({ ...user, points: res.ownerPoints }); updateUser({ ...user, points: res.ownerPoints });
}
refetchLike(); refetchLike();
} catch { setLiked(true); } } catch { setLiked(true); }
} else { } else {
setLiked(true); setLiked(true);
toast('Liked', 'like'); toast('Нравится ♥', 'like');
try { try { await likeMutation.mutateAsync(); refetchLike(); }
await likeMutation.mutateAsync(); catch { setLiked(false); }
refetchLike();
} catch { setLiked(false); }
} }
}; };
@@ -59,21 +56,19 @@ export default function CatPage() {
if (!isOwner || !cat) return; if (!isOwner || !cat) return;
try { try {
await deleteMutation.mutateAsync(cat.id); await deleteMutation.mutateAsync(cat.id);
toast('Deleted', 'success'); toast('Удалено', 'success');
navigate('/feed'); navigate('/feed');
} catch { } catch { toast('Ошибка удаления', 'error'); }
toast('Failed to delete', 'error');
}
}; };
if (isLoading) { if (isLoading) {
return ( return (
<div className="mx-auto max-w-2xl px-4 py-8"> <div className="mx-auto max-w-2xl px-4 py-8">
<Skeleton className="mb-4 h-5 w-20" /> <Skeleton className="mb-4 h-5 w-20 rounded-xl" />
<Skeleton className="aspect-[4/3] w-full" /> <Skeleton className="aspect-[4/3] w-full rounded-2xl" />
<div className="mt-4 space-y-2"> <div className="mt-4 space-y-2">
<Skeleton className="h-5 w-32" /> <Skeleton className="h-5 w-32 rounded-xl" />
<Skeleton className="h-4 w-48" /> <Skeleton className="h-4 w-48 rounded-xl" />
</div> </div>
</div> </div>
); );
@@ -82,8 +77,8 @@ export default function CatPage() {
if (isError || !cat) { if (isError || !cat) {
return ( return (
<div className="flex flex-col items-center justify-center py-20"> <div className="flex flex-col items-center justify-center py-20">
<p className="text-muted-foreground">Cat not found</p> <p className="text-muted-foreground mb-4">Кот не найден</p>
<Button variant="outline" className="mt-4" onClick={() => navigate('/feed')}>Go to feed</Button> <Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
</div> </div>
); );
} }
@@ -95,66 +90,70 @@ export default function CatPage() {
className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors" className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
Back Назад
</button> </button>
{/* Image */} <div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden">
<div className="bg-muted mb-5"> <div className="bg-muted/30">
<img src={cat.image_url} alt={cat.caption || 'Cat photo'} className="w-full max-h-[60vh] object-contain mx-auto" /> <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="w-full max-h-[60vh] object-contain mx-auto" />
</div> </div>
{/* Info */} <div className="p-5 space-y-3">
<div className="space-y-3"> {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-3">
<Avatar className="h-7 w-7"> <Avatar className="h-9 w-9 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="text-[10px] bg-foreground text-background"> <AvatarFallback className="text-sm bg-gradient-to-br from-orange-400 to-rose-500 text-white font-bold">
{cat.username.charAt(0).toUpperCase()} {cat.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-sm font-medium">@{cat.username}</span> <div>
<span className="text-sm font-bold">@{cat.username}</span>
<p className="text-xs text-muted-foreground">
{new Date(cat.created_at).toLocaleDateString('ru-RU', {
year: 'numeric', month: 'long', day: 'numeric',
hour: '2-digit', minute: '2-digit',
})}
</p>
</div>
</div> </div>
{isOwner && ( {isOwner && (
<button onClick={handleDelete} className="text-muted-foreground hover:text-destructive transition-colors"> <button onClick={handleDelete} className="p-2 rounded-xl text-muted-foreground hover:text-destructive hover:bg-red-50 transition-colors">
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</button> </button>
)} )}
</div> </div>
<div className="flex items-center gap-4"> {/* Actions */}
<div className="flex items-center gap-4 border-t pt-3">
<button <button
onClick={handleLike} onClick={handleLike}
disabled={isOwner || !user} disabled={isOwner || !user}
className={`like-btn ${animating ? 'heart-animate' : ''}`} className={`like-btn ${animating ? 'heart-animate' : ''}`}
> >
<Heart <Heart
className={`h-5 w-5 ${isLiked ? 'fill-[#e00] text-[#e00]' : 'text-foreground'}`} className={`h-6 w-6 transition-all ${
strokeWidth={isLiked ? 2 : 1.5} isLiked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
}`}
strokeWidth={isLiked ? 2.5 : 1.5}
/> />
</button> </button>
<button className="hover:text-muted-foreground transition-colors"> <button className="hover:text-primary transition-colors">
<MessageCircle className="h-5 w-5" strokeWidth={1.5} /> <MessageCircle className="h-6 w-6" strokeWidth={1.5} />
</button> </button>
</div> </div>
<span className="text-sm font-semibold block">{cat.likes_count.toLocaleString()} likes</span> <span className="text-sm font-bold block">{cat.likes_count.toLocaleString('ru-RU')} отметок «Нравится»</span>
{cat.caption && ( {cat.caption && (
<p className="text-sm"> <p className="text-sm">
<span className="font-semibold mr-1.5">@{cat.username}</span> <span className="font-bold mr-1.5">@{cat.username}</span>
{cat.caption} {cat.caption}
</p> </p>
)} )}
<p className="text-xs text-muted-foreground"> <p className="text-xs text-muted-foreground">🏆 {cat.user_points} баллов</p>
{new Date(cat.created_at).toLocaleDateString('en-US', { </div>
year: 'numeric',
month: 'long',
day: 'numeric',
})}
</p>
<p className="text-xs text-muted-foreground">🏆 {cat.user_points} points</p>
</div> </div>
</div> </div>
); );

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

@@ -7,20 +7,20 @@ import StoryCircle from '@/components/StoryCircle';
import CatModal from '@/components/CatModal'; 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 { ChevronLeft, ChevronRight } from 'lucide-react'; import { ChevronLeft, ChevronRight, Cat } from 'lucide-react';
function FeedSkeleton() { function FeedSkeleton() {
return ( return (
<div className="space-y-6"> <div className="space-y-5">
{Array.from({ length: 2 }).map((_, i) => ( {Array.from({ length: 2 }).map((_, i) => (
<div key={i}> <div key={i} className="bg-white rounded-2xl p-4">
<div className="flex items-center gap-2.5 mb-3"> <div className="flex items-center gap-3 mb-3">
<Skeleton className="h-7 w-7 rounded-full" /> <Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-4 w-20" /> <Skeleton className="h-4 w-24" />
</div> </div>
<Skeleton className="aspect-[4/3] w-full" /> <Skeleton className="aspect-[4/3] w-full rounded-xl" />
<div className="mt-3 space-y-1.5"> <div className="mt-3 space-y-2">
<Skeleton className="h-4 w-16" /> <Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-48" /> <Skeleton className="h-4 w-48" />
</div> </div>
</div> </div>
@@ -36,19 +36,22 @@ export default function FeedPage() {
const { user } = useAuth(); const { user } = useAuth();
return ( return (
<div className="mx-auto max-w-5xl px-4 py-8"> <div className="mx-auto max-w-5xl px-4 py-6">
<div className="flex gap-12"> <div className="flex gap-10">
{/* Main feed */} {/* Main feed */}
<div className="flex-1 max-w-[520px] mx-auto lg:mx-0"> <div className="flex-1 max-w-[500px] mx-auto lg:mx-0">
{/* Stories */} {/* Stories */}
<div className="mb-6 pb-6 border-b overflow-hidden"> <div className="bg-white rounded-2xl border border-border/60 shadow-sm px-4 py-3.5 mb-5 overflow-hidden">
<div className="flex gap-4 overflow-x-auto scrollbar-none"> <div className="flex gap-4 overflow-x-auto scrollbar-none">
{user && <StoryCircle user={user} />} {user && <StoryCircle user={user} />}
{data?.cats {data?.cats
.filter((c, i, arr) => arr.findIndex((x) => x.user_id === c.user_id) === i) .filter((c, i, arr) => arr.findIndex((x) => x.user_id === c.user_id) === i)
.slice(0, 7) .slice(0, 7)
.map((c) => ( .map((c) => (
<StoryCircle key={c.user_id} user={{ id: c.user_id, username: c.username, points: c.user_points }} /> <StoryCircle
key={c.user_id}
user={{ id: c.user_id, username: c.username, points: c.user_points }}
/>
))} ))}
</div> </div>
</div> </div>
@@ -57,16 +60,18 @@ export default function FeedPage() {
{isError && ( {isError && (
<div className="flex flex-col items-center justify-center py-20 text-center"> <div className="flex flex-col items-center justify-center py-20 text-center">
<p className="text-muted-foreground">Failed to load cats</p> <Cat className="mb-4 h-12 w-12 text-muted-foreground/40" />
<Button variant="outline" className="mt-4" onClick={() => setPage(1)}>Try again</Button> <p className="text-muted-foreground mb-4">Не удалось загрузить котов</p>
<Button variant="outline" onClick={() => setPage(1)}>Попробовать снова</Button>
</div> </div>
)} )}
{data && data.cats.length === 0 && ( {data && data.cats.length === 0 && (
<div className="flex flex-col items-center justify-center py-20 text-center"> <div className="flex flex-col items-center justify-center py-20 text-center bg-white rounded-2xl border border-border/60 shadow-sm">
<p className="text-2xl font-semibold mb-1">No cats yet</p> <Cat className="mb-4 h-16 w-16 text-muted-foreground/20" />
<p className="text-sm text-muted-foreground mb-4">Be the first to upload a cat photo</p> <h2 className="text-lg font-semibold mb-1">Пока нет котов</h2>
<Button onClick={() => window.location.href = '/upload'}>Upload</Button> <p className="text-sm text-muted-foreground mb-5">Будьте первым, кто загрузит фото кота</p>
<Button onClick={() => window.location.href = '/upload'}>Загрузить кота</Button>
</div> </div>
)} )}
@@ -77,14 +82,14 @@ export default function FeedPage() {
))} ))}
{data.totalPages > 1 && ( {data.totalPages > 1 && (
<div className="flex items-center justify-center gap-4 mt-8 pb-8"> <div className="flex items-center justify-center gap-4 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-xl">
<ChevronLeft className="h-4 w-4" /> <ChevronLeft className="h-4 w-4" />
Previous Назад
</Button> </Button>
<span className="text-sm text-muted-foreground">{data.page} / {data.totalPages}</span> <span className="text-sm text-muted-foreground">{data.page} из {data.totalPages}</span>
<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-xl">
Next Вперёд
<ChevronRight className="h-4 w-4" /> <ChevronRight className="h-4 w-4" />
</Button> </Button>
</div> </div>
@@ -95,15 +100,13 @@ export default function FeedPage() {
{/* Sidebar */} {/* Sidebar */}
<div className="hidden lg:block w-[280px] shrink-0"> <div className="hidden lg:block w-[280px] shrink-0">
<div className="sticky top-20"> <div className="sticky top-20 bg-white rounded-2xl border border-border/60 shadow-sm p-5">
<FeedSidebar /> <FeedSidebar />
</div> </div>
</div> </div>
</div> </div>
{modalCatId && ( {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
<CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />
)}
</div> </div>
); );
} }

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

@@ -3,6 +3,7 @@ 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();
@@ -20,50 +21,65 @@ export default function LoginPage() {
try { try {
await login(username, password); await login(username, password);
} catch (err: any) { } catch (err: any) {
setError(err.response?.data?.error || 'Login failed'); setError(err.response?.data?.error || 'Ошибка входа');
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
return ( return (
<div className="flex min-h-screen items-center justify-center p-4"> <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-orange-50 via-amber-50 to-rose-50 p-4">
<div className="w-full max-w-sm animate-fade-in"> <div className="w-full max-w-sm animate-fade-in">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="text-2xl font-semibold tracking-tight">Catstagram</h1> <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-lg shadow-orange-200/50">
<p className="text-sm text-muted-foreground mt-1">Sign in to your account</p> <Cat className="h-8 w-8 text-white" />
</div>
<h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent">
Catstagram
</h1>
<p className="mt-1.5 text-sm text-muted-foreground">Войдите, чтобы смотреть котов</p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-3"> <div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
<form onSubmit={handleSubmit} className="space-y-3.5">
<Input <Input
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
placeholder="Username" placeholder="Имя пользователя"
required required
autoFocus autoFocus
className="h-10 text-sm" className="h-11 text-sm rounded-xl bg-secondary/50"
/> />
<Input <Input
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Password" placeholder="Пароль"
required required
className="h-10 text-sm" className="h-11 text-sm rounded-xl bg-secondary/50"
/> />
{error && <p className="text-sm text-destructive">{error}</p>} {error && (
<Button type="submit" className="w-full h-10" disabled={loading}> <p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
{loading ? 'Signing in...' : 'Sign in'} )}
<Button
type="submit"
className="w-full h-11 rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
disabled={loading}
>
{loading ? 'Вход...' : 'Войти'}
</Button> </Button>
</form> </form>
</div>
<p className="mt-6 text-center text-sm text-muted-foreground"> <div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
No account?{' '} <p className="text-sm text-muted-foreground">
<Link to="/register" className="font-medium underline-offset-4 hover:underline"> Нет аккаунта?{' '}
Register <Link to="/register" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
Зарегистрироваться
</Link> </Link>
</p> </p>
</div> </div>
</div> </div>
</div>
); );
} }

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

@@ -6,7 +6,7 @@ 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 { Heart, Plus, ArrowLeft } from 'lucide-react'; import { Heart, Plus, ArrowLeft, Grid3X3, Bookmark } from 'lucide-react';
export default function ProfilePage() { export default function ProfilePage() {
const { id: paramId } = useParams<{ id?: string }>(); const { id: paramId } = useParams<{ id?: string }>();
@@ -19,7 +19,9 @@ export default function ProfilePage() {
const { data, isLoading } = useUserCats(profileUserId ?? 0); const { data, isLoading } = useUserCats(profileUserId ?? 0);
const profileUser = isMe ? me : data?.cats?.[0] const profileUser = isMe
? me
: data?.cats?.[0]
? { id: data.cats[0].user_id, username: data.cats[0].username, points: data.cats[0].user_points } ? { id: data.cats[0].user_id, username: data.cats[0].username, points: data.cats[0].user_points }
: null; : null;
@@ -30,13 +32,11 @@ export default function ProfilePage() {
<Skeleton className="h-16 w-16 rounded-full" /> <Skeleton className="h-16 w-16 rounded-full" />
<div className="space-y-2"> <div className="space-y-2">
<Skeleton className="h-6 w-32" /> <Skeleton className="h-6 w-32" />
<Skeleton className="h-4 w-48" /> <div className="flex gap-4"><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /></div>
</div> </div>
</div> </div>
<div className="grid grid-cols-3 gap-0.5"> <div className="grid grid-cols-3 gap-1">
{Array.from({ length: 6 }).map((_, i) => ( {Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-xl" />))}
<Skeleton key={i} className="aspect-square" />
))}
</div> </div>
</div> </div>
); );
@@ -45,8 +45,8 @@ export default function ProfilePage() {
if (!profileUser && !isMe) { if (!profileUser && !isMe) {
return ( return (
<div className="flex flex-col items-center justify-center py-20"> <div className="flex flex-col items-center justify-center py-20">
<p className="text-muted-foreground">User not found</p> <p className="text-muted-foreground mb-4">Пользователь не найден</p>
<Button variant="outline" className="mt-4" onClick={() => navigate('/feed')}>Go to feed</Button> <Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
</div> </div>
); );
} }
@@ -55,44 +55,61 @@ export default function ProfilePage() {
const initials = profileUser?.username?.charAt(0).toUpperCase() || '?'; const initials = profileUser?.username?.charAt(0).toUpperCase() || '?';
const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0); const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
const declension = (n: number, forms: [string, string, string]) => {
n = Math.abs(n) % 100;
const n1 = n % 10;
if (n > 10 && n < 20) return forms[2];
if (n1 > 1 && n1 < 5) return forms[1];
if (n1 === 1) return forms[0];
return forms[2];
};
return ( return (
<div className="mx-auto max-w-4xl px-4 py-10"> <div className="mx-auto max-w-4xl px-4 py-10">
{!isMe && ( {!isMe && (
<button onClick={() => navigate(-1)} className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"> <button onClick={() => navigate(-1)} className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors">
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
Back Назад
</button> </button>
)} )}
{/* Profile header */} {/* Profile header */}
<div className="flex items-start gap-8 mb-10"> <div className="flex items-start gap-8 mb-10">
<Avatar className="h-16 w-16 shrink-0"> <Avatar className="h-20 w-20 shrink-0 ring-2 ring-offset-2 ring-orange-200">
<AvatarFallback className="bg-foreground text-background text-lg font-medium"> <AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-orange-400 to-rose-500 text-white">
{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-4"> <div className="flex items-center gap-3 mb-4">
<h1 className="text-xl font-medium">@{profileUser?.username}</h1> <h1 className="text-xl font-semibold">@{profileUser?.username}</h1>
{/* Edit profile button - only for own profile, navigates to profile settings or does nothing */}
{isMe && ( {isMe && (
<Button variant="outline" size="sm" className="text-xs h-7 rounded-sm"> <Button variant="outline" size="sm" className="rounded-xl text-xs h-8">
Edit profile Редактировать профиль
</Button> </Button>
)} )}
</div> </div>
<div className="flex items-center gap-6 text-sm mb-4"> <div className="flex items-center gap-6 text-sm mb-4">
<div><span className="font-semibold">{cats.length}</span> <span className="text-muted-foreground">posts</span></div> <div>
<div><span className="font-semibold">{totalLikes}</span> <span className="text-muted-foreground">likes</span></div> <span className="font-bold">{cats.length}</span>{' '}
<div><span className="font-semibold">{profileUser?.points ?? 0}</span> <span className="text-muted-foreground">pts</span></div> <span className="text-muted-foreground">{declension(cats.length, ['публикация', 'публикации', 'публикаций'])}</span>
</div>
<div>
<span className="font-bold">{totalLikes}</span>{' '}
<span className="text-muted-foreground">{declension(totalLikes, ['лайк', 'лайка', 'лайков'])}</span>
</div>
<div>
<span className="font-bold">🏆 {profileUser?.points ?? 0}</span>{' '}
<span className="text-muted-foreground">{declension(profileUser?.points ?? 0, ['балл', 'балла', 'баллов'])}</span>
</div>
</div> </div>
{isMe && ( {isMe && (
<Link to="/upload"> <Link to="/upload">
<Button size="sm" className="text-xs h-7 rounded-sm gap-1"> <Button size="sm" className="rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm gap-1">
<Plus className="h-3.5 w-3.5" /> <Plus className="h-4 w-4" />
New post Новая публикация
</Button> </Button>
</Link> </Link>
)} )}
@@ -100,41 +117,41 @@ export default function ProfilePage() {
</div> </div>
{/* Tabs */} {/* Tabs */}
<div className="flex items-center gap-6 border-t pt-4 mb-4"> <div className="flex items-center gap-6 border-t pt-4 mb-1">
<button className="text-xs font-semibold tracking-wider uppercase text-foreground">Posts</button> <button className="flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase text-foreground">
<button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Saved</button> <Grid3X3 className="h-3 w-3" />
<button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Liked</button> Публикации
</button>
<button className="flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">
<Bookmark className="h-3 w-3" />
Сохранённое
</button>
</div> </div>
{/* Grid */} {/* Grid */}
{cats.length === 0 ? ( {cats.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 text-center border-t"> <div className="flex flex-col items-center justify-center py-20 text-center border-t">
<p className="text-base font-medium mb-1">No cats yet</p> <p className="text-base font-medium mb-1">Пока нет котов</p>
<p className="text-sm text-muted-foreground mb-4"> <p className="text-sm text-muted-foreground mb-4">
{isMe ? 'Share your first cat photo' : 'This user has no cats yet'} {isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
</p> </p>
{isMe && ( {isMe && (
<Link to="/upload"> <Link to="/upload">
<Button size="sm">Upload</Button> <Button size="sm" className="rounded-xl">Загрузить кота</Button>
</Link> </Link>
)} )}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-3 gap-0.5"> <div className="grid grid-cols-3 gap-1">
{cats.map((cat) => ( {cats.map((cat) => (
<button <button
key={cat.id} key={cat.id}
onClick={() => setModalCatId(cat.id)} onClick={() => setModalCatId(cat.id)}
className="group relative aspect-square overflow-hidden bg-muted" className="group relative aspect-square overflow-hidden rounded-xl bg-muted"
> >
<img <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy" />
src={cat.image_url} <div className="absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl">
alt={cat.caption || 'Cat photo'} <div className="flex items-center gap-1.5 text-white text-sm font-bold">
className="h-full w-full object-cover transition-transform group-hover:scale-105"
loading="lazy"
/>
<div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center gap-1 text-white text-sm font-medium">
<Heart className="h-4 w-4 fill-white" strokeWidth={2} /> <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
<span>{cat.likes_count}</span> <span>{cat.likes_count}</span>
</div> </div>
@@ -144,9 +161,7 @@ export default function ProfilePage() {
</div> </div>
)} )}
{modalCatId && ( {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
<CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />
)}
</div> </div>
); );
} }

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

@@ -3,6 +3,7 @@ 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();
@@ -19,7 +20,7 @@ export default function RegisterPage() {
setError(''); setError('');
if (password !== confirm) { if (password !== confirm) {
setError('Passwords do not match'); setError('Пароли не совпадают');
return; return;
} }
@@ -27,60 +28,75 @@ export default function RegisterPage() {
try { try {
await register(username, password); await register(username, password);
} catch (err: any) { } catch (err: any) {
setError(err.response?.data?.error || 'Registration failed'); setError(err.response?.data?.error || 'Ошибка регистрации');
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
return ( return (
<div className="flex min-h-screen items-center justify-center p-4"> <div className="flex min-h-screen items-center justify-center bg-gradient-to-br from-orange-50 via-amber-50 to-rose-50 p-4">
<div className="w-full max-w-sm animate-fade-in"> <div className="w-full max-w-sm animate-fade-in">
<div className="text-center mb-8"> <div className="text-center mb-8">
<h1 className="text-2xl font-semibold tracking-tight">Catstagram</h1> <div className="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-orange-400 to-rose-500 shadow-lg shadow-orange-200/50">
<p className="text-sm text-muted-foreground mt-1">Create your account</p> <Cat className="h-8 w-8 text-white" />
</div>
<h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent">
Catstagram
</h1>
<p className="mt-1.5 text-sm text-muted-foreground">Присоединяйтесь к сообществу котоводов</p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-3"> <div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
<form onSubmit={handleSubmit} className="space-y-3.5">
<Input <Input
value={username} value={username}
onChange={(e) => setUsername(e.target.value)} onChange={(e) => setUsername(e.target.value)}
placeholder="Username" placeholder="Имя пользователя"
minLength={3} minLength={3}
required required
autoFocus autoFocus
className="h-10 text-sm" className="h-11 text-sm rounded-xl bg-secondary/50"
/> />
<Input <Input
type="password" type="password"
value={password} value={password}
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Password" placeholder="Пароль"
minLength={4} minLength={4}
required required
className="h-10 text-sm" className="h-11 text-sm rounded-xl bg-secondary/50"
/> />
<Input <Input
type="password" type="password"
value={confirm} value={confirm}
onChange={(e) => setConfirm(e.target.value)} onChange={(e) => setConfirm(e.target.value)}
placeholder="Confirm password" placeholder="Подтвердите пароль"
required required
className="h-10 text-sm" className="h-11 text-sm rounded-xl bg-secondary/50"
/> />
{error && <p className="text-sm text-destructive">{error}</p>} {error && (
<Button type="submit" className="w-full h-10" disabled={loading}> <p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
{loading ? 'Creating account...' : 'Create account'} )}
<Button
type="submit"
className="w-full h-11 rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
disabled={loading}
>
{loading ? 'Создание аккаунта...' : 'Создать аккаунт'}
</Button> </Button>
</form> </form>
</div>
<p className="mt-6 text-center text-sm text-muted-foreground"> <div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
Already have an account?{' '} <p className="text-sm text-muted-foreground">
<Link to="/login" className="font-medium underline-offset-4 hover:underline"> Уже есть аккаунт?{' '}
Sign in <Link to="/login" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
Войти
</Link> </Link>
</p> </p>
</div> </div>
</div> </div>
</div>
); );
} }

79
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 } from 'lucide-react'; import { ArrowLeft, Upload, X, ImageIcon } from 'lucide-react';
export default function UploadPage() { export default function UploadPage() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -35,7 +35,6 @@ export default function UploadPage() {
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);
@@ -43,10 +42,10 @@ export default function UploadPage() {
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) + 10 });
toast('+10 points', 'success'); toast('+10 баллов! 🎉', 'success');
navigate(`/cat/${result.cat.id}`); navigate(`/cat/${result.cat.id}`);
} catch { } catch {
toast('Upload failed', 'error'); toast('Ошибка загрузки', 'error');
} }
}; };
@@ -57,82 +56,100 @@ export default function UploadPage() {
}; };
return ( return (
<div className="mx-auto max-w-xl px-4 py-8"> <div className="mx-auto max-w-xl px-4 py-6">
<button <button
onClick={() => navigate(-1)} onClick={() => navigate(-1)}
className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors" className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
> >
<ArrowLeft className="h-4 w-4" /> <ArrowLeft className="h-4 w-4" />
Back Назад
</button> </button>
<h1 className="text-xl font-medium mb-6">New post</h1> <div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden">
<div className="px-5 py-3.5 border-b">
<h1 className="text-base font-semibold text-center">Новый пост</h1>
</div>
{!preview ? ( {!preview ? (
<div <div
{...getRootProps()} {...getRootProps()}
className={`border border-dashed p-16 text-center cursor-pointer transition-colors ${ className={`flex cursor-pointer flex-col items-center justify-center p-16 text-center transition-all ${
isDragActive ? 'bg-secondary border-foreground' : 'hover:bg-secondary' isDragActive
? 'bg-gradient-to-br from-orange-50 to-rose-50 border-2 border-dashed border-orange-300 m-2 rounded-xl'
: 'hover:bg-secondary/50'
}`} }`}
> >
<input {...getInputProps()} /> <input {...getInputProps()} />
<div className="mb-4"> <div className="mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-secondary">
<Upload className="mx-auto h-6 w-6 text-muted-foreground" strokeWidth={1.5} /> <Upload className={`h-8 w-8 ${isDragActive ? 'text-orange-500' : 'text-muted-foreground'}`} strokeWidth={1.5} />
</div> </div>
<p className="text-sm font-medium mb-1"> <p className="text-base font-medium mb-1">
{isDragActive ? 'Drop your cat here' : 'Drag photo here'} {isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
</p> </p>
<p className="text-xs text-muted-foreground mb-4">or click to browse</p> <p className="text-sm text-muted-foreground mb-5">или нажмите, чтобы выбрать</p>
<Button variant="outline" size="sm">Select file</Button> <Button variant="outline" size="sm" className="rounded-xl">
<p className="mt-3 text-xs text-muted-foreground">JPG, PNG, GIF, WebP · Max 10MB</p> Выбрать файл
</Button>
<p className="mt-4 text-xs text-muted-foreground">JPG, PNG, GIF, WebP · до 10 МБ</p>
</div> </div>
) : ( ) : (
<div className="space-y-4"> <div>
<div className="relative bg-muted"> <div className="relative bg-muted flex items-center justify-center max-h-96 overflow-hidden">
<img src={preview} alt="Preview" className="max-h-96 w-full object-contain" /> <img src={preview} alt="Preview" className="max-h-96 w-full object-contain" />
<button <button
onClick={clearFile} onClick={clearFile}
className="absolute right-2 top-2 flex h-7 w-7 items-center justify-center bg-background border" className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-xl bg-black/50 text-white hover:bg-black/70 transition-colors"
> >
<X className="h-3.5 w-3.5" /> <X className="h-4 w-4" />
</button> </button>
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3 px-4 py-3">
<Avatar className="h-7 w-7 shrink-0 mt-0.5"> <Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="text-[10px] bg-foreground text-background"> <AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
{user?.username?.charAt(0).toUpperCase() || '?'} {user?.username?.charAt(0).toUpperCase() || '?'}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div className="flex-1"> <div className="flex-1">
<p className="text-xs font-medium mb-1">{user?.username}</p> <p className="text-xs font-semibold mb-1">{user?.username}</p>
<textarea <textarea
placeholder="Write a caption..." placeholder="Напишите подпись..."
value={caption} value={caption}
onChange={(e) => setCaption(e.target.value)} onChange={(e) => setCaption(e.target.value)}
maxLength={200} maxLength={200}
rows={2} rows={2}
className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-muted-foreground border-b pb-1" className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-muted-foreground"
/> />
<p className="text-right text-[11px] text-muted-foreground mt-1">{caption.length}/200</p> <p className="text-right text-xs text-muted-foreground mt-1">{caption.length}/200</p>
</div> </div>
</div> </div>
<div className="flex items-center justify-between pt-2"> <div className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-orange-50 to-rose-50 border-t">
<span className="text-xs text-muted-foreground">+10 points</span> <span className="text-sm font-medium text-orange-600">+10 баллов за загрузку</span>
<Button <Button
onClick={handleUpload} onClick={handleUpload}
disabled={uploadMutation.isPending} disabled={uploadMutation.isPending}
size="sm" size="sm"
className="rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm"
> >
{uploadMutation.isPending ? 'Sharing...' : 'Share'} {uploadMutation.isPending ? 'Публикация...' : 'Поделиться'}
</Button> </Button>
</div> </div>
</div> </div>
)} )}
</div>
{preview && (
<div className="mt-4 flex justify-center">
<Button variant="ghost" size="sm" onClick={clearFile} className="text-muted-foreground rounded-xl">
<ImageIcon className="h-4 w-4 mr-1.5" />
Выбрать другое фото
</Button>
</div>
)}
{uploadMutation.isError && ( {uploadMutation.isError && (
<p className="mt-3 text-sm text-destructive text-center">Failed to upload. Try again.</p> <p className="mt-3 text-center text-sm text-destructive">Не удалось загрузить. Попробуйте снова.</p>
)} )}
</div> </div>
); );

8
server/src/routes/auth.ts
View File

@@ -9,18 +9,18 @@ router.post('/register', (req: Request, res: Response) => {
const { username, password } = req.body; const { username, password } = req.body;
if (!username || !password) { if (!username || !password) {
res.status(400).json({ error: 'Username and password required' }); res.status(400).json({ error: 'Заполните все поля' });
return; return;
} }
if (username.length < 3 || password.length < 4) { if (username.length < 3 || password.length < 4) {
res.status(400).json({ error: 'Username min 3 chars, password min 4 chars' }); res.status(400).json({ error: 'Имя от 3 символов, пароль от 4' });
return; return;
} }
const existing = queryOne('SELECT id FROM users WHERE username = ?', [username]); const existing = queryOne('SELECT id FROM users WHERE username = ?', [username]);
if (existing) { if (existing) {
res.status(409).json({ error: 'Username already taken' }); res.status(409).json({ error: 'Имя пользователя уже занято' });
return; return;
} }
@@ -38,7 +38,7 @@ router.post('/login', (req: Request, res: Response) => {
const user = queryOne('SELECT id, username, password_hash, points FROM users WHERE username = ?', [username]); const user = queryOne('SELECT id, username, password_hash, points FROM users WHERE username = ?', [username]);
if (!user || !bcrypt.compareSync(password, user.password_hash)) { if (!user || !bcrypt.compareSync(password, user.password_hash)) {
res.status(401).json({ error: 'Invalid credentials' }); res.status(401).json({ error: 'Неверное имя пользователя или пароль' });
return; return;
} }

2
server/src/routes/cats.ts
View File

@@ -87,7 +87,7 @@ router.get('/:id', (req: AuthRequest, res: Response) => {
router.post('/', authMiddleware, upload.single('image'), (req: AuthRequest, res: Response) => { router.post('/', authMiddleware, upload.single('image'), (req: AuthRequest, res: Response) => {
if (!req.file) { if (!req.file) {
res.status(400).json({ error: 'Image required (jpg, png, gif, webp, max 10MB)' }); res.status(400).json({ error: 'Нужно выбрать изображение (jpg, png, gif, webp, до 10MB)' });
return; return;
} }

4
server/src/routes/likes.ts
View File

@@ -15,13 +15,13 @@ router.post('/:catId', authMiddleware, (req: AuthRequest, res: Response) => {
} }
if (cat.user_id === userId) { if (cat.user_id === userId) {
res.status(400).json({ error: 'Cannot like your own cat' }); res.status(400).json({ error: 'Нельзя лайкать своего кота' });
return; return;
} }
const existing = queryOne('SELECT id FROM likes WHERE cat_id = ? AND user_id = ?', [catId, userId]); const existing = queryOne('SELECT id FROM likes WHERE cat_id = ? AND user_id = ?', [catId, userId]);
if (existing) { if (existing) {
res.status(409).json({ error: 'Already liked' }); res.status(409).json({ error: 'Уже лайкнуто' });
return; return;
} }