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

feat: UI redesign — polished layout, modal, nav, profile

Browse Source 
- CSS: refined shadows with border ring, dark bg #0A0A0A, larger card
  radius (16/22px), modal-backdrop blur, scrollbar styling, new
  dropzone + profile-grid CSS classes
- Navbar: paw emoji logo, labels under icons, accent gradient bar,
  active-state ring on avatar
- Login / Register: auth card with decorative background blobs,
  form wrapped in card, cleaner spacing
- CatModal: two-column layout on desktop (photo left, info right),
  modal-backdrop blur, comment input with user avatar, like label
- ProfilePage: 88px avatar with camera overlay, inline stat bar with
  icons, grid section divider, Stat helper component
- CatCard: points badge in header (amber), caption text secondary
  color, ring on avatar
- FeedSidebar: color-coded rank badges, hover rows, star icon
- UploadPage: new dropzone-idle/dropzone-active CSS classes,
  filename chip on preview, UserAvatar in caption row, HEIC/AVIF in
  accepted formats hint, 500-char counter

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
heagbokat
2026-06-26 00:30:41 +03:00
parent 94fff09a41
commit 91ab44c6fb
9 changed files with 900 additions and 475 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -17,15 +17,15 @@ export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) {
const { user } = useAuth(); const { user } = useAuth();
const [liked, setLiked] = useState(() => likedIds?.has(cat.id) ?? false); const [liked, setLiked] = useState(() => likedIds?.has(cat.id) ?? false);
const [likeCount, setLikeCount] = useState(cat.likes_count); const [likeCount, setLikeCount] = useState(cat.likes_count);
useEffect(() => {
if (likedIds !== undefined) setLiked(likedIds.has(cat.id));
}, [likedIds, cat.id]);
const { toast } = useToast(); const { toast } = useToast();
const likeMutation = useLikeCat(cat.id); const likeMutation = useLikeCat(cat.id);
const unlikeMutation = useUnlikeCat(cat.id); const unlikeMutation = useUnlikeCat(cat.id);
const isOwner = user && cat.user_id === user.id; const isOwner = user && cat.user_id === user.id;
useEffect(() => {
if (likedIds !== undefined) setLiked(likedIds.has(cat.id));
}, [likedIds, cat.id]);
const toggleLike = async (e: React.MouseEvent) => { const toggleLike = async (e: React.MouseEvent) => {
e.stopPropagation(); e.stopPropagation();
if (isOwner || !user) return; if (isOwner || !user) return;
@@ -48,62 +48,85 @@ export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) {
return ( return (
<article className="animate-fade-up"> <article className="animate-fade-up">
<div className="cat-card" onClick={() => onOpen(cat.id)}> <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()}> <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> </Link>
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<Link to={`/profile/${cat.user_id}`} onClick={e => e.stopPropagation()} className="hover:text-[var(--accent)] transition-colors"> <Link
<h3 className="text-sm font-semibold truncate">@{cat.username}</h3> 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> </Link>
<time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time> <time className="text-[11px] text-[var(--fg-tertiary)]">{timeAgo}</time>
</div> </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> </div>
{/* Изображение */}
<figure className="cat-card-image"> <figure className="cat-card-image">
<img <img
src={cat.image_url} src={cat.image_url}
alt={cat.caption || 'Фото кота'} alt={cat.caption || 'Фото кота'}
className="w-full max-h-[520px] object-contain select-none mx-auto cat-card-img" className="w-full max-h-[540px] object-contain select-none mx-auto cat-card-img"
draggable={false} draggable={false}
loading="lazy" loading="lazy"
/> />
</figure> </figure>
<div className="px-5 pb-4 pt-3"> {/* Подпись и действия */}
<div className="px-4 pt-3 pb-4">
{cat.caption && ( {cat.caption && (
<p className="text-sm leading-[1.5] mb-3"> <p className="text-sm leading-relaxed mb-3">
<span className="font-semibold mr-1">@{cat.username}</span> <span className="font-bold mr-1.5">@{cat.username}</span>
{cat.caption} <span className="text-[var(--fg-secondary)]">{cat.caption}</span>
</p> </p>
)} )}
<div className="flex items-center justify-between"> <div className="flex items-center gap-2">
<div className="flex items-center gap-3"> {/* Лайк */}
<button <button
onClick={toggleLike} onClick={toggleLike}
disabled={isOwner || !user} disabled={!!isOwner || !user}
className={`action-btn flex items-center gap-1.5 text-sm font-medium ${ 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)]' 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 && (
{likeCount > 0 && <span className="stat-value text-xs tabular-nums">{likeCount}</span>} <span className="stat-value text-xs tabular-nums">{likeCount}</span>
</button> )}
</button>
<button {/* Комментарии */}
onClick={e => { e.stopPropagation(); onOpen(cat.id); }} <button
className="action-btn flex items-center gap-1 text-sm text-[var(--fg-tertiary)]" 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>} <MessageCircle className="h-[18px] w-[18px]" strokeWidth={1.5} />
</button> {(cat.comments_count ?? 0) > 0 && (
</div> <span className="stat-value text-xs tabular-nums">{cat.comments_count}</span>
)}
<span className="flex items-center gap-1 text-xs text-[var(--fg-tertiary)]"> </button>
<Trophy className="h-3.5 w-3.5" strokeWidth={1.5} />
<span className="font-semibold">{cat.user_points}</span>
</span>
</div> </div>
</div> </div>
</div> </div>

275
client/src/components/CatModal.tsx
View File

@@ -85,8 +85,8 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
if (isLoading || !cat) { if (isLoading || !cat) {
return createPortal( return createPortal(
<div className="fixed inset-0 z-[60] bg-black/30 flex items-center justify-center animate-fade-in" onClick={onClose}> <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-5 py-3 bg-[var(--surface)] rounded-2xl shadow-lg"> <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" /> <div className="h-4 w-4 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
<span className="text-sm font-medium text-[var(--fg-secondary)]">Загрузка...</span> <span className="text-sm font-medium text-[var(--fg-secondary)]">Загрузка...</span>
</div> </div>
@@ -100,127 +100,196 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
}); });
return createPortal( 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 <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()} 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}> <div className="md:w-[52%] md:max-h-[90vh] bg-[var(--bg)] flex items-center justify-center relative shrink-0">
<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">
{!imageLoaded && ( {!imageLoaded && (
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<div className="h-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> </div>
)} )}
<img <img
src={cat.image_url} src={cat.image_url}
alt={cat.caption || 'Фото кота'} 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)} onLoad={() => setImageLoaded(true)}
/> />
</div> </div>
<div className="flex-1 overflow-y-auto px-5 py-4 space-y-3 min-h-0"> {/* Правая колонка — мета + комментарии */}
{cat.caption && ( <div className="md:w-[48%] flex flex-col min-h-0 md:max-h-[90vh]">
<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)]" /> <div className="flex items-center justify-between px-5 py-3.5 border-b border-[var(--border-light)] shrink-0">
<p className="text-sm leading-[1.5]"> <Link to={`/profile/${cat.user_id}`} className="flex items-center gap-2.5 group" onClick={onClose}>
<Link to={`/profile/${cat.user_id}`} onClick={onClose} className="font-semibold mr-1 hover:text-[var(--accent)] transition-colors">@{cat.username}</Link> <UserAvatar
{cat.caption} avatarUrl={cat.user_avatar_url}
</p> 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> </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> </div>
{user && ( {/* Комментарии и подпись */}
<form <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3.5 min-h-0">
onSubmit={e => { e.preventDefault(); handleComment(); }} {cat.caption && (
className="flex items-center gap-2" <div className="flex items-start gap-2.5">
> <UserAvatar
<input avatarUrl={cat.user_avatar_url}
type="text" username={cat.username}
value={commentText} className="h-7 w-7 shrink-0 mt-0.5"
onChange={e => setCommentText(e.target.value)} fallbackClassName="text-[9px] avatar-colored bg-[var(--accent)]"
placeholder="Комментарий..." />
maxLength={500} <p className="text-sm leading-relaxed">
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" <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 <button
type="submit" onClick={toggleLike}
disabled={!commentText.trim() || addCommentMutation.isPending} disabled={!!isOwner || !user}
className="btn-ghost h-9 w-9 text-[var(--accent)] hover:bg-[var(--accent-light)] disabled:opacity-30 disabled:cursor-not-allowed" 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> </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> </div>
</div>, </div>,

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

@@ -2,13 +2,29 @@ import { useAuth } from '@/hooks/useAuth';
import { useCats } from '@/hooks/useCats'; import { useCats } from '@/hooks/useCats';
import UserAvatar from '@/components/UserAvatar'; import UserAvatar from '@/components/UserAvatar';
import { Link } from 'react-router-dom'; 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 }) { function RankBadge({ rank }: { rank: number }) {
if (rank === 0) return <Crown className="h-4 w-4 text-amber-500" strokeWidth={1.5} />; if (rank === 0) return (
if (rank === 1) return <Medal className="h-4 w-4 text-stone-400" strokeWidth={1.5} />; <span className="h-6 w-6 rounded-lg flex items-center justify-center bg-amber-100 text-amber-600">
if (rank === 2) return <Medal className="h-4 w-4 text-amber-700" strokeWidth={1.5} />; <Crown className="h-3.5 w-3.5" strokeWidth={2} />
return <span className="w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold text-[var(--fg-tertiary)] bg-[var(--border-light)]">{rank + 1}</span>; </span>
);
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() { export default function FeedSidebar() {
@@ -27,41 +43,74 @@ export default function FeedSidebar() {
.slice(0, 5); .slice(0, 5);
return ( return (
<div className="space-y-4"> <div className="space-y-3">
{/* Карточка профиля */}
{user && ( {user && (
<Link to="/profile" className="card p-4 flex items-center gap-3.5 card-interactive group block"> <Link
<UserAvatar avatarUrl={user.avatar_url} username={user.username} className="h-11 w-11" fallbackClassName="text-sm font-bold avatar-colored bg-[var(--accent)]" /> 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"> <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-sm font-bold truncate group-hover:text-[var(--accent)] transition-colors">
<p className="text-xs text-[var(--fg-tertiary)] flex items-center gap-1"> @{user.username}
<Trophy className="h-3 w-3" strokeWidth={1.5} /> {user.points} баллов
</p> </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> </div>
</Link> </Link>
)} )}
{/* Таблица лидеров */}
<div className="card p-4"> <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"> <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} /> Лидеры <Trophy className="h-3 w-3" strokeWidth={2} />
Лидеры недели
</h3> </h3>
{topUsers.length === 0 ? ( {topUsers.length === 0 ? (
<p className="text-xs text-[var(--fg-tertiary)] text-center py-4">Пока никого нет</p> <p className="text-xs text-[var(--fg-tertiary)] text-center py-4">Пока никого нет</p>
) : ( ) : (
<div className="space-y-2"> <div className="space-y-1.5">
{topUsers.map(([id, u], i) => ( {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} /> <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)]" /> <UserAvatar
<span className="text-sm flex-1 truncate font-medium group-hover:text-[var(--accent)] transition-colors">{u.username}</span> avatarUrl={u.avatar_url}
<span className="stat-value text-xs text-[var(--fg-secondary)]">{u.points}</span> 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> </Link>
))} ))}
</div> </div>
)} )}
</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> </div>
); );
} }

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

@@ -2,7 +2,7 @@ import { Link, useLocation } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { useTheme } from '@/hooks/useTheme'; import { useTheme } from '@/hooks/useTheme';
import UserAvatar from '@/components/UserAvatar'; import UserAvatar from '@/components/UserAvatar';
import { Home, PlusCircle, Shield, Sun, Moon, Monitor } from 'lucide-react'; import { Home, PlusSquare, Shield, Sun, Moon, Monitor } from 'lucide-react';
export default function Navbar() { export default function Navbar() {
const { user } = useAuth(); const { user } = useAuth();
@@ -14,33 +14,55 @@ export default function Navbar() {
setTheme(next[theme]); setTheme(next[theme]);
}; };
const ThemeIcon = theme === 'dark' ? Moon : theme === 'light' ? Sun : Monitor; const ThemeIcon = theme === 'dark' ? Moon : theme === 'light' ? Sun : Monitor;
const themeLabel = theme === 'dark' ? 'Тёмная' : theme === 'light' ? 'Светлая' : 'Авто';
if (!user) return null; if (!user) return null;
const isProfile = location.pathname.startsWith('/profile');
const isFeed = location.pathname === '/feed' || location.pathname === '/';
const isUpload = location.pathname === '/upload';
return ( return (
<nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]" style={{ paddingTop: 3 }}> <nav className="sticky top-0 z-50 nav-glass border-b border-[var(--border-light)]">
<div className="nav-editorial-bar" /> <div className="nav-accent-bar" />
<div className="mx-auto flex h-14 max-w-[900px] items-center justify-between px-5"> <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-1">
Котограм<span className="wordmark-dot" /> {/* Логотип */}
<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> </Link>
<div className="flex items-center gap-1"> {/* Навигация */}
<NavIcon to="/feed" active={location.pathname === '/feed'} icon={Home} label="Лента" /> <div className="flex items-center gap-0.5">
<NavIcon to="/upload" active={location.pathname === '/upload'} icon={PlusCircle} label="Добавить" /> <NavLink to="/feed" active={isFeed} icon={Home} label="Лента" />
<NavLink to="/upload" active={isUpload} icon={PlusSquare} label="Добавить" />
{/* Переключатель темы */}
<button <button
onClick={cycleTheme} onClick={cycleTheme}
title={`Тема: ${theme}`} title={`Тема: ${themeLabel}`}
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)]" className="flex flex-col items-center justify-center gap-0.5 h-11 w-11 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} /> <ThemeIcon className="h-[18px] w-[18px]" strokeWidth={1.5} />
<span className="text-[9px] font-semibold uppercase tracking-wide hidden sm:block opacity-60">{themeLabel}</span>
</button> </button>
<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 ${ <Link to="/profile" className="ml-1 relative flex items-center">
location.pathname.startsWith('/profile') ? 'ring-2 ring-[var(--accent)] ring-offset-2 ring-offset-[var(--bg)]' : '' <div className={`flex items-center justify-center h-9 w-9 rounded-full transition-all duration-200 ${
isProfile
? 'ring-[2.5px] ring-[var(--accent)] ring-offset-2 ring-offset-[var(--bg)]'
: 'opacity-80 hover:opacity-100'
}`}> }`}>
<UserAvatar avatarUrl={user.avatar_url} username={user.username} className="h-8 w-8" fallbackClassName="text-[11px] avatar-colored bg-[var(--accent)]" /> <UserAvatar
avatarUrl={user.avatar_url}
username={user.username}
className="h-9 w-9"
fallbackClassName="text-[11px] avatar-colored bg-[var(--accent)]"
/>
</div> </div>
{user.is_admin && ( {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)]"> <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)]">
@@ -54,18 +76,22 @@ export default function Navbar() {
); );
} }
function NavIcon({ to, active, icon: Icon, label }: { to: string; active: boolean; icon: any; label: string }) { function NavLink({
to, active, icon: Icon, label,
}: {
to: string; active: boolean; icon: any; label: string;
}) {
return ( return (
<Link <Link
to={to} to={to}
title={label} className={`flex flex-col items-center justify-center gap-0.5 h-11 w-11 rounded-xl transition-all duration-200 ${
className={`flex items-center justify-center h-9 w-9 rounded-xl transition-all ${
active active
? 'bg-[var(--accent-soft)] text-[var(--accent)]' ? 'bg-[var(--accent-soft)] text-[var(--accent)]'
: 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]' : 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]'
}`} }`}
> >
<Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2 : 1.5} /> <Icon className="h-[18px] w-[18px]" strokeWidth={active ? 2.2 : 1.5} />
<span className="text-[9px] font-semibold uppercase tracking-wide hidden sm:block opacity-70">{label}</span>
</Link> </Link>
); );
} }

