✨ feat(src/router/index.ts): добавляет логику перенаправления для чатов в зависимости от активного диалога

✨ feat(src/views/chat/ChatRoomView.vue): обновляет модальное окно завершения диалога с новыми опциями

✨ feat(src/views/feed/FeedView.vue): добавляет уведомление о текущем активном матче в ленте

✨ feat(src/components/common/AppToast.vue): добавляет кнопку действия в уведомления для интерактивности

✨ feat(src/views/chat/ChatsListView.vue): сортирует чаты по статусу для улучшения пользовательского интерфейса

src/views/feed/FeedView.vue

@@ -40,13 +40,27 @@
       </div>
     </header>
 
-    <!-- Search paused banner -->
-    <div v-if="feedStore.searchPaused" class="feed-paused" role="alert">
-      <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16">
-        <path d="M10 9v4m0 4h.01M8.29 3.86L1.82 17a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" />
-      </svg>
-      Поиск приостановлен: достигнут лимит совпадений
-    </div>
+    <!-- Active match overlay — blocks the feed -->
+    <Transition name="fade">
+      <div v-if="activeMatchChatId" class="feed-locked" role="alertdialog" aria-modal="true">
+        <div class="feed-locked__inner">
+          <div class="feed-locked__icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.2" width="40" height="40">
+              <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+            </svg>
+          </div>
+          <h2 class="feed-locked__title">
+            У вас активный матч
+          </h2>
+          <p class="feed-locked__text">
+            Лента доступна только после завершения текущего диалога — одно совпадение за раз.
+          </p>
+          <AppButton variant="primary" @click="goToChat">
+            Перейти в чат
+          </AppButton>
+        </div>
+      </div>
+    </Transition>
 
     <!-- Card stack mode -->
     <div v-if="viewMode === 'stack'" class="feed-view__stack">
@@ -55,11 +69,23 @@
 
     <!-- Scroll mode — grid of cards -->
     <div v-else class="feed-view__scroll">
-      <div class="feed-grid">
+      <EmptyState
+        v-if="!feedStore.loading && feedStore.cards.length === 0"
+        title="Анкеты закончились"
+        description="Новые люди появляются каждый день — загляните позже или смягчите фильтры"
+        icon="feed"
+      >
+        <AppButton variant="secondary" size="sm" @click="filtersOpen = true">
+          Изменить фильтры
+        </AppButton>
+      </EmptyState>
+
+      <div v-else class="feed-grid">
         <article
           v-for="profile in feedStore.cards"
           :key="profile.id"
           class="feed-grid__item"
+          :class="{ 'feed-grid__item--leaving': leavingCards.has(profile.id) }"
         >
           <RouterLink :to="`/profile/${profile.id}`" class="feed-grid__link">
             <img
@@ -68,10 +94,24 @@
               :alt="profile.name"
               class="feed-grid__img"
             >
-            <div v-else class="feed-grid__no-img" />
+            <div v-else class="feed-grid__no-img">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" width="48" height="48" opacity="0.25">
+                <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2M12 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8z" />
+              </svg>
+            </div>
             <div class="feed-grid__overlay">
               <span class="feed-grid__name">{{ profile.name }}</span>
             </div>
+            <button
+              class="feed-grid__like-btn"
+              :class="{ 'feed-grid__like-btn--active': leavingCards.has(profile.id) }"
+              aria-label="Лайк"
+              @click.prevent.stop="handleScrollLike(profile.id)"
+            >
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="18" height="18">
+                <path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" />
+              </svg>
+            </button>
           </RouterLink>
         </article>
       </div>
@@ -86,16 +126,71 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, reactive, ref } from 'vue'
+import { useRouter } from 'vue-router'
 import AppButton from '@/components/common/AppButton.vue'
+import EmptyState from '@/components/common/EmptyState.vue'
 import FeedCardStack from '@/components/feed/FeedCardStack.vue'
 import FeedFilters from '@/components/feed/FeedFilters.vue'
+import { apiClient } from '@/api/client'
+import { useAuth } from '@/composables/useAuth'
 import { useFeed } from '@/composables/useFeed'
+import { useUi } from '@/composables/useUi'
+import { useChatsQuery } from '@/queries/useChatsQuery'
 
 const feedStore = useFeed()
+const authStore = useAuth()
+const uiStore = useUi()
+const router = useRouter()
+
+const activeProfileId = computed(() => authStore.activeProfile?.id)
+const activeMatchChatId = computed(() => authStore.activeProfile?.activeChatId ?? null)
+
+const { query: chatsQuery } = useChatsQuery(activeProfileId)
 
 const filtersOpen = ref(false)
