refactor: substituir topbar por navbar componentizada

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

components/navbar/app-navbar.tsx

@@ -0,0 +1,56 @@
+import Link from "next/link";
+import { AnimatedThemeToggler } from "@/components/animated-theme-toggler";
+import { NotificationBell } from "@/components/notificacoes/notification-bell";
+import { RefreshPageButton } from "@/components/refresh-page-button";
+import type { DashboardNotificationsSnapshot } from "@/lib/dashboard/notifications";
+import { Logo } from "../logo";
+import { NavMenu } from "./nav-menu";
+import { NavbarUser } from "./navbar-user";
+
+type AppNavbarProps = {
+	user: {
+		id: string;
+		name: string;
+		email: string;
+		image: string | null;
+	};
+	pagadorAvatarUrl: string | null;
+	preLancamentosCount?: number;
+	notificationsSnapshot: DashboardNotificationsSnapshot;
+};
+
+export function AppNavbar({
+	user,
+	pagadorAvatarUrl,
+	preLancamentosCount = 0,
+	notificationsSnapshot,
+}: AppNavbarProps) {
+	return (
+		<header className="fixed top-0 left-0 right-0 z-50 h-15 shrink-0 flex items-center bg-card backdrop-blur-lg supports-backdrop-filter:bg-card/60">
+			<div className="w-full max-w-8xl mx-auto px-4 flex items-center gap-4 h-full">
+				{/* Logo */}
+				<Link href="/dashboard" className="shrink-0 mr-1">
+					<Logo variant="compact" />
+				</Link>
+
+				{/* Navigation */}
+				<NavMenu />
+
+				{/* Right-side actions */}
+				<div className="ml-auto flex items-center gap-2">
+					<NotificationBell
+						notifications={notificationsSnapshot.notifications}
+						totalCount={notificationsSnapshot.totalCount}
+						budgetNotifications={notificationsSnapshot.budgetNotifications}
+						preLancamentosCount={preLancamentosCount}
+					/>
+					<RefreshPageButton />
+					<AnimatedThemeToggler />
+				</div>
+
+				{/* User avatar */}
+				<NavbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
+			</div>
+		</header>
+	);
+}

components/navbar/mobile-link.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils/ui";
+import { NavLink } from "./nav-link";
+
+type MobileLinkProps = {
+	href: string;
+	icon: React.ReactNode;
+	children: React.ReactNode;
+	onClick?: () => void;
+	badge?: number;
+	preservePeriod?: boolean;
+};
+
+export function MobileLink({
+	href,
+	icon,
+	children,
+	onClick,
+	badge,
+	preservePeriod,
+}: MobileLinkProps) {
+	const pathname = usePathname();
+
+	const isActive =
+		href === "/dashboard"
+			? pathname === href
+			: pathname === href || pathname.startsWith(`${href}/`);
+
+	return (
+		<NavLink
+			href={href}
+			preservePeriod={preservePeriod}
+			onClick={onClick}
+			className={cn(
+				"flex items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+				"text-muted-foreground hover:text-foreground hover:bg-accent",
+				isActive && "bg-primary/10 text-primary 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}
+		</NavLink>
+	);
+}
+
+export 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>
+	);
+}

components/navbar/nav-dropdown.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Badge } from "@/components/ui/badge";
+import type { NavItem } from "./nav-items";
+import { NavLink } from "./nav-link";
+
+type NavDropdownProps = {
+	items: NavItem[];
+};
+
+export function NavDropdown({ items }: NavDropdownProps) {
+	return (
+		<ul className="grid w-48 gap-0.5 p-2">
+			{items.map((item) => (
+				<li key={item.href}>
+					<NavLink
+						href={item.href}
+						preservePeriod={item.preservePeriod}
+						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}
+					</NavLink>
+				</li>
+			))}
+		</ul>
+	);
+}

components/navbar/nav-items.tsx

