Files
ds-galo/openspec/changes/lightroom-workspace-ui/design.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

11 KiB
Raw Blame History

Design

Context

См. proposal.md — Why. Текущее состояние, которое формирует подход:

  • albums.cover_photo_id уже существует (migrations/000001_init.up.sql), PATCH /albums/:id принимает cover_photo_id/clear_cover (albums/handlers.go:55), но список и GET отдают только id — URL миниатюры негде взять, поэтому карточки рисуют иконку-заглушку.
  • photos.Service.attachURLs уже пресигнит ThumbKey/PreviewKey (photos/service.go:132), а albums.Service держит storage *storage.Client — приём с presigned URL доступен и там.
  • Фоновая обработка загруженного фото безусловно зовёт photos.Store.SetCover (photos/service.go:124), перезаписывая выбор пользователя.
  • FK на cover_photo_id нет; удаление фото-обложки оставляет висячий id.
  • Фронтенд: один плоский +layout.svelte (топбар + max-w-6xl + центр), лайтбокс — оверлей, на share/[token] свой инлайн-лайтбокс. Темы: light/dark/neutral/system, дефолт system (stores/theme.svelte.ts).

Goals / Non-Goals

Goals:

  • Постоянный каркас с рейлом и контекстной панелью, центр = текущий маршрут (Q).
  • Обложки доезжают до UI; явный выбор + разумный дефолт; корректное удаление.
  • Тёмная графитовая тема по умолчанию при сохранении остальных тем.
  • Просмотр фото как маршрут в каркасе, общий с публичной share-страницей.
  • Адаптивность до мобильного без потери каркаса.

Non-Goals:

  • Мультивыбор фото и массовые действия / bulk-удаление.
  • Замена роутинга на «чистые панели» без маршрутов (вариант P).
  • Новые внешние зависимости (иконки и токены вендорятся/расширяются).
  • Изменение доменных контрактов API (только добавление поля ответа и FK).

Decisions

1. Каркас: группы маршрутов, центр = маршрут

+layout.svelte разбивается на группы: (app) — каркас с топбаром, левым рейлом и правой панелью, и (public) — только токены. Центр (app) рендерит текущий маршрут; рейл живёт между навигациями. Альтернатива — один layout с условиями по $page.route.id (проще, но разрастается) или P (панели вместо маршрутов) — отклонена: ломает deeplink и историю.

2. Обложка: LEFT JOIN + presign (A)

albums.Store добавляет LEFT JOIN photos p ON p.id = a.cover_photo_id и отдаёт cover_thumb_key; albums.Service пресигнит его в Album.CoverThumbURL. Один запрос и один presign на альбом; висячий id безопасно даёт NULL. Альтернативы: N+1 с GET /photos/:id (chatty) и выделенный thumb-эндпоинт (расходится с текущим паттерном presigned URL).

3. Автообложка: писать только если пусто

processVariants вызывает SetCover только при cover_photo_id IS NULL. Выбор пользователя не слетает, дефолт появляется с первым фото. Альтернатива — дефолт на чтении (COALESCE) — отклонена в пользу простоты записи/чтения; осознанно принимаем, что в пачке побеждает фото, обработанное первым.

4. Целостность обложки: FK ON DELETE SET NULL (M)

Миграция 000002_album_cover_fk: сперва обнуляет уже висячие cover_photo_id, затем ALTER TABLE albums ADD CONSTRAINT ... FOREIGN KEY (cover_photo_id) REFERENCES photos(id) ON DELETE SET NULL. БД сама чинит любой путь удаления. Циклический FK albums <-> photos безвреден: альбом вставляется с NULL, фото ссылается на альбом, cover выставляется позже. Альтернатива — чистка в photos.Delete (легко забыть на новых путях удаления).

5. Точки выбора обложки: панель + просмотр (T1+T2)

Правая панель даёт [Выбрать обложку] (модальный пикер из миниатюр альбома) и [Сбросить]; в просмотре — действие «Сделать обложкой» для текущего фото. Всё под roles.CanEditAlbum. Hover-оверлей в сетке (T3) не берём — шум и случайные клики.

