✨ feat(src/views/matches/MatchesView.vue): добавляет поддержку чатов с использованием сокетов

✨ feat(src/views/profile/MyProfileView.vue): добавляет раздел истории чатов в профиль пользователя ✨ feat(src/composables/useSocket.ts): создает хук для работы с сокетами 📝 chore(src/queries/useChatsQuery.ts): обновляет логику закрытия чата с учетом новых параметров 📝 chore(src/components/profile/MediaGallery.vue): исправляет путь к медиафайлам в галерее 🔧 fix(src/components/layout/SideNav.vue): комментирует неиспользуемый элемент навигации "Встречи"
2026-06-09 15:39:19 +03:00
parent 2ac9bbf220
commit a1261ce0db
11 changed files with 304 additions and 36 deletions
--- a/package.json
+++ b/package.json
@@ -13,8 +13,8 @@
    "gen:api": "npx swagger-typescript-api@12.0.4 -p http://localhost:1337/api/docs-json -o ./src/api -n api.ts --axios --unwrap-response-data --extract-request-params --extract-request-body --single-http-client"
  },
  "dependencies": {
-    "@tanstack/vue-query": "^5.101.0",
    "@floating-ui/vue": "^1.1.5",
+    "@tanstack/vue-query": "^5.101.0",
    "@tauri-apps/api": "^2",
    "@tauri-apps/plugin-dialog": "^2",
    "@tauri-apps/plugin-shell": "^2",
@@ -25,6 +25,7 @@
    "esbuild": "^0.28.0",
    "gsap": "^3.12.5",
    "leaflet": "^1.9.4",
+    "socket.io-client": "^4.8.3",
    "vue": "^3.5.6",
    "vue-router": "^4.4.5"
  },
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -46,6 +46,9 @@ importers:
      leaflet:
        specifier: ^1.9.4
        version: 1.9.4
+      socket.io-client:
+        specifier: ^4.8.3
+        version: 4.8.3
      vue:
        specifier: ^3.5.6
        version: 3.5.35(typescript@5.9.3)
@@ -989,6 +992,9 @@ packages:
    resolution: {integrity: sha512-TeheYy0ILzBEI/CO55CP6zJCSdSWeRtGnHy8U8dWSUH4I68iqTsy7HkMktR4xakThc9jotkPQUXT4ITdbV7cHA==}
    engines: {node: '>=18'}

+  '@socket.io/component-emitter@3.1.2':
+    resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==}
+
  '@stylistic/eslint-plugin@5.10.0':
    resolution: {integrity: sha512-nPK52ZHvot8Ju/0A4ucSX1dcPV2/1clx0kLcH5wDmrE4naKso7TUC/voUyU1O9OTKTrR6MYip6LP0ogEMQ9jPQ==}
    engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
@@ -1587,6 +1593,13 @@ packages:
    resolution: {integrity: sha512-YGRs8knHhKHVShLkFET/rWAU8kmHbOV5LwN938RHI0pljAJ1Gf6SzXsSmRaEzcXTtOOmVqJ5+WtQPL5uigY50Q==}
    engines: {node: '>=14'}

+  engine.io-client@6.6.5:
+    resolution: {integrity: sha512-QCwxUDULPlXv8F6tqMMKx5dNkTe6OaBYRMPYeXKBlyOoKvAmE0ac6pW7fFhSscJ/5SI7666/U/B+MElbsrJlIg==}
+
+  engine.io-parser@5.2.3:
+    resolution: {integrity: sha512-HqD3yTBfnBxIrbnM1DoD6Pcq8NECnh8d4As1Qgh0z5Gg3jRRIqijury0CL3ghu/edArpUYiYqQiDUQBIs4np3Q==}
+    engines: {node: '>=10.0.0'}
+
  enhanced-resolve@5.23.0:
    resolution: {integrity: sha512-yJN/BOOLxcOW2aQgeif9mSnaUB8KtvmMMp56oA1kx1CRfBKbhZm2pJ+NBY+3eOboHxix8lfjWpHE0Ei5U8RbSA==}
    engines: {node: '>=10.13.0'}
