feat(utils): add device detection

[maitamdev]

Device and browser detection helpers for responsive behavior.

---

Summary by cubic

Added device and browser detection utilities to support responsive behavior and conditional rendering. Provides helpers for mobile/iOS/touch checks, viewport-based device type, and basic browser name detection.

• New Features

  • isMobileDevice(), isIOSDevice(), isTouchDevice() for capability checks.
  • getDeviceType() returns 'mobile' | 'tablet' | 'desktop' using 768/1024px breakpoints.
  • getBrowserName() detects Firefox, Chrome, Safari, Edge, or Unknown via userAgent.

• Migration

  • Browser-only: guard usage in SSR (check window/navigator before calling).

^{Written for commit b0ad1cc. Summary will update on new commits.}

Summary by CodeRabbit

• New Features
  • Added comprehensive device detection capabilities to improve app responsiveness and compatibility across mobile, tablet, and desktop platforms. The app can now better identify device types, touch capability, and browser information to deliver optimized user experiences.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
dhv-guiding-light	Building	Preview, Comment	Mar 5, 2026 4:13am

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 0f3bf8e4-d371-48be-8190-47b03260b0bc

📥 Commits

Reviewing files that changed from the base of the PR and between 85345ee and b0ad1cc.

📒 Files selected for processing (1)

• src/utils/deviceDetect.ts

---

📝 Walkthrough

Walkthrough

A new utility module deviceDetect.ts has been created with five synchronous browser-based functions that detect device types, touch capability, iOS presence, and browser identity through user agent inspection and feature detection APIs.

Changes

Cohort / File(s)	Summary
Device Detection Utilities src/utils/deviceDetect.ts	Introduces five exported utility functions for client-side device detection: isMobileDevice(), isIOSDevice(), isTouchDevice(), getDeviceType(), and getBrowserName(). All functions perform synchronous, dependency-free detection via navigator properties and viewport dimensions.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Poem

🐰 A new toolkit hops into sight,
Five helpers to detect with might,
Mobile, touch, and browsers too,
Device detection, bright and new!
No dependencies in sight,
Just utils, plain and light! 🎉

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch pair/device-detect

---

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.}

[cubic-dev-ai]

1 issue found across 1 file

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="src/utils/deviceDetect.ts">

<violation number="1" location="src/utils/deviceDetect.ts:24">
P2: `getBrowserName` misclassifies Microsoft Edge as Chrome because the Chrome check runs first and Edge is matched with `Edge` instead of modern `Edg/`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}

[cubic-dev-ai]

P2: getBrowserName misclassifies Microsoft Edge as Chrome because the Chrome check runs first and Edge is matched with Edge instead of modern Edg/.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. At src/utils/deviceDetect.ts, line 24:

<comment>`getBrowserName` misclassifies Microsoft Edge as Chrome because the Chrome check runs first and Edge is matched with `Edge` instead of modern `Edg/`.</comment>

<file context>
@@ -0,0 +1,28 @@
+export function getBrowserName(): string {
+  const ua = navigator.userAgent;
+  if (ua.includes('Firefox')) return 'Firefox';
+  if (ua.includes('Chrome')) return 'Chrome';
+  if (ua.includes('Safari')) return 'Safari';
+  if (ua.includes('Edge')) return 'Edge';
</file context>