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>
   );
-}
+}

client/src/pages/FeedPage.tsx

@@ -1,26 +1,28 @@
 import { useState } from 'react';
 import { useCats } from '@/hooks/useCats';
-import { useAuth } from '@/hooks/useAuth';
 import CatCard from '@/components/CatCard';
 import FeedSidebar from '@/components/FeedSidebar';
 import CatModal from '@/components/CatModal';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
-import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { ChevronLeft, ChevronRight, RefreshCw } from 'lucide-react';
 
 function FeedSkeleton() {
   return (
-    <div className="space-y-2.5">
+    <div className="space-y-4">
       {Array.from({ length: 3 }).map((_, i) => (
-        <div key={i} className="tg-bubble border">
-          <div className="flex items-center gap-2.5 px-3.5 py-2.5">
-            <Skeleton className="h-8 w-8 rounded-full" />
-            <Skeleton className="h-4 w-24 rounded" />
+        <div key={i} className="card overflow-hidden">
+          <div className="flex items-center gap-3 px-4 py-3">
+            <Skeleton className="h-10 w-10 rounded-full" />
+            <div className="space-y-1.5">
+              <Skeleton className="h-4 w-28 rounded-full" />
+              <Skeleton className="h-3 w-16 rounded-full" />
+            </div>
           </div>
           <Skeleton className="aspect-[4/3] w-full" />
-          <div className="p-3 space-y-1.5">
-            <Skeleton className="h-4 w-32 rounded" />
-            <Skeleton className="h-4 w-20 rounded" />
+          <div className="p-4 space-y-2">
+            <Skeleton className="h-4 w-40 rounded-full" />
+            <Skeleton className="h-4 w-20 rounded-full" />
           </div>
         </div>
       ))}
@@ -31,27 +33,59 @@ function FeedSkeleton() {
 export default function FeedPage() {
   const [page, setPage] = useState(1);
   const [modalCatId, setModalCatId] = useState<number | null>(null);
-  const { data, isLoading, isError } = useCats(page);
+  const { data, isLoading, isError, refetch } = useCats(page);
 
   return (
     <div className="mx-auto max-w-[660px] px-4 py-4">
       <div className="flex gap-6">
-        {/* Feed */}
-        <div className="flex-1 min-w-0">
+        <main className="flex-1 min-w-0">
+          {/* Page indicator */}
+          {data && data.totalPages > 0 && (
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-[13px] font-semibold text-[var(--foreground-secondary)] uppercase tracking-wider">
+                Лента
+              </h2>
+              <span className="text-[12px] text-[var(--foreground-tertiary)] tabular-nums">
+                {data.total} публикаций
+              </span>
+            </div>
+          )}
+
           {isLoading && <FeedSkeleton />}
 
           {isError && (
-            <div className="flex flex-col items-center justify-center py-20 text-center">
-              <p className="text-[15px] text-[#8e8e93] mb-4">Не удалось загрузить котов</p>
-              <Button variant="outline" onClick={() => setPage(1)} className="rounded-full text-[13px]">Попробовать снова</Button>
+            <div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in">
+              <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--danger-light)]">
+                <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 max-w-xs">
+                Проверьте подключение к интернету и попробуйте снова
+              </p>
+              <Button
+                variant="outline"
+                onClick={() => refetch()}
+                className="rounded-full text-[13px] gap-1.5"
+              >
+                <RefreshCw className="h-3.5 w-3.5" strokeWidth={1.5} />
+                Попробовать снова
+              </Button>
             </div>
           )}
 
           {data && data.cats.length === 0 && (
-            <div className="flex flex-col items-center justify-center py-20 text-center">
-              <p className="text-[17px] font-semibold mb-1">Пока нет котов</p>
-              <p className="text-[14px] text-[#8e8e93] mb-5">Будьте первым, кто загрузит фото кота</p>
-              <Button onClick={() => window.location.href = '/upload'} className="rounded-full text-[13px] bg-[#2aabee] hover:bg-[#1d9bd9]">
+            <div className="flex flex-col items-center justify-center py-24 text-center animate-fade-in">
+              <div className="mb-5 flex h-16 w-16 items-center justify-center rounded-full bg-[var(--primary-light)]">
+                <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
+                onClick={() => window.location.href = '/upload'}
+                className="rounded-full text-[13px] bg-[var(--primary)] hover:bg-[var(--primary-hover)]"
+              >
                 Загрузить кота
               </Button>
             </div>
@@ -59,36 +93,63 @@ export default function FeedPage() {
 
           {data && data.cats.length > 0 && (
             <>
-              {data.cats.map((cat) => (
+              {data.cats.map((cat, index) => (
                 <CatCard key={cat.id} cat={cat} onOpen={setModalCatId} />
               ))}
 
               {data.totalPages > 1 && (
-                <div className="flex items-center justify-center gap-4 mt-4 pb-4">
-                  <Button variant="outline" size="sm" onClick={() => setPage((p) => Math.max(1, p - 1))} disabled={page === 1} className="rounded-full text-[13px] h-8">
-                    <ChevronLeft className="h-3.5 w-3.5" />
+                <nav className="flex items-center justify-center gap-4 mt-6 pb-6">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((p) => Math.max(1, p - 1))}
+                    disabled={page === 1}
+                    className="rounded-full text-[13px] h-9 px-4 gap-1"
+                  >
+                    <ChevronLeft className="h-4 w-4" strokeWidth={1.5} />
                     Назад
                   </Button>
-                  <span className="text-[13px] text-[#8e8e93]">{data.page} из {data.totalPages}</span>
-                  <Button variant="outline" size="sm" onClick={() => setPage((p) => p + 1)} disabled={page >= data.totalPages} className="rounded-full text-[13px] h-8">
+
+                  <div className="flex gap-1.5">
+                    {Array.from({ length: data.totalPages }, (_, i) => i + 1).map((p) => (
+                      <button
+                        key={p}
+                        onClick={() => setPage(p)}
+                        className={`h-8 w-8 rounded-full text-[13px] font-medium transition-all ${
+                          p === page
+                            ? 'bg-[var(--primary)] text-white'
+                            : 'text-[var(--foreground-secondary)] hover:bg-[var(--secondary)]'
+                        }`}
+                      >
+                        {p}
+                      </button>
+                    ))}
+                  </div>
+
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => setPage((p) => p + 1)}
+                    disabled={page >= data.totalPages}
+                    className="rounded-full text-[13px] h-9 px-4 gap-1"
+                  >
                     Вперёд
-                    <ChevronRight className="h-3.5 w-3.5" />
+                    <ChevronRight className="h-4 w-4" strokeWidth={1.5} />
                   </Button>
-                </div>
+                </nav>
               )}
             </>
           )}
-        </div>
+        </main>
 
-        {/* Sidebar — hidden on mobile */}
-        <div className="hidden lg:block w-[220px] shrink-0">
-          <div className="sticky top-16">
+        <aside className="hidden lg:block w-[240px] shrink-0">
+          <div className="sticky top-20">
             <FeedSidebar />
           </div>
-        </div>
+        </aside>
       </div>
 
       {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
     </div>
   );
-}
+}

client/src/pages/LoginPage.tsx

@@ -26,50 +26,86 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-4 bg-[#f5f5f5]">
-      <div className="w-full max-w-sm animate-fade-in">
-        <div className="text-center mb-8">
-          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
-            <Cat className="h-7 w-7 text-white" />
+    <div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
+      <div className="w-full max-w-sm animate-fade-in-up">
+        <div className="text-center mb-10">
+          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full"
+            style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
+            <Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
           </div>
-          <h1 className="text-[24px] font-bold">Catstagram</h1>
-          <p className="text-[14px] text-[#8e8e93] mt-1">Войдите, чтобы смотреть котов</p>
+          <h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
+          <p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
+            Войдите, чтобы смотреть котов
+          </p>
         </div>
 
-        <div className="space-y-3">
-          <Input
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            placeholder="Имя пользователя"
-            required
-            autoFocus
-            className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
-          />
-          <Input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="Пароль"
-            required
-            className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
-          />
-          {error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
+        <form onSubmit={handleSubmit} className="space-y-3.5">
+          <div className="space-y-1">
+            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+              Имя пользователя
+            </label>
+            <Input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="your_cat_lover"
+              required
+              autoFocus
+              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+              Пароль
+            </label>
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="••••••••"
+              required
+              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
+              <span>⚠</span>
+              <span>{error}</span>
+            </div>
+          )}
+
           <Button
             type="submit"
-            className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
             disabled={loading}
+            className="w-full h-12 rounded-xl text-[15px] font-semibold bg-[var(--primary)] hover:bg-[var(--primary-hover)] disabled:opacity-60 transition-all"
           >
-            {loading ? 'Вход...' : 'Войти'}
+            {loading ? (
+              <span className="flex items-center gap-2">
+                <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
+                Вход...
+              </span>
+            ) : 'Войти'}
           </Button>
+        </form>
+
+        <div className="relative my-8">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-[var(--border)]"></div>
+          </div>
+          <div className="relative flex justify-center">
+            <span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
+              или
+            </span>
+          </div>
         </div>
 
-        <p className="mt-6 text-center text-[14px] text-[#8e8e93]">
+        <p className="text-center text-[14px] text-[var(--foreground-secondary)]">
           Нет аккаунта?{' '}
-          <Link to="/register" className="font-medium text-[#2aabee] hover:underline">
+          <Link to="/register" className="link-blue">
             Зарегистрироваться
           </Link>
         </p>
       </div>
     </div>
   );
-}
+}

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>
   );
-}
+}

