feat: implementar topbar como experimento de navegação

Substitui a sidebar pela topbar com NavigationMenu do shadcn/ui.

- Logo à esquerda com invert para bg primário
- Links diretos: Dashboard, Calendário, Cartões, Contas
- Dropdowns: Lançamentos, Organização, Análise
- Mobile: Sheet lateral com hamburger
- Ações à direita: notificações, calculadora, tema, etc.
- User avatar com dropdown de ajustes/logout
- CSS vars overrideados na área de ações para cor primária

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

components/topbar/app-topbar.tsx

@@ -0,0 +1,91 @@
+import Image from "next/image";
+import Link from "next/link";
+import { AnimatedThemeToggler } from "@/components/animated-theme-toggler";
+import { CalculatorDialogButton } from "@/components/calculadora/calculator-dialog";
+import { FeedbackDialog } from "@/components/feedback/feedback-dialog";
+import { NotificationBell } from "@/components/notificacoes/notification-bell";
+import { PrivacyModeToggle } from "@/components/privacy-mode-toggle";
+import { RefreshPageButton } from "@/components/refresh-page-button";
+import type { DashboardNotificationsSnapshot } from "@/lib/dashboard/notifications";
+import { TopNavMenu } from "./top-nav-menu";
+import { TopbarUser } from "./topbar-user";
+
+type AppTopbarProps = {
+	user: {
+		id: string;
+		name: string;
+		email: string;
+		image: string | null;
+	};
+	pagadorAvatarUrl: string | null;
+	preLancamentosCount?: number;
+	notificationsSnapshot: DashboardNotificationsSnapshot;
+};
+
+export function AppTopbar({
+	user,
+	pagadorAvatarUrl,
+	preLancamentosCount = 0,
+	notificationsSnapshot,
+}: AppTopbarProps) {
+	return (
+		<header className="fixed top-0 left-0 right-0 z-50 bg-primary flex h-14 shrink-0 items-center gap-3 px-4 shadow-md">
+			{/* Logo */}
+			<Link href="/dashboard" className="flex items-center gap-2 shrink-0 mr-1">
+				<Image
+					src="/logo_small.png"
+					alt="OpenMonetis"
+					width={28}
+					height={28}
+					className="object-contain"
+					priority
+				/>
+				<Image
+					src="/logo_text.png"
+					alt="OpenMonetis"
+					width={90}
+					height={28}
+					className="object-contain invert hidden sm:block"
+					priority
+				/>
+			</Link>
+
+			{/* Navigation */}
+			<TopNavMenu preLancamentosCount={preLancamentosCount} />
+
+			{/* Right-side actions — CSS vars overridden so icons render light on primary bg */}
+			<div
+				className="ml-auto flex items-center gap-1"
+				style={
+					{
+						"--foreground": "var(--primary-foreground)",
+						"--muted-foreground":
+							"color-mix(in oklch, var(--primary-foreground) 70%, transparent)",
+						"--accent":
+							"color-mix(in oklch, var(--primary-foreground) 15%, transparent)",
+						"--accent-foreground": "var(--primary-foreground)",
+						"--border":
+							"color-mix(in oklch, var(--primary-foreground) 30%, transparent)",
+					} as React.CSSProperties
+				}
+			>
+				<NotificationBell
+					notifications={notificationsSnapshot.notifications}
+					totalCount={notificationsSnapshot.totalCount}
+				/>
+				<CalculatorDialogButton withTooltip />
+				<RefreshPageButton />
+				<PrivacyModeToggle />
+				<AnimatedThemeToggler />
+				<span
+					aria-hidden
+					className="h-5 w-px bg-primary-foreground/30 mx-1 hidden sm:block"
+				/>
+				<FeedbackDialog />
+			</div>
+
+			{/* User avatar — outside the var-override div so dropdown stays normal */}
+			<TopbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
+		</header>
+	);
+}

components/topbar/top-nav-menu.tsx

