UI: Telegram-стиль, синий акцент, bubble-карточки

client/src/components/CatModal.tsx

@@ -4,7 +4,7 @@ import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
 import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/components/Toast';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { Heart, MessageCircle, X, Trash2 } from 'lucide-react';
+import { X } from 'lucide-react';
 
 interface CatModalProps {
   catId: number;
@@ -22,7 +22,6 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
 
   const [liked, setLiked] = useState(false);
   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]);
@@ -31,24 +30,20 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   const cat = data?.cat;
   const isOwner = cat && user && cat.user_id === user.id;
 
-  const handleLike = async () => {
+  const toggleLike = async () => {
     if (isOwner || !user || !cat) return;
-    setAnimating(true);
-    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)
-          updateUser({ ...user, points: res.ownerPoints });
+        if (res.ownerPoints !== undefined && cat.user_id === user.id) updateUser({ ...user, points: res.ownerPoints });
         refetchLike();
       } catch { setLiked(true); setLikeCount((c) => c + 1); }
     } else {
       setLiked(true);
       setLikeCount((c) => c + 1);
-      toast('Нравится ♥', 'like');
+      toast('Нравится', 'like');
       try { await likeMutation.mutateAsync(); refetchLike(); }
       catch { setLiked(false); setLikeCount((c) => c - 1); }
     }
@@ -65,90 +60,87 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
 
   if (isLoading || !cat) {
     return (
-      <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 className="fixed inset-0 z-[60] bg-black/60" onClick={onClose}>
+        <div className="flex h-full items-center justify-center">
+          <div className="h-5 w-5 animate-spin rounded-full border-2 border-white/40 border-t-white" />
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 backdrop-blur-sm p-4" onClick={onClose}>
+    <div className="fixed inset-0 z-[60] bg-black/60 flex items-end sm:items-center justify-center" onClick={onClose}>
       <div
-        className="animate-scale-in flex max-h-[85vh] w-full max-w-3xl bg-white rounded-2xl shadow-2xl overflow-hidden"
+        className="animate-scale-in w-full sm:max-w-lg bg-white sm:rounded-2xl sm:mx-4 max-h-[92vh] flex flex-col 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 || 'Фото кота'} className="max-h-[85vh] w-full object-contain" />
+        {/* Header */}
+        <div className="flex items-center justify-between px-4 py-3 border-b shrink-0">
+          <div className="flex items-center gap-2.5">
+            <Avatar className="h-8 w-8">
+              <AvatarFallback className="text-xs bg-[#2aabee] text-white">
+                {cat.username.charAt(0).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <span className="text-[15px] font-semibold">@{cat.username}</span>
+          </div>
+          <div className="flex items-center gap-2">
+            {isOwner && (
+              <button
+                onClick={handleDelete}
+                className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1"
+              >
+                Удалить
+              </button>
+            )}
+            <button onClick={onClose} className="text-[#8e8e93] hover:text-black transition-colors p-1">
+              <X className="h-5 w-5" strokeWidth={1.5} />
+            </button>
+          </div>
         </div>
 
-        {/* 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-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-semibold">@{cat.username}</span>
-            </div>
-            <div className="flex items-center gap-1">
-              {isOwner && (
-                <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.5 rounded-lg text-muted-foreground hover:text-foreground hover:bg-secondary transition-colors">
-                <X className="h-4.5 w-4.5" />
-              </button>
+        {/* Image */}
+        <div className="bg-[#f0f0f0] flex items-center justify-center shrink-0">
+          <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="w-full max-h-[50vh] object-contain" />
+        </div>
+
+        {/* Info */}
+        <div className="flex-1 overflow-y-auto px-4 py-3 space-y-2">
+          <div className="flex items-start gap-2.5">
+            <Avatar className="h-7 w-7 shrink-0">
+              <AvatarFallback className="text-[10px] bg-[#2aabee] text-white">
+                {cat.username.charAt(0).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <div>
+              <p className="text-[15px] leading-[1.3]">
+                <span className="font-semibold mr-1.5">@{cat.username}</span>
+                {cat.caption || 'Без подписи'}
+              </p>
             </div>
           </div>
 
-          {/* Body */}
-          <div className="flex-1 overflow-y-auto px-5 py-4">
-            <div className="flex items-start gap-2.5">
-              <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 || 'Без подписи'}
-                </p>
-                <p className="mt-2 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>
-          </div>
+          <p className="text-[12px] text-[#8e8e93]">
+            {new Date(cat.created_at).toLocaleDateString('ru-RU', {
+              year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
+            })}
+          </p>
+        </div>
 
-          {/* Actions */}
-          <div className="border-t px-5 py-3.5">
-            <div className="flex items-center gap-4 mb-2">
-              <button
-                onClick={handleLike}
-                disabled={isOwner || !user}
-                className={`like-btn ${animating ? 'heart-animate' : ''}`}
-              >
-                <Heart
-                  className={`h-6 w-6 transition-all ${
-                    liked ? 'fill-rose-500 text-rose-500' : 'text-foreground hover:text-rose-400'
-                  }`}
-                  strokeWidth={liked ? 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">{likeCount.toLocaleString('ru-RU')} отметок «Нравится»</span>
-            <p className="text-xs text-muted-foreground mt-1">🏆 {cat.user_points} баллов</p>
+        {/* Actions */}
+        <div className="border-t px-4 py-3 shrink-0">
+          <div className="flex items-center gap-4">
+            <button
+              onClick={toggleLike}
+              disabled={isOwner || !user}
+              className={`flex items-center gap-1.5 text-[15px] font-medium transition-colors ${
+                liked ? 'text-[#ff3b30]' : 'text-[#8e8e93] hover:text-black'
+              }`}
+            >
+              <span className="text-xl leading-none">{liked ? '❤️' : '🤍'}</span>
+              {likeCount > 0 && <span>{likeCount}</span>}
+            </button>
+            <span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points} баллов</span>
           </div>
         </div>
       </div>