ds-galo/openspec/specs/ui-workspace/spec.md

ui-workspace Specification

Purpose

Рабочий стол веб-приложения: постоянный каркас с рейлом альбомов, контекстной панелью, режимом просмотра фото и адаптивным поведением, обеспечивающий цельный «lightroom»-вид.

Requirements

Requirement: Рабочий стол приложения

Аутентифицированные экраны SHALL отображаться внутри постоянного каркаса с топбаром, левым рейлом альбомов и контекстной правой панелью. Публичные экраны (вход, инвайт, share-ссылка) SHALL отображаться вне каркаса, но в общей теме оформления.

Scenario: Внутренний экран

• WHEN аутентифицированный пользователь открывает список альбомов или альбом
• THEN экран отрисован внутри каркаса с рейлом и панелью, рейл не перезагружается при переходе

Scenario: Публичный экран

• WHEN пользователь открывает публичную share-ссылку без входа
• THEN экран отрисован без рейла и контекстной панели, но в тех же цветовых токенах

Requirement: Рейл альбомов

Рейл SHALL постоянно показывать список доступных альбомов с их обложками и отмечать активный альбом.

Scenario: Активный альбом

• WHEN пользователь находится в альбоме
• THEN соответствующий элемент рейла выделен, остальные показывают обложки или плейсхолдер

Requirement: Создание альбома

Создание альбома SHALL выполняться через иконочную кнопку с подсказкой, открывающую модальное окно ввода названия, вместо инлайн-формы.

Scenario: Создание через модалку

• WHEN пользователь нажимает кнопку создания, вводит название и подтверждает
• THEN система создаёт альбом и делает его активным

Scenario: Пустое название

• WHEN пользователь подтверждает пустое название
• THEN создание не выполняется

Requirement: Контекстная панель альбома

Правая панель SHALL показывать превью обложки, название, счётчики фото и участников, управление обложкой и переходы к участникам, настройкам и ссылкам. Элементы управления обложкой SHALL быть доступны только owner и admin.

Scenario: Владелец альбома

• WHEN owner открывает альбом
• THEN панель показывает управление обложкой и переходы к участникам и настройкам

Scenario: Наблюдатель

• WHEN viewer открывает альбом
• THEN панель не показывает управление обложкой

Requirement: Режим просмотра фотографии

Просмотр фото SHALL быть отдельным маршрутом внутри каркаса с крупным изображением, лентой миниатюр снизу и панелью метаданных и комментариев. Тот же режим SHALL использоваться на публичных share-страницах. Миниатюры нижней ленты SHALL давать обратную связь при наведении указателя: изображение SHALL плавно увеличиваться внутри плитки; тот же эффект SHALL применяться при фокусе с клавиатуры. Лента SHALL следовать за текущим фото: при переходе стрелками или выбором в ленте активная миниатюра SHALL оставаться в поле зрения, а лента — прокручиваться к ней.

Scenario: Открытие фото

• WHEN пользователь выбирает фото в сетке
• THEN открывается маршрут фото в каркасе, рейл и панель остаются доступны, адрес отражает фото

Scenario: Навигация в просмотре

• WHEN пользователь использует стрелки влево/вправо или ленту миниатюр
• THEN показывается соседнее фото, адрес обновляется

Scenario: Публичный просмотр

• WHEN посетитель share-ссылки открывает фото
• THEN используется тот же режим просмотра без рейла и панели

Scenario: Наведение на миниатюру

• WHEN пользователь наводит указатель на миниатюру в нижней ленте
• THEN изображение миниатюры плавно увеличивается внутри плитки

Scenario: Лента следует за фото

• WHEN пользователь листает фото стрелками влево/вправо
• THEN лента миниатюр прокручивается так, что активная миниатюра остаётся в поле зрения

Requirement: Плотность сетки

Сетка SHALL давать пользователю управлять размером миниатюр: сдвиг регулятора вправо SHALL увеличивать миниатюры, влево — уменьшать. Регулятор SHALL сопровождаться кнопками шага в сторону уменьшения и увеличения. Выбранный размер SHALL сохраняться между сессиями и SHALL быть общим для обзора альбомов и сетки фото альбома. Клавиши + и - SHALL менять размер миниатюр на шаг так же, как кнопки регулятора; при вводе текста и в открытых диалогах либо меню эти клавиши SHALL сохранять обычное действие. В режиме просмотра фото те же клавиши SHALL изменять зум изображения, а не размер миниатюр.

Scenario: Изменение размера

• WHEN пользователь двигает регулятор плотности
• THEN размер миниатюр меняется, значение сохраняется и восстанавливается при следующем открытии

Scenario: Направление регулятора

• WHEN пользователь сдвигает регулятор вправо
• THEN миниатюры становятся крупнее; при сдвиге влево — мельче

