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

Compare commits

base: HeagBoKaT:7141d4082600012d01ea4b8c9b4664aa740caae7
Branches Tags
HeagBoKaT:main HeagBoKaT:claude/sleepy-shirley-adfe57
..
compare: HeagBoKaT:main
Branches Tags
HeagBoKaT:main HeagBoKaT:claude/sleepy-shirley-adfe57

10 Commits
7141d40826 ... main

Author SHA1 Message Date
HeagBoKaT
deea405092 Merge pull request 'perf: optimize image loading — resize, thumbnails, caching, lazy load' (#4) from claude/sleepy-shirley-adfe57 into main 
Reviewed-on: #4
 2026-06-26 10:09:12 +03:00
HeagBoKaT
63013816c8 perf: optimize image loading — resize, thumbnails, caching, lazy load 
- Server: resize uploads to max 1200px + generate 600px _thumb.jpg
- Server: cache /uploads with max-age=1y immutable headers
- Client: CatCard uses _thumb.jpg in feed (fallback to full on error)
- Client: first 3 feed cards load eagerly (LCP), rest lazy + decoding=async
- Client: loading placeholder bg while image fetches
- Migration: server/src/scripts/gen-thumbs.ts for existing images

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-26 09:55:49 +03:00
HeagBoKaT
e853bca9c9 Merge pull request 'fix: rate limiter was blocking all /api/cats reads after 10 requests' (#3) from claude/sleepy-shirley-adfe57 into main 
Reviewed-on: #3
 2026-06-26 09:46:42 +03:00
HeagBoKaT
852e0f5f5b fix: rate limiter was blocking all /api/cats reads after 10 requests 
uploadLimiter now only applies to POST /api/cats (uploads), not GET
reads — previously users were getting 429 after ~10 page navigations.
Also remove duplicate file input in ProfilePage and cancel stale rAF
on route transition cleanup.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-26 09:45:35 +03:00
HeagBoKaT
99efe831b0 Merge pull request 'claude/sleepy-shirley-adfe57' (#2) from claude/sleepy-shirley-adfe57 into main 
Reviewed-on: #2
 2026-06-26 00:57:45 +03:00
heagbokat
122d9e831f fix: remove duplicate size prop on Button in ProfilePage 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-26 00:55:58 +03:00
heagbokat
15a6323dfe chore: update server package-lock.json (sharp dependency) 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-26 00:55:02 +03:00
heagbokat
ae01ebdeea feat: clean navbar icons, floating theme bubble, auto theme on first visit 
- Navbar: remove theme switcher, clean nav icons (no text labels),
  active state is accent dot underline + icon color — no pill bg
- useTheme: drop 'system' from stored type; first visit = auto
  by system preference, stays unset until user explicitly clicks
- ThemeBubble: fixed bottom-right pill with Sun/Moon icon + label,
  hover lift, click toggles light ↔ dark and persists to localStorage
- App.tsx: render ThemeBubble inside ThemeProvider

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-26 00:51:42 +03:00
heagbokat
492bd1b4e1 fix: redesign buttons — depth, outline contrast, press effect 
- button.tsx: primary gets gradient + shadow + hover glow + -translate-y-px
  lift; outline gets border-2 for visibility on dark bg; all variants
  get active:scale-[0.96] press feel; lg size h-12 for auth forms
- Remove hardcoded bg-[var(--accent)] overrides from Login, Register,
  Feed, Profile, Upload — variants now handle all coloring

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
 2026-06-26 00:47:44 +03:00
heagbokat
91ab44c6fb feat: UI redesign — polished layout, modal, nav, profile 
- 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>
 2026-06-26 00:30:41 +03:00
18 changed files with 1607 additions and 532 deletions
Expand all files Collapse all files

5
client/src/App.tsx
View File

@@ -5,6 +5,7 @@ import { ThemeProvider } from '@/hooks/useTheme';
import { ToastProvider } from '@/components/Toast'; import { ToastProvider } from '@/components/Toast';
import ProtectedRoute from '@/components/ProtectedRoute'; import ProtectedRoute from '@/components/ProtectedRoute';
import Navbar from '@/components/Navbar'; import Navbar from '@/components/Navbar';
import ThemeBubble from '@/components/ThemeBubble';
import LoginPage from '@/pages/LoginPage'; import LoginPage from '@/pages/LoginPage';
import RegisterPage from '@/pages/RegisterPage'; import RegisterPage from '@/pages/RegisterPage';
import FeedPage from '@/pages/FeedPage'; import FeedPage from '@/pages/FeedPage';
@@ -32,10 +33,11 @@ function AnimatedRoutes() {
if (el) { if (el) {
el.classList.remove('page-enter-active'); el.classList.remove('page-enter-active');
el.classList.add('page-enter'); el.classList.add('page-enter');
requestAnimationFrame(() => { const rafId = requestAnimationFrame(() => {
el.classList.remove('page-enter'); el.classList.remove('page-enter');
el.classList.add('page-enter-active'); el.classList.add('page-enter-active');
}); });
return () => cancelAnimationFrame(rafId);
} }
}, [location.pathname]); }, [location.pathname]);
@@ -107,6 +109,7 @@ export default function App() {
<AuthProvider> <AuthProvider>
<ToastProvider> <ToastProvider>
<Navbar /> <Navbar />
<ThemeBubble />
<main> <main>
<AnimatedRoutes /> <AnimatedRoutes />
</main> </main>

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

@@ -11,21 +11,27 @@ interface CatCardProps {
cat: Cat; cat: Cat;
onOpen: (id: number) => void; onOpen: (id: number) => void;
likedIds?: Set<number>; likedIds?: Set<number>;
priority?: boolean;
} }
export default function CatCard({ cat, onOpen, likedIds }: CatCardProps) { export default function CatCard({ cat, onOpen, likedIds, priority }: 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);
const [imgLoaded, setImgLoaded] = useState(false);
useEffect(() => { const thumbSrc = cat.image_url.endsWith('.gif')
if (likedIds !== undefined) setLiked(likedIds.has(cat.id)); ? cat.image_url
}, [likedIds, cat.id]); : cat.image_url.replace(/\.jpg$/, '_thumb.jpg');
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 +54,88 @@ 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 relative min-h-[200px] bg-[var(--border-light)]">
<img <img
src={cat.image_url} src={thumbSrc}
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 transition-opacity duration-300 ${imgLoaded ? 'opacity-100' : 'opacity-0'}`}
draggable={false} draggable={false}
loading="lazy" loading={priority ? 'eager' : 'lazy'}
decoding="async"
onLoad={() => setImgLoaded(true)}
onError={e => { e.currentTarget.src = cat.image_url; }}
/> />
</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>

277
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,130 +100,199 @@ 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>,
document.body document.body
); );
} }

89
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>
); );
} }

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

@@ -1,47 +1,53 @@
import { Link, useLocation } from 'react-router-dom'; import { Link, useLocation } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { 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 } from 'lucide-react';
export default function Navbar() { export default function Navbar() {
const { user } = useAuth(); const { user } = useAuth();
const { theme, setTheme } = useTheme();
const location = useLocation(); 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; if (!user) return null;
const isFeed = location.pathname === '/feed' || location.pathname === '/';
const isUpload = location.pathname === '/upload';
const isProfile = location.pathname.startsWith('/profile');
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"> <div className="flex items-center gap-1">
<NavIcon to="/feed" active={location.pathname === '/feed'} icon={Home} label="Лента" /> <NavIcon to="/feed" active={isFeed} icon={Home} label="Лента" />
<NavIcon to="/upload" active={location.pathname === '/upload'} icon={PlusCircle} label="Добавить" /> <NavIcon to="/upload" active={isUpload} icon={PlusSquare} 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>
<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
location.pathname.startsWith('/profile') ? 'ring-2 ring-[var(--accent)] ring-offset-2 ring-offset-[var(--bg)]' : '' to="/profile"
}`}> title="Профиль"
<UserAvatar avatarUrl={user.avatar_url} username={user.username} className="h-8 w-8" fallbackClassName="text-[11px] avatar-colored bg-[var(--accent)]" /> className={[
</div> '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 && ( {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)]">
<Shield className="h-2 w-2 text-white" strokeWidth={3} /> <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 ( return (
<Link <Link
to={to} to={to}
title={label} 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 active
? 'bg-[var(--accent-soft)] text-[var(--accent)]' ? 'text-[var(--accent)] bg-[var(--accent-soft)]'
: 'text-[var(--fg-tertiary)] hover:text-[var(--fg-secondary)] hover:bg-[var(--border-light)]' : '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> </Link>
); );
} }

