Files
ds-galo/openspec/changes/lightroom-workspace-ui/specs/ui-workspace/spec.md
T
iu 304cfedb75 feat: lightroom-style workspace UI with album covers
Backend:
- expose cover thumbnail URL on album responses (LEFT JOIN + presign)
- auto-assign cover only when empty; FK cover_photo_id -> photos ON DELETE SET NULL
- add photos_count / members_count to album responses; cover repo test

Frontend:
- split layouts into (app) shell (resizable rail + contextual panel) and (public)
- album rail + create-album dialog; album panel with cover picker / make-cover
- photo viewer route with filmstrip, replacing lightbox; share reuses it
- grid density slider, toolbar + drag-and-drop upload, dark graphite default

OpenSpec: add lightroom-workspace-ui change (proposal, design, specs, tasks)
2026-10-10 18:15:13 +03:00

8.5 KiB

Spec Delta

Purpose

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

ADDED 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-страницах.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Requirement: Тёмная графитовая тема

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

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

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

Scenario: Смена темы

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

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

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

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

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

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

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

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

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