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" /> <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>

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

@@ -2,9 +2,8 @@ import { useState } from 'react';
import { Cat } from '@/api/endpoints'; import { Cat } from '@/api/endpoints';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes'; 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 { useToast } from '@/components/Toast';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
interface CatCardProps { interface CatCardProps {
cat: Cat; cat: Cat;
@@ -15,23 +14,13 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
const { user, updateUser } = useAuth(); const { user, updateUser } = useAuth();
const [liked, setLiked] = useState(false); const [liked, setLiked] = useState(false);
const [likeCount, setLikeCount] = useState(cat.likes_count); const [likeCount, setLikeCount] = useState(cat.likes_count);
const [animating, setAnimating] = useState(false);
const [showHeart, setShowHeart] = useState(false);
const { toast } = useToast(); const { toast } = useToast();
const likeMutation = useLikeCat(cat.id); const likeMutation = useLikeCat(cat.id);
const unlikeMutation = useUnlikeCat(cat.id); const unlikeMutation = useUnlikeCat(cat.id);
const isOwner = user && cat.user_id === user.id; const isOwner = user && cat.user_id === user.id;
const handleDoubleClick = () => { const toggleLike = async () => {
setShowHeart(true);
setTimeout(() => setShowHeart(false), 500);
if (!liked && !isOwner) handleLikeAction();
};
const handleLikeAction = async () => {
if (isOwner || !user) return; if (isOwner || !user) return;
setAnimating(true);
setTimeout(() => setAnimating(false), 450);
if (liked) { if (liked) {
setLiked(false); setLiked(false);
@@ -44,109 +33,90 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
} else { } else {
setLiked(true); setLiked(true);
setLikeCount((c) => c + 1); setLikeCount((c) => c + 1);
toast('Нравится ♥', 'like'); toast('Нравится', 'like');
try { await likeMutation.mutateAsync(); } try { await likeMutation.mutateAsync(); }
catch { setLiked(false); setLikeCount((c) => c - 1); } 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 ( 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 */} {/* 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 <div
className="flex items-center gap-2.5 cursor-pointer" 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"> <Avatar className="h-8 w-8">
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white"> <AvatarFallback className="text-xs bg-[#2aabee] text-white">
{cat.username.charAt(0).toUpperCase()} {cat.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<span className="text-sm font-semibold text-foreground">@{cat.username}</span> <span className="text-[15px] font-medium leading-none block">@{cat.username}</span>
<span className="ml-2 text-xs text-muted-foreground">{formatDate(cat.created_at)}</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> </div>
</div> </div>
{/* Image */} {/* Image */}
<div <div
className="relative bg-gradient-to-b from-transparent to-muted/30 cursor-pointer" className="cursor-pointer bg-[#f0f0f0]"
onDoubleClick={handleDoubleClick}
onClick={() => onOpen(cat.id)} onClick={() => onOpen(cat.id)}
> >
<img <img
src={cat.image_url} src={cat.image_url}
alt={cat.caption || 'Фото кота'} 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} draggable={false}
loading="lazy" 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> </div>
{/* Caption */} {/* Caption */}
{cat.caption && ( {cat.caption && (
<div className="px-4 pb-0.5"> <div className="px-3.5 pt-2.5" onClick={() => onOpen(cat.id)}>
<span className="text-sm"> <span className="text-[15px] leading-[1.3]">
<span className="font-semibold mr-1.5">@{cat.username}</span> <span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption} {cat.caption}
</span> </span>
</div> </div>
)} )}
{/* Comments link */} {/* Actions row */}
<div className="px-4 pb-3"> <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 <button
onClick={() => onOpen(cat.id)} 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> </button>
</div> </div>
{cat.user_points > 0 && (
<span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points}</span>
)}
</div>
</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 { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/components/Toast'; import { useToast } from '@/components/Toast';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Heart, MessageCircle, X, Trash2 } from 'lucide-react'; import { X } from 'lucide-react';
interface CatModalProps { interface CatModalProps {
catId: number; catId: number;
@@ -22,7 +22,6 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
const [liked, setLiked] = useState(false); const [liked, setLiked] = useState(false);
const [likeCount, setLikeCount] = useState(0); const [likeCount, setLikeCount] = useState(0);
const [animating, setAnimating] = useState(false);
useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]); useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]);
useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]); 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 cat = data?.cat;
const isOwner = cat && user && cat.user_id === user.id; const isOwner = cat && user && cat.user_id === user.id;
const handleLike = async () => { const toggleLike = async () => {
if (isOwner || !user || !cat) return; if (isOwner || !user || !cat) return;
setAnimating(true);
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 { 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('Нравится ♥', 'like'); toast('Нравится', 'like');
try { await likeMutation.mutateAsync(); refetchLike(); } try { await likeMutation.mutateAsync(); refetchLike(); }
catch { setLiked(false); setLikeCount((c) => c - 1); } catch { setLiked(false); setLikeCount((c) => c - 1); }
} }
@@ -65,90 +60,87 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
if (isLoading || !cat) { if (isLoading || !cat) {
return ( return (
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={onClose}> <div className="fixed inset-0 z-[60] bg-black/60" onClick={onClose}>
<div className="h-6 w-6 animate-spin rounded-full border-2 border-white/40 border-t-white" /> <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> </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 className="fixed inset-0 z-[60] bg-black/60 flex items-end sm:items-center justify-center" onClick={onClose}>
<div <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()} onClick={(e) => e.stopPropagation()}
> >
{/* Image */} {/* Header */}
<div className="flex-1 bg-muted flex items-center justify-center min-h-[400px]"> <div className="flex items-center justify-between px-4 py-3 border-b shrink-0">
<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">
<div className="flex items-center gap-2.5"> <div className="flex items-center gap-2.5">
<Avatar className="h-8 w-8 ring-2 ring-offset-1 ring-orange-200"> <Avatar className="h-8 w-8">
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white"> <AvatarFallback className="text-xs bg-[#2aabee] text-white">
{cat.username.charAt(0).toUpperCase()} {cat.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-sm font-semibold">@{cat.username}</span> <span className="text-[15px] font-semibold">@{cat.username}</span>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-2">
{isOwner && ( {isOwner && (
<button onClick={handleDelete} className="p-1.5 rounded-lg text-muted-foreground hover:text-destructive hover:bg-red-50 transition-colors"> <button
<Trash2 className="h-4 w-4" /> onClick={handleDelete}
className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1"
>
Удалить
</button> </button>
)} )}
<button onClick={onClose} className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors"> <button onClick={onClose} className="text-[#8e8e93] hover:text-black transition-colors p-1">
<X className="h-4.5 w-4.5" /> <X className="h-5 w-5" strokeWidth={1.5} />
</button> </button>
</div> </div>
</div> </div>
{/* Body */} {/* Image */}
<div className="flex-1 overflow-y-auto px-5 py-4"> <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"> <div className="flex items-start gap-2.5">
<Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200"> <Avatar className="h-7 w-7 shrink-0">
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white"> <AvatarFallback className="text-[10px] bg-[#2aabee] 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-[15px] leading-[1.3]">
<span className="font-semibold mr-1.5">@{cat.username}</span> <span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption || 'Без подписи'} {cat.caption || 'Без подписи'}
</p> </p>
<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>
</div> </div>
{/* Actions */} <p className="text-[12px] text-[#8e8e93]">
<div className="border-t px-5 py-3.5"> {new Date(cat.created_at).toLocaleDateString('ru-RU', {
<div className="flex items-center gap-4 mb-2"> year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
<button })}
onClick={handleLike} </p>
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>
</div> </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> </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 { 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, Cat } from 'lucide-react'; import { Trophy } from 'lucide-react';
export default function FeedSidebar() { export default function FeedSidebar() {
const { user } = useAuth(); const { user } = useAuth();
@@ -11,65 +11,62 @@ export default function FeedSidebar() {
const usersMap = new Map<number, { username: string; points: number }>(); const usersMap = new Map<number, { username: string; points: number }>();
if (data?.cats) { if (data?.cats) {
for (const cat of 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 }); usersMap.set(cat.user_id, { username: cat.username, points: cat.user_points });
} }
} }
}
const topUsers = Array.from(usersMap.entries()) const topUsers = Array.from(usersMap.entries())
.sort((a, b) => b[1].points - a[1].points) .sort((a, b) => b[1].points - a[1].points)
.slice(0, 5); .slice(0, 5);
return ( return (
<div className="space-y-6"> <div className="space-y-5">
{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-12 w-12 ring-2 ring-offset-1 ring-orange-200"> <Avatar className="h-11 w-11">
<AvatarFallback className="bg-gradient-to-br from-orange-400 to-rose-500 text-white text-sm font-medium"> <AvatarFallback className="bg-[#2aabee] text-white text-sm font-semibold">
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<p className="text-sm font-semibold group-hover:text-primary transition-colors">{user.username}</p> <p className="text-[15px] font-medium group-hover:text-[#2aabee] transition-colors">{user.username}</p>
<p className="text-xs text-muted-foreground">🏆 {user.points} баллов</p> <p className="text-[12px] text-[#8e8e93]">🏆 {user.points} баллов</p>
</div> </div>
</Link> </Link>
)} )}
<div> <div>
<div className="flex items-center gap-2 mb-4"> <div className="flex items-center gap-1.5 mb-3">
<div className="flex h-7 w-7 items-center justify-center rounded-lg bg-amber-50"> <Trophy className="h-4 w-4 text-[#8e8e93]" strokeWidth={1.5} />
<Trophy className="h-3.5 w-3.5 text-amber-600" /> <h3 className="text-[13px] font-semibold text-[#8e8e93] uppercase tracking-wider">Лидеры</h3>
</div> </div>
<h3 className="text-sm font-semibold">Таблица лидеров</h3>
</div>
{topUsers.length === 0 ? ( {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) => ( {topUsers.map(([id, u], i) => (
<Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group"> <Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group">
<span className={`w-5 text-center text-xs font-bold ${ <span className={`w-5 text-center text-[13px] font-bold ${
i === 0 ? 'text-amber-500' : i === 1 ? 'text-stone-400' : i === 2 ? 'text-orange-400' : 'text-muted-foreground' i === 0 ? 'text-[#2aabee]' : 'text-[#8e8e93]'
}`}>{i + 1}</span> }`}>{i + 1}</span>
<Avatar className="h-8 w-8"> <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()} {u.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<span className="text-sm flex-1 truncate font-medium group-hover:text-primary transition-colors">{u.username}</span> <span className="text-[14px] flex-1 truncate font-medium group-hover:text-[#2aabee] transition-colors">
<span className="text-xs font-semibold text-muted-foreground">{u.points}</span> {u.username}
</span>
<span className="text-[12px] font-medium text-[#8e8e93]">{u.points}</span>
</Link> </Link>
))} ))}
</div> </div>
)} )}
</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>Catstagram · Делись фото котов</p>
<p>© 2026</p>
</div> </div>
</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 { useAuth } from '@/hooks/useAuth';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; 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() { export default function Navbar() {
const { user, logout } = useAuth(); const { user, logout } = useAuth();
const navigate = useNavigate(); const navigate = useNavigate();
const location = useLocation();
if (!user) return null; if (!user) return null;
return ( return (
<nav className="sticky top-0 z-50 border-b bg-white/80 backdrop-blur-md shadow-sm"> <nav className="sticky top-0 z-50 border-b bg-white">
<div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-4"> <div className="mx-auto flex h-11 max-w-[660px] items-center justify-between px-4">
<Link to="/feed" className="flex items-center gap-2 group"> <Link to="/feed" className="text-[17px] font-semibold tracking-tight">
<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-1.5">
<Link to="/feed"> <Link
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary"> to="/feed"
<Home className="h-4.5 w-4.5" /> className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors ${
</Button> 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>
<Link to="/upload"> <Link
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl text-muted-foreground hover:text-foreground hover:bg-secondary"> to="/upload"
<Plus className="h-4.5 w-4.5" /> className={`flex items-center gap-1 px-3 py-1.5 rounded-full text-[13px] font-medium transition-colors ${
</Button> 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>
<Link to="/profile"> <Link to="/profile">
<Button variant="ghost" size="icon" className="h-9 w-9 rounded-xl"> <Avatar className="h-7 w-7 ml-0.5">
<Avatar className="h-7 w-7"> <AvatarFallback className="text-[9px] bg-[#2aabee] text-white">
<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
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>
</div> </div>
</nav> </nav>

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

@@ -1,17 +1,10 @@
import { createContext, useContext, useState, useCallback, ReactNode } from 'react'; 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 { interface ToastItem { id: number; message: string; type: ToastType; }
id: number;
message: string;
type: ToastType;
}
interface ToastContextType { interface ToastContextType { toast: (message: string, type?: ToastType) => void; }
toast: (message: string, type?: ToastType) => void;
}
const ToastContext = createContext<ToastContextType>(null!); const ToastContext = createContext<ToastContextType>(null!);
let nextId = 0; let nextId = 0;
@@ -19,10 +12,10 @@ let nextId = 0;
export function ToastProvider({ children }: { children: ReactNode }) { export function ToastProvider({ children }: { children: ReactNode }) {
const [toasts, setToasts] = useState<ToastItem[]>([]); const [toasts, setToasts] = useState<ToastItem[]>([]);
const addToast = useCallback((message: string, type: ToastType = 'info') => { const addToast = useCallback((message: string, type: ToastType = 'success') => {
const id = nextId++; const id = nextId++;
setToasts((prev) => [...prev, { id, message, type }]); setToasts((prev) => [...prev, { id, message, type }]);
setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 2500); setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 2000);
}, []); }, []);
const remove = (id: number) => setToasts((prev) => prev.filter((t) => t.id !== id)); const remove = (id: number) => setToasts((prev) => prev.filter((t) => t.id !== id));
@@ -30,20 +23,13 @@ export function ToastProvider({ children }: { children: ReactNode }) {
return ( return (
<ToastContext.Provider value={{ toast: addToast }}> <ToastContext.Provider value={{ toast: addToast }}>
{children} {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) => ( {toasts.map((t) => (
<div <div
key={t.id} 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 ${ className="animate-slide-up rounded-full px-5 py-2.5 text-[14px] font-medium shadow-lg bg-[#2aabee] text-white"
t.type === 'error'
? 'bg-destructive text-destructive-foreground'
: 'bg-foreground/90 text-background'
}`}
> >
<span>{t.message}</span> <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>
))} ))}
</div> </div>
@@ -51,6 +37,4 @@ export function ToastProvider({ children }: { children: ReactNode }) {
); );
} }
export function useToast() { export function useToast() { return useContext(ToastContext); }
return useContext(ToastContext);
}