Scenario: Кнопки шага

• WHEN пользователь нажимает кнопку увеличения или уменьшения рядом с регулятором
• THEN размер миниатюр меняется на один шаг и сохраняется

Scenario: Клавиши размера

• WHEN пользователь нажимает + или -
• THEN размер миниатюр меняется на один шаг, как при нажатии кнопок регулятора

Scenario: Клавиши в поле ввода

• WHEN фокус находится в поле ввода или открыт диалог либо меню
• THEN + и - не меняют размер миниатюр

Scenario: Единый размер в обоих местах

• WHEN пользователь меняет размер на обзоре альбомов или в сетке фото альбома
• THEN тот же размер применяется в обоих местах

Requirement: Загрузка фотографий из рабочего стола

Загрузка SHALL запускаться действием в тулбаре; перетаскивание файлов над альбомом SHALL показывать оверлей и загружать их; пустой альбом SHALL показывать подсказку-зону загрузки. Загрузка SHALL быть доступна только ролям с правом загрузки; принимать SHALL изображения и видео.

Scenario: Перетаскивание

• WHEN пользователь с правом загрузки перетаскивает файлы над альбомом
• THEN показывается оверлей загрузки, и файлы загружаются

Scenario: Пустой альбом

• WHEN пользователь открывает альбом без фото и имеет право загрузки
• THEN в центре показана зона-подсказка загрузки

Scenario: Загрузка видео

• WHEN пользователь с правом загрузки выбирает или перетаскивает видеофайл
• THEN видео загружается в альбом наравне с изображениями

Requirement: Темы и графитовый хром

Тёмная тема SHALL использовать графитовый хром Lightroom и SHALL применяться по умолчанию; нейтральная тема SHALL быть тёплым графитом; остальные темы SHALL оставаться доступными, а скроллбары SHALL быть стилизованы в цвет темы.

Scenario: Первый вход

• WHEN пользователь впервые открывает приложение без сохранённой темы
• THEN применяется тёмная графитовая тема

Scenario: Смена темы

• WHEN пользователь выбирает другую тему
• THEN интерфейс, иконки и скроллбары меняются согласованно, и выбор сохраняется

Scenario: Нейтральная тема

• WHEN пользователь выбирает нейтральную тему
• THEN применяется тёплый графитовый хром, отличный от холодной тёмной темы

Requirement: Адаптивность рабочего стола

На узких экранах рейл SHALL становиться выдвижной панелью слева, контекстная панель — выдвижной панелью справа, а лента миниатюр — горизонтально прокручиваемой. Кнопка «Панель» на узком экране SHALL выдвигать правую панель поверх содержимого; затемняющая область SHALL закрывать панель.

Scenario: Узкий экран

• WHEN ширина окна меньше порога рабочего стола
• THEN рейл скрыт за кнопкой открытия, панель сворачиваема, лента прокручивается горизонтально

Scenario: Открытие панели

• WHEN пользователь нажимает кнопку «Панель» на узком экране
• THEN правая панель выдвигается и становится видимой поверх содержимого

Requirement: Доступность рабочего стола

Иконочные органы управления каркаса SHALL иметь доступные имена, панели SHALL быть достижимы с клавиатуры с видимым фокусом, анимации SHALL учитывать предпочтение уменьшенного движения.

Scenario: Клавиатурная навигация

• WHEN пользователь работает только с клавиатуры
• THEN органы управления каркаса достижимы, доступные имена присутствуют, фокус виден

Requirement: Изменение ширины панелей

Пользователь SHALL иметь возможность менять ширину левой и правой панелей перетаскиванием, а выбранная ширина SHALL сохраняться между сессиями.

Scenario: Перетаскивание разделителя

• WHEN пользователь тянет разделитель у панели на рабочем столе
• THEN панель меняет ширину в допустимых пределах

Scenario: Сохранение ширины

• WHEN пользователь перезагружает приложение
• THEN восстановленные панели имеют сохранённую ширину

Requirement: Скрытие боковых панелей

В режиме просмотра альбома SHALL быть доступна кнопка скрытия левой и правой боковых панелей в верхней панели сетки рядом с регулятором размера миниатюр и хоткей Tab. В скрытом режиме панели SHALL не занимать место в раскладке, содержимое альбома SHALL занимать всю ширину, а панели SHALL показываться при наведении указателя на левую или правую кромку окна и скрываться после ухода указателя. Хоткей SHALL не срабатывать при вводе текста в поля и при открытых модальных диалогах или меню. Размер миниатюр в скрытом режиме SHALL сохраняться: вместо растянутых плиток сетка SHALL показывать больше фото в строке.

Scenario: Переключение кнопкой

• WHEN пользователь нажимает кнопку скрытия боковых панелей в альбоме
• THEN обе панели уезжают за края, а сетка фото занимает всю ширину окна