client/src/pages/RegisterPage.tsx

@@ -33,60 +33,101 @@ export default function RegisterPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center p-4 bg-[#f5f5f5]">
-      <div className="w-full max-w-sm animate-fade-in">
-        <div className="text-center mb-8">
-          <div className="mx-auto mb-4 flex h-14 w-14 items-center justify-center rounded-full bg-[#2aabee]">
-            <Cat className="h-7 w-7 text-white" />
+    <div className="flex min-h-screen items-center justify-center p-5 bg-[#f5f5f7]">
+      <div className="w-full max-w-sm animate-fade-in-up">
+        <div className="text-center mb-10">
+          <div className="mx-auto mb-5 flex h-20 w-20 items-center justify-center rounded-full"
+            style={{ background: 'linear-gradient(135deg, #007aff 0%, #5856d6 100%)' }}>
+            <Cat className="h-10 w-10 text-white" strokeWidth={1.5} />
           </div>
-          <h1 className="text-[24px] font-bold">Catstagram</h1>
-          <p className="text-[14px] text-[#8e8e93] mt-1">Присоединяйтесь к сообществу</p>
+          <h1 className="text-[28px] font-bold tracking-tight">Catstagram</h1>
+          <p className="text-[15px] text-[var(--foreground-secondary)] mt-1.5">
+            Присоединяйтесь к сообществу
+          </p>
         </div>
 
-        <div className="space-y-3">
-          <Input
-            value={username}
-            onChange={(e) => setUsername(e.target.value)}
-            placeholder="Имя пользователя"
-            minLength={3}
-            required
-            autoFocus
-            className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
-          />
-          <Input
-            type="password"
-            value={password}
-            onChange={(e) => setPassword(e.target.value)}
-            placeholder="Пароль"
-            minLength={4}
-            required
-            className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
-          />
-          <Input
-            type="password"
-            value={confirm}
-            onChange={(e) => setConfirm(e.target.value)}
-            placeholder="Подтвердите пароль"
-            required
-            className="h-11 text-[15px] rounded-xl bg-white border-[#d1d1d6]"
-          />
-          {error && <p className="text-[13px] text-[#ff3b30] text-center">{error}</p>}
+        <form onSubmit={handleSubmit} className="space-y-3.5">
+          <div className="space-y-1">
+            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+              Имя пользователя
+            </label>
+            <Input
+              value={username}
+              onChange={(e) => setUsername(e.target.value)}
+              placeholder="your_cat_lover"
+              minLength={3}
+              required
+              autoFocus
+              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+              Пароль
+            </label>
+            <Input
+              type="password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+              placeholder="Минимум 4 символа"
+              minLength={4}
+              required
+              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-[13px] font-medium text-[var(--foreground-secondary)] ml-1">
+              Подтвердите пароль
+            </label>
+            <Input
+              type="password"
+              value={confirm}
+              onChange={(e) => setConfirm(e.target.value)}
+              placeholder="Повторите пароль"
+              required
+              className="h-12 text-[15px] rounded-xl bg-white border focus:border-[var(--primary)] focus:ring-2 focus:ring-[var(--primary)]/20 transition-all"
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
+              <span>⚠</span>
+              <span>{error}</span>
+            </div>
+          )}
+
           <Button
             type="submit"
