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

UI: complete redesign — warm atelier style, Manrope font, burnt orange accent, shadow-based cards

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 13:34:58 +03:00
parent 7fa7394739
commit 4bf9ea22dd
20 changed files with 493 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/index.html
View File

@@ -1,10 +1,13 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="ru">
<head> <head>
<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>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>

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

@@ -4,7 +4,7 @@ import { useAuth } from '@/hooks/useAuth';
import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes'; import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
import { useToast } from '@/components/Toast'; import { useToast } from '@/components/Toast';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Heart } from 'lucide-react'; import { Heart, MessageCircle, Trophy } from 'lucide-react';
interface CatCardProps { interface CatCardProps {
cat: Cat; cat: Cat;
@@ -20,17 +20,18 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
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 toggleLike = async () => { const toggleLike = async (e: React.MouseEvent) => {
e.stopPropagation();
if (isOwner || !user) return; if (isOwner || !user) return;
if (liked) { if (liked) {
setLiked(false); setLikeCount((c) => c - 1); setLiked(false); setLikeCount(c => c - 1);
try { await unlikeMutation.mutateAsync(); } try { await unlikeMutation.mutateAsync(); }
catch { setLiked(true); setLikeCount((c) => c + 1); } catch { setLiked(true); setLikeCount(c => c + 1); }
} else { } else {
setLiked(true); setLikeCount((c) => c + 1); setLiked(true); setLikeCount(c => c + 1);
toast('❤️'); toast('❤️');
try { await likeMutation.mutateAsync(); } try { await likeMutation.mutateAsync(); }
catch { setLiked(false); setLikeCount((c) => c - 1); } catch { setLiked(false); setLikeCount(c => c - 1); }
} }
}; };
@@ -39,24 +40,21 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
}); });
return ( return (
<article className="animate-rise mb-4 last:mb-0"> <article className="animate-fade-up">
<div className="card border overflow-hidden"> <div className="card overflow-hidden cursor-pointer card-interactive" onClick={() => onOpen(cat.id)}>
<div <div className="flex items-center gap-3 px-5 pt-5 pb-3">
className="flex items-center gap-3 px-4 pt-4 pb-2 cursor-pointer" <Avatar className="h-9 w-9">
onClick={() => onOpen(cat.id)} <AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]">
>
<Avatar className="h-9 w-9 border">
<AvatarFallback className="text-xs avatar">
{cat.username.charAt(0).toUpperCase()} {cat.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div> <div className="flex-1 min-w-0">
<h3 className="text-sm font-semibold">@{cat.username}</h3> <h3 className="text-sm font-semibold truncate">@{cat.username}</h3>
<time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time> <time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time>
</div> </div>
</div> </div>
<figure className="cursor-pointer bg-[var(--secondary)]" onClick={() => onOpen(cat.id)}> <figure className="bg-[var(--bg)]">
<img <img
src={cat.image_url} src={cat.image_url}
alt={cat.caption || 'Фото кота'} alt={cat.caption || 'Фото кота'}
@@ -66,50 +64,42 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
/> />
</figure> </figure>
<div className="px-5 pb-4 pt-3">
{cat.caption && ( {cat.caption && (
<div className="px-4 pt-3 pb-1 cursor-pointer" onClick={() => onOpen(cat.id)}> <p className="text-sm leading-[1.5] mb-3">
<p className="text-sm leading-[1.45]"> <span className="font-semibold mr-1">@{cat.username}</span>
<span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption} {cat.caption}
</p> </p>
</div>
)} )}
<div className="flex items-center justify-between px-4 py-3"> <div className="flex items-center justify-between">
<div className="flex items-center gap-4"> <div className="flex items-center gap-3">
<button <button
onClick={toggleLike} onClick={toggleLike}
disabled={isOwner || !user} disabled={isOwner || !user}
className={`flex items-center gap-1.5 text-sm font-medium transition-all ${ className={`flex items-center gap-1.5 text-sm font-medium transition-all ${
isOwner isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-red-500' : 'text-[var(--fg-secondary)] hover:text-red-400'
? 'text-[var(--fg-tertiary)] cursor-not-allowed'
: liked
? 'text-[var(--danger)]'
: 'text-[var(--fg-secondary)] hover:text-[var(--fg)]'
}`} }`}
> >
<Heart <Heart className={`h-[18px] w-[18px] transition-all ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'}`} />
className={`h-[18px] w-[18px] transition-all ${ {likeCount > 0 && <span className="stat-value text-xs">{likeCount}</span>}
liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-pop' : 'stroke-[1.5]'
}`}
/>
{likeCount > 0 && <span className="tabular-nums text-xs">{likeCount}</span>}
</button> </button>
<button <button
onClick={() => onOpen(cat.id)} onClick={() => onOpen(cat.id)}
className="flex items-center gap-1 text-sm font-medium text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors" className="flex items-center gap-1 text-sm text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] transition-colors"
> >
<span className="text-base leading-none">💬</span> <MessageCircle className="h-[18px] w-[18px]" strokeWidth={1.5} />
</button> </button>
</div> </div>
<span className="flex items-center gap-1 text-xs text-[var(--fg-tertiary)]"> <span className="flex items-center gap-1 text-xs text-[var(--fg-tertiary)]">
<span>🏆</span> <Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
<span className="font-medium text-[var(--fg-secondary)]">{cat.user_points}</span> <span className="font-semibold">{cat.user_points}</span>
</span> </span>
</div> </div>
</div> </div>
</div>
</article> </article>
); );
} }

