UI: тёплый современный дизайн + русификация

client/src/pages/ProfilePage.tsx

@@ -6,7 +6,7 @@ import CatModal from '@/components/CatModal';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { Heart, Plus, ArrowLeft } from 'lucide-react';
+import { Heart, Plus, ArrowLeft, Grid3X3, Bookmark } from 'lucide-react';
 
 export default function ProfilePage() {
   const { id: paramId } = useParams<{ id?: string }>();
@@ -19,9 +19,11 @@ export default function ProfilePage() {
 
   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
+    : data?.cats?.[0]
+      ? { id: data.cats[0].user_id, username: data.cats[0].username, points: data.cats[0].user_points }
+      : null;
 
   if (isLoading) {
     return (
@@ -30,13 +32,11 @@ export default function ProfilePage() {
           <Skeleton className="h-16 w-16 rounded-full" />
           <div className="space-y-2">
             <Skeleton className="h-6 w-32" />
-            <Skeleton className="h-4 w-48" />
+            <div className="flex gap-4"><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /><Skeleton className="h-4 w-16" /></div>
           </div>
         </div>
-        <div className="grid grid-cols-3 gap-0.5">
-          {Array.from({ length: 6 }).map((_, i) => (
-            <Skeleton key={i} className="aspect-square" />
-          ))}
+        <div className="grid grid-cols-3 gap-1">
+          {Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-xl" />))}
         </div>
       </div>
     );
@@ -45,8 +45,8 @@ export default function ProfilePage() {
   if (!profileUser && !isMe) {
     return (
       <div className="flex flex-col items-center justify-center py-20">
-        <p className="text-muted-foreground">User not found</p>
-        <Button variant="outline" className="mt-4" onClick={() => navigate('/feed')}>Go to feed</Button>
+        <p className="text-muted-foreground mb-4">Пользователь не найден</p>
+        <Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
       </div>
     );
   }
@@ -55,44 +55,61 @@ export default function ProfilePage() {
   const initials = profileUser?.username?.charAt(0).toUpperCase() || '?';
   const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
 
+  const declension = (n: number, forms: [string, string, string]) => {
+    n = Math.abs(n) % 100;
+    const n1 = n % 10;
+    if (n > 10 && n < 20) return forms[2];
+    if (n1 > 1 && n1 < 5) return forms[1];
+    if (n1 === 1) return forms[0];
+    return forms[2];
+  };
+
   return (
     <div className="mx-auto max-w-4xl px-4 py-10">
       {!isMe && (
         <button onClick={() => navigate(-1)} className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors">
           <ArrowLeft className="h-4 w-4" />
-          Back
+          Назад
         </button>
       )}
 
       {/* Profile header */}
       <div className="flex items-start gap-8 mb-10">
-        <Avatar className="h-16 w-16 shrink-0">
-          <AvatarFallback className="bg-foreground text-background text-lg font-medium">
+        <Avatar className="h-20 w-20 shrink-0 ring-2 ring-offset-2 ring-orange-200">
+          <AvatarFallback className="text-2xl font-bold bg-gradient-to-br from-orange-400 to-rose-500 text-white">
             {initials}
           </AvatarFallback>
         </Avatar>
         <div className="flex-1 min-w-0">
           <div className="flex items-center gap-3 mb-4">
-            <h1 className="text-xl font-medium">@{profileUser?.username}</h1>
-            {/* Edit profile button - only for own profile, navigates to profile settings or does nothing */}
+            <h1 className="text-xl font-semibold">@{profileUser?.username}</h1>
             {isMe && (
-              <Button variant="outline" size="sm" className="text-xs h-7 rounded-sm">
-                Edit profile
+              <Button variant="outline" size="sm" className="rounded-xl text-xs h-8">
+                Редактировать профиль
               </Button>
             )}
           </div>
 
           <div className="flex items-center gap-6 text-sm mb-4">
-            <div><span className="font-semibold">{cats.length}</span> <span className="text-muted-foreground">posts</span></div>
-            <div><span className="font-semibold">{totalLikes}</span> <span className="text-muted-foreground">likes</span></div>
-            <div><span className="font-semibold">{profileUser?.points ?? 0}</span> <span className="text-muted-foreground">pts</span></div>
+            <div>
+              <span className="font-bold">{cats.length}</span>{' '}
+              <span className="text-muted-foreground">{declension(cats.length, ['публикация', 'публикации', 'публикаций'])}</span>
+            </div>
+            <div>
+              <span className="font-bold">{totalLikes}</span>{' '}
+              <span className="text-muted-foreground">{declension(totalLikes, ['лайк', 'лайка', 'лайков'])}</span>
+            </div>
+            <div>
+              <span className="font-bold">🏆 {profileUser?.points ?? 0}</span>{' '}
+              <span className="text-muted-foreground">{declension(profileUser?.points ?? 0, ['балл', 'балла', 'баллов'])}</span>
+            </div>
           </div>
 
           {isMe && (
             <Link to="/upload">
-              <Button size="sm" className="text-xs h-7 rounded-sm gap-1">
-                <Plus className="h-3.5 w-3.5" />
-                New post
+              <Button size="sm" className="rounded-xl bg-gradient-to-r from-orange-400 to-rose-500 text-white hover:from-orange-500 hover:to-rose-600 shadow-sm gap-1">
+                <Plus className="h-4 w-4" />
+                Новая публикация
               </Button>
             </Link>
           )}
@@ -100,41 +117,41 @@ export default function ProfilePage() {
       </div>
 
       {/* Tabs */}
-      <div className="flex items-center gap-6 border-t pt-4 mb-4">
-        <button className="text-xs font-semibold tracking-wider uppercase text-foreground">Posts</button>
-        <button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Saved</button>
-        <button className="text-xs font-semibold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">Liked</button>
+      <div className="flex items-center gap-6 border-t pt-4 mb-1">
+        <button className="flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase text-foreground">
+          <Grid3X3 className="h-3 w-3" />
+          Публикации
+        </button>
+        <button className="flex items-center gap-1.5 text-xs font-bold tracking-wider uppercase text-muted-foreground hover:text-foreground transition-colors">
+          <Bookmark className="h-3 w-3" />
+          Сохранённое
+        </button>
       </div>
 
       {/* Grid */}
       {cats.length === 0 ? (
         <div className="flex flex-col items-center justify-center py-20 text-center border-t">
-          <p className="text-base font-medium mb-1">No cats yet</p>
+          <p className="text-base font-medium mb-1">Пока нет котов</p>
           <p className="text-sm text-muted-foreground mb-4">
-            {isMe ? 'Share your first cat photo' : 'This user has no cats yet'}
+            {isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
           </p>
           {isMe && (
             <Link to="/upload">
-              <Button size="sm">Upload</Button>
+              <Button size="sm" className="rounded-xl">Загрузить кота</Button>
             </Link>
           )}
         </div>
       ) : (
-        <div className="grid grid-cols-3 gap-0.5">
+        <div className="grid grid-cols-3 gap-1">
           {cats.map((cat) => (
             <button
               key={cat.id}
               onClick={() => setModalCatId(cat.id)}
-              className="group relative aspect-square overflow-hidden bg-muted"
+              className="group relative aspect-square overflow-hidden rounded-xl bg-muted"
             >
-              <img
-                src={cat.image_url}
-                alt={cat.caption || 'Cat photo'}
-                className="h-full w-full object-cover transition-transform group-hover:scale-105"
-                loading="lazy"
-              />
-              <div className="absolute inset-0 flex items-center justify-center bg-black/30 opacity-0 group-hover:opacity-100 transition-opacity">
-                <div className="flex items-center gap-1 text-white text-sm font-medium">
+              <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy" />
+              <div className="absolute inset-0 flex items-center justify-center bg-black/20 opacity-0 group-hover:opacity-100 transition-opacity rounded-xl">
+                <div className="flex items-center gap-1.5 text-white text-sm font-bold">
                   <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
                   <span>{cat.likes_count}</span>
                 </div>
@@ -144,9 +161,7 @@ export default function ProfilePage() {
         </div>
       )}
 
-      {modalCatId && (
-        <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />
-      )}
+      {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
     </div>
   );
 }