Scenario: Размер миниатюр при скрытых панелях

• WHEN боковые панели скрыты
• THEN плитки остаются того же размера, что и с видимыми панелями, а в строке помещается больше фото

Scenario: Переключение хоткеем

• WHEN пользователь нажимает Tab в режиме просмотра альбома
• THEN боковые панели скрываются или показываются

Scenario: Появление у кромки

• WHEN панели скрыты, и указатель подходит к левой или правой кромке окна
• THEN соответствующая панель выезжает поверх содержимого

Scenario: Скрытие после ухода указателя

• WHEN указатель покидает показанную у кромки панель
• THEN панель снова уезжает за край

Scenario: Поля ввода и диалоги

• WHEN фокус находится в поле ввода или открыт модальный диалог либо меню
• THEN Tab выполняет обычную навигацию и не переключает панели

Requirement: Сворачиваемые разделы панели

Контекстная панель SHALL группировать содержимое в сворачиваемые разделы, а состояние сворачивания SHALL сохраняться; раздел «Информация» SHALL показывать метаданные фото, включая извлечённые EXIF-атрибуты.

Scenario: Сворачивание раздела

• WHEN пользователь нажимает заголовок раздела
• THEN содержимое раздела скрывается или показывается, состояние сохраняется

Scenario: Метаданные фото

• WHEN открыт просмотр фото
• THEN раздел «Информация» показывает размер, тип, разрешение, дату съёмки, координаты и извлечённые EXIF-атрибуты

Requirement: Полноэкранный просмотр фотографии

В режиме просмотра SHALL быть доступен переход в полноэкранный режим кнопкой и хоткеем f. В полноэкранном режиме верхняя и нижняя панели SHALL скрываться и показываться у соответствующей кромки экрана.

Scenario: Вход в полный экран

• WHEN пользователь нажимает кнопку полного экрана или клавишу f
• THEN просмотр разворачивается на весь экран, панели скрыты

Scenario: Панель по кромке

• WHEN курсор касается верхней или нижней кромки экрана
• THEN соответствующая панель показывается, а при уходе курсора скрывается сразу

Scenario: Выход из полного экрана

• WHEN пользователь повторно нажимает кнопку или клавишу f
• THEN полноэкранный режим закрывается

Scenario: Полноэкранный режим приложения

• WHEN включён полноэкранный режим приложения, и пользователь нажимает f
• THEN открывается полноэкранный просмотр фото (вложенно), а полноэкранный режим приложения не выключается

Requirement: Зум в просмотре

Просмотр SHALL поддерживать зум колесом мыши без прокрутки, с привязкой к указателю и верхним пределом 200% размеров фото. Клавиши + и - SHALL менять масштаб на шаг, сохраняя точку в центре просмотра. Space SHALL возвращать изображение из любого зума во вписанный вид, а из вписанного — в 100%. При зуме SHALL догружаться оригинал изображения. Стрелки соседних фото SHALL появляться у левой/правой кромки и прятаться в зуме. Зум SHALL работать и в полноэкранном режиме.

Scenario: Зум колесом к указателю

• WHEN пользователь вращает колесо мыши над фото
• THEN масштаб меняется относительно курсора, страница не прокручивается, предел — 200%

Scenario: Зум клавишами

• WHEN пользователь нажимает + или - в режиме просмотра фото
• THEN масштаб меняется на шаг, точка в центре просмотра остаётся на месте, а в полноэкранном режиме зум работает так же

Scenario: Пробел

• WHEN пользователь нажимает Space
• THEN из вписанного вида изображение переходит в 100%, а из любого зума возвращается во вписанный

Scenario: Оригинал в зуме

• WHEN пользователь входит в зум
• THEN догружается оригинал изображения и подменяется по факту загрузки

Scenario: Стрелки соседних фото

• WHEN курсор находится у левой или правой кромки области просмотра
• THEN показывается соответствующая стрелка, скрываясь сразу после ухода; в зуме стрелки скрыты

Scenario: Панорамирование

• WHEN фото увеличено
• THEN пользователь может перемещать изображение перетаскиванием и прокруткой

Requirement: Удаление фото из просмотра

Автор фото, владелец и админ альбома SHALL иметь возможность удалить текущее фото из режима просмотра; удаление SHALL подтверждаться диалогом.

Scenario: Подтверждение удаления

• WHEN пользователь с правом удаления нажимает «Удалить»
• THEN открывается диалог подтверждения, и после подтверждения фото удаляется

Scenario: Лента после удаления

• WHEN фото удалено
• THEN просмотр переходит к соседнему фото, а лента миниатюр обновляется без удалённого

Requirement: Возврат к обзору

Из альбома и из режима просмотра SHALL быть доступен возврат к обзору альбомов.

Scenario: Возврат из альбома