279
client/src/index.css
View File

@@ -1,12 +1,12 @@
@import "tailwindcss"; @import "tailwindcss";
@plugin "tailwindcss-animate"; @plugin "tailwindcss-animate";
/* ── Светлая тема — тёплый пастель à la Instagram ── */ /* ── Светлая тема ── */
:root, :root,
[data-theme="light"] { [data-theme="light"] {
--bg: #FAFAFA; --bg: #F5F5F5;
--surface: #FFFFFF; --surface: #FFFFFF;
--surface-hover: #F7F7F7; --surface-hover: #F9F9F9;
--fg: #1A1A1A; --fg: #1A1A1A;
--fg-secondary: #737373; --fg-secondary: #737373;
--fg-tertiary: #B0B0B0; --fg-tertiary: #B0B0B0;
@@ -15,7 +15,7 @@
--accent-soft: rgba(201, 68, 93, 0.09); --accent-soft: rgba(201, 68, 93, 0.09);
--accent-light: #FFF0F3; --accent-light: #FFF0F3;
--secondary: #FAFAFA; --secondary: #FAFAFA;
--border: #DBDBDB; --border: #E0E0E0;
--border-light: #EFEFEF; --border-light: #EFEFEF;
--danger: #C9445D; --danger: #C9445D;
--danger-hover: #B03650; --danger-hover: #B03650;
@@ -23,45 +23,43 @@
--success: #2E9E6B; --success: #2E9E6B;
--success-light: #EEF8F3; --success-light: #EEF8F3;
--radius: 10px; --radius: 10px;
--radius-lg: 14px; --radius-lg: 16px;
--radius-xl: 20px; --radius-xl: 22px;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.06); --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 12px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.07), 0 0 0 1px rgba(0,0,0,0.03);
--shadow-lg: 0 10px 32px rgba(0,0,0,0.10); --shadow-lg: 0 12px 36px rgba(0,0,0,0.10), 0 0 0 1px rgba(0,0,0,0.03);
--shadow-xl: 0 20px 56px rgba(0,0,0,0.14); --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"] { [data-theme="dark"] {
--bg: #000000; --bg: #0A0A0A;
--surface: #121212; --surface: #141414;
--surface-hover: #1C1C1C; --surface-hover: #1C1C1C;
--fg: #F5F5F5; --fg: #F0F0F0;
--fg-secondary: #A8A8A8; --fg-secondary: #A0A0A0;
--fg-tertiary: #555555; --fg-tertiary: #4A4A4A;
--accent: #E8687E; --accent: #E8687E;
--accent-hover: #F07A8E; --accent-hover: #F07A8E;
--accent-soft: rgba(232, 104, 126, 0.12); --accent-soft: rgba(232, 104, 126, 0.12);
--accent-light: #2A1018; --accent-light: #2A0F16;
--secondary: #000000; --secondary: #0A0A0A;
--border: #262626; --border: #242424;
--border-light: #1C1C1C; --border-light: #1C1C1C;
--danger: #E8687E; --danger: #E8687E;
--danger-hover: #F07A8E; --danger-hover: #F07A8E;
--danger-light: #2A1018; --danger-light: #2A0F16;
--success: #48B884; --success: #48B884;
--success-light: #0D2419; --success-light: #0D2419;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.40); --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 14px rgba(0,0,0,0.50); --shadow-md: 0 4px 16px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
--shadow-lg: 0 10px 36px rgba(0,0,0,0.60); --shadow-lg: 0 12px 40px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.05);
--shadow-xl: 0 20px 60px rgba(0,0,0,0.75); --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 { html { transition: background-color 0.25s ease, color 0.25s ease; }
transition: background-color 0.3s ease, color 0.3s ease;
}
body { body {
background: var(--bg); background: var(--bg);
@@ -71,13 +69,20 @@ body {
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
line-height: 1.6; line-height: 1.6;
letter-spacing: -0.01em; 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; } ::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 { @keyframes fade-up {
from { opacity: 0; transform: translateY(8px); } from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(0); }
} }
@keyframes fade-in { @keyframes fade-in {
@@ -85,16 +90,16 @@ body {
to { opacity: 1; } to { opacity: 1; }
} }
@keyframes scale-in { @keyframes scale-in {
from { opacity: 0; transform: scale(0.96); } from { opacity: 0; transform: scale(0.95) translateY(4px); }
to { opacity: 1; transform: scale(1); } to { opacity: 1; transform: scale(1) translateY(0); }
} }
@keyframes pop { @keyframes pop {
0% { transform: scale(1); } 0% { transform: scale(1); }
50% { transform: scale(1.25); } 40% { transform: scale(1.3); }
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
@keyframes toast-in { @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); } to { opacity: 1; transform: translateY(0) scale(1); }
} }
@keyframes shimmer { @keyframes shimmer {
@@ -102,56 +107,69 @@ body {
100% { background-position: 200% 0; } 100% { background-position: 200% 0; }
} }
@keyframes slide-up { @keyframes slide-up {
from { transform: translateY(100%); } from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(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-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-fade-in { animation: fade-in 0.25s ease both; }
.animate-scale-in { animation: scale-in 0.25s cubic-bezier(0.16, 1, 0.3, 1) both; } .animate-scale-in { animation: scale-in 0.28s cubic-bezier(0.16, 1, 0.3, 1) both; }
.animate-pop { animation: pop 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .animate-pop { animation: pop 0.35s cubic-bezier(0.16, 1, 0.3, 1); }
.animate-toast-in { animation: toast-in 0.3s cubic-bezier(0.16, 1, 0.3, 1) both; } .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-slide-up { animation: slide-up 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; }
.stagger-1 { animation-delay: 30ms; } .stagger-1 { animation-delay: 40ms; }
.stagger-2 { animation-delay: 60ms; } .stagger-2 { animation-delay: 80ms; }
.stagger-3 { animation-delay: 90ms; } .stagger-3 { animation-delay: 120ms; }
.stagger-4 { animation-delay: 160ms; }
/* ── Скелетон ── */
.skeleton-shimmer { .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%; background-size: 200% 100%;
animation: shimmer 1.5s ease infinite; animation: shimmer 1.6s ease infinite;
} }
/* ── Карточки ── */
.card { .card {
background: var(--surface); background: var(--surface);
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
transition: box-shadow 0.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 { .card-hover:hover {
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
transform: translateY(-2px); transform: translateY(-2px);
} }
.card-interactive:hover { .card-interactive:hover {
background: var(--surface-hover);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
/* Product-ready card — без layout shift, плавное поднятие + тень */ /* ── Пост-карточка ── */
.cat-card { .cat-card {
background: var(--surface); background: var(--surface);
border-radius: var(--radius-lg); border-radius: var(--radius-xl);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
transition: transition:
box-shadow 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.3s 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; will-change: transform, box-shadow;
} }
.cat-card:hover { .cat-card:hover {
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
transform: translateY(-3px); transform: translateY(-4px);
} }
.cat-card:active { .cat-card:active {
transform: translateY(-1px); transform: translateY(-1px);
@@ -159,19 +177,19 @@ body {
transition-duration: 0.1s; transition-duration: 0.1s;
} }
/* Изображение в карточке — зум при ховере */
.cat-card-image { .cat-card-image {
background: var(--bg); background: var(--bg);
overflow: hidden; overflow: hidden;
} }
.cat-card-img { .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; will-change: transform;
} }
.cat-card:hover .cat-card-img { .cat-card:hover .cat-card-img {
transform: scale(1.03); transform: scale(1.04);
} }
/* ── Аватар ── */
.avatar-colored { .avatar-colored {
border-radius: 50%; border-radius: 50%;
display: flex; display: flex;
@@ -182,117 +200,184 @@ body {
user-select: none; user-select: none;
} }
/* ── Кнопки ── */
.btn-ghost { .btn-ghost {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
border-radius: 50%; 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; cursor: pointer;
border: none; border: none;
background: transparent; background: transparent;
} }
.btn-ghost:hover { background: var(--border-light); transform: scale(1.08); } .btn-ghost:hover { background: var(--border-light); transform: scale(1.1); }
.btn-ghost:active { transform: scale(0.92); transition-duration: 0.08s; } .btn-ghost:active { transform: scale(0.9); transition-duration: 0.08s; }
/* Кнопки действий в карточке */
.action-btn { .action-btn {
padding: 5px 8px; padding: 6px 10px;
border-radius: 8px; border-radius: 10px;
border: none; border: none;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
transition: transition:
background 0.18s ease, background 0.15s ease,
color 0.18s ease, color 0.15s ease,
transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1); transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
} }
.action-btn:hover { .action-btn:hover {
background: var(--border-light); background: var(--border-light);
color: var(--fg); color: var(--fg);
transform: scale(1.05); transform: scale(1.06);
} }
.action-btn:active { .action-btn:active {
transform: scale(0.95); transform: scale(0.94);
transition-duration: 0.08s; transition-duration: 0.08s;
} }
/* ── Тег ── */
.tag { .tag {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.25rem; gap: 0.25rem;
padding: 0.15rem 0.55rem; padding: 0.15rem 0.6rem;
border-radius: 9999px; border-radius: 9999px;
font-size: 0.6875rem; font-size: 0.6875rem;
font-weight: 600; font-weight: 600;
letter-spacing: 0.01em; letter-spacing: 0.02em;
} }
.focus-ring { /* ── Focus ── */
transition: border-color 0.15s, box-shadow 0.15s; .focus-ring { transition: border-color 0.15s, box-shadow 0.15s; }
}
.focus-ring:focus { .focus-ring:focus {
border-color: var(--accent); border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft); box-shadow: 0 0 0 3px var(--accent-soft);
outline: none; 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 { .nav-glass {
background: rgba(250, 250, 250, 0.92); background: rgba(245, 245, 245, 0.88);
backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.8);
-webkit-backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(24px) saturate(1.8);
transition: background 0.3s ease; transition: background 0.25s ease;
} }
[data-theme="dark"] .nav-glass { [data-theme="dark"] .nav-glass {
background: rgba(0, 0, 0, 0.90); background: rgba(10, 10, 10, 0.88);
} }
.nav-editorial-bar { .nav-accent-bar {
height: 3px; height: 2px;
background: var(--accent); background: linear-gradient(90deg, var(--accent) 0%, transparent 100%);
width: 100%; width: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
opacity: 0.7;
} }
.wordmark { .wordmark {
font-size: 13px; font-size: 15px;
font-weight: 800; font-weight: 800;
letter-spacing: 0.12em; letter-spacing: 0.08em;
text-transform: uppercase; text-transform: uppercase;
color: var(--fg); color: var(--fg);
line-height: 1;
} }
.wordmark-dot { .wordmark-dot {
display: inline-block; display: inline-block;
width: 5px; width: 5px;
height: 5px; height: 5px;
border-radius: 50%; border-radius: 50%;
background: var(--accent); background: var(--accent);
margin-left: 1px; margin-left: 2px;
margin-bottom: 1px; margin-bottom: 2px;
vertical-align: middle; vertical-align: middle;
} }
.divider { /* ── Страница входа ── */
height: 1px; .auth-bg-blob {
background: var(--border-light); 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%; 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; .modal-backdrop {
font-weight: 700; background: rgba(0,0,0,0.5);
letter-spacing: -0.02em; 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) { @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);
}
} }

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

@@ -3,7 +3,6 @@ import { Link, Navigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Cat } from 'lucide-react';
export default function LoginPage() { export default function LoginPage() {
const { user, login } = useAuth(); const { user, login } = useAuth();
@@ -24,44 +23,71 @@ export default function LoginPage() {
}; };
return ( return (
<div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]"> <div className="relative flex min-h-screen items-center justify-center p-5 overflow-hidden bg-[var(--bg)]">
<div className="w-full max-w-[380px] animate-fade-up"> {/* Декоративные пятна */}
<div className="text-center mb-10"> <div className="auth-bg-blob w-96 h-96 bg-[var(--accent)] -top-20 -left-20 absolute" />
<div className="mx-auto mb-5 h-14 w-14 rounded-2xl flex items-center justify-center bg-[var(--accent)] shadow-sm"> <div className="auth-bg-blob w-72 h-72 bg-pink-300 bottom-10 right-5 absolute" />
<Cat className="h-7 w-7 text-white" strokeWidth={1.5} />
<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> </div>
<h1 className="text-2xl font-800 tracking-tight">Котограм</h1> <h1 className="text-2xl font-extrabold tracking-tight">Котограм</h1>
<p className="text-sm text-[var(--fg-tertiary)] mt-1">Войдите, чтобы смотреть котов</p> <p className="text-sm text-[var(--fg-tertiary)] mt-1.5">Войдите, чтобы смотреть котов</p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-3"> {/* Форма */}
<Input value={username} onChange={e => setUsername(e.target.value)} <div className="card p-6 space-y-3">
placeholder="Имя пользователя" required autoFocus <form onSubmit={handleSubmit} className="space-y-3">
className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" /> <div className="space-y-2">
<Input type="password" value={password} onChange={e => setPassword(e.target.value)} <Input
placeholder="Пароль" required value={username}
className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" /> onChange={e => setUsername(e.target.value)}
placeholder="Имя пользователя"
{error && ( required
<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"> autoFocus
{error} 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> </div>
)}
<Button type="submit" disabled={loading} {error && (
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]"> <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">
{loading ? ( {error}
<span className="flex items-center gap-2"> </div>
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" /> )}
Вход...
</span>
) : 'Войти'}
</Button>
</form>
<p className="mt-8 text-center text-sm text-[var(--fg-tertiary)]"> <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] shadow-sm"
>
{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> </p>
</div> </div>
</div> </div>

224
client/src/pages/ProfilePage.tsx
View File

@@ -9,7 +9,7 @@ import CatModal from '@/components/CatModal';
import UserAvatar from '@/components/UserAvatar'; import UserAvatar from '@/components/UserAvatar';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Skeleton } from '@/components/ui/skeleton'; import { Skeleton } from '@/components/ui/skeleton';
import { 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 { PRESETS } from '@/lib/avatars';
import { useToast } from '@/components/Toast'; import { useToast } from '@/components/Toast';
@@ -31,7 +31,6 @@ export default function ProfilePage() {
}); });
const { data, isLoading } = useUserCats(profileUserId ?? 0); const { data, isLoading } = useUserCats(profileUserId ?? 0);
const profileUser = isMe ? me : userData; const profileUser = isMe ? me : userData;
const fileInputRef = useRef<HTMLInputElement>(null); const fileInputRef = useRef<HTMLInputElement>(null);
@@ -60,16 +59,19 @@ export default function ProfilePage() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="mx-auto max-w-[540px] px-5 py-8"> <div className="mx-auto max-w-[600px] px-5 py-8">
<div className="flex items-center gap-5 mb-10"> <div className="flex items-center gap-5 mb-8">
<Skeleton className="h-20 w-20 rounded-full" /> <Skeleton className="h-24 w-24 rounded-full" />
<div className="space-y-2.5 flex-1"> <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-48 rounded-full" />
<Skeleton className="h-4 w-24 rounded-full" />
</div> </div>
</div> </div>
<div className="grid grid-cols-3 gap-1.5"> <div className="grid grid-cols-3 gap-1">
{Array.from({ length: 6 }).map((_, i) => <Skeleton key={i} className="aspect-square rounded-xl" />)} {Array.from({ length: 9 }).map((_, i) => (
<Skeleton key={i} className="aspect-square rounded-none first:rounded-tl-xl" />
))}
</div> </div>
</div> </div>
); );
@@ -82,7 +84,9 @@ export default function ProfilePage() {
<Image className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} /> <Image className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
</div> </div>
<p className="text-base font-semibold mb-1">Пользователь не найден</p> <p className="text-base font-semibold mb-1">Пользователь не найден</p>
<Button variant="outline" onClick={() => navigate('/feed')} className="rounded-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> </div>
); );
} }
@@ -91,104 +95,135 @@ export default function ProfilePage() {
const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0); const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
return ( return (
<div className="mx-auto max-w-[540px] px-5 py-6 animate-fade-up"> <div className="mx-auto max-w-[600px] animate-fade-up">
{!isMe && ( {!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"> <div className="px-5 pt-5">
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад <button
</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"> <div className="px-5 pt-6 pb-5">
<UserAvatar <div className="flex items-start gap-6">
avatarUrl={profileUser?.avatar_url} {/* Аватар */}
username={profileUser?.username || '?'} <div className="relative group shrink-0">
className="h-[72px] w-[72px]" <UserAvatar
fallbackClassName="text-2xl font-800 avatar-colored bg-[var(--accent)]" avatarUrl={profileUser?.avatar_url}
/> username={profileUser?.username || '?'}
{isMe && ( className="h-[88px] w-[88px] ring-2 ring-[var(--border-light)] ring-offset-2 ring-offset-[var(--bg)]"
<button fallbackClassName="text-3xl font-extrabold avatar-colored bg-[var(--accent)]"
onClick={() => setShowAvatarPicker(true)} />
className="absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/30 flex items-center justify-center transition-colors" {isMe && (
> <button
<Camera className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" strokeWidth={1.5} /> onClick={() => setShowAvatarPicker(true)}
</button> className="absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/35 flex items-center justify-center transition-all"
)} >
</div> <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"> <div className="flex-1 min-w-0 pt-1">
<h1 className="text-lg font-800 truncate">@{profileUser?.username}</h1> <div className="flex items-center gap-2 mb-1">
<div className="flex items-center gap-1 ml-auto"> <h1 className="text-xl font-extrabold truncate tracking-tight">
@{profileUser?.username}
</h1>
{isMe && me?.is_admin && ( {isMe && me?.is_admin && (
<Link to="/admin" className="btn-ghost h-8 w-8 text-[var(--accent)]" title="Админ-панель"> <Link
<Shield className="h-4 w-4" strokeWidth={1.5} /> 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> </Link>
)} )}
{isMe && ( {isMe && (
<button onClick={logout} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)] hover:text-[var(--danger)]" title="Выйти"> <button
<LogOut className="h-4 w-4" strokeWidth={1.5} /> 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> </button>
)} )}
</div> </div>
</div>
<div className="flex items-center gap-5"> {/* Статистика */}
<div className="text-center"> <div className="flex items-center gap-5 mb-3">
<div className="stat-value text-base">{cats.length}</div> <Stat value={cats.length} label="публикаций" />
<div className="text-[10px] text-[var(--fg-tertiary)] uppercase tracking-wider">фото</div> <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>
<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 && ( {isMe && (
<div className="mt-3">
<Link to="/upload"> <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"> <Button
<Plus className="h-3.5 w-3.5" strokeWidth={2} /> Новая публикация size="sm"
className="rounded-xl text-xs h-8 gap-1.5 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white px-4 shadow-sm"
>
<Plus className="h-3.5 w-3.5" strokeWidth={2.5} />
Новая публикация
</Button> </Button>
</Link> </Link>
</div> )}
)} </div>
</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 ? ( {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)]"> <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} /> <Image className="h-7 w-7 text-[var(--fg-tertiary)]" strokeWidth={1.5} />
</div> </div>
<p className="text-sm font-semibold mb-1">Пока нет котов</p> <p className="text-sm font-semibold mb-1">Пока нет публикаций</p>
<p className="text-xs text-[var(--fg-tertiary)] mb-5">{isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}</p> <p className="text-xs text-[var(--fg-tertiary)] mb-5">
{isMe ? 'Поделитесь первым фото' : 'У пользователя пока нет котов'}
</p>
{isMe && ( {isMe && (
<Link to="/upload"> <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" className="rounded-xl text-xs bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white">
Загрузить кота
</Button>
</Link> </Link>
)} )}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-3 gap-1.5"> <div className="grid grid-cols-3 gap-0.5">
{cats.map(cat => ( {cats.map((cat, i) => (
<button key={cat.id} onClick={() => setModalCatId(cat.id)} <button
className="group relative aspect-square overflow-hidden bg-[var(--bg)] rounded-xl"> key={cat.id}
<img src={cat.image_url} alt={cat.caption || 'Фото кота'} onClick={() => setModalCatId(cat.id)}
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105" loading="lazy" /> className={`profile-grid-item ${
<div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center"> i === 0 ? 'rounded-none' :
<span className="text-white text-xs font-semibold opacity-0 group-hover:opacity-100 transition-opacity flex items-center gap-1 drop-shadow-lg"> i === cats.length - 1 && cats.length % 3 === 1 ? 'rounded-none' : 'rounded-none'
<Heart className="h-3.5 w-3.5 fill-white" strokeWidth={0} /> {cat.likes_count} }`}
>
<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> </span>
</div> </div>
</button> </button>
@@ -198,11 +233,18 @@ export default function ProfilePage() {
{modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />} {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
{/* Пикер аватара */}
{showAvatarPicker && createPortal( {showAvatarPicker && createPortal(
<div className="fixed inset-0 z-[70] bg-black/30 flex items-center justify-center animate-fade-in" onClick={() => setShowAvatarPicker(false)}> <div
<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()}> 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"> <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)]"> <button onClick={() => setShowAvatarPicker(false)} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)]">
<X className="h-5 w-5" strokeWidth={1.5} /> <X className="h-5 w-5" strokeWidth={1.5} />
</button> </button>
@@ -213,8 +255,10 @@ export default function ProfilePage() {
<button <button
key={emoji} key={emoji}
onClick={() => handlePreset(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 ${ 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)]' : 'bg-[var(--border-light)]' 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} {emoji}
@@ -243,3 +287,19 @@ export default function ProfilePage() {
</div> </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>
);
}

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

@@ -3,7 +3,6 @@ import { Link, Navigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input'; import { Input } from '@/components/ui/input';
import { Cat } from 'lucide-react';
export default function RegisterPage() { export default function RegisterPage() {
const { user, register } = useAuth(); const { user, register } = useAuth();
@@ -26,47 +25,77 @@ export default function RegisterPage() {
}; };
return ( return (
<div className="flex min-h-screen items-center justify-center p-5 bg-[var(--bg)]"> <div className="relative flex min-h-screen items-center justify-center p-5 overflow-hidden bg-[var(--bg)]">
<div className="w-full max-w-[380px] animate-fade-up"> <div className="auth-bg-blob w-96 h-96 bg-[var(--accent)] -bottom-20 -right-20 absolute" />
<div className="text-center mb-10"> <div className="auth-bg-blob w-72 h-72 bg-pink-300 top-10 left-5 absolute" />
<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 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> </div>
<h1 className="text-2xl font-800 tracking-tight">Котограм</h1> <h1 className="text-2xl font-extrabold tracking-tight">Котограм</h1>
<p className="text-sm text-[var(--fg-tertiary)] mt-1">Присоединяйтесь к сообществу</p> <p className="text-sm text-[var(--fg-tertiary)] mt-1.5">Присоединяйтесь к сообществу</p>
</div> </div>
<form onSubmit={handleSubmit} className="space-y-3"> <div className="card p-6 space-y-3">
<Input value={username} onChange={e => setUsername(e.target.value)} <form onSubmit={handleSubmit} className="space-y-2">
placeholder="Имя пользователя" minLength={3} required autoFocus <Input
className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" /> value={username}
<Input type="password" value={password} onChange={e => setPassword(e.target.value)} onChange={e => setUsername(e.target.value)}
placeholder="Пароль (мин. 4 символа)" minLength={4} required placeholder="Имя пользователя"
className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" /> minLength={3}
<Input type="password" value={confirm} onChange={e => setConfirm(e.target.value)} required
placeholder="Подтвердите пароль" required autoFocus
className="h-12 text-sm rounded-xl bg-[var(--surface)] border-[var(--border)] focus-ring" /> 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 && ( {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"> <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} {error}
</div> </div>
)} )}
<Button type="submit" disabled={loading} <Button
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]"> type="submit"
{loading ? ( disabled={loading}
<span className="flex items-center gap-2"> 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] shadow-sm mt-1"
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" /> >
Создание... {loading ? (
</span> <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" />
</Button> Создание...
</form> </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> </p>
</div> </div>
</div> </div>

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

@@ -5,9 +5,11 @@ import { useUploadCat } from '@/hooks/useCats';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/components/Toast'; import { useToast } from '@/components/Toast';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback } from '@/components/ui/avatar'; import UserAvatar from '@/components/UserAvatar';
import { ArrowLeft, Upload, X, ImagePlus } from 'lucide-react'; import { ArrowLeft, Upload, X, ImagePlus } from 'lucide-react';
const ACCEPTED_FORMATS = 'JPG, PNG, GIF, WebP, HEIC, AVIF';
export default function UploadPage() { export default function UploadPage() {
const navigate = useNavigate(); const navigate = useNavigate();
const { user, updateUser } = useAuth(); const { user, updateUser } = useAuth();
@@ -19,91 +21,147 @@ export default function UploadPage() {
const onDrop = useCallback((accepted: File[]) => { const onDrop = useCallback((accepted: File[]) => {
const f = accepted[0]; 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]); }, [preview]);
const { getRootProps, getInputProps, isDragActive } = useDropzone({ 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 () => { const handleUpload = async () => {
if (!file) return; if (!file) return;
const fd = new FormData(); const fd = new FormData();
fd.append('image', file); fd.append('caption', caption); fd.append('image', file);
fd.append('caption', caption);
try { try {
const result = await uploadMutation.mutateAsync(fd); const result = await uploadMutation.mutateAsync(fd);
if (user) updateUser({ ...user, points: (user.points || 0) + 1 }); if (user) updateUser({ ...user, points: (user.points || 0) + 1 });
toast('+1 🎉'); toast('+1 балл 🎉');
navigate(`/cat/${result.cat.id}`); 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 ( return (
<div className="mx-auto max-w-[520px] px-5 py-6"> <div className="mx-auto max-w-[520px] px-5 py-6">
<button onClick={() => navigate(-1)} <button
className="mb-6 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors"> onClick={() => navigate(-1)}
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад className="mb-6 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors"
>
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
Назад
</button> </button>
<h1 className="text-xl font-800 tracking-tight mb-6">Новая публикация</h1> <h1 className="text-xl font-extrabold tracking-tight mb-6">Новая публикация</h1>
{!preview ? ( {!preview ? (
<div {...getRootProps()} <div
className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all bg-[var(--surface)] ${ {...getRootProps()}
isDragActive ? 'border-[var(--accent)] bg-[var(--accent-light)] scale-[1.01]' : 'border-[var(--border)] hover:border-[var(--fg-tertiary)] hover:bg-[var(--surface-hover)]' className={`dropzone-idle text-center p-16 ${isDragActive ? 'dropzone-active' : ''}`}
}`}> >
<input {...getInputProps()} /> <input {...getInputProps()} />
<div className="mb-5 flex justify-center"> <div className="flex justify-center mb-5">
<div className="h-14 w-14 rounded-2xl bg-[var(--accent-light)] flex items-center justify-center"> <div className={`h-16 w-16 rounded-2xl flex items-center justify-center transition-colors ${
<ImagePlus className="h-6 w-6 text-[var(--accent)]" strokeWidth={1.5} /> isDragActive ? 'bg-[var(--accent)] text-white' : 'bg-[var(--accent-light)] text-[var(--accent)]'
}`}>
<ImagePlus className="h-7 w-7" strokeWidth={1.5} />
</div> </div>
</div> </div>
<p className="text-sm font-semibold mb-1">{isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}</p> <p className="text-sm font-semibold mb-1.5">
<p className="text-xs text-[var(--fg-tertiary)] mb-5">или нажмите, чтобы выбрать файл</p> {isDragActive ? 'Отпустите фото здесь' : 'Перетащите фото сюда'}
<Button variant="outline" size="sm" className="rounded-xl text-xs px-5 h-9">Выбрать файл</Button> </p>
<p className="mt-4 text-[10px] text-[var(--fg-tertiary)] tracking-wide">JPG, PNG, GIF, WebP · до 10 МБ</p> <p className="text-xs text-[var(--fg-tertiary)] mb-6">
или нажмите, чтобы выбрать файл
</p>
<Button variant="outline" size="sm" className="rounded-xl text-xs px-6 h-9">
Выбрать файл
</Button>
<p className="mt-5 text-[10px] text-[var(--fg-tertiary)] tracking-wide">
{ACCEPTED_FORMATS} · до 20 МБ
</p>
</div> </div>
) : ( ) : (
<div className="space-y-5 animate-fade-up"> <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" /> <div className="relative bg-[var(--bg)] rounded-2xl overflow-hidden shadow-sm">
<button onClick={clearFile} <img
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"> 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} /> <X className="h-4 w-4" strokeWidth={2} />
</button> </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>
<div className="flex items-start gap-3"> {/* Подпись */}
<Avatar className="h-9 w-9 shrink-0"> <div className="card p-4 flex items-start gap-3">
<AvatarFallback className="text-xs avatar-colored bg-[var(--accent)]"> <UserAvatar
{user?.username?.charAt(0).toUpperCase() || '?'} avatarUrl={user?.avatar_url}
</AvatarFallback> username={user?.username || '?'}
</Avatar> className="h-9 w-9 shrink-0"
fallbackClassName="text-xs avatar-colored bg-[var(--accent)]"
/>
<div className="flex-1"> <div className="flex-1">
<p className="text-sm font-semibold mb-1">{user?.username}</p> <p className="text-sm font-semibold mb-1.5">@{user?.username}</p>
<textarea placeholder="Подпись..." value={caption} onChange={e => setCaption(e.target.value)} <textarea
maxLength={200} rows={3} placeholder="Добавьте подпись..."
className="w-full resize-none text-sm bg-transparent outline-none placeholder:text-[var(--fg-tertiary)] leading-[1.5]" /> 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"> <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>
</div> </div>
<div className="divider" /> <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"> <div className="flex items-center justify-between">
<Upload className="h-3 w-3" strokeWidth={1.5} /> +1 балл <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> </span>
<Button onClick={handleUpload} disabled={uploadMutation.isPending} <Button
size="sm" className="rounded-xl text-sm px-6 h-10 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white disabled:opacity-60"> onClick={handleUpload}
disabled={uploadMutation.isPending}
size="sm"
className="rounded-xl text-sm px-7 h-10 bg-[var(--accent)] hover:bg-[var(--accent-hover)] text-white disabled:opacity-60 shadow-sm"
>
{uploadMutation.isPending ? ( {uploadMutation.isPending ? (
<span className="flex items-center gap-2"> <span className="flex items-center gap-2">
<span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" /> <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
Публикация... Публикуем...
</span> </span>
) : 'Опубликовать'} ) : 'Опубликовать'}
</Button> </Button>