From cc53c49f9ec5ee9eb65335aa14da3dae7bb1a44d Mon Sep 17 00:00:00 2001
From: Professional <Professional@DENIIS-PC>
Date: Fri, 23 May 2025 17:05:01 +0700
Subject: [PATCH] =?UTF-8?q?=D0=BE=D0=B1=D0=BD=D0=BE=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B4=D0=B8=D0=B7=D0=B0=D0=B9=D0=BD=D0=B0?=
 =?UTF-8?q?=20=D0=BF=D0=BE=D0=B8=D1=81=D0=BA=D0=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/SwipeView.vue | 1318 ++++++++++++++++++++++++++++++++-------
 1 file changed, 1098 insertions(+), 220 deletions(-)

diff --git a/src/views/SwipeView.vue b/src/views/SwipeView.vue
index ecb9028..f8516be 100644
--- a/src/views/SwipeView.vue
+++ b/src/views/SwipeView.vue
@@ -1,150 +1,485 @@
 <template>
-  <div class="swipe-view container mt-4">
-    <h2 class="text-center mb-4">Найди свою пару!</h2>
-
-    <div v-if="loading" class="d-flex justify-content-center my-5">
-      <div class="spinner-border text-primary" style="width: 3rem; height: 3rem;" role="status">
-        <span class="visually-hidden">Загрузка анкет...</span>
+  <div class="modern-swipe-view">
+    <!-- Header Section -->
+    <div class="swipe-header">
+      <div class="container">
+        <h2 class="section-title">Поиск</h2>
       </div>
     </div>
 
-    <div v-if="error" class="alert alert-danger text-center">
-      {{ error }}
+    <!-- Loading State -->
+    <div v-if="loading" class="loading-section">
+      <div class="loading-spinner">
+        <div class="spinner"></div>
+        <p>Загрузка анкет...</p>
+      </div>
     </div>
 
-    <!-- Сообщение, если нет предложений ПОСЛЕ загрузки и нет других ошибок -->
-    <div v-if="!loading && suggestions.length === 0 && !error" class="alert alert-info text-center">
-      Пока нет доступных анкет. Попробуй зайти позже!
+    <!-- Error State -->
+    <div v-if="error" class="error-section">
+      <div class="container">
+        <div class="error-card">
+          <i class="bi-exclamation-triangle"></i>
+          <h3>Ошибка загрузки</h3>
+          <p>{{ error }}</p>
+          <button class="retry-btn" @click="fetchSuggestions">Попробовать снова</button>
+        </div>
+      </div>
     </div>
 
