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

client/src/pages/CatPage.tsx

@@ -34,24 +34,21 @@ export default function CatPage() {
   const handleLike = async () => {
     if (isOwner || !user || !cat) return;
     setAnimating(true);
-    setTimeout(() => setAnimating(false), 400);
+    setTimeout(() => setAnimating(false), 450);
 
     if (isLiked) {
       setLiked(false);
       try {
         const res = await unlikeMutation.mutateAsync();
-        if (res.ownerPoints !== undefined && cat.user_id === user.id) {
+        if (res.ownerPoints !== undefined && cat.user_id === user.id)
           updateUser({ ...user, points: res.ownerPoints });
-        }
         refetchLike();
       } catch { setLiked(true); }
     } else {
       setLiked(true);
-      toast('Liked', 'like');
-      try {
-        await likeMutation.mutateAsync();
-        refetchLike();
-      } catch { setLiked(false); }
+      toast('Нравится ♥', 'like');
+      try { await likeMutation.mutateAsync(); refetchLike(); }
+      catch { setLiked(false); }
     }
   };
 
@@ -59,21 +56,19 @@ export default function CatPage() {
     if (!isOwner || !cat) return;
     try {
       await deleteMutation.mutateAsync(cat.id);
-      toast('Deleted', 'success');
+      toast('Удалено', 'success');
       navigate('/feed');
-    } catch {
-      toast('Failed to delete', 'error');
-    }
+    } catch { toast('Ошибка удаления', 'error'); }
   };
 
   if (isLoading) {
     return (
       <div className="mx-auto max-w-2xl px-4 py-8">
-        <Skeleton className="mb-4 h-5 w-20" />
-        <Skeleton className="aspect-[4/3] w-full" />
+        <Skeleton className="mb-4 h-5 w-20 rounded-xl" />
+        <Skeleton className="aspect-[4/3] w-full rounded-2xl" />
         <div className="mt-4 space-y-2">
-          <Skeleton className="h-5 w-32" />
-          <Skeleton className="h-4 w-48" />
+          <Skeleton className="h-5 w-32 rounded-xl" />
+          <Skeleton className="h-4 w-48 rounded-xl" />
         </div>
       </div>
     );
@@ -82,8 +77,8 @@ export default function CatPage() {
   if (isError || !cat) {
     return (
       <div className="flex flex-col items-center justify-center py-20">
-        <p className="text-muted-foreground">Cat 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>
     );
   }
@@ -95,66 +90,70 @@ export default function CatPage() {
         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>
 
-      {/* Image */}
-      <div className="bg-muted mb-5">
-        <img src={cat.image_url} alt={cat.caption || 'Cat photo'} className="w-full max-h-[60vh] object-contain mx-auto" />
-      </div>
+      <div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden">
+        <div className="bg-muted/30">
+          <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="w-full max-h-[60vh] object-contain mx-auto" />
+        </div>
 
-      {/* Info */}
-      <div className="space-y-3">
-        <div className="flex items-center justify-between">
-          <div className="flex items-center gap-2.5">
-            <Avatar className="h-7 w-7">
-              <AvatarFallback className="text-[10px] bg-foreground text-background">
-                {cat.username.charAt(0).toUpperCase()}
-              </AvatarFallback>
-            </Avatar>
-            <span className="text-sm font-medium">@{cat.username}</span>
+        <div className="p-5 space-y-3">
+          {/* Header */}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-3">
+              <Avatar className="h-9 w-9 ring-2 ring-offset-1 ring-orange-200">
+                <AvatarFallback className="text-sm bg-gradient-to-br from-orange-400 to-rose-500 text-white font-bold">
+                  {cat.username.charAt(0).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+              <div>
+                <span className="text-sm font-bold">@{cat.username}</span>
+                <p className="text-xs text-muted-foreground">
+                  {new Date(cat.created_at).toLocaleDateString('ru-RU', {
+                    year: 'numeric', month: 'long', day: 'numeric',
+                    hour: '2-digit', minute: '2-digit',
+                  })}
+                </p>
+              </div>
+            </div>
+            {isOwner && (
+              <button onClick={handleDelete} className="p-2 rounded-xl text-muted-foreground hover:text-destructive hover:bg-red-50 transition-colors">
+                <Trash2 className="h-4 w-4" />
+              </button>
+            )}
           </div>
-          {isOwner && (
-            <button onClick={handleDelete} className="text-muted-foreground hover:text-destructive transition-colors">
-              <Trash2 className="h-4 w-4" />
+
+          {/* Actions */}
+          <div className="flex items-center gap-4 border-t pt-3">
+            <button
+              onClick={handleLike}
+              disabled={isOwner || !user}
+              className={`like-btn ${animating ? 'heart-animate' : ''}`}
+            >
+              <Heart
+                className={`h-6 w-6 transition-all ${
+                  isLiked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
+                }`}
+                strokeWidth={isLiked ? 2.5 : 1.5}
+              />
             </button>
+            <button className="hover:text-primary transition-colors">
+              <MessageCircle className="h-6 w-6" strokeWidth={1.5} />
+            </button>
+          </div>
+
+          <span className="text-sm font-bold block">{cat.likes_count.toLocaleString('ru-RU')} отметок «Нравится»</span>
+
+          {cat.caption && (
+            <p className="text-sm">
+              <span className="font-bold mr-1.5">@{cat.username}</span>
+              {cat.caption}
+            </p>
           )}
+
+          <p className="text-xs text-muted-foreground">🏆 {cat.user_points} баллов</p>
         </div>
-
-        <div className="flex items-center gap-4">
-          <button
-            onClick={handleLike}
-            disabled={isOwner || !user}
-            className={`like-btn ${animating ? 'heart-animate' : ''}`}
-          >
-            <Heart
-              className={`h-5 w-5 ${isLiked ? 'fill-[#e00] text-[#e00]' : 'text-foreground'}`}
-              strokeWidth={isLiked ? 2 : 1.5}
-            />
-          </button>
-          <button className="hover:text-muted-foreground transition-colors">
-            <MessageCircle className="h-5 w-5" strokeWidth={1.5} />
-          </button>
-        </div>
-
-        <span className="text-sm font-semibold block">{cat.likes_count.toLocaleString()} likes</span>
-
-        {cat.caption && (
-          <p className="text-sm">
-            <span className="font-semibold mr-1.5">@{cat.username}</span>
-            {cat.caption}
-          </p>
-        )}
-
-        <p className="text-xs text-muted-foreground">
-          {new Date(cat.created_at).toLocaleDateString('en-US', {
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-          })}
-        </p>
-
-        <p className="text-xs text-muted-foreground">🏆 {cat.user_points} points</p>
       </div>
     </div>
   );