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

client/src/components/CatModal.tsx

@@ -24,18 +24,9 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   const [likeCount, setLikeCount] = useState(0);
   const [animating, setAnimating] = useState(false);
 
-  useEffect(() => {
-    if (likeData) setLiked(likeData.liked);
-  }, [likeData]);
-
-  useEffect(() => {
-    if (data?.cat) setLikeCount(data.cat.likes_count);
-  }, [data]);
-
-  useEffect(() => {
-    document.body.style.overflow = 'hidden';
-    return () => { document.body.style.overflow = ''; };
-  }, []);
+  useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]);
+  useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]);
+  useEffect(() => { document.body.style.overflow = 'hidden'; return () => { document.body.style.overflow = ''; }; }, []);
 
   const cat = data?.cat;
   const isOwner = cat && user && cat.user_id === user.id;
@@ -43,32 +34,23 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   const handleLike = async () => {
     if (isOwner || !user || !cat) return;
     setAnimating(true);
-    setTimeout(() => setAnimating(false), 400);
+    setTimeout(() => setAnimating(false), 450);
 
     if (liked) {
       setLiked(false);
       setLikeCount((c) => c - 1);
       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);
-        setLikeCount((c) => c + 1);
-      }
+      } catch { setLiked(true); setLikeCount((c) => c + 1); }
     } else {
       setLiked(true);
       setLikeCount((c) => c + 1);
-      toast('Liked', 'like');
-      try {
-        await likeMutation.mutateAsync();
-        refetchLike();
-      } catch {
-        setLiked(false);
-        setLikeCount((c) => c - 1);
-      }
+      toast('Нравится ♥', 'like');
+      try { await likeMutation.mutateAsync(); refetchLike(); }
+      catch { setLiked(false); setLikeCount((c) => c - 1); }
     }
   };
 
@@ -76,80 +58,70 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
     if (!isOwner || !cat) return;
     try {
       await deleteMutation.mutateAsync(cat.id);
-      toast('Deleted', 'success');
+      toast('Удалено', 'success');
       onClose();
-    } catch {
-      toast('Failed to delete', 'error');
-    }
+    } catch { toast('Ошибка удаления', 'error'); }
   };
 
   if (isLoading || !cat) {
     return (
-      <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40" onClick={onClose}>
-        <div className="h-5 w-5 animate-spin rounded-full border-2 border-foreground/30 border-t-foreground" />
+      <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm" onClick={onClose}>
+        <div className="h-6 w-6 animate-spin rounded-full border-2 border-white/40 border-t-white" />
       </div>
     );
   }
 
   return (
-    <div
-      className="fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-4"
-      onClick={onClose}
-    >
+    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4" onClick={onClose}>
       <div
-        className="animate-scale-in flex max-h-[85vh] w-full max-w-3xl bg-white"
+        className="animate-scale-in flex max-h-[85vh] w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden"
         onClick={(e) => e.stopPropagation()}
       >
         {/* Image */}
         <div className="flex-1 bg-muted flex items-center justify-center min-h-[400px]">
-          <img
-            src={cat.image_url}
-            alt={cat.caption || 'Cat photo'}
-            className="max-h-[85vh] w-full object-contain"
-          />
+          <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="max-h-[85vh] w-full object-contain" />
         </div>
 
-        {/* Details panel */}
-        <div className="flex w-[320px] flex-col border-l">
-          <div className="flex items-center justify-between px-4 py-3 border-b">
+        {/* Sidebar */}
+        <div className="flex w-[340px] flex-col border-l">
+          <div className="flex items-center justify-between px-5 py-3.5 border-b">
             <div className="flex items-center gap-2.5">
-              <Avatar className="h-7 w-7">
-                <AvatarFallback className="text-[10px] bg-foreground text-background">
+              <Avatar className="h-8 w-8 ring-2 ring-offset-1 ring-orange-200">
+                <AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
                   {cat.username.charAt(0).toUpperCase()}
                 </AvatarFallback>
               </Avatar>
-              <span className="text-sm font-medium">@{cat.username}</span>
+              <span className="text-sm font-semibold">@{cat.username}</span>
             </div>
             <div className="flex items-center gap-1">
               {isOwner && (
-                <button onClick={handleDelete} className="p-1 text-muted-foreground hover:text-destructive transition-colors">
+                <button onClick={handleDelete} className="p-1.5 rounded-lg text-muted-foreground hover:text-destructive hover:bg-red-50 transition-colors">
                   <Trash2 className="h-4 w-4" />
                 </button>
               )}
-              <button onClick={onClose} className="p-1 text-muted-foreground hover:text-foreground transition-colors">
-                <X className="h-4 w-4" />
+              <button onClick={onClose} className="p-1.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors">
+                <X className="h-4.5 w-4.5" />
               </button>
             </div>
           </div>
 
-          {/* Caption */}
-          <div className="flex-1 overflow-y-auto px-4 py-3">
+          {/* Body */}
+          <div className="flex-1 overflow-y-auto px-5 py-4">
             <div className="flex items-start gap-2.5">
-              <Avatar className="h-7 w-7 shrink-0">
-                <AvatarFallback className="text-[10px] bg-foreground text-background">
+              <Avatar className="h-8 w-8 shrink-0 ring-2 ring-offset-1 ring-orange-200">
+                <AvatarFallback className="text-xs bg-gradient-to-br from-orange-400 to-rose-500 text-white">
                   {cat.username.charAt(0).toUpperCase()}
                 </AvatarFallback>
               </Avatar>
               <div>
                 <p className="text-sm">
                   <span className="font-semibold mr-1.5">@{cat.username}</span>
-                  {cat.caption || 'No caption'}
+                  {cat.caption || 'Без подписи'}
                 </p>
                 <p className="mt-2 text-xs text-muted-foreground">
-                  {new Date(cat.created_at).toLocaleDateString('en-US', {
-                    year: 'numeric',
-                    month: 'long',
-                    day: 'numeric',
+                  {new Date(cat.created_at).toLocaleDateString('ru-RU', {
+                    year: 'numeric', month: 'long', day: 'numeric',
+                    hour: '2-digit', minute: '2-digit',
                   })}
                 </p>
               </div>
@@ -157,7 +129,7 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
           </div>
 
           {/* Actions */}
-          <div className="border-t px-4 py-3">
+          <div className="border-t px-5 py-3.5">
             <div className="flex items-center gap-4 mb-2">
               <button
                 onClick={handleLike}
@@ -165,17 +137,18 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
                 className={`like-btn ${animating ? 'heart-animate' : ''}`}
               >
                 <Heart
-                  className={`h-5 w-5 ${
-                    liked ? 'fill-[#e00] text-[#e00]' : 'text-foreground'
+                  className={`h-6 w-6 transition-all ${
+                    liked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
                   }`}
-                  strokeWidth={liked ? 2 : 1.5}
+                  strokeWidth={liked ? 2.5 : 1.5}
                 />
               </button>
-              <button className="hover:text-muted-foreground transition-colors">
-                <MessageCircle className="h-5 w-5" strokeWidth={1.5} />
+              <button className="hover:text-primary transition-colors">
+                <MessageCircle className="h-6 w-6" strokeWidth={1.5} />
               </button>
             </div>
-            <span className="text-sm font-semibold">{likeCount.toLocaleString()} likes</span>
+            <span className="text-sm font-bold">{likeCount.toLocaleString('ru-RU')} отметок «Нравится»</span>
+            <p className="text-xs text-muted-foreground mt-1">🏆 {cat.user_points} баллов</p>
           </div>
         </div>
       </div>