@@ -0,0 +1,113 @@
+import {
+	RiArrowLeftRightLine,
+	RiBankCard2Line,
+	RiBankLine,
+	RiCalendarEventLine,
+	RiFileChartLine,
+	RiFundsLine,
+	RiGroupLine,
+	RiInboxLine,
+	RiPriceTag3Line,
+	RiSparklingLine,
+	RiTodoLine,
+} from "@remixicon/react";
+
+export type NavItem = {
+	href: string;
+	label: string;
+	icon: React.ReactNode;
+	badge?: number;
+	preservePeriod?: boolean;
+};
+
+export type NavSection = {
+	label: string;
+	items: NavItem[];
+};
+
+export const NAV_SECTIONS: NavSection[] = [
+	{
+		label: "Lançamentos",
+		items: [
+			{
+				href: "/lancamentos",
+				label: "lançamentos",
+				icon: <RiArrowLeftRightLine className="size-4" />,
+				preservePeriod: true,
+			},
+			{
+				href: "/pre-lancamentos",
+				label: "pré-lançamentos",
+				icon: <RiInboxLine className="size-4" />,
+			},
+			{
+				href: "/calendario",
+				label: "calendário",
+				icon: <RiCalendarEventLine className="size-4" />,
+			},
+		],
+	},
+	{
+		label: "Finanças",
+		items: [
+			{
+				href: "/cartoes",
+				label: "cartões",
+				icon: <RiBankCard2Line className="size-4" />,
+			},
+			{
+				href: "/contas",
+				label: "contas",
+				icon: <RiBankLine className="size-4" />,
+			},
+			{
+				href: "/orcamentos",
+				label: "orçamentos",
+				icon: <RiFundsLine className="size-4" />,
+				preservePeriod: true,
+			},
+		],
+	},
+	{
+		label: "Organização",
+		items: [
+			{
+				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" />,
+			},
+		],
+	},
+	{
+		label: "Relatórios",
+		items: [
+			{
+				href: "/insights",
+				label: "insights",
+				icon: <RiSparklingLine className="size-4" />,
+				preservePeriod: true,
+			},
+			{
+				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" />,
+				preservePeriod: true,
+			},
+		],
+	},
+];

components/navbar/nav-link.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
+import { useMemo } from "react";
+
+const PERIOD_PARAM = "periodo";
+
+type NavLinkProps = Omit<React.ComponentProps<typeof Link>, "href"> & {
+	href: string;
+	preservePeriod?: boolean;
+};
+
+export function NavLink({
+	href,
+	preservePeriod = false,
+	...props
+}: NavLinkProps) {
+	const searchParams = useSearchParams();
+
+	const resolvedHref = useMemo(() => {
+		if (!preservePeriod) return href;
+		const periodo = searchParams.get(PERIOD_PARAM);
+		if (!periodo) return href;
+		const separator = href.includes("?") ? "&" : "?";
+		return `${href}${separator}${PERIOD_PARAM}=${encodeURIComponent(periodo)}`;
+	}, [href, preservePeriod, searchParams]);
+
+	return <Link href={resolvedHref} {...props} />;
+}

components/navbar/nav-menu.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { RiDashboardLine, RiMenuLine } from "@remixicon/react";
+import { useState } from "react";
+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 { MobileLink, MobileSectionLabel } from "./mobile-link";
+import { NavDropdown } from "./nav-dropdown";
+import { NAV_SECTIONS } from "./nav-items";
+import { NavPill } from "./nav-pill";
+import { triggerClass } from "./nav-styles";
+import { MobileTools, NavToolsDropdown } from "./nav-tools";
+
+export function NavMenu() {
+	const [sheetOpen, setSheetOpen] = useState(false);
+	const close = () => setSheetOpen(false);
+
+	return (
+		<>
+			{/* Desktop */}
+			<nav className="hidden md:flex items-center flex-1">
+				<NavigationMenu viewport={false}>
+					<NavigationMenuList className="gap-0">
+						<NavigationMenuItem>
+							<NavPill href="/dashboard" preservePeriod>
+								Dashboard
+							</NavPill>
+						</NavigationMenuItem>
+
+						{NAV_SECTIONS.map((section) => (
+							<NavigationMenuItem key={section.label}>
+								<NavigationMenuTrigger className={triggerClass}>
+									{section.label}
+								</NavigationMenuTrigger>
+								<NavigationMenuContent>
+									<NavDropdown items={section.items} />
+								</NavigationMenuContent>
+							</NavigationMenuItem>
+						))}
+
+						<NavigationMenuItem>
+							<NavigationMenuTrigger className={triggerClass}>
+								Ferramentas
+							</NavigationMenuTrigger>
+							<NavigationMenuContent>
+								<NavToolsDropdown />
+							</NavigationMenuContent>
+						</NavigationMenuItem>
+					</NavigationMenuList>
+				</NavigationMenu>
+			</nav>
+
+			{/* Mobile */}
+			<Sheet open={sheetOpen} onOpenChange={setSheetOpen}>
+				<SheetTrigger asChild>
+					<Button
+						variant="ghost"
+						size="icon"
+						className="md:hidden text-foreground hover:bg-foreground/10 hover:text-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">
+						<MobileLink
+							href="/dashboard"
+							icon={<RiDashboardLine className="size-4" />}
+							onClick={close}
+							preservePeriod
+						>
+							Dashboard
+						</MobileLink>
+
+						{NAV_SECTIONS.map((section) => (
+							<div key={section.label}>
+								<MobileSectionLabel label={section.label} />
+								{section.items.map((item) => (
+									<MobileLink
+										key={item.href}
+										href={item.href}
+										icon={item.icon}
+										onClick={close}
+										badge={item.badge}
+										preservePeriod={item.preservePeriod}
+									>
+										{item.label}
+									</MobileLink>
+								))}
+							</div>
+						))}
+
+						<MobileSectionLabel label="Ferramentas" />
+						<MobileTools onClose={close} />
+					</nav>
+				</SheetContent>
+			</Sheet>
+		</>
+	);
+}

