feat: Create a compatibility score explainer

[RahulNavneeth]

Issue Reference

• Resolves #6457

Feature Implementation

• Introduces a stateful widget to explain how the compatibility score is computed.
• Adds sorting functionality, allowing users to sort by score and importance (user preference).

Changes Implemented in the Existing Codebase

1. Added a suffix widget in SmoothModalSheet.
2. Introduced foreground and background colors for SmoothModalSheetHeaderButton.

Screenshots

Video

Before

Watch here

After

Watch here

Potential Improvements

• I couldn't find the exact sort button icon from SmoothIcon as specified in the design for #6457 , so I used the clear icon as a placeholder. Open to suggestions for a better alternative.

Additional Notes

• This PR gave me a deep dive into the codebase, helping me understand how different parts interact.
• Everything was well-structured, making it easy to jump in and contribute!
• Super excited to hear your thoughts! 🤗

[codecov-commenter]

Codecov Report

:x: Patch coverage is 0% with 255 lines in your changes missing coverage. Please review. :white_check_mark: Project coverage is 5.85%. Comparing base (4d9c7fc) to head (43b1338). :warning: Report is 1249 commits behind head on develop.

Files with missing lines	Patch %	Lines
...lib/pages/product/helpers/compatibility_score.dart	0.00%	236 Missing :warning:
...generic_lib/bottom_sheets/smooth_bottom_sheet.dart	0.00%	17 Missing :warning:
...pages/product/product_page/new_product_header.dart	0.00%	2 Missing :warning:

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6475      +/-   ##
==========================================
- Coverage     9.54%   5.85%   -3.70%     
==========================================
  Files          325     497     +172     
  Lines        16411   29797   +13386     
==========================================
+ Hits          1567    1744     +177     
- Misses       14844   28053   +13209     

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

:rocket: New features to boost your workflow:

• :snowflake: Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

[monsieurtanuki]

I let @g123k review first the PR, specifically about the UI.

[g123k]

Hi @RahulNavneeth. Thanks for your PR.

There are some issues with your implementation:

• The banner on top should have a white text
• Sections have a wrong color
• I guess the size of the text in sections is too big
• Text is missing for each attribute
• The bottom buttons are within a container with a slight shadow
• Radius of buttons are incorrect -…

TLDR: Please implement the design as it's provided in the issue.

[RahulNavneeth]

Thank you for reviewing @g123k , working on the changes right away 👍

[monsieurtanuki]

@RahulNavneeth For the record you're supposed to create a branch and to work on it, instead of working on the main develop branch.

[RahulNavneeth]

Understood, @monsieurtanuki 👍. For this particular case, is it okay? I ask because creating a new branch and raising a PR will result in a new PR

[monsieurtanuki]

Not sure, I hope it's ok.

[RahulNavneeth]

Hi @g123k , I made the requested design changes. Please review. Thanks!

[teolemon]

/gemini review

[RahulNavneeth]

Thanks for reviewing @g123k , Working on the changes right away 👍

[teolemon]

@RahulNavneeth any update on that ? your PR has small merge conflicts.