fixing arrows in the carousel

[pory-gone]

Description

fix #2500
Added navActive state (useState) and idleTimerRef.
Introduced getIdleTimer and bumpActivity functions: each interaction makes the arrows opaque and restarts the timer;
when the timer expires, they become semi-transparent.

Called bumpActivity:

• on opening/index change
• on arrow click
• on mouse movement
• on touch
• on swipe
• on arrow keys

Added navActive and navIdle CSS classes with icon background/opacity/fill differences.
Cleaned up timers in unmount to avoid leaks.

Screenshots

2025-09-10-17-57-56.mp4

Additional Context

opacity and IDLE_DELAY are customizable based on your preferences.
I set the delay to the following time: IDLE_DELAY=2000 ms

Checklist

Are your changes backward compatible? Please answer below:
Yes

On a scale of 1-10 how well and how have you QA'd this change and any features it might affect? Please answer below:
6/10

For frontend changes: Tested on mobile, light and dark mode? Please answer below:
Tested mobile mode on chromium

Did you introduce any new environment variables? If so, call them out explicitly here:
NaN

Did you use AI for this? If so, how much did it assist you?
I used AI to find the files to edit, I did a manual search to figure out how to edit

[ekzyis]

I haven't looked too closely at the code, but is there a way to refactor this such that the code for fading them out after a timeout is in a dedicated component with the arrow?

Does the carousel component have to know how the arrows are styled?

[pory-gone]

No, actually, it doesn't need it. I thought about adding it there because the carousel already handles all those types of events, but everything can be managed separately. I'll implement an alternative solution right away!

[pory-gone]

With this implementation the carousel no longer knows the state of the arrows because they are managed by a dedicated CarouselArrow component and the useAutoFade hook centralizes the logic and can be used elsewhere.

[ekzyis]

because the carousel already handles all those types of events

Yeah that's a common issue with technical debt. It's a negative feedback loop.

With this implementation the carousel no longer knows the state of the arrows because they are managed by a dedicated CarouselArrow component and the useAutoFade hook centralizes the logic and can be used elsewhere.

Cool, will take a look when I have time