feat: Create a compatibility score explainer

[RahulNavneeth]

Issue Reference

• Resolves Create a Compatibility Score explainer #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

ScreenRecording_03-25-2025.00-34-09_1.MP4

After

ScreenRecording_03-25-2025.00-30-26_1.mov

Potential Improvements

• I couldn't find the exact sort button icon from SmoothIcon as specified in the design for Create a Compatibility Score explainer #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

Attention: Patch coverage is 0% with 255 lines in your changes missing coverage. Please review.

Project coverage is 5.84%. Comparing base (4d9c7fc) to head (72a31b4).
Report is 812 commits behind head on develop.

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

Additional details and impacted files

@@            Coverage Diff             @@
##           develop   #6475      +/-   ##
==========================================
- Coverage     9.54%   5.84%   -3.71%     
==========================================
  Files          325     497     +172     
  Lines        16411   29777   +13366     
==========================================
+ Hits          1567    1741     +174     
- Misses       14844   28036   +13192     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ 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!