tiagoandClaude Sonnet 5
323912748f
Adiciona o frontend Next.js em frontend/ (setup, design system, autenticação/tema, layout/navegação, área master, área tenant completa: clientes, produtos, vendas, recebimentos, whatsapp, e-mail, alertas, equipe e perfil). Estende o backend de forma aditiva e autorizada: cookie httpOnly para refresh token (Etapa 13) e CRUD de equipe + edição de perfil do tenant (Etapa 18, módulo src/modules/equipe/ novo e PUT /tenant/perfil). Detalhes completos em Etapas/V2/*. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
33 lines
1.0 KiB
TypeScript
33 lines
1.0 KiB
TypeScript
'use client';
|
|
|
|
import { useSyncExternalStore } from 'react';
|
|
|
|
function subscribe(query: string, callback: () => void) {
|
|
const mql = window.matchMedia(query);
|
|
mql.addEventListener('change', callback);
|
|
return () => mql.removeEventListener('change', callback);
|
|
}
|
|
|
|
/**
|
|
* Fonte única de verdade para os breakpoints usados por componentes que
|
|
* mudam de comportamento entre desktop e mobile (Table ↔ cards,
|
|
* Modal ↔ Sheet). SSR-safe: retorna `false` no servidor e sincroniza no
|
|
* client via `useSyncExternalStore`, evitando mismatch de hidratação.
|
|
*/
|
|
export function useMediaQuery(query: string): boolean {
|
|
return useSyncExternalStore(
|
|
(callback) => subscribe(query, callback),
|
|
() => window.matchMedia(query).matches,
|
|
() => false,
|
|
);
|
|
}
|
|
|
|
/** Breakpoint `md` (768px) do schema de arquitetura — desktop acima, mobile abaixo. */
|
|
export function useIsDesktop(): boolean {
|
|
return useMediaQuery('(min-width: 768px)');
|
|
}
|
|
|
|
export function usePrefersReducedMotion(): boolean {
|
|
return useMediaQuery('(prefers-reduced-motion: reduce)');
|
|
}
|