feat(ui): fix thumbnail size slider direction and add step buttons

2026-10-11 18:21:47 +03:00
parent 6ccb7764e8
commit 41e5dfaeb1
8 changed files with 134 additions and 5 deletions
@@ -0,0 +1,2 @@
+schema: spec-driven
+created: 2026-10-11
@@ -0,0 +1,39 @@
+# Proposal
+
+## Why
+
+Регулятор размера миниатюр работает «наоборот»: сдвиг вправо увеличивает число колонок и
+уменьшает плитки, тогда как пользователи ожидают обратного — вправо крупнее. Это делает
+управление размером контринтуитивным, а без кнопок шага нельзя подстроить сетку одним нажатием.
+Кнопка загрузки к тому же визуально сливается с регулятором в тулбаре альбома.
+
+## What Changes
+
+- Инвертировать отображение регулятора: **вправо — крупнее** (меньше колонок), **влево — мельче**
+  (больше колонок). Каноническое значение и формат хранения не меняются.
+- Добавить по бокам регулятора две иконочные кнопки шага: «−» (мельче) и «+» (крупнее), в пределах
+  существующего диапазона 2..8.
+- Добавить иконки `density_small` и `density_large` в реестр иконок.
+- Отделить кнопку загрузки от регулятора вертикальным разделителем в тулбаре альбома.
+- Оставить единый регулятор в обоих местах — обзор альбомов и сетка фото альбома — с общим
+  сохранённым значением.
+- Не менять ключ `localStorage` и смысл `density.cols`, чтобы не сломать клавиатурную навигацию
+  (шаг строки = число колонок) и не мигрировать сохранённые значения.
+
+## Capabilities
+
+### New Capabilities
+
+Нет.
+
+### Modified Capabilities
+
+- `ui-workspace`: требование «Плотность сетки» уточняется — направление регулятора (вправо
+  крупнее), кнопки шага и единый размер в обоих местах.
+
+## Impact
+
+- Frontend: `lib/components/DensityControl.svelte`, `lib/stores/density.svelte.ts`,
+  `lib/icons/registry.ts`, `routes/(app)/albums/[id]/+page.svelte`.
+- Сохранённое значение `localStorage['grid-cols']` и семантика `density.cols` остаются прежними.
+- Backend, API и зависимости не затрагиваются.
@@ -0,0 +1,30 @@
+# Spec Delta
+
+## MODIFIED Requirements
+
+### Requirement: Плотность сетки
+
+Сетка SHALL давать пользователю управлять размером миниатюр: сдвиг регулятора вправо SHALL
+увеличивать миниатюры, влево — уменьшать. Регулятор SHALL сопровождаться кнопками шага в
+сторону уменьшения и увеличения. Выбранный размер SHALL сохраняться между сессиями и SHALL
+быть общим для обзора альбомов и сетки фото альбома.
+
+#### Scenario: Изменение размера
+
+- **WHEN** пользователь двигает регулятор плотности
+- **THEN** размер миниатюр меняется, значение сохраняется и восстанавливается при следующем открытии
+
+#### Scenario: Направление регулятора
+
+- **WHEN** пользователь сдвигает регулятор вправо
+- **THEN** миниатюры становятся крупнее; при сдвиге влево — мельче
+
+#### Scenario: Кнопки шага
+
+- **WHEN** пользователь нажимает кнопку увеличения или уменьшения рядом с регулятором
+- **THEN** размер миниатюр меняется на один шаг и сохраняется
+
+#### Scenario: Единый размер в обоих местах
+
+- **WHEN** пользователь меняет размер на обзоре альбомов или в сетке фото альбома
+- **THEN** тот же размер применяется в обоих местах
@@ -0,0 +1,24 @@
+# Tasks
+
+## 1. Иконки плотности
+
+- [x] 1.1 Добавить в `frontend/src/lib/icons/registry.ts` иконки `density_small` и `density_large` (Material Symbols, filled) — проверка: `cd frontend && npm run check` проходит без ошибок, обе иконки отрисованы как вектор через `<Icon name>`.
+
+## 2. Управление размером миниатюр
+
+- [x] 2.1 В `frontend/src/lib/stores/density.svelte.ts` добавить отображение «размер» ↔ `cols` (вправо = крупнее), сохранив `cols` каноническим и ключ `localStorage['grid-cols']` неизменным — проверка: `cd frontend && npm run check`.
+- [x] 2.2 Переписать `frontend/src/lib/components/DensityControl.svelte`: ползунок с направлением «вправо крупнее», кнопки «−»/«+» (`density_small`/`density_large`) по сторонам, доступные имена, диапазон 2..8 — проверка: в `npm run dev` значение меняется ползунком и кнопками и сохраняется.
+- [x] 2.3 Подтвердить, что регулятор показан на обоих экранах и делит одно значение (`frontend/src/routes/(app)/+page.svelte` и `frontend/src/routes/(app)/albums/[id]/+page.svelte`) — проверка: смена размера на обзоре альбомов отражается в сетке альбома и переживает перезагрузку.
+
+## 3. Разделитель в тулбаре альбома
+
+- [x] 3.1 Добавить вертикальный разделитель между `DensityControl` и кнопкой загрузки в `frontend/src/routes/(app)/albums/[id]/+page.svelte` — проверка: в `npm run dev` черта видна, доступные имена обеих кнопок сохранены.
+
+## 4. Интеграционная проверка
+
+- [x] 4.1 `cd frontend && npm run check && npm run build` проходит; вручную: направление ползунка (вправо — крупнее), шаг кнопками, сохранение значения, единый размер в обзоре альбомов и в сетке фото альбома.
+
+## Workflow follow-up
+
+- Заархивировать change после выполнения требований ревью проекта (`/opsx-archive`).
+- Проверить результат после архивации.