# Видеовстречи PoC — Scope и прогресс

Кликабельный HTML-прототип раздела «Видеовстречи» для портала FEroom.
Цель — посмотреть как это выглядит как целое, потыкать сценарии, итерировать UX. **Не функциональный** — все данные моковые, в JS.

Источник требований: `../../docs/vision.md`.

## Формат

- Чистые HTML + CSS + ES-модули JS. Без бандлера, без npm, без фреймворков.
- Открывается через локальный HTTP-сервер (`python3 -m http.server` из директории `poc/`), либо через `Live Server`-расширение в редакторе. Прямое открытие `file://` не подойдёт из-за ES-модулей.
- Стили — отдельный `styles.css` + опционально CSS-переменные для темы.
- Данные — `data/mock.js` (экспорт массивов и объектов), отдельно от рендера.
- Рендер — vanilla DOM API + шаблоны через template literals. Без React.
- Иконки — Lucide через inline SVG или unicode-эмодзи, на усмотрение в первой итерации.

### Структура файлов (черновая)

```
poc/
├── index.html              # десктоп: реестр + карточка + создание
├── mobile.html             # мобильный набор макетов (отдельная страница)
├── styles.css              # десктоп
├── styles.mobile.css       # мобильный
├── app.js                  # десктоп: маршрутизация между экранами/попапами
├── mobile.js               # мобильный
└── data/
    ├── meetings.js         # массив встреч
    ├── participants.js     # участники
    ├── transcripts.js      # фрагменты расшифровок с тайм-кодами
    ├── protocols.js        # тексты протоколов
    └── tasks.js            # задачи-кандидаты + созданные задачи
```

### Как запускать

```
cd projects/video-conference/prototypes/poc
python3 -m http.server 8080
# открыть http://localhost:8080/ — десктоп
# открыть http://localhost:8080/mobile.html — мобильный
```

## Демо-данные

10-15 встреч в реестре. Разные комбинации артефактов:
- Прошедшая со всем (запись + расшифровка + протокол + созданные задачи)
- Прошедшая, расшифровка в процессе
- Прошедшая, без записи (забыли включить)
- Идущая прямо сейчас
- Запланированная на завтра/через неделю
- Закрытая встреча, где я создатель
- Открытая встреча, где я просто участник
- Где я не был, но имею доступ
- С внешним гостем
- Совсем старая (3 месяца назад) — для проверки времени

Реальные русские имена сотрудников, реальные русские названия встреч (планёрки, ретро, обсуждения проектов), реальный осмысленный текст в расшифровках/протоколах (а не lorem ipsum).

---

## Итерация 1: Каркас + реестр

**Результат:** открывается `index.html`, видно навигацию портала (заглушка боковой панели FEroom), внутри — раздел «Видеовстречи» со списком встреч. Можно листать, видеть строки, иконки артефактов. Клик пока ничего не открывает (или открывает заглушку).

### Каркас портала
- [x] Боковая навигация-заглушка (имитация FEroom — несколько разделов, активный «Видеовстречи»)
- [x] Шапка с поиском и аватаром-заглушкой
- [x] Контентная область с заголовком «Видеовстречи» и кнопкой «Создать встречу»

### Реестр — список
- [x] Строки встреч: название, дата/время, длительность, создатель, количество участников
- [x] Иконки-индикаторы артефактов: запись / расшифровка / протокол / задачи (с состояниями «есть» / «обрабатывается» / «нет»)
- [x] Пометка моей роли: создатель / участник / только наблюдатель
- [x] Hover-состояние строки (видно что кликабельно)
- [x] Группировка по датам (Сегодня / Завтра / На этой неделе / Вчера / Ранее на этой неделе / Раньше)

### Моковые данные
- [x] Заполнить `data/meetings.js` минимум на 10-15 встреч с разными комбинациями статусов
- [x] Реальные русские имена и названия

---

## Итерация 2: Фильтры, поиск, состояния списка

**Результат:** реестр становится живым — можно фильтровать, искать, видеть пустые состояния.

### Фильтры
- [x] Период (сегодня / неделя / месяц / всё время)
- [x] Моя роль (все / где я был / где я создатель)
- [x] Статус артефактов (есть протокол / есть расшифровка / без записи)
- [x] Статус встречи (прошла / идёт / запланирована)