• WHEN пользователь нажимает кнопку «назад» слева от названия альбома
• THEN открывается обзор альбомов

Scenario: Возврат из просмотра

• WHEN пользователь нажимает кнопку «назад» в режиме просмотра
• THEN открывается альбом с сеткой фото

Requirement: Настройки списка атрибутов информации

Раздел «Информация» SHALL предоставлять доступ к настройкам (иконка-шестерёнка), открывающим модальное окно со списком EXIF-атрибутов, где пользователь SHALL отмечать отображаемые атрибуты и задавать их подписи. В окне SHALL быть доступны действия «отметить все» и «снять все». Настройки SHALL применяться ко всем фото и SHALL сохраняться в профиле пользователя. При отсутствии сохранённых настроек SHALL отображаться базовый набор атрибутов (камера, объектив, выдержка, диафрагма, ISO, фокусное расстояние).

Scenario: Открытие настроек

• WHEN пользователь нажимает иконку настроек в разделе «Информация»
• THEN открывается модальное окно со списком EXIF-атрибутов: галочки видимости и поля подписей, а также действия «отметить все»/«снять все»

Scenario: Значения по умолчанию

• WHEN у пользователя нет сохранённых настроек
• THEN в разделе «Информация» показан базовый набор атрибутов, а остальные доступны по элементу «…»

Scenario: Сохранение настроек

• WHEN пользователь отмечает атрибуты, задаёт подпись и сохраняет
• THEN раздел «Информация» учитывает изменения, а настройки сохраняются в профиле

Scenario: Сброс настроек

• WHEN пользователь сбрасывает настройки
• THEN сохранённые настройки удаляются из профиля, и отображается базовый набор с исходными подписями

Requirement: Свёртка скрытых атрибутов

Если настройками часть атрибутов скрыта, в конце списка атрибутов SHALL отображаться элемент «…»; нажатие на него SHALL раскрывать все атрибуты текущего фото, включая скрытые. Если скрытых атрибутов нет, элемент «…» SHALL не отображаться.

Scenario: Скрытые атрибуты

• WHEN в разделе «Информация» есть скрытые настройками атрибуты
• THEN после видимых атрибутов показан элемент «…»

Scenario: Раскрытие всех атрибутов

• WHEN пользователь нажимает «…»
• THEN отображаются все атрибуты фото, включая скрытые

Scenario: Нет скрытых атрибутов

• WHEN ни один атрибут не скрыт
• THEN элемент «…» не отображается

Requirement: Выбор фото в сетке

В режиме альбома одиночный выбор фото указателем SHALL отмечать его рамкой и показывать его сведения в контекстной панели, не открывая просмотр; двойной выбор указателем SHALL открывать режим просмотра фото. На сенсорных экранах одиночное касание по фото SHALL открывать режим просмотра этого фото и не SHALL выделять его; выделение на сенсорных экранах SHALL выполняться долгим нажатием.

Scenario: Одиночный выбор

• WHEN пользователь кликает по фото в сетке указателем
• THEN фото отмечено рамкой, правая панель показывает сведения об этом фото, просмотр не открывается

Scenario: Двойной выбор

• WHEN пользователь дважды кликает по фото в сетке указателем
• THEN открывается режим просмотра этого фото

Scenario: Касание на сенсорном экране

• WHEN на сенсорном устройстве пользователь касается фото в сетке
• THEN открывается режим просмотра этого фото, а отметка выделения не появляется

Scenario: Смена альбома

• WHEN пользователь переходит в другой альбом
• THEN отметка выбора сбрасывается

Requirement: Мультивыбор фото в сетке

В режиме альбома пользователь SHALL выбирать несколько фото: обычный клик — одно фото, Ctrl/Cmd-клик — добавить или убрать, Shift-клик — диапазон. Выбранные фото SHALL быть отмечены.

Scenario: Мультивыбор

• WHEN пользователь кликает по фото с зажатым Ctrl/Cmd или Shift
• THEN соответствующие фото отмечены, а панель показывает количество выбранных

Requirement: Действия с выбранными фото

Когда выбрано одно или несколько фото, правая панель SHALL показывать раздел «Действия» со строками-пунктами (иконка + подпись) «Открыть (просмотр)», «Переместить», «Копировать» и «Удалить»; удаление SHALL подтверждаться диалогом.

Scenario: Действия

• WHEN выбрано одно или несколько фото
• THEN панель показывает раздел «Действия» с пунктами «Открыть (просмотр)», «Переместить», «Копировать» и «Удалить»

Requirement: Перетаскивание выбранных фото на альбом

Выбранные фото SHALL перетаскиваться на альбом в рейле; при отпускании SHALL открываться диалог выбора переноса или копирования с указанием целевого альбома. Во время такого перетаскивания зона загрузки файлов SHALL не показываться.