141
client/src/index.css
View File

@@ -1,134 +1,117 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "tailwindcss-animate"; @plugin "tailwindcss-animate";
@custom-variant dark (&:is(.dark *));
:root { :root {
--background: #faf7f3; --background: #f5f5f5;
--foreground: #1c1613; --foreground: #000000;
--card: #ffffff; --card: #ffffff;
--card-foreground: #1c1613; --card-foreground: #000000;
--popover: #ffffff; --popover: #ffffff;
--popover-foreground: #1c1613; --popover-foreground: #000000;
--primary: #e85d3a; --primary: #2aabee;
--primary-foreground: #ffffff; --primary-foreground: #ffffff;
--secondary: #fff0eb; --secondary: #eff2f5;
--secondary-foreground: #e85d3a; --secondary-foreground: #000000;
--muted: #f5f0ec; --muted: #f0f0f0;
--muted-foreground: #8a7f75; --muted-foreground: #8e8e93;
--accent: #fceae3; --accent: #e8f5ff;
--accent-foreground: #1c1613; --accent-foreground: #2aabee;
--destructive: #e03e2f; --destructive: #ff3b30;
--destructive-foreground: #ffffff; --destructive-foreground: #ffffff;
--border: #e8e0d8; --border: #e5e5ea;
--input: #e8e0d8; --input: #e5e5ea;
--ring: #e85d3a; --ring: #2aabee;
--radius: 0.75rem; --radius: 0;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04); --tg-blue: #2aabee;
--shadow-md: 0 4px 12px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.04); --tg-blue-light: #e8f5ff;
--shadow-lg: 0 12px 32px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.04); --tg-separator: #e5e5ea;
--tg-bg: #f5f5f5;
--tg-bubble: #ffffff;
--tg-muted: #8e8e93;
} }
* { * { border-color: var(--tg-separator); }
border-color: var(--border);
}
body { body {
background-color: var(--background); background-color: var(--tg-bg);
color: var(--foreground); 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; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} }
::selection { ::selection { background: var(--tg-blue); color: white; }
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.3); } 40% { transform: scale(1.2); }
50% { transform: scale(0.9); }
75% { transform: scale(1.1); }
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
.heart-animate { animation: heart-pop 0.3s ease-out; }
.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;
}
/* Fade in */ /* Fade in */
@keyframes fade-in { @keyframes fade-in {
from { opacity: 0; transform: translateY(8px); } from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
.animate-fade-in { animation: fade-in 0.25s ease-out; }
.animate-fade-in {
animation: fade-in 0.35s ease-out;
}
/* Scale in */ /* Scale in */
@keyframes 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); } to { opacity: 1; transform: scale(1); }
} }
.animate-scale-in { animation: scale-in 0.15s ease-out; }
.animate-scale-in { /* Slide up for toasts */
animation: scale-in 0.2s ease-out;
}
/* Slide up */
@keyframes slide-up { @keyframes slide-up {
from { opacity: 0; transform: translateY(10px); } from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
.animate-slide-up { animation: slide-up 0.2s ease-out; }
.animate-slide-up {
animation: slide-up 0.25s ease-out;
}
/* 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, #f0e8e2 25%, #faf7f3 50%, #f0e8e2 75%); background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 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;
} }
/* Page transition */ /* Page transition */
.page-enter { .page-enter { opacity: 0; }
opacity: 0; .page-enter-active { opacity: 1; transition: opacity 0.12s ease-out; }
}
.page-enter-active { /* Like button */
opacity: 1; .like-btn { transition: transform 0.08s; cursor: pointer; }
transition: opacity 0.18s ease-out; .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 */ /* Telegram-style bubble */
.like-btn { .tg-bubble {
transition: transform 0.1s; background: white;
cursor: pointer; 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 */ /* 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 { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from '@/components/ui/skeleton';
import { Heart, ArrowLeft, Trash2, MessageCircle } from 'lucide-react'; import { ArrowLeft } from 'lucide-react';
export default function CatPage() { export default function CatPage() {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
@@ -23,30 +23,24 @@ export default function CatPage() {
const deleteMutation = useDeleteCat(); const deleteMutation = useDeleteCat();
const [liked, setLiked] = useState(false); const [liked, setLiked] = useState(false);
const [animating, setAnimating] = useState(false);
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;
const isLiked = likeData?.liked ?? false; const isLiked = likeData?.liked ?? false;
useEffect(() => { setLiked(isLiked); }, [isLiked]); useEffect(() => { setLiked(isLiked); }, [isLiked]);
const handleLike = async () => { const toggleLike = async () => {
if (isOwner || !user || !cat) return; if (isOwner || !user || !cat) return;
setAnimating(true);
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('Нравится ♥', 'like'); toast('Нравится', 'like');
try { await likeMutation.mutateAsync(); refetchLike(); } try { await likeMutation.mutateAsync(); refetchLike(); }
catch { setLiked(false); } catch { setLiked(false); }
} }
@@ -56,19 +50,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('Удалено', 'success'); toast('Удалено');
navigate('/feed'); navigate('/feed');
} catch { toast('Ошибка удаления', 'error'); } } catch { toast('Ошибка удаления', 'error'); }
}; };
if (isLoading) { if (isLoading) {
return ( return (
<div className="mx-auto max-w-2xl px-4 py-8"> <div className="mx-auto max-w-[580px] px-4 py-8">
<Skeleton className="mb-4 h-5 w-20 rounded-xl" /> <Skeleton className="mb-4 h-5 w-20 rounded-full" />
<Skeleton className="aspect-[4/3] w-full rounded-2xl" /> <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 rounded-xl" /> <Skeleton className="h-5 w-32 rounded-full" />
<Skeleton className="h-4 w-48 rounded-xl" /> <Skeleton className="h-4 w-48 rounded-full" />
</div> </div>
</div> </div>
); );
@@ -77,82 +71,76 @@ 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 mb-4">Кот не найден</p> <p className="text-[15px] text-[#8e8e93] mb-4">Кот не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button> <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
</div> </div>
); );
} }
return ( 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 <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-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> </button>
<div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden"> <div className="tg-bubble border shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
<div className="bg-muted/30"> <div className="bg-[#f0f0f0]">
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} 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>
<div className="p-5 space-y-3"> <div className="p-4 space-y-3">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Avatar className="h-9 w-9 ring-2 ring-offset-1 ring-orange-200"> <Avatar className="h-9 w-9">
<AvatarFallback className="text-sm bg-gradient-to-br from-orange-400 to-rose-500 text-white font-bold"> <AvatarFallback className="text-sm bg-[#2aabee] text-white font-semibold">
{cat.username.charAt(0).toUpperCase()} {cat.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<span className="text-sm font-bold">@{cat.username}</span> <span className="text-[15px] font-semibold">@{cat.username}</span>
<p className="text-xs text-muted-foreground"> <p className="text-[12px] text-[#8e8e93]">
{new Date(cat.created_at).toLocaleDateString('ru-RU', { {new Date(cat.created_at).toLocaleDateString('ru-RU', {
year: 'numeric', month: 'long', day: 'numeric', year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
hour: '2-digit', minute: '2-digit',
})} })}
</p> </p>
</div> </div>
</div> </div>
{isOwner && ( {isOwner && (
<button onClick={handleDelete} className="p-2 rounded-xl text-muted-foreground hover:text-destructive hover:bg-red-50 transition-colors"> <button onClick={handleDelete} className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1">
<Trash2 className="h-4 w-4" /> Удалить
</button> </button>
)} )}
</div> </div>
{/* Actions */} {/* Caption */}
<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>
{cat.caption && ( {cat.caption && (
<p className="text-sm"> <p className="text-[15px] leading-[1.3]">
<span className="font-bold mr-1.5">@{cat.username}</span> <span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption} {cat.caption}
</p> </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> </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 { useAuth } from '@/hooks/useAuth';
import CatCard from '@/components/CatCard'; import CatCard from '@/components/CatCard';
import FeedSidebar from '@/components/FeedSidebar'; import FeedSidebar from '@/components/FeedSidebar';
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, Cat } from 'lucide-react'; import { ChevronLeft, ChevronRight } from 'lucide-react';
function FeedSkeleton() { function FeedSkeleton() {
return ( return (
<div className="space-y-5"> <div className="space-y-2.5">
{Array.from({ length: 2 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="bg-white rounded-2xl p-4"> <div key={i} className="tg-bubble border">
<div className="flex items-center gap-3 mb-3"> <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-8 w-8 rounded-full" />
<Skeleton className="h-4 w-24" /> <Skeleton className="h-4 w-24 rounded" />
</div> </div>
<Skeleton className="aspect-[4/3] w-full rounded-xl" /> <Skeleton className="aspect-[4/3] w-full" />
<div className="mt-3 space-y-2"> <div className="p-3 space-y-1.5">
<Skeleton className="h-4 w-20" /> <Skeleton className="h-4 w-32 rounded" />
<Skeleton className="h-4 w-48" /> <Skeleton className="h-4 w-20 rounded" />
</div> </div>
</div> </div>
))} ))}
@@ -33,45 +32,28 @@ export default function FeedPage() {
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
const [modalCatId, setModalCatId] = useState<number | null>(null); const [modalCatId, setModalCatId] = useState<number | null>(null);
const { data, isLoading, isError } = useCats(page); const { data, isLoading, isError } = useCats(page);
const { user } = useAuth();
return ( return (
<div className="mx-auto max-w-5xl px-4 py-6"> <div className="mx-auto max-w-[660px] px-4 py-4">
<div className="flex gap-10"> <div className="flex gap-6">
{/* Main feed */} {/* Feed */}
<div className="flex-1 max-w-[500px] mx-auto lg:mx-0"> <div className="flex-1 min-w-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>
{isLoading && <FeedSkeleton />} {isLoading && <FeedSkeleton />}
{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">
<Cat className="mb-4 h-12 w-12 text-muted-foreground/40" /> <p className="text-[15px] text-[#8e8e93] mb-4">Не удалось загрузить котов</p>
<p className="text-muted-foreground mb-4">Не удалось загрузить котов</p> <Button variant="outline" onClick={() => setPage(1)} className="rounded-full text-[13px]">Попробовать снова</Button>
<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 bg-white rounded-2xl border border-border/60 shadow-sm"> <div className="flex flex-col items-center justify-center py-20 text-center">
<Cat className="mb-4 h-16 w-16 text-muted-foreground/20" /> <p className="text-[17px] font-semibold mb-1">Пока нет котов</p>
<h2 className="text-lg font-semibold mb-1">Пока нет котов</h2> <p className="text-[14px] text-[#8e8e93] mb-5">Будьте первым, кто загрузит фото кота</p>
<p className="text-sm text-muted-foreground mb-5">Будьте первым, кто загрузит фото кота</p> <Button onClick={() => window.location.href = '/upload'} className="rounded-full text-[13px] bg-[#2aabee] hover:bg-[#1d9bd9]">
<Button onClick={() => window.location.href = '/upload'}>Загрузить кота</Button> Загрузить кота
</Button>
</div> </div>
)} )}
@@ -82,15 +64,15 @@ export default function FeedPage() {
))} ))}
{data.totalPages > 1 && ( {data.totalPages > 1 && (
<div className="flex items-center justify-center gap-4 mt-6 pb-6"> <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-xl"> <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-4 w-4" /> <ChevronLeft className="h-3.5 w-3.5" />
Назад Назад
</Button> </Button>
<span className="text-sm text-muted-foreground">{data.page} из {data.totalPages}</span> <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-xl"> <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> </Button>
</div> </div>
)} )}
@@ -98,9 +80,9 @@ export default function FeedPage() {
)} )}
</div> </div>
{/* Sidebar */} {/* Sidebar — hidden on mobile */}
<div className="hidden lg:block w-[280px] shrink-0"> <div className="hidden lg:block w-[220px] shrink-0">
<div className="sticky top-20 bg-white rounded-2xl border border-border/60 shadow-sm p-5"> <div className="sticky top-16">
<FeedSidebar /> <FeedSidebar />
</div> </div>
</div> </div>

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