-    <div v-if="currentUserToSwipe && !loading && !error" class="row justify-content-center">
-      <div class="col-md-6 col-lg-4">
-        <div class="card shadow-sm user-card">
-          
-          <!-- === ОТОБРАЖЕНИЕ ФОТО === -->
-          <!-- Option 1: Carousel if photos array exists and is not empty -->
-          <div v-if="currentUserToSwipe.photos && currentUserToSwipe.photos.length > 0"
-               :id="`carouselUserPhotos-${currentUserToSwipe._id}`"
-               class="carousel slide"
-               data-bs-ride="false">
-            <div class="carousel-inner">
-              <div v-for="(photo, index) in currentUserToSwipe.photos"
-                   :key="photo.public_id || photo._id"
-                   class="carousel-item"
-                   :class="{ active: photo.isProfilePhoto || (!currentUserToSwipe.photos.some(p => p.isProfilePhoto) && index === 0) }">
-                <img :src="photo.url"
-                     class="d-block w-100 user-photo"
-                     :alt="'Фото ' + currentUserToSwipe.name + ' ' + (index + 1)"
-                     @error="onImageError($event, currentUserToSwipe, photo, 'carousel')">
+    <!-- No Suggestions State -->
+    <div v-if="!loading && suggestions.length === 0 && !error" class="empty-section">
+      <div class="container">
+        <div class="empty-card">
+          <i class="bi-person-x"></i>
+          <h3>Нет анкет</h3>
+          <p>Пока нет доступных анкет. Попробуй зайти позже!</p>
+        </div>
+      </div>
+    </div>
+
+    <!-- Main Content with Swipeable Cards -->
+    <div v-if="!loading && suggestions.length > 0 && !error" class="swipe-content">
+      <div class="container">
+        <div class="swipe-area" ref="swipeArea">
+          <transition-group name="card-stack" tag="div" class="card-stack-container">
+            <div 
+              v-for="(user, index) in visibleUsers" 
+              :key="user._id"
+              class="swipe-card" 
+              :class="{ 
+                'active': index === 0, 
+                'next': index === 1,
+                'swiping-left': swipeDirection === 'left' && index === 0,
+                'swiping-right': swipeDirection === 'right' && index === 0
+              }"
+              :style="index === 0 ? cardStyle : {}"
+              @touchstart="startTouch"
+              @touchmove="moveTouch"
+              @touchend="endTouch"
+              @mousedown="startDrag"
+              @mousemove="moveDrag"
+              @mouseup="endDrag"
+              @mouseleave="cancelDrag"
+            >
+              <!-- Photo Section -->
+              <div class="card-photo-section">
+                <!-- Photo Carousel -->
+                <div class="photo-carousel">
+                  <!-- Option 1: Photos Array -->
+                  <div 
+                    v-if="user.photos && user.photos.length > 0"
+                    class="carousel-wrapper"
+                  >
+                    <div class="carousel-inner">
+                      <div 
+                        v-for="(photo, photoIndex) in user.photos"
+                        :key="photo.public_id || photo._id"
+                        class="carousel-slide"
+                        :class="{ 'active': currentPhotoIndex[user._id] === photoIndex }"
+                      >
+                        <img 
+                          :src="photo.url"
+                          class="photo-image"
+                          :alt="'Фото ' + user.name"
+                          @error="onImageError($event, user, photo, 'carousel')"
+                        />
+                      </div>
+                    </div>
+                    
+                    <!-- Photo Navigation Dots -->
+                    <div class="carousel-dots" v-if="user.photos.length > 1">
+                      <span 
+                        v-for="(photo, photoIndex) in user.photos" 
+                        :key="`dot-${photo._id}`"
+                        class="dot"
+                        :class="{ 'active': currentPhotoIndex[user._id] === photoIndex }"
+                        @click.stop="changePhoto(user._id, photoIndex)"
+                      ></span>
+                    </div>
+                    
+                    <!-- Previous/Next buttons -->
+                    <button 
+                      v-if="user.photos.length > 1" 
+                      class="carousel-nav prev"
+                      @click.stop="prevPhoto(user._id)"
+                    >
+                      <i class="bi-chevron-left"></i>
+                    </button>
+                    <button 
+                      v-if="user.photos.length > 1" 
+                      class="carousel-nav next"
+                      @click.stop="nextPhoto(user._id)"
+                    >
+                      <i class="bi-chevron-right"></i>
+                    </button>
+                  </div>
+                  
+                  <!-- Option 2: Single Photo -->
+                  <div v-else-if="user.mainPhotoUrl" class="single-photo">
+                    <img 
+                      :src="user.mainPhotoUrl"
+                      class="photo-image"
+                      :alt="'Фото ' + user.name"
+                      @error="onImageError($event, user, { url: user.mainPhotoUrl }, 'mainPhoto')"
+                    />
+                  </div>
+                  
+                  <!-- Option 3: No Photo Placeholder -->
+                  <div v-else class="no-photo">
+                    <i class="bi-person"></i>
+                  </div>
+                </div>
+                
+                <!-- Action Indicators -->
+                <div class="swipe-indicators">
+                  <div 
+                    class="like-indicator"
+                    :class="{ 'visible': swipeDirection === 'right' && index === 0 }"
+                  >
+                    <i class="bi-heart-fill"></i>
+                  </div>
+                  <div 
+                    class="pass-indicator"
+                    :class="{ 'visible': swipeDirection === 'left' && index === 0 }"
+                  >
+                    <i class="bi-x-lg"></i>
+                  </div>
+                </div>
+                
+                <!-- User Info Overlay -->
+                <div class="user-info-overlay">
+                  <h3 class="user-name">{{ user.name }}<span class="user-age">, {{ user.age || '?' }}</span></h3>
+                  <p class="user-gender">{{ formatGender(user.gender) }}</p>
+                </div>
+              </div>
+              
+              <!-- User Details Section -->
+              <div class="card-details-section">
+                <div class="bio-container">
+                  <p class="bio-text">{{ user.bio || 'Нет описания.' }}</p>
+                </div>
               </div>
             </div>
-            <button v-if="currentUserToSwipe.photos.length > 1" class="carousel-control-prev" type="button" :data-bs-target="`#carouselUserPhotos-${currentUserToSwipe._id}`" data-bs-slide="prev">
-              <span class="carousel-control-prev-icon" aria-hidden="true"></span>
-              <span class="visually-hidden">Previous</span>
-            </button>
-            <button v-if="currentUserToSwipe.photos.length > 1" class="carousel-control-next" type="button" :data-bs-target="`#carouselUserPhotos-${currentUserToSwipe._id}`" data-bs-slide="next">
-              <span class="carousel-control-next-icon" aria-hidden="true"></span>
-              <span class="visually-hidden">Next</span>
-            </button>
-             <div class="carousel-indicators" v-if="currentUserToSwipe.photos.length > 1">
-              <button v-for="(photo, index) in currentUserToSwipe.photos"
-                      :key="`indicator-${photo._id}`"
-                      type="button"
-                      :data-bs-target="`#carouselUserPhotos-${currentUserToSwipe._id}`"
-                      :data-bs-slide-to="index"
-                      :class="{ active: photo.isProfilePhoto || (!currentUserToSwipe.photos.some(p => p.isProfilePhoto) && index === 0) }"
-                      :aria-current="photo.isProfilePhoto || (!currentUserToSwipe.photos.some(p => p.isProfilePhoto) && index === 0) ? 'true' : 'false'"
-                      :aria-label="`Slide ${index + 1}`"></button>
-            </div>
-          </div>
-          <!-- Option 2: Single image if mainPhotoUrl exists (and photos array was not suitable) -->
-          <div v-else-if="currentUserToSwipe.mainPhotoUrl" class="single-photo-display">
-            <img :src="currentUserToSwipe.mainPhotoUrl"
-                 class="d-block w-100 user-photo single-main-photo-img"
-                 :alt="'Фото ' + currentUserToSwipe.name"
-                 @error="onImageError($event, currentUserToSwipe, { url: currentUserToSwipe.mainPhotoUrl, _id: 'main_photo_fallback', isProfilePhoto: true }, 'mainPhotoUrl_fallback')">
-          </div>
-          <!-- Option 3: Placeholder if no photos and no mainPhotoUrl -->
-          <div v-else class="no-photo-placeholder d-flex align-items-center justify-content-center">
-            <i class="bi bi-person-fill"></i>
-          </div>
-          <!-- ========================== -->
-
-          <div class="card-body text-center">
-            <h5 class="card-title fs-3 mb-1">{{ currentUserToSwipe.name }}, {{ currentUserToSwipe.age !== null ? currentUserToSwipe.age : 'Возраст не указан' }}</h5>
-            <p class="card-text text-muted mb-2">{{ formatGender(currentUserToSwipe.gender) }}</p>
-            <p class="card-text bio-text">{{ currentUserToSwipe.bio || 'Нет описания.' }}</p>
-            
-            <div class="d-flex justify-content-around mt-3 action-buttons-container">
-              <button @click="handlePass" class="btn btn-outline-danger btn-lg rounded-circle action-button" :disabled="actionLoading" aria-label="Пропустить">
-                <i class="bi bi-x-lg"></i>
-              </button>
-              <button @click="handleLike" class="btn btn-outline-success btn-lg rounded-circle action-button" :disabled="actionLoading" aria-label="Лайкнуть">
-                <i class="bi bi-heart-fill"></i>
-              </button>
-            </div>
-          </div>
+          </transition-group>
         </div>
         