Scenario: Перетаскивание на альбом

• WHEN пользователь перетаскивает выделенные фото на альбом в рейле и отпускает
• THEN открывается диалог с выбором переноса/копирования и целевым альбомом

Requirement: Корзина в списке альбомов

Рейл альбомов SHALL содержать вход в корзину последним элементом списка (с иконкой корзины). Экран обзора альбомов SHALL не показывать пустую правую панель.

Scenario: Вход в корзину

• WHEN пользователь открывает приложение
• THEN в левом рейле последним элементом списка показана «Корзина» с иконкой корзины

Scenario: Обзор без панели

• WHEN пользователь открывает обзор альбомов
• THEN правая панель не отображается

Requirement: Действия в режиме просмотра

В режиме просмотра правая панель SHALL содержать раздел «Действия» со строками-пунктами (иконка + подпись) «Скачать», «Переместить», «Копировать» и «Удалить» (удаление — по правам). Верхняя панель просмотра SHALL не дублировать скачивание и удаление.

Scenario: Действия в просмотре

• WHEN открыт режим просмотра фото
• THEN раздел «Действия» содержит «Скачать», «Переместить», «Копировать» и «Удалить», а в верхней панели этих кнопок нет

Scenario: Удаление из панели

• WHEN пользователь удаляет фото из раздела «Действия»
• THEN открывается подтверждение, и после удаления просмотр переходит к соседнему фото

Requirement: Контекстное меню фото

Правый клик по фото в сетке и по изображению в режиме просмотра SHALL открывать контекстное меню с пунктами раздела «Действия» («Скачать», «Переместить», «Копировать», «Удалить»; в сетке также «Открыть (просмотр)»), выполняющими те же действия.

Scenario: Меню в сетке

• WHEN пользователь кликает правой кнопкой по фото в сетке
• THEN открывается меню с пунктами «Открыть (просмотр)», «Скачать», «Переместить», «Копировать», «Удалить»

Scenario: Меню в просмотре

• WHEN пользователь кликает правой кнопкой по изображению в режиме просмотра
• THEN открывается меню с пунктами «Скачать», «Переместить», «Копировать», «Удалить»

Requirement: Контекстное меню альбома

Правый клик по альбому в рейле и по карточке на обзоре SHALL открывать меню с пунктами «Переименовать» и «Удалить»; переименование SHALL открывать диалог, удаление — подтверждение.

Scenario: Меню альбома

• WHEN пользователь кликает правой кнопкой по альбому
• THEN открывается меню с «Переименовать» и «Удалить»

Scenario: Удаление альбома

• WHEN пользователь подтверждает удаление альбома
• THEN альбом удаляется, а его фото попадают в корзину

Requirement: Счётчики в рейле

Рейл SHALL показывать число фото у каждого альбома и число элементов в корзине.

Scenario: Счётчики

• WHEN пользователь смотрит на рейл альбомов
• THEN у каждого альбома показано число фото, а у корзины — число удалённых фото

Requirement: Метки в панели фото

Панель фото SHALL содержать раздел «Метки» с чипами меток фото и полем добавления, дающим поиск по меткам пользователя и создание новых. Изменение меток в панели SHALL сразу отражаться в сетке и в режиме просмотра без перезагрузки страницы.

Scenario: Раздел «Метки»

• WHEN открыт просмотр или выбран один фото в сетке
• THEN в панели есть раздел «Метки» с текущими метками и полем добавления с поиском

Scenario: Обновление без перезагрузки

• WHEN пользователь добавляет или снимает метку в панели фото
• THEN сетка и режим просмотра сразу отражают изменение (например, бейдж и режим 360-панорамы), без перезагрузки страницы

Requirement: Компактный верхний хром

Верхняя панель приложения и верхняя панель режима просмотра SHALL иметь минимальную высоту (узкие отступы, иконочные органы управления), сохраняя все действия доступными. Верхняя панель режима просмотра SHALL быть прозрачным оверлеем и SHALL не занимать место в раскладке, увеличивая область фото. Кнопка «На весь экран» верхней панели приложения SHALL иметь хоткей Ctrl+F; хоткей f полноэкранного просмотра SHALL срабатывать только без модификаторов, чтобы Ctrl+F не перехватывался.

Scenario: Компактные верхние панели

• WHEN открыт список альбомов или режим просмотра фото
• THEN верхняя панель занимает минимум высоты, а её действия (навигация, полный экран, скачивание, удаление) доступны

Scenario: Полный экран по хоткею

• WHEN пользователь нажимает Ctrl+F
• THEN приложение переходит в полноэкранный режим или выходит из него, а в режиме просмотра фото полноэкранным остаётся сам просмотр

Scenario: Прозрачная панель просмотра

• WHEN открыт режим просмотра фото
• THEN верхняя панель нарисована поверх фото без фона и не уменьшает область изображения

