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

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 { X } from 'lucide-react';
+import { X, Heart, Trash2 } from 'lucide-react';
 
 interface CatModalProps {
   catId: number;
@@ -22,10 +22,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
 
   const [liked, setLiked] = useState(false);
   const [likeCount, setLikeCount] = useState(0);
+  const [imageLoaded, setImageLoaded] = 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(() => {
+    document.body.style.overflow = 'hidden';
+    return () => { document.body.style.overflow = ''; };
+  }, []);
 
   const cat = data?.cat;
   const isOwner = cat && user && cat.user_id === user.id;
@@ -37,13 +41,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
       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('Нравится ❤️');
       try { await likeMutation.mutateAsync(); refetchLike(); }
       catch { setLiked(false); setLikeCount((c) => c - 1); }
     }
@@ -53,97 +58,135 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
     if (!isOwner || !cat) return;
     try {
       await deleteMutation.mutateAsync(cat.id);
-      toast('Удалено', 'success');
+      toast('Удалено');
       onClose();
     } catch { toast('Ошибка удаления', 'error'); }
   };
 
+  // Close on Escape
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
+    window.addEventListener('keydown', handler);
+    return () => window.removeEventListener('keydown', handler);
+  }, [onClose]);
+
   if (isLoading || !cat) {
     return (
-      <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 className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-center justify-center" onClick={onClose}>
+        <div className="flex items-center gap-3 px-6 py-4 bg-white rounded-full shadow-lg animate-scale-in">
+          <div className="h-5 w-5 rounded-full border-2 border-[var(--primary)]/30 border-t-[var(--primary)] animate-spin" />
+          <span className="text-[14px] font-medium text-[var(--foreground-secondary)]">Загрузка...</span>
         </div>
       </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="fixed inset-0 z-[60] bg-black/60 flex items-end sm:items-center justify-center" onClick={onClose}>
+    <div
+      className="fixed inset-0 z-[60] bg-black/50 backdrop-blur-sm flex items-end sm:items-center justify-center"
+      onClick={onClose}
+    >
       <div
-        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"
+        className="w-full sm:max-w-xl bg-white sm:rounded-xl sm:mx-4 max-h-[92vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
         onClick={(e) => e.stopPropagation()}
       >
         {/* 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">
+        <div className="flex items-center justify-between px-5 py-4 border-b shrink-0">
+          <div className="flex items-center gap-3">
+            <Avatar className="h-9 w-9">
+              <AvatarFallback className="text-sm avatar-initials">
                 {cat.username.charAt(0).toUpperCase()}
               </AvatarFallback>
             </Avatar>
-            <span className="text-[15px] font-semibold">@{cat.username}</span>
+            <div>
+              <span className="text-[15px] font-semibold">@{cat.username}</span>
+              <p className="text-[11px] text-[var(--foreground-tertiary)]">{dateStr}</p>
+            </div>
           </div>
-          <div className="flex items-center gap-2">
+          <div className="flex items-center gap-1">
             {isOwner && (
               <button
                 onClick={handleDelete}
-                className="text-[13px] text-[#8e8e93] hover:text-[#ff3b30] transition-colors px-2 py-1"
+                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>
             )}
-            <button onClick={onClose} className="text-[#8e8e93] hover:text-black transition-colors p-1">
+            <button
+              onClick={onClose}
+              className="btn-icon h-9 w-9 text-[var(--foreground-secondary)] hover:text-[var(--foreground)] hover:bg-[var(--secondary)]"
+            >
               <X className="h-5 w-5" strokeWidth={1.5} />
             </button>
           </div>
         </div>
 
         {/* 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 className="bg-[var(--secondary)] flex items-center justify-center shrink-0 relative">
+          {!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-[55vh] object-contain transition-opacity duration-300 ${imageLoaded ? 'opacity-100' : 'opacity-0'}`}
+            onLoad={() => setImageLoaded(true)}
+          />
         </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">
+        <div className="flex-1 overflow-y-auto px-5 py-4 space-y-3">
+          <div className="flex items-start gap-3">
+            <Avatar className="h-8 w-8 shrink-0 mt-0.5">
+              <AvatarFallback className="text-[10px] avatar-initials">
                 {cat.username.charAt(0).toUpperCase()}
               </AvatarFallback>
             </Avatar>
             <div>
-              <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>
             </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-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 className="border-t px-5 py-4 shrink-0">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-5">
+              <button
+                onClick={toggleLike}
+                disabled={isOwner || !user}
+                className={`btn-icon flex items-center gap-1.5 text-[15px] font-medium ${
+                  isOwner
+                    ? 'text-[var(--foreground-tertiary)] cursor-not-allowed'
+                    : liked
+                      ? 'text-[var(--danger)]'
+                      : 'text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
+                }`}
+              >
+                <Heart
+                  className={`h-6 w-6 transition-all ${liked ? 'fill-[var(--danger)] stroke-[var(--danger)] animate-heart' : 'stroke-[1.5]'}`}
+                />
+                {likeCount > 0 && <span className="tabular-nums">{likeCount}</span>}
+              </button>
+            </div>
+            <span className="flex items-center gap-1.5 text-[13px] text-[var(--foreground-secondary)]">
+              <span>🏆</span>
+              <span className="font-semibold">{cat.user_points}</span>
+              <span>баллов</span>
+            </span>
           </div>
         </div>
       </div>
     </div>
   );
-}
+}