web: product selection page fixes and improvements

[dgdavid]

Problem

On the product selection screen, the selected product can visually lose focus when the user interacts with other interactive elements on the page, such as the top-right header menu. Although the product remains selected internally, the UI no longer renders the option as selected.

This issue is caused by a combination of re-renders that recreate the available products collection and the isChecked prop comparing entire product objects instead of stable values (such as product ids). As a result, object reference changes cause the selection state to appear lost.

Solution

While the issue might have been mitigated by usage of memoization (useMemo or useCallback) somewhere, this PR addresses the root cause by comparing products using stable identifiers (id) rather than full object references, making the selection logic more robust and less error-prone.

During the work on the regression test, it became clear that the component would benefit from a broader refactor to improve maintainability and user experience. As a result, this PR goes beyond a simple hotfix and delivers a more polished version of the product selection page, including UX and visual improvements, codebase cleanup, expanded unit test coverage, and preparation for related near-term features.

Testing

• Added new unit tests covering the regression and increasing covered behaviors
• Manually tested the product selection flow either, in initial selection and changing the product

Screenshots

[imobachgs]

Good job! I really like the new product selection page and it fixes the problems reported by QA.