64
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 { X, Heart, Trash2 } from 'lucide-react'; import { X, Heart, Trash2, Trophy } from 'lucide-react';
interface CatModalProps { interface CatModalProps {
catId: number; catId: number;
@@ -39,14 +39,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
const toggleLike = async () => { const toggleLike = async () => {
if (isOwner || !user || !cat) return; if (isOwner || !user || !cat) return;
if (liked) { if (liked) {
setLiked(false); setLikeCount((c) => c - 1); setLiked(false); setLikeCount(c => c - 1);
try { await unlikeMutation.mutateAsync(); refetchLike(); } try { await unlikeMutation.mutateAsync(); refetchLike(); }
catch { setLiked(true); setLikeCount((c) => c + 1); } catch { setLiked(true); setLikeCount(c => c + 1); }
} else { } else {
setLiked(true); setLikeCount((c) => c + 1); setLiked(true); setLikeCount(c => c + 1);
toast('❤️'); toast('❤️');
try { await likeMutation.mutateAsync(); refetchLike(); } try { await likeMutation.mutateAsync(); refetchLike(); }
catch { setLiked(false); setLikeCount((c) => c - 1); } catch { setLiked(false); setLikeCount(c => c - 1); }
} }
}; };
@@ -58,9 +58,9 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
if (isLoading || !cat) { if (isLoading || !cat) {
return ( return (
<div className="fixed inset-0 z-[60] bg-black/40 flex items-center justify-center" onClick={onClose}> <div className="fixed inset-0 z-[60] bg-black/30 flex items-center justify-center animate-fade-in" onClick={onClose}>
<div className="flex items-center gap-3 px-6 py-4 bg-white rounded-full shadow-lg animate-scale-in"> <div className="flex items-center gap-3 px-5 py-3 bg-white rounded-2xl shadow-lg">
<div className="h-5 w-5 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" /> <div className="h-4 w-4 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
<span className="text-sm font-medium text-[var(--fg-secondary)]">Загрузка...</span> <span className="text-sm font-medium text-[var(--fg-secondary)]">Загрузка...</span>
</div> </div>
</div> </div>
@@ -72,15 +72,17 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
}); });
return ( return (
<div className="fixed inset-0 z-[60] bg-black/40 flex items-end sm:items-center justify-center" onClick={onClose}> <div className="fixed inset-0 z-[60] bg-black/30 flex items-end sm:items-center justify-center animate-fade-in" onClick={onClose}>
<div <div
className="w-full sm:max-w-xl bg-white sm:rounded-xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-scale-in" className="w-full sm:max-w-lg bg-white sm:rounded-2xl max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-slide-up sm:animate-scale-in"
onClick={(e) => e.stopPropagation()} onClick={e => e.stopPropagation()}
> >
<div className="flex items-center justify-between px-5 py-4 border-b shrink-0"> <div className="flex items-center justify-between px-5 py-4 shrink-0">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Avatar className="h-9 w-9 border"> <Avatar className="h-9 w-9">
<AvatarFallback className="text-sm avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]">
{cat.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<span className="text-sm font-semibold">@{cat.username}</span> <span className="text-sm font-semibold">@{cat.username}</span>
@@ -89,20 +91,20 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{isOwner && ( {isOwner && (
<button onClick={handleDelete} className="btn-icon h-9 w-9 text-[var(--fg-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"> <button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-red-500 hover:bg-red-50">
<Trash2 className="h-4 w-4" strokeWidth={1.5} /> <Trash2 className="h-4 w-4" strokeWidth={1.5} />
</button> </button>
)} )}
<button onClick={onClose} className="btn-icon h-9 w-9 text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]"> <button onClick={onClose} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--fg)]">
<X className="h-5 w-5" strokeWidth={1.5} /> <X className="h-5 w-5" strokeWidth={1.5} />
</button> </button>
</div> </div>
</div> </div>
<div className="bg-[var(--secondary)] flex items-center justify-center shrink-0 relative"> <div className="bg-[var(--bg)] flex items-center justify-center shrink-0 relative">
{!imageLoaded && ( {!imageLoaded && (
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" /> <div className="h-6 w-6 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
</div> </div>
)} )}
<img <img
@@ -115,17 +117,17 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-3"> <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Avatar className="h-8 w-8 shrink-0 mt-0.5 border"> <Avatar className="h-8 w-8 shrink-0 mt-0.5">
<AvatarFallback className="text-[10px] avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-[10px] avatar-colored bg-[var(--accent)]">
{cat.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar> </Avatar>
<div> <p className="text-sm leading-[1.5]">
<p className="text-sm leading-[1.45]"> <span className="font-semibold mr-1">@{cat.username}</span>
<span className="font-semibold mr-1.5">@{cat.username}</span>
{cat.caption || 'Без подписи'} {cat.caption || 'Без подписи'}
</p> </p>
</div> </div>
</div> </div>
</div>
<div className="border-t px-5 py-4 shrink-0"> <div className="border-t px-5 py-4 shrink-0">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
@@ -133,16 +135,16 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
onClick={toggleLike} onClick={toggleLike}
disabled={isOwner || !user} disabled={isOwner || !user}
className={`flex items-center gap-1.5 text-sm font-medium transition-all ${ className={`flex items-center gap-1.5 text-sm font-medium transition-all ${
isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-[var(--danger)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]' isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-red-500' : 'text-[var(--fg-secondary)] hover:text-red-400'
}`} }`}
> >
<Heart className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-pop' : 'stroke-[1.5]'}`} /> <Heart className={`h-5 w-5 transition-all ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'}`} />
{likeCount > 0 && <span className="tabular-nums">{likeCount}</span>} {likeCount > 0 && <span className="stat-value">{likeCount}</span>}
</button> </button>
<span className="flex items-center gap-1.5 text-xs text-[var(--fg-secondary)]"> <span className="flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)]">
<span>🏆</span> <Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
<span className="font-semibold">{cat.user_points}</span> <span className="font-semibold text-[var(--fg-secondary)]">{cat.user_points}</span>
<span className="text-[var(--fg-tertiary)]">баллов</span> <span>баллов</span>
</span> </span>
</div> </div>
</div> </div>

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

@@ -2,14 +2,13 @@ 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, Crown, Medal } from 'lucide-react';
function Medal({ rank }: { rank: number }) { function RankBadge({ rank }: { rank: number }) {
const colors = ['bg-blue-100 text-blue-700', 'bg-stone-100 text-stone-500', 'bg-amber-100 text-amber-700']; if (rank === 0) return <Crown className="h-4 w-4 text-amber-500" strokeWidth={1.5} />;
return ( if (rank === 1) return <Medal className="h-4 w-4 text-stone-400" strokeWidth={1.5} />;
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold ${colors[rank] || 'text-[var(--fg-tertiary)]'}`}> if (rank === 2) return <Medal className="h-4 w-4 text-amber-700" strokeWidth={1.5} />;
{rank + 1} return <span className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold text-[var(--fg-tertiary)] bg-[var(--border-light)]">{rank + 1}</span>;
</span>
);
} }
export default function FeedSidebar() { export default function FeedSidebar() {
@@ -29,45 +28,49 @@ export default function FeedSidebar() {
.slice(0, 5); .slice(0, 5);
return ( return (
<div className="space-y-5"> <div className="space-y-4">
{user && ( {user && (
<Link to="/profile" className="card border p-3.5 flex items-center gap-3 transition-all hover:shadow-md group"> <Link to="/profile" className="card p-4 flex items-center gap-3.5 card-interactive group block">
<Avatar className="h-11 w-11 border"> <Avatar className="h-11 w-11">
<AvatarFallback className="text-sm font-semibold avatar"> <AvatarFallback className="text-sm font-bold avatar-colored bg-[var(--accent)]">
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="text-sm font-semibold truncate group-hover:text-[var(--primary)] transition-colors">{user.username}</p> <p className="text-sm font-semibold truncate group-hover:text-[var(--accent)] transition-colors">{user.username}</p>
<p className="text-xs text-[var(--fg-secondary)]">🏆 {user.points} баллов</p> <p className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1">
<Trophy className="h-3 w-3" strokeWidth={1.5} /> {user.points} баллов
</p>
</div> </div>
</Link> </Link>
)} )}
<div className="card border p-4"> <div className="card p-4">
<h3 className="text-xs font-bold text-[var(--fg-secondary)] mb-4 flex items-center gap-1.5"> <h3 className="text-[11px] font-bold text-[var(--fg-tertiary)] uppercase tracking-widest mb-4 flex items-center gap-1.5">
<span>🏆</span> Лидеры <Trophy className="h-3 w-3" strokeWidth={2} /> Лидеры
</h3> </h3>
{topUsers.length === 0 ? ( {topUsers.length === 0 ? (
<p className="text-xs text-[var(--fg-tertiary)] text-center py-4">Пока нет пользователей</p> <p className="text-xs text-[var(--fg-tertiary)] text-center py-4">Пока никого нет</p>
) : ( ) : (
<div className="space-y-2.5"> <div className="space-y-2">
{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-2.5 group py-0.5">
<Medal rank={i} /> <RankBadge rank={i} />
<Avatar className="h-7 w-7"> <Avatar className="h-6 w-6">
<AvatarFallback className="text-[9px] avatar">{u.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-[8px] font-bold avatar-colored bg-[var(--fg-tertiary)]">
{u.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar> </Avatar>
<span className="text-sm flex-1 truncate font-medium group-hover:text-[var(--primary)] transition-colors">{u.username}</span> <span className="text-sm flex-1 truncate font-medium group-hover:text-[var(--accent)] transition-colors">{u.username}</span>
<span className="text-xs font-semibold text-[var(--fg-secondary)] tabular-nums">{u.points}</span> <span className="stat-value text-xs text-[var(--fg-secondary)]">{u.points}</span>
</Link> </Link>
))} ))}
</div> </div>
)} )}
</div> </div>
<p className="px-1 text-[11px] text-[var(--fg-tertiary)]">Catstagram · сообщество котоводов</p> <p className="px-1 text-[10px] text-[var(--fg-tertiary)] tracking-wide">Catstagram · сообщество котоводов</p>
</div> </div>
); );
} }

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

@@ -1,7 +1,7 @@
import { Link, useLocation } from 'react-router-dom'; import { Link, 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 { Shield } from 'lucide-react'; import { Home, PlusCircle, User, Shield } from 'lucide-react';
export default function Navbar() { export default function Navbar() {
const { user } = useAuth(); const { user } = useAuth();
@@ -10,25 +10,29 @@ export default function Navbar() {
if (!user) return null; if (!user) return null;
return ( return (
<nav className="sticky top-0 z-50 glass"> <nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]">
<div className="mx-auto flex h-14 max-w-[660px] items-center justify-between px-4"> <div className="mx-auto flex h-14 max-w-[540px] items-center justify-between px-5">
<Link to="/feed" className="text-lg font-bold text-gradient tracking-tight"> <Link to="/feed" className="text-[15px] font-800 tracking-tight text-[var(--fg)]">
Catstagram Catstagram
</Link> </Link>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<NavLink to="/feed" active={location.pathname === '/feed'} emoji="🏠" label="Лента" /> <NavIcon to="/feed" active={location.pathname === '/feed'} icon={Home} label="Лента" />
<NavLink to="/upload" active={location.pathname === '/upload'} emoji="📷" label="Добавить" /> <NavIcon to="/upload" active={location.pathname === '/upload'} icon={PlusCircle} label="Добавить" />
<Link to="/profile" className="ml-2 relative"> <Link to="/profile" className="ml-1.5 relative flex items-center">
<Avatar className="h-8 w-8 border hover:border-[var(--primary)] transition-all"> <div className={`flex items-center justify-center h-8 w-8 rounded-full transition-all ${
<AvatarFallback className="text-[11px] avatar"> location.pathname.startsWith('/profile') ? 'ring-2 ring-[var(--accent)] ring-offset-2 ring-offset-[var(--bg)]' : ''
}`}>
<Avatar className="h-8 w-8">
<AvatarFallback className="text-[11px] avatar-colored bg-[var(--accent)]">
{user.username.charAt(0).toUpperCase()} {user.username.charAt(0).toUpperCase()}
</AvatarFallback> </AvatarFallback>
</Avatar> </Avatar>
</div>
{user.is_admin && ( {user.is_admin && (
<span className="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-[var(--primary)] flex items-center justify-center shadow-sm"> <span className="absolute -top-0.5 -right-0.5 h-3.5 w-3.5 rounded-full bg-[var(--accent)] flex items-center justify-center ring-2 ring-[var(--bg)]">
<Shield className="h-2.5 w-2.5 text-white" strokeWidth={3} /> <Shield className="h-2 w-2 text-white" strokeWidth={3} />
</span> </span>
)} )}
</Link> </Link>
@@ -38,18 +42,18 @@ export default function Navbar() {
); );
} }
function NavLink({ to, active, emoji, label }: { to: string; active: boolean; emoji: string; label: string }) { function NavIcon({ to, active, icon: Icon, label }: { to: string; active: boolean; icon: any; label: string }) {
return ( return (
<Link <Link
to={to} to={to}
className={`flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium transition-all ${ title={label}
className={`flex items-center justify-center h-9 w-9 rounded-xl transition-all ${
active active
? 'bg-[var(--primary-soft)] text-[var(--primary)]' ? 'bg-[var(--accent-soft)] text-[var(--accent)]'
: 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]' : 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]'
}`} }`}
> >
<span className="text-base leading-none">{emoji}</span> <Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2 : 1.5} />
<span className="hidden sm:inline">{label}</span>
</Link> </Link>
); );
} }