Requirement: Курсор в сетке фото

Сетка SHALL хранить курсор — текущую ячейку, отдельную от выделения. Перемещение курсора SHALL не менять выделение и не обновлять правую панель. Курсор SHALL отображаться контуром, отличимым от рамки выделения, SHALL сохраняться при снятии выделения и SHALL устанавливаться на фото при клике по нему мышью.

Scenario: Синхронизация с мышью

• WHEN пользователь кликает по фото в сетке
• THEN фото выделено, а курсор установлен на нём

Scenario: Перемещение не меняет выделение

• WHEN фокус в сетке и пользователь нажимает стрелку
• THEN курсор перемещается, а выделение и правая панель не меняются

Scenario: Курсор переживает снятие выделения

• WHEN выделение снято кликом по пустому месту или клавишей Esc
• THEN курсор остаётся на прежней ячейке

Scenario: Отображение курсора

• WHEN сетка в фокусе и у курсора есть ячейка
• THEN ячейка показывает контур, отличимый от рамки выделения, и он скрывается при уходе фокуса из сетки

Requirement: Клавиши сетки фото

При фокусе в сетке клавиши SHALL управлять курсором и выделением: ←/→ — на соседнее фото с переходом на соседнюю строку, ↑/↓ — на строку (density.cols) с упором в границы. Space SHALL переключать выделение ячейки под курсором, Shift+стрелки — двигать курсор и расширять выделение от якоря, Enter — открывать просмотр, Esc — снимать выделение. Вне фокуса сетки клавиши SHALL не действовать.

Scenario: Горизонтальное перемещение

• WHEN курсор не в конце строки и нажато →
• THEN курсор переходит на следующее фото

Scenario: Перенос на соседнюю строку

• WHEN курсор в конце строки и нажато →
• THEN курсор переходит на первое фото следующей строки

Scenario: Вертикальные границы

• WHEN курсор в верхней или нижней строке и нажато ↑ или ↓
• THEN курсор остаётся на месте, без переноса

Scenario: Переключение выделения

• WHEN нажато Space
• THEN ячейка под курсором добавляется или убирается из выделения, а правая панель обновляется

Scenario: Расширение выделения

• WHEN нажато Shift вместе со стрелкой
• THEN курсор двигается, а выделение расширяется от якоря до курсора

Scenario: Открытие просмотра

• WHEN нажато Enter
• THEN открывается просмотр фото под курсором

Scenario: Снятие выделения клавишей

• WHEN нажато Esc
• THEN выделение снимается, а курсор остаётся

Scenario: Прокрутка к курсору

• WHEN курсор перемещается за пределы видимой области сетки
• THEN сетка прокручивается так, чтобы ячейка под курсором стала видимой

Scenario: Догрузка при выходе за загруженные фото

• WHEN курсор на последнем загруженном фото и нажата стрелка в сторону следующих фото
• THEN следующая порция фото догружается, а курсор переходит на следующее фото

Scenario: Вне фокуса сетки

• WHEN фокус находится в поле ввода или диалоге и нажаты стрелки или Space
• THEN курсор и выделение сетки не меняются

Requirement: Снятие выделения кликом по пустому месту

Клик по области сетки и её отступам, не по фото и не по органам управления тулбара, рейла и панелей, SHALL снимать выделение и возвращать в правой панели свойства альбома. Фокус SHALL оставаться в сетке, чтобы клавиши продолжали действовать.

Scenario: Клик по пустому месту

• WHEN есть выделение и пользователь кликает по пустому месту сетки или её отступам
• THEN выделение снято, а правая панель показывает свойства альбома

Scenario: Мультивыделение

• WHEN выделено несколько фото и пользователь кликает по пустому месту
• THEN выделение снимается полностью

Scenario: Клик по фото

• WHEN пользователь кликает по фото
• THEN выделение устанавливается на фото, а не снимается

Scenario: Клик по органам управления

• WHEN пользователь кликает по кнопке тулбара, элементу рейла или панели
• THEN выделение не снимается

Scenario: Фокус остаётся в сетке

• WHEN выделение снято кликом по пустому месту
• THEN стрелки продолжают двигать курсор без дополнительного Tab

Requirement: Возврат фокуса из просмотра

При возврате в альбом из просмотра сетка SHALL выделить последнее просмотренное фото (одиночное), поставить на него курсор, вернуть фокус в сетку и прокрутить к ячейке. Если фото нет среди загруженных, сетка SHALL догружать страницы, пока оно не появится. Восстановление SHALL применяться только к тому альбому, из которого был открыт просмотр.

Scenario: Возврат из просмотра

• WHEN пользователь открыл фото и закрыл просмотр
• THEN в сетке это фото выделено, курсор на нём, фокус в сетке, а ячейка прокручена в видимую область

