Feature/fun facts toast

[DevxNadeem]

🔍 Description
This pull request introduces a Fun Fact light/toast popup across PhysicsHub simulations to display short, engaging physics facts while users explore simulations.

What this PR adds -
=> A reusable FunFactSlider component with clean UI
=> Auto-dismiss behavior using a timer
=> Contextual physics facts per simulation (via chapters.js)
=> Integration into simulation header/navigation
=> Subtle styling updates for better visual consistency

--This enhancement improves learner engagement without interrupting the simulation experience.

-Closes #12

✅ Checklist --

• Verified that the project builds and runs locally (npm run dev)
• Ensured no ESLint or TypeScript errors
• Added reusable and isolated component logic
• Verified responsiveness on desktop and mobile
• Followed the CONTRIBUTING.md guidelines

🎨 Visual Changes (UI-related)
-->Ball Gravity Simulation

-->Displays a fun fact about objects falling at the same rate in a vacuum

-->Appears as a light/toast popup on the top-right

-->Auto-dismisses after a short duration

📸 Screenshot attached

📂 Type of Change ----
✨ New feature
📝 Documentation update
♻️ Refactor
🎨 UI/UX enhancement

🧩 Additional Notes for Reviewers ---
The popup is non-blocking and auto-dismisses to avoid distraction
Component is reusable and easy to extend for future simulations
No breaking changes were introduced
Styling follows the existing PhysicsHub design language

🚀 Final note ---
This feature is intentionally lightweight and designed to scale as more simulations and facts are added.

[mattqdev]

Hey thank you for this, can you add a little bit of padding on the toast?
Like top and bottom, and a little bit on the side

[mattqdev]

And please also run npm run format before push the code

[mattqdev]

Thank you for this, I will review your code in this afternoon probably, meanwhile can you send me a screenshot of the updated UI?

[DevxNadeem]

Thanks for the update!

Here’s a screenshot of the updated Fun Facts Toast UI with the improved spacing and styling.
Let me know if you’d like any tweaks

[physicshub]

Hey man, sorry again, By padding I meant a bit of spacing inside the toast, since currently the elements are all very stuck together.

also:

• please don't push package-lock.json changes
• why did you deleted next.config file and changed in .mjs?
• why did you deleted desc of the chapters?

After this I think it's all alright

[DevxNadeem]

Thanks for the clarification!

Could you please specify what CSS changes you'd like for the toast component?
I want to make sure I update it exactly as expected.

[mattqdev]

Sure! I'd like more space between toast container and the right side of the window.
Then just add a general padding for the entire container toast (like padding: ...;)
Last one please for the border-radius of the toast, if you haven't already done it, use the global variable for a standardisation (like this: border-radius: var(--border-radius);)

And then just send me the result and thats it

[DevxNadeem]

Thanks for the clarification!

Just to confirm — I will:

• Add more space between the toast container and the right side of the window
• Add general padding to the entire toast container
• Use the global border-radius variable

No additional spacing changes & styling inside the toast container , correct means keep intact the toast container ?

I'll send the updated result once done.

[mattqdev]

Yeah you said right, I'll wait the result!

[DevxNadeem]

is this ok ? update the css for container only