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

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>

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

@@ -22,63 +22,53 @@ 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">
<Input
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Имя пользователя"
required
autoFocus
className="h-11 text-sm rounded-xl bg-secondary/50"
/>
<Input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Пароль"
required
className="h-11 text-sm rounded-xl bg-secondary/50"
/>
{error && (
<p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{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"
disabled={loading}
>
{loading ? 'Вход...' : 'Войти'}
</Button>
</form>
<div className="space-y-3">
<Input
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Имя пользователя"
required
autoFocus
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
<Input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Пароль"
required
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
{error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
<Button
type="submit"
className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
disabled={loading}
>
{loading ? 'Вход...' : 'Войти'}
</Button>
</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">
Нет аккаунта?{' '}
<Link to="/register" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
Зарегистрироваться
</Link>
</p>
</div>
<p className="mt-6 text-center text-[14px] text-[#8e8e93]">
Нет аккаунта?{' '}
<Link to="/register" className="font-medium text-[#2aabee] hover:underline">
Зарегистрироваться
</Link>
</p>
</div>
</div>
);

101
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 && (
<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>
</Link>
<div className="mt-3">
<Link to="/upload">
<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>

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

@@ -29,73 +29,63 @@ 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">
<Input
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Имя пользователя"
minLength={3}
required
autoFocus
className="h-11 text-sm rounded-xl bg-secondary/50"
/>
<Input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Пароль"
minLength={4}
required
className="h-11 text-sm rounded-xl bg-secondary/50"
/>
<Input
type="password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
placeholder="Подтвердите пароль"
required
className="h-11 text-sm rounded-xl bg-secondary/50"
/>
{error && (
<p className="text-sm text-destructive text-center bg-red-50 rounded-xl py-2">{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"
disabled={loading}
>
{loading ? 'Создание аккаунта...' : 'Создать аккаунт'}
</Button>
</form>
<div className="space-y-3">
<Input
value={username}
onChange={(e) => setUsername(e.target.value)}
placeholder="Имя пользователя"
minLength={3}
required
autoFocus
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
<Input
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="Пароль"
minLength={4}
required
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
<Input
type="password"
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
placeholder="Подтвердите пароль"
required
className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
/>
{error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
<Button
type="submit"
className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
disabled={loading}
>
{loading ? 'Создание...' : 'Создать аккаунт'}
</Button>
</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">
Уже есть аккаунт?{' '}
<Link to="/login" className="font-semibold text-orange-500 hover:text-orange-600 transition-colors">
Войти
</Link>
</p>
</div>
<p className="mt-6 text-center text-[14px] text-[#8e8e93]">
Уже есть аккаунт?{' '}
<Link to="/login" className="font-medium text-[#2aabee] hover:underline">
Войти
</Link>
</p>
</div>
</div>
);

149
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>
<h1 className="text-[20px] font-semibold mb-5">Новая публикация</h1>
{!preview ? (
<div
{...getRootProps()}
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-4">
<Upload className="mx-auto h-8 w-8 text-[#8e8e93]" strokeWidth={1.5} />
</div>
<p className="text-[15px] font-medium mb-1">
{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
</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 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-full bg-black/50 text-white hover:bg-black/70 transition-colors"
>
<X className="h-4 w-4" />
</button>
</div>
{!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'
}`}
>
<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="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-[13px] font-medium mb-1">{user?.username}</p>
<textarea
placeholder="Подпись к фото..."
value={caption}
onChange={(e) => setCaption(e.target.value)}
maxLength={200}
rows={2}
className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[#8e8e93]"
/>
<p className="text-right text-[11px] text-[#8e8e93] mt-0.5">{caption.length}/200</p>
</div>
<p className="text-base font-medium mb-1">
{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
</p>
<p className="text-sm text-muted-foreground mb-5">или нажмите, чтобы выбрать</p>
<Button variant="outline" size="sm" className="rounded-xl">
Выбрать файл
</div>
<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-full text-[14px] bg-[#2aabee] hover:bg-[#1d9bd9] px-6"
>
{uploadMutation.isPending ? 'Публикация...' : 'Опубликовать'}
</Button>
<p className="mt-4 text-xs text-muted-foreground">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" />
<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"
>
<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">
{user?.username?.charAt(0).toUpperCase() || '?'}
</AvatarFallback>
</Avatar>
<div className="flex-1">
<p className="text-xs font-semibold mb-1">{user?.username}</p>
<textarea
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"
/>
<p className="text-right text-xs text-muted-foreground mt-1">{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>
<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"
>
{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>
);