# GoBadminton · загрузка фото и стрелки галереи

Дизайн-дополнение от 07.11.2026 для существующих venue-поверхностей и будущей реализации #507.

[Интерактивный прототип](index.html) · [PNG галерея](screenshots.html) · [Manifest](design-manifest.json) · [Проверки прототипа](browser-evidence.json)

## Решение

Загрузка фотографии использует статичный CSS skeleton в текущем размере кадра. Цвета взяты из действующей paper/line палитры. Два спокойных прямоугольника обозначают ожидаемый контент. Заголовок, адрес и действия площадки остаются доступными во время загрузки.

| Состояние | Полный кадр | Миниатюра 64×64 | Доступность |
|---|---|---|---|
| Загружается известный URL | Статичный skeleton и «Загружаем фотографию…» | Статичный skeleton, подпись в строке | `aria-busy=true`, один status для текущего изображения |
| Изображение декодировано | Реальное фото и точный credit | Реальное фото | Alt относится к текущей площадке |
| Ошибка текущего URL | «Не удалось загрузить фотографию», retry | Нейтральная ячейка, «Фото не загрузилось», отдельный retry | Ошибка и действие доступны с клавиатуры |
| URL/галерея отсутствуют | «Фотографии площадки пока нет» | Нейтральная ячейка, подпись в строке | Текст описывает отсутствие фотографии |

Если существующий разрешённый gallery item имеет `credit.kind=illustration`, готовый asset показывает точную подпись «Иллюстрация». No-photo относится к отсутствию разрешённого опубликованного медиа. Тип источника сохраняется в ready/error переходах.

Размеры кадра сохраняются при каждом переходе. Успешный retry проходит через skeleton и декодированное изображение. Credit официального фото появляется вместе с готовой фотографией. Каталожный источник площадки относится к её данным и может показываться независимо от загрузки медиа.

В этой версии дизайнер выбрал статичную загрузочную поверхность и нейтральный текстовый no-photo. При смене venue ID или URL статус относится к новой идентичности. При cache hit декодированная фотография может отображаться сразу. Произвольная задержка загрузки в продукт не добавляется.

## Поправка к #507

В пустом разделе «Фотографии сообщества» используется текстовый блок с заголовком, пояснением и доступным действием добавления. Он заменяет декоративную мини-ракетку, показанную в #507 v1. Для гостя CTA открывает вход с возвратом к обсуждению площадки. Для авторизованного пользователя CTA открывает composer.

Дополнение применяется к будущему author scope #507. Исходный pack v1 имеет собственный manifest `cc36f348af4e457fd6ce4ec0c74aebf1ff5331442d573f358d2cf53f0ad6042a` и остаётся отдельным входом дизайна.

## Подтверждённое поведение стрелок

Read-only воспроизведение выполнено отдельным измеряющим агентом на DEV alpha.44, SHA `b27f91beceee24029311b9be2e26eca12b343ccb`. Сохранён его [receipt](inputs/live-readonly-receipt.json).

- На LIME FITNESS `/venues/4b44905f-99a3-5be5-8604-77c32247e3cb` две реальные фотографии. При desktop 1280 настоящий mouse click по «Следующее фото» оставлял `1/2`. В event trace `pointerdown` попадал в BUTTON, затем gallery DIV получал pointer capture, `pointerup` и `click` попадали в DIV.
- Программный click диагностически переключал фотографию. Реальная клавиатура переключала фотографию. Mobile touch tap при 390 переключал `1/2 → 2/2`.
- На genuine zero-gallery BADMCLUB `/venues/c64190f9-5c93-5ec5-ba02-75a5dea3cbe3` контролов фотографий нет. Source `VenueGallery` создаёт их при количестве элементов больше одного. `DesktopMapInspector` содержит shell площадки и управление закрытием.

Подтверждённый дефект относится к pointer capture в существующей галерее фотографий. Исправление ранним guard исключает интерактивных потомков из начала drag до `setPointerCapture`. Guard охватывает кнопку и её SVG/другие вложенные элементы через `closest`, ссылки, input/select/textarea и соответствующие интерактивные роли.

В прототипе «Галерея · стрелки и свайп» используются обе реальные фотографии LIME FITNESS с их официальным credit. При нуле и одном изображении количество кадров определяет доступность управления. Межплощадочные prev/next в этот bounded fix не входят.