Scenario: Последнее просмотренное фото

• WHEN пользователь пролистал несколько фото в просмотре и закрыл его
• THEN восстанавливается последнее просмотренное фото

Scenario: Фото вне первой страницы

• WHEN просмотренное фото отсутствует в первой загруженной странице
• THEN сетка догружает страницы, пока фото не появится, и только затем ставит на него курсор

Scenario: Возврат в другой альбом

• WHEN после просмотра пользователь открывает другой альбом
• THEN восстановление не применяется, выборка пуста

Scenario: Клавиатура после возврата

• WHEN фокус восстановлен после просмотра
• THEN стрелки сразу двигают курсор без дополнительного Tab

Requirement: Просмотр 360-панорамы

Фото с тегом pano360 SHALL открываться в режиме сферического обзора (equirect) вместо плоского изображения. Перетаскивание SHALL менять направление взгляда и SHALL перемещать сцену вслед за указателем по обеим осям согласованно, колесо — угол обзора, Space — сбрасывать вид. Остальные фото SHALL просматриваться как прежде. При недоступности WebGL или сбое загрузки/декодирования SHALL показываться плоское изображение. На публичных share-страницах панорамный режим SHALL не активироваться.

Scenario: Обзор панорамы

• WHEN пользователь открывает фото с тегом pano360
• THEN показывается сферический обзор, и перетаскивание меняет направление взгляда

Scenario: Направление перетаскивания

• WHEN в режиме панорамы пользователь перетаскивает вправо
• THEN сцена перемещается вправо (направление взгляда поворачивается влево), согласованно с вертикальным перетаскиванием

Scenario: Обычное фото

• WHEN пользователь открывает фото без тега pano360
• THEN показывается обычное плоское изображение

Scenario: Управление обзором

• WHEN в режиме панорамы пользователь вращает колесо или нажимает Space
• THEN колесо меняет угол обзора, а Space сбрасывает направление взгляда и угол обзора

Scenario: Навигация между фото

• WHEN в режиме панорамы пользователь нажимает стрелки влево/вправо или выбирает миниатюру
• THEN открывается соседнее фото, панорамный режим включается или выключается по его тегу

Scenario: Нет WebGL

• WHEN WebGL недоступен или изображение не загружается
• THEN показывается плоское изображение

Scenario: Публичная share-страница

• WHEN фото открыто по публичной share-ссылке
• THEN панорамный режим не активируется, показывается плоское изображение

Requirement: Резкость миниатюр

Сетка фото и обзор альбомов SHALL подбирать вариант изображения под фактический размер плитки, чтобы миниатюры не отображались крупнее доступного разрешения.

Scenario: Крупные плитки

• WHEN пользователь увеличивает миниатюры до крупных плиток
• THEN показывается вариант изображения, достаточный для их размера, без расплывания

Scenario: Мелкие плитки

• WHEN миниатюры показаны мелкими плитками
• THEN показывается компактный вариант, чтобы не загружать крупное изображение

Scenario: Вариант ещё не готов

• WHEN для фото доступен только оригинал или только миниатюра
• THEN показывается доступный вариант, и сетка отображается корректно

Requirement: Воспроизведение видео в просмотре

Видео в режиме просмотра SHALL воспроизводиться встроенным плеером с нативными контролами и постером до готовности варианта; зум, панорамирование и режим панорамы SHALL к видео не применяться, а действия скачивания, переноса, копирования и удаления SHALL оставаться доступными.

Scenario: Плеер

• WHEN пользователь открывает видео в режиме просмотра
• THEN показывается встроенный плеер, а до готовности варианта — постер

Scenario: Перемотка

• WHEN пользователь перематывает воспроизведение
• THEN плеер показывает запрошенный момент видео

Scenario: Готовность на лету

• WHEN вариант видео становится готов, пока просмотр открыт
• THEN плеер становится доступен без перезагрузки страницы

Scenario: Действия над видео

• WHEN открыто видео в режиме просмотра
• THEN доступны скачивание оригинала, перенос, копирование и удаление по правам

Requirement: Плитка видео в сетке

Плитка видео в сетке SHALL показывать постер, признак видео и длительность; открытие плитки SHALL открывать режим просмотра.

Scenario: Постер и признак

• WHEN видео показано в сетке
• THEN плитка показывает постер, значок воспроизведения и длительность

Scenario: Постер не готов

• WHEN постер ещё не готов
• THEN плитка показывает плейсхолдер и сетка отображается корректно

Scenario: Открытие из сетки

• WHEN пользователь открывает плитку видео
• THEN открывается режим просмотра видео

Requirement: Очистка корзины в интерфейсе

Экран корзины SHALL содержать действие «Очистить корзину», доступное, когда в корзине есть элементы. Действие SHALL открывать подтверждение и после подтверждения очищать корзину, а список и счётчик корзины в рейле SHALL отражать результат.