@@ -2516,6 +2529,14 @@ packages:
  sisteransi@1.0.5:
    resolution: {integrity: sha512-bLGGlR1QxBcynn2d5YmDX4MGjlZvy2MRBDRNHLJ8VI6l6+9FUiyTFNJ0IveOSP0bcXgVDPRcfGqA0pjaqUpfVg==}

+  socket.io-client@4.8.3:
+    resolution: {integrity: sha512-uP0bpjWrjQmUt5DTHq9RuoCBdFJF10cdX9X+a368j/Ft0wmaVgxlrjvK3kjvgCODOMMOz9lcaRzxmso0bTWZ/g==}
+    engines: {node: '>=10.0.0'}
+
+  socket.io-parser@4.2.6:
+    resolution: {integrity: sha512-asJqbVBDsBCJx0pTqw3WfesSY0iRX+2xzWEWzrpcH7L6fLzrhyF8WPI8UaeM4YCuDfpwA/cgsdugMsmtz8EJeg==}
+    engines: {node: '>=10.0.0'}
+
  source-map-js@1.2.1:
    resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
    engines: {node: '>=0.10.0'}
@@ -2708,10 +2729,26 @@ packages:
    resolution: {integrity: sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==}
    engines: {node: '>=0.10.0'}

+  ws@8.20.1:
+    resolution: {integrity: sha512-It4dO0K5v//JtTXuPkfEOaI3uUN87iYPnqo/ZzqCoG3g8uhA66QUMs/SrM0YK7/NAu+r4LMh/9dq2A7k+rHs+w==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+
  xml-name-validator@4.0.0:
    resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==}
    engines: {node: '>=12'}

+  xmlhttprequest-ssl@2.1.2:
+    resolution: {integrity: sha512-TEU+nJVUUnA4CYJFLvK5X9AOeH4KvDvhIfm0vV1GaQRtchnG0hgK5p8hw/xjv8cunWYCsiPCSDzObPyhEwq3KQ==}
+    engines: {node: '>=0.4.0'}
+
  yaml-eslint-parser@2.0.0:
    resolution: {integrity: sha512-h0uDm97wvT2bokfwwTmY6kJ1hp6YDFL0nRHwNKz8s/VD1FH/vvZjAKoMUE+un0eaYBSG7/c6h+lJTP+31tjgTw==}
    engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -3317,6 +3354,8 @@ snapshots:

  '@sindresorhus/base62@1.0.0': {}

+  '@socket.io/component-emitter@3.1.2': {}
+
  '@stylistic/eslint-plugin@5.10.0(eslint@10.4.1(jiti@2.7.0))':
    dependencies:
      '@eslint-community/eslint-utils': 4.9.1(eslint@10.4.1(jiti@2.7.0))
@@ -3895,6 +3934,20 @@ snapshots:

  empathic@2.0.1: {}

+  engine.io-client@6.6.5:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.4.3
+      engine.io-parser: 5.2.3
+      ws: 8.20.1
+      xmlhttprequest-ssl: 2.1.2
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  engine.io-parser@5.2.3: {}
+
  enhanced-resolve@5.23.0:
    dependencies:
      graceful-fs: 4.2.11
@@ -5095,6 +5148,24 @@ snapshots:

  sisteransi@1.0.5: {}

+  socket.io-client@4.8.3:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.4.3
+      engine.io-client: 6.6.5
+      socket.io-parser: 4.2.6
+    transitivePeerDependencies:
+      - bufferutil
+      - supports-color
+      - utf-8-validate
+
+  socket.io-parser@4.2.6:
+    dependencies:
+      '@socket.io/component-emitter': 3.1.2
+      debug: 4.4.3
+    transitivePeerDependencies:
+      - supports-color
+
  source-map-js@1.2.1: {}

  spdx-exceptions@2.5.0: {}
