feat: prevent mobile screen timeout using Screen Wake Lock API

[Nakshatra480]

Description

This PR addresses a common usability issue where mobile devices dim or turn off their screens during inactivity while using the remote trackpad. This is particularly inconvenient when using Rein as a media remote or for occasional inputs.

I've implemented the Screen Wake Lock API within the trackpad route to ensure the device remains awake as long as the interface is active and visible.

Changes

• Added useEffect in trackpad.tsx to manage the wake lock lifecycle.
• Implemented automatic re-acquisition of the wake lock when the tab becomes visible again (handling visibilitychange).
• Ensured the lock is properly released on component unmount to preserve battery life.
• Added feature detection to ensure compatibility across different browsers without breaking functionality.

Verification Results

• Android/Chrome: Verified the screen stays active indefinitely while on the /trackpad route.
• iOS/Safari: Verified compatibility with modern WebKit versions supporting the Wake Lock API.
• Resource Usage: Confirmed that the lock is released immediately when navigating away from the trackpad or backgrounding the browser.

Fixes #78

Summary by CodeRabbit

• New Features
  • The trackpad page now keeps the screen active to prevent dimming or sleep while in use.
  • Automatically re-activates the screen lock when you return to the page and releases it when you leave to restore normal device behavior.

[coderabbitai]

📝 Walkthrough

Walkthrough

Requests a Screen Wake Lock when the trackpad component mounts, stores the lock, re-requests it on document visibility changes, and releases it when the component unmounts.

Changes

Cohort / File(s)	Summary
Screen Wake Lock Integration src/routes/trackpad.tsx	Added useEffect using navigator.wakeLock.request('screen'); introduced sentinelRef and mountedRef; attaches visibilitychange listener to re-request the lock; releases lock and removes listener on unmount.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Poem

🐰
I hopped to keep your screen alight,
A tiny wake lock through the night.
No more locks when you pause and stare—
The cursor dances, I sit and care. 🥕✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the main change: implementing the Screen Wake Lock API to prevent mobile screen timeout in the trackpad route.
Linked Issues check	✅ Passed	All coding requirements from issue #78 are met: Screen Wake Lock API is implemented on mount, visibilitychange handler re-acquires the lock, and it releases on unmount.
Out of Scope Changes check	✅ Passed	All changes are within scope—only trackpad.tsx was modified to add wake lock functionality as specified in issue #78, with no unrelated alterations.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

No actionable comments were generated in the recent review. 🎉

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Fix all issues with AI agents

In `@src/routes/trackpad.tsx`:
- Around line 35-49: The wake-lock can leak if the async request resolves after
unmount; replace the local wl/req/vc pattern with a ref and clearer names: use a
useRef<WakeLockSentinel | null> named sentinelRef and a mountedRef boolean to
track lifecycle, rename req to requestWakeLock and vc to handleVisibilityChange,
and in requestWakeLock await (navigator as any).wakeLock.request('screen') into
a local result variable then if mountedRef.current assign sentinelRef.current =
result else immediately call await result.release(); ensure cleanup sets
mountedRef.current = false, removes the visibility listener, and releases
sentinelRef.current if present; also replace the empty catch with
console.warn(error) and use the WakeLockSentinel type instead of any.

[Nakshatra480]

Hi @imxade, I’ve implemented the Screen Wake Lock API in trackpad.tsx to prevent mobile screens from dimming while using the remote. I added sentinelRef and mountedRef to handle the lock lifecycle safely, along with a visibility listener to re-acquire it automatically if the user switches back to the tab. Pls review this PR and share your feedback.
Thank you