-        <div v-if="matchOccurred" class="alert alert-success mt-3 text-center match-alert">
-          🎉 **Это мэтч!** Вы понравились друг другу! 🎉
+        <!-- Action Buttons -->
+        <div class="action-buttons">
+          <button 
+            class="action-btn pass-btn" 
+            :disabled="actionLoading" 
+            @click="handlePass"
+          >
+            <div class="btn-icon">
+              <i class="bi-x-lg"></i>
+            </div>
+          </button>
+          <button 
+            class="action-btn like-btn" 
+            :disabled="actionLoading" 
+            @click="handleLike"
+          >
+            <div class="btn-icon">
+              <i class="bi-heart-fill"></i>
+            </div>
+          </button>
         </div>
       </div>
     </div>
+    
+    <!-- Match Notification -->
+    <transition name="match-popup">
+      <div v-if="matchOccurred" class="match-popup">
+        <div class="match-content">
+          <div class="match-header">
+            <i class="bi-stars"></i>
+            <h3>Вы понравились друг другу!</h3>
+          </div>
+          <div class="match-actions">
+            <button class="match-btn secondary" @click="continueSearching">
+              Продолжить поиск
+            </button>
+            <button class="match-btn primary" @click="goToChats">
+              Начать общение
+            </button>
+          </div>
+        </div>
+      </div>
+    </transition>
+    
+    <!-- Background Overlay for Match -->
+    <div 
+      v-if="matchOccurred" 
+      class="overlay"
+      @click="continueSearching"
+    ></div>
   </div>
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue';
-import api from '@/services/api'; // Наш API сервис
-import { useAuth } from '@/auth'; // Для проверки аутентификации
-import router from '@/router'; // Импортируем роутер для возможного редиректа
+import { ref, onMounted, computed, reactive, watch, onUnmounted, nextTick } from 'vue';
+import api from '@/services/api';
+import { useAuth } from '@/auth';
+import router from '@/router';
 
-const { isAuthenticated, logout } = useAuth(); // Добавили logout из useAuth
+const { isAuthenticated, logout } = useAuth();
 
+// Основные данные
 const suggestions = ref([]);
 const currentIndex = ref(0);
-const loading = ref(true); 
+const loading = ref(true);
 const actionLoading = ref(false);
 const error = ref('');
 const matchOccurred = ref(false);
+const matchedUserId = ref(null);
+const swipeArea = ref(null);
 
+// Для карусели фото
+const currentPhotoIndex = reactive({});
+
+// Для свайпа
+const swipeDirection = ref(null);
+const touchStartX = ref(0);
+const touchStartY = ref(0);
+const touchEndX = ref(0);
+const touchEndY = ref(0);
+const swipeThreshold = 100; // Минимальное расстояние для срабатывания свайпа
+const isDragging = ref(false);
+const dragStartX = ref(0);
+const dragStartY = ref(0);
+const dragOffset = ref({ x: 0, y: 0 });
+const cardStyle = ref({});
+const swipeAngle = 12; // Угол наклона карты при свайпе (в градусах)
+
+// Вычисляемые свойства
 const currentUserToSwipe = computed(() => {
   if (suggestions.value.length > 0 && currentIndex.value < suggestions.value.length) {
-    const currentUser = suggestions.value[currentIndex.value];
-    // Log for specific user if needed for deep debugging
-    if (currentUser && currentUser._id === "682df5f8892811c317d4c43f") { // User "Денис" ID
-      console.log("[SwipeView DEBUG] currentUserToSwipe for Денис:", JSON.parse(JSON.stringify(currentUser)));
-      console.log("[SwipeView DEBUG] Денис.mainPhotoUrl:", currentUser.mainPhotoUrl);
-      console.log("[SwipeView DEBUG] Денис.photos:", currentUser.photos);
-    }
-    return currentUser;
+    return suggestions.value[currentIndex.value];
   }
   return null;
 });
 
