UI: полноценный красивый интерфейс, iOS-style дизайн, все страницы

client/src/pages/CatPage.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { useParams, useNavigate } from 'react-router-dom';
+import { useParams, useNavigate, Link } from 'react-router-dom';
 import { useCat, useDeleteCat } from '@/hooks/useCats';
 import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
 import { useAuth } from '@/hooks/useAuth';
@@ -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 { ArrowLeft } from 'lucide-react';
+import { ArrowLeft, Heart, Trash2 } from 'lucide-react';
 
 export default function CatPage() {
   const { id } = useParams<{ id: string }>();
@@ -23,6 +23,7 @@ export default function CatPage() {
   const deleteMutation = useDeleteCat();
 
   const [liked, setLiked] = useState(false);
+  const [imageLoaded, setImageLoaded] = useState(false);
   const cat = data?.cat;
   const isOwner = cat && user && cat.user_id === user.id;
   const isLiked = likeData?.liked ?? false;
@@ -35,12 +36,13 @@ export default function CatPage() {
       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('Нравится ❤️');
       try { await likeMutation.mutateAsync(); refetchLike(); }
       catch { setLiked(false); }
     }
@@ -60,9 +62,10 @@ export default function CatPage() {
       <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">
+        <div className="mt-5 space-y-3">
           <Skeleton className="h-5 w-32 rounded-full" />
           <Skeleton className="h-4 w-48 rounded-full" />
+          <Skeleton className="h-4 w-24 rounded-full" />
         </div>
       </div>
     );
@@ -70,79 +73,132 @@ export default function CatPage() {
 
   if (isError || !cat) {
     return (
-      <div className="flex flex-col items-center justify-center py-20">
-        <p className="text-[15px] text-[#8e8e93] mb-4">Кот не найден</p>
-        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px]">Перейти в ленту</Button>
+      <div className="flex flex-col items-center justify-center py-24 animate-fade-in">
+        <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--secondary)]">
+          <span className="text-2xl">🔍</span>
+        </div>
+        <p className="text-[17px] font-semibold mb-1.5">Кот не найден</p>
+        <p className="text-[14px] text-[var(--foreground-secondary)] mb-6">
+          Возможно, публикация была удалена
+        </p>
+        <Button
+          variant="outline"
+          onClick={() => navigate('/feed')}
+          className="rounded-full text-[13px]"
+        >
+          Перейти в ленту
+        </Button>
       </div>
     );
   }
 
+  const dateStr = new Date(cat.created_at).toLocaleDateString('ru-RU', {
+    year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
+  });
+
   return (
     <div className="mx-auto max-w-[580px] px-4 py-6 animate-fade-in">
       <button
         onClick={() => navigate(-1)}
-        className="mb-4 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors"
+        className="mb-5 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors group"
       >
-        <ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
+        <ArrowLeft className="h-4 w-4 stroke-[1.5] group-hover:-translate-x-0.5 transition-transform" />
         Назад
       </button>
 
-      <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 className="card overflow-hidden">
+        {/* Image */}
+        <div className="bg-[var(--secondary)] relative img-loading">
+          {!imageLoaded && (
+            <div className="absolute inset-0 flex items-center justify-center">
+              <div className="h-8 w-8 rounded-full border-2 border-[var(--foreground-tertiary)]/30 border-t-[var(--primary)] animate-spin" />
+            </div>
+          )}
+          <img
+            src={cat.image_url}
+            alt={cat.caption || 'Фото кота'}
+            className={`w-full max-h-[60vh] object-contain mx-auto transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+            onLoad={() => setImageLoaded(true)}
+          />
         </div>
 
-        <div className="p-4 space-y-3">
+        <div className="p-5 space-y-4">
           {/* Header */}
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-3">
-              <Avatar className="h-9 w-9">
-                <AvatarFallback className="text-sm bg-[#2aabee] text-white font-semibold">
+          <div className="flex items-start justify-between">
+            <Link to={`/profile/${cat.user_id}`} className="flex items-center gap-3 group">
+              <Avatar className="h-10 w-10">
+                <AvatarFallback className="text-sm avatar-initials">
                   {cat.username.charAt(0).toUpperCase()}
                 </AvatarFallback>
               </Avatar>
               <div>
-                <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',
-                  })}
-                </p>
+                <span className="text-[15px] font-semibold group-hover:text-[var(--primary)] transition-colors">
+                  @{cat.username}
+                </span>
+                <p className="text-[12px] text-[var(--foreground-tertiary)]">{dateStr}</p>
               </div>
-            </div>
+            </Link>
             {isOwner && (
-              <button onClick={handleDelete} className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1">
-                Удалить
+              <button
+                onClick={handleDelete}
+                className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)]"
+                title="Удалить"
+              >
+                <Trash2 className="h-4 w-4" strokeWidth={1.5} />
               </button>
             )}
           </div>
 
           {/* Caption */}
           {cat.caption && (
-            <p className="text-[15px] leading-[1.3]">
+            <p className="text-[15px] leading-[1.4]">
               <span className="font-semibold mr-1.5">@{cat.username}</span>
               {cat.caption}
             </p>
           )}
 
+          {/* Divider */}
+          <div className="border-t border-[var(--border)]" />
+
           {/* Actions */}
-          <div className="flex items-center gap-3 pt-1">
+          <div className="flex items-center gap-6">
             <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'
+              className={`btn-icon flex items-center gap-2 text-[15px] font-medium ${
+                isOwner
+                  ? 'text-[var(--foreground-tertiary)] cursor-not-allowed'
+                  : liked
+                    ? 'text-[var(--danger)]'
+                    : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
               }`}
             >
-              <span className={`text-xl leading-none ${isLiked ? 'heart-animate' : ''}`}>
-                {isLiked ? '❤️' : '🤍'}
-              </span>
-              {cat.likes_count > 0 && <span>{cat.likes_count}</span>}
+              <Heart
+                className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
+              />
+              {cat.likes_count > 0 && <span className="tabular-nums">{cat.likes_count}</span>}
             </button>
-            <span className="text-[12px] text-[#8e8e93]">🏆 {cat.user_points} баллов</span>
+
+            <span className="flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)]">
+              <span>🏆</span>
+              <span className="font-semibold">{cat.user_points}</span>
+              <span className="text-[var(--foreground-tertiary)]">баллов</span>
+            </span>
+          </div>
+
+          {/* Back to feed button */}
+          <div className="pt-2">
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => navigate('/feed')}
+              className="rounded-full text-[12px] h-8"
+            >
+              ← В ленту
+            </Button>
           </div>
         </div>
       </div>
     </div>
   );
-}
+}