From a7867054a4d3b433d601701d73c9f500a684f9b2 Mon Sep 17 00:00:00 2001
From: Iu <iu@prhub.ru>
Date: Sun, 11 Oct 2026 18:09:54 +0300
Subject: [PATCH] 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
---
 frontend/src/lib/components/Viewer.svelte     |  4 +--
 .../viewer-thumbnail-hover/.openspec.yaml     |  2 ++
 .../viewer-thumbnail-hover/proposal.md        | 26 +++++++++++++++++++
 .../specs/ui-workspace/spec.md                | 26 +++++++++++++++++++
 .../changes/viewer-thumbnail-hover/tasks.md   | 12 +++++++++
 5 files changed, 68 insertions(+), 2 deletions(-)
 create mode 100644 openspec/changes/viewer-thumbnail-hover/.openspec.yaml
 create mode 100644 openspec/changes/viewer-thumbnail-hover/proposal.md
 create mode 100644 openspec/changes/viewer-thumbnail-hover/specs/ui-workspace/spec.md
 create mode 100644 openspec/changes/viewer-thumbnail-hover/tasks.md

diff --git a/frontend/src/lib/components/Viewer.svelte b/frontend/src/lib/components/Viewer.svelte
index 5b8f3c3..5b6cfee 100644
--- a/frontend/src/lib/components/Viewer.svelte
+++ b/frontend/src/lib/components/Viewer.svelte
@@ -443,7 +443,7 @@
 		{#each photos as photo, i (photo.id)}
 			<button
 				type="button"
-				class="h-16 w-16 shrink-0 overflow-hidden rounded border {i === index
+				class="group h-16 w-16 shrink-0 overflow-hidden rounded border {i === index
 					? 'border-primary'
 					: 'border-border'}"
 				onclick={() => onIndexChange(i)}
@@ -454,7 +454,7 @@
 					<img
 						src={photo.thumb_url}
 						alt=""
-						class="h-full w-full object-cover"
+						class="h-full w-full object-cover transition-transform duration-200 group-hover:scale-105 group-focus-visible:scale-105"
 						loading="lazy"
 					/>
 				{:else}
diff --git a/openspec/changes/viewer-thumbnail-hover/.openspec.yaml b/openspec/changes/viewer-thumbnail-hover/.openspec.yaml
new file mode 100644
index 0000000..a369219
--- /dev/null
+++ b/openspec/changes/viewer-thumbnail-hover/.openspec.yaml
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-10-11
diff --git a/openspec/changes/viewer-thumbnail-hover/proposal.md b/openspec/changes/viewer-thumbnail-hover/proposal.md
new file mode 100644
index 0000000..b6f0f6c
--- /dev/null
+++ b/openspec/changes/viewer-thumbnail-hover/proposal.md
@@ -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`).
+- Раскладка ленты и клавиатурная навигация не меняются.
diff --git a/openspec/changes/viewer-thumbnail-hover/specs/ui-workspace/spec.md b/openspec/changes/viewer-thumbnail-hover/specs/ui-workspace/spec.md
new file mode 100644
index 0000000..d9a8af1
--- /dev/null
+++ b/openspec/changes/viewer-thumbnail-hover/specs/ui-workspace/spec.md
@@ -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** изображение миниатюры плавно увеличивается внутри плитки
diff --git a/openspec/changes/viewer-thumbnail-hover/tasks.md b/openspec/changes/viewer-thumbnail-hover/tasks.md
new file mode 100644
index 0000000..1225aea
--- /dev/null
+++ b/openspec/changes/viewer-thumbnail-hover/tasks.md
@@ -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` плитки постоянен.