@@ -0,0 +1,385 @@
+"use client";
+
+import {
+	RiArrowLeftRightLine,
+	RiBankCard2Line,
+	RiBankLine,
+	RiCalendarEventLine,
+	RiDashboardLine,
+	RiFileChartLine,
+	RiFundsLine,
+	RiGroupLine,
+	RiInboxLine,
+	RiMenuLine,
+	RiPriceTag3Line,
+	RiSparklingLine,
+	RiTodoLine,
+} from "@remixicon/react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+	NavigationMenu,
+	NavigationMenuContent,
+	NavigationMenuItem,
+	NavigationMenuList,
+	NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import {
+	Sheet,
+	SheetContent,
+	SheetHeader,
+	SheetTitle,
+	SheetTrigger,
+} from "@/components/ui/sheet";
+import { cn } from "@/lib/utils/ui";
+
+type TopNavMenuProps = {
+	preLancamentosCount?: number;
+};
+
+const triggerClass =
+	"!bg-transparent !text-primary-foreground/90 hover:!bg-primary-foreground/15 hover:!text-primary-foreground focus:!bg-primary-foreground/15 focus:!text-primary-foreground data-[state=open]:!bg-primary-foreground/20 data-[state=open]:!text-primary-foreground";
+
+function SimpleNavLink({
+	href,
+	children,
+}: {
+	href: string;
+	children: React.ReactNode;
+}) {
+	const pathname = usePathname();
+	const isActive =
+		href === "/dashboard"
+			? pathname === href
+			: pathname === href || pathname.startsWith(`${href}/`);
+
+	return (
+		<Link
+			href={href}
+			className={cn(
+				"inline-flex h-9 items-center justify-center rounded-md px-4 py-2 text-sm font-medium transition-colors",
+				"text-primary-foreground/90 hover:text-primary-foreground hover:bg-primary-foreground/15",
+				isActive && "bg-primary-foreground/20 text-primary-foreground",
+			)}
+		>
+			{children}
+		</Link>
+	);
+}
+
+type DropdownLinkItem = {
+	href: string;
+	label: string;
+	icon: React.ReactNode;
+	badge?: number;
+};
+
+function DropdownLinkList({ items }: { items: DropdownLinkItem[] }) {
+	return (
+		<ul className="grid w-48 gap-0.5 p-2">
+			{items.map((item) => (
+				<li key={item.href}>
+					<Link
+						href={item.href}
+						className="flex items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors"
+					>
+						<span className="text-muted-foreground shrink-0">{item.icon}</span>
+						<span className="flex-1">{item.label}</span>
+						{item.badge && item.badge > 0 ? (
+							<Badge
+								variant="secondary"
+								className="text-[10px] px-1.5 py-0 h-4 min-w-4 ml-auto"
+							>
+								{item.badge}
+							</Badge>
+						) : null}
+					</Link>
+				</li>
+			))}
+		</ul>
+	);
+}
+
+function MobileNavLink({
+	href,
+	icon,
+	children,
+	onClick,
+	badge,
+}: {
+	href: string;
+	icon: React.ReactNode;
+	children: React.ReactNode;
+	onClick?: () => void;
+	badge?: number;
+}) {
+	const pathname = usePathname();
+	const isActive =
+		href === "/dashboard"
+			? pathname === href
+			: pathname === href || pathname.startsWith(`${href}/`);
+
+	return (
+		<Link
+			href={href}
+			onClick={onClick}
+			className={cn(
+				"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+				"text-foreground hover:bg-accent",
+				isActive && "bg-accent font-medium",
+			)}
+		>
+			<span className="text-muted-foreground shrink-0">{icon}</span>
+			<span className="flex-1">{children}</span>
+			{badge && badge > 0 ? (
+				<Badge variant="secondary" className="text-xs px-1.5 py-0">
+					{badge}
+				</Badge>
+			) : null}
+		</Link>
+	);
+}
+
+function MobileSectionLabel({ label }: { label: string }) {
+	return (
+		<p className="mt-3 mb-1 px-3 text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+			{label}
+		</p>
+	);
+}
+
+export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
+	const [sheetOpen, setSheetOpen] = useState(false);
+	const close = () => setSheetOpen(false);
+
+	const lancamentosItems: DropdownLinkItem[] = [
+		{
+			href: "/lancamentos",
+			label: "Lançamentos",
+			icon: <RiArrowLeftRightLine className="size-4" />,
+		},
+		{
+			href: "/pre-lancamentos",
+			label: "Pré-Lançamentos",
+			icon: <RiInboxLine className="size-4" />,
+			badge: preLancamentosCount,
+		},
+	];
+
+	const organizacaoItems: DropdownLinkItem[] = [
+		{
+			href: "/orcamentos",
+			label: "Orçamentos",
+			icon: <RiFundsLine className="size-4" />,
+		},
+		{
+			href: "/pagadores",
+			label: "Pagadores",
+			icon: <RiGroupLine className="size-4" />,
+		},
+		{
+			href: "/categorias",
+			label: "Categorias",
+			icon: <RiPriceTag3Line className="size-4" />,
+		},
+		{
+			href: "/anotacoes",
+			label: "Anotações",
+			icon: <RiTodoLine className="size-4" />,
+		},
+	];
+
+	const analiseItems: DropdownLinkItem[] = [
+		{
+			href: "/insights",
+			label: "Insights",
+			icon: <RiSparklingLine className="size-4" />,
+		},
+		{
+			href: "/relatorios/tendencias",
+			label: "Tendências",
+			icon: <RiFileChartLine className="size-4" />,
+		},
+		{
+			href: "/relatorios/uso-cartoes",
+			label: "Uso de Cartões",
+			icon: <RiBankCard2Line className="size-4" />,
+		},
+	];
+
+	return (
+		<>
+			{/* Desktop nav */}
+			<nav className="hidden md:flex items-center flex-1">
+				<NavigationMenu>
+					<NavigationMenuList className="gap-0">
+						<NavigationMenuItem>
+							<SimpleNavLink href="/dashboard">Dashboard</SimpleNavLink>
+						</NavigationMenuItem>
+
+						<NavigationMenuItem>
+							<NavigationMenuTrigger className={triggerClass}>
+								Lançamentos
+							</NavigationMenuTrigger>
+							<NavigationMenuContent>
+								<DropdownLinkList items={lancamentosItems} />
+							</NavigationMenuContent>
+						</NavigationMenuItem>
+
+						<NavigationMenuItem>
+							<SimpleNavLink href="/calendario">Calendário</SimpleNavLink>
+						</NavigationMenuItem>
+
+						<NavigationMenuItem>
+							<SimpleNavLink href="/cartoes">Cartões</SimpleNavLink>
+						</NavigationMenuItem>
+
+						<NavigationMenuItem>
+							<SimpleNavLink href="/contas">Contas</SimpleNavLink>
+						</NavigationMenuItem>
+
+						<NavigationMenuItem>
+							<NavigationMenuTrigger className={triggerClass}>
+								Organização
+							</NavigationMenuTrigger>
+							<NavigationMenuContent>
+								<DropdownLinkList items={organizacaoItems} />
+							</NavigationMenuContent>
+						</NavigationMenuItem>
+
+						<NavigationMenuItem>
+							<NavigationMenuTrigger className={triggerClass}>
+								Análise
+							</NavigationMenuTrigger>
+							<NavigationMenuContent>
+								<DropdownLinkList items={analiseItems} />
+							</NavigationMenuContent>
+						</NavigationMenuItem>
+					</NavigationMenuList>
+				</NavigationMenu>
+			</nav>
+
+			{/* Mobile hamburger */}
+			<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+				<SheetTrigger asChild>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="md:hidden text-primary-foreground hover:bg-primary-foreground/15 hover:text-primary-foreground"
+					>
+						<RiMenuLine className="size-5" />
+						<span className="sr-only">Abrir menu</span>
+					</Button>
+				</SheetTrigger>
+				<SheetContent side="left" className="w-72 p-0">
+					<SheetHeader className="p-4 border-b">
+						<SheetTitle>Menu</SheetTitle>
+					</SheetHeader>
+					<nav className="p-3 overflow-y-auto">
+						<MobileNavLink
+							href="/dashboard"
+							icon={<RiDashboardLine className="size-4" />}
+							onClick={close}
+						>
+							Dashboard
+						</MobileNavLink>
+
+						<MobileSectionLabel label="Financeiro" />
+						<MobileNavLink
+							href="/lancamentos"
+							icon={<RiArrowLeftRightLine className="size-4" />}
+							onClick={close}
+						>
+							Lançamentos
+						</MobileNavLink>
+						<MobileNavLink
+							href="/pre-lancamentos"
+							icon={<RiInboxLine className="size-4" />}
+							onClick={close}
+							badge={preLancamentosCount}
+						>
+							Pré-Lançamentos
+						</MobileNavLink>
+						<MobileNavLink
+							href="/calendario"
+							icon={<RiCalendarEventLine className="size-4" />}
+							onClick={close}
+						>
+							Calendário
+						</MobileNavLink>
+						<MobileNavLink
+							href="/cartoes"
+							icon={<RiBankCard2Line className="size-4" />}
+							onClick={close}
+						>
+							Cartões
+						</MobileNavLink>
+						<MobileNavLink
+							href="/contas"
+							icon={<RiBankLine className="size-4" />}
+							onClick={close}
+						>
+							Contas
+						</MobileNavLink>
+
+						<MobileSectionLabel label="Organização" />
+						<MobileNavLink
+							href="/orcamentos"
+							icon={<RiFundsLine className="size-4" />}
+							onClick={close}
+						>
+							Orçamentos
+						</MobileNavLink>
+						<MobileNavLink
+							href="/pagadores"
+							icon={<RiGroupLine className="size-4" />}
+							onClick={close}
+						>
+							Pagadores
+						</MobileNavLink>
+						<MobileNavLink
+							href="/categorias"
+							icon={<RiPriceTag3Line className="size-4" />}
+							onClick={close}
+						>
+							Categorias
+						</MobileNavLink>
+						<MobileNavLink
+							href="/anotacoes"
+							icon={<RiTodoLine className="size-4" />}
+							onClick={close}
+						>
+							Anotações
+						</MobileNavLink>
+
+						<MobileSectionLabel label="Análise" />
+						<MobileNavLink
+							href="/insights"
+							icon={<RiSparklingLine className="size-4" />}
+							onClick={close}
+						>
+							Insights
+						</MobileNavLink>
+						<MobileNavLink
+							href="/relatorios/tendencias"
+							icon={<RiFileChartLine className="size-4" />}
+							onClick={close}
+						>
+							Tendências
+						</MobileNavLink>
+						<MobileNavLink
+							href="/relatorios/uso-cartoes"
+							icon={<RiBankCard2Line className="size-4" />}
+							onClick={close}
+						>
+							Uso de Cartões
+						</MobileNavLink>
+					</nav>
+				</SheetContent>
+			</Sheet>
+		</>
+	);
+}