components/navbar/nav-pill.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { cn } from "@/lib/utils/ui";
+import { NavLink } from "./nav-link";
+import { linkActive, linkBase, linkIdle } from "./nav-styles";
+
+type NavPillProps = {
+	href: string;
+	preservePeriod?: boolean;
+	children: React.ReactNode;
+};
+
+export function NavPill({ href, preservePeriod, children }: NavPillProps) {
+	const pathname = usePathname();
+
+	const isActive =
+		href === "/dashboard"
+			? pathname === href
+			: pathname === href || pathname.startsWith(`${href}/`);
+
+	return (
+		<NavLink
+			href={href}
+			preservePeriod={preservePeriod}
+			className={cn(linkBase, isActive ? linkActive : linkIdle)}
+		>
+			{children}
+		</NavLink>
+	);
+}

components/navbar/nav-styles.ts

@@ -0,0 +1,30 @@
+// Base para links diretos e triggers — pill arredondado
+export const linkBase =
+	"inline-flex h-8 items-center justify-center rounded-full px-3 text-sm font-medium transition-all lowercase";
+
+// Estado inativo: muted, hover suave sem underline
+export const linkIdle =
+	"text-muted-foreground hover:text-foreground hover:bg-accent";
+
+// Estado ativo: pill com cor primária
+export const linkActive = "bg-primary/10 text-primary";
+
+// Trigger do NavigationMenu — espelha linkBase + linkIdle, remove estilos padrão
+export const triggerClass = [
+	"h-8!",
+	"rounded-full!",
+	"px-3!",
+	"py-0!",
+	"text-sm!",
+	"font-medium!",
+	"bg-transparent!",
+	"text-muted-foreground!",
+	"hover:text-foreground!",
+	"hover:bg-accent!",
+	"focus:text-foreground!",
+	"focus:bg-accent!",
+	"data-[state=open]:text-foreground!",
+	"data-[state=open]:bg-accent!",
+	"shadow-none!",
+	"lowercase!",
+].join(" ");

components/navbar/nav-tools.tsx

@@ -0,0 +1,103 @@
+"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 NavToolsDropdown() {
+	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 MobileToolsProps = {
+	onClose: () => void;
+};
+
+export function MobileTools({ onClose }: MobileToolsProps) {
+	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/navbar/navbar-user.tsx

@@ -0,0 +1,151 @@
+"use client";
+
+import {
+	RiHistoryLine,
+	RiLogoutCircleLine,
+	RiMessageLine,
+	RiSettings2Line,
+} from "@remixicon/react";
+import Image from "next/image";
+import Link from "next/link";
+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,
+	DropdownMenuLabel,
+	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";
+import { Badge } from "../ui/badge";
+
+const itemClass =
+	"flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors hover:bg-accent";
+
+type NavbarUserProps = {
+	user: {
+		id: string;
+		name: string;
+		email: string;
+		image: string | null;
+	};
+	pagadorAvatarUrl: string | null;
+};
+
+export function NavbarUser({ user, pagadorAvatarUrl }: NavbarUserProps) {
+	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 (
+		<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>
+
+						<Link
+							href="/changelog"
+							className={cn(itemClass, "text-foreground")}
+						>
+							<RiHistoryLine className="size-4 text-muted-foreground shrink-0" />
+							<span className="flex-1">Changelog</span>
+							<Badge variant="secondary">v{version}</Badge>
+						</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>
+				</DropdownMenuContent>
+			</DropdownMenu>
+			<FeedbackDialogBody onClose={() => setFeedbackOpen(false)} />
+		</Dialog>
+	);
+}