788-feat: Add filter for merch

[antonina220590]

What type of PR is this? (select all that apply)

• 🍕 Feature
• 🐛 Bug Fix
• 🚧 Breaking Change
• 🧑‍💻 Code Refactor
• 📝 Documentation Update

Description

Add filter for merch page for desktop and mobile view
Add tests for filter component

Related Tickets & Documents

• Related Issue Add filters for merch catalog #788
• Closes Add filters for merch catalog #788

Screenshots, Recordings

Added/updated tests?

• 👌 Yes
• 🙅‍♂️ No, because they aren't needed
• 🙋‍♂️ No, because I need help

[optional] Are there any post deployment tasks we need to perform?

[optional] What gif best describes this PR or how it makes you feel?

Summary by CodeRabbit

• New Features

  • Interactive merch catalog: client-side search with debounced input, multi-tag filters (checkboxes), tags dropdown, clear-filters, and a contextual no-results view.

• Style

  • New styles for search input, checkboxes, filters, tags dropdown, catalog layout, and empty-state.

• Tests

  • Extensive unit and UI tests for search, filters, tag extraction, helpers, catalog, and no-results behavior.

• Chores

  • Relaxed merch tag typing, added URL parameter constants, and updated type resolution path.

[coderabbitai]

Actionable comments posted: 2

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ae1dcb0 and c46a631.

📒 Files selected for processing (2)

• src/widgets/merch-catalog/ui/merch-filter/merch-tags-dropdown/merch-tags-dropdown.tsx (1 hunks)
• src/widgets/merch-catalog/ui/no-merch/no-merch.tsx (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2024-12-14T11:15:51.682Z

Learnt from: Quiddlee
PR: rolling-scopes/site#659
File: src/widgets/school-menu/ui/school-item/school-item.tsx:0-0
Timestamp: 2024-12-14T11:15:51.682Z
Learning: When an image is purely decorative, adding `aria-hidden="true"` to the `Image` component is acceptable for accessibility instead of providing an alt text.

Applied to files:

• src/widgets/merch-catalog/ui/merch-filter/merch-tags-dropdown/merch-tags-dropdown.tsx

🧬 Code graph analysis (2)

src/widgets/merch-catalog/ui/merch-filter/merch-tags-dropdown/merch-tags-dropdown.tsx (1)

src/shared/ui/subtitle/subtitle.tsx (1)

• Subtitle (36-59)

src/widgets/merch-catalog/ui/no-merch/no-merch.tsx (4)

src/widgets/merch-catalog/index.ts (1)

• NoMerch (2-2)

src/shared/ui/paragraph/paragraph.tsx (1)

• Paragraph (24-36)

src/shared/constants.ts (1)

• ROUTES (96-115)

src/widgets/merch-catalog/ui/merch-catalog.tsx (1)

• products (13-34)

🔇 Additional comments (2)

src/widgets/merch-catalog/ui/no-merch/no-merch.tsx (2)

1-11: Verify if 'use client' directive is needed.

A past reviewer suggested adding the 'use client' directive at the top of this file. While this component has no client-side interactivity (hooks or handlers), verify whether the parent usage context requires it to be a Client Component.

Based on past review comments.

---

29-43: LGTM!

The conditional rendering logic is clean and the text content appropriately reflects the filtered/unfiltered states. Good use of LinkCustom for navigation.