6. Тема: сохранить темы, dark = графит и дефолт (α)

Тёмная тема перенастраивается в графит Lightroom и становится значением по умолчанию (theme.current = 'dark' при отсутствии сохранённого выбора). Добавляются аддитивные токены --chrome (топбар/рейл/панель) и --canvas (центр), чтобы «утопить» контент между панелями. light/neutral/system остаются. Спека ui-iconography не затрагивается.

7. Адаптив: drawer + sheet + горизонтальная лента (M1)

Порог рабочего стола — lg/md. Ниже: рейл — off-canvas drawer по кнопке, правая панель — сворачиваемая секция/bottom-sheet, filmstrip — горизонтальный скролл. Публичные экраны получают ту же мобильную логику просмотра без рейла/панели.

8. Плотность сетки, без выбора (D)

Регулятор размера миниатюр в тулбаре сетки управляет grid-template-columns (пресеты или minmax), значение хранится в localStorage. Мультивыбор/bulk — вне объёма.

9. Просмотр как маршрут (L2)

Новый маршрут albums/[id]/photos/[photoId] рендерит общий компонент Viewer (крупное фото, filmstrip, панель метаданных/комментариев, тулбар). share/[token] переиспользует Viewer без рейла/панели. Навигация синхронизирует маршрут и filmstrip; клавиши ←/→/Esc.

10. Загрузка из тулбара (U1)

Иконочная кнопка загрузки (роль-gated) открывает файловый диалог; dragover на весь альбом показывает полноэкранный оверлей; пустой альбом показывает центральную зону-подсказку. Прогресс — компактная полоса/тост вместо крупного блока.

11. Создание альбома через модалку

Кнопка + с хинтом (в рейле и/или топбаре) открывает модалку с полем названия; POST /albums, созданный альбом становится активным. Инлайн-форма удаляется.

Risks / Trade-offs

  • [Много альбомов → много presign в списке] → presign это локальная крипто-операция без сети; при необходимости кэшировать URL на короткий TTL.
  • [Presigned URL обложки истекает при долго открытой странице] → URL обновляется при загрузке списка; при ошибке загрузки картинки показывать плейсхолдер.
  • [Циклический FK albums↔photos] → миграция обнуляет висячие id до создания constraint; каскадное удаление альбома обрабатывается БД (SET NULL по уже удаляемой строке безвреден).
  • [Реструктуризация +layout задевает все маршруты] → выносить каркас инкрементально, группы (app)/(public) в одном шаге, публичные страницы регрессионно проверяем.
  • [Добавление токенов темы задевает все экраны] → токены аддитивны, старые классы продолжают работать; проверка триад тем.
  • [Пачка загрузок: обложкой становится первое обработанное фото] → принято; дальнейшие загрузки обложку не трогают, пользователь может задать явно.
  • [Дополнительное состояние в маршруте просмотра (filmstrip, клавиатура)] → единый компонент Viewer с props и общим источником фото.

Migration Plan

  1. Миграция 000002_album_cover_fk: UPDATE albums SET cover_photo_id = NULL WHERE cover_photo_id IS NOT NULL AND cover_photo_id NOT IN (SELECT id FROM photos); затем ADD CONSTRAINT ... ON DELETE SET NULL. Down — DROP CONSTRAINT.
  2. Бэкенд: models.Album (+CoverThumbURL), albums/store.go (LEFT JOIN), albums/service.go (enrich + presign), photos/service.go (SetCover только если NULL).
  3. Фронтенд: каркас и маршруты, компоненты, токены, types.ts.
  4. Откат: снять constraint (down-миграция); фронтенд откатывается независимо, поле ответа игнорируется старым клиентом.

Open Questions

  • Набор пресетов регулятора плотности (сколько ступеней) — решается при реализации, спеки не меняет.
  • Хинты: нативный title или кастомный тултип — косметика, спеки не меняет.