init

src/views/matches/MatchesView.vue

@@ -0,0 +1,211 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+import { useAuthStore } from '@/stores/auth.store';
+import { useChatStore } from '@/stores/chat.store';
+import { useUiStore } from '@/stores/ui.store';
+import { apiClient } from '@/api/client';
+import { useRouter } from 'vue-router';
+import AppButton from '@/components/common/AppButton.vue';
+import EmptyState from '@/components/common/EmptyState.vue';
+import LoadingSpinner from '@/components/common/LoadingSpinner.vue';
+
+interface Match {
+  id: string;
+  profileId: string;
+  partnerProfile: {
+    id: string;
+    name: string;
+    avatarUrl?: string;
+    cityName?: string;
+    age?: number;
+  };
+  createdAt: string;
+  hasChat: boolean;
+}
+
+const authStore = useAuthStore();
+const chatStore = useChatStore();
+const uiStore = useUiStore();
+const router = useRouter();
+
+const matches = ref<Match[]>([]);
+const loading = ref(false);
+
+onMounted(async () => {
+  const profileId = authStore.activeProfile?.id;
+  if (!profileId) return;
+  loading.value = true;
+  try {
+    const res = await apiClient.api.likesControllerGetMyMatches({ profileId }) as unknown as Match[];
+    matches.value = res;
+  } catch {
+    uiStore.addToast('Не удалось загрузить совпадения', 'error');
+  } finally {
+    loading.value = false;
+  }
+});
+
+async function openChat(match: Match) {
+  const profileId = authStore.activeProfile?.id;
+  if (!profileId) return;
+  try {
+    const chat = await chatStore.openChat(profileId, match.id);
+    router.push(`/chats/${chat.id}`);
+  } catch (err: unknown) {
+    const msg = (err as { response?: { data?: { message?: string } } })
+      ?.response?.data?.message ?? 'Не удалось открыть чат';
+    uiStore.addToast(msg, 'error');
+  }
+}
+</script>
+
+<template>
+  <div class="matches-view">
+    <header class="matches-view__header">
+      <h1 class="matches-view__title">Совпадения</h1>
+      <span class="meta">{{ matches.length }} {{ matches.length === 1 ? 'человек' : 'людей' }}</span>
+    </header>
+
+    <div v-if="loading" class="matches-view__loading">
+      <LoadingSpinner size="lg" />
+    </div>
+
+    <EmptyState
+      v-else-if="matches.length === 0"
+      title="Пока нет совпадений"
+      description="Ставьте лайки, чтобы находить тех, кто ответит взаимностью"
+      icon="heart"
+    />
+
+    <div v-else class="matches-list">
+      <article
+        v-for="match in matches"
+        :key="match.id"
+        class="match-card"
+      >
+        <RouterLink :to="`/profile/${match.partnerProfile.id}`" class="match-card__avatar-wrap">
+          <img
+            v-if="match.partnerProfile.avatarUrl"
+            :src="match.partnerProfile.avatarUrl"
+            :alt="match.partnerProfile.name"
+            class="match-card__avatar"
+          />
+          <div v-else class="match-card__avatar match-card__avatar--placeholder">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" width="28" height="28" opacity="0.3">
+              <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>
+        </RouterLink>
+
+        <div class="match-card__info">
+          <RouterLink :to="`/profile/${match.partnerProfile.id}`" class="match-card__name">
+            {{ match.partnerProfile.name }}
+            <span v-if="match.partnerProfile.age" class="match-card__age">, {{ match.partnerProfile.age }}</span>
+          </RouterLink>
+          <span v-if="match.partnerProfile.cityName" class="meta match-card__city">
+            {{ match.partnerProfile.cityName }}
+          </span>
+        </div>
+
+        <AppButton
+          variant="primary"
+          size="sm"
+          @click="openChat(match)"
+        >
+          Написать
+        </AppButton>
+      </article>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.matches-view {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &__header {
+    display: flex;
+    align-items: baseline;
+    gap: 12px;
+    padding: 20px 24px 16px;
+    border-bottom: 1px solid var(--color-border);
+    flex-shrink: 0;
+  }
+
+  &__title {
+    font-family: var(--font-display);
+    font-size: 1.5rem;
+    color: var(--color-cream);
+    margin: 0;
+  }
+
+  &__loading {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+
+.matches-list {
+  flex: 1;
+  overflow-y: auto;
+  padding: 8px 0;
+}
+
+.match-card {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 24px;
+  transition: background var(--transition-fast);
+
+  &:hover { background: rgba(240, 235, 224, 0.03); }
+
+  &__avatar-wrap {
+    flex-shrink: 0;
+    text-decoration: none;
+  }
+
+  &__avatar {
+    width: 52px;
+    height: 52px;
+    border-radius: 50%;
+    object-fit: cover;
+
+    &--placeholder {
+      background: var(--color-surface-2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  &__info {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__name {
+    font-family: var(--font-mono);
+    font-size: 0.9375rem;
+    font-weight: 500;
+    color: var(--color-cream);
+    text-decoration: none;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+
+    &:hover { color: var(--color-signal); }
+  }
+
+  &__age { font-weight: 400; opacity: 0.6; }
+
+  &__city { color: var(--color-muted); }
+}
+</style>