Lovable sync 1780253995#552
Conversation
X-Lovable-Edit-ID: edt-2861a40d-d258-4d19-aa54-31352a773f86 Co-authored-by: adm01-debug <231131902+adm01-debug@users.noreply.github.com>
X-Lovable-Edit-ID: edt-dcfc3e5b-15a6-4368-9747-c1e2a3a946b2 Co-authored-by: adm01-debug <231131902+adm01-debug@users.noreply.github.com>
X-Lovable-Edit-ID: edt-a613bb01-3be5-4e73-afb3-e58acf636175 Co-authored-by: adm01-debug <231131902+adm01-debug@users.noreply.github.com>
X-Lovable-Edit-ID: edt-6fa19df9-0496-4719-b1c5-a88eab685b36 Co-authored-by: adm01-debug <231131902+adm01-debug@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 35 minutes and 39 seconds. Learn how PR review limits work. Your organization has run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (10)
✨ Finishing Touches🧪 Generate unit tests (beta)
Comment |
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 1ed69b4030
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| {totalPages > 1 && ( | ||
| <div className="mt-6 flex justify-center py-4"> |
There was a problem hiding this comment.
When there are more than 20 matching novelties, this pagination block is nested inside the isFetching && products.length > 0 overlay above it. That means the controls only render during background fetches, and when they do render the ancestor has pointer-events-none, so users cannot navigate past the first page after the new paginatedProducts slice is applied.
Useful? React with 👍 / 👎.
| test.describe('Novelty Card Variations @mobile', () => { | ||
| test.beforeEach(async ({ context }) => { | ||
| // Mock the novelties API to provide specific edge cases | ||
| await context.route('**/functions/v1/novelties**', async route => { |
There was a problem hiding this comment.
The new novelty tests install fixtures on routes such as this functions/v1/novelties URL (and **/api/external-db in the companion visual spec), but /novidades gets its data through useNoveltiesWithDetails → invokeExternalDb, which queries Supabase REST for products and only falls back to external-db-bridge; no request is made to these mocked endpoints. In CI the assertions for exactly 3 or 45 mocked cards therefore run against real/fallback data instead of the fixture and will fail or time out depending on the environment.
Useful? React with 👍 / 👎.
| onClick={selectionMode ? onToggleSelect : onClick} | ||
| onClick={handleClick} | ||
| role="article" | ||
| aria-label={`${product.product_name} — ${getStockStatusLabel(stockStatus)}, ${formatPrice(product.base_price ?? 0)}`} |
There was a problem hiding this comment.
For novelties whose base_price is null or 0, the visible card says “Preço sob consulta”, but this new aria-label still formats the fallback as R$ 0,00. Screen-reader users get a different price from the UI for the consultation-price case, so the accessible label should mirror the same conditional text used in the card body.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
This PR updates the /novidades experience to handle larger novelty lists more smoothly by introducing a virtualized grid + client-side pagination, while also adding Playwright visual/a11y coverage and speeding up CI visual runs.
Changes:
- Added
VirtualizedNoveltyGrid(TanStack React Virtual) and integrated it intoNoveltyProductGridwith pagination (20/page) and filter-triggered page reset. - Improved novelty card keyboard/accessibility handling and aligned skeleton layout to reduce layout shift.
- Added new Playwright visual/a11y specs for the novelty grid and updated Playwright/CI settings to run faster in parallel/shards.
Reviewed changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 26 comments.
Show a summary per file
| File | Description |
|---|---|
| src/pages/products/NoveltiesPage.tsx | Refreshed novelties page header/layout and added test IDs used by E2E. |
| src/pages/auth/Auth.tsx | Removed SupabaseConnectionDebug from Auth page. |
| src/components/novelties/VirtualizedNoveltyGrid.tsx | New virtualized novelty grid implementation. |
| src/components/novelties/NoveltyProductGrid.tsx | Switched grid rendering to virtualization + added pagination logic/UI. |
| src/components/novelties/NoveltyCards.tsx | Updated card interaction + a11y attributes/keyboard handling. |
| src/components/loading/ModernSkeletons.tsx | Adjusted skeleton min-heights/structure for layout stability. |
| playwright.config.ts | Increased CI workers to 2 for faster Playwright runs. |
| e2e/routes/app/novelty-grid-visual.spec.ts | New novelty grid visual + a11y regression coverage. |
| e2e/routes/app/novelty-card-variations.spec.ts | New novelty card variations visual test coverage. |
| .github/workflows/visual-tests.yml | Sharded visual tests + report upload per shard for faster CI. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <PaginationPrevious | ||
| onClick={() => setCurrentPage(p => Math.max(1, p - 1))} | ||
| className={cn(currentPage === 1 && "pointer-events-none opacity-50", "cursor-pointer")} | ||
| /> |
| <PaginationLink | ||
| isActive={currentPage === page} | ||
| onClick={() => setCurrentPage(page)} | ||
| className="cursor-pointer" | ||
| > | ||
| {page} | ||
| </PaginationLink> | ||
| </PaginationItem> |
| <PaginationNext | ||
| onClick={() => setCurrentPage(p => Math.min(totalPages, p + 1))} | ||
| className={cn(currentPage === totalPages && "pointer-events-none opacity-50", "cursor-pointer")} | ||
| /> |
| import type { NoveltyWithDetails } from '@/hooks/products'; | ||
| import type { ColumnCount } from '@/components/products/ColumnSelector'; | ||
| import { useResponsiveColumns, getGridColsClass, getGridGapClass } from '../replenishments/grid-layout'; | ||
| import { NoveltyGridCard } from './NoveltyCards'; |
| }} | ||
| className={`grid ${getGridColsClass(effectiveCols)} ${getGridGapClass(effectiveCols)} pb-8`} | ||
| > |
| const grid = page.locator('div[role="list"]'); | ||
| await grid.waitFor({ state: 'visible' }); | ||
| await page.waitForTimeout(1000); |
| > | ||
| Novidades | ||
| </h1> | ||
| <p |
| <p className="text-sm text-muted-foreground"> | ||
| Produtos recém-chegados ao catálogo nos últimos 30 dias | ||
| </p> | ||
| <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"> |
| const header = page.locator('div.flex.flex-col.gap-4').first(); | ||
| const title = header.locator('[data-testid="page-title-novidades"]'); | ||
| const desc = header.locator('[data-testid="novelty-description"]'); |
| const results = await new AxeBuilder({ page }) | ||
| .include('div[role="list"]') | ||
| .analyze(); | ||
|
|
|
Closing in favour of #553, which implements all features from this PR (and from #547, #549, #550, #551) on current
This branch also had merge conflicts with main due to the older base SHA. Generated by Claude Code |
Implements all features from Lovable PRs #547-#552 on a clean base, fixing three critical bugs before merge: BUGS FIXED - Rules of Hooks violation in VariantStockTable: Lovable placed early return BEFORE remaining hook calls; moved isLoading guard after all hooks to comply with React invariant. - Pagination rendered inside AnimatePresence overlay (isFetching branch only): the pagination block was trapped inside the refetch motion.div, making it invisible during normal browsing. Moved outside the relative container entirely. - Ellipsis logic replaced navigable page buttons: Lovable used `page === 2 || page === totalPages - 1` which collapsed pages 2 and penultimate into ellipsis unconditionally. Fixed to use `page === currentPage ± 2` as boundary. FEATURES - NoveltyProductGrid: client-side pagination (20 items/page), page reset on filter/sort change, hides paginator when ≤1 page. - NoveltyCards: ARIA attributes (role, aria-label, aria-selected, tabIndex, onKeyDown) + useCallback for handler stability. - VariantStockTable: inline loading skeleton (isLoading prop) with animate-pulse rows; prop forwarded from StockDashboard. - StockDashboard: error UI with AlertCircle + retry button surfaced from useVariantStock; passes isFetching → isLoading to table. - useVariantStock: exposes `error`; adds retry×3 with exponential backoff (1s→2s→4s capped at 10s). - stockFetcher: throws instead of silently breaking on Supabase error; detects 410/Gone and emits Portuguese user-facing message. - ModernSkeletons: increased title min-height and added price-area skeleton with min-h-[3.25rem] to match card layout. - CI: parallel Playwright shards (2×) in visual-tests.yml; workers=2 in playwright.config.ts. - E2E: novelty-grid-visual.spec.ts expanded to 4 viewports × 5 tests + 3 global tests; novelty-card-variations.spec.ts (new); stock regression spec in tests/e2e/. SKIPPED (already applied in Phase 1/2) - rest-native.ts additions (variant_supplier_sources, supplier_branches, categories) were committed in the Phase 1 kill-switch and Phase 2 ghost-aliases sessions. https://claude.ai/code/session_015DVTnofjTd3PtzU2kGvYtV
…s Lovable PRs #547-#552 (#553) * feat(novelties+stock): resolve 5 Lovable PRs with critical bug fixes Implements all features from Lovable PRs #547-#552 on a clean base, fixing three critical bugs before merge: BUGS FIXED - Rules of Hooks violation in VariantStockTable: Lovable placed early return BEFORE remaining hook calls; moved isLoading guard after all hooks to comply with React invariant. - Pagination rendered inside AnimatePresence overlay (isFetching branch only): the pagination block was trapped inside the refetch motion.div, making it invisible during normal browsing. Moved outside the relative container entirely. - Ellipsis logic replaced navigable page buttons: Lovable used `page === 2 || page === totalPages - 1` which collapsed pages 2 and penultimate into ellipsis unconditionally. Fixed to use `page === currentPage ± 2` as boundary. FEATURES - NoveltyProductGrid: client-side pagination (20 items/page), page reset on filter/sort change, hides paginator when ≤1 page. - NoveltyCards: ARIA attributes (role, aria-label, aria-selected, tabIndex, onKeyDown) + useCallback for handler stability. - VariantStockTable: inline loading skeleton (isLoading prop) with animate-pulse rows; prop forwarded from StockDashboard. - StockDashboard: error UI with AlertCircle + retry button surfaced from useVariantStock; passes isFetching → isLoading to table. - useVariantStock: exposes `error`; adds retry×3 with exponential backoff (1s→2s→4s capped at 10s). - stockFetcher: throws instead of silently breaking on Supabase error; detects 410/Gone and emits Portuguese user-facing message. - ModernSkeletons: increased title min-height and added price-area skeleton with min-h-[3.25rem] to match card layout. - CI: parallel Playwright shards (2×) in visual-tests.yml; workers=2 in playwright.config.ts. - E2E: novelty-grid-visual.spec.ts expanded to 4 viewports × 5 tests + 3 global tests; novelty-card-variations.spec.ts (new); stock regression spec in tests/e2e/. SKIPPED (already applied in Phase 1/2) - rest-native.ts additions (variant_supplier_sources, supplier_branches, categories) were committed in the Phase 1 kill-switch and Phase 2 ghost-aliases sessions. https://claude.ai/code/session_015DVTnofjTd3PtzU2kGvYtV * fix(lint): prefix unused functions to satisfy ESLint baseline gate PriceFreshnessBadge.tsx: formatExactDateTime → _formatExactDateTime rpc-native.ts: NOT_IN_DB → _NOT_IN_DB (superseded by inline stubs) https://claude.ai/code/session_015DVTnofjTd3PtzU2kGvYtV * fix(lint): remove unused formatExactDateTime helper from PriceFreshnessBadge Function was never called; removing avoids both unused-vars and naming-convention violations. https://claude.ai/code/session_015DVTnofjTd3PtzU2kGvYtV --------- Co-authored-by: Claude <noreply@anthropic.com>
📋 Descrição
🎯 Tipo de mudança
🔗 Issues relacionadas
Closes #
Refs #
🌐 Sistemas afetados
🧪 Como testar
✅ Checklist pré-merge
Qualidade
npx tsc --noEmitpassa sem errosnpm run test)Segurança
console.logcom payloads sensíveis (usarlogger.*)Documentação
mem://) se a mudança afetar arquitetura/regras_backup_*_YYYYMMDDse destrutivasUI
📸 Screenshots (se UI)
🔄 Plano de rollback
Summary by cubic
Virtualized the Novidades grid with pagination and consistent card layout, and added end-to-end visual and accessibility coverage. This improves scroll performance, reduces layout shift, and speeds up CI visual tests.
New Features
VirtualizedNoveltyGridusing@tanstack/react-virtualfor smoother scrolling and large lists (up to 400 items).NoveltyGridCardaccessibility: role/aria labels, keyboard (Enter/Space) support, and stable min-heights for title/price. Aligned skeletons to match card layout. Refreshed page header with test IDs.@playwright/test+@axe-core/playwright) covering grid regressions across viewports, skeleton state, pagination, keyboard focus, and card variations.Refactors
--shardmatrix and setworkers=2; upload per-shard reports for faster, reliable runs.SupabaseConnectionDebugfrom the auth page.Written for commit 1ed69b4. Summary will update on new commits.