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/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>
 	);
 }