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

UI: Telegram-стиль, синий акцент, bubble-карточки

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 10:42:13 +03:00
parent ea0df060e8
commit b277e0f177
13 changed files with 524 additions and 694 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" />
<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" />
<title>Catstagram — фото котов</title>
<title>Catstagram</title>
</head>
<body>
<div id="root"></div>

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

@@ -2,9 +2,8 @@ import { useState } from 'react';
import { Cat } from '@/api/endpoints';
import { useAuth } from '@/hooks/useAuth';
import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Heart, MessageCircle } from 'lucide-react';
import { useToast } from '@/components/Toast';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
interface CatCardProps {
cat: Cat;
@@ -15,23 +14,13 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
const { user, updateUser } = useAuth();
const [liked, setLiked] = useState(false);
const [likeCount, setLikeCount] = useState(cat.likes_count);
const [animating, setAnimating] = useState(false);
const [showHeart, setShowHeart] = useState(false);
const { toast } = useToast();
const likeMutation = useLikeCat(cat.id);
const unlikeMutation = useUnlikeCat(cat.id);
const isOwner = user && cat.user_id === user.id;
const handleDoubleClick = () => {
setShowHeart(true);
setTimeout(() => setShowHeart(false), 500);
if (!liked && !isOwner) handleLikeAction();
};
const handleLikeAction = async () => {
const toggleLike = async () => {
if (isOwner || !user) return;
setAnimating(true);
setTimeout(() => setAnimating(false), 450);
if (liked) {
setLiked(false);
@@ -44,109 +33,90 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
} else {
setLiked(true);
setLikeCount((c) => c + 1);
toast('Нравится ♥', 'like');
toast('Нравится', 'like');
try { await likeMutation.mutateAsync(); }
catch { setLiked(false); setLikeCount((c) => c - 1); }
}
};
const handleLike = () => 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 (
<div className="animate-fade-in bg-white rounded-2xl shadow-sm border border-border/60 overflow-hidden mb-5">
<div className="animate-fade-in mb-2.5 last:mb-0">
<div className="tg-bubble border shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
{/* Header */}
<div className="flex items-center justify-between px-4 py-3">
<div className="flex items-center justify-between px-3.5 py-2.5">
<div
className="flex items-center gap-2.5 cursor-pointer"
onClick={() => window.location.href = `/profile/${cat.user_id}`}
onClick={() => onOpen(cat.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">
<Avatar className="h-8 w-8">
<AvatarFallback className="text-xs bg-[#2aabee] text-white">
{cat.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
<div>
<span className="text-sm font-semibold text-foreground">@{cat.username}</span>
<span className="ml-2 text-xs text-muted-foreground">{formatDate(cat.created_at)}</span>
<span className="text-[15px] font-medium leading-none block">@{cat.username}</span>
<span className="text-[12px] text-[#8e8e93] leading-none mt-0.5 block">
{new Date(cat.created_at).toLocaleDateString('ru-RU', {
day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit',
})}
</span>
</div>
</div>
</div>
{/* Image */}
<div
className="relative bg-gradient-to-b from-transparent to-muted/30 cursor-pointer"
onDoubleClick={handleDoubleClick}
className="cursor-pointer bg-[#f0f0f0]"
onClick={() => onOpen(cat.id)}
>
<img
src={cat.image_url}
alt={cat.caption || 'Фото кота'}
className="w-full max-h-[520px] object-contain select-none"
className="w-full max-h-[460px] object-contain select-none"
draggable={false}
loading="lazy"
/>
{showHeart && (
<div className="absolute inset-0 flex items-center justify-center pointer-events-none">
<Heart className="heart-burst h-24 w-24 text-white drop-shadow-xl" strokeWidth={1.5} />
</div>
)}
</div>
{/* Actions */}
<div className="px-4 pt-3 pb-1">
<div className="flex items-center gap-4">
<button
onClick={handleLike}
disabled={isOwner || !user}
className={`like-btn ${animating ? 'heart-animate' : ''}`}
>
<Heart
className={`h-6 w-6 transition-all ${
liked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
}`}
strokeWidth={liked ? 2.5 : 1.5}
/>
</button>
<button onClick={() => onOpen(cat.id)} className="hover:text-primary transition-colors">
<MessageCircle className="h-6 w-6" strokeWidth={1.5} />
</button>
</div>
</div>
{/* Likes */}
<div className="px-4 pb-0.5">
<span className="text-sm font-bold">{likeCount.toLocaleString('ru-RU')} отметок «Нравится»</span>
</div>
{/* Caption */}
{cat.caption && (
<div className="px-4 pb-0.5">
<span className="text-sm">
<div className="px-3.5 pt-2.5" onClick={() => onOpen(cat.id)}>
<span className="text-[15px] leading-[1.3]">
<span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption}
</span>
</div>
)}
{/* Comments link */}
<div className="px-4 pb-3">
{/* Actions row */}
<div className="flex items-center justify-between px-3.5 py-2.5">
<div className="flex items-center gap-3">
<button
onClick={toggleLike}
disabled={isOwner || !user}
className={`flex items-center gap-1.5 text-[13px] font-medium transition-colors ${
liked ? 'text-[#ff3b30]' : 'text-[#8e8e93] hover:text-black'
}`}
>
<span className={`text-base leading-none ${liked ? 'heart-animate' : ''}`}>
{liked ? '❤️' : '🤍'}
</span>
{likeCount > 0 && <span>{likeCount}</span>}
</button>
<button
onClick={() => onOpen(cat.id)}
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
className="flex items-center gap-1.5 text-[13px] font-medium text-[#8e8e93] hover:text-black transition-colors"
>
Смотреть комментарии
<span className="text-base leading-none">💬</span>
<span>Комментарии</span>
</button>
</div>
{cat.user_points > 0 && (
<span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points}</span>
)}
</div>
</div>
</div>
);
}

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

@@ -4,7 +4,7 @@ import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
import { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/components/Toast';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Heart, MessageCircle, X, Trash2 } from 'lucide-react';
import { X } from 'lucide-react';
interface CatModalProps {
catId: number;
@@ -22,7 +22,6 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
const [liked, setLiked] = useState(false);
const [likeCount, setLikeCount] = useState(0);
const [animating, setAnimating] = useState(false);
useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]);
useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]);
@@ -31,24 +30,20 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
const cat = data?.cat;
const isOwner = cat && user && cat.user_id === user.id;
const handleLike = async () => {
const toggleLike = async () => {
if (isOwner || !user || !cat) return;
setAnimating(true);
setTimeout(() => setAnimating(false), 450);
if (liked) {
setLiked(false);
setLikeCount((c) => c - 1);
try {
const res = await unlikeMutation.mutateAsync();
if (res.ownerPoints !== undefined && cat.user_id === user.id)
updateUser({ ...user, points: res.ownerPoints });
if (res.ownerPoints !== undefined && cat.user_id === user.id) updateUser({ ...user, points: res.ownerPoints });
refetchLike();
} catch { setLiked(true); setLikeCount((c) => c + 1); }
} else {
setLiked(true);
setLikeCount((c) => c + 1);
toast('Нравится ♥', 'like');
toast('Нравится', 'like');
try { await likeMutation.mutateAsync(); refetchLike(); }
catch { setLiked(false); setLikeCount((c) => c - 1); }
}
@@ -65,90 +60,87 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
if (isLoading || !cat) {
return (
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={onClose}>
<div className="h-6 w-6 animate-spin rounded-full border-2 border-white/40 border-t-white" />
<div className="fixed inset-0 z-[60] bg-black/60" onClick={onClose}>
<div className="flex h-full items-center justify-center">
<div className="h-5 w-5 animate-spin rounded-full border-2 border-white/40 border-t-white" />
</div>
</div>
);
}
return (
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4" onClick={onClose}>
<div className="fixed inset-0 z-[60] bg-black/60 flex items-end sm:items-center justify-center" onClick={onClose}>
<div
className="animate-scale-in flex max-h-[85vh] w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden"
className="animate-scale-in w-full sm:max-w-lg bg-white sm:rounded-2xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden"
onClick={(e) => e.stopPropagation()}
>
{/* Image */}
<div className="flex-1 bg-muted flex items-center justify-center min-h-[400px]">
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="max-h-[85vh] w-full object-contain" />
</div>
{/* Sidebar */}
<div className="flex w-[340px] flex-col border-l">
<div className="flex items-center justify-between px-5 py-3.5 border-b">
{/* Header */}
<div className="flex items-center justify-between px-4 py-3 border-b shrink-0">
<div className="flex items-center gap-2.5">
<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">
<Avatar className="h-8 w-8">
<AvatarFallback className="text-xs bg-[#2aabee] text-white">
{cat.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
<span className="text-sm font-semibold">@{cat.username}</span>
<span className="text-[15px] font-semibold">@{cat.username}</span>
</div>
<div className="flex items-center gap-1">
<div className="flex items-center gap-2">
{isOwner && (
<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" />
<button
onClick={handleDelete}
className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1"
>
Удалить
</button>
)}
<button onClick={onClose} className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors">
<X className="h-4.5 w-4.5" />
<button onClick={onClose} className="text-[#8e8e93] hover:text-black transition-colors p-1">
<X className="h-5 w-5" strokeWidth={1.5} />
</button>
</div>
</div>
{/* Body */}
<div className="flex-1 overflow-y-auto px-5 py-4">
{/* Image */}
<div className="bg-[#f0f0f0] flex items-center justify-center shrink-0">
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="w-full max-h-[50vh] object-contain" />
</div>
{/* Info */}
<div className="flex-1 overflow-y-auto px-4 py-3 space-y-2">
<div className="flex items-start gap-2.5">
<Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
<Avatar className="h-7 w-7 shrink-0">
<AvatarFallback className="text-[10px] bg-[#2aabee] text-white">
{cat.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
<div>
<p className="text-sm">
<p className="text-[15px] leading-[1.3]">
<span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption || 'Без подписи'}
</p>
<p className="mt-2 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>
{/* Actions */}
<div className="border-t px-5 py-3.5">
<div className="flex items-center gap-4 mb-2">
<button
onClick={handleLike}
disabled={isOwner || !user}
className={`like-btn ${animating ? 'heart-animate' : ''}`}
>
<Heart
className={`h-6 w-6 transition-all ${
liked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
}`}
strokeWidth={liked ? 2.5 : 1.5}
/>
</button>
<button className="hover:text-primary transition-colors">
<MessageCircle className="h-6 w-6" strokeWidth={1.5} />
</button>
<p className="text-[12px] text-[#8e8e93]">
{new Date(cat.created_at).toLocaleDateString('ru-RU', {
year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
})}
</p>
</div>
<span className="text-sm font-bold">{likeCount.toLocaleString('ru-RU')} отметок «Нравится»</span>
<p className="text-xs text-muted-foreground mt-1">🏆 {cat.user_points} баллов</p>
{/* Actions */}
<div className="border-t px-4 py-3 shrink-0">
<div className="flex items-center gap-4">
<button
onClick={toggleLike}
disabled={isOwner || !user}
className={`flex items-center gap-1.5 text-[15px] font-medium transition-colors ${
liked ? 'text-[#ff3b30]' : 'text-[#8e8e93] hover:text-black'
}`}
>
<span className="text-xl leading-none">{liked ? '❤️' : '🤍'}</span>
{likeCount > 0 && <span>{likeCount}</span>}
</button>
<span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points} баллов</span>
</div>
</div>
</div>

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

@@ -2,7 +2,7 @@ import { useAuth } from '@/hooks/useAuth';
import { useCats } from '@/hooks/useCats';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Link } from 'react-router-dom';
import { Trophy, Cat } from 'lucide-react';
import { Trophy } from 'lucide-react';
export default function FeedSidebar() {
const { user } = useAuth();
@@ -11,65 +11,62 @@ export default function FeedSidebar() {
const usersMap = new Map<number, { username: string; points: number }>();
if (data?.cats) {
for (const cat of data.cats) {
if (!usersMap.has(cat.user_id)) {
if (!usersMap.has(cat.user_id))
usersMap.set(cat.user_id, { username: cat.username, points: cat.user_points });
}
}
}
const topUsers = Array.from(usersMap.entries())
.sort((a, b) => b[1].points - a[1].points)
.slice(0, 5);
return (
<div className="space-y-6">
<div className="space-y-5">
{user && (
<Link to="/profile" className="flex items-center gap-3 group">
<Avatar className="h-12 w-12 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="bg-gradient-to-br from-orange-400 to-rose-500 text-white text-sm font-medium">
<Avatar className="h-11 w-11">
<AvatarFallback className="bg-[#2aabee] text-white text-sm font-semibold">
{user.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
<div>
<p className="text-sm font-semibold group-hover:text-primary transition-colors">{user.username}</p>
<p className="text-xs text-muted-foreground">🏆 {user.points} баллов</p>
<p className="text-[15px] font-medium group-hover:text-[#2aabee] transition-colors">{user.username}</p>
<p className="text-[12px] text-[#8e8e93]">🏆 {user.points} баллов</p>
</div>
</Link>
)}
<div>
<div className="flex items-center gap-2 mb-4">
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-50">
<Trophy className="h-3.5 w-3.5 text-amber-600" />
<div className="flex items-center gap-1.5 mb-3">
<Trophy className="h-4 w-4 text-[#8e8e93]" strokeWidth={1.5} />
<h3 className="text-[13px] font-semibold text-[#8e8e93] uppercase tracking-wider">Лидеры</h3>
</div>
<h3 className="text-sm font-semibold">Таблица лидеров</h3>
</div>
{topUsers.length === 0 ? (
<p className="text-sm text-muted-foreground">Пока нет пользователей</p>
<p className="text-[13px] text-[#8e8e93]">Пока нет пользователей</p>
) : (
<div className="space-y-3">
<div className="space-y-2.5">
{topUsers.map(([id, u], i) => (
<Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group">
<span className={`w-5 text-center text-xs font-bold ${
i === 0 ? 'text-amber-500' : i === 1 ? 'text-stone-400' : i === 2 ? 'text-orange-400' : 'text-muted-foreground'
<span className={`w-5 text-center text-[13px] font-bold ${
i === 0 ? 'text-[#2aabee]' : 'text-[#8e8e93]'
}`}>{i + 1}</span>
<Avatar className="h-8 w-8">
<AvatarFallback className="text-[10px] bg-gradient-to-br from-orange-400 to-rose-500 text-white">
<AvatarFallback className="text-[10px] bg-[#2aabee] text-white">
{u.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
<span className="text-sm flex-1 truncate font-medium group-hover:text-primary transition-colors">{u.username}</span>
<span className="text-xs font-semibold text-muted-foreground">{u.points}</span>
<span className="text-[14px] flex-1 truncate font-medium group-hover:text-[#2aabee] transition-colors">
{u.username}
</span>
<span className="text-[12px] font-medium text-[#8e8e93]">{u.points}</span>
</Link>
))}
</div>
)}
</div>
<div className="pt-4 text-xs text-muted-foreground/60 space-y-1">
<div className="pt-2 text-[11px] text-[#8e8e93]/60 space-y-0.5">
<p>Catstagram · Делись фото котов</p>
<p>© 2026</p>
</div>
</div>
);

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

@@ -1,53 +1,47 @@
import { Link, useNavigate } from 'react-router-dom';
import { Link, useNavigate, useLocation } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { LogOut, Plus, Home, Cat } from 'lucide-react';
export default function Navbar() {
const { user, logout } = useAuth();
const navigate = useNavigate();
const location = useLocation();
if (!user) return null;
return (
<nav className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur-md shadow-sm">
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4">
<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">
<nav className="sticky top-0 z-50 border-b bg-white">
<div className="mx-auto flex h-11 max-w-[660px] items-center justify-between px-4">
<Link to="/feed" className="text-[17px] font-semibold tracking-tight">
Catstagram
</span>
</Link>
<div className="flex items-center gap-0.5">
<Link to="/feed">
<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>
<div className="flex items-center gap-1.5">
<Link
to="/feed"
className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors ${
location.pathname === '/feed' ? 'bg-[#2aabee] text-white' : 'text-[#8e8e93] hover:text-black'
}`}
>
<span className="text-base leading-none">🏠</span>
<span className="hidden sm:inline">Лента</span>
</Link>
<Link to="/upload">
<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
to="/upload"
className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors ${
location.pathname === '/upload' ? 'bg-[#2aabee] text-white' : 'text-[#8e8e93] hover:text-black'
}`}
>
<span className="text-base leading-none">➕</span>
<span className="hidden sm:inline">Добавить</span>
</Link>
<Link to="/profile">
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl">
<Avatar className="h-7 w-7">
<AvatarFallback className="text-[10px] bg-gradient-to-br from-orange-400 to-rose-500 text-white">
<Avatar className="h-7 w-7 ml-0.5">
<AvatarFallback className="text-[9px] bg-[#2aabee] text-white">
{user.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
</Button>
</Link>
<button
onClick={() => { logout(); navigate('/login'); }}
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" />
</button>
</div>
</div>
</nav>

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

@@ -1,17 +1,10 @@
import { createContext, useContext, useState, useCallback, ReactNode } from 'react';
import { X } from 'lucide-react';
type ToastType = 'success' | 'error' | 'info' | 'like';
type ToastType = 'success' | 'error' | 'like';
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!);
let nextId = 0;
@@ -19,10 +12,10 @@ let nextId = 0;
export function ToastProvider({ children }: { children: ReactNode }) {
const [toasts, setToasts] = useState<ToastItem[]>([]);
const addToast = useCallback((message: string, type: ToastType = 'info') => {
const addToast = useCallback((message: string, type: ToastType = 'success') => {
const id = nextId++;
setToasts((prev) => [...prev, { id, message, type }]);
setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 2500);
setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 2000);
}, []);
const remove = (id: number) => setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -30,20 +23,13 @@ export function ToastProvider({ children }: { children: ReactNode }) {
return (
<ToastContext.Provider value={{ toast: addToast }}>
{children}
<div className="fixed bottom-5 right-5 z-[100] flex flex-col gap-2">
<div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] flex flex-col items-center gap-2">
{toasts.map((t) => (
<div
key={t.id}
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'
}`}
className="animate-slide-up rounded-full px-5 py-2.5 text-[14px] font-medium shadow-lg bg-[#2aabee] text-white"
>
<span>{t.message}</span>
<button onClick={() => remove(t.id)} className="opacity-60 hover:opacity-100 transition-opacity">
<X className="h-3.5 w-3.5" />
</button>
</div>
))}
</div>
@@ -51,6 +37,4 @@ export function ToastProvider({ children }: { children: ReactNode }) {
);
}
export function useToast() {
return useContext(ToastContext);
}
export function useToast() { return useContext(ToastContext); }

141
client/src/index.css
View File

@@ -1,134 +1,117 @@
@import "tailwindcss";
@plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));
:root {
--background: #faf7f3;
--foreground: #1c1613;
--background: #f5f5f5;
--foreground: #000000;
--card: #ffffff;
--card-foreground: #1c1613;
--card-foreground: #000000;
--popover: #ffffff;
--popover-foreground: #1c1613;
--primary: #e85d3a;
--popover-foreground: #000000;
--primary: #2aabee;
--primary-foreground: #ffffff;
--secondary: #fff0eb;
--secondary-foreground: #e85d3a;
--muted: #f5f0ec;
--muted-foreground: #8a7f75;
--accent: #fceae3;
--accent-foreground: #1c1613;
--destructive: #e03e2f;
--secondary: #eff2f5;
--secondary-foreground: #000000;
--muted: #f0f0f0;
--muted-foreground: #8e8e93;
--accent: #e8f5ff;
--accent-foreground: #2aabee;
--destructive: #ff3b30;
--destructive-foreground: #ffffff;
--border: #e8e0d8;
--input: #e8e0d8;
--ring: #e85d3a;
--radius: 0.75rem;
--border: #e5e5ea;
--input: #e5e5ea;
--ring: #2aabee;
--radius: 0;
--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);
--tg-blue: #2aabee;
--tg-blue-light: #e8f5ff;
--tg-separator: #e5e5ea;
--tg-bg: #f5f5f5;
--tg-bubble: #ffffff;
--tg-muted: #8e8e93;
}
* {
border-color: var(--border);
}
* { border-color: var(--tg-separator); }
body {
background-color: var(--background);
background-color: var(--tg-bg);
color: var(--foreground);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: #e85d3a;
color: white;
}
::selection { background: var(--tg-blue); color: white; }
/* Heart animation */
@keyframes heart-pop {
0% { transform: scale(1); }
25% { transform: scale(1.3); }
50% { transform: scale(0.9); }
75% { transform: scale(1.1); }
40% { transform: scale(1.2); }
100% { transform: scale(1); }
}
.heart-animate {
animation: heart-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Double tap heart */
@keyframes heart-burst {
0% { transform: scale(0) rotate(-12deg); opacity: 1; }
55% { transform: scale(1.2) rotate(3deg); opacity: 0.8; }
100% { transform: scale(1.6) rotate(0deg); opacity: 0; }
}
.heart-burst {
animation: heart-burst 0.5s ease-out forwards;
}
.heart-animate { animation: heart-pop 0.3s ease-out; }
/* Fade in */
@keyframes fade-in {
from { opacity: 0; transform: translateY(8px); }
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
animation: fade-in 0.35s ease-out;
}
.animate-fade-in { animation: fade-in 0.25s ease-out; }
/* Scale in */
@keyframes scale-in {
from { opacity: 0; transform: scale(0.95); }
from { opacity: 0; transform: scale(0.97); }
to { opacity: 1; transform: scale(1); }
}
.animate-scale-in { animation: scale-in 0.15s ease-out; }
.animate-scale-in {
animation: scale-in 0.2s ease-out;
}
/* Slide up */
/* Slide up for toasts */
@keyframes slide-up {
from { opacity: 0; transform: translateY(10px); }
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up {
animation: slide-up 0.25s ease-out;
}
.animate-slide-up { animation: slide-up 0.2s ease-out; }
/* Shimmer */
@keyframes shimmer {
0% { background-position: -200% 0; }
100% { background-position: 200% 0; }
}
.skeleton-shimmer {
background: linear-gradient(90deg, #f0e8e2 25%, #faf7f3 50%, #f0e8e2 75%);
background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
background-size: 200% 100%;
animation: shimmer 1.2s ease-in-out infinite;
}
/* Page transition */
.page-enter {
opacity: 0;
}
.page-enter-active {
opacity: 1;
transition: opacity 0.18s ease-out;
.page-enter { opacity: 0; }
.page-enter-active { opacity: 1; transition: opacity 0.12s ease-out; }
/* Like button */
.like-btn { transition: transform 0.08s; cursor: pointer; }
.like-btn:active { transform: scale(0.82); }
/* Telegram-style avatar ring */
.tg-avatar {
border-radius: 50%;
background: var(--tg-blue);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
}
/* Like button press */
.like-btn {
transition: transform 0.1s;
cursor: pointer;
/* Telegram-style bubble */
.tg-bubble {
background: white;
border-radius: 12px;
overflow: hidden;
}
.like-btn:active {
transform: scale(0.8);
/* Telegram-style separator */
.tg-divider {
height: 1px;
background: var(--tg-separator);
}
/* Scrollbar hide */

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

@@ -7,7 +7,7 @@ import { useToast } from '@/components/Toast';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import { Heart, ArrowLeft, Trash2, MessageCircle } from 'lucide-react';
import { ArrowLeft } from 'lucide-react';
export default function CatPage() {
const { id } = useParams<{ id: string }>();
@@ -23,30 +23,24 @@ export default function CatPage() {
const deleteMutation = useDeleteCat();
const [liked, setLiked] = useState(false);
const [animating, setAnimating] = useState(false);
const cat = data?.cat;
const isOwner = cat && user && cat.user_id === user.id;
const isLiked = likeData?.liked ?? false;
useEffect(() => { setLiked(isLiked); }, [isLiked]);
const handleLike = async () => {
const toggleLike = async () => {
if (isOwner || !user || !cat) return;
setAnimating(true);
setTimeout(() => setAnimating(false), 450);
if (isLiked) {
setLiked(false);
try {
const res = await unlikeMutation.mutateAsync();
if (res.ownerPoints !== undefined && cat.user_id === user.id)
updateUser({ ...user, points: res.ownerPoints });
if (res.ownerPoints !== undefined && cat.user_id === user.id) updateUser({ ...user, points: res.ownerPoints });
refetchLike();
} catch { setLiked(true); }
} else {
setLiked(true);
toast('Нравится ♥', 'like');
toast('Нравится', 'like');
try { await likeMutation.mutateAsync(); refetchLike(); }
catch { setLiked(false); }
}
@@ -56,19 +50,19 @@ export default function CatPage() {
if (!isOwner || !cat) return;
try {
await deleteMutation.mutateAsync(cat.id);
toast('Удалено', 'success');
toast('Удалено');
navigate('/feed');
} catch { toast('Ошибка удаления', 'error'); }
};
if (isLoading) {
return (
<div className="mx-auto max-w-2xl px-4 py-8">
<Skeleton className="mb-4 h-5 w-20 rounded-xl" />
<div className="mx-auto max-w-[580px] px-4 py-8">
<Skeleton className="mb-4 h-5 w-20 rounded-full" />
<Skeleton className="aspect-[4/3] w-full rounded-2xl" />
<div className="mt-4 space-y-2">
<Skeleton className="h-5 w-32 rounded-xl" />
<Skeleton className="h-4 w-48 rounded-xl" />
<Skeleton className="h-5 w-32 rounded-full" />
<Skeleton className="h-4 w-48 rounded-full" />
</div>
</div>
);
@@ -77,82 +71,76 @@ export default function CatPage() {
if (isError || !cat) {
return (
<div className="flex flex-col items-center justify-center py-20">
<p className="text-muted-foreground mb-4">Кот не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
<p className="text-[15px] text-[#8e8e93] mb-4">Кот не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
</div>
);
}
return (
<div className="mx-auto max-w-2xl px-4 py-8 animate-fade-in">
<div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in">
<button
onClick={() => navigate(-1)}
className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
className="mb-4 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors"
>
<ArrowLeft className="h-4 w-4" />
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
Назад
</button>
<div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden">
<div className="bg-muted/30">
<div className="tg-bubble border shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
<div className="bg-[#f0f0f0]">
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="w-full max-h-[60vh] object-contain mx-auto" />
</div>
<div className="p-5 space-y-3">
<div className="p-4 space-y-3">
{/* Header */}
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<Avatar className="h-9 w-9 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="text-sm bg-gradient-to-br from-orange-400 to-rose-500 text-white font-bold">
<Avatar className="h-9 w-9">
<AvatarFallback className="text-sm bg-[#2aabee] text-white font-semibold">
{cat.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
<div>
<span className="text-sm font-bold">@{cat.username}</span>
<p className="text-xs text-muted-foreground">
<span className="text-[15px] font-semibold">@{cat.username}</span>
<p className="text-[12px] text-[#8e8e93]">
{new Date(cat.created_at).toLocaleDateString('ru-RU', {
year: 'numeric', month: 'long', day: 'numeric',
hour: '2-digit', minute: '2-digit',
year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
})}
</p>
</div>
</div>
{isOwner && (
<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" />
<button onClick={handleDelete} className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1">
Удалить
</button>
)}
</div>
{/* Actions */}
<div className="flex items-center gap-4 border-t pt-3">
<button
onClick={handleLike}
disabled={isOwner || !user}
className={`like-btn ${animating ? 'heart-animate' : ''}`}
>
<Heart
className={`h-6 w-6 transition-all ${
isLiked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
}`}
strokeWidth={isLiked ? 2.5 : 1.5}
/>
</button>
<button className="hover:text-primary transition-colors">
<MessageCircle className="h-6 w-6" strokeWidth={1.5} />
</button>
</div>
<span className="text-sm font-bold block">{cat.likes_count.toLocaleString('ru-RU')} отметок «Нравится»</span>
{/* Caption */}
{cat.caption && (
<p className="text-sm">
<span className="font-bold mr-1.5">@{cat.username}</span>
<p className="text-[15px] leading-[1.3]">
<span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption}
</p>
)}
<p className="text-xs text-muted-foreground">🏆 {cat.user_points} баллов</p>
{/* Actions */}
<div className="flex items-center gap-3 pt-1">
<button
onClick={toggleLike}
disabled={isOwner || !user}
className={`flex items-center gap-1.5 text-[15px] font-medium transition-colors ${
isLiked ? 'text-[#ff3b30]' : 'text-[#8e8e93] hover:text-black'
}`}
>
<span className={`text-xl leading-none ${isLiked ? 'heart-animate' : ''}`}>
{isLiked ? '❤️' : '🤍'}
</span>
{cat.likes_count > 0 && <span>{cat.likes_count}</span>}
</button>
<span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points} баллов</span>
</div>
</div>
</div>
</div>

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

@@ -3,25 +3,24 @@ import { useCats } from '@/hooks/useCats';
import { useAuth } from '@/hooks/useAuth';
import CatCard from '@/components/CatCard';
import FeedSidebar from '@/components/FeedSidebar';
import StoryCircle from '@/components/StoryCircle';
import CatModal from '@/components/CatModal';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { ChevronLeft, ChevronRight, Cat } from 'lucide-react';
import { ChevronLeft, ChevronRight } from 'lucide-react';
function FeedSkeleton() {
return (
<div className="space-y-5">
{Array.from({ length: 2 }).map((_, i) => (
<div key={i} className="bg-white rounded-2xl p-4">
<div className="flex items-center gap-3 mb-3">
<div className="space-y-2.5">
{Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="tg-bubble border">
<div className="flex items-center gap-2.5 px-3.5 py-2.5">
<Skeleton className="h-8 w-8 rounded-full" />
<Skeleton className="h-4 w-24" />
<Skeleton className="h-4 w-24 rounded" />
</div>
<Skeleton className="aspect-[4/3] w-full rounded-xl" />
<div className="mt-3 space-y-2">
<Skeleton className="h-4 w-20" />
<Skeleton className="h-4 w-48" />
<Skeleton className="aspect-[4/3] w-full" />
<div className="p-3 space-y-1.5">
<Skeleton className="h-4 w-32 rounded" />
<Skeleton className="h-4 w-20 rounded" />
</div>
</div>
))}
@@ -33,45 +32,28 @@ export default function FeedPage() {
const [page, setPage] = useState(1);
const [modalCatId, setModalCatId] = useState<number | null>(null);
const { data, isLoading, isError } = useCats(page);
const { user } = useAuth();
return (
<div className="mx-auto max-w-5xl px-4 py-6">
<div className="flex gap-10">
{/* Main feed */}
<div className="flex-1 max-w-[500px] mx-auto lg:mx-0">
{/* Stories */}
<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">
{user && <StoryCircle user={user} />}
{data?.cats
.filter((c, i, arr) => arr.findIndex((x) => x.user_id === c.user_id) === i)
.slice(0, 7)
.map((c) => (
<StoryCircle
key={c.user_id}
user={{ id: c.user_id, username: c.username, points: c.user_points }}
/>
))}
</div>
</div>
<div className="mx-auto max-w-[660px] px-4 py-4">
<div className="flex gap-6">
{/* Feed */}
<div className="flex-1 min-w-0">
{isLoading && <FeedSkeleton />}
{isError && (
<div className="flex flex-col items-center justify-center py-20 text-center">
<Cat className="mb-4 h-12 w-12 text-muted-foreground/40" />
<p className="text-muted-foreground mb-4">Не удалось загрузить котов</p>
<Button variant="outline" onClick={() => setPage(1)}>Попробовать снова</Button>
<p className="text-[15px] text-[#8e8e93] mb-4">Не удалось загрузить котов</p>
<Button variant="outline" onClick={() => setPage(1)} className="rounded-full text-[13px]">Попробовать снова</Button>
</div>
)}
{data && data.cats.length === 0 && (
<div className="flex flex-col items-center justify-center py-20 text-center bg-white rounded-2xl border border-border/60 shadow-sm">
<Cat className="mb-4 h-16 w-16 text-muted-foreground/20" />
<h2 className="text-lg font-semibold mb-1">Пока нет котов</h2>
<p className="text-sm text-muted-foreground mb-5">Будьте первым, кто загрузит фото кота</p>
<Button onClick={() => window.location.href = '/upload'}>Загрузить кота</Button>
<div className="flex flex-col items-center justify-center py-20 text-center">
<p className="text-[17px] font-semibold mb-1">Пока нет котов</p>
<p className="text-[14px] text-[#8e8e93] mb-5">Будьте первым, кто загрузит фото кота</p>
<Button onClick={() => window.location.href = '/upload'} className="rounded-full text-[13px] bg-[#2aabee] hover:bg-[#1d9bd9]">
Загрузить кота
</Button>
</div>
)}
@@ -82,15 +64,15 @@ export default function FeedPage() {
))}
{data.totalPages > 1 && (
<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} className="rounded-xl">
<ChevronLeft className="h-4 w-4" />
<div className="flex items-center justify-center gap-4 mt-4 pb-4">
<Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1} className="rounded-full text-[13px] h-8">
<ChevronLeft className="h-3.5 w-3.5" />
Назад
</Button>
<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} className="rounded-xl">
<span className="text-[13px] text-[#8e8e93]">{data.page} из {data.totalPages}</span>
<Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages} className="rounded-full text-[13px] h-8">
Вперёд
<ChevronRight className="h-4 w-4" />
<ChevronRight className="h-3.5 w-3.5" />
</Button>
</div>
)}
@@ -98,9 +80,9 @@ export default function FeedPage() {
)}
</div>
{/* Sidebar */}
<div className="hidden lg:block w-[280px] shrink-0">
<div className="sticky top-20 bg-white rounded-2xl border border-border/60 shadow-sm p-5">
{/* Sidebar — hidden on mobile */}
<div className="hidden lg:block w-[220px] shrink-0">
<div className="sticky top-16">
<FeedSidebar />
</div>
</div>

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

@@ -22,33 +22,28 @@ export default function LoginPage() {
await login(username, password);
} catch (err: any) {
setError(err.response?.data?.error || 'Ошибка входа');
} finally {
setLoading(false);
}
} finally { setLoading(false); }
};
return (
<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="flex min-h-screen items-center justify-center p-4 bg-[#f5f5f5]">
<div className="w-full max-w-sm animate-fade-in">
<div className="text-center mb-8">
<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">
<Cat className="h-8 w-8 text-white" />
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
<Cat className="h-7 w-7 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>
<h1 className="text-[24px] font-bold">Catstagram</h1>
<p className="text-[14px] text-[#8e8e93] mt-1">Войдите, чтобы смотреть котов</p>
</div>
<div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
<form onSubmit={handleSubmit} className="space-y-3.5">
<div className="space-y-3">
<Input
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Имя пользователя"
required
autoFocus
className="h-11 text-sm rounded-xl bg-secondary/50"
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
<Input
type="password"
@@ -56,30 +51,25 @@ export default function LoginPage() {
onChange={(e) => setPassword(e.target.value)}
placeholder="Пароль"
required
className="h-11 text-sm rounded-xl bg-secondary/50"
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
{error && (
<p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
)}
{error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
<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"
className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
disabled={loading}
>
{loading ? 'Вход...' : 'Войти'}
</Button>
</form>
</div>
<div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
<p className="text-sm text-muted-foreground">
<p className="mt-6 text-center text-[14px] text-[#8e8e93]">
Нет аккаунта?{' '}
<Link to="/register" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
<Link to="/register" className="font-medium text-[#2aabee] hover:underline">
Зарегистрироваться
</Link>
</p>
</div>
</div>
</div>
);
}

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

@@ -6,7 +6,7 @@ import CatModal from '@/components/CatModal';
import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Heart, Plus, ArrowLeft, Grid3X3, Bookmark } from 'lucide-react';
import { ArrowLeft, Plus, Heart } from 'lucide-react';
export default function ProfilePage() {
const { id: paramId } = useParams<{ id?: string }>();
@@ -27,16 +27,16 @@ export default function ProfilePage() {
if (isLoading) {
return (
<div className="mx-auto max-w-4xl px-4 py-10">
<div className="flex items-center gap-6 mb-10">
<div className="mx-auto max-w-[660px] px-4 py-8">
<div className="flex items-center gap-4 mb-8">
<Skeleton className="h-16 w-16 rounded-full" />
<div className="space-y-2">
<Skeleton className="h-6 w-32" />
<div className="flex gap-4"><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /></div>
<Skeleton className="h-5 w-32 rounded" />
<Skeleton className="h-4 w-40 rounded" />
</div>
</div>
<div className="grid grid-cols-3 gap-1">
{Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-xl" />))}
{Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-lg" />))}
</div>
</div>
);
@@ -45,8 +45,8 @@ export default function ProfilePage() {
if (!profileUser && !isMe) {
return (
<div className="flex flex-col items-center justify-center py-20">
<p className="text-muted-foreground mb-4">Пользователь не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
<p className="text-[15px] text-[#8e8e93] mb-4">Пользователь не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
</div>
);
}
@@ -55,89 +55,68 @@ export default function ProfilePage() {
const initials = profileUser?.username?.charAt(0).toUpperCase() || '?';
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 (
<div className="mx-auto max-w-4xl px-4 py-10">
<div className="mx-auto max-w-[660px] px-4 py-8">
{!isMe && (
<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" />
<button onClick={() => navigate(-1)} className="mb-5 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors">
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
Назад
</button>
)}
{/* Profile header */}
<div className="flex items-start gap-8 mb-10">
<Avatar className="h-20 w-20 shrink-0 ring-2 ring-offset-2 ring-orange-200">
<AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-orange-400 to-rose-500 text-white">
<div className="flex items-center gap-5 mb-8">
<Avatar className="h-16 w-16 shrink-0">
<AvatarFallback className="text-xl font-semibold bg-[#2aabee] text-white">
{initials}
</AvatarFallback>
</Avatar>
<div className="flex-1 min-w-0">
<div className="flex items-center gap-3 mb-4">
<h1 className="text-xl font-semibold">@{profileUser?.username}</h1>
<div className="flex items-center gap-3 mb-1.5">
<h1 className="text-[18px] font-semibold">@{profileUser?.username}</h1>
{isMe && (
<Button variant="outline" size="sm" className="rounded-xl text-xs h-8">
Редактировать профиль
<Button variant="outline" size="sm" className="rounded-full text-[12px] h-7 px-3">
Редактировать
</Button>
)}
</div>
<div className="flex items-center gap-6 text-sm mb-4">
<div className="flex items-center gap-4 text-[14px]">
<div>
<span className="font-bold">{cats.length}</span>{' '}
<span className="text-muted-foreground">{declension(cats.length, ['публикация', 'публикации', 'публикаций'])}</span>
<span className="font-semibold">{cats.length}</span>{' '}
<span className="text-[#8e8e93]">публикаций</span>
</div>
<div>
<span className="font-bold">{totalLikes}</span>{' '}
<span className="text-muted-foreground">{declension(totalLikes, ['лайк', 'лайка', 'лайков'])}</span>
<span className="font-semibold">{totalLikes}</span>{' '}
<span className="text-[#8e8e93]">лайков</span>
</div>
<div>
<span className="font-bold">🏆 {profileUser?.points ?? 0}</span>{' '}
<span className="text-muted-foreground">{declension(profileUser?.points ?? 0, ['балл', 'балла', 'баллов'])}</span>
<span className="font-semibold">🏆{profileUser?.points ?? 0}</span>{' '}
<span className="text-[#8e8e93]">баллов</span>
</div>
</div>
{isMe && (
<div className="mt-3">
<Link to="/upload">
<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-4 w-4" />
<Button size="sm" className="rounded-full text-[13px] h-8 bg-[#2aabee] hover:bg-[#1d9bd9] gap-1">
<Plus className="h-3.5 w-3.5" strokeWidth={2} />
Новая публикация
</Button>
</Link>
</div>
)}
</div>
</div>
{/* Tabs */}
<div className="flex items-center gap-6 border-t pt-4 mb-1">
<button className="flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase text-foreground">
<Grid3X3 className="h-3 w-3" />
Публикации
</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>
{/* Grid */}
{cats.length === 0 ? (
<div className="flex flex-col items-center justify-center py-20 text-center border-t">
<p className="text-base font-medium mb-1">Пока нет котов</p>
<p className="text-sm text-muted-foreground mb-4">
<div className="flex flex-col items-center justify-center py-16 text-center">
<p className="text-[15px] font-medium mb-1">Пока нет котов</p>
<p className="text-[13px] text-[#8e8e93] mb-4">
{isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
</p>
{isMe && (
<Link to="/upload">
<Button size="sm" className="rounded-xl">Загрузить кота</Button>
<Button size="sm" className="rounded-full text-[13px] bg-[#2aabee] hover:bg-[#1d9bd9]">Загрузить кота</Button>
</Link>
)}
</div>
@@ -147,11 +126,11 @@ export default function ProfilePage() {
<button
key={cat.id}
onClick={() => setModalCatId(cat.id)}
className="group relative aspect-square overflow-hidden rounded-xl bg-muted"
className="group relative aspect-square overflow-hidden bg-[#f0f0f0]"
>
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} 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/20 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl">
<div className="flex items-center gap-1.5 text-white text-sm font-bold">
<div className="absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center gap-1 text-white text-[13px] font-semibold drop-shadow-lg">
<Heart className="h-4 w-4 fill-white" strokeWidth={2} />
<span>{cat.likes_count}</span>
</div>

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

@@ -29,26 +29,21 @@ export default function RegisterPage() {
await register(username, password);
} catch (err: any) {
setError(err.response?.data?.error || 'Ошибка регистрации');
} finally {
setLoading(false);
}
} finally { setLoading(false); }
};
return (
<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="flex min-h-screen items-center justify-center p-4 bg-[#f5f5f5]">
<div className="w-full max-w-sm animate-fade-in">
<div className="text-center mb-8">
<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">
<Cat className="h-8 w-8 text-white" />
<div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
<Cat className="h-7 w-7 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>
<h1 className="text-[24px] font-bold">Catstagram</h1>
<p className="text-[14px] text-[#8e8e93] mt-1">Присоединяйтесь к сообществу</p>
</div>
<div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6">
<form onSubmit={handleSubmit} className="space-y-3.5">
<div className="space-y-3">
<Input
value={username}
onChange={(e) => setUsername(e.target.value)}
@@ -56,7 +51,7 @@ export default function RegisterPage() {
minLength={3}
required
autoFocus
className="h-11 text-sm rounded-xl bg-secondary/50"
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
<Input
type="password"
@@ -65,7 +60,7 @@ export default function RegisterPage() {
placeholder="Пароль"
minLength={4}
required
className="h-11 text-sm rounded-xl bg-secondary/50"
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
<Input
type="password"
@@ -73,30 +68,25 @@ export default function RegisterPage() {
onChange={(e) => setConfirm(e.target.value)}
placeholder="Подтвердите пароль"
required
className="h-11 text-sm rounded-xl bg-secondary/50"
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
{error && (
<p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
)}
{error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
<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"
className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
disabled={loading}
>
{loading ? 'Создание аккаунта...' : 'Создать аккаунт'}
{loading ? 'Создание...' : 'Создать аккаунт'}
</Button>
</form>
</div>
<div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center">
<p className="text-sm text-muted-foreground">
<p className="mt-6 text-center text-[14px] text-[#8e8e93]">
Уже есть аккаунт?{' '}
<Link to="/login" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
<Link to="/login" className="font-medium text-[#2aabee] hover:underline">
Войти
</Link>
</p>
</div>
</div>
</div>
);
}

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

@@ -6,7 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/components/Toast';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { ArrowLeft, Upload, X, ImageIcon } from 'lucide-react';
import { ArrowLeft, Upload, X } from 'lucide-react';
export default function UploadPage() {
const navigate = useNavigate();
@@ -42,11 +42,9 @@ export default function UploadPage() {
try {
const result = await uploadMutation.mutateAsync(fd);
if (user) updateUser({ ...user, points: (user.points || 0) + 10 });
toast('+10 баллов! 🎉', 'success');
toast('+10 баллов');
navigate(`/cat/${result.cat.id}`);
} catch {
toast('Ошибка загрузки', 'error');
}
} catch { toast('Ошибка загрузки', 'error'); }
};
const clearFile = () => {
@@ -56,100 +54,83 @@ export default function UploadPage() {
};
return (
<div className="mx-auto max-w-xl px-4 py-6">
<div className="mx-auto max-w-[580px] px-4 py-6">
<button
onClick={() => navigate(-1)}
className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
className="mb-4 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors"
>
<ArrowLeft className="h-4 w-4" />
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
Назад
</button>
<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>
<h1 className="text-[20px] font-semibold mb-5">Новая публикация</h1>
{!preview ? (
<div
{...getRootProps()}
className={`flex cursor-pointer flex-col items-center justify-center p-16 text-center transition-all ${
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'
className={`border border-dashed rounded-2xl p-16 text-center cursor-pointer transition-colors ${
isDragActive ? 'border-[#2aabee] bg-[#e8f5ff]' : 'hover:bg-[#f0f0f0] border-[#d1d1d6]'
}`}
>
<input {...getInputProps()} />
<div className="mb-5 flex h-20 w-20 items-center justify-center rounded-full bg-secondary">
<Upload className={`h-8 w-8 ${isDragActive ? 'text-orange-500' : 'text-muted-foreground'}`} strokeWidth={1.5} />
<div className="mb-4">
<Upload className="mx-auto h-8 w-8 text-[#8e8e93]" strokeWidth={1.5} />
</div>
<p className="text-base font-medium mb-1">
<p className="text-[15px] font-medium mb-1">
{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
</p>
<p className="text-sm text-muted-foreground mb-5">или нажмите, чтобы выбрать</p>
<Button variant="outline" size="sm" className="rounded-xl">
Выбрать файл
</Button>
<p className="mt-4 text-xs text-muted-foreground">JPG, PNG, GIF, WebP · до 10 МБ</p>
<p className="text-[13px] text-[#8e8e93] mb-5">или нажмите, чтобы выбрать</p>
<Button variant="outline" size="sm" className="rounded-full text-[13px]">Выбрать файл</Button>
<p className="mt-4 text-[12px] text-[#8e8e93]">JPG, PNG, GIF, WebP · до 10 МБ</p>
</div>
) : (
<div>
<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" />
<div className="space-y-4">
<div className="relative bg-[#f0f0f0] rounded-2xl overflow-hidden">
<img src={preview} alt="Preview" className="max-h-[400px] w-full object-contain" />
<button
onClick={clearFile}
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"
className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
>
<X className="h-4 w-4" />
</button>
</div>
<div className="flex items-start gap-3 px-4 py-3">
<Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200">
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
<div className="flex items-start gap-3">
<Avatar className="h-8 w-8 shrink-0">
<AvatarFallback className="text-xs bg-[#2aabee] text-white">
{user?.username?.charAt(0).toUpperCase() || '?'}
</AvatarFallback>
</Avatar>
<div className="flex-1">
<p className="text-xs font-semibold mb-1">{user?.username}</p>
<p className="text-[13px] font-medium mb-1">{user?.username}</p>
<textarea
placeholder="Напишите подпись..."
placeholder="Подпись к фото..."
value={caption}
onChange={(e) => setCaption(e.target.value)}
maxLength={200}
rows={2}
className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-muted-foreground"
className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[#8e8e93]"
/>
<p className="text-right text-xs text-muted-foreground mt-1">{caption.length}/200</p>
<p className="text-right text-[11px] text-[#8e8e93] mt-0.5">{caption.length}/200</p>
</div>
</div>
<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-sm font-medium text-orange-600">+10 баллов за загрузку</span>
<div className="flex items-center justify-between pt-2">
<span className="text-[13px] text-[#8e8e93]">+10 баллов</span>
<Button
onClick={handleUpload}
disabled={uploadMutation.isPending}
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"
className="rounded-full text-[14px] bg-[#2aabee] hover:bg-[#1d9bd9] px-6"
>
{uploadMutation.isPending ? 'Публикация...' : 'Поделиться'}
{uploadMutation.isPending ? 'Публикация...' : 'Опубликовать'}
</Button>
</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 && (
<p className="mt-3 text-center text-sm text-destructive">Не удалось загрузить. Попробуйте снова.</p>
<p className="mt-3 text-center text-[13px] text-[#ff3b30]">Не удалось загрузить. Попробуйте снова.</p>
)}
</div>
);