UI: complete redesign — warm atelier style, Manrope font, burnt orange accent, shadow-based cards
This commit is contained in:
@@ -1,10 +1,13 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐱</text></svg>" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Catstagram</title>
|
||||
<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>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useAuth } from '@/hooks/useAuth';
|
||||
import { useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Heart } from 'lucide-react';
|
||||
import { Heart, MessageCircle, Trophy } from 'lucide-react';
|
||||
|
||||
interface CatCardProps {
|
||||
cat: Cat;
|
||||
@@ -20,17 +20,18 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
|
||||
const unlikeMutation = useUnlikeCat(cat.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 (liked) {
|
||||
setLiked(false); setLikeCount((c) => c - 1);
|
||||
setLiked(false); setLikeCount(c => c - 1);
|
||||
try { await unlikeMutation.mutateAsync(); }
|
||||
catch { setLiked(true); setLikeCount((c) => c + 1); }
|
||||
catch { setLiked(true); setLikeCount(c => c + 1); }
|
||||
} else {
|
||||
setLiked(true); setLikeCount((c) => c + 1);
|
||||
setLiked(true); setLikeCount(c => c + 1);
|
||||
toast('❤️');
|
||||
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 (
|
||||
<article className="animate-rise mb-4 last:mb-0">
|
||||
<div className="card border overflow-hidden">
|
||||
<div
|
||||
className="flex items-center gap-3 px-4 pt-4 pb-2 cursor-pointer"
|
||||
onClick={() => onOpen(cat.id)}
|
||||
>
|
||||
<Avatar className="h-9 w-9 border">
|
||||
<AvatarFallback className="text-xs avatar">
|
||||
<article className="animate-fade-up">
|
||||
<div className="card overflow-hidden cursor-pointer card-interactive" onClick={() => onOpen(cat.id)}>
|
||||
<div className="flex items-center gap-3 px-5 pt-5 pb-3">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<h3 className="text-sm font-semibold">@{cat.username}</h3>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="text-sm font-semibold truncate">@{cat.username}</h3>
|
||||
<time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<figure className="cursor-pointer bg-[var(--secondary)]" onClick={() => onOpen(cat.id)}>
|
||||
<figure className="bg-[var(--bg)]">
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
@@ -66,50 +64,42 @@ export default function CatCard({ cat, onOpen }: CatCardProps) {
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<div className="px-5 pb-4 pt-3">
|
||||
{cat.caption && (
|
||||
<div className="px-4 pt-3 pb-1 cursor-pointer" onClick={() => onOpen(cat.id)}>
|
||||
<p className="text-sm leading-[1.45]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
<p className="text-sm leading-[1.5] mb-3">
|
||||
<span className="font-semibold mr-1">@{cat.username}</span>
|
||||
{cat.caption}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={toggleLike}
|
||||
disabled={isOwner || !user}
|
||||
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-[18px] w-[18px] transition-all ${
|
||||
liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-pop' : 'stroke-[1.5]'
|
||||
}`}
|
||||
/>
|
||||
{likeCount > 0 && <span className="tabular-nums text-xs">{likeCount}</span>}
|
||||
<Heart className={`h-[18px] w-[18px] transition-all ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'}`} />
|
||||
{likeCount > 0 && <span className="stat-value text-xs">{likeCount}</span>}
|
||||
</button>
|
||||
|
||||
<button
|
||||
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>
|
||||
</div>
|
||||
|
||||
<span className="flex items-center gap-1 text-xs text-[var(--fg-tertiary)]">
|
||||
<span>🏆</span>
|
||||
<span className="font-medium text-[var(--fg-secondary)]">{cat.user_points}</span>
|
||||
<Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
<span className="font-semibold">{cat.user_points}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -4,7 +4,7 @@ import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { X, Heart, Trash2 } from 'lucide-react';
|
||||
import { X, Heart, Trash2, Trophy } from 'lucide-react';
|
||||
|
||||
interface CatModalProps {
|
||||
catId: number;
|
||||
@@ -39,14 +39,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
const toggleLike = async () => {
|
||||
if (isOwner || !user || !cat) return;
|
||||
if (liked) {
|
||||
setLiked(false); setLikeCount((c) => c - 1);
|
||||
setLiked(false); setLikeCount(c => c - 1);
|
||||
try { await unlikeMutation.mutateAsync(); refetchLike(); }
|
||||
catch { setLiked(true); setLikeCount((c) => c + 1); }
|
||||
catch { setLiked(true); setLikeCount(c => c + 1); }
|
||||
} else {
|
||||
setLiked(true); setLikeCount((c) => c + 1);
|
||||
setLiked(true); setLikeCount(c => c + 1);
|
||||
toast('❤️');
|
||||
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) {
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] bg-black/40 flex items-center justify-center" onClick={onClose}>
|
||||
<div className="flex items-center gap-3 px-6 py-4 bg-white rounded-full shadow-lg animate-scale-in">
|
||||
<div className="h-5 w-5 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" />
|
||||
<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-5 py-3 bg-white rounded-2xl shadow-lg">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
@@ -72,15 +72,17 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
});
|
||||
|
||||
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
|
||||
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"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
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()}
|
||||
>
|
||||
<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">
|
||||
<Avatar className="h-9 w-9 border">
|
||||
<AvatarFallback className="text-sm avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<span className="text-sm font-semibold">@{cat.username}</span>
|
||||
@@ -89,20 +91,20 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
{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} />
|
||||
</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} />
|
||||
</button>
|
||||
</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 && (
|
||||
<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>
|
||||
)}
|
||||
<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 items-start gap-3">
|
||||
<Avatar className="h-8 w-8 shrink-0 mt-0.5 border">
|
||||
<AvatarFallback className="text-[10px] avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
<Avatar className="h-8 w-8 shrink-0 mt-0.5">
|
||||
<AvatarFallback className="text-[10px] avatar-colored bg-[var(--accent)]">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div>
|
||||
<p className="text-sm leading-[1.45]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
<p className="text-sm leading-[1.5]">
|
||||
<span className="font-semibold mr-1">@{cat.username}</span>
|
||||
{cat.caption || 'Без подписи'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t px-5 py-4 shrink-0">
|
||||
<div className="flex items-center justify-between">
|
||||
@@ -133,16 +135,16 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
onClick={toggleLike}
|
||||
disabled={isOwner || !user}
|
||||
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]'}`} />
|
||||
{likeCount > 0 && <span className="tabular-nums">{likeCount}</span>}
|
||||
<Heart className={`h-5 w-5 transition-all ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'}`} />
|
||||
{likeCount > 0 && <span className="stat-value">{likeCount}</span>}
|
||||
</button>
|
||||
<span className="flex items-center gap-1.5 text-xs text-[var(--fg-secondary)]">
|
||||
<span>🏆</span>
|
||||
<span className="font-semibold">{cat.user_points}</span>
|
||||
<span className="text-[var(--fg-tertiary)]">баллов</span>
|
||||
<span className="flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)]">
|
||||
<Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
<span className="font-semibold text-[var(--fg-secondary)]">{cat.user_points}</span>
|
||||
<span>баллов</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,14 +2,13 @@ import { useAuth } from '@/hooks/useAuth';
|
||||
import { useCats } from '@/hooks/useCats';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Trophy, Crown, Medal } from 'lucide-react';
|
||||
|
||||
function Medal({ rank }: { rank: number }) {
|
||||
const colors = ['bg-blue-100 text-blue-700', 'bg-stone-100 text-stone-500', 'bg-amber-100 text-amber-700'];
|
||||
return (
|
||||
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-[11px] font-bold ${colors[rank] || 'text-[var(--fg-tertiary)]'}`}>
|
||||
{rank + 1}
|
||||
</span>
|
||||
);
|
||||
function RankBadge({ rank }: { rank: number }) {
|
||||
if (rank === 0) return <Crown className="h-4 w-4 text-amber-500" strokeWidth={1.5} />;
|
||||
if (rank === 1) return <Medal className="h-4 w-4 text-stone-400" strokeWidth={1.5} />;
|
||||
if (rank === 2) return <Medal className="h-4 w-4 text-amber-700" strokeWidth={1.5} />;
|
||||
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>;
|
||||
}
|
||||
|
||||
export default function FeedSidebar() {
|
||||
@@ -29,45 +28,49 @@ export default function FeedSidebar() {
|
||||
.slice(0, 5);
|
||||
|
||||
return (
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-4">
|
||||
{user && (
|
||||
<Link to="/profile" className="card border p-3.5 flex items-center gap-3 transition-all hover:shadow-md group">
|
||||
<Avatar className="h-11 w-11 border">
|
||||
<AvatarFallback className="text-sm font-semibold avatar">
|
||||
<Link to="/profile" className="card p-4 flex items-center gap-3.5 card-interactive group block">
|
||||
<Avatar className="h-11 w-11">
|
||||
<AvatarFallback className="text-sm font-bold avatar-colored bg-[var(--accent)]">
|
||||
{user.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<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-xs text-[var(--fg-secondary)]">🏆 {user.points} баллов</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-tertiary)] flex items-center gap-1">
|
||||
<Trophy className="h-3 w-3" strokeWidth={1.5} /> {user.points} баллов
|
||||
</p>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
<div className="card border p-4">
|
||||
<h3 className="text-xs font-bold text-[var(--fg-secondary)] mb-4 flex items-center gap-1.5">
|
||||
<span>🏆</span> Лидеры
|
||||
<div className="card p-4">
|
||||
<h3 className="text-[11px] font-bold text-[var(--fg-tertiary)] uppercase tracking-widest mb-4 flex items-center gap-1.5">
|
||||
<Trophy className="h-3 w-3" strokeWidth={2} /> Лидеры
|
||||
</h3>
|
||||
|
||||
{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) => (
|
||||
<Link key={id} to={`/profile/${id}`} className="flex items-center gap-3 group">
|
||||
<Medal rank={i} />
|
||||
<Avatar className="h-7 w-7">
|
||||
<AvatarFallback className="text-[9px] avatar">{u.username.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
<Link key={id} to={`/profile/${id}`} className="flex items-center gap-2.5 group py-0.5">
|
||||
<RankBadge rank={i} />
|
||||
<Avatar className="h-6 w-6">
|
||||
<AvatarFallback className="text-[8px] font-bold avatar-colored bg-[var(--fg-tertiary)]">
|
||||
{u.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<span className="text-sm flex-1 truncate font-medium group-hover:text-[var(--primary)] transition-colors">{u.username}</span>
|
||||
<span className="text-xs font-semibold text-[var(--fg-secondary)] tabular-nums">{u.points}</span>
|
||||
<span className="text-sm flex-1 truncate font-medium group-hover:text-[var(--accent)] transition-colors">{u.username}</span>
|
||||
<span className="stat-value text-xs text-[var(--fg-secondary)]">{u.points}</span>
|
||||
</Link>
|
||||
))}
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Shield } from 'lucide-react';
|
||||
import { Home, PlusCircle, User, Shield } from 'lucide-react';
|
||||
|
||||
export default function Navbar() {
|
||||
const { user } = useAuth();
|
||||
@@ -10,25 +10,29 @@ export default function Navbar() {
|
||||
if (!user) return null;
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 glass">
|
||||
<div className="mx-auto flex h-14 max-w-[660px] items-center justify-between px-4">
|
||||
<Link to="/feed" className="text-lg font-bold text-gradient tracking-tight">
|
||||
<nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]">
|
||||
<div className="mx-auto flex h-14 max-w-[540px] items-center justify-between px-5">
|
||||
<Link to="/feed" className="text-[15px] font-800 tracking-tight text-[var(--fg)]">
|
||||
Catstagram
|
||||
</Link>
|
||||
|
||||
<div className="flex items-center gap-1">
|
||||
<NavLink to="/feed" active={location.pathname === '/feed'} emoji="🏠" label="Лента" />
|
||||
<NavLink to="/upload" active={location.pathname === '/upload'} emoji="📷" label="Добавить" />
|
||||
<NavIcon to="/feed" active={location.pathname === '/feed'} icon={Home} label="Лента" />
|
||||
<NavIcon to="/upload" active={location.pathname === '/upload'} icon={PlusCircle} label="Добавить" />
|
||||
|
||||
<Link to="/profile" className="ml-2 relative">
|
||||
<Avatar className="h-8 w-8 border hover:border-[var(--primary)] transition-all">
|
||||
<AvatarFallback className="text-[11px] avatar">
|
||||
<Link to="/profile" className="ml-1.5 relative flex items-center">
|
||||
<div className={`flex items-center justify-center h-8 w-8 rounded-full transition-all ${
|
||||
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()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
</div>
|
||||
{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">
|
||||
<Shield className="h-2.5 w-2.5 text-white" strokeWidth={3} />
|
||||
<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 w-2 text-white" strokeWidth={3} />
|
||||
</span>
|
||||
)}
|
||||
</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 (
|
||||
<Link
|
||||
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
|
||||
? 'bg-[var(--primary-soft)] text-[var(--primary)]'
|
||||
: 'text-[var(--fg-secondary)] hover:text-[var(--fg)] hover:bg-[var(--secondary)]'
|
||||
? 'bg-[var(--accent-soft)] text-[var(--accent)]'
|
||||
: 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]'
|
||||
}`}
|
||||
>
|
||||
<span className="text-base leading-none">{emoji}</span>
|
||||
<span className="hidden sm:inline">{label}</span>
|
||||
<Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2 : 1.5} />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
@@ -8,11 +8,11 @@ export default function ProtectedRoute({ children }: { children: React.ReactNode
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="flex h-screen items-center justify-center bg-[var(--bg)]">
|
||||
<div className="flex flex-col items-center gap-4">
|
||||
<div className="h-14 w-14 rounded-full flex items-center justify-center" style={{ background: 'linear-gradient(135deg, #007aff, #5856d6)' }}>
|
||||
<div className="flex flex-col items-center gap-5">
|
||||
<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} />
|
||||
</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>
|
||||
);
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -12,22 +12,20 @@ export function ToastProvider({ children }: { children: ReactNode }) {
|
||||
|
||||
const addToast = useCallback((message: string, type: ToastType = 'success') => {
|
||||
const id = nextId++;
|
||||
setToasts((prev) => [...prev, { id, message, type }]);
|
||||
setTimeout(() => setToasts((prev) => prev.filter((t) => t.id !== id)), 1800);
|
||||
setToasts(prev => [...prev, { id, message, type }]);
|
||||
setTimeout(() => setToasts(prev => prev.filter(t => t.id !== id)), 2000);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<ToastContext.Provider value={{ toast: addToast }}>
|
||||
{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">
|
||||
{toasts.map((t) => (
|
||||
<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 => (
|
||||
<div
|
||||
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={{
|
||||
background: t.type === 'error'
|
||||
? 'linear-gradient(135deg, #dc2626, #f87171)'
|
||||
: 'linear-gradient(135deg, #2563eb, #7c3aed)',
|
||||
background: t.type === 'error' ? 'var(--danger)' : 'var(--accent)',
|
||||
color: 'white',
|
||||
}}
|
||||
>
|
||||
|
||||
@@ -4,22 +4,22 @@ import { cva, type VariantProps } from 'class-variance-authority';
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
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: {
|
||||
variant: {
|
||||
default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
|
||||
destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
|
||||
outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
|
||||
secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
|
||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
||||
link: 'text-primary underline-offset-4 hover:underline',
|
||||
default: 'bg-[var(--accent)] text-white shadow-sm hover:bg-[var(--accent-hover)]',
|
||||
destructive: 'bg-red-500 text-white shadow-sm hover:bg-red-600',
|
||||
outline: 'border border-[var(--border)] bg-white shadow-sm hover:bg-[var(--surface-hover)] text-[var(--fg)]',
|
||||
secondary: 'bg-[var(--border-light)] text-[var(--fg)] shadow-sm hover:bg-[var(--border)]',
|
||||
ghost: 'hover:bg-[var(--border-light)] text-[var(--fg-secondary)]',
|
||||
link: 'text-[var(--accent)] underline-offset-4 hover:underline',
|
||||
},
|
||||
size: {
|
||||
default: 'h-9 px-4 py-2',
|
||||
sm: 'h-8 rounded-md px-3 text-xs',
|
||||
lg: 'h-10 rounded-md px-8',
|
||||
icon: 'h-9 w-9',
|
||||
default: 'h-9 rounded-xl px-4 py-2',
|
||||
sm: 'h-8 rounded-lg px-3 text-xs',
|
||||
lg: 'h-10 rounded-xl px-6',
|
||||
icon: 'h-9 w-9 rounded-xl',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -7,7 +7,7 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
|
||||
<input
|
||||
type={type}
|
||||
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
|
||||
)}
|
||||
ref={ref}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { cn } from '@/lib/utils';
|
||||
|
||||
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 };
|
||||
@@ -2,29 +2,31 @@
|
||||
@plugin "tailwindcss-animate";
|
||||
|
||||
:root {
|
||||
--bg: #fafaf9;
|
||||
--surface: #ffffff;
|
||||
--surface-hover: #f5f5f4;
|
||||
--fg: #0c0c0c;
|
||||
--fg-secondary: #737373;
|
||||
--fg-tertiary: #a3a3a3;
|
||||
--primary: #2563eb;
|
||||
--primary-hover: #1d4ed8;
|
||||
--primary-light: #eff6ff;
|
||||
--primary-soft: rgba(37, 99, 235, 0.06);
|
||||
--secondary: #f5f5f4;
|
||||
--border: #e7e5e4;
|
||||
--border-light: #f0efed;
|
||||
--danger: #dc2626;
|
||||
--danger-hover: #b91c1c;
|
||||
--danger-light: #fef2f2;
|
||||
--success: #16a34a;
|
||||
--success-light: #f0fdf4;
|
||||
--radius: 10px;
|
||||
--bg: #F5F3EE;
|
||||
--surface: #FFFFFF;
|
||||
--surface-hover: #F9F7F3;
|
||||
--fg: #1C1917;
|
||||
--fg-secondary: #78716C;
|
||||
--fg-tertiary: #A8A29E;
|
||||
--accent: #C2410C;
|
||||
--accent-hover: #9A3412;
|
||||
--accent-soft: rgba(194, 65, 12, 0.07);
|
||||
--accent-light: #FFF7ED;
|
||||
--secondary: #F5F3EE;
|
||||
--border: #E7E5E4;
|
||||
--border-light: #F0EDE8;
|
||||
--danger: #DC2626;
|
||||
--danger-hover: #B91C1C;
|
||||
--danger-light: #FEF2F2;
|
||||
--success: #15803D;
|
||||
--success-light: #F0FDF4;
|
||||
--radius: 12px;
|
||||
--radius-lg: 16px;
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,0.06);
|
||||
--shadow-lg: 0 8px 32px rgba(0,0,0,0.08);
|
||||
--radius-xl: 24px;
|
||||
--shadow-sm: 0 1px 2px rgba(28,25,23,0.04);
|
||||
--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); }
|
||||
@@ -32,142 +34,143 @@
|
||||
body {
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
font-family: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display",
|
||||
"Segoe UI", Roboto, sans-serif;
|
||||
font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1.5;
|
||||
letter-spacing: -0.015em;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
|
||||
::selection { background: var(--primary); color: white; }
|
||||
::selection { background: var(--accent); color: white; }
|
||||
|
||||
/* ── Animations ── */
|
||||
|
||||
@keyframes rise {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fade-in {
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes scale-in {
|
||||
from { opacity: 0; transform: scale(0.95); }
|
||||
from { opacity: 0; transform: scale(0.96); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
}
|
||||
@keyframes pop {
|
||||
0% { transform: scale(1); }
|
||||
40% { transform: scale(1.3); }
|
||||
50% { transform: scale(1.25); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
@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); }
|
||||
}
|
||||
@keyframes skeleton {
|
||||
0% { opacity: 0.5; }
|
||||
50% { opacity: 1; }
|
||||
100% { opacity: 0.5; }
|
||||
@keyframes shimmer {
|
||||
0% { background-position: -200% 0; }
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
@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-scale-in { animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.animate-pop { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.animate-toast-in { animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.animate-skeleton { animation: skeleton 1.5s ease-in-out infinite; }
|
||||
.animate-fade-up { animation: fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
||||
.animate-fade-in { animation: fade-in 0.3s ease both; }
|
||||
.animate-scale-in { animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
||||
.animate-pop { animation: pop 0.3s cubic-bezier(0.16, 1, 0.3, 1); }
|
||||
.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 {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
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 {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
.card-interactive:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* ── Avatar ── */
|
||||
|
||||
.avatar {
|
||||
.avatar-colored {
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 600;
|
||||
font-weight: 700;
|
||||
color: white;
|
||||
background: var(--primary);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* ── Button Icon ── */
|
||||
|
||||
.btn-icon {
|
||||
.btn-ghost {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 9999px;
|
||||
border-radius: 50%;
|
||||
transition: background 0.15s, transform 0.1s;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
.btn-icon:active { transform: scale(0.88); }
|
||||
|
||||
/* ── Tags ── */
|
||||
.btn-ghost:active { transform: scale(0.9); }
|
||||
.btn-ghost:hover { background: var(--border-light); }
|
||||
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.125rem 0.625rem;
|
||||
padding: 0.15rem 0.55rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.6875rem;
|
||||
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 {
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
.focus-ring:focus {
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 3px var(--primary-soft);
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* ── Utility ── */
|
||||
|
||||
.text-secondary { color: var(--fg-secondary); }
|
||||
.text-tertiary { color: var(--fg-tertiary); }
|
||||
|
||||
/* ── Glass nav ── */
|
||||
|
||||
.glass {
|
||||
background: rgba(255,255,255,0.72);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
border-bottom: 1px solid rgba(231,229,228,0.5);
|
||||
.nav-glass {
|
||||
background: rgba(245, 243, 238, 0.85);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
/* ── Image shimmer ── */
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border-light);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.img-shimmer {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
.stat-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
}
|
||||
.img-shimmer::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.08), transparent);
|
||||
animation: skeleton 1.5s ease-in-out infinite;
|
||||
|
||||
.page-enter { opacity: 0; }
|
||||
.page-enter-active { opacity: 1; transition: opacity 0.2s ease; }
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.mobile-full { border-radius: 0 !important; margin-left: -1rem; margin-right: -1rem; width: calc(100% + 2rem); }
|
||||
}
|
||||
@@ -5,7 +5,7 @@ import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { getAdminUsers, getAdminCats, adminDeleteUser, adminDeleteCat, adminUpdateCaption, adminSetPoints } from '@/api/endpoints';
|
||||
import { Button } from '@/components/ui/button';
|
||||
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';
|
||||
|
||||
export default function AdminPage() {
|
||||
@@ -41,12 +41,12 @@ export default function AdminPage() {
|
||||
|
||||
if (!user?.is_admin) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-24">
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]">
|
||||
<div className="flex flex-col items-center justify-center py-24 animate-fade-up">
|
||||
<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} />
|
||||
</div>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -55,36 +55,34 @@ export default function AdminPage() {
|
||||
const cats = catsQuery.data?.cats ?? [];
|
||||
|
||||
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)}
|
||||
className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
|
||||
<ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
|
||||
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" strokeWidth={1.5} /> Назад
|
||||
</button>
|
||||
|
||||
<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} />
|
||||
</div>
|
||||
<h1 className="text-xl font-bold">Админ-панель</h1>
|
||||
<h1 className="text-xl font-800 tracking-tight">Админ-панель</h1>
|
||||
</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 === 'cats'} onClick={() => setTab('cats')}>Посты ({cats.length})</TabBtn>
|
||||
</div>
|
||||
|
||||
{tab === 'users' && (
|
||||
<div className="card border divide-y">
|
||||
<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-4 py-8 text-center text-sm text-[var(--fg-tertiary)]">Нет пользователей</div>}
|
||||
<div className="card divide-y divide-[var(--border-light)]">
|
||||
{users.length === 0 && <div className="px-5 py-10 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} />)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'cats' && (
|
||||
<div className="card border divide-y">
|
||||
<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-4 py-8 text-center text-sm text-[var(--fg-tertiary)]">Нет постов</div>}
|
||||
<div className="card divide-y divide-[var(--border-light)]">
|
||||
{cats.length === 0 && <div className="px-5 py-10 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} />)}
|
||||
</div>
|
||||
)}
|
||||
@@ -95,7 +93,9 @@ export default function AdminPage() {
|
||||
function TabBtn({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
|
||||
return (
|
||||
<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}
|
||||
</button>
|
||||
);
|
||||
@@ -112,34 +112,38 @@ function UserRow({ u, onDelete, qc }: { u: any; onDelete: () => void; qc: any })
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<Avatar className="h-10 w-10 border">
|
||||
<AvatarFallback className="text-xs avatar">{u.username.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
<div className="flex items-center gap-3 px-5 py-3.5">
|
||||
<Avatar className="h-9 w-9">
|
||||
<AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]">
|
||||
{u.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<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>
|
||||
{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))}
|
||||
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={() => { 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={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-ghost h-7 w-7 text-[var(--fg-tertiary)]"><X className="h-3.5 w-3.5" /></button>
|
||||
</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>
|
||||
{!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); }}
|
||||
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} />
|
||||
</button>
|
||||
<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} />
|
||||
</button>
|
||||
</div>
|
||||
@@ -159,31 +163,31 @@ function CatRow({ c, onDelete, qc }: { c: any; onDelete: () => void; qc: any })
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<div className="h-10 w-10 rounded-lg bg-[var(--secondary)] overflow-hidden shrink-0">
|
||||
<div className="flex items-center gap-3 px-5 py-3.5">
|
||||
<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" />
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<span className="text-sm font-semibold">@{c.username}</span>
|
||||
{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)}
|
||||
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 || ''); } }} />
|
||||
<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={() => { 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={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-ghost h-7 w-7 text-[var(--fg-tertiary)]"><X className="h-3.5 w-3.5" /></button>
|
||||
</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 className="flex items-center gap-1">
|
||||
<div className="flex items-center gap-0.5">
|
||||
<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} />
|
||||
</button>
|
||||
<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} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { useToast } from '@/components/Toast';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { ArrowLeft, Heart, Trash2 } from 'lucide-react';
|
||||
import { ArrowLeft, Heart, Trash2, Trophy, Image } from 'lucide-react';
|
||||
|
||||
export default function CatPage() {
|
||||
const { id } = useParams<{ id: string }>();
|
||||
@@ -52,13 +52,12 @@ export default function CatPage() {
|
||||
|
||||
if (isLoading) {
|
||||
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="aspect-[4/3] w-full rounded-xl" />
|
||||
<Skeleton className="aspect-[4/3] w-full rounded-2xl" />
|
||||
<div className="mt-5 space-y-3">
|
||||
<Skeleton className="h-4 w-32 rounded-lg" />
|
||||
<Skeleton className="h-3 w-48 rounded-lg" />
|
||||
<Skeleton className="h-3 w-24 rounded-lg" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -66,12 +65,12 @@ export default function CatPage() {
|
||||
|
||||
if (isError || !cat) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-24 animate-rise">
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]">
|
||||
<span className="text-xl">🔍</span>
|
||||
<div className="flex flex-col items-center justify-center py-24 animate-fade-up">
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -81,17 +80,17 @@ export default function CatPage() {
|
||||
});
|
||||
|
||||
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)}
|
||||
className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
|
||||
<ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
|
||||
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" strokeWidth={1.5} /> Назад
|
||||
</button>
|
||||
|
||||
<div className="card border overflow-hidden">
|
||||
<div className="bg-[var(--secondary)] relative">
|
||||
<div className="card overflow-hidden">
|
||||
<div className="bg-[var(--bg)] relative">
|
||||
{!imageLoaded && (
|
||||
<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>
|
||||
)}
|
||||
<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="flex items-start justify-between">
|
||||
<Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group">
|
||||
<Avatar className="h-10 w-10 border">
|
||||
<AvatarFallback className="text-sm avatar">{cat.username.charAt(0).toUpperCase()}</AvatarFallback>
|
||||
<Avatar className="h-10 w-10">
|
||||
<AvatarFallback className="text-sm avatar-colored bg-[var(--accent)]">
|
||||
{cat.username.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<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>
|
||||
</div>
|
||||
</Link>
|
||||
{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} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{cat.caption && (
|
||||
<p className="text-sm leading-[1.45]">
|
||||
<span className="font-semibold mr-1.5">@{cat.username}</span>
|
||||
<p className="text-sm leading-[1.5]">
|
||||
<span className="font-semibold mr-1">@{cat.username}</span>
|
||||
{cat.caption}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="border-t" />
|
||||
<div className="divider" />
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<button onClick={toggleLike} disabled={isOwner || !user}
|
||||
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]'}`} />
|
||||
{cat.likes_count > 0 && <span className="tabular-nums">{cat.likes_count}</span>}
|
||||
<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="stat-value">{cat.likes_count}</span>}
|
||||
</button>
|
||||
<span className="flex items-center gap-1.5 text-xs text-[var(--fg-secondary)]">
|
||||
<span>🏆</span>
|
||||
<span className="font-semibold">{cat.user_points}</span>
|
||||
<span className="flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)]">
|
||||
<Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
<span className="font-semibold text-[var(--fg-secondary)]">{cat.user_points}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={() => navigate('/feed')} className="rounded-lg text-xs h-8">
|
||||
<ArrowLeft className="h-3.5 w-3.5 mr-1" strokeWidth={1.5} /> В ленту
|
||||
<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" strokeWidth={1.5} /> В ленту
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,24 +4,24 @@ import CatCard from '@/components/CatCard';
|
||||
import FeedSidebar from '@/components/FeedSidebar';
|
||||
import CatModal from '@/components/CatModal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react';
|
||||
import { ChevronLeft, ChevronRight, RefreshCw, Cat } from 'lucide-react';
|
||||
|
||||
function FeedSkeleton() {
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-5">
|
||||
{Array.from({ length: 3 }).map((_, i) => (
|
||||
<div key={i} className="card border overflow-hidden">
|
||||
<div className="flex items-center gap-3 px-4 pt-4 pb-2">
|
||||
<div className="h-9 w-9 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div className="space-y-2">
|
||||
<div className="h-3 w-28 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div className="h-2.5 w-16 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div key={i} className="card overflow-hidden">
|
||||
<div className="flex items-center gap-3 px-5 pt-5 pb-3">
|
||||
<div className="h-9 w-9 rounded-full skeleton-shimmer" />
|
||||
<div className="space-y-2 flex-1">
|
||||
<div className="h-3 w-28 rounded-full skeleton-shimmer" />
|
||||
<div className="h-2.5 w-16 rounded-full skeleton-shimmer" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="aspect-[4/3] w-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div className="p-4 space-y-2">
|
||||
<div className="h-3 w-40 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div className="h-3 w-20 rounded-full bg-[var(--secondary)] animate-skeleton" />
|
||||
<div className="aspect-[4/3] w-full skeleton-shimmer" />
|
||||
<div className="p-5 space-y-2">
|
||||
<div className="h-3 w-40 rounded-full skeleton-shimmer" />
|
||||
<div className="h-3 w-20 rounded-full skeleton-shimmer" />
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
@@ -35,40 +35,33 @@ export default function FeedPage() {
|
||||
const { data, isLoading, isError, refetch } = useCats(page);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[660px] px-4 py-4">
|
||||
<div className="flex gap-6">
|
||||
<div className="mx-auto max-w-[540px] px-5 py-5">
|
||||
<div className="flex gap-8">
|
||||
<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 />}
|
||||
|
||||
{isError && (
|
||||
<div className="flex flex-col items-center justify-center py-24 text-center animate-rise">
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--danger-light)]">
|
||||
<span className="text-xl">😿</span>
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center animate-fade-up">
|
||||
<div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-red-50">
|
||||
<Cat className="h-7 w-7 text-red-400" strokeWidth={1.5} />
|
||||
</div>
|
||||
<p className="text-base font-semibold mb-1">Не удалось загрузить</p>
|
||||
<p className="text-sm text-[var(--fg-secondary)] mb-5">Попробуйте снова</p>
|
||||
<Button variant="outline" onClick={() => refetch()} className="rounded-lg text-xs gap-1.5">
|
||||
<RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} /> Попробовать снова
|
||||
<p className="text-sm text-[var(--fg-tertiary)] mb-5">Попробуйте снова</p>
|
||||
<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} /> Попробовать
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{data && data.cats.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-24 text-center animate-rise">
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--primary-light)]">
|
||||
<span className="text-xl">🐱</span>
|
||||
<div className="flex flex-col items-center justify-center py-20 text-center animate-fade-up">
|
||||
<div className="mb-4 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--accent-light)]">
|
||||
<Cat className="h-7 w-7 text-[var(--accent)]" strokeWidth={1.5} />
|
||||
</div>
|
||||
<p className="text-base font-semibold mb-1">Пока нет котов</p>
|
||||
<p className="text-sm text-[var(--fg-secondary)] mb-5">Будьте первым, кто загрузит фото кота</p>
|
||||
<Button onClick={() => window.location.href = '/upload'} className="rounded-lg text-xs"
|
||||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
|
||||
<p className="text-sm text-[var(--fg-tertiary)] mb-5">Будьте первым</p>
|
||||
<Button onClick={() => window.location.href = '/upload'}
|
||||
className="rounded-xl text-xs h-9 px-5 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white">
|
||||
Загрузить кота
|
||||
</Button>
|
||||
</div>
|
||||
@@ -76,32 +69,33 @@ export default function FeedPage() {
|
||||
|
||||
{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} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
{data.totalPages > 1 && (
|
||||
<nav className="flex items-center justify-center gap-3 mt-6 pb-6">
|
||||
<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">
|
||||
<ChevronLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
|
||||
<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}
|
||||
className="rounded-xl text-xs h-9 px-3 gap-1">
|
||||
<ChevronLeft className="h-4 w-4" strokeWidth={1.5} />
|
||||
</Button>
|
||||
|
||||
<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)}
|
||||
className={`h-8 w-8 rounded-lg text-xs font-medium transition-all ${
|
||||
p === page ? 'text-white shadow-sm' : 'text-[var(--fg-secondary)] hover:bg-[var(--secondary)]'
|
||||
}`}
|
||||
style={p === page ? { background: 'linear-gradient(135deg, #2563eb, #7c3aed)' } : {}}>
|
||||
className={`h-9 min-w-[36px] rounded-xl text-xs font-medium transition-all ${
|
||||
p === page ? 'bg-[var(--accent)] text-white shadow-sm' : 'text-[var(--fg-tertiary)] hover:bg-[var(--border-light)]'
|
||||
}`}>
|
||||
{p}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages}
|
||||
className="rounded-lg text-xs h-9 px-4">
|
||||
Вперёд <ChevronRight className="h-4 w-4" strokeWidth={1.5} />
|
||||
<Button variant="outline" size="sm" onClick={() => setPage(p => p + 1)} disabled={page >= data.totalPages}
|
||||
className="rounded-xl text-xs h-9 px-3 gap-1">
|
||||
<ChevronRight className="h-4 w-4" strokeWidth={1.5} />
|
||||
</Button>
|
||||
</nav>
|
||||
)}
|
||||
@@ -109,7 +103,7 @@ export default function FeedPage() {
|
||||
)}
|
||||
</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>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Link, Navigate } from 'react-router-dom';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Cat } from 'lucide-react';
|
||||
|
||||
export default function LoginPage() {
|
||||
const { user, login } = useAuth();
|
||||
@@ -23,37 +24,32 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center p-5" style={{ background: 'linear-gradient(135deg, #fafaf9 0%, #f0f0ef 100%)' }}>
|
||||
<div className="w-full max-w-sm animate-rise">
|
||||
<div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
|
||||
<div className="w-full max-w-[380px] animate-fade-up">
|
||||
<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"
|
||||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
|
||||
<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 className="mx-auto mb-5 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--accent)] shadow-sm">
|
||||
<Cat className="h-7 w-7 text-white" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gradient">Catstagram</h1>
|
||||
<p className="text-sm text-[var(--fg-secondary)] mt-1.5">Войдите, чтобы смотреть котов</p>
|
||||
<h1 className="text-2xl font-800 tracking-tight">Catstagram</h1>
|
||||
<p className="text-sm text-[var(--fg-tertiary)] mt-1">Войдите, чтобы смотреть котов</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Input value={username} onChange={(e) => setUsername(e.target.value)}
|
||||
<form onSubmit={handleSubmit} className="space-y-3">
|
||||
<Input value={username} onChange={e => setUsername(e.target.value)}
|
||||
placeholder="Имя пользователя" required autoFocus
|
||||
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
|
||||
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
|
||||
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)}
|
||||
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 && (
|
||||
<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">
|
||||
<span>⚠️</span><span>{error}</span>
|
||||
<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">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={loading}
|
||||
className="w-full h-12 rounded-xl text-sm font-semibold transition-all active:scale-[0.98]"
|
||||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
|
||||
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]">
|
||||
{loading ? (
|
||||
<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" />
|
||||
@@ -63,9 +59,9 @@ export default function LoginPage() {
|
||||
</Button>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@ import CatModal from '@/components/CatModal';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { ArrowLeft, Plus, LogOut, Shield } from 'lucide-react';
|
||||
import { ArrowLeft, Plus, LogOut, Shield, Heart, Image, Trophy } from 'lucide-react';
|
||||
|
||||
export default function ProfilePage() {
|
||||
const { id: paramId } = useParams<{ id?: string }>();
|
||||
@@ -27,16 +27,16 @@ export default function ProfilePage() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="mx-auto max-w-[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">
|
||||
<Skeleton className="h-20 w-20 rounded-full" />
|
||||
<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" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-xl" />))}
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="aspect-square rounded-xl" />)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -44,10 +44,12 @@ export default function ProfilePage() {
|
||||
|
||||
if (!profileUser && !isMe) {
|
||||
return (
|
||||
<div className="flex flex-col items-center justify-center py-24 animate-rise">
|
||||
<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="flex flex-col items-center justify-center py-24 animate-fade-up">
|
||||
<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>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@@ -57,47 +59,61 @@ export default function ProfilePage() {
|
||||
const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
|
||||
|
||||
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 && (
|
||||
<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">
|
||||
<ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
|
||||
<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" strokeWidth={1.5} /> Назад
|
||||
</button>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-6 mb-8">
|
||||
<Avatar className="h-20 w-20 shrink-0">
|
||||
<AvatarFallback className="text-2xl font-bold avatar" style={{ borderRadius: '50%' }}>
|
||||
<div className="flex items-center gap-5 mb-8">
|
||||
<Avatar className="h-[72px] w-[72px] shrink-0">
|
||||
<AvatarFallback className="text-2xl font-800 avatar-colored bg-[var(--accent)]">
|
||||
{initials}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="flex items-center gap-3 mb-3">
|
||||
<h1 className="text-xl font-bold truncate">@{profileUser?.username}</h1>
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<h1 className="text-lg font-800 truncate">@{profileUser?.username}</h1>
|
||||
<div className="flex items-center gap-1 ml-auto">
|
||||
{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} />
|
||||
</Link>
|
||||
)}
|
||||
{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} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-6">
|
||||
<div><span className="font-bold">{cats.length}</span><span className="text-xs text-[var(--fg-secondary)] ml-1">фото</span></div>
|
||||
<div><span className="font-bold">{totalLikes}</span><span className="text-xs text-[var(--fg-secondary)] ml-1">❤️</span></div>
|
||||
<div><span className="font-bold">🏆{profileUser?.points ?? 0}</span></div>
|
||||
<div className="flex items-center gap-5">
|
||||
<div className="text-center">
|
||||
<div className="stat-value text-base">{cats.length}</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>
|
||||
|
||||
{isMe && (
|
||||
<div className="mt-3">
|
||||
<Link to="/upload">
|
||||
<Button size="sm" className="rounded-lg text-xs h-8 gap-1.5"
|
||||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
|
||||
<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">
|
||||
<Plus className="h-3.5 w-3.5" strokeWidth={2} /> Новая публикация
|
||||
</Button>
|
||||
</Link>
|
||||
@@ -107,24 +123,29 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
|
||||
{cats.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center animate-rise">
|
||||
<div className="mb-4 flex h-14 w-14 items-center justify-center rounded-xl bg-[var(--secondary)]"><span className="text-xl">📸</span></div>
|
||||
<p className="text-sm font-medium mb-1">Пока нет котов</p>
|
||||
<p className="text-xs text-[var(--fg-secondary)] mb-5">{isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}</p>
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center animate-fade-up">
|
||||
<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-sm font-semibold mb-1">Пока нет котов</p>
|
||||
<p className="text-xs text-[var(--fg-tertiary)] mb-5">{isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}</p>
|
||||
{isMe && (
|
||||
<Link to="/upload"><Button size="sm" className="rounded-lg text-xs"
|
||||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>Загрузить кота</Button></Link>
|
||||
<Link to="/upload">
|
||||
<Button size="sm" className="rounded-xl text-xs bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white">Загрузить кота</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{cats.map((cat) => (
|
||||
{cats.map(cat => (
|
||||
<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 || 'Фото кота'}
|
||||
className="h-full w-full object-cover transition-all 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">
|
||||
<span className="text-white text-xs font-semibold drop-shadow">❤️ {cat.likes_count}</span>
|
||||
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy" />
|
||||
<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 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>
|
||||
</button>
|
||||
))}
|
||||
|
||||
@@ -3,6 +3,7 @@ import { Link, Navigate } from 'react-router-dom';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Cat } from 'lucide-react';
|
||||
|
||||
export default function RegisterPage() {
|
||||
const { user, register } = useAuth();
|
||||
@@ -25,40 +26,35 @@ export default function RegisterPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen items-center justify-center p-5" style={{ background: 'linear-gradient(135deg, #fafaf9 0%, #f0f0ef 100%)' }}>
|
||||
<div className="w-full max-w-sm animate-rise">
|
||||
<div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]">
|
||||
<div className="w-full max-w-[380px] animate-fade-up">
|
||||
<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"
|
||||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
|
||||
<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 className="mx-auto mb-5 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--accent)] shadow-sm">
|
||||
<Cat className="h-7 w-7 text-white" strokeWidth={1.5} />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-gradient">Catstagram</h1>
|
||||
<p className="text-sm text-[var(--fg-secondary)] mt-1.5">Присоединяйтесь к сообществу</p>
|
||||
<h1 className="text-2xl font-800 tracking-tight">Catstagram</h1>
|
||||
<p className="text-sm text-[var(--fg-tertiary)] mt-1">Присоединяйтесь к сообществу</p>
|
||||
</div>
|
||||
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<Input value={username} onChange={(e) => setUsername(e.target.value)}
|
||||
<form onSubmit={handleSubmit} className="space-y-3">
|
||||
<Input value={username} onChange={e => setUsername(e.target.value)}
|
||||
placeholder="Имя пользователя" minLength={3} required autoFocus
|
||||
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
|
||||
<Input type="password" value={password} onChange={(e) => setPassword(e.target.value)}
|
||||
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)}
|
||||
placeholder="Пароль (мин. 4 символа)" minLength={4} required
|
||||
className="h-12 text-sm rounded-xl bg-white border focus-ring" />
|
||||
<Input type="password" value={confirm} onChange={(e) => setConfirm(e.target.value)}
|
||||
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)}
|
||||
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 && (
|
||||
<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">
|
||||
<span>⚠️</span><span>{error}</span>
|
||||
<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">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={loading}
|
||||
className="w-full h-12 rounded-xl text-sm font-semibold transition-all active:scale-[0.98]"
|
||||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
|
||||
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]">
|
||||
{loading ? (
|
||||
<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" />
|
||||
@@ -68,9 +64,9 @@ export default function RegisterPage() {
|
||||
</Button>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import { ArrowLeft, Upload, X } from 'lucide-react';
|
||||
import { ArrowLeft, Upload, X, ImagePlus } from 'lucide-react';
|
||||
|
||||
export default function UploadPage() {
|
||||
const navigate = useNavigate();
|
||||
@@ -41,60 +41,65 @@ export default function UploadPage() {
|
||||
const clearFile = () => { setFile(null); if (preview) URL.revokeObjectURL(preview); setPreview(null); };
|
||||
|
||||
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)}
|
||||
className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-secondary)] hover:text-[var(--fg)] transition-colors">
|
||||
<ArrowLeft className="h-4 w-4 stroke-[1.5]" /> Назад
|
||||
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" strokeWidth={1.5} /> Назад
|
||||
</button>
|
||||
|
||||
<h1 className="text-xl font-bold mb-6 text-gradient">Новая публикация</h1>
|
||||
<h1 className="text-xl font-800 tracking-tight mb-6">Новая публикация</h1>
|
||||
|
||||
{!preview ? (
|
||||
<div {...getRootProps()}
|
||||
className={`border-2 border-dashed rounded-xl p-14 text-center cursor-pointer transition-all ${
|
||||
isDragActive ? 'border-[var(--primary)] bg-[var(--primary-soft)] scale-[1.01]' : 'border-[var(--border)] hover:bg-[var(--secondary)]'
|
||||
className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all bg-white ${
|
||||
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()} />
|
||||
<div className="mb-5 flex justify-center">
|
||||
<div className="h-14 w-14 rounded-xl bg-[var(--secondary)] flex items-center justify-center">
|
||||
<Upload className="h-6 w-6 text-[var(--fg-secondary)]" strokeWidth={1.5} />
|
||||
<div className="h-14 w-14 rounded-2xl bg-[var(--accent-light)] flex items-center justify-center">
|
||||
<ImagePlus className="h-6 w-6 text-[var(--accent)]" strokeWidth={1.5} />
|
||||
</div>
|
||||
</div>
|
||||
<p className="text-sm font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото'}</p>
|
||||
<p className="text-xs text-[var(--fg-secondary)] mb-5">или нажмите, чтобы выбрать</p>
|
||||
<Button variant="outline" size="sm" className="rounded-lg text-xs px-5">Выбрать файл</Button>
|
||||
<p className="mt-4 text-[11px] text-[var(--fg-tertiary)]">JPG, PNG, GIF, WebP · до 10 МБ</p>
|
||||
<p className="text-sm font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}</p>
|
||||
<p className="text-xs text-[var(--fg-tertiary)] mb-5">или нажмите, чтобы выбрать файл</p>
|
||||
<Button variant="outline" size="sm" className="rounded-xl text-xs px-5 h-9">Выбрать файл</Button>
|
||||
<p className="mt-4 text-[10px] text-[var(--fg-tertiary)] tracking-wide">JPG, PNG, GIF, WebP · до 10 МБ</p>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-5 animate-rise">
|
||||
<div className="relative bg-[var(--secondary)] rounded-xl overflow-hidden">
|
||||
<div className="space-y-5 animate-fade-up">
|
||||
<div className="relative bg-[var(--bg)] rounded-2xl overflow-hidden">
|
||||
<img src={preview!} alt="Preview" className="max-h-[420px] w-full object-contain" />
|
||||
<button onClick={clearFile}
|
||||
className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/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} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<Avatar className="h-9 w-9 shrink-0 border">
|
||||
<AvatarFallback className="text-xs avatar">{user?.username?.charAt(0).toUpperCase() || '?'}</AvatarFallback>
|
||||
<Avatar className="h-9 w-9 shrink-0">
|
||||
<AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]">
|
||||
{user?.username?.charAt(0).toUpperCase() || '?'}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex-1">
|
||||
<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}
|
||||
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">
|
||||
<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 className="flex items-center justify-between pt-3 border-t">
|
||||
<span className="text-xs text-[var(--fg-secondary)]">🏆 +1 балл</span>
|
||||
<div className="divider" />
|
||||
|
||||
<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}
|
||||
size="sm" className="rounded-lg text-sm px-6 h-10 disabled:opacity-60"
|
||||
style={{ background: 'linear-gradient(135deg, #2563eb, #7c3aed)' }}>
|
||||
size="sm" className="rounded-xl text-sm px-6 h-10 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white disabled:opacity-60">
|
||||
{uploadMutation.isPending ? (
|
||||
<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" />
|
||||
@@ -105,8 +110,8 @@ export default function UploadPage() {
|
||||
</div>
|
||||
|
||||
{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">
|
||||
<span>⚠️</span><span>Не удалось загрузить. Попробуйте снова.</span>
|
||||
<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">
|
||||
Не удалось загрузить. Попробуйте снова.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@@ -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"}
|
||||
Reference in New Issue
Block a user