Display a warning on mobile devices

[fulopkovacs]

• Center the cards on home intro when there's only one column
• Display a warning on mobile devices

Summary by CodeRabbit

• New Features

  • Mobile device detection automatically routes mobile users to a dedicated mobile-optimized interface.
  • Warning notification displays for users accessing the app on mobile devices.

• UI/UX Improvements

  • Features list is now center-aligned for better visual presentation.
  • "Get started" button is disabled on mobile devices.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Warning

Rate limit exceeded

@fulopkovacs has exceeded the limit for the number of commits that can be reviewed per hour. Please wait 3 minutes and 12 seconds before requesting another review.

⌛ How to resolve this issue?

After the wait time has elapsed, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout.

Please see our FAQ for further information.

📥 Commits

Reviewing files that changed from the base of the PR and between ad1c73b and 3273219.

📒 Files selected for processing (2)

• src/routes/__root.tsx
• src/server/functions/getIsMobile.ts

Walkthrough

This PR adds mobile device detection and routing. A server-side helper inspects the request user-agent in the index route's beforeLoad hook and conditionally redirects mobile clients to a new /mobile route. The HomeIntro component accepts an isMobile prop to render mobile-specific UI adjustments, including a warning message and a disabled "Get started" button.

Changes

Cohort / File(s)	Summary
HomeIntro component updates src/components/HomeIntro.tsx	Added isMobile prop (default: false) to component signature and types. When true, renders a mobile warning paragraph and disables the "Get started" button. Added justify-center to features list for center alignment.
Route detection and redirection src/routes/index.tsx	Introduced server-side getIsMobile() helper that inspects the request user-agent header. Updated beforeLoad hook to redirect mobile clients to /mobile and non-mobile clients to /projects.
Mobile route definition src/routes/mobile.tsx	New file. Creates file-based route at /mobile using TanStack Router. Renders HomeIntro with mobile-specific props: activeStep={null}, showIntro={true}, isMobile={true}.
Route configuration generation src/routeTree.gen.ts	Auto-generated file updated to include new MobileRoute definition and type mappings (FileRoutesByFullPath, FileRoutesByTo, FileRoutesById, RootRouteChildren). Module augmentation added for TANSTACK React Router with /mobile route metadata.

Sequence Diagram

