add meta title, description

apps/frontend/src/main.ts

@@ -1,5 +1,6 @@
 import { createApp } from 'vue'
 import { createHead } from '@unhead/vue'
+import { Head } from '@unhead/vue/components'
 import { VueQueryPlugin, type VueQueryPluginOptions } from '@tanstack/vue-query'
 // import { createPinia } from 'pinia'
 import PouchDB from '@/api/PouchDB'
@@ -47,8 +48,8 @@ const vueQueryPluginOptions: VueQueryPluginOptions = {
   },
 }
 
-const head = createHead()
-app.use(head)
+app.use(createHead())
+app.component('MetaHead', Head)
 app.use(VueQueryPlugin, vueQueryPluginOptions)
 // app.use(createPinia())
 app.use(router)

apps/frontend/src/views/CreateView.vue

@@ -1,4 +1,12 @@
 <template>
+  <MetaHead>
+    <title>Создание QR-кода — НаСвязи</title>
+    <meta
+      name="description"
+      content="Создайте свой QR-код для безопасного и конфиденциального взаимодействия"
+    />
+  </MetaHead>
+
   <div class="max-w-prose mx-auto py-6 px-4 md:px-6">
     <section class="content">
       <div class="max-w-prose mx-auto py-8">

apps/frontend/src/views/DonateView.vue

@@ -1,4 +1,9 @@
 <template>
+  <MetaHead>
+    <title>Поддержите развитие НаСвязи</title>
+    <meta name="description" content="" />
+  </MetaHead>
+
   <section class="max-w-2xl mx-auto py-8 px-4 text-center">
     <h1 class="text-2xl font-bold mb-4">Поддержите развитие НаСвязи</h1>
     <p class="text-gray-600 mb-6">

apps/frontend/src/views/HomeView.vue

@@ -1,6 +1,11 @@
-<script setup lang="ts"></script>
-
 <template>
+  <MetaHead>
+    <title>НаСвязи — Быстрая и конфиденциальная связь через QR-код</title>
+    <meta
+      name="description"
+      content="НаСвязи позволяет быстро и конфиденциально связаться через QR-код. Создайте свой код и обеспечьте удобное взаимодействие без раскрытия личных данных"
+    />
+  </MetaHead>
   <main>
     <TheWelcome />
   </main>

apps/frontend/src/views/ManageQRCodeChatView.vue

@@ -1,4 +1,12 @@
 <template>
+  <MetaHead>
+    <title>Чат {{ chatDoc?.name ? `«${chatDoc.name}»` : '' }} — НаСвязи</title>
+    <meta
+      name="description"
+      content="Ваш QR-код успешно создан! Узнайте, как его использовать и настройте все доступные функции для удобного взаимодействия с окружающими."
+    />
+  </MetaHead>
+
   <div class="flex flex-col min-h-full">
     <!-- Основной контент -->
     <main class="flex-grow flex flex-col">
@@ -47,5 +55,16 @@
 <script setup lang="ts">
 import type { MessageDocument } from '@hereconnect/types'
 import ChatComponent from '@/components/ChatComponent.vue'
-defineProps<{ qr_code_uri: MessageDocument['qr_code_uri']; chat: MessageDocument['chat'] }>()
+import { getQrCodeDocument } from '@/api/qrCode'
+import { useQuery } from '@tanstack/vue-query'
+
+const props = defineProps<{
+  qr_code_uri: MessageDocument['qr_code_uri']
+  chat: MessageDocument['chat']
+}>()
+
+const { data: chatDoc } = useQuery({
+  queryKey: ['qrCode', computed(() => props.qr_code_uri)],
+  queryFn: () => getQrCodeDocument(props.qr_code_uri),
+})
 </script>

apps/frontend/src/views/ManageQRCodeReadyView.vue

@@ -1,4 +1,12 @@
 <template>
+  <MetaHead>
+    <title>Ваш QR-код готов — НаСвязи</title>
+    <meta
+      name="description"
+      content="Просматривайте и управляйте сообщениями, отправленными через ваш QR-код. Полная конфиденциальность и удобный интерфейс чата"
+    />
+  </MetaHead>
+
   <div class="flex flex-col min-h-full">
     <main
       class="flex-grow flex justify-center py-6 px-4 md:px-6"

apps/frontend/src/views/PublicChatView.vue

@@ -1,4 +1,12 @@
 <template>
+  <MetaHead>
+    <title>Чат — НаСвязи</title>
+    <meta
+      name="description"
+      content="Чат QR-кода. Безопасная и конфиденциальная связь для решения всех вопросов"
+    />
+  </MetaHead>
+
   <div class="flex flex-col min-h-full">
     <!-- Основной контент -->
     <main class="flex-grow flex flex-col">

apps/frontend/src/views/ReadQRCodeView.vue

@@ -1,4 +1,9 @@
 <template>
+  <MetaHead>
+    <title></title>
+    <meta name="description" content="" />
+  </MetaHead>
+
   <div class="flex flex-col min-h-full">
     <main class="flex-grow flex items-center justify-center py-6 px-4 md:px-6">
       <section class="max-w-prose w-full flex flex-col gap-10">