## Точный author scope

| Файл | Работа |
|---|---|
| `apps/web/src/components/consumer/venues/VenueGallery.tsx` | Статичный pending renderer, явный failed state с retry, credit по готовности, ранний interactive-descendant guard для drag |
| `apps/web/src/components/consumer/venues/VenueCover.tsx` | Одинаковая семантика loading / ready / failed / no-photo на обычной обложке и миниатюрах |
| `apps/web/src/components/consumer/venues/SelectedVenueCover.tsx` | Тот же визуальный статус в текущем единственном image resource и обоих morph slots |
| `apps/web/src/lib/venue-illustration.ts` | Адресное удаление equipment SVG из pending-пути после сверки трёх текущих callers |
| `apps/web/src/styles/venue-gallery.css` | Skeleton/error/empty кадр и текущий gallery chrome |
| `apps/web/src/styles/games.css` | Адресные селекторы cover pending/fallback, включая псевдоэлемент подписи illustration |
| Существующие venue tests | Регрессия реального desktop pointer, cache/load/error, identity смены, миниатюры и вертикальные жесты |
| Будущий `VenueCommunityPhotos` в #507 | Текстовый empty-state и такой же renderer загрузки UGC |

`VenuePage`, `VenuePickerDialog`, `VenuePreviewCard`, `VenueSheet` получают новый результат через переиспользуемые media-компоненты. Retry в picker размещается вне кнопки выбора площадки. Дизайн сохраняет 44 px targets, текущий SVG CloseButton, Onest, радиусы 12/18/28 и desktop «Просторный40».

Обязательные проверки author/QA включают реальный mouse click на обеих стрелках и их вложенном glyph, keyboard, mobile touch tap, horizontal image swipe, vertical handoff к sheet, фокус и source credit. Нужны zero/one/multiple gallery, фото с ошибкой, ready из cache, смена площадки во время pending, compact↔expanded morph и loading fallback. Статичный skeleton действует и при ожидании локального fallback asset. Неудача загрузки фотографии получает error, отсутствие опубликованного медиа получает no-photo.

## Артефакты и evidence

Прототип поддерживает страницу площадки, map sheet/desktop inspector, compact preview, picker, галерею с мышью/клавиатурой/свайпом и empty-state #507. Селектор задаёт loading/ready/error/empty. Кнопка «Показать загрузку → фото» демонстрирует переход на локальном asset с задержкой 1,4 с, заданной только для макета.

PNG подготовлены на 390/430/1280/1440 CSS px. Полноразмерные screenshots показывают страницу целиком, а фиксированная нижняя навигация остаётся на позиции начального viewport. Фактические браузерные проверки и список изображений находятся в `browser-evidence.json`.

Исходные live evidence находятся в `/home/agentagency-dev/train-execution-evidence-20261027/venue-loader-navigation-20261107-readonly/`. В `inputs/` включены receipt и два Slow4G кадра исходного дефекта. Они имеют статус фактического DEV-наблюдения. Screenshots самого addendum имеют статус визуального прототипа.

Source root для инспекции — `/home/agentagency-dev/owner-media406-webp-expansion-20261107`, переданный accepted product SHA `b27f91beceee24029311b9be2e26eca12b343ccb`. Guide inputs — `/opt/gobadminton-clean-qa/style-guide/src/{App.tsx,index.css}`, `consumer-tokens.css` и принятый `DESKTOP_OVERLAY_STYLE_GUIDE.md`.

Фотографии загружены anonymous public GET с существующего DEV. Credit Unischool — Golden Shuttle, [источник](https://goldenshuttle.ru/). Credit LIME FITNESS — официальный сайт, [источник](https://limefitness.club/group/igrovoy-zal/).

Проверки прототипа выполнены автором дизайна. Product fix, независимая QA и Owner UAT относятся к следующему source/release циклу. Текущие #506 и #507 продолжаются по назначению PMA с одним source writer.

## Публикация

Каталог self-contained. Trusted publisher может разместить его по существующей конвенции `projects/gobadminton/design/style-guide/venue-loader/20261107-astra-v1/`. Точный опубликованный URL фиксируется после размещения. Для локального просмотра подходит `python3 -m http.server 8508 --bind 127.0.0.1` из этой папки.