sequenceDiagram
    actor Client
    participant Server
    participant Router
    participant Mobile as Mobile Route
    participant HomeIntro

    Client->>Server: Request to /
    Server->>Server: getIsMobile() checks user-agent
    alt Mobile Device Detected
        Server->>Router: redirect to /mobile
        Router->>Mobile: load /mobile route
        Mobile->>HomeIntro: render with isMobile=true
        HomeIntro->>Client: show mobile warning & disabled button
    else Desktop Device
        Server->>Router: redirect to /projects
        Router->>Client: load /projects route
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Update the intro #28: Modifies HomeIntro component props and UI styling, overlapping with the isMobile prop additions in this PR.
• Fix the visibility of the intro state #36: Updates HomeIntro's exported function signature and prop handling (previously modified intro prop to showIntro), directly related to new prop changes here.
• Fix the intro (it doesn't show up rn) #27: Modifies how HomeIntro is invoked with different props, relevant to the new isMobile prop usage pattern.

Pre-merge checks and finishing touches

❌ 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%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Display a warning on mobile devices' accurately reflects the main change: adding mobile device detection and displaying a warning (via the mobile warning paragraph and disabled button) to mobile users.

---

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

[github-actions]

🚀 Preview Deployment

Status: ✅ Ready!

Preview URL: Open Preview

Commit: 327321981e443af40572892894c76fd5fda405bc

Built and deployed successfully

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 33ca4a2 and ad1c73b.

📒 Files selected for processing (4)

• src/components/HomeIntro.tsx
• src/routeTree.gen.ts
• src/routes/index.tsx
• src/routes/mobile.tsx

🧰 Additional context used

📓 Path-based instructions (3)

src/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Always ensure no formatting/linting issues exist in code - use pnpm check --fix to automatically fix issues

Files:

• src/components/HomeIntro.tsx
• src/routes/mobile.tsx
• src/routeTree.gen.ts
• src/routes/index.tsx

**/*.{tsx,ts}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer functions over arrow functions for React components

Files:

• src/components/HomeIntro.tsx
• src/routes/mobile.tsx
• src/routeTree.gen.ts
• src/routes/index.tsx

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Prefer type over interface for type definitions

Files:

• src/components/HomeIntro.tsx
• src/routes/mobile.tsx
• src/routeTree.gen.ts
• src/routes/index.tsx

🧠 Learnings (3)

📚 Learning: 2025-12-24T15:25:07.106Z

Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 22
File: src/components/TodoBoards.tsx:63-81
Timestamp: 2025-12-24T15:25:07.106Z
Learning: In Tailwind CSS v4, prefer canonical classes using bg-linear-to-* (e.g., bg-linear-to-b, bg-linear-to-t, bg-linear-to-r) over the older bg-gradient-to-* syntax. This aligns with Tailwind LSP's suggestCanonicalClasses rule. Apply across TSX files (e.g., src/components/*.tsx); replace occurrences of bg-gradient-to-* with the corresponding bg-linear-to-* equivalents and verify gradients visually.

Applied to files:

• src/components/HomeIntro.tsx
• src/routes/mobile.tsx
• src/routes/index.tsx

📚 Learning: 2025-12-28T23:34:13.416Z

Learnt from: fulopkovacs
Repo: fulopkovacs/trytanstackdb.com PR: 32
File: src/components/HomeIntro.tsx:16-25
Timestamp: 2025-12-28T23:34:13.416Z
Learning: In Motion (motion/react), when configuring variant transitions, use delayChildren: stagger(x) to create per-child delays (e.g., delayChildren: stagger(0.2)). This is different from the older API that used a separate staggerChildren property. Apply this guidance to TSX files that declare motion variants (e.g., in src/components/**/*.tsx) and verify that stagger is imported from framer-motion. Ensure transitions reflect the intended stagger timing and that no conflicting delay values override the staggered effect.

Applied to files:

• src/components/HomeIntro.tsx
• src/routes/mobile.tsx
• src/routes/index.tsx

📚 Learning: 2025-12-29T13:20:08.388Z

Learnt from: CR
Repo: fulopkovacs/trytanstackdb.com PR: 0
File: AGENTS.md:0-0
Timestamp: 2025-12-29T13:20:08.388Z
Learning: Applies to src/route/__root.tsx : The root route is located at `src/route/__root.tsx` in this TanStack Start project

Applied to files:

• src/routes/mobile.tsx
• src/routeTree.gen.ts
• src/routes/index.tsx

🧬 Code graph analysis (3)

src/components/HomeIntro.tsx (4)

src/components/ui/card.tsx (2)

• CardContent (91-91)
• CardFooter (87-87)

src/components/ui/button.tsx (1)

• Button (63-63)

src/components/ui/sidebar.tsx (1)

• isMobile (98-100)

src/hooks/use-mobile.ts (1)

• setIsMobile (12-14)

src/routes/mobile.tsx (2)

src/routes/index.tsx (1)

• Route (12-26)

src/components/HomeIntro.tsx (1)

• HomeIntro (63-185)

src/routes/index.tsx (1)

src/routes/mobile.tsx (1)

• Route (4-6)

🔇 Additional comments (5)

src/components/HomeIntro.tsx (3)

66-66: LGTM! Clean prop addition.

The isMobile prop with an optional default value is well-structured and integrates cleanly with the existing props.

Also applies to: 70-70

---

127-127: Good centering adjustment.

Adding justify-center ensures the feature cards are centered when they wrap to a single column, improving the mobile layout.

---

148-153: Clear mobile UX with appropriate guardrails.

The warning message clearly communicates the limitation, and disabling the button prevents mobile users from encountering a broken experience.

Also applies to: 159-159

src/routes/index.tsx (1)

5-10: Server function implementation looks correct.

The user-agent detection logic is straightforward and covers common mobile devices.

src/routes/mobile.tsx (1)

8-14: LGTM! Clean mobile route implementation.

The route correctly renders HomeIntro with the mobile configuration, providing a dedicated landing page for mobile users.