@@ -22,33 +22,28 @@ export default function LoginPage() {
await login(username, password); await login(username, password);
} catch (err: any) { } catch (err: any) {
setError(err.response?.data?.error || 'Ошибка входа'); setError(err.response?.data?.error || 'Ошибка входа');
} finally { } finally { setLoading(false); }
setLoading(false);
}
}; };
return ( 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="w-full max-w-sm animate-fade-in">
<div className="text-center mb-8"> <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"> <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
<Cat className="h-8 w-8 text-white" /> <Cat className="h-7 w-7 text-white" />
</div> </div>
<h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent"> <h1 className="text-[24px] font-bold">Catstagram</h1>
Catstagram <p className="text-[14px] text-[#8e8e93] mt-1">Войдите, чтобы смотреть котов</p>
</h1>
<p className="mt-1.5 text-sm text-muted-foreground">Войдите, чтобы смотреть котов</p>
</div> </div>
<div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6"> <div className="space-y-3">
<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="Имя пользователя" placeholder="Имя пользователя"
required required
autoFocus autoFocus
className="h-11 text-sm rounded-xl bg-secondary/50" className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/> />
<Input <Input
type="password" type="password"
@@ -56,30 +51,25 @@ export default function LoginPage() {
onChange={(e) => setPassword(e.target.value)} onChange={(e) => setPassword(e.target.value)}
placeholder="Пароль" placeholder="Пароль"
required required
className="h-11 text-sm rounded-xl bg-secondary/50" className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/> />
{error && ( {error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
<p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
)}
<Button <Button
type="submit" 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} disabled={loading}
> >
{loading ? 'Вход...' : 'Войти'} {loading ? 'Вход...' : 'Войти'}
</Button> </Button>
</form>
</div> </div>
<div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center"> <p className="mt-6 text-center text-[14px] text-[#8e8e93]">
<p className="text-sm text-muted-foreground">
Нет аккаунта?{' '} Нет аккаунта?{' '}
<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> </Link>
</p> </p>
</div> </div>
</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 { 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, Grid3X3, Bookmark } from 'lucide-react'; import { ArrowLeft, Plus, Heart } from 'lucide-react';
export default function ProfilePage() { export default function ProfilePage() {
const { id: paramId } = useParams<{ id?: string }>(); const { id: paramId } = useParams<{ id?: string }>();
@@ -27,16 +27,16 @@ export default function ProfilePage() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="mx-auto max-w-4xl px-4 py-10"> <div className="mx-auto max-w-[660px] px-4 py-8">
<div className="flex items-center gap-6 mb-10"> <div className="flex items-center gap-4 mb-8">
<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-5 w-32 rounded" />
<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-4 w-40 rounded" />
</div> </div>
</div> </div>
<div className="grid grid-cols-3 gap-1"> <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>
</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 mb-4">Пользователь не найден</p> <p className="text-[15px] text-[#8e8e93] mb-4">Пользователь не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button> <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
</div> </div>
); );
} }
@@ -55,89 +55,68 @@ 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-[660px] px-4 py-8">
{!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-5 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> </button>
)} )}
{/* Profile header */} {/* Profile header */}
<div className="flex items-start gap-8 mb-10"> <div className="flex items-center gap-5 mb-8">
<Avatar className="h-20 w-20 shrink-0 ring-2 ring-offset-2 ring-orange-200"> <Avatar className="h-16 w-16 shrink-0">
<AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-orange-400 to-rose-500 text-white"> <AvatarFallback className="text-xl font-semibold bg-[#2aabee] 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-1.5">
<h1 className="text-xl font-semibold">@{profileUser?.username}</h1> <h1 className="text-[18px] font-semibold">@{profileUser?.username}</h1>
{isMe && ( {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> </Button>
)} )}
</div> </div>
<div className="flex items-center gap-4 text-[14px]">
<div className="flex items-center gap-6 text-sm mb-4">
<div> <div>
<span className="font-bold">{cats.length}</span>{' '} <span className="font-semibold">{cats.length}</span>{' '}
<span className="text-muted-foreground">{declension(cats.length, ['публикация', 'публикации', 'публикаций'])}</span> <span className="text-[#8e8e93]">публикаций</span>
</div> </div>
<div> <div>
<span className="font-bold">{totalLikes}</span>{' '} <span className="font-semibold">{totalLikes}</span>{' '}
<span className="text-muted-foreground">{declension(totalLikes, ['лайк', 'лайка', 'лайков'])}</span> <span className="text-[#8e8e93]">лайков</span>
</div> </div>
<div> <div>
<span className="font-bold">🏆 {profileUser?.points ?? 0}</span>{' '} <span className="font-semibold">🏆{profileUser?.points ?? 0}</span>{' '}
<span className="text-muted-foreground">{declension(profileUser?.points ?? 0, ['балл', 'балла', 'баллов'])}</span> <span className="text-[#8e8e93]">баллов</span>
</div> </div>
</div> </div>
{isMe && ( {isMe && (
<div className="mt-3">
<Link to="/upload"> <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"> <Button size="sm" className="rounded-full text-[13px] h-8 bg-[#2aabee] hover:bg-[#1d9bd9] gap-1">
<Plus className="h-4 w-4" /> <Plus className="h-3.5 w-3.5" strokeWidth={2} />
Новая публикация Новая публикация
</Button> </Button>
</Link> </Link>
</div>
)} )}
</div> </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 */} {/* 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-16 text-center">
<p className="text-base font-medium mb-1">Пока нет котов</p> <p className="text-[15px] font-medium mb-1">Пока нет котов</p>
<p className="text-sm text-muted-foreground mb-4"> <p className="text-[13px] text-[#8e8e93] mb-4">
{isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'} {isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
</p> </p>
{isMe && ( {isMe && (
<Link to="/upload"> <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> </Link>
)} )}
</div> </div>
@@ -147,11 +126,11 @@ export default function ProfilePage() {
<button <button
key={cat.id} key={cat.id}
onClick={() => setModalCatId(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" /> <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="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.5 text-white text-sm font-bold"> <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} /> <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
<span>{cat.likes_count}</span> <span>{cat.likes_count}</span>
</div> </div>

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

@@ -29,26 +29,21 @@ export default function RegisterPage() {
await register(username, password); await register(username, password);
} catch (err: any) { } catch (err: any) {
setError(err.response?.data?.error || 'Ошибка регистрации'); setError(err.response?.data?.error || 'Ошибка регистрации');
} finally { } finally { setLoading(false); }
setLoading(false);
}
}; };
return ( 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="w-full max-w-sm animate-fade-in">
<div className="text-center mb-8"> <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"> <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
<Cat className="h-8 w-8 text-white" /> <Cat className="h-7 w-7 text-white" />
</div> </div>
<h1 className="text-2xl font-bold bg-gradient-to-r from-orange-500 to-rose-500 bg-clip-text text-transparent"> <h1 className="text-[24px] font-bold">Catstagram</h1>
Catstagram <p className="text-[14px] text-[#8e8e93] mt-1">Присоединяйтесь к сообществу</p>
</h1>
<p className="mt-1.5 text-sm text-muted-foreground">Присоединяйтесь к сообществу котоводов</p>
</div> </div>
<div className="bg-white rounded-2xl border border-border/60 shadow-sm p-6"> <div className="space-y-3">
<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)}
@@ -56,7 +51,7 @@ export default function RegisterPage() {
minLength={3} minLength={3}
required required
autoFocus autoFocus
className="h-11 text-sm rounded-xl bg-secondary/50" className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/> />
<Input <Input
type="password" type="password"
@@ -65,7 +60,7 @@ export default function RegisterPage() {
placeholder="Пароль" placeholder="Пароль"
minLength={4} minLength={4}
required required
className="h-11 text-sm rounded-xl bg-secondary/50" className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/> />
<Input <Input
type="password" type="password"
@@ -73,30 +68,25 @@ export default function RegisterPage() {
onChange={(e) => setConfirm(e.target.value)} onChange={(e) => setConfirm(e.target.value)}
placeholder="Подтвердите пароль" placeholder="Подтвердите пароль"
required required
className="h-11 text-sm rounded-xl bg-secondary/50" className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/> />
{error && ( {error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
<p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{error}</p>
)}
<Button <Button
type="submit" 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} disabled={loading}
> >
{loading ? 'Создание аккаунта...' : 'Создать аккаунт'} {loading ? 'Создание...' : 'Создать аккаунт'}
</Button> </Button>
</form>
</div> </div>
<div className="mt-4 bg-white rounded-2xl border border-border/60 shadow-sm p-5 text-center"> <p className="mt-6 text-center text-[14px] text-[#8e8e93]">
<p className="text-sm text-muted-foreground">
Уже есть аккаунт?{' '} Уже есть аккаунт?{' '}
<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> </Link>
</p> </p>
</div> </div>
</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 { 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, ImageIcon } from 'lucide-react'; import { ArrowLeft, Upload, X } from 'lucide-react';
export default function UploadPage() { export default function UploadPage() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -42,11 +42,9 @@ 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 баллов! 🎉', 'success'); toast('+10 баллов');
navigate(`/cat/${result.cat.id}`); navigate(`/cat/${result.cat.id}`);
} catch { } catch { toast('Ошибка загрузки', 'error'); }
toast('Ошибка загрузки', 'error');
}
}; };
const clearFile = () => { const clearFile = () => {
@@ -56,100 +54,83 @@ export default function UploadPage() {
}; };
return ( return (
<div className="mx-auto max-w-xl px-4 py-6"> <div className="mx-auto max-w-[580px] 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-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> </button>
<div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden"> <h1 className="text-[20px] font-semibold mb-5">Новая публикация</h1>
<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={`flex cursor-pointer flex-col items-center justify-center p-16 text-center transition-all ${ className={`border border-dashed rounded-2xl p-16 text-center cursor-pointer transition-colors ${
isDragActive isDragActive ? 'border-[#2aabee] bg-[#e8f5ff]' : 'hover:bg-[#f0f0f0] border-[#d1d1d6]'
? '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-5 flex h-20 w-20 items-center justify-center rounded-full bg-secondary"> <div className="mb-4">
<Upload className={`h-8 w-8 ${isDragActive ? 'text-orange-500' : 'text-muted-foreground'}`} strokeWidth={1.5} /> <Upload className="mx-auto h-8 w-8 text-[#8e8e93]" strokeWidth={1.5} />
</div> </div>
<p className="text-base font-medium mb-1"> <p className="text-[15px] font-medium mb-1">
{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'} {isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
</p> </p>
<p className="text-sm text-muted-foreground mb-5">или нажмите, чтобы выбрать</p> <p className="text-[13px] text-[#8e8e93] mb-5">или нажмите, чтобы выбрать</p>
<Button variant="outline" size="sm" className="rounded-xl"> <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>
</Button>
<p className="mt-4 text-xs text-muted-foreground">JPG, PNG, GIF, WebP · до 10 МБ</p>
</div> </div>
) : ( ) : (
<div> <div className="space-y-4">
<div className="relative bg-muted flex items-center justify-center max-h-96 overflow-hidden"> <div className="relative bg-[#f0f0f0] rounded-2xl overflow-hidden">
<img src={preview} alt="Preview" className="max-h-96 w-full object-contain" /> <img src={preview} alt="Preview" className="max-h-[400px] w-full object-contain" />
<button <button
onClick={clearFile} 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" /> <X className="h-4 w-4" />
</button> </button>
</div> </div>
<div className="flex items-start gap-3 px-4 py-3"> <div className="flex items-start gap-3">
<Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200"> <Avatar className="h-8 w-8 shrink-0">
<AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white"> <AvatarFallback className="text-xs bg-[#2aabee] 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-semibold mb-1">{user?.username}</p> <p className="text-[13px] font-medium mb-1">{user?.username}</p>
<textarea <textarea
placeholder="Напишите подпись..." 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" 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> </div>
<div className="flex items-center justify-between px-4 py-3 bg-gradient-to-r from-orange-50 to-rose-50 border-t"> <div className="flex items-center justify-between pt-2">
<span className="text-sm font-medium text-orange-600">+10 баллов за загрузку</span> <span className="text-[13px] text-[#8e8e93]">+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" className="rounded-full text-[14px] bg-[#2aabee] hover:bg-[#1d9bd9] px-6"
> >
{uploadMutation.isPending ? 'Публикация...' : 'Поделиться'} {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-center text-sm text-destructive">Не удалось загрузить. Попробуйте снова.</p> <p className="mt-3 text-center text-[13px] text-[#ff3b30]">Не удалось загрузить. Попробуйте снова.</p>
)} )}
</div> </div>
); );