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>

components/topbar/app-topbar.tsx

@@ -1,12 +1,9 @@
-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 { Logo } from "../logo";
 import { TopNavMenu } from "./top-nav-menu";
 import { TopbarUser } from "./topbar-user";
 
@@ -29,49 +26,26 @@ export function AppTopbar({
 	notificationsSnapshot,
 }: AppTopbarProps) {
 	return (
-		<header className="fixed top-0 left-0 right-0 z-50 bg-card h-14 shrink-0 flex items-center shadow-xs">
+		<header className="fixed top-0 left-0 right-0 z-50 h-15 shrink-0 flex items-center bg-card/80 backdrop-blur-md supports-backdrop-filter:bg-card/70">
 			<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-4 h-full">
 				{/* 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 dark:invert hidden sm:block"
-						priority
-					/>
+				<Link href="/dashboard" className="shrink-0 mr-1">
+					<Logo variant="compact" />
 				</Link>
 
 				{/* Navigation */}
-				<TopNavMenu preLancamentosCount={preLancamentosCount} />
+				<TopNavMenu />
 
 				{/* Right-side actions */}
-				<div className="ml-auto flex items-center gap-1">
+				<div className="ml-auto flex items-center gap-2">
 					<NotificationBell
 						notifications={notificationsSnapshot.notifications}
 						totalCount={notificationsSnapshot.totalCount}
+						budgetNotifications={notificationsSnapshot.budgetNotifications}
+						preLancamentosCount={preLancamentosCount}
 					/>
-					<CalculatorDialogButton withTooltip />
 					<RefreshPageButton />
-					<PrivacyModeToggle />
 					<AnimatedThemeToggler />
-					<span
-						aria-hidden
-						className="h-5 w-px bg-foreground/20 mx-1 hidden sm:block"
-					/>
-					<FeedbackDialog />
 				</div>
 
 				{/* User avatar */}

components/topbar/ferramentas-dropdown.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { RiCalculatorLine, RiEyeLine, RiEyeOffLine } from "@remixicon/react";
+import { useState } from "react";
+import { CalculatorDialogContent } from "@/components/calculadora/calculator-dialog";
+import { usePrivacyMode } from "@/components/privacy-provider";
+import { Badge } from "@/components/ui/badge";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import { cn } from "@/lib/utils/ui";
+
+const itemClass =
+	"flex w-full items-center gap-2.5 rounded-sm px-2 py-2 text-sm text-foreground hover:bg-accent transition-colors cursor-pointer";
+
+export function FerramentasDropdownContent() {
+	const { privacyMode, toggle } = usePrivacyMode();
+	const [calcOpen, setCalcOpen] = useState(false);
+
+	return (
+		<Dialog open={calcOpen} onOpenChange={setCalcOpen}>
+			<ul className="grid w-52 gap-0.5 p-2">
+				<li>
+					<DialogTrigger asChild>
+						<button type="button" className={cn(itemClass)}>
+							<span className="text-muted-foreground shrink-0">
+								<RiCalculatorLine className="size-4" />
+							</span>
+							<span className="flex-1 text-left">calculadora</span>
+						</button>
+					</DialogTrigger>
+				</li>
+				<li>
+					<button type="button" onClick={toggle} className={cn(itemClass)}>
+						<span className="text-muted-foreground shrink-0">
+							{privacyMode ? (
+								<RiEyeOffLine className="size-4" />
+							) : (
+								<RiEyeLine className="size-4" />
+							)}
+						</span>
+						<span className="flex-1 text-left">privacidade</span>
+						{privacyMode && (
+							<Badge
+								variant="secondary"
+								className="text-[10px] px-1.5 py-0 h-4"
+							>
+								Ativo
+							</Badge>
+						)}
+					</button>
+				</li>
+			</ul>
+			<CalculatorDialogContent open={calcOpen} />
+		</Dialog>
+	);
+}
+
+type MobileFerramentasItemsProps = {
+	onClose: () => void;
+};
+
+export function MobileFerramentasItems({
+	onClose,
+}: MobileFerramentasItemsProps) {
+	const { privacyMode, toggle } = usePrivacyMode();
+	const [calcOpen, setCalcOpen] = useState(false);
+
+	return (
+		<Dialog open={calcOpen} onOpenChange={setCalcOpen}>
+			<DialogTrigger asChild>
+				<button
+					type="button"
+					className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
+				>
+					<span className="text-muted-foreground shrink-0">
+						<RiCalculatorLine className="size-4" />
+					</span>
+					<span className="flex-1 text-left">calculadora</span>
+				</button>
+			</DialogTrigger>
+			<button
+				type="button"
+				onClick={() => {
+					toggle();
+					onClose();
+				}}
+				className="flex w-full items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors text-muted-foreground hover:text-foreground hover:bg-accent"
+			>
+				<span className="text-muted-foreground shrink-0">
+					{privacyMode ? (
+						<RiEyeOffLine className="size-4" />
+					) : (
+						<RiEyeLine className="size-4" />
+					)}
+				</span>
+				<span className="flex-1 text-left">privacidade</span>
+				{privacyMode && (
+					<Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-4">
+						Ativo
+					</Badge>
+				)}
+			</button>
+			<CalculatorDialogContent open={calcOpen} />
+		</Dialog>
+	);
+}

components/topbar/top-nav-menu.tsx

@@ -33,33 +33,32 @@ import {
 } from "@/components/ui/sheet";
 import type { DropdownLinkItem } from "./dropdown-link-list";
 import { DropdownLinkList } from "./dropdown-link-list";
+import {
+	FerramentasDropdownContent,
+	MobileFerramentasItems,
+} from "./ferramentas-dropdown";
 import { MobileNavLink, MobileSectionLabel } from "./mobile-nav-link";
 import { triggerClass } from "./nav-styles";
 import { SimpleNavLink } from "./simple-nav-link";
 
-type TopNavMenuProps = {
-	preLancamentosCount?: number;
-};
-
-export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
+export function TopNavMenu() {
 	const [sheetOpen, setSheetOpen] = useState(false);
 	const close = () => setSheetOpen(false);
 
 	const lancamentosItems: DropdownLinkItem[] = [
 		{
 			href: "/lancamentos",
-			label: "Lançamentos",
+			label: "lançamentos",
 			icon: <RiArrowLeftRightLine className="size-4" />,
 		},
 		{
 			href: "/pre-lancamentos",
-			label: "Pré-Lançamentos",
+			label: "pré-lançamentos",
 			icon: <RiInboxLine className="size-4" />,
-			badge: preLancamentosCount,
 		},
 		{
 			href: "/calendario",
-			label: "Calendário",
+			label: "calendário",
 			icon: <RiCalendarEventLine className="size-4" />,
 		},
 	];
@@ -67,17 +66,17 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
 	const financasItems: DropdownLinkItem[] = [
 		{
 			href: "/cartoes",
-			label: "Cartões",
+			label: "cartões",
 			icon: <RiBankCard2Line className="size-4" />,
 		},
 		{
 			href: "/contas",
-			label: "Contas",
+			label: "contas",
 			icon: <RiBankLine className="size-4" />,
 		},
 		{
 			href: "/orcamentos",
-			label: "Orçamentos",
+			label: "orçamentos",
 			icon: <RiFundsLine className="size-4" />,
 		},
 	];
@@ -85,17 +84,17 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
 	const organizacaoItems: DropdownLinkItem[] = [
 		{
 			href: "/pagadores",
-			label: "Pagadores",
+			label: "pagadores",
 			icon: <RiGroupLine className="size-4" />,
 		},
 		{
 			href: "/categorias",
-			label: "Categorias",
+			label: "categorias",
 			icon: <RiPriceTag3Line className="size-4" />,
 		},
 		{
 			href: "/anotacoes",
-			label: "Anotações",
+			label: "anotações",
 			icon: <RiTodoLine className="size-4" />,
 		},
 	];
@@ -103,17 +102,17 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
 	const analiseItems: DropdownLinkItem[] = [
 		{
 			href: "/insights",
-			label: "Insights",
+			label: "insights",
 			icon: <RiSparklingLine className="size-4" />,
 		},
 		{
 			href: "/relatorios/tendencias",
-			label: "Tendências",
+			label: "tendências",
 			icon: <RiFileChartLine className="size-4" />,
 		},
 		{
 			href: "/relatorios/uso-cartoes",
-			label: "Uso de Cartões",
+			label: "uso de cartões",
 			icon: <RiBankCard2Line className="size-4" />,
 		},
 	];
@@ -157,12 +156,21 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
 
 						<NavigationMenuItem>
 							<NavigationMenuTrigger className={triggerClass}>
-								Análise
+								Relatórios
 							</NavigationMenuTrigger>
 							<NavigationMenuContent>
 								<DropdownLinkList items={analiseItems} />
 							</NavigationMenuContent>
 						</NavigationMenuItem>
+
+						<NavigationMenuItem>
+							<NavigationMenuTrigger className={triggerClass}>
+								Ferramentas
+							</NavigationMenuTrigger>
+							<NavigationMenuContent>
+								<FerramentasDropdownContent />
+							</NavigationMenuContent>
+						</NavigationMenuItem>
 					</NavigationMenuList>
 				</NavigationMenu>
 			</nav>
@@ -198,22 +206,21 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
 							icon={<RiArrowLeftRightLine className="size-4" />}
 							onClick={close}
 						>
-							Lançamentos
+							lançamentos
 						</MobileNavLink>
 						<MobileNavLink
 							href="/pre-lancamentos"
 							icon={<RiInboxLine className="size-4" />}
 							onClick={close}
-							badge={preLancamentosCount}
 						>
-							Pré-Lançamentos
+							pré-lançamentos
 						</MobileNavLink>
 						<MobileNavLink
 							href="/calendario"
 							icon={<RiCalendarEventLine className="size-4" />}
 							onClick={close}
 						>
-							Calendário
+							calendário
 						</MobileNavLink>
 
 						<MobileSectionLabel label="Finanças" />
@@ -222,21 +229,21 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
 							icon={<RiBankCard2Line className="size-4" />}
 							onClick={close}
 						>
-							Cartões
+							cartões
 						</MobileNavLink>
 						<MobileNavLink
 							href="/contas"
 							icon={<RiBankLine className="size-4" />}
 							onClick={close}
 						>
-							Contas
+							contas
 						</MobileNavLink>
 						<MobileNavLink
 							href="/orcamentos"
 							icon={<RiFundsLine className="size-4" />}
 							onClick={close}
 						>
-							Orçamentos
+							orçamentos
 						</MobileNavLink>
 
 						<MobileSectionLabel label="Organização" />
@@ -245,21 +252,21 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
 							icon={<RiGroupLine className="size-4" />}
 							onClick={close}
 						>
-							Pagadores
+							pagadores
 						</MobileNavLink>
 						<MobileNavLink
 							href="/categorias"
 							icon={<RiPriceTag3Line className="size-4" />}
 							onClick={close}
 						>
-							Categorias
+							categorias
 						</MobileNavLink>
 						<MobileNavLink
 							href="/anotacoes"
 							icon={<RiTodoLine className="size-4" />}
 							onClick={close}
 						>
-							Anotações
+							anotações
 						</MobileNavLink>
 
 						<MobileSectionLabel label="Análise" />
@@ -268,22 +275,25 @@ export function TopNavMenu({ preLancamentosCount = 0 }: TopNavMenuProps) {
 							icon={<RiSparklingLine className="size-4" />}
 							onClick={close}
 						>
-							Insights
+							insights
 						</MobileNavLink>
 						<MobileNavLink
 							href="/relatorios/tendencias"
 							icon={<RiFileChartLine className="size-4" />}
 							onClick={close}
 						>
-							Tendências
+							tendências
 						</MobileNavLink>
 						<MobileNavLink
 							href="/relatorios/uso-cartoes"
 							icon={<RiBankCard2Line className="size-4" />}
 							onClick={close}
 						>
-							Uso de Cartões
+							uso de cartões
 						</MobileNavLink>
+
+						<MobileSectionLabel label="Ferramentas" />
+						<MobileFerramentasItems onClose={close} />
 					</nav>
 				</SheetContent>
 			</Sheet>

components/topbar/topbar-user.tsx

@@ -1,10 +1,16 @@
 "use client";
 
-import { RiSettings2Line } from "@remixicon/react";
+import {
+	RiLogoutCircleLine,
+	RiMessageLine,
+	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 { useRouter } from "next/navigation";
+import { useMemo, useState } from "react";
+import { FeedbackDialogBody } from "@/components/feedback/feedback-dialog";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
 import {
 	DropdownMenu,
 	DropdownMenuContent,
@@ -12,7 +18,14 @@ import {
 	DropdownMenuSeparator,
 	DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Spinner } from "@/components/ui/spinner";
+import { authClient } from "@/lib/auth/client";
 import { getAvatarSrc } from "@/lib/pagadores/utils";
+import { cn } from "@/lib/utils/ui";
+import { version } from "@/package.json";
+
+const itemClass =
+	"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent";
 
 type TopbarUserProps = {
 	user: {
@@ -25,58 +38,109 @@ type TopbarUserProps = {
 };
 
 export function TopbarUser({ user, pagadorAvatarUrl }: TopbarUserProps) {
+	const router = useRouter();
+	const [logoutLoading, setLogoutLoading] = useState(false);
+	const [feedbackOpen, setFeedbackOpen] = useState(false);
+
 	const avatarSrc = useMemo(() => {
 		if (pagadorAvatarUrl) return getAvatarSrc(pagadorAvatarUrl);
 		if (user.image) return user.image;
 		return getAvatarSrc(null);
 	}, [user.image, pagadorAvatarUrl]);
 
+	async function handleLogout() {
+		await authClient.signOut({
+			fetchOptions: {
+				onSuccess: () => router.push("/login"),
+				onRequest: () => setLogoutLoading(true),
+				onResponse: () => setLogoutLoading(false),
+			},
+		});
+	}
+
 	return (
-		<DropdownMenu>
-			<DropdownMenuTrigger asChild>
-				<button
-					type="button"
-					className="flex items-center rounded-full ring-2 ring-foreground/30 hover:ring-foreground/60 transition-all focus-visible:outline-none focus-visible:ring-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}
+		<Dialog open={feedbackOpen} onOpenChange={setFeedbackOpen}>
+			<DropdownMenu>
+				<DropdownMenuTrigger asChild>
+					<button
+						className="relative flex size-9 items-center justify-center overflow-hidden rounded-full border-background bg-background shadow-lg"
+						aria-label="Menu do usuário"
+					>
+						<Image
+							src={avatarSrc}
+							alt={`Avatar de ${user.name}`}
+							width={40}
+							height={40}
+							className="size-10 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-0.5 py-1">
+						<Link href="/ajustes" className={cn(itemClass, "text-foreground")}>
+							<RiSettings2Line className="size-4 text-muted-foreground shrink-0" />
+							Ajustes
+						</Link>
+
+						<DialogTrigger asChild>
+							<button
+								type="button"
+								className={cn(itemClass, "text-foreground")}
+							>
+								<RiMessageLine className="size-4 text-muted-foreground shrink-0" />
+								Enviar Feedback
+							</button>
+						</DialogTrigger>
+					</div>
+
+					<DropdownMenuSeparator />
+
+					<div className="py-1">
+						<button
+							type="button"
+							onClick={handleLogout}
+							disabled={logoutLoading}
+							aria-busy={logoutLoading}
+							className={cn(
+								itemClass,
+								"text-destructive hover:bg-destructive/10 hover:text-destructive disabled:opacity-60",
+							)}
+						>
+							{logoutLoading ? (
+								<Spinner className="size-4 shrink-0" />
+							) : (
+								<RiLogoutCircleLine className="size-4 shrink-0" />
+							)}
+							{logoutLoading ? "Saindo..." : "Sair"}
+						</button>
+					</div>
+					<DropdownMenuSeparator />
+					<div className="px-3 py-1.5">
+						<span className="text-[10px] font-mono text-muted-foreground/40 select-none">
+							Versão {version}
 						</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>
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<FeedbackDialogBody onClose={() => setFeedbackOpen(false)} />
+		</Dialog>
 	);
 }