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

client/src/pages/ProfilePage.tsx

@@ -6,13 +6,14 @@ import CatModal from '@/components/CatModal';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { ArrowLeft, Plus, Heart } from 'lucide-react';
+import { ArrowLeft, Plus, LogOut, Heart } from 'lucide-react';
 
 export default function ProfilePage() {
   const { id: paramId } = useParams<{ id?: string }>();
   const navigate = useNavigate();
-  const { user: me } = useAuth();
+  const { user: me, logout } = useAuth();
   const [modalCatId, setModalCatId] = useState<number | null>(null);
+  const [tab, setTab] = useState<'photos' | 'likes'>('photos');
 
   const profileUserId = paramId ? parseInt(paramId) : me?.id;
   const isMe = !paramId || (me && profileUserId === me.id);
@@ -28,15 +29,17 @@ export default function ProfilePage() {
   if (isLoading) {
     return (
       <div className="mx-auto max-w-[660px] px-4 py-8">
-        <div className="flex items-center gap-4 mb-8">
-          <Skeleton className="h-16 w-16 rounded-full" />
-          <div className="space-y-2">
-            <Skeleton className="h-5 w-32 rounded" />
-            <Skeleton className="h-4 w-40 rounded" />
+        <div className="flex items-center gap-5 mb-10">
+          <Skeleton className="h-20 w-20 rounded-full" />
+          <div className="space-y-2.5 flex-1">
+            <Skeleton className="h-6 w-36 rounded-full" />
+            <Skeleton className="h-4 w-48 rounded-full" />
           </div>
         </div>
-        <div className="grid grid-cols-3 gap-1">
-          {Array.from({ length: 6 }).map((_, i) => (<Skeleton key={i} className="aspect-square rounded-lg" />))}
+        <div className="grid grid-cols-3 gap-2">
+          {Array.from({ length: 6 }).map((_, i) => (
+            <Skeleton key={i} className="aspect-square rounded-xl" />
+          ))}
         </div>
       </div>
     );
@@ -44,9 +47,14 @@ export default function ProfilePage() {
 
   if (!profileUser && !isMe) {
     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>
+        <Button variant="outline" onClick={() => navigate('/feed')} className="rounded-full text-[13px] mt-2">
+          Вернуться в ленту
+        </Button>
       </div>
     );
   }
@@ -56,91 +64,146 @@ export default function ProfilePage() {
   const totalLikes = cats.reduce((sum, c) => sum + c.likes_count, 0);
 
   return (
-    <div className="mx-auto max-w-[660px] px-4 py-8">
+    <div className="mx-auto max-w-[660px] px-4 py-6">
       {!isMe && (
-        <button onClick={() => navigate(-1)} className="mb-5 flex items-center gap-1.5 text-[14px] text-[#8e8e93] hover:text-black transition-colors">
+        <button
+          onClick={() => navigate(-1)}
+          className="mb-4 flex items-center gap-1.5 text-[14px] text-[var(--foreground-secondary)] hover:text-[var(--foreground)] transition-colors"
+        >
           <ArrowLeft className="h-4 w-4" strokeWidth={1.5} />
           Назад
         </button>
       )}
 
       {/* Profile header */}
-      <div className="flex items-center gap-5 mb-8">
-        <Avatar className="h-16 w-16 shrink-0">
-          <AvatarFallback className="text-xl font-semibold bg-[#2aabee] text-white">
+      <div className="flex items-center gap-6 mb-8">
+        <Avatar className="h-20 w-20 shrink-0 ring-2 ring-[var(--primary)]/20 ring-offset-2">
+          <AvatarFallback className="text-[26px] font-bold avatar-initials">
             {initials}
           </AvatarFallback>
         </Avatar>
         <div className="flex-1 min-w-0">
-          <div className="flex items-center gap-3 mb-1.5">
-            <h1 className="text-[18px] font-semibold">@{profileUser?.username}</h1>
+          <div className="flex items-center gap-3 mb-2">
+            <h1 className="text-[20px] font-bold truncate">@{profileUser?.username}</h1>
             {isMe && (
-              <Button variant="outline" size="sm" className="rounded-full text-[12px] h-7 px-3">
-                Редактировать
-              </Button>
+              <button
+                onClick={logout}
+                className="btn-icon h-8 w-8 text-[var(--foreground-secondary)] hover:text-[var(--danger)] hover:bg-[var(--danger-light)] ml-auto"
+                title="Выйти"
+              >
+                <LogOut className="h-4 w-4" strokeWidth={1.5} />
+              </button>
             )}
           </div>
-          <div className="flex items-center gap-4 text-[14px]">
-            <div>
-              <span className="font-semibold">{cats.length}</span>{' '}
-              <span className="text-[#8e8e93]">публикаций</span>
+
+          <div className="flex items-center gap-6 text-[14px] mb-3">
+            <div className="text-center">
+              <p className="font-bold text-[16px]">{cats.length}</p>
+              <p className="text-[12px] text-[var(--foreground-secondary)]">публикаций</p>
             </div>
-            <div>
-              <span className="font-semibold">{totalLikes}</span>{' '}
-              <span className="text-[#8e8e93]">лайков</span>
+            <div className="text-center">
+              <p className="font-bold text-[16px]">{totalLikes}</p>
+              <p className="text-[12px] text-[var(--foreground-secondary)]">лайков</p>
             </div>
-            <div>
-              <span className="font-semibold">🏆{profileUser?.points ?? 0}</span>{' '}
-              <span className="text-[#8e8e93]">баллов</span>
+            <div className="text-center">
+              <p className="font-bold text-[16px]">🏆{profileUser?.points ?? 0}</p>
+              <p className="text-[12px] text-[var(--foreground-secondary)]">баллов</p>
             </div>
           </div>
+
           {isMe && (
-            <div className="mt-3">
-              <Link to="/upload">
-                <Button size="sm" className="rounded-full text-[13px] h-8 bg-[#2aabee] hover:bg-[#1d9bd9] gap-1">
-                  <Plus className="h-3.5 w-3.5" strokeWidth={2} />
-                  Новая публикация
-                </Button>
-              </Link>
-            </div>
+            <Link to="/upload">
+              <Button size="sm" className="rounded-full text-[13px] h-8 bg-[var(--primary)] hover:bg-[var(--primary-hover)] gap-1.5">
+                <Plus className="h-3.5 w-3.5" strokeWidth={2} />
+                Новая публикация
+              </Button>
+            </Link>
           )}
         </div>
       </div>
 
-      {/* Grid */}
-      {cats.length === 0 ? (
-        <div className="flex flex-col items-center justify-center py-16 text-center">
-          <p className="text-[15px] font-medium mb-1">Пока нет котов</p>
-          <p className="text-[13px] text-[#8e8e93] mb-4">
-            {isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
-          </p>
-          {isMe && (
-            <Link to="/upload">
-              <Button size="sm" className="rounded-full text-[13px] bg-[#2aabee] hover:bg-[#1d9bd9]">Загрузить кота</Button>
-            </Link>
-          )}
-        </div>
-      ) : (
-        <div className="grid grid-cols-3 gap-1">
-          {cats.map((cat) => (
-            <button
-              key={cat.id}
-              onClick={() => setModalCatId(cat.id)}
-              className="group relative aspect-square overflow-hidden bg-[#f0f0f0]"
-            >
-              <img src={cat.image_url} alt={cat.caption || 'Фото кота'} className="h-full w-full object-cover transition-transform group-hover:scale-105" loading="lazy" />
-              <div className="absolute inset-0 flex items-center justify-center bg-black/10 opacity-0 group-hover:opacity-100 transition-opacity">
-                <div className="flex items-center gap-1 text-white text-[13px] font-semibold drop-shadow-lg">
-                  <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
-                  <span>{cat.likes_count}</span>
+      {/* Tabs */}
+      <div className="flex gap-1 mb-5 border-b border-[var(--border)]">
+        <button
+          onClick={() => setTab('photos')}
+          className={`px-5 py-3 text-[14px] font-medium border-b-2 transition-all ${
+            tab === 'photos'
+              ? 'border-[var(--primary)] text-[var(--primary)]'
+              : 'border-transparent text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
+          }`}
+        >
+          Фото
+        </button>
+        <button
+          onClick={() => setTab('likes')}
+          className={`px-5 py-3 text-[14px] font-medium border-b-2 transition-all ${
+            tab === 'likes'
+              ? 'border-[var(--primary)] text-[var(--primary)]'
+              : 'border-transparent text-[var(--foreground-secondary)] hover:text-[var(--foreground)]'
+          }`}
+        >
+          Избранное
+        </button>
+      </div>
+
+      {/* Content */}
+      {tab === 'photos' && (
+        cats.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in">
+            <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--secondary)]">
+              <span className="text-xl">📸</span>
+            </div>
+            <p className="text-[15px] font-medium mb-1">Пока нет котов</p>
+            <p className="text-[13px] text-[var(--foreground-secondary)] mb-5 max-w-xs">
+              {isMe ? 'Поделитесь первым фото кота' : 'У пользователя пока нет котов'}
+            </p>
+            {isMe && (
+              <Link to="/upload">
+                <Button size="sm" className="rounded-full text-[13px] bg-[var(--primary)] hover:bg-[var(--primary-hover)]">
+                  Загрузить кота
+                </Button>
+              </Link>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-3 gap-2">
+            {cats.map((cat) => (
+              <button
+                key={cat.id}
+                onClick={() => setModalCatId(cat.id)}
+                className="group relative aspect-square overflow-hidden bg-[var(--secondary)] rounded-xl"
+              >
+                <img
+                  src={cat.image_url}
+                  alt={cat.caption || 'Фото кота'}
+                  className="h-full w-full object-cover transition-all duration-300 group-hover:scale-105"
+                  loading="lazy"
+                />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex items-end p-3">
+                  <div className="flex items-center gap-1.5 text-white text-[13px] font-semibold">
+                    <Heart className="h-4 w-4 fill-white" strokeWidth={2} />
+                    <span>{cat.likes_count}</span>
+                  </div>
                 </div>
-              </div>
-            </button>
-          ))}
+              </button>
+            ))}
+          </div>
+        )
+      )}
+
+      {tab === 'likes' && (
+        <div className="flex flex-col items-center justify-center py-16 text-center animate-fade-in">
+          <div className="mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[var(--primary-light)]">
+            <Heart className="h-6 w-6 text-[var(--primary)]" strokeWidth={1.5} />
+          </div>
+          <p className="text-[15px] font-medium mb-1">Скоро</p>
+          <p className="text-[13px] text-[var(--foreground-secondary)]">
+            Здесь появятся понравившиеся коты
+          </p>
         </div>
       )}
 
       {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
     </div>
   );
-}
+}