components/topbar/topbar-user.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import { RiSettings2Line } from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+import { useMemo } from "react";
+import LogoutButton from "@/components/auth/logout-button";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { getAvatarSrc } from "@/lib/pagadores/utils";
+
+type TopbarUserProps = {
+	user: {
+		id: string;
+		name: string;
+		email: string;
+		image: string | null;
+	};
+	pagadorAvatarUrl: string | null;
+};
+
+export function TopbarUser({ user, pagadorAvatarUrl }: TopbarUserProps) {
+	const avatarSrc = useMemo(() => {
+		if (pagadorAvatarUrl) return getAvatarSrc(pagadorAvatarUrl);
+		if (user.image) return user.image;
+		return getAvatarSrc(null);
+	}, [user.image, pagadorAvatarUrl]);
+
+	return (
+		<DropdownMenu>
+			<DropdownMenuTrigger asChild>
+				<button
+					type="button"
+					className="flex items-center rounded-full ring-2 ring-primary-foreground/40 hover:ring-primary-foreground/80 transition-all focus-visible:outline-none focus-visible:ring-primary-foreground"
+				>
+					<Image
+						src={avatarSrc}
+						alt={user.name}
+						width={32}
+						height={32}
+						className="size-8 rounded-full object-cover"
+					/>
+				</button>
+			</DropdownMenuTrigger>
+			<DropdownMenuContent align="end" className="w-60 p-2" sideOffset={10}>
+				<DropdownMenuLabel className="flex items-center gap-3 px-2 py-2">
+					<Image
+						src={avatarSrc}
+						alt={user.name}
+						width={36}
+						height={36}
+						className="size-9 rounded-full object-cover shrink-0"
+					/>
+					<div className="flex flex-col min-w-0">
+						<span className="text-sm font-medium truncate">{user.name}</span>
+						<span className="text-xs text-muted-foreground truncate">
+							{user.email}
+						</span>
+					</div>
+				</DropdownMenuLabel>
+				<DropdownMenuSeparator />
+				<div className="flex flex-col gap-1 pt-1">
+					<Link
+						href="/ajustes"
+						className="flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm hover:bg-accent transition-colors"
+					>
+						<RiSettings2Line className="size-4 text-muted-foreground" />
+						Ajustes
+					</Link>
+					<div className="px-1 py-0.5">
+						<LogoutButton />
+					</div>
+				</div>
+			</DropdownMenuContent>
+		</DropdownMenu>
+	);
+}