# Product Filter Selected Tags Fix 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:** Show selected logistics and process filters as removable gray tags matching Figma.

**Architecture:** Keep `selectedTagIds` as the only source of truth. `ProductTagFilter` derives the selected `Tag` objects from its props and emits the existing `toggle-tag` event when a selected tag is removed.

**Tech Stack:** Nuxt 4, Vue 3 Composition API, TypeScript, scoped CSS, Vitest, Vue Test Utils.

---

### Task 1: Selected Filter Tags

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

- [x] **Step 1: Write the failing component test**

Mount the component with selected logistics and process IDs. Assert that `包邮` and `烫画` appear in `.selected-tag`, and clicking the first `.selected-tag-remove` emits `toggle-tag` with the selected ID.

- [x] **Step 2: Run the focused test and verify RED**

Run `pnpm --filter @inkreach/website test -- --run test/ProductTagFilter.test.ts` and expect failure because `.selected-tag` does not exist.

- [x] **Step 3: Implement the selected tag row**

Add a pure `computed` mapping from `selectedTagIds` to tags. Render each selected tag below the dropdown row with `#f2f2f2` background, 30px height, 16px horizontal padding, 6px gap, 60px radius, 16px black text, and a 20px remove icon button.

- [x] **Step 4: Verify GREEN and regressions**

Run the focused test, the complete website test suite, and the website production build. Browser-test selection and removal at `http://localhost:3000/product-center`.