31
client/src/components/ThemeBubble.tsx Normal file
View 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>
);
}

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

@@ -4,22 +4,60 @@ import { cva, type VariantProps } from 'class-variance-authority';
import { cn } from '@/lib/utils'; import { cn } from '@/lib/utils';
const buttonVariants = cva( const buttonVariants = cva(
'inline-flex items-center justify-center gap-2 whitespace-nowrap 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: { variants: {
variant: { 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', default: [
outline: 'border border-[var(--border)] bg-[var(--surface)] shadow-sm hover:bg-[var(--surface-hover)] text-[var(--fg)]', 'bg-[var(--accent)] text-white',
secondary: 'bg-[var(--border-light)] text-[var(--fg)] shadow-sm hover:bg-[var(--border)]', 'shadow-[0_1px_2px_rgba(0,0,0,0.25),inset_0_1px_0_rgba(255,255,255,0.15)]',
ghost: 'hover:bg-[var(--border-light)] text-[var(--fg-secondary)]', 'hover:bg-[var(--accent-hover)] hover:shadow-[0_3px_10px_rgba(201,68,93,0.4)]',
link: 'text-[var(--accent)] underline-offset-4 hover:underline', '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: { size: {
default: 'h-9 rounded-xl px-4 py-2', default: 'h-10 rounded-xl px-5 py-2 text-sm',
sm: 'h-8 rounded-lg px-3 text-xs', sm: 'h-8 rounded-lg px-3.5 text-xs',
lg: 'h-10 rounded-xl px-6', lg: 'h-12 rounded-xl px-7 text-[15px]',
icon: 'h-9 w-9 rounded-xl', icon: 'h-9 w-9 rounded-xl text-sm',
}, },
}, },
defaultVariants: { defaultVariants: {
@@ -38,9 +76,15 @@ export interface ButtonProps
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>( const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => { ({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : 'button'; 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'; Button.displayName = 'Button';
export { Button, buttonVariants }; export { Button, buttonVariants };

30
client/src/hooks/useTheme.tsx
View File

@@ -1,28 +1,28 @@
import { createContext, useContext, useEffect, useState, ReactNode } from 'react'; import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
type Theme = 'light' | 'dark' | 'system'; type StoredTheme = 'light' | 'dark';
interface ThemeContextValue { interface ThemeContextValue {
theme: Theme;
resolvedTheme: 'light' | 'dark'; resolvedTheme: 'light' | 'dark';
setTheme: (t: Theme) => void; setTheme: (t: StoredTheme) => void;
} }
const ThemeContext = createContext<ThemeContextValue>({ const ThemeContext = createContext<ThemeContextValue>({
theme: 'system', resolvedTheme: 'dark',
resolvedTheme: 'light',
setTheme: () => {}, setTheme: () => {},
}); });
export function ThemeProvider({ children }: { children: ReactNode }) { export function ThemeProvider({ children }: { children: ReactNode }) {
const [theme, setThemeState] = useState<Theme>(() => {
return (localStorage.getItem('theme') as Theme) ?? 'system';
});
const [systemDark, setSystemDark] = useState(() => const [systemDark, setSystemDark] = useState(() =>
window.matchMedia('(prefers-color-scheme: dark)').matches 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(() => { useEffect(() => {
const mq = window.matchMedia('(prefers-color-scheme: dark)'); const mq = window.matchMedia('(prefers-color-scheme: dark)');
const handler = (e: MediaQueryListEvent) => setSystemDark(e.matches); const handler = (e: MediaQueryListEvent) => setSystemDark(e.matches);
@@ -30,21 +30,19 @@ export function ThemeProvider({ children }: { children: ReactNode }) {
return () => mq.removeEventListener('change', handler); return () => mq.removeEventListener('change', handler);
}, []); }, []);
const resolvedTheme: 'light' | 'dark' = const resolvedTheme: 'light' | 'dark' = explicit ?? (systemDark ? 'dark' : 'light');
theme === 'system' ? (systemDark ? 'dark' : 'light') : theme;
useEffect(() => { useEffect(() => {
const root = document.documentElement; document.documentElement.setAttribute('data-theme', resolvedTheme);
root.setAttribute('data-theme', resolvedTheme);
}, [resolvedTheme]); }, [resolvedTheme]);
const setTheme = (t: Theme) => { const setTheme = (t: StoredTheme) => {
localStorage.setItem('theme', t); localStorage.setItem('theme', t);
setThemeState(t); setExplicit(t);
}; };
return ( return (
<ThemeContext.Provider value={{ theme, resolvedTheme, setTheme }}> <ThemeContext.Provider value={{ resolvedTheme, setTheme }}>
{children} {children}
</ThemeContext.Provider> </ThemeContext.Provider>
); );

281
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);
}
}

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

@@ -80,7 +80,7 @@ export default function FeedPage() {
</div> </div>
<p className="text-base font-semibold mb-1">Не удалось загрузить</p> <p className="text-base font-semibold mb-1">Не удалось загрузить</p>
<p className="text-sm text-[var(--fg-tertiary)] mb-5">Попробуйте снова</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} /> Попробовать <RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} /> Попробовать
</Button> </Button>
</div> </div>
@@ -94,7 +94,7 @@ export default function FeedPage() {
<p className="text-base font-semibold mb-1">Пока нет котов</p> <p className="text-base font-semibold mb-1">Пока нет котов</p>
<p className="text-sm text-[var(--fg-tertiary)] mb-5">Будьте первым</p> <p className="text-sm text-[var(--fg-tertiary)] mb-5">Будьте первым</p>
<Button onClick={() => window.location.href = '/upload'} <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> </Button>
</div> </div>
@@ -103,8 +103,8 @@ export default function FeedPage() {
{allCats.length > 0 && ( {allCats.length > 0 && (
<> <>
<div className="space-y-5"> <div className="space-y-5">
{allCats.map((cat) => ( {allCats.map((cat, index) => (
<CatCard key={cat.id} cat={cat} onOpen={setModalCatId} likedIds={likedIds} /> <CatCard key={cat.id} cat={cat} onOpen={setModalCatId} likedIds={likedIds} priority={index < 3} />
))} ))}
</div> </div>

92
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,46 +23,73 @@ 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}
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> </p>
</div> </div>
</div> </div>
); );
} }

226
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,134 @@ 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="gap-1.5"
>
<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">
Загрузить кота
</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 +232,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 +254,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}
@@ -225,7 +268,6 @@ export default function ProfilePage() {
<div className="divider mb-4" /> <div className="divider mb-4" />
<div> <div>
<input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" />
<Button <Button
variant="outline" variant="outline"
onClick={() => fileInputRef.current?.click()} onClick={() => fileInputRef.current?.click()}
@@ -242,4 +284,20 @@ export default function ProfilePage() {
<input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" /> <input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" />
</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>
);
}

101
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,49 +25,79 @@ 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"> size="lg" className="w-full 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>
); );
} }

146
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="px-6">
Выбрать файл
</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="px-7"
>
{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>
@@ -118,4 +176,4 @@ export default function UploadPage() {
)} )}
</div> </div>
); );
} }

