style: refina base visual e navegação

src/shared/components/navigation/navbar/notification-bell.tsx

@@ -9,7 +9,7 @@ import {
 	RiCheckboxCircleFill,
 	RiErrorWarningLine,
 	RiFileListLine,
-	RiNotification3Line,
+	RiNotification2Line,
 	RiTimeLine,
 } from "@remixicon/react";
 import Image from "next/image";
@@ -70,11 +70,58 @@ function SectionLabel({
 	return (
 		<div className="flex items-center gap-1.5 px-3 pb-1 pt-3">
 			<span className="text-muted-foreground">{icon}</span>
-			<span className="text-xs text-muted-foreground">{title}</span>
+			<span className="text-[11px] font-semibold uppercase tracking-wider text-muted-foreground">
+				{title}
+			</span>
 		</div>
 	);
 }
 
+type NotificationItemProps = {
+	href: string;
+	icon: React.ReactNode;
+	isOverdue: boolean;
+	title: string;
+	detail: string;
+	onClose: () => void;
+};
+
+function NotificationItem({
+	href,
+	icon,
+	isOverdue,
+	title,
+	detail,
+	onClose,
+}: NotificationItemProps) {
+	return (
+		<Link
+			href={href}
+			onClick={onClose}
+			className={cn(
+				"group mx-1 mb-0.5 flex items-start gap-2.5 rounded-md px-2 py-2 transition-colors hover:bg-accent/60",
+				isOverdue && "bg-destructive/5 hover:bg-destructive/10",
+			)}
+		>
+			<span className="mt-0.5 shrink-0">{icon}</span>
+			<span className="flex flex-1 flex-col gap-0.5 min-w-0">
+				<span
+					className={cn(
+						"text-[12px] font-medium leading-snug",
+						isOverdue ? "text-destructive" : "text-foreground",
+					)}
+				>
+					{title}
+				</span>
+				<span className="text-[11px] leading-snug text-muted-foreground">
+					{detail}
+				</span>
+			</span>
+			<RiArrowRightLine className="mt-0.5 size-3 shrink-0 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5" />
+		</Link>
+	);
+}
+
 export function NotificationBell({
 	notifications,
 	totalCount,
@@ -105,12 +152,13 @@ export function NotificationBell({
 							aria-expanded={open}
 							className={cn(
 								buttonVariants({ variant: "ghost", size: "icon-sm" }),
-								"group relative border border-black/10 text-black/75 shadow-none transition-all duration-200",
+								"group relative shadow-none transition-all duration-200",
 								"hover:border-black/20 hover:bg-black/10 hover:text-black focus-visible:ring-2 focus-visible:ring-black/20",
 								"data-[state=open]:bg-black/10 data-[state=open]:text-black",
+								hasNotifications ? "text-black" : "text-black/75",
 							)}
 						>
-							<RiNotification3Line
+							<RiNotification2Line
 								className={cn(
 									"size-4 transition-transform duration-200",
 									open ? "scale-90" : "scale-100",
@@ -120,7 +168,7 @@ export function NotificationBell({
 								<>
 									<span
 										aria-hidden
-										className="absolute -right-1.5 -top-1.5 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-xs font-semibold text-destructive-foreground "
+										className="absolute -right-1.5 -top-1.5 inline-flex min-h-5 min-w-5 items-center justify-center rounded-full bg-destructive px-1 text-[12px] font-semibold text-destructive-foreground"
 									>
 										{displayCount}
 									</span>
@@ -138,10 +186,10 @@ export function NotificationBell({
 			<DropdownMenuContent
 				align="end"
 				sideOffset={12}
-				className="w-76 overflow-hidden rounded-lg border border-border/60 bg-popover p-0 shadow-none"
+				className="w-80 overflow-hidden rounded-lg border border-border/60 bg-popover p-0 shadow-none"
 			>
 				{/* Header */}
-				<DropdownMenuLabel className="flex items-center justify-between gap-2 border-b border-border/50 px-3 py-2.5 text-sm font-semibold">
+				<DropdownMenuLabel className="flex items-center justify-between gap-2 border-b border-border/50 px-3 py-2.5 text-[12px] font-semibold">
 					<span>Notificações</span>
 					{hasNotifications && (
 						<Badge variant="outline" className="text-[10px] font-semibold">
@@ -172,19 +220,18 @@ export function NotificationBell({
 									icon={<RiAtLine className="size-3" />}
 									title="Pré-lançamentos"
 								/>
-								<Link
+								<NotificationItem
 									href="/inbox"
-									onClick={() => setOpen(false)}
-									className="group mx-1 mb-1 flex items-center gap-2 rounded-md px-2 py-2 transition-colors hover:bg-accent/60"
-								>
-									<RiAtLine className="size-6 shrink-0 text-primary" />
-									<p className="flex-1 text-xs leading-snug text-foreground">
-										{preLancamentosCount === 1
-											? "1 pré-lançamento aguardando revisão"
-											: `${preLancamentosCount} pré-lançamentos aguardando revisão`}
-									</p>
-									<RiArrowRightLine className="size-3 shrink-0 text-muted-foreground/50 transition-transform group-hover:translate-x-0.5" />
-								</Link>
+									isOverdue={false}
+									icon={<RiAtLine className="size-5 text-primary" />}
+									title={
+										preLancamentosCount === 1
+											? "1 pré-lançamento pendente"
+											: `${preLancamentosCount} pré-lançamentos pendentes`
+									}
+									detail="Aguardando revisão"
+									onClose={() => setOpen(false)}
+								/>
 							</div>
 						)}
 
@@ -195,48 +242,27 @@ export function NotificationBell({
 									icon={<RiBarChart2Line className="size-3" />}
 									title="Orçamentos"
 								/>
-								<div className="mx-1 mb-1 overflow-hidden rounded-md">
-									{budgetNotifications.map((n) => (
-										<div
-											key={n.id}
-											className="flex items-start gap-2 px-2 py-2"
-										>
-											{n.status === "exceeded" ? (
-												<RiAlertFill className="mt-0.5 size-6 shrink-0 text-destructive" />
+								{budgetNotifications.map((n) => (
+									<NotificationItem
+										key={n.id}
+										href="/budgets"
+										isOverdue={n.status === "exceeded"}
+										icon={
+											n.status === "exceeded" ? (
+												<RiAlertFill className="size-5 text-destructive" />
 											) : (
-												<RiErrorWarningLine className="mt-0.5 size-6 shrink-0 text-amber-500" />
-											)}
-											<p className="text-xs leading-snug">
-												{n.status === "exceeded" ? (
-													<>
-														Orçamento de <strong>{n.categoryName}</strong>{" "}
-														excedido —{" "}
-														<strong>{formatCurrency(n.spentAmount)}</strong> de{" "}
-														{formatCurrency(n.budgetAmount)} (
-														{formatPercentage(n.usedPercentage, {
-															maximumFractionDigits: 0,
-															minimumFractionDigits: 0,
-														})}
-														)
-													</>
-												) : (
-													<>
-														<strong>{n.categoryName}</strong> atingiu{" "}
-														<strong>
-															{formatPercentage(n.usedPercentage, {
-																maximumFractionDigits: 0,
-																minimumFractionDigits: 0,
-															})}
-														</strong>{" "}
-														do orçamento —{" "}
-														<strong>{formatCurrency(n.spentAmount)}</strong> de{" "}
-														{formatCurrency(n.budgetAmount)}
-													</>
-												)}
-											</p>
-										</div>
-									))}
-								</div>
+												<RiErrorWarningLine className="size-5 text-amber-500" />
+											)
+										}
+										title={n.categoryName}
+										detail={
+											n.status === "exceeded"
+												? `Excedido — ${formatCurrency(n.spentAmount)} de ${formatCurrency(n.budgetAmount)} (${formatPercentage(n.usedPercentage, { maximumFractionDigits: 0, minimumFractionDigits: 0 })})`
+												: `${formatPercentage(n.usedPercentage, { maximumFractionDigits: 0, minimumFractionDigits: 0 })} utilizado — ${formatCurrency(n.spentAmount)} de ${formatCurrency(n.budgetAmount)}`
+										}
+										onClose={() => setOpen(false)}
+									/>
+								))}
 							</div>
 						)}
 
@@ -247,56 +273,38 @@ export function NotificationBell({
 									icon={<RiBankCardLine className="size-3" />}
 									title="Cartão de Crédito"
 								/>
-								<div className="mx-1 mb-1 overflow-hidden rounded-md">
-									{invoiceNotifications.map((n) => {
-										const logo = resolveLogoSrc(n.cardLogo);
-										return (
-											<div
-												key={n.id}
-												className="flex items-start gap-2 px-2 py-2"
-											>
-												{logo ? (
+								{invoiceNotifications.map((n) => {
+									const logo = resolveLogoSrc(n.cardLogo);
+									return (
+										<NotificationItem
+											key={n.id}
+											href="/cards"
+											isOverdue={n.status === "overdue"}
+											icon={
+												logo ? (
 													<Image
 														src={logo}
 														alt=""
-														width={24}
-														height={24}
-														className="mt-0.5 size-6 shrink-0 rounded-sm object-contain"
+														width={20}
+														height={20}
+														className="size-5 rounded-full object-contain"
 													/>
 												) : n.status === "overdue" ? (
-													<RiAlertFill className="mt-0.5 size-3.5 shrink-0 text-destructive" />
+													<RiAlertFill className="size-5 text-destructive" />
 												) : (
-													<RiTimeLine className="mt-0.5 size-3.5 shrink-0 text-amber-500" />
-												)}
-												<p className="text-xs leading-snug">
-													{n.status === "overdue" ? (
-														<>
-															A fatura de <strong>{n.name}</strong> venceu em{" "}
-															{formatDate(n.dueDate)}
-															{n.showAmount && n.amount > 0 && (
-																<>
-																	{" "}
-																	— <strong>{formatCurrency(n.amount)}</strong>
-																</>
-															)}
-														</>
-													) : (
-														<>
-															A fatura de <strong>{n.name}</strong> vence em{" "}
-															{formatDate(n.dueDate)}
-															{n.showAmount && n.amount > 0 && (
-																<>
-																	{" "}
-																	— <strong>{formatCurrency(n.amount)}</strong>
-																</>
-															)}
-														</>
-													)}
-												</p>
-											</div>
-										);
-									})}
-								</div>
+													<RiTimeLine className="size-5 text-amber-500" />
+												)
+											}
+											title={n.name}
+											detail={
+												n.status === "overdue"
+													? `Venceu em ${formatDate(n.dueDate)}${n.showAmount && n.amount > 0 ? ` — ${formatCurrency(n.amount)}` : ""}`
+													: `Vence em ${formatDate(n.dueDate)}${n.showAmount && n.amount > 0 ? ` — ${formatCurrency(n.amount)}` : ""}`
+											}
+											onClose={() => setOpen(false)}
+										/>
+									);
+								})}
 							</div>
 						)}
 
@@ -307,48 +315,30 @@ export function NotificationBell({
 									icon={<RiFileListLine className="size-3" />}
 									title="Boletos"
 								/>
-								<div className="mx-1 mb-1 overflow-hidden rounded-md">
-									{boletoNotifications.map((n) => (
-										<div
-											key={n.id}
-											className="flex items-start gap-2 px-2 py-2"
-										>
+								{boletoNotifications.map((n) => (
+									<NotificationItem
+										key={n.id}
+										href="/transactions"
+										isOverdue={n.status === "overdue"}
+										icon={
 											<RiAlertFill
 												className={cn(
-													"mt-0.5 size-6 shrink-0",
+													"size-5",
 													n.status === "overdue"
 														? "text-destructive"
 														: "text-amber-500",
 												)}
 											/>
-											<p className="text-xs leading-snug">
-												{n.status === "overdue" ? (
-													<>
-														O boleto <strong>{n.name}</strong>
-														{n.amount > 0 && (
-															<>
-																{" "}
-																— <strong>{formatCurrency(n.amount)}</strong>
-															</>
-														)}{" "}
-														venceu em {formatDate(n.dueDate)}
-													</>
-												) : (
-													<>
-														O boleto <strong>{n.name}</strong>
-														{n.amount > 0 && (
-															<>
-																{" "}
-																— <strong>{formatCurrency(n.amount)}</strong>
-															</>
-														)}{" "}
-														vence em {formatDate(n.dueDate)}
-													</>
-												)}
-											</p>
-										</div>
-									))}
-								</div>
+										}
+										title={n.name}
+										detail={
+											n.status === "overdue"
+												? `Venceu em ${formatDate(n.dueDate)}${n.amount > 0 ? ` — ${formatCurrency(n.amount)}` : ""}`
+												: `Vence em ${formatDate(n.dueDate)}${n.amount > 0 ? ` — ${formatCurrency(n.amount)}` : ""}`
+										}
+										onClose={() => setOpen(false)}
+									/>
+								))}
 							</div>
 						)}
 					</div>