@@ -5246,8 +5317,12 @@ snapshots:

  word-wrap@1.2.5: {}

+  ws@8.20.1: {}
+
  xml-name-validator@4.0.0: {}

+  xmlhttprequest-ssl@2.1.2: {}
+
  yaml-eslint-parser@2.0.0:
    dependencies:
      eslint-visitor-keys: 5.0.1
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -3,6 +3,6 @@ shellEmulator: true
 trustPolicy: no-downgrade

 allowBuilds:
-  '@parcel/watcher': set this to true or false
-  esbuild: set this to true or false
-  vue-demi: set this to true or false
+  '@parcel/watcher': false
+  esbuild: false
+  vue-demi: false
--- a/src/api/api.ts
+++ b/src/api/api.ts
@@ -169,9 +169,17 @@ export interface MatchDto {
  createdAt: string;
 }

+export interface ChatDto {
+  id: string;
+  profile1Id: string;
+  profile2Id: string;
+  status: "active" | "closed";
+}
+
 export interface CreateLikeResponseDto {
  like: LikeDto;
  match?: MatchDto | null;
+  chat?: ChatDto | null;
 }

 export interface CreateChatDto {
@@ -181,13 +189,6 @@ export interface CreateChatDto {
  matchId: string;
 }

-export interface ChatDto {
-  id: string;
-  profile1Id: string;
-  profile2Id: string;
-  status: "active" | "closed";
-}
-
 export interface MessageDto {
  id: string;
  chatId: string;
@@ -204,6 +205,17 @@ export interface SendMessageDto {
  mediaType?: "photo" | "voice" | "video";
 }

+export interface CloseChatDto {
+  /** cancel — отменить матч, report — пожаловаться */
+  type: "cancel" | "report";
+  /** Сообщение собеседнику при отмене матча */
+  cancelMessage?: string;
+  /** Причина жалобы (preset) */
+  reportReason?: string;
+  /** Дополнительное описание жалобы */
+  reportDescription?: string;
+}
+
 export interface CreateDateDto {
  /** Your profile ID */
  profileId: string;
@@ -978,16 +990,22 @@ export class Api<SecurityDataType extends unknown> {
     *
     * @tags chat
     * @name ChatControllerCloseChat
-     * @summary Close a chat
+     * @summary Close a chat (cancel match or report)
     * @request DELETE:/api/v1/chats/{chatId}
     * @secure
     */
-    chatControllerCloseChat: ({ chatId, ...query }: ChatControllerCloseChatParams, params: RequestParams = {}) =>
+    chatControllerCloseChat: (
+      { chatId, ...query }: ChatControllerCloseChatParams,
+      data: CloseChatDto,
+      params: RequestParams = {},
+    ) =>
      this.http.request<MessageResponseDto, any>({
        path: `/api/v1/chats/${chatId}`,
        method: "DELETE",
        query: query,
+        body: data,
        secure: true,
+        type: ContentType.Json,
        format: "json",
        ...params,
      }),
--- a/src/components/layout/SideNav.vue
+++ b/src/components/layout/SideNav.vue
@@ -45,12 +45,12 @@
 </template>

 <script setup lang="ts">
+import type { IconName } from '@/assets/icons/icon-names'
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
+import AppIcon from '@/components/common/AppIcon.vue'
 import { useAuth } from '@/composables/useAuth'
 import { useUi } from '@/composables/useUi'
-import AppIcon from '@/components/common/AppIcon.vue'
-import type { IconName } from '@/assets/icons/icon-names'

 const route = useRoute()
 const authStore = useAuth()
@@ -68,7 +68,7 @@ const navItems: NavItem[] = [
  { name: 'feed', path: '/feed', label: 'Лента', icon: 'grid' },
  { name: 'matches', path: '/matches', label: 'Совпадения', icon: 'heart' },
  { name: 'chats', path: '/chats', label: 'Чаты', icon: 'chat' },
-  { name: 'dates', path: '/dates', label: 'Встречи', icon: 'calendar' },
+  // { name: 'dates', path: '/dates', label: 'Встречи', icon: 'calendar' },
  { name: 'profile', path: '/profile/me', label: 'Профиль', icon: 'person' },
 ]

--- a/src/components/profile/MediaGallery.vue
+++ b/src/components/profile/MediaGallery.vue
@@ -22,11 +22,11 @@
        class="gallery__item"
      >
        <img
-          :src="item.url"
+          :src="item.path"
          class="gallery__img"
          alt="Медиа"
          loading="lazy"
-          @click="lightboxUrl = item.url"
+          @click="lightboxUrl = item.path"
        >
        <button
          v-if="editable"
@@ -56,12 +56,12 @@

 <script setup lang="ts">
 import { ref } from 'vue'
-import { apiClient } from '@/api/client'
+import { apiClient, axiosInstance, BASE_URL } from '@/api/client'
 import { useUi } from '@/composables/useUi'

 interface MediaItem {
  id: string
-  url: string
+  path: string
  type: string
 }

@@ -114,11 +114,28 @@ async function onFileChange(e: Event) {
    fileInput.value.value = ''
 }

-async function doUpload(_file: File | null, _tauriPath?: string) {
+async function doUpload(file: File | null, tauriPath?: string) {
  uploading.value = true
  try {
-    // API expects multipart/form-data with the file; we pass query type=photo
-    await apiClient.api.mediaControllerUpload({ profileId: props.profileId, type: 'photo' })
+    const formData = new FormData()
+    if (file) {
+      formData.append('file', file)
+    }
+    else if (tauriPath) {
+      const { convertFileSrc } = await import('@tauri-apps/api/core')
+      const assetUrl = convertFileSrc(tauriPath)
+      const res = await fetch(assetUrl)
+      const blob = await res.blob()
+      const name = tauriPath.split(/[\\/]/).pop() ?? 'photo.jpg'
+      formData.append('file', blob, name)
+    }
+    else {
+      throw new Error('No file provided')
+    }
+    await axiosInstance.post(
+      `${BASE_URL}/api/v1/profiles/${props.profileId}/media/upload?type=photo`,
+      formData,
+    )
    uiStore.addToast('Фото загружено', 'success')
    await loadMedia()
    emit('updated')
--- a/src/composables/useSocket.ts
+++ b/src/composables/useSocket.ts
@@ -0,0 +1,65 @@
+import { io, Socket } from 'socket.io-client'
+import { ref } from 'vue'
+import { BASE_URL, _getAccessToken } from '@/api/client'
+
+let socket: Socket | null = null
+const connected = ref(false)
+
+export function useSocket() {
+  function connect(profileId: string) {
+    if (socket?.connected) return
+    if (socket) {
+      socket.disconnect()
+      socket = null
+    }
+
+    const token = _getAccessToken()
+    if (!token) return
+
+    socket = io(`${BASE_URL}/chat`, {
+      path: '/socket.io',
+      transports: ['websocket'],
+      auth: { token, profileId },
+    })
+
+    socket.on('connect', () => {
+      connected.value = true
+    })
+    socket.on('disconnect', () => {
+      connected.value = false
+    })
+  }
+
+  function disconnect() {
+    socket?.disconnect()
+    socket = null
+    connected.value = false
+  }
+
+  function on<T = any>(event: string, handler: (data: T) => void) {
+    socket?.on(event, handler)
+    return () => socket?.off(event, handler)
+  }
+
+  function off(event: string, handler: (...args: any[]) => void) {
+    socket?.off(event, handler)
+  }
+
+  function emit(event: string, data: any) {
+    socket?.emit(event, data)
+  }
+
+  function joinChat(chatId: string) {
+    socket?.emit('join_chat', { chatId })
+  }
+
+  function leaveChat(chatId: string) {
+    socket?.emit('leave_chat', { chatId })
+  }
+
+  function sendTyping(chatId: string, isTyping: boolean) {
+    socket?.emit('typing', { chatId, isTyping })
+  }
+
+  return { connect, disconnect, on, off, emit, joinChat, leaveChat, sendTyping, connected }
+}
--- a/src/queries/useChatsQuery.ts
+++ b/src/queries/useChatsQuery.ts
@@ -1,8 +1,9 @@
-import type { ChatDto, MessageDto } from '@/api/api'
 import type { MaybeRefOrGetter } from 'vue'
-import { computed, toValue } from 'vue'
+import type { ChatDto, MessageDto } from '@/api/api'
 import { useMutation, useQuery, useQueryClient } from '@tanstack/vue-query'
-import { apiClient } from '@/api/client'
+import { computed, toValue } from 'vue'
+import { apiClient, axiosInstance } from '@/api/client'
+import { useAuth } from '@/composables/useAuth'
 import { queryKeys } from './keys'

 export interface ChatPartner {
@@ -11,15 +12,23 @@ export interface ChatPartner {
  avatarUrl?: string
 }

-// The API returns richer chat objects than ChatDto — these extra fields aren't in the generated types
 export type Chat = ChatDto & {
  partner?: ChatPartner
  lastMessage?: MessageDto
  unreadCount?: number
 }

+export interface CloseChatPayload {
+  chatId: string
+  type: 'cancel' | 'report'
+  cancelMessage?: string
+  reportReason?: string
+  reportDescription?: string
+}
+
 export function useChatsQuery(profileId: MaybeRefOrGetter<string | undefined>) {
  const qc = useQueryClient()
+  const authStore = useAuth()
  const pid = () => toValue(profileId) ?? ''

  const query = useQuery({
@@ -35,9 +44,15 @@ export function useChatsQuery(profileId: MaybeRefOrGetter<string | undefined>) {
  })

  const closeChat = useMutation({
-    mutationFn: ({ chatId }: { chatId: string }) =>
-      apiClient.api.chatControllerCloseChat({ chatId, profileId: pid() }),
-    onSuccess: () => qc.invalidateQueries({ queryKey: queryKeys.chats(pid()) }),
+    mutationFn: ({ chatId, type, cancelMessage, reportReason, reportDescription }: CloseChatPayload) =>
+      axiosInstance.delete(`/api/v1/chats/${chatId}`, {
+        params: { profileId: pid() },
+        data: { type, cancelMessage, reportReason, reportDescription },
+      }),
+    onSuccess: async () => {
+      await authStore.fetchMe()
+      qc.invalidateQueries({ queryKey: queryKeys.chats(pid()) })
+    },
  })

  return { query, openChat, closeChat }
--- a/src/views/matches/MatchesView.vue
+++ b/src/views/matches/MatchesView.vue
@@ -61,6 +61,7 @@
 </template>

 <script setup lang="ts">
+import type { EnrichedMatch } from '@/queries/useMatchesQuery'
 import { computed } from 'vue'
 import { useRouter } from 'vue-router'
 import AppButton from '@/components/common/AppButton.vue'
@@ -70,7 +71,6 @@ import { useAuth } from '@/composables/useAuth'
 import { useUi } from '@/composables/useUi'
 import { useChatsQuery } from '@/queries/useChatsQuery'
 import { useMatchesQuery } from '@/queries/useMatchesQuery'
-import type { EnrichedMatch } from '@/queries/useMatchesQuery'

 const authStore = useAuth()
 const uiStore = useUi()
@@ -79,7 +79,7 @@ const router = useRouter()
 const profileId = computed(() => authStore.activeProfile?.id)

 const { data: matches, isLoading: loading } = useMatchesQuery(profileId)
-const { openChat: openChatMutation } = useChatsQuery(profileId)
+const { query: { data: chats }, openChat: openChatMutation } = useChatsQuery(profileId)

 function calcAge(birthDate: string): number | undefined {
  const birth = new Date(birthDate)
@@ -93,13 +93,23 @@ function calcAge(birthDate: string): number | undefined {
 }

 async function openChat(match: EnrichedMatch) {
+  // const existing = (chats.value ?? []).find(
+  //   c => c.status === 'active'
+  //     && (c.profile1Id === match.partnerProfile.id || c.profile2Id === match.partnerProfile.id),
+  // )
+  // if (existing) {
+  //   router.push(`/chats/${existing.id}`)
+  //   return
+  // }
  try {
    const chat = await openChatMutation.mutateAsync({ matchId: match.id })
    router.push(`/chats/${chat.id}`)
  }
  catch (err: unknown) {
    const msg = (err as { response?: { data?: { message?: string } } })
-      ?.response?.data?.message ?? 'Не удалось открыть чат'
+      ?.response
+      ?.data
+      ?.message ?? 'Не удалось открыть чат'
    uiStore.addToast(msg, 'error')
  }
 }
--- a/src/views/profile/MyProfileView.vue
+++ b/src/views/profile/MyProfileView.vue
@@ -82,6 +82,27 @@
        <MediaGallery :profile-id="profile.id" :editable="true" />
      </div>

+      <!-- Chat history -->
+      <div class="my-profile__section">
+        <h3 class="my-profile__section-title">
+          Общение
+        </h3>
+        <RouterLink to="/chats" class="my-profile__chat-history-link">
+          <span class="my-profile__chat-history-icon">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="18" height="18">
+              <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+            </svg>
+          </span>
+          <span class="my-profile__chat-history-text">
+            <span class="my-profile__chat-history-label">История чатов</span>
+            <span class="meta my-profile__chat-history-meta">Активные диалоги и прошлые переписки</span>
+          </span>
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" width="16" height="16" class="my-profile__chat-history-arrow">
+            <path d="M9 18l6-6-6-6" />
+          </svg>
+        </RouterLink>
+      </div>
+
      <!-- Danger zone -->
      <div class="my-profile__section my-profile__danger">
        <AppButton variant="danger" size="sm" @click="confirmDelete = true">
@@ -328,6 +349,52 @@ function calcAge(birthDate: string) {
    letter-spacing: 0.03em;
  }

+  &__chat-history-link {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 12px 16px;
+    background: rgba(240, 235, 224, 0.04);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-sm, 4px);
+    text-decoration: none;
+    color: var(--color-cream);
+    transition: background var(--transition-fast);
+
+    &:hover {
+      background: rgba(240, 235, 224, 0.07);
+    }
+  }
+
+  &__chat-history-icon {
+    color: var(--color-signal);
+    flex-shrink: 0;
+    display: flex;
+  }
+
+  &__chat-history-text {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  &__chat-history-label {
+    font-family: var(--font-mono);
+    font-size: 0.9375rem;
+    font-weight: 500;
+  }
+
+  &__chat-history-meta {
+    color: var(--color-muted);
+  }
+
+  &__chat-history-arrow {
+    color: var(--color-muted);
+    flex-shrink: 0;
+  }
+
  &__danger {
    padding-top: 16px;
    border-top: 1px solid rgba(196, 92, 58, 0.2);
--- a/src/views/profile/ProfileDetailView.vue
+++ b/src/views/profile/ProfileDetailView.vue
@@ -54,9 +54,9 @@

          <!-- Actions (non-own) -->
          <div v-if="!isOwnProfile" class="profile-detail__actions">
-            <AppButton size="sm" variant="primary" @click="dateOpen = true">
-              Встреча
-            </AppButton>
+            <!--            <AppButton size="sm" variant="primary" @click="dateOpen = true"> -->
+            <!--              Встреча -->
+            <!--            </AppButton> -->
            <AppButton size="sm" variant="ghost" @click="reportOpen = true">
              Пожаловаться
            </AppButton>