# Frontend документация

## Стек технологий

| Компонент | Технология | Примечание |
|-----------|------------|------------|
| Фреймворк | Svelte 4+ | Проверка достаточности возможностей |
| Язык | TypeScript | Строгая типизация |
| Сборщик | Vite | Быстрая разработка |
| Стили | SCSS + CSS Modules | Или Tailwind CSS |
| Состояние | Svelte Stores | Или Zustand-like решение |
| Роутинг | SvelteKit | Если нужен SSR |

---

## Требования к фронтенду

### 1. Основные страницы

- [ ] **Лента (Home)** — посты подписок, бесконечный скролл
- [ ] **Публичная лента** — все посты сервера
- [ ] **Профиль пользователя** — аватар, био, карма, посты
- [ ] **Создание поста** — текстовый редактор + загрузка медиа
- [ ] **Пост (детальный просмотр)** — комментарии, лайки, репосты
- [ ] **Подписки/Подписчики** — списки пользователей
- [ ] **Настройки** — профиль, безопасность, экспорт данных

### 2. Компоненты интерфейса

- [ ] `PostCard` — отображение поста (текст, медиа, карма)
- [ ] `UserProfile` — карточка пользователя
- [ ] `Composer` — форма создания поста
- [ ] `Timeline` — лента постов с пагинацией
- [ ] `MediaGallery` — галерея изображений/видео
- [ ] `KarmaDisplay` — отображение кармы
- [ ] `FollowButton` — кнопка подписки/отписки

### 3. Интеграция с редактором

**Временно**: Используем готовые решения:
- [ ] TipTap — расширяемый WYSIWYG редактор
- [ ] Quill — простой редактор с Markdown поддержкой
- [ ] Markdown textarea — резервный вариант

**В будущем**: Интеграция с Chronicle.nixg.ru

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

- [ ] Глобальное состояние: текущий пользователь, настройки
- [ ] Кэш постов: оптимистичное обновление UI
- [ ] Real-time обновления: WebSocket для новых постов

### 5. Адаптивный дизайн

- [ ] Mobile first подход
- [ ] Поддержка тёмной темы
- [ ] PWA возможности (оффлайн режим, push уведомления)

### 6. Экспорт данных (UI)

- [ ] Кнопка "Экспортировать мои данные" в настройках
- [ ] Прогресс-бар экспорта
- [ ] Скачивание ZIP архива с контентом

---

## Вопросы для проверки Svelte

- [ ] Хватит ли Svelte Stores для сложного состояния (лента + real-time)?
- [ ] Нужен ли SSR через SvelteKit для SEO?
- [ ] Поддержка WebSocket в Svelte (для live обновлений)?
- [ ] Производительность при большом количестве постов в ленте?

---

## План разработки фронтенда

1. [ ] Настройка Svelte + Vite + TypeScript
2. [ ] Базовая структура проекта (роуты, layout)
3. [ ] Компоненты: PostCard, UserProfile, Timeline
4. [ ] Интеграция с REST API бэкенда
5. [ ] Страница создания поста (редактор + медиа)
6. [ ] Real-time обновления (WebSocket)
7. [ ] Экспорт данных (UI + download)
8. [ ] Адаптивность + тёмная тема

---

## Вопросы для обсуждения

- [ ] Нужен ли SSR (SvelteKit) или достаточно SPA?
- [ ] Какой редактор выбрать для MVP (TipTap/Quill/Markdown)?
- [ ] Требуется ли поддержка PWA (оффлайн, push)?
- [ ] Нужна ли локализация интерфейса (только русский или мультиязычность)?