inkreach-official-website/plans/feature/product-center-figma-implementation.md

# Product Center Figma Restoration Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Restore Figma node `1124:1633` in the Nuxt product center while preserving real API-backed filtering, search, and pagination.

**Architecture:** Keep `useProductCenter` as the query/state boundary and restyle the existing focused Vue components. Add a small default-filter resolver so Figma's initial state is derived from backend names rather than IDs, then compose desktop and mobile layouts in the existing page.

**Tech Stack:** Nuxt 4, Vue 3 Composition API, TypeScript, CSS, Vitest, Vue Test Utils, Playwright/browser QA.

---

### Task 1: Add Website Test Infrastructure

**Files:**
- Modify: `apps/website/package.json`
- Create: `apps/website/vitest.config.ts`
- Create: `apps/website/test/setup.ts`

- [ ] Add Vitest, Vue Test Utils, happy-dom, and a scoped `test` script.
- [ ] Configure Nuxt aliases and the Vue plugin for component tests.
- [ ] Run `pnpm --filter @inkreach/website test --run` and confirm the empty suite exits successfully.

### Task 2: Resolve the Figma Default Filter State

**Files:**
- Modify: `apps/website/app/composables/useProductCenter.ts`
- Create: `apps/website/test/useProductCenter.test.ts`

- [ ] Write failing tests for resolving `女式服装`, `T恤`, `包邮`, and `烫画` by display name while tolerating missing entries.
- [ ] Run the focused test and confirm it fails because the resolver does not exist.
- [ ] Implement and export a pure name-based resolver, then apply its result once after categories and tags load.
- [ ] Run the focused test and confirm it passes without hard-coded backend IDs.

### Task 3: Restore Sidebar and Filter Controls

**Files:**
- Modify: `apps/website/app/components/product/ProductSidebar.vue`
- Modify: `apps/website/app/components/product/ProductCountryFilter.vue`
- Modify: `apps/website/app/components/product/ProductTagFilter.vue`
- Modify: `apps/website/app/components/product/ProductFilterBar.vue`
- Create: `apps/website/test/product-filters.test.ts`

- [ ] Write failing component tests for category selection, country selection, dropdown selection, tag removal, and enter/button search submission.
- [ ] Run the focused tests and verify the missing Figma interactions or markup cause failure.
- [ ] Implement the 240px category tree, country pills, filter pills, selected chips, and 220px search control using semantic buttons and inputs.
- [ ] Add mobile drawer-compatible props and events without duplicating sidebar content.
- [ ] Run focused tests and confirm all filter events pass.

### Task 4: Restore Product Cards and Grid

**Files:**
- Modify: `apps/website/app/components/product/ProductCard.vue`
- Modify: `apps/website/app/components/product/ProductCardSkeleton.vue`
- Modify: `apps/website/app/components/product/ProductGrid.vue`
- Create: `apps/website/test/product-grid.test.ts`

- [ ] Write failing tests for image/name/tag/country/price rendering and loading/empty states.
- [ ] Run the focused tests and confirm Figma card structure expectations fail.
- [ ] Implement 270 x 382 desktop cards with 270px media, 18px title, grouped tag colors, and Figma price typography.
- [ ] Implement the four/three/two/one-column responsive grid and stable skeleton/empty layouts.
- [ ] Run focused tests and confirm all card and grid states pass.

### Task 5: Restore Pagination

**Files:**
- Modify: `apps/website/app/components/product/ProductPagination.vue`
- Create: `apps/website/test/product-pagination.test.ts`

- [ ] Write failing tests for total text, visible page tokens, previous/next, page-size selection, and page jump.
- [ ] Run the focused test and verify the expected Figma pagination controls fail.
- [ ] Implement the compact 32px pagination controls with responsive wrapping and real emitted values.
- [ ] Run focused tests and confirm pagination behavior passes.

### Task 6: Compose the Restored Page

**Files:**
- Modify: `apps/website/app/pages/product-center.vue`
- Modify: `apps/website/app/components/AppHeader.vue`
- Create: `apps/website/test/product-center-page.test.ts`

- [ ] Write a failing page-level test for Figma section order, default-state initialization, sidebar drawer trigger, and clearing filters.
- [ ] Run the focused test and confirm the current layout fails.
- [ ] Compose the 80px header, fixed-width desktop sidebar, 1200px content region, filter rows, four-column grid, ad capsule, and pagination.
- [ ] Add the mobile category drawer with backdrop, close button, escape handling, and body-scroll-safe layout.
- [ ] Run the page test and full website test suite.

### Task 7: Documentation and Structural References

**Files:**
- Modify: `docs/references/structs.md`
- Create: `docs/references/product-center.md`
- Create: `skills/inkreach-official-website/SKILL.md`

- [ ] Document the product center route, real-data filters, default state, responsive behavior, and component responsibilities.
- [ ] Update the structure reference with all created and modified website modules.
- [ ] Add the agent-facing usage workflow and verification commands.

### Task 8: Verification and Visual Comparison

**Files:**
- Modify only files required by issues found during verification.

- [ ] Run `pnpm --filter @inkreach/website test --run` and confirm zero failures.
- [ ] Run `pnpm --filter @inkreach/website build` and confirm a successful Nuxt production build.
- [ ] Start the website dev server on an available port.
- [ ] Capture `/product-center` at 1440px desktop, tablet, and mobile widths with browser automation.
- [ ] Compare desktop geometry against Figma node `1124:1633`; correct visible spacing, sizing, overflow, and overlap defects.
- [ ] Re-run tests and build after visual corrections.