feat: topbar de navegação como experimento de UI (v1.7.0)

- Substitui header fixo por topbar com backdrop blur e navegação agrupada em 5 seções
- Adiciona FerramentasDropdown consolidando calculadora e modo privacidade
- NotificationBell expandida com orçamentos e pré-lançamentos
- Remove logout-button, header-dashboard e privacy-mode-toggle como componentes separados
- Logo refatorado com variante compact; topbar com links em lowercase
- Adiciona dependência radix-ui ^1.4.3
- Atualiza CHANGELOG para v1.7.0

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/(dashboard)/ajustes/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiSettings2Line />}
 				title="Ajustes"

app/(dashboard)/anotacoes/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiTodoLine />}
 				title="Notas"

app/(dashboard)/calendario/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiCalendarEventLine />}
 				title="Calendário"

app/(dashboard)/cartoes/[cartaoId]/fatura/loading.tsx

@@ -22,7 +22,7 @@ export default function FaturaLoading() {
 
 			{/* Seção de lançamentos */}
 			<section className="flex flex-col gap-4">
-				<div className="space-y-6">
+				<div className="space-y-6 pt-4">
 					{/* Header */}
 					<div className="flex items-center justify-between">
 						<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />

app/(dashboard)/cartoes/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiBankCard2Line />}
 				title="Cartões"

app/(dashboard)/cartoes/loading.tsx

@@ -3,7 +3,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 export default function CartoesLoading() {
 	return (
 		<main className="flex flex-col gap-6">
-			<div className="space-y-6">
+			<div className="space-y-6 pt-4">
 				{/* Header */}
 				<div className="flex items-center justify-between">
 					<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />

app/(dashboard)/categorias/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiPriceTag3Line />}
 				title="Categorias"

app/(dashboard)/contas/[contaId]/extrato/loading.tsx

@@ -20,7 +20,7 @@ export default function ExtratoLoading() {
 
 			{/* Seção de lançamentos */}
 			<section className="flex flex-col gap-4">
-				<div className="space-y-6">
+				<div className="space-y-6 pt-4">
 					{/* Header */}
 					<div className="flex items-center justify-between">
 						<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />

app/(dashboard)/contas/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiBankLine />}
 				title="Contas"

app/(dashboard)/contas/loading.tsx

@@ -3,7 +3,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 export default function ContasLoading() {
 	return (
 		<main className="flex flex-col gap-6">
-			<div className="space-y-6">
+			<div className="space-y-6 pt-4">
 				{/* Header */}
 				<div className="flex items-center justify-between">
 					<Skeleton className="h-8 w-32 rounded-2xl bg-foreground/10" />

app/(dashboard)/dashboard/analise-parcelas/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiSecurePaymentLine />}
 				title="Análise de Parcelas"

app/(dashboard)/dashboard/page.tsx

@@ -36,7 +36,7 @@ export default async function Page({ searchParams }: PageProps) {
 	const { disableMagnetlines, dashboardWidgets } = preferences;
 
 	return (
-		<main className="flex flex-col gap-4 px-6">
+		<main className="flex flex-col gap-4">
 			<DashboardWelcome
 				name={user.name}
 				disableMagnetlines={disableMagnetlines}

app/(dashboard)/insights/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiSparklingLine />}
 				title="Insights"

app/(dashboard)/insights/loading.tsx

@@ -6,7 +6,7 @@ import { Skeleton } from "@/components/ui/skeleton";
 export default function InsightsLoading() {
 	return (
 		<main className="flex flex-col gap-6">
-			<div className="space-y-6">
+			<div className="space-y-6 pt-4">
 				{/* Header */}
 				<div className="space-y-2">
 					<Skeleton className="h-10 w-64 rounded-2xl bg-foreground/10" />

app/(dashboard)/lancamentos/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiArrowLeftRightLine />}
 				title="Lançamentos"

app/(dashboard)/lancamentos/loading.tsx

@@ -14,7 +14,7 @@ export default function LancamentosLoading() {
 			{/* Month Picker placeholder */}
 			<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
 
-			<div className="space-y-6">
+			<div className="space-y-6 pt-4">
 				{/* Header com título e botão */}
 				<div className="flex items-center justify-between">
 					<Skeleton className="h-8 w-48 rounded-2xl bg-foreground/10" />

app/(dashboard)/layout.tsx

@@ -61,7 +61,7 @@ export default async function DashboardLayout({
 				/>
 				<div className="flex flex-1 flex-col pt-14">
 					<div className="@container/main flex flex-1 flex-col gap-2">
-						<div className="flex flex-col gap-4 py-4 md:gap-6 w-full max-w-8xl mx-auto px-4">
+						<div className="flex flex-col gap-4 py-5 md:gap-6 w-full max-w-8xl mx-auto px-4">
 							{children}
 						</div>
 					</div>

app/(dashboard)/orcamentos/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiFundsLine />}
 				title="Orçamentos"

app/(dashboard)/orcamentos/loading.tsx

@@ -10,7 +10,7 @@ export default function OrcamentosLoading() {
 			{/* Month Picker placeholder */}
 			<div className="h-[60px] animate-pulse rounded-2xl bg-foreground/10" />
 
-			<div className="space-y-6">
+			<div className="space-y-6 pt-4">
 				{/* Header */}
 				<div className="flex items-center justify-between">
 					<div className="space-y-2">

app/(dashboard)/pagadores/[pagadorId]/loading.tsx

@@ -42,7 +42,7 @@ export default function PagadorDetailsLoading() {
 			</div>
 
 			{/* Tabs */}
-			<div className="space-y-6">
+			<div className="space-y-6 pt-4">
 				<div className="flex gap-2 border-b">
 					<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />
 					<Skeleton className="h-10 w-32 rounded-t-2xl bg-foreground/10" />

app/(dashboard)/pagadores/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiGroupLine />}
 				title="Pagadores"

app/(dashboard)/pre-lancamentos/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiInboxLine />}
 				title="Pré-Lançamentos"

app/(dashboard)/relatorios/tendencias/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiFileChartLine />}
 				title="Tendências"

app/(dashboard)/relatorios/uso-cartoes/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiBankCard2Line />}
 				title="Uso de Cartões"

app/(dashboard)/top-estabelecimentos/layout.tsx

@@ -11,7 +11,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }) {
 	return (
-		<section className="space-y-6 px-6">
+		<section className="space-y-6 pt-4">
 			<PageDescription
 				icon={<RiStore2Line />}
 				title="Top Estabelecimentos"