-const viewMode = ref<'stack' | 'scroll'>('stack')
+const viewMode = ref<'stack' | 'scroll'>('scroll')
+const leavingCards = reactive(new Set<string>())
+
+async function handleScrollLike(profileId: string) {
+  if (leavingCards.has(profileId))
+    return
+  const activeProfile = authStore.activeProfile
+  if (!activeProfile)
+    return
+
+  leavingCards.add(profileId)
+
+  const [result] = await Promise.allSettled([
+    apiClient.api.likesControllerCreateLike({
+      sourceProfileId: activeProfile.id,
+      targetProfileId: profileId,
+      type: 'like',
+    }),
+    new Promise(resolve => setTimeout(resolve, 380)),
+  ])
+
+  leavingCards.delete(profileId)
+  feedStore.removeCard(profileId)
+  if (feedStore.cards.length < 5 && feedStore.hasMore)
+    feedStore.fetchNextPage()
+
+  if (result.status === 'rejected') {
+    uiStore.addToast('Не удалось отправить лайк', 'error')
+  }
+}
+
+function goToChat() {
+  const chatId = activeMatchChatId.value
+  if (chatId) {
+    router.push(`/chats/${chatId}`)
+  }
+  else {
+    const activeChat = chatsQuery.data.value?.find(c => c.status === 'active')
+    if (activeChat)
+      router.push(`/chats/${activeChat.id}`)
+  }
+}
 </script>
 
 <style scoped lang="scss">
@@ -103,6 +198,7 @@ const viewMode = ref<'stack' | 'scroll'>('stack')
   height: 100%;
   display: flex;
   flex-direction: column;
+  position: relative;
 
   &__stack {
     flex: 1;
@@ -175,17 +271,45 @@ const viewMode = ref<'stack' | 'scroll'>('stack')
   }
 }
 
-.feed-paused {
+.feed-locked {
+  position: absolute;
+  inset: 0;
+  z-index: 10;
+  background: rgba(13, 13, 13, 0.92);
+  backdrop-filter: blur(8px);
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 20px;
-  background: var(--color-signal-bg);
-  border-bottom: 1px solid rgba(196, 92, 58, 0.3);
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--color-signal);
-  flex-shrink: 0;
+  justify-content: center;
+  padding: 32px;
+
+  &__inner {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 16px;
+    max-width: 320px;
+    text-align: center;
+  }
+
+  &__icon {
+    color: var(--color-signal);
+    opacity: 0.9;
+  }
+
+  &__title {
+    font-family: var(--font-display);
+    font-size: 1.5rem;
+    color: var(--color-cream);
+    margin: 0;
+  }
+
+  &__text {
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    color: var(--color-muted);
+    line-height: 1.6;
+    margin: 0;
+  }
 }
 
 .feed-grid {
@@ -198,6 +322,16 @@ const viewMode = ref<'stack' | 'scroll'>('stack')
     border-radius: var(--radius-md);
     overflow: hidden;
     background: var(--color-surface-2);
+    will-change: transform, opacity;
+    transition:
+      transform 0.38s cubic-bezier(0.4, 0, 0.8, 0.2),
+      opacity 0.38s ease-in;
+
+    &--leaving {
+      transform: translateX(72px) rotate(8deg);
+      opacity: 0;
+      pointer-events: none;
+    }
   }
 
   &__link {
@@ -221,17 +355,19 @@ const viewMode = ref<'stack' | 'scroll'>('stack')
   &__no-img {
     width: 100%;
     height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     background: var(--color-surface-3);
   }
 
   &__overlay {
     position: absolute;
     inset: 0;
-    background: linear-gradient(0deg, rgba(13, 13, 13, 0.8) 0%, transparent 50%);
+    background: linear-gradient(0deg, rgba(13, 13, 13, 0.85) 0%, transparent 55%);
     display: flex;
     align-items: flex-end;
     padding: 12px;
-    opacity: 0;
     transition: opacity var(--transition-fast);
   }
 
@@ -240,5 +376,47 @@ const viewMode = ref<'stack' | 'scroll'>('stack')
     font-size: 1rem;
     color: var(--color-cream);
   }
+
+  &__like-btn {
+    position: absolute;
+    bottom: 10px;
+    right: 10px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background: var(--color-signal);
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 2;
+    opacity: 0;
+    transition:
+      transform var(--transition-fast),
+      opacity var(--transition-fast);
+
+    &:hover {
+      transform: scale(1.1);
+    }
+    &:active {
+      transform: scale(0.95);
+    }
+
+    &--active {
+      opacity: 1;
+      background: var(--color-signal);
+
+      svg {
+        fill: white;
+        stroke: white;
+      }
+    }
+  }
+
+  &__link:hover &__like-btn {
+    opacity: 1;
+  }
 }
 </style>