letsbe/pn-new-crm
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat(mobile): set data-form-factor body attr from User-Agent in root layout

Browse Source
This commit is contained in:
Matt Ciaccio
2026-04-29 13:59:03 +02:00
parent 906127a292
commit 9f786fbcf3
3 changed files with 74 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/layout.tsx
View File

@@ -1,6 +1,8 @@
import type { Metadata, Viewport } from 'next';
import { headers } from 'next/headers';
import { Inter, JetBrains_Mono } from 'next/font/google';
import { Toaster } from 'sonner';
import { classifyFormFactor } from '@/lib/form-factor';
import './globals.css';
const inter = Inter({
@@ -42,10 +44,16 @@ export const metadata: Metadata = {
},
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
export default async function RootLayout({ children }: { children: React.ReactNode }) {
const headerList = await headers();
const formFactor = classifyFormFactor(headerList.get('user-agent'));
return (
<html lang="en" suppressHydrationWarning>
<body className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}>
<body
data-form-factor={formFactor}
className={`${inter.variable} ${jetbrainsMono.variable} font-sans antialiased`}
>
{children}
<Toaster richColors position="top-right" />
</body>

14
src/lib/form-factor.ts Normal file
View File

@@ -0,0 +1,14 @@
export type FormFactor = 'mobile' | 'desktop';
const MOBILE_TOKENS = ['Mobile', 'iPhone', 'iPad', 'Android'] as const;
/**
* Classify a User-Agent string as 'mobile' or 'desktop'.
* Defaults to 'desktop' when the UA is missing or unrecognized — the CSS
* media-query fallback in globals.css handles desktop browsers resized below
* the lg breakpoint, so a wrong-but-defaultish classification never breaks UX.
*/
export function classifyFormFactor(userAgent: string | null | undefined): FormFactor {
if (!userAgent) return 'desktop';
return MOBILE_TOKENS.some((token) => userAgent.includes(token)) ? 'mobile' : 'desktop';
}