519
server/package-lock.json generated
View File

@@ -14,6 +14,7 @@
"helmet": "^8.2.0", "helmet": "^8.2.0",
"jsonwebtoken": "^9.0.2", "jsonwebtoken": "^9.0.2",
"multer": "^1.4.5-lts.1", "multer": "^1.4.5-lts.1",
"sharp": "^0.33.0",
"sql.js": "^1.14.1" "sql.js": "^1.14.1"
}, },
"devDependencies": { "devDependencies": {
@@ -28,6 +29,16 @@
"typescript": "^5.6.0" "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": { "node_modules/@esbuild/aix-ppc64": {
"version": "0.28.0", "version": "0.28.0",
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz", "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.28.0.tgz",
@@ -470,6 +481,403 @@
"node": ">=18" "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": { "node_modules/@types/bcryptjs": {
"version": "2.4.6", "version": "2.4.6",
"resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz", "resolved": "https://registry.npmjs.org/@types/bcryptjs/-/bcryptjs-2.4.6.tgz",
@@ -759,6 +1167,47 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/concat-stream": {
"version": "1.6.2", "version": "1.6.2",
"resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz", "resolved": "https://registry.npmjs.org/concat-stream/-/concat-stream-1.6.2.tgz",
@@ -861,6 +1310,15 @@
"npm": "1.2.8000 || >= 1.4.16" "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": { "node_modules/dotenv": {
"version": "16.6.1", "version": "16.6.1",
"resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz", "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-16.6.1.tgz",
@@ -1263,6 +1721,12 @@
"node": ">= 0.10" "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": { "node_modules/isarray": {
"version": "1.0.0", "version": "1.0.0",
"resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz", "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -1700,6 +2164,45 @@
"integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==", "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw==",
"license": "ISC" "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": { "node_modules/side-channel": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz", "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.1.0.tgz",
@@ -1772,6 +2275,15 @@
"url": "https://github.com/sponsors/ljharb" "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": { "node_modules/sql.js": {
"version": "1.14.1", "version": "1.14.1",
"resolved": "https://registry.npmjs.org/sql.js/-/sql.js-1.14.1.tgz", "resolved": "https://registry.npmjs.org/sql.js/-/sql.js-1.14.1.tgz",
@@ -1819,6 +2331,13 @@
"node": ">=0.6" "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": { "node_modules/tsx": {
"version": "4.22.3", "version": "4.22.3",
"resolved": "https://registry.npmjs.org/tsx/-/tsx-4.22.3.tgz", "resolved": "https://registry.npmjs.org/tsx/-/tsx-4.22.3.tgz",

11
server/src/index.ts
View File

@@ -54,9 +54,16 @@ async function main() {
standardHeaders: true, standardHeaders: true,
legacyHeaders: false, legacyHeaders: false,
}); });
app.use('/api/cats', uploadLimiter); // Rate-limit only cat uploads (POST), not reads
app.use('/api/cats', (req, _res, next) => {
if (req.method !== 'POST') return next();
return uploadLimiter(req, _res, next);
});
app.use('/uploads', express.static(path.join(__dirname, '..', 'uploads'))); app.use('/uploads', express.static(path.join(__dirname, '..', 'uploads'), {
maxAge: '365d',
immutable: true,
}));
app.use('/api/auth', authRoutes); app.use('/api/auth', authRoutes);
app.use('/api/cats', catRoutes); app.use('/api/cats', catRoutes);

11
server/src/routes/cats.ts
View File

@@ -127,8 +127,17 @@ router.post('/', authMiddleware, upload.single('image'), async (req: AuthRequest
finalFilename = req.file.filename.replace(/\.[^.]+$/, '.jpg'); finalFilename = req.file.filename.replace(/\.[^.]+$/, '.jpg');
finalPath = path.join(uploadsDir, finalFilename); finalPath = path.join(uploadsDir, finalFilename);
try { try {
await sharp(origPath).jpeg({ quality: 85 }).toFile(finalPath); await sharp(origPath)
.resize({ width: 1200, withoutEnlargement: true })
.jpeg({ quality: 85 })
.toFile(finalPath);
if (origPath !== finalPath) fs.unlinkSync(origPath); if (origPath !== finalPath) fs.unlinkSync(origPath);
const thumbFilename = finalFilename.replace(/\.jpg$/, '_thumb.jpg');
await sharp(finalPath)
.resize({ width: 600, withoutEnlargement: true })
.jpeg({ quality: 80 })
.toFile(path.join(uploadsDir, thumbFilename));
} catch { } catch {
try { fs.unlinkSync(origPath); } catch {} try { fs.unlinkSync(origPath); } catch {}
res.status(400).json({ error: 'Не удалось обработать изображение. Попробуйте другой формат.' }); res.status(400).json({ error: 'Не удалось обработать изображение. Попробуйте другой формат.' });

43
server/src/scripts/gen-thumbs.ts Normal file
View File

@@ -0,0 +1,43 @@
import fs from 'fs';
import path from 'path';
import { fileURLToPath } from 'url';
import sharp from 'sharp';
const __dirname = path.dirname(fileURLToPath(import.meta.url));
const uploadsDir = path.join(__dirname, '..', '..', 'uploads');
async function main() {
const files = fs.readdirSync(uploadsDir);
const candidates = files.filter(
f => f.endsWith('.jpg') && !f.endsWith('_thumb.jpg')
);
console.log(`Found ${candidates.length} images to process`);
let created = 0;
let skipped = 0;
for (const filename of candidates) {
const thumbFilename = filename.replace(/\.jpg$/, '_thumb.jpg');
const thumbPath = path.join(uploadsDir, thumbFilename);
if (fs.existsSync(thumbPath)) {
skipped++;
continue;
}
try {
await sharp(path.join(uploadsDir, filename))
.resize({ width: 600, withoutEnlargement: true })
.jpeg({ quality: 80 })
.toFile(thumbPath);
created++;
console.log(` ✓ ${thumbFilename}`);
} catch (err) {
console.error(` ✗ ${filename}: ${err}`);
}
}
console.log(`\nDone: ${created} created, ${skipped} already existed`);
}
main().catch(console.error);