+const visibleUsers = computed(() => {
+  // Показываем текущего пользователя и следующего (для эффекта стека)
+  const users = [];
+  if (currentUserToSwipe.value) {
+    users.push(currentUserToSwipe.value);
+    
+    if (currentIndex.value + 1 < suggestions.value.length) {
+      users.push(suggestions.value[currentIndex.value + 1]);
+    }
+  }
+  return users;
+});
+
+// Методы управления каруселью фото
+const initPhotoIndices = () => {
+  suggestions.value.forEach(user => {
+    if (user && user._id) {
+      if (!currentPhotoIndex[user._id]) {
+        // Определяем начальное фото (основное или первое в списке)
+        if (user.photos && user.photos.length > 0) {
+          const profilePhotoIndex = user.photos.findIndex(p => p.isProfilePhoto);
+          currentPhotoIndex[user._id] = profilePhotoIndex >= 0 ? profilePhotoIndex : 0;
+        } else {
+          currentPhotoIndex[user._id] = 0;
+        }
+      }
+    }
+  });
+};
+
+const changePhoto = (userId, index) => {
+  if (isDragging.value) return; // Не меняем фото во время свайпа
+  currentPhotoIndex[userId] = index;
+};
+
+const nextPhoto = (userId) => {
+  if (isDragging.value) return;
+  const user = suggestions.value.find(u => u._id === userId);
+  if (user && user.photos && user.photos.length > 0) {
+    currentPhotoIndex[userId] = (currentPhotoIndex[userId] + 1) % user.photos.length;
+  }
+};
+
+const prevPhoto = (userId) => {
+  if (isDragging.value) return;
+  const user = suggestions.value.find(u => u._id === userId);
+  if (user && user.photos && user.photos.length > 0) {
+    currentPhotoIndex[userId] = (currentPhotoIndex[userId] - 1 + user.photos.length) % user.photos.length;
+  }
+};
+
+// Методы для свайпа на мобильных
+const startTouch = (event) => {
+  touchStartX.value = event.touches[0].clientX;
+  touchStartY.value = event.touches[0].clientY;
+  swipeDirection.value = null;
+};
+
+const moveTouch = (event) => {
+  if (!touchStartX.value) return;
+  
+  const currentX = event.touches[0].clientX;
+  const currentY = event.touches[0].clientY;
+  const diffX = currentX - touchStartX.value;
+  const diffY = currentY - touchStartY.value;
+  
+  // Определяем направление свайпа
+  if (Math.abs(diffX) > Math.abs(diffY) * 2) {
+    // Горизонтальное движение
+    if (diffX > 20) {
+      swipeDirection.value = 'right';
+    } else if (diffX < -20) {
+      swipeDirection.value = 'left';
+    } else {
+      swipeDirection.value = null;
+    }
+    
+    // Применяем трансформацию к карточке
+    const rotate = diffX * 0.1; // Коэффициент поворота
+    const translateX = diffX * 1.2; // Коэффициент смещения
+    cardStyle.value = {
+      transform: `translateX(${translateX}px) rotate(${rotate}deg)`,
+      transition: 'none'
+    };
+    
+    // Блокируем скролл страницы
+    event.preventDefault();
+  }
+};
+
+const endTouch = () => {
+  const diffX = touchEndX.value - touchStartX.value;
+  
+  // Сбрасываем стили
+  cardStyle.value = {
+    transform: 'none',
+    transition: 'transform 0.3s ease'
+  };
+  
+  // Если свайп был достаточно длинный, выполняем действие
+  if (Math.abs(diffX) > swipeThreshold) {
+    if (diffX > 0) {
+      handleLike();
+    } else {
+      handlePass();
+    }
+  } else {
+    // Недостаточный свайп, сбрасываем направление
+    swipeDirection.value = null;
+  }
+  
+  // Сбрасываем значения
+  touchStartX.value = 0;
+  touchStartY.value = 0;
+  touchEndX.value = 0;
+  touchEndY.value = 0;
+};
+
+// Методы для свайпа на десктопе (drag)
+const startDrag = (event) => {
+  isDragging.value = true;
+  dragStartX.value = event.clientX;
+  dragStartY.value = event.clientY;
+  dragOffset.value = { x: 0, y: 0 };
+  swipeDirection.value = null;
+  
+  // Предотвращаем выделение текста
+  event.preventDefault();
+};
+
+const moveDrag = (event) => {
+  if (!isDragging.value) return;
+  
+  dragOffset.value = {
+    x: event.clientX - dragStartX.value,
+    y: event.clientY - dragStartY.value
+  };
+  
+  // Определяем направление свайпа
+  if (Math.abs(dragOffset.value.x) > Math.abs(dragOffset.value.y) * 2) {
+    if (dragOffset.value.x > 20) {
+      swipeDirection.value = 'right';
+    } else if (dragOffset.value.x < -20) {
+      swipeDirection.value = 'left';
+    } else {
+      swipeDirection.value = null;
+    }
+    
+    // Применяем трансформацию
+    const rotate = dragOffset.value.x * 0.1;
+    cardStyle.value = {
+      transform: `translateX(${dragOffset.value.x}px) rotate(${rotate}deg)`,
+      transition: 'none'
+    };
+  }
+  
+  event.preventDefault();
+};
+
+const endDrag = () => {
+  if (!isDragging.value) return;
+  
+  // Сбрасываем стили
+  cardStyle.value = {
+    transform: 'none',
+    transition: 'transform 0.3s ease'
+  };
+  
+  // Если перетаскивание было достаточно большим, выполняем действие
+  if (Math.abs(dragOffset.value.x) > swipeThreshold) {
+    if (dragOffset.value.x > 0) {
+      handleLike();
+    } else {
+      handlePass();
+    }
+  } else {
+    swipeDirection.value = null;
+  }
+  
+  isDragging.value = false;
+};
+
+const cancelDrag = () => {
+  if (isDragging.value) {
+    cardStyle.value = {
+      transform: 'none',
+      transition: 'transform 0.3s ease'
+    };
+    swipeDirection.value = null;
+    isDragging.value = false;
+  }
+};
+
+// Основные функции
 const fetchSuggestions = async () => {
   loading.value = true;
   error.value = '';
   matchOccurred.value = false;
+  
   try {
     console.log('[SwipeView] Запрос предложений...');
     const response = await api.getSuggestions();
     suggestions.value = response.data;
     currentIndex.value = 0;
+    
     console.log('[SwipeView] Предложения загружены:', suggestions.value);
-    if (suggestions.value.length === 0) {
-      console.log('[SwipeView] Нет доступных анкет.');
-    }
+    
+    // Инициализируем индексы фото для карусели
+    nextTick(() => {
+      initPhotoIndices();
+    });
+    
   } catch (err) {
     console.error('[SwipeView] Ошибка при загрузке предложений:', err.response ? err.response.data : err.message);
     error.value = (err.response && err.response.data && err.response.data.message)
-                  ? err.response.data.message
-                  : 'Не удалось загрузить анкеты. Попробуйте позже.';
+                ? err.response.data.message
+                : 'Не удалось загрузить анкеты. Попробуйте позже.';
+                
     if (err.response && err.response.status === 401) {
-        // Если токен невалиден, разлогиниваем и перенаправляем
-        // const { logout } = useAuth(); // logout уже импортирован выше
-        await logout(); // logout уже делает router.push('/login')
+      await logout();
     }
   } finally {
     loading.value = false;
@@ -153,17 +488,16 @@ const fetchSuggestions = async () => {
 
 const handleAction = async (actionType) => {
   if (!currentUserToSwipe.value || actionLoading.value) return;
-
+  
   actionLoading.value = true;
-  // Сбрасываем сообщение об ошибке перед новым действием
-  error.value = ''; 
-  // Сбрасываем флаг мэтча, если это не лайк, или он будет установлен снова
+  error.value = '';
+  
   if (actionType !== 'like') {
     matchOccurred.value = false;
   }
   
   const targetUserId = currentUserToSwipe.value._id;
-
+  
   try {
     let response;
     if (actionType === 'like') {
@@ -175,66 +509,87 @@ const handleAction = async (actionType) => {
     }
     
     console.log(`[SwipeView] Ответ на ${actionType}:`, response.data);
+    
     if (response.data.isMatch) {
       matchOccurred.value = true;
-      setTimeout(() => { 
-        matchOccurred.value = false;
-        // Переход к следующему после скрытия сообщения о мэтче
-        moveToNextUser();
-      }, 3000); // Показываем мэтч 3 секунды
+      matchedUserId.value = targetUserId;
     } else {
-      // Если не мэтч, сразу переходим к следующему
       moveToNextUser();
     }
     
   } catch (err) {
     console.error(`[SwipeView] Ошибка при ${actionType}:`, err.response ? err.response.data : err.message);
     error.value = `Ошибка при ${actionType === 'like' ? 'лайке' : 'пропуске'}. ${err.response?.data?.message || 'Попробуйте снова.'}`;
+    
     if (err.response && err.response.status === 401) {
-      await logout(); // Выход из системы при ошибке авторизации
+      await logout();
     } else {
-      setTimeout(() => { error.value = ''; }, 3000); // Показываем ошибку 3 секунды
+      setTimeout(() => { error.value = ''; }, 3000);
     }
-    // В случае ошибки (кроме 401) не переходим к следующему пользователю автоматически, даем шанс повторить
   } finally {
     actionLoading.value = false;
   }
 };
 
 const handleLike = () => {
-  handleAction('like');
+  // Анимация свайпа вправо
+  swipeDirection.value = 'right';
+  cardStyle.value = {
+    transform: `translateX(120%) rotate(${swipeAngle}deg)`,
+    transition: 'transform 0.5s ease'
+  };
+  
+  // Задержка перед вызовом API
+  setTimeout(() => {
+    handleAction('like');
+  }, 300);
 };
 
 const handlePass = () => {
-  handleAction('pass');
+  // Анимация свайпа влево
+  swipeDirection.value = 'left';
+  cardStyle.value = {
+    transform: `translateX(-120%) rotate(-${swipeAngle}deg)`,
+    transition: 'transform 0.5s ease'
+  };
+  
+  // Задержка перед вызовом API
+  setTimeout(() => {
+    handleAction('pass');
+  }, 300);
 };
 
 const moveToNextUser = () => {
+  // Сбрасываем стили карточки
+  cardStyle.value = {
+    transform: 'none',
+    transition: 'none'
+  };
+  swipeDirection.value = null;
+  
   if (currentIndex.value < suggestions.value.length - 1) {
     currentIndex.value++;
-    matchOccurred.value = false; // Убираем мэтч при переходе
   } else {
     console.log('[SwipeView] Предложения закончились, перезагружаем...');
-    fetchSuggestions(); 
+    fetchSuggestions();
   }
 };
 
-onMounted(() => {
-  if (isAuthenticated.value) {
-    fetchSuggestions();
-  } else {
-    error.value = "Пожалуйста, войдите в систему, чтобы просматривать анкеты.";
-    loading.value = false;
-    // Перенаправление на логин должно осуществляться глобальным хуком роутера
-    // router.push('/login'); // Если хук не сработал или для явности
-  }
-});
+const continueSearching = () => {
+  matchOccurred.value = false;
+  moveToNextUser();
+};
+
+const goToChats = () => {
+  matchOccurred.value = false;
+  router.push('/chats');
+};
 
 const formatGender = (gender) => {
   if (gender === 'male') return 'Мужчина';
   if (gender === 'female') return 'Женщина';
   if (gender === 'other') return 'Другой';
-  return ''; // Возвращаем пустую строку, если пол не указан, чтобы не было "Пол не указан"
+  return '';
 };
 
 const onImageError = (event, userOnError, photoInfo, sourceType) => {
@@ -247,127 +602,650 @@ const onImageError = (event, userOnError, photoInfo, sourceType) => {
       photo_id: photoInfo._id,
       photo_url: photoInfo.url,
       isProfilePhotoFlag: photoInfo.isProfilePhoto,
-      // Log the state of relevant properties of userOnError at the time of error
-      currentUser_mainPhotoUrl_at_error_time: userOnError.mainPhotoUrl, 
-      currentUser_photos_at_error_time: userOnError.photos ? JSON.parse(JSON.stringify(userOnError.photos)) : 'not present',
-      event_target_attributes: {
-        naturalWidth: event.target.naturalWidth,
-        naturalHeight: event.target.naturalHeight,
-        complete: event.target.complete,
-      },
-      errorEventDetails_type: event.type 
+      event_type: event.type
     }
   );
-  // event.target.style.display = 'none'; // Keep commented for debugging to see broken image icon
 };
 
+// Обработчики событий жизненного цикла
+onMounted(() => {
+  if (isAuthenticated.value) {
+    fetchSuggestions();
+  } else {
+    error.value = "Пожалуйста, войдите в систему, чтобы просматривать анкеты.";
+    loading.value = false;
+  }
+  
+  // Предотвращаем скролл страницы при свайпе
+  if (swipeArea.value) {
+    swipeArea.value.addEventListener('touchmove', (e) => {
+      if (isDragging.value) {
+        e.preventDefault();
+      }
+    }, { passive: false });
+  }
+});
+
+onUnmounted(() => {
+  // Удаляем слушатели событий
+  if (swipeArea.value) {
+    swipeArea.value.removeEventListener('touchmove', null);
+  }
+});
+
+// Следим за изменениями в списке предложений
+watch(suggestions, () => {
+  initPhotoIndices();
+}, { deep: true });
 </script>
 
 <style scoped>
-.swipe-view {
-  padding-bottom: 60px; /* Место для футера, если он фиксированный */
+/* Global Reset and Base Styles */
+.modern-swipe-view {
+  min-height: 100vh;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  background-attachment: fixed;
+  background-size: cover;
+  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  position: relative;
+  display: flex;
+  flex-direction: column;
 }
-.user-card {
-  border-radius: 15px;
-  margin-bottom: 1.5rem;
-  overflow: hidden;
-  background-color: #fff;
+
+.container {
+  max-width: 640px;
+  margin: 0 auto;
+  width: 100%;
+  padding: 0 15px;
 }
-.user-card .card-title {
-  font-weight: bold;
+
+/* Header Section */
+.swipe-header {
+  background: rgba(33, 33, 60, 0.8);
+  backdrop-filter: blur(10px);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+  padding: 1rem 0;
+  color: white;
+  position: sticky;
+  top: 0;
+  z-index: 10;
 }
-.user-card .bio-text {
-  min-height: 4.5em; /* Примерно 3 строки текста */
-  max-height: 4.5em;
-  line-height: 1.5em;
-  display: -webkit-box;
-  -webkit-line-clamp: 3;
-  line-clamp: 3; /* Добавлено стандартное свойство */
-  -webkit-box-orient: vertical;  
-  overflow: hidden;
-  text-overflow: ellipsis;
+
+.section-title {
+  margin: 0;
+  font-size: 1.5rem;
+  text-align: center;
+  font-weight: 600;
+  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+}
+
+/* Loading State */
+.loading-section {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  flex-grow: 1;
+  color: white;
+}
+
+.loading-spinner {
+  text-align: center;
+}
+
+.spinner {
+  width: 50px;
+  height: 50px;
+  border: 4px solid rgba(255, 255, 255, 0.3);
+  border-left: 4px solid white;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin: 0 auto 1rem;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+/* Error and Empty States */
+.error-section, .empty-section {
+  padding: 4rem 0;
+  flex-grow: 1;
+}
+
+.error-card, .empty-card {
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  padding: 3rem;
+  text-align: center;
+  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+}
+
+.error-card i, .empty-card i {
+  font-size: 3rem;
   margin-bottom: 1rem;
 }
-.action-buttons-container {
-  padding-bottom: 0.5rem; /* Небольшой отступ снизу для кнопок */
+
+.error-card i {
+  color: #dc3545;
 }
-.action-button {
+
+.empty-card i {
+  color: #6c757d;
+}
+
+.error-card h3, .empty-card h3 {
+  color: #495057;
+  margin-bottom: 1rem;
+}
+
+.retry-btn {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+  border: none;
+  padding: 0.75rem 2rem;
+  border-radius: 50px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.retry-btn:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
+}
+
+/* Main Content */
+.swipe-content {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem 0;
+}
+
+/* Swipe Area */
+.swipe-area {
+  position: relative;
+  height: 68vh;
+  max-height: 680px;
+  min-height: 450px;
+  margin: 0 auto;
+  width: 100%;
+  perspective: 1000px;
+  touch-action: none;
+  user-select: none;
+}
+
+/* Card Stack */
+.card-stack-container {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  perspective: 1000px;
+}
+
+/* Swipe Card */
+.swipe-card {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 20px;
+  background-color: white;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
+  overflow: hidden;
+  transition: transform 0.3s ease, opacity 0.3s ease, scale 0.3s ease;
+  cursor: grab;
+  will-change: transform;
+  display: flex;
+  flex-direction: column;
+}
+
+.swipe-card.active {
+  z-index: 10;
+}
+
+.swipe-card.next {
+  z-index: 5;
+  transform: scale(0.95) translateY(15px);
+  opacity: 0.8;
+}
+
+/* Card Animations */
+.swipe-card.swiping-left {
+  animation: swipeLeft 0.5s forwards;
+}
+
+.swipe-card.swiping-right {
+  animation: swipeRight 0.5s forwards;
+}
+
+@keyframes swipeLeft {
+  to {
+    transform: translateX(-120%) rotate(-12deg);
+    opacity: 0;
+  }
+}
+
+@keyframes swipeRight {
+  to {
+    transform: translateX(120%) rotate(12deg);
+    opacity: 0;
+  }
+}
+
+/* Card-Stack Transitions */
+.card-stack-enter-active, .card-stack-leave-active {
+  transition: transform 0.5s ease, opacity 0.5s ease;
+}
+
+.card-stack-enter-from, .card-stack-leave-to {
+  opacity: 0;
+  transform: translateX(100%) rotate(5deg);
+}
+
+/* Photo Section */
+.card-photo-section {
+  flex: 1;
+  position: relative;
+  min-height: 0;
+  overflow: hidden;
+}
+
+/* Photo Carousel */
+.photo-carousel {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.carousel-wrapper {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  overflow: hidden;
+}
+
+.carousel-inner {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.carousel-slide {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  transition: opacity 0.5s ease;
+}
+
+.carousel-slide.active {
+  opacity: 1;
+}
+
+.photo-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+/* Carousel Navigation */
+.carousel-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  background: rgba(255, 255, 255, 0.7);
+  border: none;
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 5;
+  transition: all 0.3s ease;
+}
+
+.carousel-nav:hover {
+  background: rgba(255, 255, 255, 0.9);
+  transform: translateY(-50%) scale(1.1);
+}
+
+.carousel-nav.prev {
+  left: 10px;
+}
+
+.carousel-nav.next {
+  right: 10px;
+}
+
+/* Carousel Dots */
+.carousel-dots {
+  position: absolute;
+  bottom: 15px;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  z-index: 5;
+}
+
+.dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: rgba(255, 255, 255, 0.5);
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.dot.active {
+  background-color: white;
+  transform: scale(1.3);
+}
+
+/* Single Photo */
+.single-photo {
+  width: 100%;
+  height: 100%;
+}
+
+/* No Photo Placeholder */
+.no-photo {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: #e9ecef;
+}
+
+.no-photo i {
+  font-size: 5rem;
+  color: #adb5bd;
+}
+
+/* Swipe Indicators */
+.swipe-indicators {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+}
+
+.like-indicator, .pass-indicator {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%) scale(0);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  font-size: 3rem;
+  opacity: 0;
+  transition: opacity 0.3s ease, transform 0.3s ease;
+}
+
+.like-indicator {
+  right: 20%;
+  background-color: rgba(40, 167, 69, 0.8);
+  color: white;
+}
+
+.pass-indicator {
+  left: 20%;
+  background-color: rgba(220, 53, 69, 0.8);
+  color: white;
+}
+
+.like-indicator.visible, .pass-indicator.visible {
+  opacity: 1;
+  transform: translateY(-50%) scale(1);
+}
+
+/* User Info Overlay */
+.user-info-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%);
+  color: white;
+  padding: 20px;
+  text-align: left;
+}
+
+.user-name {
+  font-size: 1.8rem;
+  margin: 0;
+  font-weight: 600;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+}
+
+.user-age {
+  font-weight: normal;
+}
+
+.user-gender {
+  margin: 5px 0 0;
+  opacity: 0.9;
+  font-size: 0.95rem;
+}
+
+/* Card Details */
+.card-details-section {
+  padding: 15px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.bio-container {
+  max-height: 80px;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: rgba(102, 126, 234, 0.5) rgba(255, 255, 255, 0.1);
+}
+
+.bio-container::-webkit-scrollbar {
+  width: 4px;
+}
+
+.bio-container::-webkit-scrollbar-track {
+  background: rgba(255, 255, 255, 0.1);
+}
+
+.bio-container::-webkit-scrollbar-thumb {
+  background-color: rgba(102, 126, 234, 0.5);
+  border-radius: 4px;
+}
+
+.bio-text {
+  margin: 0;
+  font-size: 0.95rem;
+  line-height: 1.5;
+  color: #333;
+}
+
+/* Action Buttons */
+.action-buttons {
+  display: flex;
+  justify-content: center;
+  gap: 20px;
+  margin-top: 20px;
+  padding-bottom: 20px;
+}
+
+.action-btn {
   width: 70px;
   height: 70px;
-  font-size: 1.8rem; /* Размер иконки */
+  border-radius: 50%;
+  border: none;
   display: flex;
   align-items: center;
   justify-content: center;
-  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-  transition: transform 0.1s ease-out;
-}
-.action-button:active {
-  transform: scale(0.95);
-}
-.btn-outline-danger:hover {
-  background-color: #dc3545;
-  color: white;
-}
-.btn-outline-success:hover {
-  background-color: #198754;
-  color: white;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
 }
 
-.match-alert {
-  position: fixed; /* Или absolute относительно родителя, если нужно */
-  bottom: 70px; /* Положение над предполагаемой панелью навигации/футером */
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 1050;
-  padding: 1rem 1.5rem;
-  font-size: 1.2rem;
-  animation: fadeInOut 3s forwards;
-}
-
-@keyframes fadeInOut {
-  0% { opacity: 0; transform: translateX(-50%) translateY(20px); }
-  20% { opacity: 1; transform: translateX(-50%) translateY(0); }
-  80% { opacity: 1; transform: translateX(-50%) translateY(0); }
-  100% { opacity: 0; transform: translateX(-50%) translateY(20px); }
-}
-
-/* Стили для фото в карусели и заглушки */
-.user-photo { /* Стиль для тега <img> с классом user-photo */
-  object-fit: cover; /* Обеспечивает правильное масштабирование изображения */
-  width: 100%;       /* Изображение должно занимать всю ширину родительского элемента */
-}
-
-.carousel-item img.user-photo { /* Специфичный стиль для изображений в карусели */
-  height: 400px; /* Задает фиксированную высоту для всех фотографий в карусели */
-}
-
-.single-photo-display { /* Контейнер для одиночного фото */
+.btn-icon {
   width: 100%;
-  height: 400px; /* Та же высота, что и у карусели/заглушки */
+  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  overflow: hidden; /* На случай если изображение попытается выйти за рамки */
+  border-radius: 50%;
+  font-size: 1.8rem;
 }
 
-.single-main-photo-img { /* Стиль для одиночного изображения, если оно не в карусели */
-  height: 400px; /* Явно задаем высоту */
-  /* object-fit: cover; уже есть в .user-photo */
-  /* width: 100%; уже есть в .user-photo */
+.pass-btn {
+  background-color: white;
+  color: #dc3545;
 }
 
-.no-photo-placeholder { /* Стиль для заглушки, когда фотографий нет */
-  height: 400px; /* Такая же высота, как и у фотографий в карусели */
-  width: 100%;   /* Заглушка должна занимать всю ширину карточки */
-  display: flex; /* Используем flex для центрирования иконки */
-  align-items: center;
+.pass-btn:hover:not(:disabled) {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 15px rgba(220, 53, 69, 0.3);
+}
+
+.like-btn {
+  background-color: white;
+  color: #28a745;
+}
+
+.like-btn:hover:not(:disabled) {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 15px rgba(40, 167, 69, 0.3);
+}
+
+.action-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Match Popup */
+.match-popup {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: white;
+  border-radius: 20px;
+  padding: 2rem;
+  width: 90%;
+  max-width: 400px;
+  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
+  text-align: center;
+  z-index: 1000;
+}
+
+.match-header {
+  margin-bottom: 1.5rem;
+}
+
+.match-header i {
+  font-size: 3rem;
+  color: #ff6b6b;
+  display: block;
+  margin-bottom: 1rem;
+}
+
+.match-header h3 {
+  font-size: 1.5rem;
+  color: #333;
+  margin: 0;
+}
+
+.match-actions {
+  display: flex;
+  gap: 1rem;
   justify-content: center;
-  background-color: #e9ecef; /* Нейтральный фон для заглушки */
-  border-bottom: 1px solid #dee2e6; /* Тонкая граница снизу */
 }
 
-.no-photo-placeholder i { /* Стиль для иконки внутри заглушки */
-  font-size: 6rem; /* Размер иконки */
-  color: #adb5bd;   /* Цвет иконки */
+.match-btn {
+  flex: 1;
+  padding: 0.8rem 1rem;
+  border-radius: 50px;
+  font-weight: 600;
+  border: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.match-btn.primary {
+  background: linear-gradient(45deg, #667eea, #764ba2);
+  color: white;
+}
+
+.match-btn.secondary {
+  background: #f1f3f5;
+  color: #495057;
+}
+
+.match-btn:hover {
+  transform: translateY(-2px);
+}
+
+.match-btn.primary:hover {
+  box-shadow: 0 6px 15px rgba(102, 126, 234, 0.4);
+}
+
+/* Overlay */
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(4px);
+  z-index: 999;
+}
+
+/* Match Popup Animation */
+.match-popup-enter-active, .match-popup-leave-active {
+  transition: all 0.3s ease;
+}
+
+.match-popup-enter-from, .match-popup-leave-to {
+  transform: translate(-50%, -50%) scale(0.9);
+  opacity: 0;
+}
+
+/* Responsive Adjustments */
+@media (max-width: 576px) {
+  .swipe-area {
+    height: 60vh;
+    min-height: 400px;
+  }
+  
+  .action-btn {
+    width: 60px;
+    height: 60px;
+  }
+  
+  .user-name {
+    font-size: 1.5rem;
+  }
+  
+  .card-details-section {
+    padding: 10px;
+  }
+  
+  .bio-container {
+    max-height: 60px;
+  }
 }
 </style>
\ No newline at end of file