### Поиск
- [x] Поиск по названию (живой, по мере ввода)
- [x] Заглушка кнопки «искать по содержанию» с пометкой «скоро»

### Состояния
- [x] Пустой реестр (новый пользователь) — иллюстрация + призыв создать первую встречу
- [x] Пустой результат фильтра — «нет встреч с такими фильтрами», кнопка сброса
- [x] Идущая встреча выделена визуально, есть кнопка «присоединиться»

---

## Итерация 3: Карточка встречи (поп-ап) — основные вкладки

**Результат:** клик по встрече открывает поп-ап. Внутри — шапка и вкладки: участники, медиа, расшифровка, протокол. Содержимое моковое, переключение работает.

### Поп-ап
- [x] Модалка поверх реестра, тёмный оверлей, закрывается по крестику/Esc/клику вне
- [x] Реестр остаётся виден на фоне (контекст не теряется)
- [x] Глубокая ссылка `#/meeting/{id}` — перезагрузка возвращает в тот же поп-ап

### Шапка карточки
- [x] Название, дата/время/длительность, создатель
- [x] Статус (прошла / идёт / запланирована)
- [x] Если идёт — кнопка «присоединиться»
- [x] Меню действий (скачать всё, поделиться, закрыть)

### Вкладка «Участники»
- [x] Список тех кто реально был
- [x] Список приглашённых кто не пришёл (отдельно)
- [x] Различать сотрудников и гостей визуально

### Вкладка «Медиа»
- [x] Видео-плеер (placeholder с иконкой play)
- [x] Кнопки «скачать видео», «скачать аудио»
- [x] Если запись обрабатывается — состояние «готовится»
- [x] Если записи нет — состояние «запись не велась»

### Вкладка «Расшифровка»
- [x] Текст с тайм-кодами слева, реплики справа
- [x] Поиск внутри расшифровки
- [x] Кнопка скачать (txt/md/docx — кнопки-заглушки)
- [x] Клик по тайм-коду подсвечивает фрагмент

### Вкладка «Протокол»
- [x] Структурированный текст: о чём говорили, решения, договорённости
- [x] Кнопка скачать
- [x] Если протокол ещё не готов — состояние «формируется»

---

## Итерация 4: Сценарий «протокол → задачи»

**Результат:** ключевая фишка vision-документа. В карточке появляется вкладка «Задачи» с двумя состояниями: уже созданные задачи и кандидаты на создание. Сценарий редактирования и создания работает (моково — задачи добавляются в локальный массив).

### Вкладка «Задачи» в карточке
- [x] Список уже созданных задач (с ссылкой-заглушкой на трекер)
- [x] Кнопка «предложить задачи из протокола»
- [x] Состояние «протокол ещё не готов» — кнопка неактивна

### Экран предложенных задач
- [x] Открывается как отдельная панель внутри карточки (не уходим со страницы)
- [x] Список карточек-кандидатов:
  - Формулировка (редактируемая)
  - Исполнитель (выпадающий список сотрудников)
  - Срок (date-picker)
  - Цитата из расшифровки откуда задача (с тайм-кодом, раскрывается)
- [x] Чекбокс «создавать эту задачу» (можно снять)
- [x] Кнопка «добавить задачу вручную» (пустая карточка)
- [x] Кнопка «создать N задач» внизу
- [x] После создания — задачи переезжают в список созданных, появляется тост «создано N задач»

### Уведомление о готовности
- [x] Баннер над реестром «по встрече X готов протокол, посмотреть задачи» (со скрытием)

---

## Итерация 5: Создание встречи

**Результат:** работает кнопка «Создать встречу» из шапки реестра. Открывается форма, на выходе — диалог со ссылкой и кнопкой «Войти сразу».

### Форма создания
- [x] Название встречи
- [x] Дата/время (опционально — чекбокс «запланировать на потом»)
- [x] Тип доступа (открытая / закрытая) — segmented control
- [x] Список приглашённых сотрудников — если «закрытая»
- [x] Включить лобби — чекбокс
- [x] Кнопки «Создать» / «Отмена»

### Диалог после создания
- [x] Сообщение «Встреча создана»
- [x] Ссылка в read-only поле с кнопкой «копировать»
- [x] Кнопка «Войти сразу» (открывает заглушку видео)
- [x] Кнопка «Закрыть»

