✨ My Shaves - Add search, filtering, and sorting

[joshbermanssw]

Cc: @calumjs @ricksu978 @adamcogan
Hi YakShaver devs

▶️ Watch the video (00:46)

Pain

The new “My Shaves” pages (per Figma) include a search bar plus filtering and sorting, but YakShaver Desktop doesn’t currently provide this capability on the new pages. This makes it harder for users to quickly find specific shaves and manage larger histories.

Suggested Solution

Implement search, filtering, and sorting on the “My Shaves” pages in YakShaver Desktop, aligning with the Figma design.

Ensure the filter/sort fields are agreed with the YakShaver devs (and Josh if involved) and consider using the same table-based filtering/sorting UX pattern we use elsewhere (e.g., Tina Cloud-style table header filter/sort experience) if appropriate.

Acceptance Criteria

Acceptance Criteria defines the requirements that must be met for the story to be completed. This is WHAT must be done.

See https://www.ssw.com.au/rules/acceptance-criteria.

1. “My Shaves” page includes a search input that filters results based on the agreed search fields.
2. “My Shaves” page includes filters that match the agreed filter fields from the YakShaver devs/Figma.
3. “My Shaves” page supports sorting based on the agreed sortable columns/fields.
4. Search, filters, and sorting can be cleared / reset to defaults.
5. Search, filters, and sorting behavior matches the Figma intent (where specified).

Tasks

Tasks help developers to track small bits of work needed to meet the ACs. This is HOW the work will be done.

• Review Figma for “My Shaves” search, filter, and sort requirements
• Confirm with YakShaver devs which fields are searchable
• Confirm with YakShaver devs which fields are filterable
• Confirm with YakShaver devs which fields are sortable
• Confirm with Josh whether he is the intended implementer
• Decide whether to use a table header filter/sort UX pattern (Tina Cloud-style)
• Implement search on “My Shaves”
• Implement filtering on “My Shaves”
• Implement sorting on “My Shaves”
• Add a “Clear filters / reset” action
• Add tests for search behavior
• Add tests for filtering behavior
• Add tests for sorting behavior

More Information

Figma reference: new “My Shaves” pages (search + filtering + sorting).

Screenshots

Thanks!

[joshbermanssw]

✅ Done

Figure: Users can not search, filter, and sort items