claude/sleepy-shirley-adfe57 #2
@@ -5,6 +5,7 @@ import { ThemeProvider } from '@/hooks/useTheme';
|
||||
import { ToastProvider } from '@/components/Toast';
|
||||
import ProtectedRoute from '@/components/ProtectedRoute';
|
||||
import Navbar from '@/components/Navbar';
|
||||
import ThemeBubble from '@/components/ThemeBubble';
|
||||
import LoginPage from '@/pages/LoginPage';
|
||||
import RegisterPage from '@/pages/RegisterPage';
|
||||
import FeedPage from '@/pages/FeedPage';
|
||||
@@ -107,6 +108,7 @@ export default function App() {
|
||||
<AuthProvider>
|
||||
<ToastProvider>
|
||||
<Navbar />
|
||||
<ThemeBubble />
|
||||
<main>
|
||||
<AnimatedRoutes />
|
||||
</main>
|
||||
|
||||
@@ -17,15 +17,15 @@ export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) {
|
||||
const { user } = useAuth();
|
||||
const [liked, setLiked] = useState(() => likedIds?.has(cat.id) ?? false);
|
||||
const [likeCount, setLikeCount] = useState(cat.likes_count);
|
||||
|
||||
useEffect(() => {
|
||||
if (likedIds !== undefined) setLiked(likedIds.has(cat.id));
|
||||
}, [likedIds, cat.id]);
|
||||
const { toast } = useToast();
|
||||
const likeMutation = useLikeCat(cat.id);
|
||||
const unlikeMutation = useUnlikeCat(cat.id);
|
||||
const isOwner = user && cat.user_id === user.id;
|
||||
|
||||
useEffect(() => {
|
||||
if (likedIds !== undefined) setLiked(likedIds.has(cat.id));
|
||||
}, [likedIds, cat.id]);
|
||||
|
||||
const toggleLike = async (e: React.MouseEvent) => {
|
||||
e.stopPropagation();
|
||||
if (isOwner || !user) return;
|
||||
@@ -48,62 +48,85 @@ export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) {
|
||||
return (
|
||||
<article className="animate-fade-up">
|
||||
<div className="cat-card" onClick={() => onOpen(cat.id)}>
|
||||
<div className="flex items-center gap-3 px-5 pt-5 pb-3">
|
||||
{/* Шапка */}
|
||||
<div className="flex items-center gap-3 px-4 pt-4 pb-3">
|
||||
<Link to={`/profile/${cat.user_id}`} onClick={e => e.stopPropagation()}>
|
||||
<UserAvatar avatarUrl={cat.user_avatar_url} username={cat.username} className="h-9 w-9" fallbackClassName="text-xs avatar-colored bg-[var(--accent)]" />
|
||||
<UserAvatar
|
||||
avatarUrl={cat.user_avatar_url}
|
||||
username={cat.username}
|
||||
className="h-9 w-9 ring-1 ring-[var(--border-light)]"
|
||||
fallbackClassName="text-xs avatar-colored bg-[var(--accent)]"
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex-1 min-w-0">
|
||||
<Link to={`/profile/${cat.user_id}`} onClick={e => e.stopPropagation()} className="hover:text-[var(--accent)] transition-colors">
|
||||
<h3 className="text-sm font-semibold truncate">@{cat.username}</h3>
|
||||
<Link
|
||||
to={`/profile/${cat.user_id}`}
|
||||
onClick={e => e.stopPropagation()}
|
||||
className="hover:text-[var(--accent)] transition-colors"
|
||||
>
|
||||
<h3 className="text-sm font-bold truncate leading-tight">@{cat.username}</h3>
|
||||
</Link>
|
||||
<time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time>
|
||||
</div>
|
||||
<span className="flex items-center gap-1 text-[11px] text-[var(--fg-tertiary)] bg-[var(--border-light)] px-2.5 py-1 rounded-full">
|
||||
<Trophy className="h-3 w-3 text-amber-500" strokeWidth={1.5} />
|
||||
<span className="font-bold">{cat.user_points}</span>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Изображение */}
|
||||
<figure className="cat-card-image">
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
className="w-full max-h-[520px] object-contain select-none mx-auto cat-card-img"
|
||||
className="w-full max-h-[540px] object-contain select-none mx-auto cat-card-img"
|
||||
draggable={false}
|
||||
loading="lazy"
|
||||
/>
|
||||
</figure>
|
||||
|
||||
<div className="px-5 pb-4 pt-3">
|
||||
{/* Подпись и действия */}
|
||||
<div className="px-4 pt-3 pb-4">
|
||||
{cat.caption && (
|
||||
<p className="text-sm leading-[1.5] mb-3">
|
||||
<span className="font-semibold mr-1">@{cat.username}</span>
|
||||
{cat.caption}
|
||||
<p className="text-sm leading-relaxed mb-3">
|
||||
<span className="font-bold mr-1.5">@{cat.username}</span>
|
||||
<span className="text-[var(--fg-secondary)]">{cat.caption}</span>
|
||||
</p>
|
||||
)}
|
||||
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-3">
|
||||
<button
|
||||
onClick={toggleLike}
|
||||
disabled={isOwner || !user}
|
||||
className={`action-btn flex items-center gap-1.5 text-sm font-medium ${
|
||||
isOwner ? 'text-[var(--fg-tertiary)] cursor-not-allowed opacity-40' : liked ? 'text-red-500' : 'text-[var(--fg-secondary)]'
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Лайк */}
|
||||
<button
|
||||
onClick={toggleLike}
|
||||
disabled={!!isOwner || !user}
|
||||
className={`action-btn flex items-center gap-1.5 text-sm font-semibold ${
|
||||
isOwner
|
||||
? 'text-[var(--fg-tertiary)] cursor-not-allowed opacity-40'
|
||||
: liked
|
||||
? 'text-red-500'
|
||||
: 'text-[var(--fg-secondary)]'
|
||||
}`}
|
||||
>
|
||||
<Heart
|
||||
className={`h-[18px] w-[18px] transition-all duration-200 ${
|
||||
liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'
|
||||
}`}
|
||||
>
|
||||
<Heart className={`h-[18px] w-[18px] transition-all duration-200 ${liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'} ${!isOwner && !liked ? 'group-hover:stroke-red-400' : ''}`} />
|
||||
{likeCount > 0 && <span className="stat-value text-xs tabular-nums">{likeCount}</span>}
|
||||
</button>
|
||||
/>
|
||||
{likeCount > 0 && (
|
||||
<span className="stat-value text-xs tabular-nums">{likeCount}</span>
|
||||
)}
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); onOpen(cat.id); }}
|
||||
className="action-btn flex items-center gap-1 text-sm text-[var(--fg-tertiary)]"
|
||||
>
|
||||
<MessageCircle className="h-[18px] w-[18px]" strokeWidth={1.5} />
|
||||
{(cat.comments_count ?? 0) > 0 && <span className="stat-value text-xs tabular-nums">{cat.comments_count}</span>}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<span className="flex items-center gap-1 text-xs text-[var(--fg-tertiary)]">
|
||||
<Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
<span className="font-semibold">{cat.user_points}</span>
|
||||
</span>
|
||||
{/* Комментарии */}
|
||||
<button
|
||||
onClick={e => { e.stopPropagation(); onOpen(cat.id); }}
|
||||
className="action-btn flex items-center gap-1.5 text-sm text-[var(--fg-tertiary)]"
|
||||
>
|
||||
<MessageCircle className="h-[18px] w-[18px]" strokeWidth={1.5} />
|
||||
{(cat.comments_count ?? 0) > 0 && (
|
||||
<span className="stat-value text-xs tabular-nums">{cat.comments_count}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -85,8 +85,8 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
|
||||
if (isLoading || !cat) {
|
||||
return createPortal(
|
||||
<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-[var(--surface)] rounded-2xl shadow-lg">
|
||||
<div className="fixed inset-0 z-[60] modal-backdrop flex items-center justify-center animate-fade-in" onClick={onClose}>
|
||||
<div className="flex items-center gap-3 px-6 py-4 bg-[var(--surface)] rounded-2xl shadow-xl">
|
||||
<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>
|
||||
@@ -100,130 +100,199 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
});
|
||||
|
||||
return createPortal(
|
||||
<div className="fixed inset-0 z-[60] bg-black/30 flex items-center justify-center p-4 animate-fade-in" onClick={onClose}>
|
||||
<div
|
||||
className="fixed inset-0 z-[60] modal-backdrop flex items-center justify-center p-4 animate-fade-in"
|
||||
onClick={onClose}
|
||||
>
|
||||
{/* Двухколоночный макет на десктопе, вертикальный на мобильном */}
|
||||
<div
|
||||
className="w-full max-w-lg bg-[var(--surface)] rounded-2xl max-h-[85vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
|
||||
className="w-full max-w-[860px] bg-[var(--surface)] rounded-2xl max-h-[90vh] flex flex-col md:flex-row overflow-hidden shadow-xl animate-scale-in"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-4 shrink-0">
|
||||
<Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group" onClick={onClose}>
|
||||
<UserAvatar avatarUrl={cat.user_avatar_url} username={cat.username} className="h-9 w-9" fallbackClassName="text-xs avatar-colored bg-[var(--accent)]" />
|
||||
<div>
|
||||
<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>
|
||||
<div className="flex items-center gap-1">
|
||||
{isOwner && (
|
||||
<button onClick={handleDelete} className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]">
|
||||
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
<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(--bg)] flex items-center justify-center shrink-0 relative">
|
||||
{/* Левая колонка — фото */}
|
||||
<div className="md:w-[52%] md:max-h-[90vh] bg-[var(--bg)] flex items-center justify-center relative shrink-0">
|
||||
{!imageLoaded && (
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<div className="h-6 w-6 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
|
||||
<div className="h-7 w-7 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
|
||||
</div>
|
||||
)}
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
className={`w-full max-h-[45vh] object-contain transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||
className={`w-full h-full object-contain md:max-h-[90vh] max-h-[45vh] transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
|
||||
onLoad={() => setImageLoaded(true)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-3 min-h-0">
|
||||
{cat.caption && (
|
||||
<div className="flex items-start gap-3">
|
||||
<UserAvatar avatarUrl={cat.user_avatar_url} username={cat.username} className="h-7 w-7" fallbackClassName="text-[9px] avatar-colored bg-[var(--accent)]" />
|
||||
<p className="text-sm leading-[1.5]">
|
||||
<Link to={`/profile/${cat.user_id}`} onClick={onClose} className="font-semibold mr-1 hover:text-[var(--accent)] transition-colors">@{cat.username}</Link>
|
||||
{cat.caption}
|
||||
</p>
|
||||
{/* Правая колонка — мета + комментарии */}
|
||||
<div className="md:w-[48%] flex flex-col min-h-0 md:max-h-[90vh]">
|
||||
{/* Шапка */}
|
||||
<div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--border-light)] shrink-0">
|
||||
<Link to={`/profile/${cat.user_id}`} className="flex items-center gap-2.5 group" onClick={onClose}>
|
||||
<UserAvatar
|
||||
avatarUrl={cat.user_avatar_url}
|
||||
username={cat.username}
|
||||
className="h-9 w-9"
|
||||
fallbackClassName="text-xs avatar-colored bg-[var(--accent)]"
|
||||
/>
|
||||
<div>
|
||||
<span className="text-sm font-semibold group-hover:text-[var(--accent)] transition-colors">
|
||||
@{cat.username}
|
||||
</span>
|
||||
<p className="text-[10px] text-[var(--fg-tertiary)]">{dateStr}</p>
|
||||
</div>
|
||||
</Link>
|
||||
<div className="flex items-center gap-0.5">
|
||||
{isOwner && (
|
||||
<button
|
||||
onClick={handleDelete}
|
||||
className="btn-ghost h-9 w-9 text-[var(--fg-tertiary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"
|
||||
>
|
||||
<Trash2 className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
<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>
|
||||
)}
|
||||
|
||||
{comments.length > 0 && (
|
||||
<div className="space-y-3 pt-1">
|
||||
{comments.map(c => (
|
||||
<div key={c.id} className="flex items-start gap-2.5 group">
|
||||
<Link to={`/profile/${c.user_id}`} onClick={onClose}>
|
||||
<UserAvatar avatarUrl={undefined} username={c.username} className="h-7 w-7" fallbackClassName="text-[9px] avatar-colored bg-[var(--fg-tertiary)]" />
|
||||
</Link>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm leading-[1.5]">
|
||||
<Link to={`/profile/${c.user_id}`} onClick={onClose} className="font-semibold mr-1 hover:text-[var(--accent)] transition-colors">@{c.username}</Link>
|
||||
{c.text}
|
||||
</p>
|
||||
<p className="text-[10px] text-[var(--fg-tertiary)] mt-0.5">
|
||||
{new Date(c.created_at).toLocaleDateString('ru-RU', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' })}
|
||||
</p>
|
||||
</div>
|
||||
{(user && (c.user_id === user.id || user.is_admin)) && (
|
||||
<button
|
||||
onClick={() => handleDeleteComment(c.id)}
|
||||
className="btn-ghost h-6 w-6 text-[var(--fg-tertiary)] hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
|
||||
>
|
||||
<X className="h-3 w-3" strokeWidth={2} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div ref={commentsEndRef} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="border-t px-5 py-3 shrink-0 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<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-red-500' : 'text-[var(--fg-secondary)] hover:text-red-400'
|
||||
}`}
|
||||
>
|
||||
<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-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>
|
||||
|
||||
{user && (
|
||||
<form
|
||||
onSubmit={e => { e.preventDefault(); handleComment(); }}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={commentText}
|
||||
onChange={e => setCommentText(e.target.value)}
|
||||
placeholder="Комментарий..."
|
||||
maxLength={500}
|
||||
className="flex-1 h-9 px-3 text-sm rounded-xl border border-[var(--border)] bg-[var(--surface)] placeholder:text-[var(--fg-tertiary)] focus-ring"
|
||||
/>
|
||||
{/* Комментарии и подпись */}
|
||||
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-3.5 min-h-0">
|
||||
{cat.caption && (
|
||||
<div className="flex items-start gap-2.5">
|
||||
<UserAvatar
|
||||
avatarUrl={cat.user_avatar_url}
|
||||
username={cat.username}
|
||||
className="h-7 w-7 shrink-0 mt-0.5"
|
||||
fallbackClassName="text-[9px] avatar-colored bg-[var(--accent)]"
|
||||
/>
|
||||
<p className="text-sm leading-relaxed">
|
||||
<Link
|
||||
to={`/profile/${cat.user_id}`}
|
||||
onClick={onClose}
|
||||
className="font-semibold mr-1.5 hover:text-[var(--accent)] transition-colors"
|
||||
>
|
||||
@{cat.username}
|
||||
</Link>
|
||||
{cat.caption}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{comments.length > 0 && (
|
||||
<div className="space-y-3.5">
|
||||
{comments.map(c => (
|
||||
<div key={c.id} className="flex items-start gap-2.5 group">
|
||||
<Link to={`/profile/${c.user_id}`} onClick={onClose} className="shrink-0 mt-0.5">
|
||||
<UserAvatar
|
||||
avatarUrl={undefined}
|
||||
username={c.username}
|
||||
className="h-7 w-7"
|
||||
fallbackClassName="text-[9px] avatar-colored bg-[var(--fg-tertiary)]"
|
||||
/>
|
||||
</Link>
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm leading-relaxed">
|
||||
<Link
|
||||
to={`/profile/${c.user_id}`}
|
||||
onClick={onClose}
|
||||
className="font-semibold mr-1.5 hover:text-[var(--accent)] transition-colors"
|
||||
>
|
||||
@{c.username}
|
||||
</Link>
|
||||
{c.text}
|
||||
</p>
|
||||
<p className="text-[10px] text-[var(--fg-tertiary)] mt-0.5">
|
||||
{new Date(c.created_at).toLocaleDateString('ru-RU', {
|
||||
day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit',
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
{(user && (c.user_id === user.id || user.is_admin)) && (
|
||||
<button
|
||||
onClick={() => handleDeleteComment(c.id)}
|
||||
className="btn-ghost h-6 w-6 text-[var(--fg-tertiary)] hover:text-red-500 opacity-0 group-hover:opacity-100 transition-opacity shrink-0"
|
||||
>
|
||||
<X className="h-3 w-3" strokeWidth={2} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<div ref={commentsEndRef} />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{comments.length === 0 && !cat.caption && (
|
||||
<p className="text-xs text-[var(--fg-tertiary)] text-center py-4">Нет комментариев</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Нижняя панель */}
|
||||
<div className="border-t border-[var(--border-light)] px-5 py-3.5 shrink-0 space-y-3">
|
||||
{/* Лайк + очки */}
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!commentText.trim() || addCommentMutation.isPending}
|
||||
className="btn-ghost h-9 w-9 text-[var(--accent)] hover:bg-[var(--accent-light)] disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
onClick={toggleLike}
|
||||
disabled={!!isOwner || !user}
|
||||
className={`flex items-center gap-2 text-sm font-semibold transition-all active:scale-95 ${
|
||||
isOwner
|
||||
? 'text-[var(--fg-tertiary)] cursor-not-allowed'
|
||||
: liked
|
||||
? 'text-red-500'
|
||||
: 'text-[var(--fg-secondary)] hover:text-red-400'
|
||||
}`}
|
||||
>
|
||||
<Send className="h-4 w-4" strokeWidth={1.5} />
|
||||
<Heart
|
||||
className={`h-[22px] w-[22px] transition-all duration-200 ${
|
||||
liked ? 'fill-red-500 stroke-red-500 animate-pop' : 'stroke-[1.5]'
|
||||
}`}
|
||||
/>
|
||||
{likeCount > 0 && <span className="stat-value">{likeCount}</span>}
|
||||
{!liked && !isOwner && user && (
|
||||
<span className="text-xs font-normal text-[var(--fg-tertiary)]">Нравится</span>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<span className="flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] bg-[var(--border-light)] px-3 py-1.5 rounded-full">
|
||||
<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>
|
||||
|
||||
{/* Поле комментария */}
|
||||
{user && (
|
||||
<form
|
||||
onSubmit={e => { e.preventDefault(); handleComment(); }}
|
||||
className="flex items-center gap-2"
|
||||
>
|
||||
<UserAvatar
|
||||
avatarUrl={user.avatar_url}
|
||||
username={user.username}
|
||||
className="h-7 w-7 shrink-0"
|
||||
fallbackClassName="text-[9px] avatar-colored bg-[var(--accent)]"
|
||||
/>
|
||||
<input
|
||||
type="text"
|
||||
value={commentText}
|
||||
onChange={e => setCommentText(e.target.value)}
|
||||
placeholder="Написать комментарий..."
|
||||
maxLength={500}
|
||||
className="flex-1 h-9 px-3.5 text-sm rounded-xl border border-[var(--border)] bg-[var(--bg)] placeholder:text-[var(--fg-tertiary)] focus-ring"
|
||||
/>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!commentText.trim() || addCommentMutation.isPending}
|
||||
className="btn-ghost h-9 w-9 text-[var(--accent)] hover:bg-[var(--accent-light)] disabled:opacity-30 disabled:cursor-not-allowed"
|
||||
>
|
||||
<Send className="h-4 w-4" strokeWidth={1.5} />
|
||||
</button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,13 +2,29 @@ import { useAuth } from '@/hooks/useAuth';
|
||||
import { useCats } from '@/hooks/useCats';
|
||||
import UserAvatar from '@/components/UserAvatar';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Trophy, Crown, Medal } from 'lucide-react';
|
||||
import { Trophy, Crown, Medal, Star } from 'lucide-react';
|
||||
|
||||
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>;
|
||||
if (rank === 0) return (
|
||||
<span className="h-6 w-6 rounded-lg flex items-center justify-center bg-amber-100 text-amber-600">
|
||||
<Crown className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
</span>
|
||||
);
|
||||
if (rank === 1) return (
|
||||
<span className="h-6 w-6 rounded-lg flex items-center justify-center bg-stone-100 text-stone-500">
|
||||
<Medal className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
</span>
|
||||
);
|
||||
if (rank === 2) return (
|
||||
<span className="h-6 w-6 rounded-lg flex items-center justify-center bg-orange-50 text-orange-500">
|
||||
<Medal className="h-3.5 w-3.5" strokeWidth={2} />
|
||||
</span>
|
||||
);
|
||||
return (
|
||||
<span className="h-6 w-6 rounded-lg flex items-center justify-center text-[10px] font-bold text-[var(--fg-tertiary)] bg-[var(--border-light)]">
|
||||
{rank + 1}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function FeedSidebar() {
|
||||
@@ -27,41 +43,74 @@ export default function FeedSidebar() {
|
||||
.slice(0, 5);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-3">
|
||||
{/* Карточка профиля */}
|
||||
{user && (
|
||||
<Link to="/profile" className="card p-4 flex items-center gap-3.5 card-interactive group block">
|
||||
<UserAvatar avatarUrl={user.avatar_url} username={user.username} className="h-11 w-11" fallbackClassName="text-sm font-bold avatar-colored bg-[var(--accent)]" />
|
||||
<Link
|
||||
to="/profile"
|
||||
className="card p-4 flex items-center gap-3.5 card-interactive group block transition-all"
|
||||
>
|
||||
<UserAvatar
|
||||
avatarUrl={user.avatar_url}
|
||||
username={user.username}
|
||||
className="h-11 w-11 ring-2 ring-[var(--border-light)]"
|
||||
fallbackClassName="text-sm font-bold avatar-colored bg-[var(--accent)]"
|
||||
/>
|
||||
<div className="min-w-0 flex-1">
|
||||
<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 className="text-sm font-bold truncate group-hover:text-[var(--accent)] transition-colors">
|
||||
@{user.username}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1 mt-0.5">
|
||||
<Trophy className="h-3 w-3 text-amber-500" strokeWidth={1.5} />
|
||||
<span className="font-semibold">{user.points}</span>
|
||||
<span>баллов</span>
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-[var(--fg-tertiary)] group-hover:text-[var(--accent)] transition-colors">
|
||||
<Star className="h-4 w-4" strokeWidth={1.5} />
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Таблица лидеров */}
|
||||
<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 className="text-[10px] font-extrabold 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>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
<div className="space-y-1.5">
|
||||
{topUsers.map(([id, u], i) => (
|
||||
<Link key={id} to={`/profile/${id}`} className="flex items-center gap-2.5 group py-0.5">
|
||||
<Link
|
||||
key={id}
|
||||
to={`/profile/${id}`}
|
||||
className="flex items-center gap-2.5 group p-1.5 -mx-1.5 rounded-xl hover:bg-[var(--border-light)] transition-colors"
|
||||
>
|
||||
<RankBadge rank={i} />
|
||||
<UserAvatar avatarUrl={u.avatar_url} username={u.username} className="h-6 w-6" fallbackClassName="text-[8px] font-bold avatar-colored bg-[var(--fg-tertiary)]" />
|
||||
<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>
|
||||
<UserAvatar
|
||||
avatarUrl={u.avatar_url}
|
||||
username={u.username}
|
||||
className="h-7 w-7"
|
||||
fallbackClassName="text-[8px] font-bold avatar-colored bg-[var(--fg-tertiary)]"
|
||||
/>
|
||||
<span className="text-sm flex-1 truncate font-medium group-hover:text-[var(--accent)] transition-colors">
|
||||
{u.username}
|
||||
</span>
|
||||
<span className="text-xs font-bold text-[var(--fg-tertiary)] tabular-nums">
|
||||
{u.points}
|
||||
</span>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<p className="px-1 text-[10px] text-[var(--fg-tertiary)] tracking-wide">Котограм · сообщество котоводов</p>
|
||||
<p className="px-1 text-[10px] text-[var(--fg-tertiary)] tracking-wide text-center">
|
||||
🐾 Котограм · сообщество котоводов
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,47 +1,53 @@
|
||||
import { Link, useLocation } from 'react-router-dom';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useTheme } from '@/hooks/useTheme';
|
||||
import UserAvatar from '@/components/UserAvatar';
|
||||
import { Home, PlusCircle, Shield, Sun, Moon, Monitor } from 'lucide-react';
|
||||
import { Home, PlusSquare, Shield } from 'lucide-react';
|
||||
|
||||
export default function Navbar() {
|
||||
const { user } = useAuth();
|
||||
const { theme, setTheme } = useTheme();
|
||||
const location = useLocation();
|
||||
|
||||
const cycleTheme = () => {
|
||||
const next: Record<string, 'dark' | 'system' | 'light'> = { light: 'dark', dark: 'system', system: 'light' };
|
||||
setTheme(next[theme]);
|
||||
};
|
||||
const ThemeIcon = theme === 'dark' ? Moon : theme === 'light' ? Sun : Monitor;
|
||||
|
||||
if (!user) return null;
|
||||
|
||||
const isFeed = location.pathname === '/feed' || location.pathname === '/';
|
||||
const isUpload = location.pathname === '/upload';
|
||||
const isProfile = location.pathname.startsWith('/profile');
|
||||
|
||||
return (
|
||||
<nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]" style={{ paddingTop: 3 }}>
|
||||
<div className="nav-editorial-bar" />
|
||||
<div className="mx-auto flex h-14 max-w-[900px] items-center justify-between px-5">
|
||||
<Link to="/feed" className="wordmark flex items-center gap-1">
|
||||
Котограм<span className="wordmark-dot" />
|
||||
<nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]">
|
||||
<div className="nav-accent-bar" />
|
||||
<div className="mx-auto flex h-[58px] max-w-[900px] items-center justify-between px-5">
|
||||
|
||||
{/* Логотип */}
|
||||
<Link to="/feed" className="wordmark flex items-center gap-2 group select-none">
|
||||
<span className="text-xl">🐾</span>
|
||||
<span className="group-hover:text-[var(--accent)] transition-colors duration-200">
|
||||
Котограм<span className="wordmark-dot" />
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Навигация */}
|
||||
<div className="flex items-center gap-1">
|
||||
<NavIcon to="/feed" active={location.pathname === '/feed'} icon={Home} label="Лента" />
|
||||
<NavIcon to="/upload" active={location.pathname === '/upload'} icon={PlusCircle} label="Добавить" />
|
||||
<button
|
||||
onClick={cycleTheme}
|
||||
title={`Тема: ${theme}`}
|
||||
className="flex items-center justify-center h-9 w-9 rounded-xl transition-all text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]"
|
||||
>
|
||||
<ThemeIcon className="h-[18px] w-[18px]" strokeWidth={1.5} />
|
||||
</button>
|
||||
<NavIcon to="/feed" active={isFeed} icon={Home} label="Лента" />
|
||||
<NavIcon to="/upload" active={isUpload} icon={PlusSquare} label="Добавить" />
|
||||
|
||||
<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)]' : ''
|
||||
}`}>
|
||||
<UserAvatar avatarUrl={user.avatar_url} username={user.username} className="h-8 w-8" fallbackClassName="text-[11px] avatar-colored bg-[var(--accent)]" />
|
||||
</div>
|
||||
{/* Аватар */}
|
||||
<Link
|
||||
to="/profile"
|
||||
title="Профиль"
|
||||
className={[
|
||||
'relative ml-1 flex items-center rounded-full transition-all duration-200',
|
||||
isProfile
|
||||
? 'ring-[2.5px] ring-[var(--accent)] ring-offset-2 ring-offset-[var(--bg)]'
|
||||
: 'opacity-75 hover:opacity-100',
|
||||
].join(' ')}
|
||||
>
|
||||
<UserAvatar
|
||||
avatarUrl={user.avatar_url}
|
||||
username={user.username}
|
||||
className="h-8 w-8"
|
||||
fallbackClassName="text-[11px] avatar-colored bg-[var(--accent)]"
|
||||
/>
|
||||
{user.is_admin && (
|
||||
<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} />
|
||||
@@ -54,18 +60,27 @@ export default function Navbar() {
|
||||
);
|
||||
}
|
||||
|
||||
function NavIcon({ to, active, icon: Icon, label }: { to: string; active: boolean; icon: any; label: string }) {
|
||||
function NavIcon({
|
||||
to, active, icon: Icon, label,
|
||||
}: {
|
||||
to: string; active: boolean; icon: React.ComponentType<any>; label: string;
|
||||
}) {
|
||||
return (
|
||||
<Link
|
||||
to={to}
|
||||
title={label}
|
||||
className={`flex items-center justify-center h-9 w-9 rounded-xl transition-all ${
|
||||
className={[
|
||||
'relative flex items-center justify-center h-9 w-9 rounded-xl',
|
||||
'transition-all duration-200',
|
||||
active
|
||||
? 'bg-[var(--accent-soft)] text-[var(--accent)]'
|
||||
: 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]'
|
||||
}`}
|
||||
? 'text-[var(--accent)] bg-[var(--accent-soft)]'
|
||||
: 'text-[var(--fg-tertiary)] hover:text-[var(--fg)] hover:bg-[var(--border-light)]',
|
||||
].join(' ')}
|
||||
>
|
||||
<Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2 : 1.5} />
|
||||
<Icon className="h-5 w-5" strokeWidth={active ? 2.2 : 1.7} />
|
||||
{active && (
|
||||
<span className="absolute -bottom-[11px] left-1/2 -translate-x-1/2 h-[2.5px] w-4 rounded-full bg-[var(--accent)]" />
|
||||
)}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
31
client/src/components/ThemeBubble.tsx
Normal file
31
client/src/components/ThemeBubble.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { Sun, Moon } from 'lucide-react';
|
||||
import { useTheme } from '@/hooks/useTheme';
|
||||
|
||||
export default function ThemeBubble() {
|
||||
const { resolvedTheme, setTheme } = useTheme();
|
||||
const isDark = resolvedTheme === 'dark';
|
||||
|
||||
return (
|
||||
<button
|
||||
onClick={() => setTheme(isDark ? 'light' : 'dark')}
|
||||
title={isDark ? 'Светлая тема' : 'Тёмная тема'}
|
||||
aria-label="Переключить тему"
|
||||
className={[
|
||||
'fixed bottom-5 right-5 z-40',
|
||||
'flex items-center gap-2 h-10 px-3.5 rounded-full',
|
||||
'border border-[var(--border)]',
|
||||
'bg-[var(--surface)] shadow-[0_4px_20px_rgba(0,0,0,0.18)]',
|
||||
'text-[var(--fg-secondary)] text-xs font-semibold',
|
||||
'transition-all duration-200 ease-out',
|
||||
'hover:shadow-[0_6px_24px_rgba(0,0,0,0.25)] hover:-translate-y-0.5',
|
||||
'active:scale-95 active:translate-y-0',
|
||||
'select-none cursor-pointer backdrop-blur-sm',
|
||||
].join(' ')}
|
||||
>
|
||||
{isDark
|
||||
? <><Sun className="h-4 w-4 text-amber-400" strokeWidth={1.8} /><span className="hidden sm:inline">Светлая</span></>
|
||||
: <><Moon className="h-4 w-4 text-indigo-400" strokeWidth={1.8} /><span className="hidden sm:inline">Тёмная</span></>
|
||||
}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
@@ -4,22 +4,60 @@ 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 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',
|
||||
[
|
||||
'inline-flex items-center justify-center gap-2 whitespace-nowrap font-semibold',
|
||||
'select-none cursor-pointer',
|
||||
'transition-all duration-150 ease-out',
|
||||
'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--bg)]',
|
||||
'disabled:pointer-events-none disabled:opacity-40',
|
||||
'[&_svg]:pointer-events-none [&_svg]:shrink-0',
|
||||
'active:scale-[0.96] active:brightness-95',
|
||||
].join(' '),
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
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-[var(--surface)] 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',
|
||||
// Основная — с градиентом и тенью
|
||||
default: [
|
||||
'bg-[var(--accent)] text-white',
|
||||
'shadow-[0_1px_2px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.15)]',
|
||||
'hover:bg-[var(--accent-hover)] hover:shadow-[0_3px_10px_rgba(201,68,93,0.4)]',
|
||||
'hover:-translate-y-px',
|
||||
].join(' '),
|
||||
|
||||
// Деструктивная
|
||||
destructive: [
|
||||
'bg-red-500 text-white',
|
||||
'shadow-[0_1px_2px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.12)]',
|
||||
'hover:bg-red-600 hover:shadow-[0_3px_10px_rgba(239,68,68,0.4)]',
|
||||
'hover:-translate-y-px',
|
||||
].join(' '),
|
||||
|
||||
// Обводка — хорошо видна и в тёмной теме
|
||||
outline: [
|
||||
'border-2 border-[var(--border)] bg-transparent text-[var(--fg)]',
|
||||
'hover:border-[var(--fg-tertiary)] hover:bg-[var(--surface-hover)]',
|
||||
].join(' '),
|
||||
|
||||
// Вторичная — мягкая подложка
|
||||
secondary: [
|
||||
'bg-[var(--border-light)] text-[var(--fg-secondary)]',
|
||||
'hover:bg-[var(--border)] hover:text-[var(--fg)]',
|
||||
].join(' '),
|
||||
|
||||
// Призрак
|
||||
ghost: [
|
||||
'bg-transparent text-[var(--fg-secondary)]',
|
||||
'hover:bg-[var(--border-light)] hover:text-[var(--fg)]',
|
||||
].join(' '),
|
||||
|
||||
// Ссылка
|
||||
link: 'bg-transparent text-[var(--accent)] underline-offset-4 hover:underline p-0 h-auto',
|
||||
},
|
||||
size: {
|
||||
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',
|
||||
default: 'h-10 rounded-xl px-5 py-2 text-sm',
|
||||
sm: 'h-8 rounded-lg px-3.5 text-xs',
|
||||
lg: 'h-12 rounded-xl px-7 text-[15px]',
|
||||
icon: 'h-9 w-9 rounded-xl text-sm',
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
@@ -38,9 +76,15 @@ export interface ButtonProps
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
||||
const Comp = asChild ? Slot : 'button';
|
||||
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
|
||||
return (
|
||||
<Comp
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Button.displayName = 'Button';
|
||||
|
||||
export { Button, buttonVariants };
|
||||
export { Button, buttonVariants };
|
||||
|
||||
@@ -1,28 +1,28 @@
|
||||
import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
|
||||
|
||||
type Theme = 'light' | 'dark' | 'system';
|
||||
type StoredTheme = 'light' | 'dark';
|
||||
|
||||
interface ThemeContextValue {
|
||||
theme: Theme;
|
||||
resolvedTheme: 'light' | 'dark';
|
||||
setTheme: (t: Theme) => void;
|
||||
setTheme: (t: StoredTheme) => void;
|
||||
}
|
||||
|
||||
const ThemeContext = createContext<ThemeContextValue>({
|
||||
theme: 'system',
|
||||
resolvedTheme: 'light',
|
||||
resolvedTheme: 'dark',
|
||||
setTheme: () => {},
|
||||
});
|
||||
|
||||
export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
const [theme, setThemeState] = useState<Theme>(() => {
|
||||
return (localStorage.getItem('theme') as Theme) ?? 'system';
|
||||
});
|
||||
|
||||
const [systemDark, setSystemDark] = useState(() =>
|
||||
window.matchMedia('(prefers-color-scheme: dark)').matches
|
||||
);
|
||||
|
||||
// null = пользователь ещё не выбирал → автоматически по системе
|
||||
const [explicit, setExplicit] = useState<StoredTheme | null>(() => {
|
||||
const saved = localStorage.getItem('theme');
|
||||
return saved === 'light' || saved === 'dark' ? saved : null;
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const mq = window.matchMedia('(prefers-color-scheme: dark)');
|
||||
const handler = (e: MediaQueryListEvent) => setSystemDark(e.matches);
|
||||
@@ -30,21 +30,19 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
|
||||
return () => mq.removeEventListener('change', handler);
|
||||
}, []);
|
||||
|
||||
const resolvedTheme: 'light' | 'dark' =
|
||||
theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
|
||||
const resolvedTheme: 'light' | 'dark' = explicit ?? (systemDark ? 'dark' : 'light');
|
||||
|
||||
useEffect(() => {
|
||||
const root = document.documentElement;
|
||||
root.setAttribute('data-theme', resolvedTheme);
|
||||
document.documentElement.setAttribute('data-theme', resolvedTheme);
|
||||
}, [resolvedTheme]);
|
||||
|
||||
const setTheme = (t: Theme) => {
|
||||
const setTheme = (t: StoredTheme) => {
|
||||
localStorage.setItem('theme', t);
|
||||
setThemeState(t);
|
||||
setExplicit(t);
|
||||
};
|
||||
|
||||
return (
|
||||
<ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}>
|
||||
<ThemeContext.Provider value={{ resolvedTheme, setTheme }}>
|
||||
{children}
|
||||
</ThemeContext.Provider>
|
||||
);
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
@import "tailwindcss";
|
||||
@plugin "tailwindcss-animate";
|
||||
|
||||
/* ── Светлая тема — тёплый пастель à la Instagram ── */
|
||||
/* ── Светлая тема ── */
|
||||
:root,
|
||||
[data-theme="light"] {
|
||||
--bg: #FAFAFA;
|
||||
--bg: #F5F5F5;
|
||||
--surface: #FFFFFF;
|
||||
--surface-hover: #F7F7F7;
|
||||
--surface-hover: #F9F9F9;
|
||||
--fg: #1A1A1A;
|
||||
--fg-secondary: #737373;
|
||||
--fg-tertiary: #B0B0B0;
|
||||
@@ -15,7 +15,7 @@
|
||||
--accent-soft: rgba(201, 68, 93, 0.09);
|
||||
--accent-light: #FFF0F3;
|
||||
--secondary: #FAFAFA;
|
||||
--border: #DBDBDB;
|
||||
--border: #E0E0E0;
|
||||
--border-light: #EFEFEF;
|
||||
--danger: #C9445D;
|
||||
--danger-hover: #B03650;
|
||||
@@ -23,45 +23,43 @@
|
||||
--success: #2E9E6B;
|
||||
--success-light: #EEF8F3;
|
||||
--radius: 10px;
|
||||
--radius-lg: 14px;
|
||||
--radius-xl: 20px;
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
|
||||
--shadow-lg: 0 10px 32px rgba(0,0,0,0.10);
|
||||
--shadow-xl: 0 20px 56px rgba(0,0,0,0.14);
|
||||
--radius-lg: 16px;
|
||||
--radius-xl: 22px;
|
||||
--shadow-sm: 0 1px 2px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.03);
|
||||
--shadow-lg: 0 12px 36px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03);
|
||||
--shadow-xl: 0 24px 64px rgba(0,0,0,0.13), 0 0 0 1px rgba(0,0,0,0.04);
|
||||
}
|
||||
|
||||
/* ── Тёмная тема — Instagram dark ── */
|
||||
/* ── Тёмная тема ── */
|
||||
[data-theme="dark"] {
|
||||
--bg: #000000;
|
||||
--surface: #121212;
|
||||
--bg: #0A0A0A;
|
||||
--surface: #141414;
|
||||
--surface-hover: #1C1C1C;
|
||||
--fg: #F5F5F5;
|
||||
--fg-secondary: #A8A8A8;
|
||||
--fg-tertiary: #555555;
|
||||
--fg: #F0F0F0;
|
||||
--fg-secondary: #A0A0A0;
|
||||
--fg-tertiary: #4A4A4A;
|
||||
--accent: #E8687E;
|
||||
--accent-hover: #F07A8E;
|
||||
--accent-soft: rgba(232, 104, 126, 0.12);
|
||||
--accent-light: #2A1018;
|
||||
--secondary: #000000;
|
||||
--border: #262626;
|
||||
--accent-light: #2A0F16;
|
||||
--secondary: #0A0A0A;
|
||||
--border: #242424;
|
||||
--border-light: #1C1C1C;
|
||||
--danger: #E8687E;
|
||||
--danger-hover: #F07A8E;
|
||||
--danger-light: #2A1018;
|
||||
--danger-light: #2A0F16;
|
||||
--success: #48B884;
|
||||
--success-light: #0D2419;
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
|
||||
--shadow-md: 0 4px 14px rgba(0,0,0,0.50);
|
||||
--shadow-lg: 0 10px 36px rgba(0,0,0,0.60);
|
||||
--shadow-xl: 0 20px 60px rgba(0,0,0,0.75);
|
||||
--shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
--shadow-md: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
|
||||
--shadow-lg: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
|
||||
--shadow-xl: 0 24px 72px rgba(0,0,0,0.8), 0 0 0 1px rgba(255,255,255,0.06);
|
||||
}
|
||||
|
||||
* { border-color: var(--border); }
|
||||
* { border-color: var(--border); box-sizing: border-box; }
|
||||
|
||||
html {
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
}
|
||||
html { transition: background-color 0.25s ease, color 0.25s ease; }
|
||||
|
||||
body {
|
||||
background: var(--bg);
|
||||
@@ -71,13 +69,20 @@ body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
line-height: 1.6;
|
||||
letter-spacing: -0.01em;
|
||||
transition: background-color 0.3s ease, color 0.3s ease;
|
||||
transition: background-color 0.25s ease, color 0.25s ease;
|
||||
}
|
||||
|
||||
::selection { background: var(--accent); color: white; }
|
||||
|
||||
/* ── Scrollbar ── */
|
||||
::-webkit-scrollbar { width: 5px; height: 5px; }
|
||||
::-webkit-scrollbar-track { background: transparent; }
|
||||
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
|
||||
::-webkit-scrollbar-thumb:hover { background: var(--fg-tertiary); }
|
||||
|
||||
/* ── Анимации ── */
|
||||
@keyframes fade-up {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
@keyframes fade-in {
|
||||
@@ -85,16 +90,16 @@ body {
|
||||
to { opacity: 1; }
|
||||
}
|
||||
@keyframes scale-in {
|
||||
from { opacity: 0; transform: scale(0.96); }
|
||||
to { opacity: 1; transform: scale(1); }
|
||||
from { opacity: 0; transform: scale(0.95) translateY(4px); }
|
||||
to { opacity: 1; transform: scale(1) translateY(0); }
|
||||
}
|
||||
@keyframes pop {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.25); }
|
||||
40% { transform: scale(1.3); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
@keyframes toast-in {
|
||||
from { opacity: 0; transform: translateY(8px) scale(0.96); }
|
||||
from { opacity: 0; transform: translateY(10px) scale(0.94); }
|
||||
to { opacity: 1; transform: translateY(0) scale(1); }
|
||||
}
|
||||
@keyframes shimmer {
|
||||
@@ -102,56 +107,69 @@ body {
|
||||
100% { background-position: 200% 0; }
|
||||
}
|
||||
@keyframes slide-up {
|
||||
from { transform: translateY(100%); }
|
||||
to { transform: translateY(0); }
|
||||
from { transform: translateY(100%); opacity: 0; }
|
||||
to { transform: translateY(0); opacity: 1; }
|
||||
}
|
||||
@keyframes heart-burst {
|
||||
0% { transform: scale(0) rotate(-15deg); opacity: 1; }
|
||||
50% { transform: scale(1.4) rotate(5deg); opacity: 1; }
|
||||
100% { transform: scale(1) rotate(0deg); opacity: 0; }
|
||||
}
|
||||
|
||||
.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; }
|
||||
.animate-fade-up { animation: fade-up 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
||||
.animate-fade-in { animation: fade-in 0.25s ease both; }
|
||||
.animate-scale-in { animation: scale-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
||||
.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) both; }
|
||||
.animate-slide-up { animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
|
||||
|
||||
.stagger-1 { animation-delay: 30ms; }
|
||||
.stagger-2 { animation-delay: 60ms; }
|
||||
.stagger-3 { animation-delay: 90ms; }
|
||||
.stagger-1 { animation-delay: 40ms; }
|
||||
.stagger-2 { animation-delay: 80ms; }
|
||||
.stagger-3 { animation-delay: 120ms; }
|
||||
.stagger-4 { animation-delay: 160ms; }
|
||||
|
||||
/* ── Скелетон ── */
|
||||
.skeleton-shimmer {
|
||||
background: linear-gradient(90deg, var(--border-light) 25%, var(--border) 50%, var(--border-light) 75%);
|
||||
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;
|
||||
animation: shimmer 1.6s ease infinite;
|
||||
}
|
||||
|
||||
/* ── Карточки ── */
|
||||
.card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
transition: box-shadow 0.25s ease, transform 0.25s ease, background-color 0.3s ease;
|
||||
transition: box-shadow 0.2s ease, transform 0.2s ease, background-color 0.25s ease;
|
||||
}
|
||||
.card-hover:hover {
|
||||
box-shadow: var(--shadow-md);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.card-interactive:hover {
|
||||
background: var(--surface-hover);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
/* Product-ready card — без layout shift, плавное поднятие + тень */
|
||||
/* ── Пост-карточка ── */
|
||||
.cat-card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
border-radius: var(--radius-xl);
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
box-shadow 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94),
|
||||
transform 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform, box-shadow;
|
||||
}
|
||||
.cat-card:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
transform: translateY(-3px);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
.cat-card:active {
|
||||
transform: translateY(-1px);
|
||||
@@ -159,19 +177,19 @@ body {
|
||||
transition-duration: 0.1s;
|
||||
}
|
||||
|
||||
/* Изображение в карточке — зум при ховере */
|
||||
.cat-card-image {
|
||||
background: var(--bg);
|
||||
overflow: hidden;
|
||||
}
|
||||
.cat-card-img {
|
||||
transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
will-change: transform;
|
||||
}
|
||||
.cat-card:hover .cat-card-img {
|
||||
transform: scale(1.03);
|
||||
transform: scale(1.04);
|
||||
}
|
||||
|
||||
/* ── Аватар ── */
|
||||
.avatar-colored {
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
@@ -182,117 +200,184 @@ body {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
/* ── Кнопки ── */
|
||||
.btn-ghost {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 50%;
|
||||
transition: background 0.18s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
transition: background 0.15s ease, transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
}
|
||||
.btn-ghost:hover { background: var(--border-light); transform: scale(1.08); }
|
||||
.btn-ghost:active { transform: scale(0.92); transition-duration: 0.08s; }
|
||||
.btn-ghost:hover { background: var(--border-light); transform: scale(1.1); }
|
||||
.btn-ghost:active { transform: scale(0.9); transition-duration: 0.08s; }
|
||||
|
||||
/* Кнопки действий в карточке */
|
||||
.action-btn {
|
||||
padding: 5px 8px;
|
||||
border-radius: 8px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 10px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 0.18s ease,
|
||||
color 0.18s ease,
|
||||
background 0.15s ease,
|
||||
color 0.15s ease,
|
||||
transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
}
|
||||
.action-btn:hover {
|
||||
background: var(--border-light);
|
||||
color: var(--fg);
|
||||
transform: scale(1.05);
|
||||
transform: scale(1.06);
|
||||
}
|
||||
.action-btn:active {
|
||||
transform: scale(0.95);
|
||||
transform: scale(0.94);
|
||||
transition-duration: 0.08s;
|
||||
}
|
||||
|
||||
/* ── Тег ── */
|
||||
.tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.15rem 0.55rem;
|
||||
padding: 0.15rem 0.6rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.01em;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.focus-ring {
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
/* ── Focus ── */
|
||||
.focus-ring { transition: border-color 0.15s, box-shadow 0.15s; }
|
||||
.focus-ring:focus {
|
||||
border-color: var(--accent);
|
||||
box-shadow: 0 0 0 3px var(--accent-soft);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.text-secondary { color: var(--fg-secondary); }
|
||||
.text-tertiary { color: var(--fg-tertiary); }
|
||||
/* ── Утилиты ── */
|
||||
.text-secondary { color: var(--fg-secondary); }
|
||||
.text-tertiary { color: var(--fg-tertiary); }
|
||||
.divider { height: 1px; background: var(--border-light); width: 100%; }
|
||||
.stat-value { font-variant-numeric: tabular-nums; font-weight: 700; letter-spacing: -0.02em; }
|
||||
|
||||
/* ── Навбар ── */
|
||||
.nav-glass {
|
||||
background: rgba(250, 250, 250, 0.92);
|
||||
backdrop-filter: blur(20px) saturate(1.6);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(1.6);
|
||||
transition: background 0.3s ease;
|
||||
background: rgba(245, 245, 245, 0.88);
|
||||
backdrop-filter: blur(24px) saturate(1.8);
|
||||
-webkit-backdrop-filter: blur(24px) saturate(1.8);
|
||||
transition: background 0.25s ease;
|
||||
}
|
||||
[data-theme="dark"] .nav-glass {
|
||||
background: rgba(0, 0, 0, 0.90);
|
||||
background: rgba(10, 10, 10, 0.88);
|
||||
}
|
||||
|
||||
.nav-editorial-bar {
|
||||
height: 3px;
|
||||
background: var(--accent);
|
||||
.nav-accent-bar {
|
||||
height: 2px;
|
||||
background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.wordmark {
|
||||
font-size: 13px;
|
||||
font-size: 15px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.12em;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.wordmark-dot {
|
||||
display: inline-block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent);
|
||||
margin-left: 1px;
|
||||
margin-bottom: 1px;
|
||||
margin-left: 2px;
|
||||
margin-bottom: 2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1px;
|
||||
background: var(--border-light);
|
||||
/* ── Страница входа ── */
|
||||
.auth-bg-blob {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
filter: blur(80px);
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ── Профиль ── */
|
||||
.profile-stat-card {
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-sm);
|
||||
padding: 14px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
/* ── Grid профиля ── */
|
||||
.profile-grid-item {
|
||||
position: relative;
|
||||
aspect-ratio: 1;
|
||||
overflow: hidden;
|
||||
border-radius: 10px;
|
||||
background: var(--bg);
|
||||
cursor: pointer;
|
||||
}
|
||||
.profile-grid-item img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
||||
}
|
||||
.profile-grid-item:hover img { transform: scale(1.07); }
|
||||
.profile-grid-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s ease;
|
||||
}
|
||||
.profile-grid-item:hover .profile-grid-overlay { background: rgba(0,0,0,0.22); }
|
||||
|
||||
/* ── Дроп-зона ── */
|
||||
.dropzone-idle {
|
||||
border: 2px dashed var(--border);
|
||||
border-radius: var(--radius-xl);
|
||||
background: var(--surface);
|
||||
transition: border-color 0.2s, background 0.2s, transform 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dropzone-idle:hover {
|
||||
border-color: var(--fg-tertiary);
|
||||
background: var(--surface-hover);
|
||||
}
|
||||
.dropzone-active {
|
||||
border-color: var(--accent) !important;
|
||||
background: var(--accent-light) !important;
|
||||
transform: scale(1.01);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.02em;
|
||||
/* ── Модал ── */
|
||||
.modal-backdrop {
|
||||
background: rgba(0,0,0,0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
-webkit-backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.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); }
|
||||
}
|
||||
.mobile-full {
|
||||
border-radius: 0 !important;
|
||||
margin-left: -1rem;
|
||||
margin-right: -1rem;
|
||||
width: calc(100% + 2rem);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,7 +80,7 @@ export default function FeedPage() {
|
||||
</div>
|
||||
<p className="text-base font-semibold mb-1">Не удалось загрузить</p>
|
||||
<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">
|
||||
<Button variant="outline" size="sm" onClick={() => refetch()} className="gap-1.5">
|
||||
<RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} /> Попробовать
|
||||
</Button>
|
||||
</div>
|
||||
@@ -94,7 +94,7 @@ export default function FeedPage() {
|
||||
<p className="text-base font-semibold mb-1">Пока нет котов</p>
|
||||
<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">
|
||||
size="sm">
|
||||
Загрузить кота
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
@@ -3,7 +3,6 @@ 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();
|
||||
@@ -24,46 +23,73 @@ export default function LoginPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<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 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 className="relative flex min-h-screen items-center justify-center p-5 overflow-hidden bg-[var(--bg)]">
|
||||
{/* Декоративные пятна */}
|
||||
<div className="auth-bg-blob w-96 h-96 bg-[var(--accent)] -top-20 -left-20 absolute" />
|
||||
<div className="auth-bg-blob w-72 h-72 bg-pink-300 bottom-10 right-5 absolute" />
|
||||
|
||||
<div className="relative w-full max-w-[380px] animate-fade-up">
|
||||
{/* Логотип */}
|
||||
<div className="text-center mb-8">
|
||||
<div className="mx-auto mb-5 h-[72px] w-[72px] rounded-[22px] flex items-center justify-center bg-[var(--accent)] shadow-lg">
|
||||
<span className="text-4xl select-none">🐾</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-800 tracking-tight">Котограм</h1>
|
||||
<p className="text-sm text-[var(--fg-tertiary)] mt-1">Войдите, чтобы смотреть котов</p>
|
||||
<h1 className="text-2xl font-extrabold tracking-tight">Котограм</h1>
|
||||
<p className="text-sm text-[var(--fg-tertiary)] mt-1.5">Войдите, чтобы смотреть котов</p>
|
||||
</div>
|
||||
|
||||
<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-[var(--surface)] 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-[var(--surface)] 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-fade-up">
|
||||
{error}
|
||||
{/* Форма */}
|
||||
<div className="card p-6 space-y-3">
|
||||
<form onSubmit={handleSubmit} className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<Input
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
placeholder="Имя пользователя"
|
||||
required
|
||||
autoFocus
|
||||
autoComplete="username"
|
||||
className="h-12 text-sm rounded-xl bg-[var(--bg)] border-[var(--border)] focus-ring"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
placeholder="Пароль"
|
||||
required
|
||||
autoComplete="current-password"
|
||||
className="h-12 text-sm rounded-xl bg-[var(--bg)] border-[var(--border)] focus-ring"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={loading}
|
||||
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" />
|
||||
Вход...
|
||||
</span>
|
||||
) : 'Войти'}
|
||||
</Button>
|
||||
</form>
|
||||
{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-fade-up">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<p className="mt-8 text-center text-sm text-[var(--fg-tertiary)]">
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
size="lg" className="w-full"
|
||||
>
|
||||
{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" />
|
||||
Вход...
|
||||
</span>
|
||||
) : 'Войти'}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p className="mt-5 text-center text-sm text-[var(--fg-tertiary)]">
|
||||
Нет аккаунта?{' '}
|
||||
<Link to="/register" className="font-semibold text-[var(--accent)] hover:opacity-80 transition-opacity">Зарегистрироваться</Link>
|
||||
<Link to="/register" className="font-semibold text-[var(--accent)] hover:opacity-80 transition-opacity">
|
||||
Зарегистрироваться
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import CatModal from '@/components/CatModal';
|
||||
import UserAvatar from '@/components/UserAvatar';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Skeleton } from '@/components/ui/skeleton';
|
||||
import { ArrowLeft, Plus, LogOut, Shield, Heart, Image, Trophy, Camera, X } from 'lucide-react';
|
||||
import { ArrowLeft, Plus, LogOut, Shield, Heart, Image, Trophy, Camera, X, Grid3x3 } from 'lucide-react';
|
||||
import { PRESETS } from '@/lib/avatars';
|
||||
import { useToast } from '@/components/Toast';
|
||||
|
||||
@@ -31,7 +31,6 @@ export default function ProfilePage() {
|
||||
});
|
||||
|
||||
const { data, isLoading } = useUserCats(profileUserId ?? 0);
|
||||
|
||||
const profileUser = isMe ? me : userData;
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
@@ -60,16 +59,19 @@ export default function ProfilePage() {
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<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="mx-auto max-w-[600px] px-5 py-8">
|
||||
<div className="flex items-center gap-5 mb-8">
|
||||
<Skeleton className="h-24 w-24 rounded-full" />
|
||||
<div className="space-y-2.5 flex-1">
|
||||
<Skeleton className="h-6 w-32 rounded-full" />
|
||||
<Skeleton className="h-5 w-36 rounded-full" />
|
||||
<Skeleton className="h-4 w-48 rounded-full" />
|
||||
<Skeleton className="h-4 w-24 rounded-full" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="aspect-square rounded-xl" />)}
|
||||
<div className="grid grid-cols-3 gap-1">
|
||||
{Array.from({ length: 9 }).map((_, i) => (
|
||||
<Skeleton key={i} className="aspect-square rounded-none first:rounded-tl-xl" />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -82,7 +84,9 @@ export default function ProfilePage() {
|
||||
<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-xl text-xs mt-2 h-9 px-4">В ленту</Button>
|
||||
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-xl text-xs mt-3 h-9 px-4">
|
||||
В ленту
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -91,104 +95,134 @@ export default function ProfilePage() {
|
||||
const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[540px] px-5 py-6 animate-fade-up">
|
||||
<div className="mx-auto max-w-[600px] animate-fade-up">
|
||||
{!isMe && (
|
||||
<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="px-5 pt-5">
|
||||
<button
|
||||
onClick={() => navigate(-1)}
|
||||
className="mb-4 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>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-5 mb-8">
|
||||
<div className="relative group">
|
||||
<UserAvatar
|
||||
avatarUrl={profileUser?.avatar_url}
|
||||
username={profileUser?.username || '?'}
|
||||
className="h-[72px] w-[72px]"
|
||||
fallbackClassName="text-2xl font-800 avatar-colored bg-[var(--accent)]"
|
||||
/>
|
||||
{isMe && (
|
||||
<button
|
||||
onClick={() => setShowAvatarPicker(true)}
|
||||
className="absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/30 flex items-center justify-center transition-colors"
|
||||
>
|
||||
<Camera className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{/* Шапка профиля */}
|
||||
<div className="px-5 pt-6 pb-5">
|
||||
<div className="flex items-start gap-6">
|
||||
{/* Аватар */}
|
||||
<div className="relative group shrink-0">
|
||||
<UserAvatar
|
||||
avatarUrl={profileUser?.avatar_url}
|
||||
username={profileUser?.username || '?'}
|
||||
className="h-[88px] w-[88px] ring-2 ring-[var(--border-light)] ring-offset-2 ring-offset-[var(--bg)]"
|
||||
fallbackClassName="text-3xl font-extrabold avatar-colored bg-[var(--accent)]"
|
||||
/>
|
||||
{isMe && (
|
||||
<button
|
||||
onClick={() => setShowAvatarPicker(true)}
|
||||
className="absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/35 flex items-center justify-center transition-all"
|
||||
>
|
||||
<Camera className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity drop-shadow" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 min-w-0">
|
||||
<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">
|
||||
{/* Инфо */}
|
||||
<div className="flex-1 min-w-0 pt-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<h1 className="text-xl font-extrabold truncate tracking-tight">
|
||||
@{profileUser?.username}
|
||||
</h1>
|
||||
{isMe && me?.is_admin && (
|
||||
<Link to="/admin" className="btn-ghost h-8 w-8 text-[var(--accent)]" title="Админ-панель">
|
||||
<Shield className="h-4 w-4" strokeWidth={1.5} />
|
||||
<Link
|
||||
to="/admin"
|
||||
className="btn-ghost h-7 w-7 text-[var(--accent)] shrink-0"
|
||||
title="Админ-панель"
|
||||
>
|
||||
<Shield className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
</Link>
|
||||
)}
|
||||
{isMe && (
|
||||
<button onClick={logout} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--danger)]" title="Выйти">
|
||||
<LogOut className="h-4 w-4" strokeWidth={1.5} />
|
||||
<button
|
||||
onClick={logout}
|
||||
className="btn-ghost h-7 w-7 text-[var(--fg-tertiary)] hover:text-[var(--danger)] ml-auto shrink-0"
|
||||
title="Выйти"
|
||||
>
|
||||
<LogOut className="h-3.5 w-3.5" strokeWidth={1.5} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</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 className="flex items-center gap-5 mb-3">
|
||||
<Stat value={cats.length} label="публикаций" />
|
||||
<div className="w-px h-6 bg-[var(--border-light)]" />
|
||||
<Stat value={totalLikes} label="лайков" icon={<Heart className="h-3 w-3 text-[var(--accent)]" strokeWidth={1.5} />} />
|
||||
<div className="w-px h-6 bg-[var(--border-light)]" />
|
||||
<Stat value={profileUser?.points ?? 0} label="баллов" icon={<Trophy className="h-3 w-3 text-amber-500" strokeWidth={1.5} />} />
|
||||
</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">
|
||||
{isMe && (
|
||||
<Link to="/upload">
|
||||
<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
|
||||
size="sm" className="gap-1.5"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
|
||||
Новая публикация
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Разделитель с иконкой сетки */}
|
||||
<div className="flex items-center gap-3 px-5 py-2 border-t border-[var(--border-light)]">
|
||||
<Grid3x3 className="h-4 w-4 text-[var(--fg-secondary)]" strokeWidth={1.5} />
|
||||
<span className="text-[11px] font-bold uppercase tracking-widest text-[var(--fg-tertiary)]">
|
||||
Публикации
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Сетка фото */}
|
||||
{cats.length === 0 ? (
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center animate-fade-up">
|
||||
<div className="flex flex-col items-center justify-center py-16 text-center px-5 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>
|
||||
<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-xl text-xs bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white">Загрузить кота</Button>
|
||||
<Button size="sm">
|
||||
Загрузить кота
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="grid grid-cols-3 gap-1.5">
|
||||
{cats.map(cat => (
|
||||
<button key={cat.id} onClick={() => setModalCatId(cat.id)}
|
||||
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-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}
|
||||
<div className="grid grid-cols-3 gap-0.5">
|
||||
{cats.map((cat, i) => (
|
||||
<button
|
||||
key={cat.id}
|
||||
onClick={() => setModalCatId(cat.id)}
|
||||
className={`profile-grid-item ${
|
||||
i === 0 ? 'rounded-none' :
|
||||
i === cats.length - 1 && cats.length % 3 === 1 ? 'rounded-none' : 'rounded-none'
|
||||
}`}
|
||||
>
|
||||
<img
|
||||
src={cat.image_url}
|
||||
alt={cat.caption || 'Фото кота'}
|
||||
loading="lazy"
|
||||
/>
|
||||
<div className="profile-grid-overlay">
|
||||
<span className="text-white text-sm font-bold opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1.5 drop-shadow-lg">
|
||||
<Heart className="h-4 w-4 fill-white" strokeWidth={0} />
|
||||
{cat.likes_count}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
@@ -198,11 +232,18 @@ export default function ProfilePage() {
|
||||
|
||||
{modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
|
||||
|
||||
{/* Пикер аватара */}
|
||||
{showAvatarPicker && createPortal(
|
||||
<div className="fixed inset-0 z-[70] bg-black/30 flex items-center justify-center animate-fade-in" onClick={() => setShowAvatarPicker(false)}>
|
||||
<div className="bg-[var(--surface)] rounded-2xl w-full max-w-sm p-5 shadow-xl animate-scale-in mx-4" onClick={e => e.stopPropagation()}>
|
||||
<div
|
||||
className="fixed inset-0 z-[70] modal-backdrop flex items-center justify-center animate-fade-in"
|
||||
onClick={() => setShowAvatarPicker(false)}
|
||||
>
|
||||
<div
|
||||
className="bg-[var(--surface)] rounded-2xl w-full max-w-sm p-5 shadow-xl animate-scale-in mx-4"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between mb-5">
|
||||
<h2 className="text-base font-800">Выбрать аватар</h2>
|
||||
<h2 className="text-base font-bold">Выбрать аватар</h2>
|
||||
<button onClick={() => setShowAvatarPicker(false)} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)]">
|
||||
<X className="h-5 w-5" strokeWidth={1.5} />
|
||||
</button>
|
||||
@@ -213,8 +254,10 @@ export default function ProfilePage() {
|
||||
<button
|
||||
key={emoji}
|
||||
onClick={() => handlePreset(emoji)}
|
||||
className={`h-12 w-12 rounded-xl flex items-center justify-center text-2xl transition-all hover:bg-[var(--accent-light)] hover:scale-110 ${
|
||||
me?.avatar_url === `preset:${emoji}` ? 'ring-2 ring-[var(--accent)] bg-[var(--accent-light)]' : 'bg-[var(--border-light)]'
|
||||
className={`h-12 w-12 rounded-xl flex items-center justify-center text-2xl transition-all hover:scale-110 ${
|
||||
me?.avatar_url === `preset:${emoji}`
|
||||
? 'ring-2 ring-[var(--accent)] bg-[var(--accent-light)] scale-105'
|
||||
: 'bg-[var(--border-light)] hover:bg-[var(--accent-light)]'
|
||||
}`}
|
||||
>
|
||||
{emoji}
|
||||
@@ -242,4 +285,20 @@ export default function ProfilePage() {
|
||||
<input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
function Stat({
|
||||
value, label, icon,
|
||||
}: {
|
||||
value: number; label: string; icon?: React.ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex flex-col items-start">
|
||||
<span className="flex items-center gap-1 stat-value text-base">
|
||||
{icon}
|
||||
{value}
|
||||
</span>
|
||||
<span className="text-[10px] text-[var(--fg-tertiary)] uppercase tracking-wider leading-tight">{label}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ 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();
|
||||
@@ -26,49 +25,79 @@ export default function RegisterPage() {
|
||||
};
|
||||
|
||||
return (
|
||||
<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 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 className="relative flex min-h-screen items-center justify-center p-5 overflow-hidden bg-[var(--bg)]">
|
||||
<div className="auth-bg-blob w-96 h-96 bg-[var(--accent)] -bottom-20 -right-20 absolute" />
|
||||
<div className="auth-bg-blob w-72 h-72 bg-pink-300 top-10 left-5 absolute" />
|
||||
|
||||
<div className="relative w-full max-w-[380px] animate-fade-up">
|
||||
<div className="text-center mb-8">
|
||||
<div className="mx-auto mb-5 h-[72px] w-[72px] rounded-[22px] flex items-center justify-center bg-[var(--accent)] shadow-lg">
|
||||
<span className="text-4xl select-none">🐾</span>
|
||||
</div>
|
||||
<h1 className="text-2xl font-800 tracking-tight">Котограм</h1>
|
||||
<p className="text-sm text-[var(--fg-tertiary)] mt-1">Присоединяйтесь к сообществу</p>
|
||||
<h1 className="text-2xl font-extrabold tracking-tight">Котограм</h1>
|
||||
<p className="text-sm text-[var(--fg-tertiary)] mt-1.5">Присоединяйтесь к сообществу</p>
|
||||
</div>
|
||||
|
||||
<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-[var(--surface)] 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-[var(--surface)] 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-[var(--surface)] border-[var(--border)] focus-ring" />
|
||||
<div className="card p-6 space-y-3">
|
||||
<form onSubmit={handleSubmit} className="space-y-2">
|
||||
<Input
|
||||
value={username}
|
||||
onChange={e => setUsername(e.target.value)}
|
||||
placeholder="Имя пользователя"
|
||||
minLength={3}
|
||||
required
|
||||
autoFocus
|
||||
autoComplete="username"
|
||||
className="h-12 text-sm rounded-xl bg-[var(--bg)] border-[var(--border)] focus-ring"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
placeholder="Пароль (мин. 4 символа)"
|
||||
minLength={4}
|
||||
required
|
||||
autoComplete="new-password"
|
||||
className="h-12 text-sm rounded-xl bg-[var(--bg)] border-[var(--border)] focus-ring"
|
||||
/>
|
||||
<Input
|
||||
type="password"
|
||||
value={confirm}
|
||||
onChange={e => setConfirm(e.target.value)}
|
||||
placeholder="Подтвердите пароль"
|
||||
required
|
||||
autoComplete="new-password"
|
||||
className="h-12 text-sm rounded-xl bg-[var(--bg)] 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-fade-up">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{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-fade-up">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button type="submit" disabled={loading}
|
||||
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" />
|
||||
Создание...
|
||||
</span>
|
||||
) : 'Создать аккаунт'}
|
||||
</Button>
|
||||
</form>
|
||||
<Button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
size="lg" className="w-full mt-1"
|
||||
>
|
||||
{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" />
|
||||
Создание...
|
||||
</span>
|
||||
) : 'Создать аккаунт'}
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<p className="mt-8 text-center text-sm text-[var(--fg-tertiary)]">
|
||||
<p className="mt-5 text-center text-sm text-[var(--fg-tertiary)]">
|
||||
Уже есть аккаунт?{' '}
|
||||
<Link to="/login" className="font-semibold text-[var(--accent)] hover:opacity-80 transition-opacity">Войти</Link>
|
||||
<Link to="/login" className="font-semibold text-[var(--accent)] hover:opacity-80 transition-opacity">
|
||||
Войти
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,9 +5,11 @@ import { useUploadCat } from '@/hooks/useCats';
|
||||
import { useAuth } from '@/hooks/useAuth';
|
||||
import { useToast } from '@/components/Toast';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||||
import UserAvatar from '@/components/UserAvatar';
|
||||
import { ArrowLeft, Upload, X, ImagePlus } from 'lucide-react';
|
||||
|
||||
const ACCEPTED_FORMATS = 'JPG, PNG, GIF, WebP, HEIC, AVIF';
|
||||
|
||||
export default function UploadPage() {
|
||||
const navigate = useNavigate();
|
||||
const { user, updateUser } = useAuth();
|
||||
@@ -19,91 +21,147 @@ export default function UploadPage() {
|
||||
|
||||
const onDrop = useCallback((accepted: File[]) => {
|
||||
const f = accepted[0];
|
||||
if (f) { setFile(f); if (preview) URL.revokeObjectURL(preview); setPreview(URL.createObjectURL(f)); }
|
||||
if (f) {
|
||||
setFile(f);
|
||||
if (preview) URL.revokeObjectURL(preview);
|
||||
setPreview(URL.createObjectURL(f));
|
||||
}
|
||||
}, [preview]);
|
||||
|
||||
const { getRootProps, getInputProps, isDragActive } = useDropzone({
|
||||
onDrop, accept: { 'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp'] }, maxFiles: 1, maxSize: 10 * 1024 * 1024,
|
||||
onDrop,
|
||||
accept: {
|
||||
'image/*': ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.heic', '.heif', '.avif'],
|
||||
},
|
||||
maxFiles: 1,
|
||||
maxSize: 20 * 1024 * 1024,
|
||||
});
|
||||
|
||||
const handleUpload = async () => {
|
||||
if (!file) return;
|
||||
const fd = new FormData();
|
||||
fd.append('image', file); fd.append('caption', caption);
|
||||
fd.append('image', file);
|
||||
fd.append('caption', caption);
|
||||
try {
|
||||
const result = await uploadMutation.mutateAsync(fd);
|
||||
if (user) updateUser({ ...user, points: (user.points || 0) + 1 });
|
||||
toast('+1 🎉');
|
||||
toast('+1 балл 🎉');
|
||||
navigate(`/cat/${result.cat.id}`);
|
||||
} catch { toast('Ошибка загрузки', 'error'); }
|
||||
} catch (err: any) {
|
||||
toast(err?.response?.data?.error || 'Ошибка загрузки', 'error');
|
||||
}
|
||||
};
|
||||
|
||||
const clearFile = () => { setFile(null); if (preview) URL.revokeObjectURL(preview); setPreview(null); };
|
||||
const clearFile = () => {
|
||||
setFile(null);
|
||||
if (preview) URL.revokeObjectURL(preview);
|
||||
setPreview(null);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-[520px] px-5 py-6">
|
||||
<button onClick={() => navigate(-1)}
|
||||
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
|
||||
onClick={() => navigate(-1)}
|
||||
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-800 tracking-tight mb-6">Новая публикация</h1>
|
||||
<h1 className="text-xl font-extrabold tracking-tight mb-6">Новая публикация</h1>
|
||||
|
||||
{!preview ? (
|
||||
<div {...getRootProps()}
|
||||
className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all bg-[var(--surface)] ${
|
||||
isDragActive ? 'border-[var(--accent)] bg-[var(--accent-light)] scale-[1.01]' : 'border-[var(--border)] hover:border-[var(--fg-tertiary)] hover:bg-[var(--surface-hover)]'
|
||||
}`}>
|
||||
<div
|
||||
{...getRootProps()}
|
||||
className={`dropzone-idle text-center p-16 ${isDragActive ? 'dropzone-active' : ''}`}
|
||||
>
|
||||
<input {...getInputProps()} />
|
||||
<div className="mb-5 flex justify-center">
|
||||
<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 className="flex justify-center mb-5">
|
||||
<div className={`h-16 w-16 rounded-2xl flex items-center justify-center transition-colors ${
|
||||
isDragActive ? 'bg-[var(--accent)] text-white' : 'bg-[var(--accent-light)] text-[var(--accent)]'
|
||||
}`}>
|
||||
<ImagePlus className="h-7 w-7" strokeWidth={1.5} />
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
<p className="text-sm font-semibold mb-1.5">
|
||||
{isDragActive ? 'Отпустите фото здесь' : 'Перетащите фото сюда'}
|
||||
</p>
|
||||
<p className="text-xs text-[var(--fg-tertiary)] mb-6">
|
||||
или нажмите, чтобы выбрать файл
|
||||
</p>
|
||||
<Button variant="outline" size="sm" className="px-6">
|
||||
Выбрать файл
|
||||
</Button>
|
||||
<p className="mt-5 text-[10px] text-[var(--fg-tertiary)] tracking-wide">
|
||||
{ACCEPTED_FORMATS} · до 20 МБ
|
||||
</p>
|
||||
</div>
|
||||
) : (
|
||||
<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-xl bg-black/40 text-white hover:bg-black/60 transition-all">
|
||||
{/* Превью */}
|
||||
<div className="relative bg-[var(--bg)] rounded-2xl overflow-hidden shadow-sm">
|
||||
<img
|
||||
src={preview}
|
||||
alt="Preview"
|
||||
className="max-h-[440px] w-full object-contain"
|
||||
/>
|
||||
<button
|
||||
onClick={clearFile}
|
||||
className="absolute right-3 top-3 h-8 w-8 flex items-center justify-center rounded-xl bg-black/50 text-white hover:bg-black/70 transition-all backdrop-blur-sm"
|
||||
>
|
||||
<X className="h-4 w-4" strokeWidth={2} />
|
||||
</button>
|
||||
{file && (
|
||||
<div className="absolute bottom-3 left-3 px-2.5 py-1 rounded-lg bg-black/50 text-white text-[10px] font-medium backdrop-blur-sm">
|
||||
{file.name}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<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="card p-4 flex items-start gap-3">
|
||||
<UserAvatar
|
||||
avatarUrl={user?.avatar_url}
|
||||
username={user?.username || '?'}
|
||||
className="h-9 w-9 shrink-0"
|
||||
fallbackClassName="text-xs avatar-colored bg-[var(--accent)]"
|
||||
/>
|
||||
<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)}
|
||||
maxLength={200} rows={3}
|
||||
className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.5]" />
|
||||
<p className="text-sm font-semibold mb-1.5">@{user?.username}</p>
|
||||
<textarea
|
||||
placeholder="Добавьте подпись..."
|
||||
value={caption}
|
||||
onChange={e => setCaption(e.target.value)}
|
||||
maxLength={500}
|
||||
rows={3}
|
||||
className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-relaxed"
|
||||
/>
|
||||
<div className="flex justify-end mt-1">
|
||||
<span className="text-[10px] text-[var(--fg-tertiary)] stat-value">{caption.length}/200</span>
|
||||
<span className={`text-[10px] stat-value ${caption.length > 450 ? 'text-[var(--danger)]' : 'text-[var(--fg-tertiary)]'}`}>
|
||||
{caption.length}/500
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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 балл
|
||||
{/* Публикация */}
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1.5 bg-[var(--accent-light)] text-[var(--accent)] px-3 py-1.5 rounded-full font-semibold">
|
||||
<Upload className="h-3 w-3" strokeWidth={1.5} />
|
||||
+1 балл
|
||||
</span>
|
||||
<Button onClick={handleUpload} disabled={uploadMutation.isPending}
|
||||
size="sm" className="rounded-xl text-sm px-6 h-10 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white disabled:opacity-60">
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={uploadMutation.isPending}
|
||||
size="sm"
|
||||
className="px-7"
|
||||
>
|
||||
{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" />
|
||||
Публикация...
|
||||
Публикуем...
|
||||
</span>
|
||||
) : 'Опубликовать'}
|
||||
</Button>
|
||||
@@ -118,4 +176,4 @@ export default function UploadPage() {
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
519
server/package-lock.json
generated
519
server/package-lock.json
generated
@@ -14,6 +14,7 @@
|
||||
"helmet": "^8.2.0",
|
||||
"jsonwebtoken": "^9.0.2",
|
||||
"multer": "^1.4.5-lts.1",
|
||||
"sharp": "^0.33.0",
|
||||
"sql.js": "^1.14.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -28,6 +29,16 @@
|
||||
"typescript": "^5.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@emnapi/runtime": {
|
||||
"version": "1.11.1",
|
||||
"resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.11.1.tgz",
|
||||
"integrity": "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw==",
|
||||
"license": "MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.28.0",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
|
||||
@@ -470,6 +481,403 @@
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-darwin-arm64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
|
||||
"integrity": "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-darwin-arm64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-darwin-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-darwin-x64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-darwin-arm64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-arm64/-/sharp-libvips-darwin-arm64-1.0.4.tgz",
|
||||
"integrity": "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-darwin-x64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-darwin-x64/-/sharp-libvips-darwin-x64-1.0.4.tgz",
|
||||
"integrity": "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"darwin"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-arm": {
|
||||
"version": "1.0.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm/-/sharp-libvips-linux-arm-1.0.5.tgz",
|
||||
"integrity": "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-arm64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-arm64/-/sharp-libvips-linux-arm64-1.0.4.tgz",
|
||||
"integrity": "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-s390x": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-s390x/-/sharp-libvips-linux-s390x-1.0.4.tgz",
|
||||
"integrity": "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linux-x64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.4.tgz",
|
||||
"integrity": "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linuxmusl-arm64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-arm64/-/sharp-libvips-linuxmusl-arm64-1.0.4.tgz",
|
||||
"integrity": "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-libvips-linuxmusl-x64": {
|
||||
"version": "1.0.4",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.4.tgz",
|
||||
"integrity": "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-arm": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.5.tgz",
|
||||
"integrity": "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ==",
|
||||
"cpu": [
|
||||
"arm"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-arm": "1.0.5"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-arm64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.5.tgz",
|
||||
"integrity": "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-arm64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-s390x": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.5.tgz",
|
||||
"integrity": "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q==",
|
||||
"cpu": [
|
||||
"s390x"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-s390x": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linux-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"glibc"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linux-x64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linuxmusl-arm64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.5.tgz",
|
||||
"integrity": "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g==",
|
||||
"cpu": [
|
||||
"arm64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linuxmusl-arm64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-linuxmusl-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"libc": [
|
||||
"musl"
|
||||
],
|
||||
"license": "Apache-2.0",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"linux"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-libvips-linuxmusl-x64": "1.0.4"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-wasm32": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.5.tgz",
|
||||
"integrity": "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg==",
|
||||
"cpu": [
|
||||
"wasm32"
|
||||
],
|
||||
"license": "Apache-2.0 AND LGPL-3.0-or-later AND MIT",
|
||||
"optional": true,
|
||||
"dependencies": {
|
||||
"@emnapi/runtime": "^1.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-win32-ia32": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.5.tgz",
|
||||
"integrity": "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ==",
|
||||
"cpu": [
|
||||
"ia32"
|
||||
],
|
||||
"license": "Apache-2.0 AND LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@img/sharp-win32-x64": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.5.tgz",
|
||||
"integrity": "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg==",
|
||||
"cpu": [
|
||||
"x64"
|
||||
],
|
||||
"license": "Apache-2.0 AND LGPL-3.0-or-later",
|
||||
"optional": true,
|
||||
"os": [
|
||||
"win32"
|
||||
],
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/bcryptjs": {
|
||||
"version": "2.4.6",
|
||||
"resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
|
||||
@@ -759,6 +1167,47 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/color": {
|
||||
"version": "4.2.3",
|
||||
"resolved": "https://registry.npmjs.org/color/-/color-4.2.3.tgz",
|
||||
"integrity": "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1",
|
||||
"color-string": "^1.9.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.5.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/color-string": {
|
||||
"version": "1.9.1",
|
||||
"resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
|
||||
"integrity": "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"color-name": "^1.0.0",
|
||||
"simple-swizzle": "^0.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/concat-stream": {
|
||||
"version": "1.6.2",
|
||||
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
|
||||
@@ -861,6 +1310,15 @@
|
||||
"npm": "1.2.8000 || >= 1.4.16"
|
||||
}
|
||||
},
|
||||
"node_modules/detect-libc": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
|
||||
"integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
|
||||
"license": "Apache-2.0",
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/dotenv": {
|
||||
"version": "16.6.1",
|
||||
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
|
||||
@@ -1263,6 +1721,12 @@
|
||||
"node": ">= 0.10"
|
||||
}
|
||||
},
|
||||
"node_modules/is-arrayish": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.4.tgz",
|
||||
"integrity": "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/isarray": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
|
||||
@@ -1700,6 +2164,45 @@
|
||||
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
|
||||
"license": "ISC"
|
||||
},
|
||||
"node_modules/sharp": {
|
||||
"version": "0.33.5",
|
||||
"resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.5.tgz",
|
||||
"integrity": "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw==",
|
||||
"hasInstallScript": true,
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"color": "^4.2.3",
|
||||
"detect-libc": "^2.0.3",
|
||||
"semver": "^7.6.3"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.17.0 || ^20.3.0 || >=21.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://opencollective.com/libvips"
|
||||
},
|
||||
"optionalDependencies": {
|
||||
"@img/sharp-darwin-arm64": "0.33.5",
|
||||
"@img/sharp-darwin-x64": "0.33.5",
|
||||
"@img/sharp-libvips-darwin-arm64": "1.0.4",
|
||||
"@img/sharp-libvips-darwin-x64": "1.0.4",
|
||||
"@img/sharp-libvips-linux-arm": "1.0.5",
|
||||
"@img/sharp-libvips-linux-arm64": "1.0.4",
|
||||
"@img/sharp-libvips-linux-s390x": "1.0.4",
|
||||
"@img/sharp-libvips-linux-x64": "1.0.4",
|
||||
"@img/sharp-libvips-linuxmusl-arm64": "1.0.4",
|
||||
"@img/sharp-libvips-linuxmusl-x64": "1.0.4",
|
||||
"@img/sharp-linux-arm": "0.33.5",
|
||||
"@img/sharp-linux-arm64": "0.33.5",
|
||||
"@img/sharp-linux-s390x": "0.33.5",
|
||||
"@img/sharp-linux-x64": "0.33.5",
|
||||
"@img/sharp-linuxmusl-arm64": "0.33.5",
|
||||
"@img/sharp-linuxmusl-x64": "0.33.5",
|
||||
"@img/sharp-wasm32": "0.33.5",
|
||||
"@img/sharp-win32-ia32": "0.33.5",
|
||||
"@img/sharp-win32-x64": "0.33.5"
|
||||
}
|
||||
},
|
||||
"node_modules/side-channel": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
|
||||
@@ -1772,6 +2275,15 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/simple-swizzle": {
|
||||
"version": "0.2.4",
|
||||
"resolved": "https://registry.npmjs.org/simple-swizzle/-/simple-swizzle-0.2.4.tgz",
|
||||
"integrity": "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"is-arrayish": "^0.3.1"
|
||||
}
|
||||
},
|
||||
"node_modules/sql.js": {
|
||||
"version": "1.14.1",
|
||||
"resolved": "https://registry.npmjs.org/sql.js/-/sql.js-1.14.1.tgz",
|
||||
@@ -1819,6 +2331,13 @@
|
||||
"node": ">=0.6"
|
||||
}
|
||||
},
|
||||
"node_modules/tslib": {
|
||||
"version": "2.8.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
|
||||
"integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
|
||||
"license": "0BSD",
|
||||
"optional": true
|
||||
},
|
||||
"node_modules/tsx": {
|
||||
"version": "4.22.3",
|
||||
"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.22.3.tgz",
|
||||
|
||||
Reference in New Issue
Block a user