Scenario: Наличие действия

• WHEN пользователь открывает корзину с элементами
• THEN на экране показано действие «Очистить корзину»

Scenario: Подтверждение очистки

• WHEN пользователь выбирает «Очистить корзину»
• THEN открывается диалог подтверждения, и только после подтверждения корзина очищается

Scenario: Обновление после очистки

• WHEN корзина очищена
• THEN на экране показывается пустая корзина, а счётчик корзины в рейле обновляется

Requirement: Синхронизация счётчика корзины

Рейл SHALL обновлять число элементов корзины сразу после любого действия, меняющего содержимое корзины, без перезагрузки страницы: помещения фото в корзину, восстановления, окончательного удаления и удаления альбома с фото.

Scenario: Помещение фото в корзину

• WHEN пользователь удаляет одно или несколько фото
• THEN фото покидают сетку, а число элементов корзины в рейле увеличивается на их количество

Scenario: Восстановление из корзины

• WHEN пользователь восстанавливает фото из корзины
• THEN фото покидает список корзины, а число элементов корзины в рейле уменьшается на единицу

Scenario: Окончательное удаление

• WHEN пользователь окончательно удаляет фото из корзины
• THEN число элементов корзины в рейле уменьшается на единицу

Scenario: Удаление альбома

• WHEN пользователь удаляет альбом с фото
• THEN его фото попадают в корзину, а число элементов корзины в рейле увеличивается на их количество

Requirement: Офлайн-режим веб-приложения

Веб-приложение SHALL хранить в офлайн-кеше браузера оболочку приложения, ответы API (списки альбомов и фото) и варианты изображений: эскиз, превью и средний вариант. Ключ кеша картинки SHALL определяться путём объекта без подписи, чтобы обновление подписи не создавало новые записи. Оригиналы и видео SHALL не кешироваться. Размер кеша SHALL быть ограничен, а более старые записи SHALL вытесняться первыми. При выходе из аккаунта кеш SHALL очищаться. При отсутствии сети приложение SHALL открываться и показывать сохранённые данные, а верхняя панель SHALL показывать индикатор «Офлайн».

Scenario: Просмотр без сети

• WHEN пользователь открывает ранее просмотренный альбом без подключения к сети
• THEN приложение открывается, показывает сохранённый список фото и их эскизы

Scenario: Смена подписи объекта

• WHEN подпись объекта обновляется, а содержимое остаётся прежним
• THEN используется та же запись кеша, а не новая

Scenario: Ограничение кеша

• WHEN кеш картинок превышает предел
• THEN самые старые записи вытесняются, а свежие остаются

Scenario: Выход из аккаунта

• WHEN пользователь выходит из аккаунта
• THEN офлайн-кеш картинок и данных очищается

Scenario: Индикатор офлайна

• WHEN браузер сообщает об отсутствии сети
• THEN верхняя панель показывает индикатор «Офлайн»

Requirement: Вкладка «Редактирование»

Правая панель фото SHALL содержать вкладку «Редактирование» с инструментом «Свет»: ползунки экспозиции, контраста, светов, теней, белых и чёрных, а также точечную кривую с выбором канала. Правки SHALL применяться к фото сразу и отправляться на сервер после десяти секунд без изменений либо при переключении фото. Переключатель «Сброс» SHALL удалять параметры правок и отредактированную версию фото. Сетка и просмотр SHALL показывать отредактированную версию фото, когда она отрендерена.

Scenario: Отложенная отправка

• WHEN пользователь меняет ползунок и не трогает панель десять секунд
• THEN правки отправляются на сервер, а сервер рендерит фото в фоне

Scenario: Вкладки панели

• WHEN открыта правая панель фото
• THEN видны вкладки «Сведения» и «Редактирование»

Scenario: Сохранение правок

• WHEN пользователь отпускает ползунок
• THEN правки сохраняются, а после рендера фото в сетке и просмотре показывается отредактированная версия

Scenario: Правки видны сразу

• WHEN пользователь меняет ползунок, а сервер ещё не отрендерил фото
• THEN видимая область фото в просмотре показывает правки без ожидания рендера

Scenario: Фильтры считаются в браузере

• WHEN браузер рисует предпросмотр правок
• THEN фильтры применяются WASM-модулем, а при его недоступности — JavaScript-реализацией с тем же результатом

Scenario: Сброс правок

• WHEN пользователь нажимает «Сброс» на вкладке «Редактирование»
• THEN параметры правок и отредактированная версия фото удаляются, а фото возвращается к исходному виду

Scenario: Зум при правках

• WHEN фото отредактировано, и пользователь увеличивает его
• THEN браузер рисует видимую область с правками, пока сервер не отрендерил фото, а зум не сбрасывается при обновлении фото