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

Fix likes display, add avatar system (presets+upload), improve desktop layout, fix profile viewing

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 14:21:40 +03:00
parent 3664b60f10
commit 025e52e6b1
19 changed files with 346 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
client/src/pages/CatPage.tsx
View File

@@ -6,8 +6,8 @@ import { useComments, useAddComment, useDeleteComment } from '@/hooks/useComment
import { useAuth } from '@/hooks/useAuth';
import { useToast } from '@/components/Toast';
import { Button } from '@/components/ui/button';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Skeleton } from '@/components/ui/skeleton';
import UserAvatar from '@/components/UserAvatar';
import { ArrowLeft, Heart, Trash2, Trophy, Image, Send, X } from 'lucide-react';
export default function CatPage() {
@@ -33,13 +33,12 @@ export default function CatPage() {
const cat = data?.cat;
const comments = commentsData?.comments ?? [];
const isOwner = cat && user && cat.user_id === user.id;
const isLiked = likeData?.liked ?? false;
useEffect(() => { setLiked(isLiked); }, [isLiked]);
useEffect(() => { if (likeData?.liked !== undefined) setLiked(likeData.liked); }, [likeData?.liked]);
const toggleLike = async () => {
if (isOwner || !user || !cat) return;
if (isLiked) {
if (liked) {
setLiked(false);
try { await unlikeMutation.mutateAsync(); refetchLike(); }
catch { setLiked(true); }
@@ -74,7 +73,7 @@ export default function CatPage() {
if (isLoading) {
return (
<div className="mx-auto max-w-[520px] px-5 py-8">
<div className="mx-auto max-w-[540px] px-5 py-8">
<Skeleton className="mb-4 h-4 w-20 rounded-lg" />
<Skeleton className="aspect-[4/3] w-full rounded-2xl" />
<div className="mt-5 space-y-3">
@@ -102,7 +101,7 @@ export default function CatPage() {
});
return (
<div className="mx-auto max-w-[520px] px-5 py-6 animate-fade-up">
<div className="mx-auto max-w-[540px] px-5 py-6 animate-fade-up">
<button onClick={() => navigate(-1)}
className="mb-5 flex items-center gap-1.5 text-xs text-[var(--fg-tertiary)] hover:text-[var(--fg)] transition-colors">
<ArrowLeft className="h-4 w-4" strokeWidth={1.5} /> Назад
@@ -123,11 +122,7 @@ export default function CatPage() {
<div className="p-5 space-y-4">
<div className="flex items-start justify-between">
<Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group">
<Avatar className="h-10 w-10">
<AvatarFallback className="text-sm avatar-colored bg-[var(--accent)]">
{cat.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
<UserAvatar avatarUrl={cat.user_avatar_url} username={cat.username} className="h-10 w-10" fallbackClassName="text-sm 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>
@@ -170,11 +165,7 @@ export default function CatPage() {
</p>
{comments.map(c => (
<div key={c.id} className="flex items-start gap-2.5 group">
<Avatar className="h-7 w-7 shrink-0 mt-0.5">
<AvatarFallback className="text-[9px] avatar-colored bg-[var(--fg-tertiary)]">
{c.username.charAt(0).toUpperCase()}
</AvatarFallback>
</Avatar>
<UserAvatar avatarUrl={undefined} username={c.username} className="h-7 w-7" fallbackClassName="text-[9px] avatar-colored bg-[var(--fg-tertiary)]" />
<div className="flex-1 min-w-0">
<p className="text-sm leading-[1.5]">
<span className="font-semibold mr-1">@{c.username}</span>