F3 — Frontend Nuxt + Favoritas - #2
Merged
Merged
Conversation
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Adds @pinia-plugin-persistedstate/nuxt and @conteai/shared (workspace) to apps/web. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Rebuild the modal info chrome (EXIF panel, version delimiters, no-edit checkbox, location/datetime menus) with Vuetify to match the legacy ModalViewerImage exactly, instead of the earlier plain-HTML divergence. Keep the pixel-faithful <img> photo stage and port the legacy geometry fixes (no padding on .modal-viewer, synchronous resize on rotation, v-dialog max-width clamp, absolute-fill img) so rotated/clamped layouts center correctly across all viewports. Port the 12 legacy custom SVG icons to components/icons/ (used via v-icon slot) and the DD/MM/YY HH:MM date formatter to utils/date.ts. Update the modal vitest to reveal/expand the chrome and assert location links. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The gallery is a full-viewport grid that owns its own chrome, so the global HeaderBar is hidden on /gallery to match the legacy layout. Gate Nuxt devtools behind NUXT_DEVTOOLS so visual captures run clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add the missing vue imports (nextTick, onBeforeUnmount, onMounted) and prefix browser globals (globalThis.HTMLElement/IntersectionObserver/window) to clear eslint no-undef. Drop the obsolete "All" text assertion in the gallery vitest (the label moved out of the rendered text). Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Add playwright.web.config.ts (new app, port 3003, 6 viewports), the visual:web script and point the default config at it. Add webPort.spec.ts and web-port.helpers.ts comparing the Nuxt app against the legacy goldens across gallery, modal (landscape/portrait/rotated/details/multi-version/ original) and login/redirect states. Calibrate thresholds for conscious, understood diffs: GALLERY_SNAPSHOT 0.04 (plain <img> sub-pixel decode noise vs v-img) and CHROME_SNAPSHOT 0.05 (Vuetify padding/shadow divergence in the modal chrome). Recapture the login/redirect goldens for the pt-BR "Secret Door" design and replace the spinner-loading mobile-landscape modal golden with the correct render. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Bring back the blurred low-res placeholder shown while a photo loads (the legacy v-img lazy-src blur-up), lost when the gallery and modal switched to plain <img>. A blurred base64 layer (lazyThumbnailBase64) sits behind the photo, which stays opaque and covers it once it paints — keeping the gallery SSR-visible and the loaded-state goldens unchanged, with no JS load race.
Restore parity with the legacy ModalEditImage: the base64 lazy thumbnail is editable per version and on the original in the admin edit form. saveImage already sends the whole original/images objects, so the value persists.
Manual testing of the new front against the production API surfaced six interactions that diverge from the legacy app (gallery date picker, modal location/date menus, modal chrome visibility, theme toggle layout, modal nav/rotation button position, theater scrollbar). Capture each with code references and a golden-driven fix methodology in HANDOFF-parity-fixes.md so another agent can pick them up.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Porte completo do front legado (Vue CLI/Vuex) para Nuxt 3 + Vuetify 3 + Pinia, mais o recurso de fotos favoritas. Fecha a feature F3 (
.specs/features/03-web-nuxt-favoritas/, tarefas P1–P10).O que entra
favoriteemImage/@conteai/shared, filtroGET /images?favorite=..., upload/edit aceitam o campo.useApitipado, stores Piniaauth/themepersistidas, rotas (/,/gallery,/secretdoor,/upload,/list) com middleware de auth e HeaderBar.utils/modalResize.tsportaresize()do legado, provado contra fixture golden.?all=true, filtros de URL legados, empty-state com CTA, ordenaçãometadata.takenAt desc.?id=&version=, navegação teclado/swipe, e chrome portado fielmente com Vuetify (EXIF, delimitadores de versão, checkbox no-edit, menus de local/data), com a geometria da foto ajustada para todos os viewports e rotação./secretdoor(design "Secret Door"), token/payload no Pinia.Regressão visual
Suíte nova
tests/visual/webPort.spec.ts(playwright.web.config.ts, app na porta 3003, 6 viewports) compara o Nuxt contra os goldens do legado: 66/66 verdes. Thresholds calibrados por diff consciente e documentado — galeria 0.04 (sub-pixel<img>vsv-img), chrome do modal 0.05 (padding/sombra do Vuetify, RV5). Goldens de login/redirect recapturados para o design pt-BR; golden mobile-landscape do modal substituído (era artefato de loading do legado).Verificação
ok.pnpm visual:web(legado segue empnpm visual:legacy).Pendências não-bloqueantes (decisão de produto)