Objective:
Enable users to add listings to a comparison list by clicking on the scale icon from the list of listings.
Requirements:
Icon Implementation:
Add a scale icon to each listing card in the list view.
Place the icon prominently in the top-right corner of each card.
Functionality:
Default State: The scale icon appears grayed out when the listing is not added to the comparison list.
Active State: Highlight the scale icon (e.g., change to blue or green) when the listing is added to the comparison list.
Hover/Tooltip:
Show a tooltip on hover:
Default: "Add to Comparison"
Active: "Remove from Comparison"
Click Interaction:
Clicking the scale icon toggles the listing's inclusion in the comparison list:
Add the listing to the comparison list and update the icon to the active state.
Remove the listing from the comparison list if already added and revert the icon to the default state.
Comparison Limit:
Restrict the comparison to 6 listings maximum.
If the user tries to add more than 6 listings, display a toast or modal: "You can only compare up to 6 listings."
UI Integration:
Update the floating comparison bar to reflect the count of selected listings dynamically as users add or remove listings.
Visual Feedback:
Provide a quick animation (e.g., a scale icon bounce or color fade) when adding/removing a listing to/from the comparison list.
Data Handling:
Maintain a local/session storage mechanism to track the selected listings.
Sync with the comparison page so users can proceed to view the selected listings.
Testing:
Ensure the feature works across all devices, screen sizes, and browsers.
Verify that the comparison count updates correctly in the floating bar.
