# Dating — Frontend

Vue 3 + Vite + Tauri v2. Работает как PWA в браузере и как нативное десктопное приложение (Windows / macOS / Linux).

## Стек

| Слой | Технология                                      |
|---|-------------------------------------------------|
| UI framework | Vue 3 (Composition API, `<script setup>`)       |
| Build tool | Vite 6                                          |
| Desktop shell | Tauri v2                                        |
| State management | Composables                                     |                                     |
| Routing | Vue Router 4                                    |
| HTTP client | Axios (сгенерированный клиент `src/api/api.ts`) |
| Форм-валидация | Vuelidate                                       |
| Анимации | GSAP 3                                          |
| Карты | Leaflet                                         |
| Утилиты | VueUse                                          |
| CSS | SCSS + Tailwind v4 (reset-only)                 |
| Package manager | pnpm                                            |
| TypeScript | строгий режим, `no any`                         |

---

## Быстрый старт

### Зависимости

- Node.js ≥ 20
- pnpm ≥ 9 (`npm i -g pnpm`)
- Rust + cargo (для Tauri: [rustup.rs](https://rustup.rs))
- Tauri CLI устанавливается через pnpm как dev-зависимость

```bash
# Клонировать репо
git clone <repo-url>
cd dating-app-frontend

# Установить зависимости
pnpm install

# Запустить в браузере (порт 3000) (old 1420)
pnpm dev

# Запустить с Tauri (нативное окно)
pnpm tauri dev
```

### Переменные окружения

Создайте `.env.local` в корне:

```env
VITE_API_BASE_URL=http://localhost:3000
```

По умолчанию фоллбэк — `http://localhost:3000`.

---

## Структура проекта

```
dating-app-frontend/
├── src/
│   ├── api/
│   │   ├── api.ts          # Сгенерированный клиент (не трогать)
│   │   └── client.ts       # Axios-инстанс + интерцептор refresh-токена
│   ├── assets/
│   │   └── grain.svg       # SVG-текстура шума для фона
│   ├── components/
│   │   ├── common/         # AppButton, AppInput, AppModal, AppDrawer,
│   │   │                   # AppToast, LoadingSpinner, EmptyState
│   │   ├── layout/         # AppShell, SideNav, BottomNav, TauriTitlebar
│   │   ├── feed/           # FeedCard, FeedCardStack, FeedFilters, ProfileBadge
│   │   ├── chat/           # ChatBubble, ChatInput, VoiceRecorder, MediaMessage
│   │   ├── profile/        # ProfileEditor, MediaGallery
│   │   ├── dates/          # MapPicker, DateProposalForm
│   │   └── reports/        # ReportModal
│   ├── composables/        # useAuth, useFeed, useChat, useMedia, useGeolocation
│   ├── router/
│   │   └── index.ts        # Маршруты + guards + восстановление сессии
│   ├── stores/
│   │   ├── auth.store.ts   # user, accessToken (in-memory), profiles
│   │   ├── feed.store.ts   # cards, filters, pagination
│   │   ├── chat.store.ts   # chats, messages, polling
│   │   ├── profile.store.ts
│   │   └── ui.store.ts     # toasts, sidebar state, reference data (tags/cities)
│   ├── styles/
│   │   ├── _variables.scss # CSS custom properties + SCSS breakpoint-миксины
│   │   ├── _typography.scss
│   │   ├── _animations.scss
│   │   ├── main.scss       # Глобальные стили (без Tailwind)
│   │   └── tailwind.css    # @import "tailwindcss" — отдельно от SCSS
│   ├── views/              # LoginView, RegisterView, ProfileSetupView,
│   │                       # FeedView, MatchesView, ChatsListView, ChatRoomView,
│   │                       # DatesView, MyProfileView, ProfileDetailView,
│   │                       # ReportsView (admin)
│   ├── App.vue
│   ├── main.ts
│   └── vite-env.d.ts
├── src-tauri/
│   ├── src/
│   │   ├── lib.rs          # Tauri plugins init
│   │   └── main.rs         # Windows entry (no console window)
│   ├── capabilities/
│   │   └── default.json    # Tauri permissions
│   ├── Cargo.toml
│   ├── build.rs
│   └── tauri.conf.json
├── PRODUCT.md              # Стратегический документ для AI-ассистентов
├── vite.config.ts
├── tsconfig.json
└── package.json
```

---

## Маршрутизация

| Путь | Компонент | Guard |
|---|---|---|
| `/` | redirect → `/feed` | — |
| `/login` | LoginView | guest only |
| `/register` | RegisterView | guest only |
| `/setup` | ProfileSetupView | auth |
| `/feed` | FeedView | auth |
| `/matches` | MatchesView | auth |
| `/chats` | ChatsListView | auth |
| `/chats/:chatId` | ChatRoomView | auth |
| `/dates` | DatesView | auth |
| `/profile/me` | MyProfileView | auth |
| `/profile/:profileId` | ProfileDetailView | auth |
| `/admin/reports` | ReportsView | auth + admin |

Логика guard:
1. При первой навигации пытается восстановить сессию через `refreshToken` из localStorage.
2. Если пользователь авторизован, но профилей нет — редирект на `/setup`.
3. Если токен истёк — silent refresh через `POST /api/v1/auth/refresh`.

---

## Работа с токенами

```
Access token  → хранится только в памяти (Pinia store / переменная модуля)
Refresh token → localStorage ('refreshToken')
```

`src/api/client.ts` содержит Axios response interceptor: при получении 401 пытается один раз обновить токен. Если не удаётся — чистит сессию и редиректит на `/login`. Параллельные запросы ставятся в очередь и резолвятся с новым токеном.

---

## Управление состоянием

### auth.store

```ts
state: { user, accessToken (in-memory ref), activeProfileId }
actions: login, logout, register, fetchMe, setActiveProfile,
         addProfile, updateProfile, removeProfile
```

### feed.store

```ts
state: { cards[], filters, page, hasMore, searchPaused, loading }
actions: fetchNextPage(profileId), applyFilters(filters), removeCard(profileId)
```

### chat.store

```ts
state: { chats[], activeChat, messages[], pollingTimer }
actions: fetchChats, fetchMessages, sendMessage, openChat, closeChat,
         startPolling, stopPolling
// Polling интервал: 2000 мс. Место замены на WebSocket помечено комментарием.
```

### ui.store

```ts
state: { toasts[], sidebarExpanded, tags[], cities[], districts{}, greetings[] }
actions: addToast(message, type, duration), removeToast(id), setTags/Cities/...
```

---

## SCSS-архитектура

Tailwind v4 импортируется **отдельно** от SCSS:

```ts
// main.ts — порядок важен
import '@/styles/tailwind.css'  // @import "tailwindcss"
import '@/styles/main.scss'     // custom styles
```

Каждый SCSS-парциал (`_typography.scss`, `_animations.scss`) включает в начале:

```scss
@use 'variables' as *;
```

Это нужно, так как Sass module system (`@use`) имеет пофайловую область видимости — миксины не наследуются транзитивно.

Компоненты Vue используют `<style scoped lang="scss">`. Vite через `additionalData` в `vite.config.ts` автоматически инжектирует `@use "@/styles/_variables.scss" as *;` во все `<style lang="scss">` блоки компонентов (кроме самих файлов стилей, чтобы избежать цикличности).

### Дизайн-токены (CSS custom properties)

```scss
--color-base:      #0d0d0d   // фон приложения
--color-surface:   #161614   // поверхность карточек
--color-surface-2: #1e1e1b   // инпуты, вторичные поверхности
--color-cream:     #f0ebe0   // основной текст
--color-muted:     #6b6860   // второстепенный текст
--color-signal:    #c45c3a   // акцент (CTA, лайк, активный стейт)
--font-display: 'Instrument Serif', serif
--font-mono:    'DM Mono', monospace
```

Шрифты загружаются из Google Fonts в `index.html`.

---

## Tauri

### Обнаружение среды

```ts
const isTauri = typeof window !== 'undefined' && !!window.__TAURI__;
```

### Кастомный тайтлбар

`TauriTitlebar.vue` рендерится только при `isTauri === true`. Контейнер `AppShell.vue` использует `data-tauri-drag-region` для нативного drag окна.

### Файловый диалог

В `ChatInput.vue` и `MediaGallery.vue` при `isTauri` используется `@tauri-apps/plugin-dialog` (`open()`), иначе — стандартный `<input type="file">`.

### Конфигурация окна

`src-tauri/tauri.conf.json`:
- `decorations: false` — убирает системный тайтлбар
- `minWidth: 375` — соответствует мобильному брейкпойнту
- Permissions: `dialog:allow-open`, `dialog:allow-save`, `shell:allow-open`

---

## API-клиент

`src/api/api.ts` — сгенерированный файл (swagger-typescript-api). **Не редактировать вручную.**

`src/api/client.ts` — обёртка:

```ts
import { apiClient } from '@/api/client'

// Пример вызова
const feed = await apiClient.api.feedControllerGetFeed({
  profileId: 'xxx',
  page: 1,
  limit: 20,
})
```

Все методы возвращают `Promise<void>` по типам (ограничение генератора) — кастуйте через `as unknown as YourType`.

---

## Скрипты

```bash
pnpm dev              # Vite dev server, порт 3000
pnpm build            # vue-tsc + vite build → dist/
pnpm preview          # Превью prod-сборки
pnpm tauri dev        # Tauri dev window (запускает pnpm dev внутри)
pnpm tauri build      # Нативный инсталлятор → src-tauri/target/release/bundle/
```

---

## Разработка компонентов

### Новый view

1. Создать файл в `src/views/<section>/`.
2. Добавить маршрут в `src/router/index.ts` с нужными `meta` (`auth`, `admin`).
3. Лениво импортировать: `component: () => import('@/views/...')`.

### Новый компонент

- `<script setup lang="ts">` — обязательно.
- `<style scoped lang="scss">` — изолированные стили.
- Никаких `any` — типы из `src/api/api.ts` или кастомные интерфейсы в сторе/компоненте.
- Ошибки API — через `uiStore.addToast(message, 'error')`, не `console.error`.
- Скелетоны вместо спиннеров для контента с историей (лента, чат, список).

### Анимации

GSAP используется в `FeedCard.vue` для drag-механики. Все GSAP-вызовы оборачивайте в проверку:

```ts
const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches
if (!prefersReducedMotion) {
  gsap.to(el, { ... })
}
```

---

## Известные ограничения

- **Типы API**: генератор возвращает `Promise<void>` для всех методов. Реальные типы ответов приходится кастовать через `as unknown as T`. При регенерации клиента это сохраняется.
- **Polling**: чат поллит каждые 2 секунды. Место замены на WebSocket отмечено комментарием `// TODO: replace with WebSocket subscription` в `chat.store.ts`.
- **FCM**: `POST /api/v1/auth/fcm-token` вызывается как заглушка. Реальная интеграция требует Tauri-плагина для push-уведомлений.
- **Upload**: `mediaControllerUpload` в `MediaGallery.vue` отправляет запрос без тела — нужно доработать под реальный multipart/form-data с файлом.