6
client/src/components/ProtectedRoute.tsx
View File

@@ -8,11 +8,11 @@ export default function ProtectedRoute({ children }: { children: React.ReactNode
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex h-screen items-center justify-center bg-[var(--bg)]"> <div className="flex h-screen items-center justify-center bg-[var(--bg)]">
<div className="flex flex-col items-center gap-4"> <div className="flex flex-col items-center gap-5">
<div className="h-14 w-14 rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}> <div className="h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--accent)]">
<Cat className="h-7 w-7 text-white" strokeWidth={1.5} /> <Cat className="h-7 w-7 text-white" strokeWidth={1.5} />
</div> </div>
<div className="h-6 w-6 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" /> <div className="h-5 w-5 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
</div> </div>
</div> </div>
); );

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

@@ -1,23 +0,0 @@
import { User } from '@/lib/auth';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
interface StoryCircleProps {
user: User;
}
export default function StoryCircle({ user }: StoryCircleProps) {
return (
<div className="flex flex-col items-center gap-1.5 w-16 shrink-0 group cursor-pointer">
<div className="rounded-full p-0.5" style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
<Avatar className="h-14 w-14 border-2 border-white">
<AvatarFallback className="text-sm font-semibold bg-white text-[var(--primary)]">
{user.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
</div>
<span className="text-[11px] text-[var(--foreground-tertiary)] truncate w-full text-center group-hover:text-[var(--foreground)] transition-colors">
{user.username}
</span>
</div>
);
}

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

@@ -12,22 +12,20 @@ export function ToastProvider({ children }: { children: ReactNode }) {
const addToast = useCallback((message: string, type: ToastType = 'success') => { const addToast = useCallback((message: string, type: ToastType = 'success') => {
const id = nextId++; const id = nextId++;
setToasts((prev) => [...prev, { id, message, type }]); setToasts(prev => [...prev, { id, message, type }]);
setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 1800); setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 2000);
}, []); }, []);
return ( return (
<ToastContext.Provider value={{ toast: addToast }}> <ToastContext.Provider value={{ toast: addToast }}>
{children} {children}
<div className="fixed bottom-8 left-1/2 -translate-x-1/2 z-[100] flex flex-col items-center gap-2 pointer-events-none"> <div className="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] flex flex-col items-center gap-2 pointer-events-none">
{toasts.map((t) => ( {toasts.map(t => (
<div <div
key={t.id} key={t.id}
className="animate-toast-in rounded-full px-5 py-2.5 text-sm font-medium shadow-lg pointer-events-auto" className="animate-toast-in rounded-2xl px-5 py-2.5 text-sm font-semibold shadow-lg pointer-events-auto"
style={{ style={{
background: t.type === 'error' background: t.type === 'error' ? 'var(--danger)' : 'var(--accent)',
? 'linear-gradient(135deg, #dc2626, #f87171)'
: 'linear-gradient(135deg, #2563eb, #7c3aed)',
color: 'white', color: 'white',
}} }}
> >

22
client/src/components/ui/button.tsx
View File

@@ -4,22 +4,22 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
const buttonVariants = cva( const buttonVariants = cva(
'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', 'inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
{ {
variants: { variants: {
variant: { variant: {
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90', default: 'bg-[var(--accent)] text-white shadow-sm hover:bg-[var(--accent-hover)]',
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90', destructive: 'bg-red-500 text-white shadow-sm hover:bg-red-600',
outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground', outline: 'border border-[var(--border)] bg-white shadow-sm hover:bg-[var(--surface-hover)] text-[var(--fg)]',
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80', secondary: 'bg-[var(--border-light)] text-[var(--fg)] shadow-sm hover:bg-[var(--border)]',
ghost: 'hover:bg-accent hover:text-accent-foreground', ghost: 'hover:bg-[var(--border-light)] text-[var(--fg-secondary)]',
link: 'text-primary underline-offset-4 hover:underline', link: 'text-[var(--accent)] underline-offset-4 hover:underline',
}, },
size: { size: {
default: 'h-9 px-4 py-2', default: 'h-9 rounded-xl px-4 py-2',
sm: 'h-8 rounded-md px-3 text-xs', sm: 'h-8 rounded-lg px-3 text-xs',
lg: 'h-10 rounded-md px-8', lg: 'h-10 rounded-xl px-6',
icon: 'h-9 w-9', icon: 'h-9 w-9 rounded-xl',
}, },
}, },
defaultVariants: { defaultVariants: {

2
client/src/components/ui/input.tsx
View File

@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
<input <input
type={type} type={type}
className={cn( className={cn(
'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', 'flex h-9 w-full rounded-xl border border-[var(--border)] bg-white px-3.5 py-1 text-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-[var(--fg-tertiary)] focus-visible:outline-none focus-visible:border-[var(--accent)] focus-visible:ring-2 focus-visible:ring-[var(--accent-soft)] disabled:cursor-not-allowed disabled:opacity-50',
className className
)} )}
ref={ref} ref={ref}

2
client/src/components/ui/skeleton.tsx
View File

@@ -1,7 +1,7 @@
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) { function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />; return <div className={cn('rounded-xl skeleton-shimmer', className)} {...props} />;
} }
export { Skeleton }; export { Skeleton };

183
client/src/index.css
View File

@@ -2,29 +2,31 @@
@plugin "tailwindcss-animate"; @plugin "tailwindcss-animate";
:root { :root {
--bg: #fafaf9; --bg: #F5F3EE;
--surface: #ffffff; --surface: #FFFFFF;
--surface-hover: #f5f5f4; --surface-hover: #F9F7F3;
--fg: #0c0c0c; --fg: #1C1917;
--fg-secondary: #737373; --fg-secondary: #78716C;
--fg-tertiary: #a3a3a3; --fg-tertiary: #A8A29E;
--primary: #2563eb; --accent: #C2410C;
--primary-hover: #1d4ed8; --accent-hover: #9A3412;
--primary-light: #eff6ff; --accent-soft: rgba(194, 65, 12, 0.07);
--primary-soft: rgba(37, 99, 235, 0.06); --accent-light: #FFF7ED;
--secondary: #f5f5f4; --secondary: #F5F3EE;
--border: #e7e5e4; --border: #E7E5E4;
--border-light: #f0efed; --border-light: #F0EDE8;
--danger: #dc2626; --danger: #DC2626;
--danger-hover: #b91c1c; --danger-hover: #B91C1C;
--danger-light: #fef2f2; --danger-light: #FEF2F2;
--success: #16a34a; --success: #15803D;
--success-light: #f0fdf4; --success-light: #F0FDF4;
--radius: 10px; --radius: 12px;
--radius-lg: 16px; --radius-lg: 16px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --radius-xl: 24px;
--shadow-md: 0 4px 16px rgba(0,0,0,0.06); --shadow-sm: 0 1px 2px rgba(28,25,23,0.04);
--shadow-lg: 0 8px 32px rgba(0,0,0,0.08); --shadow-md: 0 2px 8px rgba(28,25,23,0.06);
--shadow-lg: 0 8px 24px rgba(28,25,23,0.08);
--shadow-xl: 0 16px 48px rgba(28,25,23,0.12);
} }
* { border-color: var(--border); } * { border-color: var(--border); }
@@ -32,142 +34,143 @@
body { body {
background: var(--bg); background: var(--bg);
color: var(--fg); color: var(--fg);
font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
"Segoe UI", Roboto, sans-serif;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
line-height: 1.5; line-height: 1.6;
letter-spacing: -0.015em; letter-spacing: -0.01em;
} }
::selection { background: var(--primary); color: white; } ::selection { background: var(--accent); color: white; }
/* ── Animations ── */ @keyframes fade-up {
from { opacity: 0; transform: translateY(8px); }
@keyframes rise {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
@keyframes fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes scale-in { @keyframes scale-in {
from { opacity: 0; transform: scale(0.95); } from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); } to { opacity: 1; transform: scale(1); }
} }
@keyframes pop { @keyframes pop {
0% { transform: scale(1); } 0% { transform: scale(1); }
40% { transform: scale(1.3); } 50% { transform: scale(1.25); }
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
@keyframes toast-in { @keyframes toast-in {
from { opacity: 0; transform: translateY(12px) scale(0.95); } from { opacity: 0; transform: translateY(8px) scale(0.96); }
to { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 1; transform: translateY(0) scale(1); }
} }
@keyframes skeleton { @keyframes shimmer {
0% { opacity: 0.5; } 0% { background-position: -200% 0; }
50% { opacity: 1; } 100% { background-position: 200% 0; }
100% { opacity: 0.5; } }
@keyframes slide-up {
from { transform: translateY(100%); }
to { transform: translateY(0); }
} }
.animate-rise { animation: rise 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .animate-fade-up { animation: fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-scale-in { animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); } .animate-fade-in { animation: fade-in 0.3s ease both; }
.animate-pop { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1); } .animate-scale-in { animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-toast-in { animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .animate-pop { animation: pop 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-skeleton { animation: skeleton 1.5s ease-in-out infinite; } .animate-toast-in { animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-slide-up { animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
/* ── Card ── */ .stagger-1 { animation-delay: 30ms; }
.stagger-2 { animation-delay: 60ms; }
.stagger-3 { animation-delay: 90ms; }
.skeleton-shimmer {
background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
background-size: 200% 100%;
animation: shimmer 1.5s ease infinite;
}
.card { .card {
background: var(--surface); background: var(--surface);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: box-shadow 0.2s, transform 0.15s; transition: box-shadow 0.2s ease, transform 0.2s ease;
} }
.card-hover:hover { .card-hover:hover {
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transform: translateY(-1px); transform: translateY(-1px);
} }
.card-interactive:hover {
box-shadow: var(--shadow-md);
}
/* ── Avatar ── */ .avatar-colored {
.avatar {
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-weight: 600; font-weight: 700;
color: white; color: white;
background: var(--primary);
user-select: none; user-select: none;
} }
/* ── Button Icon ── */ .btn-ghost {
.btn-icon {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 9999px; border-radius: 50%;
transition: background 0.15s, transform 0.1s; transition: background 0.15s, transform 0.1s;
cursor: pointer; cursor: pointer;
border: none; border: none;
background: transparent;
} }
.btn-icon:active { transform: scale(0.88); } .btn-ghost:active { transform: scale(0.9); }
.btn-ghost:hover { background: var(--border-light); }
/* ── Tags ── */
.tag { .tag {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
padding: 0.125rem 0.625rem; padding: 0.15rem 0.55rem;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.01em;
} }
/* ── Gradient text ── */
.text-gradient {
background: linear-gradient(135deg, #2563eb, #7c3aed);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ── Focus ── */
.focus-ring { .focus-ring {
transition: border-color 0.15s, box-shadow 0.15s; transition: border-color 0.15s, box-shadow 0.15s;
} }
.focus-ring:focus { .focus-ring:focus {
border-color: var(--primary); border-color: var(--accent);
box-shadow: 0 0 0 3px var(--primary-soft); box-shadow: 0 0 0 3px var(--accent-soft);
outline: none; outline: none;
} }
/* ── Utility ── */
.text-secondary { color: var(--fg-secondary); } .text-secondary { color: var(--fg-secondary); }
.text-tertiary { color: var(--fg-tertiary); } .text-tertiary { color: var(--fg-tertiary); }
/* ── Glass nav ── */ .nav-glass {
background: rgba(245, 243, 238, 0.85);
.glass { backdrop-filter: blur(20px);
background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-bottom: 1px solid rgba(231,229,228,0.5);
} }
/* ── Image shimmer ── */ .divider {
height: 1px;
background: var(--border-light);
width: 100%;
}
.img-shimmer { .stat-value {
position: relative; font-variant-numeric: tabular-nums;
overflow: hidden; font-weight: 700;
letter-spacing: -0.02em;
} }
.img-shimmer::after {
content: ''; .page-enter { opacity: 0; }
position: absolute; .page-enter-active { opacity: 1; transition: opacity 0.2s ease; }
inset: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent); @media (max-width: 640px) {
animation: skeleton 1.5s ease-in-out infinite; .mobile-full { border-radius: 0 !important; margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); }
} }

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

@@ -5,7 +5,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
import { getAdminUsers, getAdminCats, adminDeleteUser, adminDeleteCat, adminUpdateCaption, adminSetPoints } from '@/api/endpoints'; import { getAdminUsers, getAdminCats, adminDeleteUser, adminDeleteCat, adminUpdateCaption, adminSetPoints } from '@/api/endpoints';
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, Trash2, Shield, Edit3, Save, X, Search } from 'lucide-react'; import { ArrowLeft, Trash2, Shield, Edit3, Save, X, Trophy, Image } from 'lucide-react';
import { useToast } from '@/components/Toast'; import { useToast } from '@/components/Toast';
export default function AdminPage() { export default function AdminPage() {
@@ -41,12 +41,12 @@ export default function AdminPage() {
if (!user?.is_admin) { if (!user?.is_admin) {
return ( return (
<div className="flex flex-col items-center justify-center py-24"> <div className="flex flex-col items-center justify-center py-24 animate-fade-up">
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]"> <div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--border-light)]">
<Shield className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} /> <Shield className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
</div> </div>
<p className="text-base font-semibold mb-1">Доступ запрещён</p> <p className="text-base font-semibold mb-1">Доступ запрещён</p>
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">Вернуться в ленту</Button> <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-xl text-xs mt-2 h-9 px-4">В ленту</Button>
</div> </div>
); );
} }
@@ -55,36 +55,34 @@ export default function AdminPage() {
const cats = catsQuery.data?.cats ?? []; const cats = catsQuery.data?.cats ?? [];
return ( return (
<div className="mx-auto max-w-[700px] px-4 py-6 animate-rise"> <div className="mx-auto max-w-[640px] px-5 py-6 animate-fade-up">
<button onClick={() => navigate(-1)} <button onClick={() => navigate(-1)}
className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors"> className="mb-6 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors">
<ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад <ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
</button> </button>
<div className="flex items-center gap-3 mb-6"> <div className="flex items-center gap-3 mb-6">
<div className="h-10 w-10 rounded-xl flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}> <div className="h-10 w-10 rounded-2xl flex items-center justify-center bg-[var(--accent)]">
<Shield className="h-5 w-5 text-white" strokeWidth={1.5} /> <Shield className="h-5 w-5 text-white" strokeWidth={1.5} />
</div> </div>
<h1 className="text-xl font-bold">Админ-панель</h1> <h1 className="text-xl font-800 tracking-tight">Админ-панель</h1>
</div> </div>
<div className="flex gap-2 mb-5"> <div className="flex gap-1 p-1 bg-[var(--border-light)] rounded-xl mb-5">
<TabBtn active={tab === 'users'} onClick={() => setTab('users')}>Пользователи ({users.length})</TabBtn> <TabBtn active={tab === 'users'} onClick={() => setTab('users')}>Пользователи ({users.length})</TabBtn>
<TabBtn active={tab === 'cats'} onClick={() => setTab('cats')}>Посты ({cats.length})</TabBtn> <TabBtn active={tab === 'cats'} onClick={() => setTab('cats')}>Посты ({cats.length})</TabBtn>
</div> </div>
{tab === 'users' && ( {tab === 'users' && (
<div className="card border divide-y"> <div className="card divide-y divide-[var(--border-light)]">
<div className="px-4 py-2.5 text-xs font-bold text-[var(--fg-secondary)] uppercase tracking-wider">Пользователи</div> {users.length === 0 && <div className="px-5 py-10 text-center text-sm text-[var(--fg-tertiary)]">Нет пользователей</div>}
{users.length === 0 && <div className="px-4 py-8 text-center text-sm text-[var(--fg-tertiary)]">Нет пользователей</div>}
{users.map((u: any) => <UserRow key={u.id} u={u} onDelete={() => deleteUserMut.mutate(u.id)} qc={qc} />)} {users.map((u: any) => <UserRow key={u.id} u={u} onDelete={() => deleteUserMut.mutate(u.id)} qc={qc} />)}
</div> </div>
)} )}
{tab === 'cats' && ( {tab === 'cats' && (
<div className="card border divide-y"> <div className="card divide-y divide-[var(--border-light)]">
<div className="px-4 py-2.5 text-xs font-bold text-[var(--fg-secondary)] uppercase tracking-wider">Все посты</div> {cats.length === 0 && <div className="px-5 py-10 text-center text-sm text-[var(--fg-tertiary)]">Нет постов</div>}
{cats.length === 0 && <div className="px-4 py-8 text-center text-sm text-[var(--fg-tertiary)]">Нет постов</div>}
{cats.map((c: any) => <CatRow key={c.id} c={c} onDelete={() => deleteCatMut.mutate(c.id)} qc={qc} />)} {cats.map((c: any) => <CatRow key={c.id} c={c} onDelete={() => deleteCatMut.mutate(c.id)} qc={qc} />)}
</div> </div>
)} )}
@@ -95,7 +93,9 @@ export default function AdminPage() {
function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) { function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
return ( return (
<button onClick={onClick} <button onClick={onClick}
className={`px-4 py-2 rounded-lg text-sm font-medium transition-all ${active ? 'bg-[var(--primary-soft)] text-[var(--primary)]' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'}`}> className={`flex-1 px-4 py-2 rounded-lg text-sm font-medium transition-all ${
active ? 'bg-white text-[var(--fg)] shadow-sm' : 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)]'
}`}>
{children} {children}
</button> </button>
); );
@@ -112,34 +112,38 @@ function UserRow({ u, onDelete, qc }: { u: any; onDelete: () => void; qc: any })
}; };
return ( return (
<div className="flex items-center gap-3 px-4 py-3"> <div className="flex items-center gap-3 px-5 py-3.5">
<Avatar className="h-10 w-10 border"> <Avatar className="h-9 w-9">
<AvatarFallback className="text-xs avatar">{u.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]">
{u.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar> </Avatar>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="text-sm font-semibold truncate">@{u.username}</span> <span className="text-sm font-semibold truncate">@{u.username}</span>
{u.is_admin && <span className="tag bg-[var(--primary-light)] text-[var(--primary)]">Админ</span>} {u.is_admin && <span className="tag bg-[var(--accent-light)] text-[var(--accent)]">Админ</span>}
</div> </div>
{editing ? ( {editing ? (
<div className="flex items-center gap-1.5 mt-0.5"> <div className="flex items-center gap-1.5 mt-1">
<input type="number" value={points} min={0} onChange={e => setPoints(Math.max(0, parseInt(e.target.value) || 0))} <input type="number" value={points} min={0} onChange={e => setPoints(Math.max(0, parseInt(e.target.value) || 0))}
className="w-20 h-7 px-2 text-xs rounded-lg border focus-ring" autoFocus /> className="w-20 h-7 px-2 text-xs rounded-lg border focus-ring" autoFocus />
<button onClick={savePoints} className="btn-icon h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button> <button onClick={savePoints} className="btn-ghost h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button>
<button onClick={() => { setEditing(false); setPoints(u.points); }} className="btn-icon h-7 w-7 text-[var(--fg-tertiary)] hover:bg-[var(--secondary)]"><X className="h-3.5 w-3.5" /></button> <button onClick={() => { setEditing(false); setPoints(u.points); }} className="btn-ghost h-7 w-7 text-[var(--fg-tertiary)]"><X className="h-3.5 w-3.5" /></button>
</div> </div>
) : ( ) : (
<span className="text-xs text-[var(--fg-secondary)]">🏆 {u.points} баллов</span> <span className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1">
<Trophy className="h-3 w-3" strokeWidth={1.5} /> {u.points} баллов
</span>
)} )}
</div> </div>
{!u.is_admin && ( {!u.is_admin && (
<div className="flex items-center gap-1"> <div className="flex items-center gap-0.5">
<button onClick={() => { setEditing(true); setPoints(u.points); }} <button onClick={() => { setEditing(true); setPoints(u.points); }}
className="btn-icon h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--primary)] hover:bg-[var(--primary-light)]"> className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--accent)]">
<Edit3 className="h-3.5 w-3.5" strokeWidth={1.5} /> <Edit3 className="h-3.5 w-3.5" strokeWidth={1.5} />
</button> </button>
<button onClick={() => { if (confirm('Удалить пользователя и все его фото?')) onDelete(); }} <button onClick={() => { if (confirm('Удалить пользователя и все его фото?')) onDelete(); }}
className="btn-icon h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"> className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-red-500 hover:bg-red-50">
<Trash2 className="h-3.5 w-3.5" strokeWidth={1.5} /> <Trash2 className="h-3.5 w-3.5" strokeWidth={1.5} />
</button> </button>
</div> </div>
@@ -159,31 +163,31 @@ function CatRow({ c, onDelete, qc }: { c: any; onDelete: () => void; qc: any })
}; };
return ( return (
<div className="flex items-center gap-3 px-4 py-3"> <div className="flex items-center gap-3 px-5 py-3.5">
<div className="h-10 w-10 rounded-lg bg-[var(--secondary)] overflow-hidden shrink-0"> <div className="h-9 w-9 rounded-lg bg-[var(--bg)] overflow-hidden shrink-0">
<img src={c.image_url} alt="" className="h-full w-full object-cover" /> <img src={c.image_url} alt="" className="h-full w-full object-cover" />
</div> </div>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<span className="text-sm font-semibold">@{c.username}</span> <span className="text-sm font-semibold">@{c.username}</span>
{editing ? ( {editing ? (
<div className="flex items-center gap-1.5 mt-0.5"> <div className="flex items-center gap-1.5 mt-1">
<input type="text" value={caption} onChange={e => setCaption(e.target.value)} <input type="text" value={caption} onChange={e => setCaption(e.target.value)}
className="flex-1 h-7 px-2 text-xs rounded-lg border focus-ring" autoFocus className="flex-1 h-7 px-2 text-xs rounded-lg border focus-ring" autoFocus
onKeyDown={e => { if (e.key === 'Enter') saveCaption(); if (e.key === 'Escape') { setEditing(false); setCaption(c.caption || ''); } }} /> onKeyDown={e => { if (e.key === 'Enter') saveCaption(); if (e.key === 'Escape') { setEditing(false); setCaption(c.caption || ''); } }} />
<button onClick={saveCaption} className="btn-icon h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button> <button onClick={saveCaption} className="btn-ghost h-7 w-7 text-green-600 hover:bg-green-50"><Save className="h-3.5 w-3.5" /></button>
<button onClick={() => { setEditing(false); setCaption(c.caption || ''); }} className="btn-icon h-7 w-7 text-[var(--fg-tertiary)] hover:bg-[var(--secondary)]"><X className="h-3.5 w-3.5" /></button> <button onClick={() => { setEditing(false); setCaption(c.caption || ''); }} className="btn-ghost h-7 w-7 text-[var(--fg-tertiary)]"><X className="h-3.5 w-3.5" /></button>
</div> </div>
) : ( ) : (
<p className="text-xs text-[var(--fg-secondary)] truncate">{c.caption || 'Без подписи'}</p> <p className="text-xs text-[var(--fg-tertiary)] truncate">{c.caption || 'Без подписи'}</p>
)} )}
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-0.5">
<button onClick={() => { setEditing(true); setCaption(c.caption || ''); }} <button onClick={() => { setEditing(true); setCaption(c.caption || ''); }}
className="btn-icon h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--primary)] hover:bg-[var(--primary-light)]"> className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--accent)]">
<Edit3 className="h-3.5 w-3.5" strokeWidth={1.5} /> <Edit3 className="h-3.5 w-3.5" strokeWidth={1.5} />
</button> </button>
<button onClick={() => { if (confirm('Удалить этот пост?')) onDelete(); }} <button onClick={() => { if (confirm('Удалить этот пост?')) onDelete(); }}
className="btn-icon h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"> className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-red-500 hover:bg-red-50">
<Trash2 className="h-3.5 w-3.5" strokeWidth={1.5} /> <Trash2 className="h-3.5 w-3.5" strokeWidth={1.5} />
</button> </button>
</div> </div>

59
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 { ArrowLeft, Heart, Trash2 } from 'lucide-react'; import { ArrowLeft, Heart, Trash2, Trophy, Image } from 'lucide-react';
export default function CatPage() { export default function CatPage() {
const { id } = useParams<{ id: string }>(); const { id } = useParams<{ id: string }>();
@@ -52,13 +52,12 @@ export default function CatPage() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="mx-auto max-w-[580px] px-4 py-8"> <div className="mx-auto max-w-[520px] px-5 py-8">
<Skeleton className="mb-4 h-4 w-20 rounded-lg" /> <Skeleton className="mb-4 h-4 w-20 rounded-lg" />
<Skeleton className="aspect-[4/3] w-full rounded-xl" /> <Skeleton className="aspect-[4/3] w-full rounded-2xl" />
<div className="mt-5 space-y-3"> <div className="mt-5 space-y-3">
<Skeleton className="h-4 w-32 rounded-lg" /> <Skeleton className="h-4 w-32 rounded-lg" />
<Skeleton className="h-3 w-48 rounded-lg" /> <Skeleton className="h-3 w-48 rounded-lg" />
<Skeleton className="h-3 w-24 rounded-lg" />
</div> </div>
</div> </div>
); );
@@ -66,12 +65,12 @@ export default function CatPage() {
if (isError || !cat) { if (isError || !cat) {
return ( return (
<div className="flex flex-col items-center justify-center py-24 animate-rise"> <div className="flex flex-col items-center justify-center py-24 animate-fade-up">
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]"> <div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--border-light)]">
<span className="text-xl">🔍</span> <Image className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
</div> </div>
<p className="text-base font-semibold mb-1">Кот не найден</p> <p className="text-base font-semibold mb-1">Кот не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">В ленту</Button> <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-xl text-xs mt-2 h-9 px-4">В ленту</Button>
</div> </div>
); );
} }
@@ -81,17 +80,17 @@ export default function CatPage() {
}); });
return ( return (
<div className="mx-auto max-w-[580px] px-4 py-6 animate-rise"> <div className="mx-auto max-w-[520px] px-5 py-6 animate-fade-up">
<button onClick={() => navigate(-1)} <button onClick={() => navigate(-1)}
className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors"> className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors">
<ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад <ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
</button> </button>
<div className="card border overflow-hidden"> <div className="card overflow-hidden">
<div className="bg-[var(--secondary)] relative"> <div className="bg-[var(--bg)] relative">
{!imageLoaded && ( {!imageLoaded && (
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="h-8 w-8 rounded-full border-2 border-[var(--fg-tertiary)]/30 border-t-[var(--primary)] animate-spin" /> <div className="h-6 w-6 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
</div> </div>
)} )}
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} <img src={cat.image_url} alt={cat.caption || 'Фото кота'}
@@ -102,46 +101,48 @@ export default function CatPage() {
<div className="p-5 space-y-4"> <div className="p-5 space-y-4">
<div className="flex items-start justify-between"> <div className="flex items-start justify-between">
<Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group"> <Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group">
<Avatar className="h-10 w-10 border"> <Avatar className="h-10 w-10">
<AvatarFallback className="text-sm avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback> <AvatarFallback className="text-sm avatar-colored bg-[var(--accent)]">
{cat.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar> </Avatar>
<div> <div>
<span className="text-sm font-semibold group-hover:text-[var(--primary)] transition-colors">@{cat.username}</span> <span className="text-sm font-semibold group-hover:text-[var(--accent)] transition-colors">@{cat.username}</span>
<p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p> <p className="text-[11px] text-[var(--fg-tertiary)]">{dateStr}</p>
</div> </div>
</Link> </Link>
{isOwner && ( {isOwner && (
<button onClick={handleDelete} className="btn-icon h-9 w-9 text-[var(--fg-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"> <button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-red-500 hover:bg-red-50">
<Trash2 className="h-4 w-4" strokeWidth={1.5} /> <Trash2 className="h-4 w-4" strokeWidth={1.5} />
</button> </button>
)} )}
</div> </div>
{cat.caption && ( {cat.caption && (
<p className="text-sm leading-[1.45]"> <p className="text-sm leading-[1.5]">
<span className="font-semibold mr-1.5">@{cat.username}</span> <span className="font-semibold mr-1">@{cat.username}</span>
{cat.caption} {cat.caption}
</p> </p>
)} )}
<div className="border-t" /> <div className="divider" />
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<button onClick={toggleLike} disabled={isOwner || !user} <button onClick={toggleLike} disabled={isOwner || !user}
className={`flex items-center gap-2 text-sm font-medium transition-all ${ className={`flex items-center gap-2 text-sm font-medium transition-all ${
isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-[var(--danger)]' : 'text-[var(--fg-secondary)] hover:text-[var(--fg)]' isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed' : liked ? 'text-red-500' : 'text-[var(--fg-secondary)] hover:text-red-400'
}`}> }`}>
<Heart className={`h-5 w-5 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-pop' : 'stroke-[1.5]'}`} /> <Heart className={`h-5 w-5 transition-all ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'}`} />
{cat.likes_count > 0 && <span className="tabular-nums">{cat.likes_count}</span>} {cat.likes_count > 0 && <span className="stat-value">{cat.likes_count}</span>}
</button> </button>
<span className="flex items-center gap-1.5 text-xs text-[var(--fg-secondary)]"> <span className="flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)]">
<span>🏆</span> <Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
<span className="font-semibold">{cat.user_points}</span> <span className="font-semibold text-[var(--fg-secondary)]">{cat.user_points}</span>
</span> </span>
</div> </div>
<Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-lg text-xs h-8"> <Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-xl text-xs h-8 px-4 gap-1">
<ArrowLeft className="h-3.5 w-3.5 mr-1" strokeWidth={1.5} /> В ленту <ArrowLeft className="h-3.5 w-3.5" strokeWidth={1.5} /> В ленту
</Button> </Button>
</div> </div>
</div> </div>

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

@@ -4,24 +4,24 @@ import CatCard from '@/components/CatCard';
import FeedSidebar from '@/components/FeedSidebar'; import FeedSidebar from '@/components/FeedSidebar';
import CatModal from '@/components/CatModal'; import CatModal from '@/components/CatModal';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react'; import { ChevronLeft, ChevronRight, RefreshCw, Cat } from 'lucide-react';
function FeedSkeleton() { function FeedSkeleton() {
return ( return (
<div className="space-y-4"> <div className="space-y-5">
{Array.from({ length: 3 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="card border overflow-hidden"> <div key={i} className="card overflow-hidden">
<div className="flex items-center gap-3 px-4 pt-4 pb-2"> <div className="flex items-center gap-3 px-5 pt-5 pb-3">
<div className="h-9 w-9 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-9 w-9 rounded-full skeleton-shimmer" />
<div className="space-y-2"> <div className="space-y-2 flex-1">
<div className="h-3 w-28 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-3 w-28 rounded-full skeleton-shimmer" />
<div className="h-2.5 w-16 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-2.5 w-16 rounded-full skeleton-shimmer" />
</div> </div>
</div> </div>
<div className="aspect-[4/3] w-full bg-[var(--secondary)] animate-skeleton" /> <div className="aspect-[4/3] w-full skeleton-shimmer" />
<div className="p-4 space-y-2"> <div className="p-5 space-y-2">
<div className="h-3 w-40 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-3 w-40 rounded-full skeleton-shimmer" />
<div className="h-3 w-20 rounded-full bg-[var(--secondary)] animate-skeleton" /> <div className="h-3 w-20 rounded-full skeleton-shimmer" />
</div> </div>
</div> </div>
))} ))}
@@ -35,40 +35,33 @@ export default function FeedPage() {
const { data, isLoading, isError, refetch } = useCats(page); const { data, isLoading, isError, refetch } = useCats(page);
return ( return (
<div className="mx-auto max-w-[660px] px-4 py-4"> <div className="mx-auto max-w-[540px] px-5 py-5">
<div className="flex gap-6"> <div className="flex gap-8">
<main className="flex-1 min-w-0"> <main className="flex-1 min-w-0">
{data && data.totalPages > 0 && (
<div className="flex items-center justify-between mb-4">
<h2 className="text-xs font-bold text-[var(--fg-secondary)] uppercase tracking-wider">Лента</h2>
<span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{data.total} публикаций</span>
</div>
)}
{isLoading && <FeedSkeleton />} {isLoading && <FeedSkeleton />}
{isError && ( {isError && (
<div className="flex flex-col items-center justify-center py-24 text-center animate-rise"> <div className="flex flex-col items-center justify-center py-20 text-center animate-fade-up">
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--danger-light)]"> <div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-red-50">
<span className="text-xl">😿</span> <Cat className="h-7 w-7 text-red-400" strokeWidth={1.5} />
</div> </div>
<p className="text-base font-semibold mb-1">Не удалось загрузить</p> <p className="text-base font-semibold mb-1">Не удалось загрузить</p>
<p className="text-sm text-[var(--fg-secondary)] mb-5">Попробуйте снова</p> <p className="text-sm text-[var(--fg-tertiary)] mb-5">Попробуйте снова</p>
<Button variant="outline" onClick={() => refetch()} className="rounded-lg text-xs gap-1.5"> <Button variant="outline" onClick={() => refetch()} className="rounded-xl text-xs gap-1.5 h-9 px-4">
<RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} /> Попробовать снова <RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} /> Попробовать
</Button> </Button>
</div> </div>
)} )}
{data && data.cats.length === 0 && ( {data && data.cats.length === 0 && (
<div className="flex flex-col items-center justify-center py-24 text-center animate-rise"> <div className="flex flex-col items-center justify-center py-20 text-center animate-fade-up">
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--primary-light)]"> <div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--accent-light)]">
<span className="text-xl">🐱</span> <Cat className="h-7 w-7 text-[var(--accent)]" strokeWidth={1.5} />
</div> </div>
<p className="text-base font-semibold mb-1">Пока нет котов</p> <p className="text-base font-semibold mb-1">Пока нет котов</p>
<p className="text-sm text-[var(--fg-secondary)] mb-5">Будьте первым, кто загрузит фото кота</p> <p className="text-sm text-[var(--fg-tertiary)] mb-5">Будьте первым</p>
<Button onClick={() => window.location.href = '/upload'} className="rounded-lg text-xs" <Button onClick={() => window.location.href = '/upload'}
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}> className="rounded-xl text-xs h-9 px-5 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white">
Загрузить кота Загрузить кота
</Button> </Button>
</div> </div>
@@ -76,32 +69,33 @@ export default function FeedPage() {
{data && data.cats.length > 0 && ( {data && data.cats.length > 0 && (
<> <>
{data.cats.map((cat) => ( <div className="space-y-5">
{data.cats.map(cat => (
<CatCard key={cat.id} cat={cat} onOpen={setModalCatId} /> <CatCard key={cat.id} cat={cat} onOpen={setModalCatId} />
))} ))}
</div>
{data.totalPages > 1 && ( {data.totalPages > 1 && (
<nav className="flex items-center justify-center gap-3 mt-6 pb-6"> <nav className="flex items-center justify-center gap-2 mt-8 pb-6">
<Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1} <Button variant="outline" size="sm" onClick={() => setPage(p => Math.max(1, p - 1))} disabled={page === 1}
className="rounded-lg text-xs h-9 px-4"> className="rounded-xl text-xs h-9 px-3 gap-1">
<ChevronLeft className="h-4 w-4" strokeWidth={1.5} /> Назад <ChevronLeft className="h-4 w-4" strokeWidth={1.5} />
</Button> </Button>
<div className="flex gap-1"> <div className="flex gap-1">
{Array.from({ length: Math.min(data.totalPages, 7) }, (_, i) => i + 1).map((p) => ( {Array.from({ length: Math.min(data.totalPages, 7) }, (_, i) => i + 1).map(p => (
<button key={p} onClick={() => setPage(p)} <button key={p} onClick={() => setPage(p)}
className={`h-8 w-8 rounded-lg text-xs font-medium transition-all ${ className={`h-9 min-w-[36px] rounded-xl text-xs font-medium transition-all ${
p === page ? 'text-white shadow-sm' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]' p === page ? 'bg-[var(--accent)] text-white shadow-sm' : 'text-[var(--fg-tertiary)] hover:bg-[var(--border-light)]'
}`} }`}>
style={p === page ? { background: 'linear-gradient(135deg, #2563eb, #7c3aed)' } : {}}>
{p} {p}
</button> </button>
))} ))}
</div> </div>
<Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages} <Button variant="outline" size="sm" onClick={() => setPage(p => p + 1)} disabled={page >= data.totalPages}
className="rounded-lg text-xs h-9 px-4"> className="rounded-xl text-xs h-9 px-3 gap-1">
Вперёд <ChevronRight className="h-4 w-4" strokeWidth={1.5} /> <ChevronRight className="h-4 w-4" strokeWidth={1.5} />
</Button> </Button>
</nav> </nav>
)} )}
@@ -109,7 +103,7 @@ export default function FeedPage() {
)} )}
</main> </main>
<aside className="hidden lg:block w-[240px] shrink-0"> <aside className="hidden lg:block w-[220px] shrink-0">
<div className="sticky top-20"><FeedSidebar /></div> <div className="sticky top-20"><FeedSidebar /></div>
</aside> </aside>
</div> </div>

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

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

91
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 { ArrowLeft, Plus, LogOut, Shield } from 'lucide-react'; import { ArrowLeft, Plus, LogOut, Shield, Heart, Image, Trophy } 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-[660px] px-4 py-8"> <div className="mx-auto max-w-[540px] px-5 py-8">
<div className="flex items-center gap-5 mb-10"> <div className="flex items-center gap-5 mb-10">
<Skeleton className="h-20 w-20 rounded-full" /> <Skeleton className="h-20 w-20 rounded-full" />
<div className="space-y-2.5 flex-1"> <div className="space-y-2.5 flex-1">
<Skeleton className="h-6 w-36 rounded-full" /> <Skeleton className="h-6 w-32 rounded-full" />
<Skeleton className="h-4 w-48 rounded-full" /> <Skeleton className="h-4 w-48 rounded-full" />
</div> </div>
</div> </div>
<div className="grid grid-cols-3 gap-2"> <div className="grid grid-cols-3 gap-1.5">
{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-xl" />)}
</div> </div>
</div> </div>
); );
@@ -44,10 +44,12 @@ export default function ProfilePage() {
if (!profileUser && !isMe) { if (!profileUser && !isMe) {
return ( return (
<div className="flex flex-col items-center justify-center py-24 animate-rise"> <div className="flex flex-col items-center justify-center py-24 animate-fade-up">
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]"><span className="text-xl">🔍</span></div> <div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--border-light)]">
<Image className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
</div>
<p className="text-base font-semibold mb-1">Пользователь не найден</p> <p className="text-base font-semibold mb-1">Пользователь не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-lg text-xs mt-2">Вернуться в ленту</Button> <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-xl text-xs mt-2 h-9 px-4">В ленту</Button>
</div> </div>
); );
} }
@@ -57,47 +59,61 @@ export default function ProfilePage() {
const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0); const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
return ( return (
<div className="mx-auto max-w-[660px] px-4 py-6 animate-rise"> <div className="mx-auto max-w-[540px] px-5 py-6 animate-fade-up">
{!isMe && ( {!isMe && (
<button onClick={() => navigate(-1)} className="mb-4 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors"> <button onClick={() => navigate(-1)} className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors">
<ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад <ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
</button> </button>
)} )}
<div className="flex items-center gap-6 mb-8"> <div className="flex items-center gap-5 mb-8">
<Avatar className="h-20 w-20 shrink-0"> <Avatar className="h-[72px] w-[72px] shrink-0">
<AvatarFallback className="text-2xl font-bold avatar" style={{ borderRadius: '50%' }}> <AvatarFallback className="text-2xl font-800 avatar-colored bg-[var(--accent)]">
{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-3"> <div className="flex items-center gap-2 mb-3">
<h1 className="text-xl font-bold truncate">@{profileUser?.username}</h1> <h1 className="text-lg font-800 truncate">@{profileUser?.username}</h1>
<div className="flex items-center gap-1 ml-auto"> <div className="flex items-center gap-1 ml-auto">
{isMe && me?.is_admin && ( {isMe && me?.is_admin && (
<Link to="/admin" className="btn-icon h-8 w-8 text-[var(--primary)] hover:bg-[var(--primary-light)]" title="Админ-панель"> <Link to="/admin" className="btn-ghost h-8 w-8 text-[var(--accent)]" title="Админ-панель">
<Shield className="h-4 w-4" strokeWidth={1.5} /> <Shield className="h-4 w-4" strokeWidth={1.5} />
</Link> </Link>
)} )}
{isMe && ( {isMe && (
<button onClick={logout} className="btn-icon h-8 w-8 text-[var(--fg-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]" title="Выйти"> <button onClick={logout} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-red-500" title="Выйти">
<LogOut className="h-4 w-4" strokeWidth={1.5} /> <LogOut className="h-4 w-4" strokeWidth={1.5} />
</button> </button>
)} )}
</div> </div>
</div> </div>
<div className="flex items-center gap-6"> <div className="flex items-center gap-5">
<div><span className="font-bold">{cats.length}</span><span className="text-xs text-[var(--fg-secondary)] ml-1">фото</span></div> <div className="text-center">
<div><span className="font-bold">{totalLikes}</span><span className="text-xs text-[var(--fg-secondary)] ml-1">❤️</span></div> <div className="stat-value text-base">{cats.length}</div>
<div><span className="font-bold">🏆{profileUser?.points ?? 0}</span></div> <div className="text-[10px] text-[var(--fg-tertiary)] uppercase tracking-wider">фото</div>
</div>
<div className="text-center">
<div className="stat-value text-base flex items-center justify-center gap-0.5">
<Heart className="h-3.5 w-3.5 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
{totalLikes}
</div>
<div className="text-[10px] text-[var(--fg-tertiary)] uppercase tracking-wider">лайков</div>
</div>
<div className="text-center">
<div className="stat-value text-base flex items-center justify-center gap-0.5">
<Trophy className="h-3.5 w-3.5 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
{profileUser?.points ?? 0}
</div>
<div className="text-[10px] text-[var(--fg-tertiary)] uppercase tracking-wider">баллов</div>
</div>
</div> </div>
{isMe && ( {isMe && (
<div className="mt-3"> <div className="mt-3">
<Link to="/upload"> <Link to="/upload">
<Button size="sm" className="rounded-lg text-xs h-8 gap-1.5" <Button size="sm" className="rounded-xl text-xs h-8 gap-1.5 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white px-4">
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
<Plus className="h-3.5 w-3.5" strokeWidth={2} /> Новая публикация <Plus className="h-3.5 w-3.5" strokeWidth={2} /> Новая публикация
</Button> </Button>
</Link> </Link>
@@ -107,24 +123,29 @@ export default function ProfilePage() {
</div> </div>
{cats.length === 0 ? ( {cats.length === 0 ? (
<div className="flex flex-col items-center justify-center py-16 text-center animate-rise"> <div className="flex flex-col items-center justify-center py-16 text-center animate-fade-up">
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]"><span className="text-xl">📸</span></div> <div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--border-light)]">
<p className="text-sm font-medium mb-1">Пока нет котов</p> <Image className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
<p className="text-xs text-[var(--fg-secondary)] mb-5">{isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}</p> </div>
<p className="text-sm font-semibold mb-1">Пока нет котов</p>
<p className="text-xs text-[var(--fg-tertiary)] mb-5">{isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}</p>
{isMe && ( {isMe && (
<Link to="/upload"><Button size="sm" className="rounded-lg text-xs" <Link to="/upload">
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>Загрузить кота</Button></Link> <Button size="sm" className="rounded-xl text-xs bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white">Загрузить кота</Button>
</Link>
)} )}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-3 gap-1.5"> <div className="grid grid-cols-3 gap-1.5">
{cats.map((cat) => ( {cats.map(cat => (
<button key={cat.id} onClick={() => setModalCatId(cat.id)} <button key={cat.id} onClick={() => setModalCatId(cat.id)}
className="group relative aspect-square overflow-hidden bg-[var(--secondary)] rounded-xl"> className="group relative aspect-square overflow-hidden bg-[var(--bg)] rounded-xl">
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} <img src={cat.image_url} alt={cat.caption || 'Фото кота'}
className="h-full w-full object-cover transition-all duration-300 group-hover:scale-105" loading="lazy" /> className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy" />
<div className="absolute inset-0 bg-gradient-to-t from-black/30 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-2.5"> <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
<span className="text-white text-xs font-semibold drop-shadow">❤️ {cat.likes_count}</span> <span className="text-white text-xs font-semibold opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 drop-shadow-lg">
<Heart className="h-3.5 w-3.5 fill-white" strokeWidth={0} /> {cat.likes_count}
</span>
</div> </div>
</button> </button>
))} ))}

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

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

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

@@ -6,7 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/components/Toast'; import { useToast } from '@/components/Toast';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { ArrowLeft, Upload, X } from 'lucide-react'; import { ArrowLeft, Upload, X, ImagePlus } from 'lucide-react';
export default function UploadPage() { export default function UploadPage() {
const navigate = useNavigate(); const navigate = useNavigate();
@@ -41,60 +41,65 @@ export default function UploadPage() {
const clearFile = () => { setFile(null); if (preview) URL.revokeObjectURL(preview); setPreview(null); }; const clearFile = () => { setFile(null); if (preview) URL.revokeObjectURL(preview); setPreview(null); };
return ( return (
<div className="mx-auto max-w-[580px] px-4 py-6"> <div className="mx-auto max-w-[520px] px-5 py-6">
<button onClick={() => navigate(-1)} <button onClick={() => navigate(-1)}
className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors"> className="mb-6 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors">
<ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад <ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
</button> </button>
<h1 className="text-xl font-bold mb-6 text-gradient">Новая публикация</h1> <h1 className="text-xl font-800 tracking-tight mb-6">Новая публикация</h1>
{!preview ? ( {!preview ? (
<div {...getRootProps()} <div {...getRootProps()}
className={`border-2 border-dashed rounded-xl p-14 text-center cursor-pointer transition-all ${ className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all bg-white ${
isDragActive ? 'border-[var(--primary)] bg-[var(--primary-soft)] scale-[1.01]' : 'border-[var(--border)] hover:bg-[var(--secondary)]' isDragActive ? 'border-[var(--accent)] bg-[var(--accent-light)] scale-[1.01]' : 'border-[var(--border)] hover:border-[var(--fg-tertiary)] hover:bg-[var(--surface-hover)]'
}`}> }`}>
<input {...getInputProps()} /> <input {...getInputProps()} />
<div className="mb-5 flex justify-center"> <div className="mb-5 flex justify-center">
<div className="h-14 w-14 rounded-xl bg-[var(--secondary)] flex items-center justify-center"> <div className="h-14 w-14 rounded-2xl bg-[var(--accent-light)] flex items-center justify-center">
<Upload className="h-6 w-6 text-[var(--fg-secondary)]" strokeWidth={1.5} /> <ImagePlus className="h-6 w-6 text-[var(--accent)]" strokeWidth={1.5} />
</div> </div>
</div> </div>
<p className="text-sm font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото'}</p> <p className="text-sm font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}</p>
<p className="text-xs text-[var(--fg-secondary)] mb-5">или нажмите, чтобы выбрать</p> <p className="text-xs text-[var(--fg-tertiary)] mb-5">или нажмите, чтобы выбрать файл</p>
<Button variant="outline" size="sm" className="rounded-lg text-xs px-5">Выбрать файл</Button> <Button variant="outline" size="sm" className="rounded-xl text-xs px-5 h-9">Выбрать файл</Button>
<p className="mt-4 text-[11px] text-[var(--fg-tertiary)]">JPG, PNG, GIF, WebP · до 10 МБ</p> <p className="mt-4 text-[10px] text-[var(--fg-tertiary)] tracking-wide">JPG, PNG, GIF, WebP · до 10 МБ</p>
</div> </div>
) : ( ) : (
<div className="space-y-5 animate-rise"> <div className="space-y-5 animate-fade-up">
<div className="relative bg-[var(--secondary)] rounded-xl overflow-hidden"> <div className="relative bg-[var(--bg)] rounded-2xl overflow-hidden">
<img src={preview!} alt="Preview" className="max-h-[420px] w-full object-contain" /> <img src={preview!} alt="Preview" className="max-h-[420px] w-full object-contain" />
<button onClick={clearFile} <button onClick={clearFile}
className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all"> className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-xl bg-black/40 text-white hover:bg-black/60 transition-all">
<X className="h-4 w-4" strokeWidth={2} /> <X className="h-4 w-4" strokeWidth={2} />
</button> </button>
</div> </div>
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<Avatar className="h-9 w-9 shrink-0 border"> <Avatar className="h-9 w-9 shrink-0">
<AvatarFallback className="text-xs avatar">{user?.username?.charAt(0).toUpperCase() || '?'}</AvatarFallback> <AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]">
{user?.username?.charAt(0).toUpperCase() || '?'}
</AvatarFallback>
</Avatar> </Avatar>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-semibold mb-1">{user?.username}</p> <p className="text-sm font-semibold mb-1">{user?.username}</p>
<textarea placeholder="Подпись..." value={caption} onChange={(e) => setCaption(e.target.value)} <textarea placeholder="Подпись..." value={caption} onChange={e => setCaption(e.target.value)}
maxLength={200} rows={3} maxLength={200} rows={3}
className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.4]" /> className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.5]" />
<div className="flex justify-end mt-1"> <div className="flex justify-end mt-1">
<span className="text-[11px] text-[var(--fg-tertiary)] tabular-nums">{caption.length}/200</span> <span className="text-[10px] text-[var(--fg-tertiary)] stat-value">{caption.length}/200</span>
</div> </div>
</div> </div>
</div> </div>
<div className="flex items-center justify-between pt-3 border-t"> <div className="divider" />
<span className="text-xs text-[var(--fg-secondary)]">🏆 +1 балл</span>
<div className="flex items-center justify-between pt-1">
<span className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1">
<Upload className="h-3 w-3" strokeWidth={1.5} /> +1 балл
</span>
<Button onClick={handleUpload} disabled={uploadMutation.isPending} <Button onClick={handleUpload} disabled={uploadMutation.isPending}
size="sm" className="rounded-lg text-sm px-6 h-10 disabled:opacity-60" size="sm" className="rounded-xl text-sm px-6 h-10 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white disabled:opacity-60">
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
{uploadMutation.isPending ? ( {uploadMutation.isPending ? (
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" /> <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
@@ -105,8 +110,8 @@ export default function UploadPage() {
</div> </div>
{uploadMutation.isError && ( {uploadMutation.isError && (
<div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-xs font-medium animate-rise"> <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-red-50 text-red-600 text-xs font-medium animate-fade-up">
<span>⚠️</span><span>Не удалось загрузить. Попробуйте снова.</span> Не удалось загрузить. Попробуйте снова.
</div> </div>
)} )}
</div> </div>

2
client/tsconfig.tsbuildinfo
View File

@@ -1 +1 @@
{"root":["./src/app.tsx","./src/main.tsx","./src/api/client.ts","./src/api/endpoints.ts","./src/components/catcard.tsx","./src/components/catmodal.tsx","./src/components/feedsidebar.tsx","./src/components/navbar.tsx","./src/components/protectedroute.tsx","./src/components/storycircle.tsx","./src/components/toast.tsx","./src/components/ui/avatar.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/skeleton.tsx","./src/hooks/useauth.tsx","./src/hooks/usecats.ts","./src/hooks/uselikes.ts","./src/lib/auth.ts","./src/lib/utils.ts","./src/pages/adminpage.tsx","./src/pages/catpage.tsx","./src/pages/feedpage.tsx","./src/pages/loginpage.tsx","./src/pages/profilepage.tsx","./src/pages/registerpage.tsx","./src/pages/uploadpage.tsx"],"version":"5.9.3"} {"root":["./src/app.tsx","./src/main.tsx","./src/api/client.ts","./src/api/endpoints.ts","./src/components/catcard.tsx","./src/components/catmodal.tsx","./src/components/feedsidebar.tsx","./src/components/navbar.tsx","./src/components/protectedroute.tsx","./src/components/toast.tsx","./src/components/ui/avatar.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/skeleton.tsx","./src/hooks/useauth.tsx","./src/hooks/usecats.ts","./src/hooks/uselikes.ts","./src/lib/auth.ts","./src/lib/utils.ts","./src/pages/adminpage.tsx","./src/pages/catpage.tsx","./src/pages/feedpage.tsx","./src/pages/loginpage.tsx","./src/pages/profilepage.tsx","./src/pages/registerpage.tsx","./src/pages/uploadpage.tsx"],"version":"5.9.3"}