✨ 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/App.vue

@@ -15,15 +15,59 @@
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue'
+import { computed, watch } from 'vue'
+import { useRouter } from 'vue-router'
 import { useQuery } from '@tanstack/vue-query'
 import { apiClient } from '@/api/client'
 import AppToast from '@/components/common/AppToast.vue'
 import AppShell from '@/components/layout/AppShell.vue'
+import { useAuth } from '@/composables/useAuth'
+import { useSocket } from '@/composables/useSocket'
 import { useUi } from '@/composables/useUi'
 import { queryKeys } from '@/queries/keys'
 
+const authStore = useAuth()
 const uiStore = useUi()
+const router = useRouter()
+const socket = useSocket()
+
+const activeProfileId = computed(() => authStore.activeProfile?.id)
+
+let offMatchCreated: (() => void) | null = null
+
+watch(
+  [() => authStore.isAuthenticated, activeProfileId],
+  ([isAuth, profileId]) => {
+    offMatchCreated?.()
+    offMatchCreated = null
+
+    if (isAuth && profileId) {
+      socket.connect(profileId)
+
+      offMatchCreated = socket.on<{ matchId: string, chatId: string, partnerProfileId: string }>(
+        'match_created',
+        async (data) => {
+          await authStore.fetchMe()
+          // Skip toast if user is already viewing this chat (they navigated via HTTP response)
+          if (router.currentRoute.value.path === `/chats/${data.chatId}`) return
+          uiStore.addToast(
+            'Новый матч! Открыть чат?',
+            'success',
+            0,
+            {
+              label: 'Открыть чат',
+              onClick: () => router.push(`/chats/${data.chatId}`),
+            },
+          )
+        },
+      )
+    }
+    else {
+      socket.disconnect()
+    }
+  },
+  { immediate: true },
+)
 
 const { data: tagsData } = useQuery({
   queryKey: queryKeys.tags(),

src/components/common/AppToast.vue

@@ -17,6 +17,11 @@
             </svg>
           </span>
           <span class="toast__message">{{ toast.message }}</span>
+          <button
+            v-if="toast.action"
+            class="toast__action"
+            @click="toast.action.onClick(); uiStore.removeToast(toast.id)"
+          >{{ toast.action.label }}</button>
           <button class="toast__close" aria-label="Закрыть" @click="uiStore.removeToast(toast.id)">
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12" /></svg>
           </button>
@@ -100,6 +105,25 @@ const uiStore = useUi()
     line-height: 1.4;
   }
 
+  &__action {
+    background: none;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-xs);
+    color: var(--color-cream);
+    cursor: pointer;
+    font-family: var(--font-mono);
+    font-size: 0.6875rem;
+    padding: 3px 8px;
+    white-space: nowrap;
+    flex-shrink: 0;
+    transition: border-color var(--transition-fast), color var(--transition-fast);
+
+    &:hover {
+      border-color: var(--color-signal);
+      color: var(--color-signal);
+    }
+  }
+
   &__close {
     width: 20px;
     height: 20px;

src/router/index.ts

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { _getAccessToken, _setAccessToken, axiosInstance, BASE_URL } from '@/api/client'
+import { _getAccessToken, _setAccessToken, axiosInstance, apiClient, BASE_URL } from '@/api/client'
 import { useAuth } from '@/composables/useAuth'
 
 export const router = createRouter({
@@ -16,10 +16,29 @@ export const router = createRouter({
 
     // Main app
     { path: '/feed', name: 'feed', component: () => import('@/views/feed/FeedView.vue'), meta: { auth: true } },
-    { path: '/matches', name: 'matches', component: () => import('@/views/matches/MatchesView.vue'), meta: { auth: true } },
+    { path: '/matches', redirect: '/chats' },
 
     // Chat
-    { path: '/chats', name: 'chats', component: () => import('@/views/chat/ChatsListView.vue'), meta: { auth: true } },
+    {
+      path: '/chats',
+      name: 'chats',
+      component: () => import('@/views/chat/ChatsListView.vue'),
+      meta: { auth: true },
+      beforeEnter: async (to, from) => {
+        // Coming back from a chat room → show the list, don't redirect
+        if (from.name === 'chat-room') return true
+        const authStore = useAuth()
+        const profileId = authStore.activeProfile?.id
+        if (!profileId) return true
+        try {
+          const chats = await apiClient.api.chatControllerGetChats({ profileId })
+          const active = (chats as Array<{ id: string, status: string }>).find(c => c.status === 'active')
+          if (active) return { name: 'chat-room', params: { chatId: active.id } }
+        }
+        catch {}
+        return true
+      },
+    },
     { path: '/chats/:chatId', name: 'chat-room', component: () => import('@/views/chat/ChatRoomView.vue'), meta: { auth: true } },
 
     // Dates
@@ -32,6 +51,11 @@ export const router = createRouter({
     // Admin
     { path: '/admin/reports', name: 'admin-reports', component: () => import('@/views/admin/ReportsView.vue'), meta: { auth: true, admin: true } },
 
+    // Dev tools (never in production)
+    ...(import.meta.env.MODE !== 'production'
+      ? [{ path: '/test', name: 'test', component: () => import('@/views/dev/TestView.vue') }]
+      : []),
+
     // Catch-all
     { path: '/:pathMatch(.*)*', redirect: '/' },
   ],

src/views/chat/ChatRoomView.vue

@@ -14,7 +14,11 @@
           class="chat-room__avatar"
           :alt="chat.partner?.name"
         >
-        <div v-else class="chat-room__avatar chat-room__avatar--placeholder" />
+        <div v-else class="chat-room__avatar chat-room__avatar--placeholder">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" width="18" height="18" opacity="0.4">
+            <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>
         <span class="chat-room__name">{{ chat?.partner?.name ?? 'Чат' }}</span>
       </div>
       <button
@@ -67,19 +71,67 @@
     <!-- Close chat confirm -->
     <AppModal
       :open="confirmClose"
-      title="Закрыть чат"
+      title="Завершить диалог"
       size="sm"
-      @close="confirmClose = false"
+      @close="resetCloseForm"
     >
-      <p style="font-family: var(--font-mono); font-size: 0.875rem; color: var(--color-muted); margin: 0">
-        Вы уверены? Переписка будет удалена и восстановить её нельзя.
-      </p>
+      <div class="close-form">
+        <p class="close-form__hint">
+          Выберите причину завершения диалога — сообщение получит собеседник.
+        </p>
+
+        <div class="close-form__options">
+          <label class="close-form__option" :class="{ 'close-form__option--active': closeType === 'cancel' }">
+            <input v-model="closeType" type="radio" value="cancel" class="close-form__radio">
+            <span class="close-form__option-label">Отменить матч</span>
+          </label>
+          <label class="close-form__option" :class="{ 'close-form__option--active': closeType === 'report' }">
+            <input v-model="closeType" type="radio" value="report" class="close-form__radio">
+            <span class="close-form__option-label">Пожаловаться</span>
+          </label>
+        </div>
+
+        <!-- Cancel message -->
+        <div v-if="closeType === 'cancel'" class="close-form__field">
+          <textarea
+            v-model="cancelMessage"
+            class="close-form__textarea"
+            placeholder="Сообщение собеседнику (необязательно)"
+            rows="3"
+            maxlength="500"
+          />
+        </div>
+
+        <!-- Report fields -->
+        <div v-if="closeType === 'report'" class="close-form__field">
+          <select v-model="reportReason" class="close-form__select">
+            <option value="" disabled>
+              Выберите причину *
+            </option>
+            <option v-for="r in REPORT_REASONS" :key="r" :value="r">
+              {{ r }}
+            </option>
+          </select>
+          <textarea
+            v-model="reportDescription"
+            class="close-form__textarea"
+            placeholder="Дополнительные подробности (необязательно)"
+            rows="2"
+            maxlength="500"
+          />
+        </div>
+      </div>
+
       <template #footer>
-        <AppButton variant="ghost" @click="confirmClose = false">
+        <AppButton variant="ghost" @click="resetCloseForm">
           Отмена
         </AppButton>
-        <AppButton variant="danger" @click="doCloseChat">
-          Закрыть чат
+        <AppButton
+          variant="danger"
+          :disabled="!canSubmitClose"
+          @click="doCloseChat"
+        >
+          {{ closeType === 'report' ? 'Пожаловаться и выйти' : 'Завершить диалог' }}
         </AppButton>
       </template>
     </AppModal>
@@ -100,6 +152,15 @@ import { useUi } from '@/composables/useUi'
 import { useChatsQuery } from '@/queries/useChatsQuery'
 import { useMessagesQuery } from '@/queries/useMessagesQuery'
 
+const REPORT_REASONS = [
+  'Непристойный контент',
+  'Оскорбительное поведение',
+  'Угрозы или запугивание',
+  'Спам или реклама',
+  'Выдаёт себя за другого человека',
+  'Другое',
+]
+
 const route = useRoute()
 const authStore = useAuth()
 const uiStore = useUi()
@@ -109,6 +170,17 @@ const profileId = computed(() => authStore.activeProfile?.id)
 const messagesEnd = ref<HTMLElement | null>(null)
 const confirmClose = ref(false)
 
+const closeType = ref<'cancel' | 'report' | ''>('')
+const cancelMessage = ref('')
+const reportReason = ref('')
+const reportDescription = ref('')
+
+const canSubmitClose = computed(() => {
+  if (!closeType.value) return false
+  if (closeType.value === 'report') return !!reportReason.value
+  return true
+})
+
 const { query: chatsQuery, closeChat: closeChatMutation } = useChatsQuery(profileId)
 const { query: messagesQuery, sendMessage: sendMessageMutation } = useMessagesQuery(chatId, profileId)
 
@@ -150,10 +222,25 @@ function goBack() {
   window.history.back()
 }
 
+function resetCloseForm() {
+  confirmClose.value = false
+  closeType.value = ''
+  cancelMessage.value = ''
+  reportReason.value = ''
+  reportDescription.value = ''
+}
+
 async function doCloseChat() {
+  if (!canSubmitClose.value) return
   try {
-    await closeChatMutation.mutateAsync({ chatId })
-    confirmClose.value = false
+    await closeChatMutation.mutateAsync({
+      chatId,
+      type: closeType.value as 'cancel' | 'report',
+      cancelMessage: cancelMessage.value || undefined,
+      reportReason: reportReason.value || undefined,
+      reportDescription: reportDescription.value || undefined,
+    })
+    resetCloseForm()
     goBack()
   }
   catch {
@@ -208,6 +295,10 @@ async function doCloseChat() {
 
     &--placeholder {
       background: var(--color-surface-2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-muted);
     }
   }
 
@@ -288,4 +379,105 @@ async function doCloseChat() {
     }
   }
 }
+
+.close-form {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+
+  &__hint {
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    color: var(--color-muted);
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  &__options {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__option {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    padding: 10px 14px;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: border-color var(--transition-fast), background var(--transition-fast);
+
+    &--active {
+      border-color: var(--color-signal);
+      background: rgba(196, 92, 58, 0.06);
+    }
+
+    &:hover:not(.close-form__option--active) {
+      border-color: rgba(240, 235, 224, 0.2);
+    }
+  }
+
+  &__radio {
+    accent-color: var(--color-signal);
+    flex-shrink: 0;
+  }
+
+  &__option-label {
+    font-family: var(--font-mono);
+    font-size: 0.875rem;
+    color: var(--color-cream);
+  }
+
+  &__field {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+
+  &__select {
+    width: 100%;
+    background: var(--color-surface-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    color: var(--color-cream);
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    padding: 8px 12px;
+    outline: none;
+    cursor: pointer;
+
+    &:focus {
+      border-color: var(--color-signal);
+    }
+
+    option {
+      background: var(--color-surface-2);
+    }
+  }
+
+  &__textarea {
+    width: 100%;
+    background: var(--color-surface-2);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm);
+    color: var(--color-cream);
+    font-family: var(--font-mono);
+    font-size: 0.8125rem;
+    padding: 10px 12px;
+    resize: vertical;
+    outline: none;
+    box-sizing: border-box;
+    line-height: 1.5;
+
+    &::placeholder {
+      color: var(--color-muted);
+    }
+
+    &:focus {
+      border-color: rgba(240, 235, 224, 0.3);
+    }
+  }
+}
 </style>

src/views/chat/ChatsListView.vue

@@ -18,11 +18,21 @@
     />
 
     <ul v-else class="chats-list__list" role="list">
-      <li v-for="chat in (chats ?? [])" :key="chat.id">
+      <li v-if="chats.some(c => c.status === 'active')" class="chats-list__section-label">
+        Активный диалог
+      </li>
+      <template v-for="(chat, idx) in chats" :key="chat.id">
+        <li
+          v-if="idx > 0 && chat.status === 'closed' && chats[idx - 1]?.status === 'active'"
+          class="chats-list__section-label chats-list__section-label--history"
+        >
+          История
+        </li>
+        <li>
         <RouterLink
           :to="`/chats/${chat.id}`"
           class="chat-item"
-          :class="{ 'chat-item--inactive': chat.status === 'closed' }"
+          :class="{ 'chat-item--inactive': chat.status === 'closed', 'chat-item--active': chat.status === 'active' }"
         >
           <div class="chat-item__avatar-wrap">
             <img
@@ -64,7 +74,8 @@
             {{ chat.unreadCount }}
           </div>
         </RouterLink>
-      </li>
+        </li>
+      </template>
     </ul>
   </div>
 </template>
@@ -79,7 +90,16 @@ import { useChatsQuery } from '@/queries/useChatsQuery'
 const authStore = useAuth()
 const profileId = computed(() => authStore.activeProfile?.id)
 
-const { query: { data: chats, isLoading: loading } } = useChatsQuery(profileId)
+const { query: { data: rawChats, isLoading: loading } } = useChatsQuery(profileId)
+
+const chats = computed(() => {
+  const list = rawChats.value ?? []
+  return [...list].sort((a, b) => {
+    if (a.status === 'active' && b.status !== 'active') return -1
+    if (a.status !== 'active' && b.status === 'active') return 1
+    return 0
+  })
+})
 
 function formatTime(dateStr: string) {
   const d = new Date(dateStr)
@@ -124,6 +144,21 @@ function formatTime(dateStr: string) {
     margin: 0;
     padding: 0;
   }
+
+  &__section-label {
+    padding: 12px 24px 6px;
+    font-family: var(--font-mono);
+    font-size: 0.625rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--color-muted);
+    list-style: none;
+
+    &--history {
+      margin-top: 8px;
+      border-top: 1px solid var(--color-border);
+    }
+  }
 }
 
 .chat-item {
@@ -139,7 +174,12 @@ function formatTime(dateStr: string) {
   }
 
   &--inactive {
-    opacity: 0.6;
+    opacity: 0.5;
+  }
+
+  &--active {
+    border-left: 2px solid var(--color-signal);
+    padding-left: calc(24px - 2px);
   }
 
   &__avatar-wrap {

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>