feat(ui): hover zoom on viewer thumbnail strip

- Thumbnails scale their image on pointer hover and keyboard focus - Tile size and strip layout stay unchanged
2026-10-11 18:09:54 +03:00
parent 83cc178e79
commit a7867054a4
5 changed files with 68 additions and 2 deletions
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-10-11
@@ -0,0 +1,26 @@
+# Proposal
+
+## Why
+
+Нижняя лента миниатюр в просмотре фото не даёт визуальной обратной связи при наведении, из-за чего
+навигация по ленте ощущается менее отзывчивой, чем в сетке и на обложках альбомов.
+
+## What Changes
+
+- Добавить эффект наведения на миниатюры нижней ленты в режиме просмотра: изображение плавно
+  увеличивается внутри плитки (`scale`), как в сетке.
+- Продублировать эффект при фокусе с клавиатуры (`focus-visible`), чтобы поведение было доступным.
+
+## Capabilities
+
+### New Capabilities
+<!-- нет новых возможностей -->
+
+### Modified Capabilities
+- `ui-workspace`: режим просмотра фото — добавляется сценарий наведения на миниатюру ленты.
+
+## Impact
+
+- `frontend/src/lib/components/Viewer.svelte` — классы плитки и изображения в блоке «Лента миниатюр».
+- Затрагивает и публичный просмотр (share-страницы используют тот же `Viewer.svelte`).
+- Раскладка ленты и клавиатурная навигация не меняются.
@@ -0,0 +1,26 @@
+# Spec Delta
+
+## MODIFIED Requirements
+
+### Requirement: Режим просмотра фотографии
+Просмотр фото SHALL быть отдельным маршрутом внутри каркаса с крупным изображением,
+лентой миниатюр снизу и панелью метаданных и комментариев. Тот же режим SHALL
+использоваться на публичных share-страницах. Миниатюры нижней ленты SHALL давать обратную связь
+при наведении указателя: изображение SHALL плавно увеличиваться внутри плитки; тот же эффект SHALL
+применяться при фокусе с клавиатуры.
+
+#### Scenario: Открытие фото
+- **WHEN** пользователь выбирает фото в сетке
+- **THEN** открывается маршрут фото в каркасе, рейл и панель остаются доступны, адрес отражает фото
+
+#### Scenario: Навигация в просмотре
+- **WHEN** пользователь использует стрелки влево/вправо или ленту миниатюр
+- **THEN** показывается соседнее фото, адрес обновляется
+
+#### Scenario: Публичный просмотр
+- **WHEN** посетитель share-ссылки открывает фото
+- **THEN** используется тот же режим просмотра без рейла и панели
+
+#### Scenario: Наведение на миниатюру
+- **WHEN** пользователь наводит указатель на миниатюру в нижней ленте
+- **THEN** изображение миниатюры плавно увеличивается внутри плитки
@@ -0,0 +1,12 @@
+# Tasks
+
+## 1. Эффект наведения на миниатюры нижней ленты
+
+- [x] 1.1 В `Viewer.svelte` в блоке «Лента миниатюр» добавить плитке класс `group`, а изображению — `transition-transform duration-200 group-hover:scale-105 group-focus-visible:scale-105`. Проверка: наведение указателя плавно увеличивает картинку внутри плитки, клавиатурный фокус даёт тот же эффект.
+- [x] 1.2 Убедиться, что раскладка ленты не меняется: плитка остаётся `h-16 w-16`, overflow скрывает выход за границы, соседние миниатюры не смещаются. Проверка: при наведении координаты соседних плиток не меняются.
+- [x] 1.3 Проверить, что выбор миниатюры по клику по-прежнему меняет фото и текущая миниатюра сохраняет `border-primary`. Проверка: клик по другой миниатюре переключает просмотр, рамка текущей — primary.
+
+## 2. Интеграционная проверка
+
+- [x] 2.1 `npm run check` и `npm run build` во `frontend/` проходят без ошибок. Проверка: обе команды успешны.
+- [x] 2.2 CDP-проверка в режиме просмотра: hover на миниатюре даёт ненулевой `scale` на изображении, а раскладка ленты неизменна. Проверка: computed `transform`/`scale` изображения меняется при наведении, `getBoundingClientRect` плитки постоянен.