-            className="w-full h-11 rounded-xl text-[15px] font-semibold bg-[#2aabee] hover:bg-[#1d9bd9]"
             disabled={loading}
+            className="w-full h-12 rounded-xl text-[15px] font-semibold bg-[var(--primary)] hover:bg-[var(--primary-hover)] disabled:opacity-60 transition-all"
           >
-            {loading ? 'Создание...' : 'Создать аккаунт'}
+            {loading ? (
+              <span className="flex items-center gap-2">
+                <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
+                Создание...
+              </span>
+            ) : 'Создать аккаунт'}
           </Button>
+        </form>
+
+        <div className="relative my-8">
+          <div className="absolute inset-0 flex items-center">
+            <div className="w-full border-t border-[var(--border)]"></div>
+          </div>
+          <div className="relative flex justify-center">
+            <span className="px-4 text-[13px] text-[var(--foreground-tertiary)] bg-[#f5f5f7]">
+              или
+            </span>
+          </div>
         </div>
 
-        <p className="mt-6 text-center text-[14px] text-[#8e8e93]">
+        <p className="text-center text-[14px] text-[var(--foreground-secondary)]">
           Уже есть аккаунт?{' '}
-          <Link to="/login" className="font-medium text-[#2aabee] hover:underline">
+          <Link to="/login" className="link-blue">
             Войти
           </Link>
         </p>
       </div>
     </div>
   );
