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

client/src/pages/ProfilePage.tsx

@@ -1,29 +1,61 @@
-import { useState } from 'react';
+import { useState, useRef, useCallback } from 'react';
 import { useParams, Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserCats } from '@/hooks/useCats';
+import { useQuery } from '@tanstack/react-query';
+import { getUser, uploadAvatar, setAvatarPreset } from '@/api/endpoints';
 import CatModal from '@/components/CatModal';
+import UserAvatar from '@/components/UserAvatar';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { ArrowLeft, Plus, LogOut, Shield, Heart, Image, Trophy } from 'lucide-react';
+import { ArrowLeft, Plus, LogOut, Shield, Heart, Image, Trophy, Camera, X } from 'lucide-react';
+import { PRESETS } from '@/lib/avatars';
+import { useToast } from '@/components/Toast';
 
 export default function ProfilePage() {
   const { id: paramId } = useParams<{ id?: string }>();
   const navigate = useNavigate();
-  const { user: me, logout } = useAuth();
+  const { user: me, logout, updateUser } = useAuth();
   const [modalCatId, setModalCatId] = useState<number | null>(null);
+  const [showAvatarPicker, setShowAvatarPicker] = useState(false);
+  const { toast } = useToast();
 
   const profileUserId = paramId ? parseInt(paramId) : me?.id;
   const isMe = !paramId || (me && profileUserId === me.id);
 
+  const { data: userData } = useQuery({
+    queryKey: ['user', profileUserId],
+    queryFn: () => getUser(profileUserId!).then(r => r.data.user),
+    enabled: !isMe && !!profileUserId,
+  });
+
   const { data, isLoading } = useUserCats(profileUserId ?? 0);
 
-  const profileUser = isMe
-    ? me
-    : data?.cats?.[0]
-      ? { id: data.cats[0].user_id, username: data.cats[0].username, points: data.cats[0].user_points }
-      : null;
+  const profileUser = isMe ? me : userData;
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const onFileChange = useCallback(async (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (!file || !isMe) return;
+    const fd = new FormData();
+    fd.append('avatar', file);
+    try {
+      const res = await uploadAvatar(fd);
+      updateUser(res.data.user);
+      toast('Аватар обновлён');
+    } catch { toast('Ошибка', 'error'); }
+    e.target.value = '';
+  }, [isMe, updateUser, toast]);
+
+  const handlePreset = async (emoji: string) => {
+    if (!isMe) return;
+    try {
+      const res = await setAvatarPreset(emoji);
+      updateUser(res.data.user);
+      setShowAvatarPicker(false);
+      toast('Аватар обновлён');
+    } catch { toast('Ошибка', 'error'); }
+  };
 
   if (isLoading) {
     return (
@@ -55,7 +87,6 @@ export default function ProfilePage() {
   }
 
   const cats = data?.cats ?? [];
-  const initials = profileUser?.username?.charAt(0).toUpperCase() || '?';
   const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
 
   return (
@@ -67,11 +98,23 @@ export default function ProfilePage() {
       )}
 
       <div className="flex items-center gap-5 mb-8">
-        <Avatar className="h-[72px] w-[72px] shrink-0">
-          <AvatarFallback className="text-2xl font-800 avatar-colored bg-[var(--accent)]">
-            {initials}
-          </AvatarFallback>
-        </Avatar>
+        <div className="relative group">
+          <UserAvatar
+            avatarUrl={profileUser?.avatar_url}
+            username={profileUser?.username || '?'}
+            className="h-[72px] w-[72px]"
+            fallbackClassName="text-2xl font-800 avatar-colored bg-[var(--accent)]"
+          />
+          {isMe && (
+            <button
+              onClick={() => setShowAvatarPicker(true)}
+              className="absolute inset-0 rounded-full bg-black/0 group-hover:bg-black/30 flex items-center justify-center transition-colors"
+            >
+              <Camera className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" strokeWidth={1.5} />
+            </button>
+          )}
+        </div>
+
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-2 mb-3">
             <h1 className="text-lg font-800 truncate">@{profileUser?.username}</h1>
@@ -153,6 +196,48 @@ export default function ProfilePage() {
       )}
 
       {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
+
+      {showAvatarPicker && (
+        <div className="fixed inset-0 z-[70] bg-black/30 flex items-center justify-center animate-fade-in" onClick={() => setShowAvatarPicker(false)}>
+          <div className="bg-white rounded-2xl w-full max-w-sm p-5 shadow-xl animate-scale-in mx-4" onClick={e => e.stopPropagation()}>
+            <div className="flex items-center justify-between mb-5">
+              <h2 className="text-base font-800">Выбрать аватар</h2>
+              <button onClick={() => setShowAvatarPicker(false)} className="btn-ghost h-8 w-8 text-[var(--fg-tertiary)]">
+                <X className="h-5 w-5" strokeWidth={1.5} />
+              </button>
+            </div>
+
+            <div className="grid grid-cols-5 gap-2 mb-5">
+              {PRESETS.map(emoji => (
+                <button
+                  key={emoji}
+                  onClick={() => handlePreset(emoji)}
+                  className={`h-12 w-12 rounded-xl flex items-center justify-center text-2xl transition-all hover:bg-[var(--accent-light)] hover:scale-110 ${
+                    me?.avatar_url === `preset:${emoji}` ? 'ring-2 ring-[var(--accent)] bg-[var(--accent-light)]' : 'bg-[var(--border-light)]'
+                  }`}
+                >
+                  {emoji}
+                </button>
+              ))}
+            </div>
+
+            <div className="divider mb-4" />
+
+            <div>
+              <input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" />
+              <Button
+                variant="outline"
+                onClick={() => fileInputRef.current?.click()}
+                className="w-full rounded-xl h-10 gap-2"
+              >
+                <Camera className="h-4 w-4" strokeWidth={1.5} /> Загрузить фото
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" />
     </div>
   );
 }