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

client/src/pages/CatPage.tsx

@@ -7,7 +7,7 @@ import { useToast } from '@/components/Toast';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
 import { Skeleton } from '@/components/ui/skeleton';
-import { Heart, ArrowLeft, Trash2, MessageCircle } from 'lucide-react';
+import { ArrowLeft } from 'lucide-react';
 
 export default function CatPage() {
   const { id } = useParams<{ id: string }>();
@@ -23,30 +23,24 @@ export default function CatPage() {
   const deleteMutation = useDeleteCat();
 
   const [liked, setLiked] = useState(false);
-  const [animating, setAnimating] = useState(false);
-
   const cat = data?.cat;
   const isOwner = cat && user && cat.user_id === user.id;
   const isLiked = likeData?.liked ?? false;
 
   useEffect(() => { setLiked(isLiked); }, [isLiked]);
 
-  const handleLike = async () => {
+  const toggleLike = async () => {
     if (isOwner || !user || !cat) return;
-    setAnimating(true);
-    setTimeout(() => setAnimating(false), 450);
-
     if (isLiked) {
       setLiked(false);
       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); }
     } else {
       setLiked(true);
-      toast('Нравится ♥', 'like');
+      toast('Нравится', 'like');
       try { await likeMutation.mutateAsync(); refetchLike(); }
       catch { setLiked(false); }
     }
@@ -56,19 +50,19 @@ export default function CatPage() {
     if (!isOwner || !cat) return;
     try {
       await deleteMutation.mutateAsync(cat.id);
-      toast('Удалено', 'success');
+      toast('Удалено');
       navigate('/feed');
     } 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 rounded-xl" />
+      <div className="mx-auto max-w-[580px] px-4 py-8">
+        <Skeleton className="mb-4 h-5 w-20 rounded-full" />
         <Skeleton className="aspect-[4/3] w-full rounded-2xl" />
         <div className="mt-4 space-y-2">
-          <Skeleton className="h-5 w-32 rounded-xl" />
-          <Skeleton className="h-4 w-48 rounded-xl" />
+          <Skeleton className="h-5 w-32 rounded-full" />
+          <Skeleton className="h-4 w-48 rounded-full" />
         </div>
       </div>
     );
@@ -77,82 +71,76 @@ export default function CatPage() {
   if (isError || !cat) {
     return (
       <div className="flex flex-col items-center justify-center py-20">
-        <p className="text-muted-foreground mb-4">Кот не найден</p>
-        <Button variant="outline" onClick={() => navigate('/feed')}>Перейти в ленту</Button>
+        <p className="text-[15px] text-[#8e8e93] mb-4">Кот не найден</p>
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
       </div>
     );
   }
 
   return (
-    <div className="mx-auto max-w-2xl px-4 py-8 animate-fade-in">
+    <div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in">
       <button
         onClick={() => navigate(-1)}
-        className="mb-6 flex items-center gap-1.5 text-sm text-muted-foreground hover:text-foreground transition-colors"
+        className="mb-4 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors"
       >
-        <ArrowLeft className="h-4 w-4" />
+        <ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
         Назад
       </button>
 
-      <div className="bg-white rounded-2xl border border-border/60 shadow-sm overflow-hidden">
-        <div className="bg-muted/30">
+      <div className="tg-bubble border shadow-[0_1px_2px_rgba(0,0,0,0.04)]">
+        <div className="bg-[#f0f0f0]">
           <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="w-full max-h-[60vh] object-contain mx-auto" />
         </div>
 
-        <div className="p-5 space-y-3">
+        <div className="p-4 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">
+              <Avatar className="h-9 w-9">
+                <AvatarFallback className="text-sm bg-[#2aabee] text-white font-semibold">
                   {cat.username.charAt(0).toUpperCase()}
                 </AvatarFallback>
               </Avatar>
               <div>
-                <span className="text-sm font-bold">@{cat.username}</span>
-                <p className="text-xs text-muted-foreground">
+                <span className="text-[15px] font-semibold">@{cat.username}</span>
+                <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',
+                    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 onClick={handleDelete} className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1">
+                Удалить
               </button>
             )}
           </div>
 
-          {/* 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>
-
+          {/* Caption */}
           {cat.caption && (
-            <p className="text-sm">
-              <span className="font-bold mr-1.5">@{cat.username}</span>
+            <p className="text-[15px] leading-[1.3]">
+              <span className="font-semibold mr-1.5">@{cat.username}</span>
               {cat.caption}
             </p>
           )}
 
-          <p className="text-xs text-muted-foreground">🏆 {cat.user_points} баллов</p>
+          {/* Actions */}
+          <div className="flex items-center gap-3 pt-1">
+            <button
+              onClick={toggleLike}
+              disabled={isOwner || !user}
+              className={`flex items-center gap-1.5 text-[15px] font-medium transition-colors ${
+                isLiked ? 'text-[#ff3b30]' : 'text-[#8e8e93] hover:text-black'
+              }`}
+            >
+              <span className={`text-xl leading-none ${isLiked ? 'heart-animate' : ''}`}>
+                {isLiked ? '❤️' : '🤍'}
+              </span>
+              {cat.likes_count > 0 && <span>{cat.likes_count}</span>}
+            </button>
+            <span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points} баллов</span>
+          </div>
         </div>
       </div>
     </div>