-}
+}

client/src/pages/UploadPage.tsx

@@ -6,7 +6,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { useToast } from '@/components/Toast';
 import { Button } from '@/components/ui/button';
 import { Avatar, AvatarFallback } from '@/components/ui/avatar';
-import { ArrowLeft, Upload, X } from 'lucide-react';
+import { ArrowLeft, Upload, X, Image } from 'lucide-react';
 
 export default function UploadPage() {
   const navigate = useNavigate();
@@ -42,9 +42,11 @@ export default function UploadPage() {
     try {
       const result = await uploadMutation.mutateAsync(fd);
       if (user) updateUser({ ...user, points: (user.points || 0) + 10 });
-      toast('+10 баллов');
+      toast('+10 баллов 🎉');
       navigate(`/cat/${result.cat.id}`);
-    } catch { toast('Ошибка загрузки', 'error'); }
+    } catch {
+      toast('Ошибка загрузки', 'error');
+    }
   };
 
   const clearFile = () => {
@@ -57,81 +59,125 @@ export default function UploadPage() {
     <div className="mx-auto max-w-[580px] px-4 py-6">
       <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>
 
-      <h1 className="text-[20px] font-semibold mb-5">Новая публикация</h1>
+      <h1 className="text-[22px] font-bold mb-6">Новая публикация</h1>
 
       {!preview ? (
         <div
           {...getRootProps()}
-          className={`border border-dashed rounded-2xl p-16 text-center cursor-pointer transition-colors ${
-            isDragActive ? 'border-[#2aabee] bg-[#e8f5ff]' : 'hover:bg-[#f0f0f0] border-[#d1d1d6]'
+          className={`border-2 border-dashed rounded-2xl p-16 text-center cursor-pointer transition-all ${
+            isDragActive
+              ? 'border-[var(--primary)] bg-[var(--primary-light)] scale-[1.02]'
+              : 'border-[var(--border)] hover:bg-[var(--secondary)] hover:border-[var(--foreground-tertiary)]'
           }`}
         >
           <input {...getInputProps()} />
-          <div className="mb-4">
-            <Upload className="mx-auto h-8 w-8 text-[#8e8e93]" strokeWidth={1.5} />
+          <div className="mb-5 flex justify-center">
+            <div className="h-16 w-16 rounded-full bg-[var(--secondary)] flex items-center justify-center">
+              {isDragActive ? (
+                <Image className="h-7 w-7 text-[var(--primary)]" strokeWidth={1.5} />
+              ) : (
+                <Upload className="h-7 w-7 text-[var(--foreground-secondary)]" strokeWidth={1.5} />
+              )}
+            </div>
           </div>
-          <p className="text-[15px] font-medium mb-1">
+          <p className="text-[16px] font-semibold mb-1">
             {isDragActive ? 'Отпустите фото' : 'Перетащите фото сюда'}
           </p>
-          <p className="text-[13px] text-[#8e8e93] mb-5">или нажмите, чтобы выбрать</p>
-          <Button variant="outline" size="sm" className="rounded-full text-[13px]">Выбрать файл</Button>
-          <p className="mt-4 text-[12px] text-[#8e8e93]">JPG, PNG, GIF, WebP · до 10 МБ</p>
+          <p className="text-[14px] text-[var(--foreground-secondary)] mb-6">
+            или нажмите, чтобы выбрать
+          </p>
+          <Button
+            variant="outline"
+            size="sm"
+            className="rounded-full text-[13px] px-6"
+          >
+            Выбрать файл
+          </Button>
+          <p className="mt-5 text-[12px] text-[var(--foreground-tertiary)]">
+            JPG, PNG, GIF, WebP · до 10 МБ
+          </p>
         </div>
       ) : (
-        <div className="space-y-4">
-          <div className="relative bg-[#f0f0f0] rounded-2xl overflow-hidden">
-            <img src={preview} alt="Preview" className="max-h-[400px] w-full object-contain" />
+        <div className="space-y-5 animate-fade-in-up">
+          {/* Preview */}
+          <div className="relative bg-[var(--secondary)] rounded-2xl overflow-hidden shadow-sm">
+            <img
+              src={preview!}
+              alt="Preview"
+              className="max-h-[420px] w-full object-contain"
+            />
             <button
               onClick={clearFile}
-              className="absolute right-3 top-3 flex h-8 w-8 items-center justify-center rounded-full bg-black/50 text-white hover:bg-black/70 transition-colors"
+              className="absolute right-3 top-3 flex h-9 w-9 items-center justify-center rounded-full bg-black/40 text-white hover:bg-black/60 transition-all backdrop-blur-sm"
             >
-              <X className="h-4 w-4" />
+              <X className="h-4 w-4" strokeWidth={2} />
             </button>
           </div>
 
+          {/* Caption input */}
           <div className="flex items-start gap-3">
-            <Avatar className="h-8 w-8 shrink-0">
-              <AvatarFallback className="text-xs bg-[#2aabee] text-white">
+            <Avatar className="h-9 w-9 shrink-0">
+              <AvatarFallback className="text-xs avatar-initials">
                 {user?.username?.charAt(0).toUpperCase() || '?'}
               </AvatarFallback>
             </Avatar>
             <div className="flex-1">
-              <p className="text-[13px] font-medium mb-1">{user?.username}</p>
+              <p className="text-[14px] font-semibold mb-1.5">{user?.username}</p>
               <textarea
-                placeholder="Подпись к фото..."
+                placeholder="Напишите подпись к фото..."
                 value={caption}
                 onChange={(e) => setCaption(e.target.value)}
                 maxLength={200}
-                rows={2}
-                className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[#8e8e93]"
+                rows={3}
+                className="w-full resize-none text-[15px] bg-transparent outline-none placeholder:text-[var(--foreground-tertiary)] leading-[1.4]"
               />
-              <p className="text-right text-[11px] text-[#8e8e93] mt-0.5">{caption.length}/200</p>
+              <div className="flex items-center justify-between mt-1">
+                <span className="text-[11px] text-[var(--foreground-tertiary)]">
+                  {caption.length > 150 ? `Осталось ${200 - caption.length} символов` : ''}
+                </span>
+                <span className="text-[11px] text-[var(--foreground-tertiary)] tabular-nums">
+                  {caption.length}/200
+                </span>
+              </div>
             </div>
           </div>
 
-          <div className="flex items-center justify-between pt-2">
-            <span className="text-[13px] text-[#8e8e93]">+10 баллов</span>
+          {/* Submit */}
+          <div className="flex items-center justify-between pt-2 border-t border-[var(--border)]">
+            <div className="flex items-center gap-2 text-[13px] text-[var(--foreground-secondary)]">
+              <span>🏆</span>
+              <span className="font-medium">+10 баллов</span>
+              <span className="text-[var(--foreground-tertiary)]">за публикацию</span>
+            </div>
             <Button
               onClick={handleUpload}
               disabled={uploadMutation.isPending}
               size="sm"
-              className="rounded-full text-[14px] bg-[#2aabee] hover:bg-[#1d9bd9] px-6"
+              className="rounded-full text-[14px] bg-[var(--primary)] hover:bg-[var(--primary-hover)] px-6 h-10 disabled:opacity-60"
             >
-              {uploadMutation.isPending ? 'Публикация...' : 'Опубликовать'}
+              {uploadMutation.isPending ? (
+                <span className="flex items-center gap-2">
+                  <span className="h-4 w-4 rounded-full border-2 border-white/30 border-t-white animate-spin" />
+                  Публикация...
+                </span>
+              ) : 'Опубликовать'}
             </Button>
           </div>
-        </div>
-      )}
 
-      {uploadMutation.isError && (
-        <p className="mt-3 text-center text-[13px] text-[#ff3b30]">Не удалось загрузить. Попробуйте снова.</p>
+          {uploadMutation.isError && (
+            <div className="flex items-center gap-2 px-4 py-3 rounded-xl bg-[var(--danger-light)] text-[var(--danger)] text-[13px] font-medium animate-fade-in">
+              <span>⚠</span>
+              <span>Не удалось загрузить. Попробуйте снова.</span>
+            </div>
+          )}
+        </div>
       )}
     </div>
   );
-}
+}