### Заглушка экрана видеовстречи
- [x] Открывается на отдельной странице по `#/video/:id`
- [x] Чёрный экран с двумя тайлами, контролы, кнопка «Завершить» → реестр
- [x] Цикл «создал → зашёл → вышел → реестр» замкнут

---

## Итерация 6: Мобильная версия

**Результат:** `mobile.html` — отдельный набор макетов, не «сжатый десктоп». Можно открыть в режиме мобильного устройства в DevTools и потыкать.

### Главный экран
- [x] Шапка приложения: лого FEroom + аватар
- [x] Большая кнопка «Создать встречу» (FAB) над таб-баром
- [x] Список встреч — карточками, не строками (другая плотность под мобильный)
- [ ] Свайп вниз для обновления — пропущено (декоративная фича)
- [x] Нижняя навигация-таб-бар (5 пунктов, активный — «Встречи»)

### Карточка встречи (мобильная)
- [x] Открывается на отдельном экране (не поп-ап)
- [x] Кнопка «назад» сверху
- [x] Вкладки горизонтальной полосой со скроллом
- [x] То же содержание что на десктопе, переработанная вёрстка

### Сценарий «создать встречу с телефона» в 3 тапа
- [x] FAB → форма (минимальная — только название) → «Создать» → диалог со ссылкой и кнопкой «Войти»
- [x] Дополнительные опции (расписание, доступ) скрыты за «Больше настроек»

### Сценарий «войти по ссылке как гость» с мобилки
- [x] Отдельный экран `mobile.html#/guest/{id}` — лого, название встречи, поле имени, кнопка «Войти»

---

## Итерация 7: Заглушки сложных фич + полировка

**Результат:** в интерфейсе видно «куда мы движемся» — все большие будущие фичи обозначены, чтобы можно было обсуждать UX. Не реализуем — только заглушки.

### Заглушки в навигации/карточке
- [x] Раздел «Аналитика» — экран с графиком и статистикой + пометка «скоро»
- [x] Кнопка «онлайн-доска» во вкладке медиа карточки — тост «появится в следующем релизе»
- [x] Поиск по содержимому транскриптов — кнопка-заглушка рядом с поиском + тост
- [x] Календарь запланированных встреч — отдельный экран с заглушкой-сеткой
- [x] Постоянные комнаты — отдельный экран в боковой навигации с заглушкой

### Полировка
- [x] Единый ритм отступов (4-кратная шкала), типографика (8 размеров)
- [x] Состояния hover/active/focus у всех интерактивных элементов
- [x] Тосты для заглушек, подсказки в title-атрибутах
- [ ] Тёмная/светлая тема — пропущено (по сути светлая тема и так минималистична)
- [x] README в корне `poc/` + intro.html с разбором решений

---

## Архитектурные решения

| Решение | Суть |
|---|---|
| Стек | Чистые HTML/CSS/JS без сборщиков и фреймворков. Открывается через `python3 -m http.server`. |
| Данные | Моковые массивы в `data/*.js`. Никакого fetch, ничего асинхронного — синхронные присваивания. |
| Мобильная версия | Отдельная страница `mobile.html` с своим CSS и JS — не media-queries. Принцип «другие макеты, не сжатый десктоп». |
| Поп-ап карточки | Модалка с глубокой ссылкой `#meeting/{id}` — чтобы перезагрузка возвращала в то же место. Реестр остаётся фоном — контекст не теряется. |
| Иконки | Lucide через inline SVG или unicode-эмодзи. Не подключать внешние CDN — оффлайн-устойчивость. |
| Заглушки | Сложные фичи (аналитика, доска, поиск по транскриптам, календарь) — визуальные заглушки, чтобы видеть общую картину. |

---

## Прогресс

- [x] Итерация 1: Каркас + реестр
- [x] Итерация 2: Фильтры, поиск, состояния
- [x] Итерация 3: Карточка встречи (поп-ап)
- [x] Итерация 4: Сценарий «протокол → задачи»
- [x] Итерация 5: Создание встречи
- [x] Итерация 6: Мобильная версия
- [x] Итерация 7: Заглушки сложных фич + полировка