Skip to content

feat(catalog): implement catalog list with pagination and loading states#613

Merged
Perdolique merged 1 commit intomasterfrom
next-iteration
Apr 15, 2026
Merged

feat(catalog): implement catalog list with pagination and loading states#613
Perdolique merged 1 commit intomasterfrom
next-iteration

Conversation

@Perdolique
Copy link
Copy Markdown
Owner

Summary

Implements the catalog browsing page ("Catalog list UI – URL-parity" iteration) with a full-featured item list table, pagination, and all required UI states.

Changes

Catalog browse page (app/pages/catalog/index.vue)

  • Item list table with brand, category, and name columns
  • Pagination controls with URL-driven page state
  • Loading overlay during page transitions using a role="status" live region (accessible name fix: aria-label="Loading page")
  • Initial load, empty, error, and out-of-range-page states handled

New utility (app/utils/catalog.ts)

  • formatCatalogEntry helper for consistent brand/category display across the UI

API & server

  • server/api/equipment/items/index.get.ts: handler improvements
  • server/utils/session.ts, server/utils/validation/schemas.ts: session and validation updates
  • shared/constants.ts: shared constants added

Components & styles

  • Updates to PerdButton, PerdMenu, PerdSidebar, ModalDialog, PageHeader, PagePlaceholder
  • Reset, base, and typography style updates under app/assets/styles/

Tests

  • E2E: tests/playwright/catalog/catalog-entry-list.test.ts — browsing, pagination, loading states (11 tests, all passing)
  • Unit: app/utils/__tests__/catalog.test.ts — catalog entry formatting utility

Docs

  • AGENTS.md: architecture notes update
  • plan/: roadmap updated, catalog list iteration marked complete

- ✨ Implement full catalog browse page with item table and pagination
- ✨ Add loading overlay during page transitions (status live region)
- ✨ Add initial load, empty, error, and out-of-range-page states
- ✨ Add catalog entry formatting utility (brand/category display)
- ✅ Add E2E tests for catalog list page (browsing, pagination, loading)
- ✅ Add unit tests for catalog entry formatting utility
- ♻️ Update shared constants, validation schemas, session utils
- 📚 Update plan docs: mark catalog list iteration complete
@github-actions
Copy link
Copy Markdown

🎉 Deployed to Cloudflare!

Copy link
Copy Markdown

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request implements the functional catalog list page, replacing the previous placeholder. It introduces a comprehensive CSS reset, refines component styling for buttons and dialogs, and adds utility functions for route state management. The backend items API is updated to provide stable pagination through explicit ordering and limit clamping. Additionally, the project roadmap is updated, and new unit and E2E tests are included to ensure the reliability of the catalog browsing flow. I have no feedback to provide.

@Perdolique Perdolique merged commit a8e97f6 into master Apr 15, 2026
11 checks passed
@Perdolique Perdolique deleted the next-iteration branch April 15, 2026 17:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant