fix(ui): remover avisos visuais e destacar atualizações

src/features/attachments/components/attachment-grid-item.tsx

@@ -117,6 +117,7 @@ export function AttachmentGridItem({
 						src={url}
 						alt={attachment.fileName}
 						fill
+						sizes="(max-width: 640px) 50vw, (max-width: 1024px) 33vw, (max-width: 1280px) 25vw, 20vw"
 						unoptimized
 						className="object-cover transition-transform duration-300 group-hover:scale-105"
 					/>

src/features/auth/components/auth-sidebar-invoices-mock.tsx

@@ -14,13 +14,13 @@ const MOCK_INVOICES: MockInvoice[] = [
 		cardName: "Nubank",
 		logo: "nubank.png",
 		amount: 1898,
-		dueLabel: "Vence em 3 dias",
+		dueLabel: "Vence hoje",
 	},
 	{
 		cardName: "Itaú",
 		logo: "itau.png",
 		amount: 1923,
-		dueLabel: "Vence em 8 dias",
+		dueLabel: "Vence amanhã",
 	},
 ];
 

src/shared/components/calculator/calculator-display.tsx

@@ -2,7 +2,7 @@ import { RiCheckLine, RiFileCopyLine } from "@remixicon/react";
 import { Button } from "@/shared/components/ui/button";
 import { cn } from "@/shared/utils/ui";
 
-export type CalculatorDisplayProps = {
+type CalculatorDisplayProps = {
 	history: string | null;
 	expression: string;
 	resultText: string | null;

src/shared/components/logo.tsx

@@ -21,60 +21,67 @@ export function Logo({
 	if (variant === "compact") {
 		return (
 			<div className={cn("flex items-center gap-1", className)}>
-				<Image
-					src="/images/logo_small.png"
-					alt="OpenMonetis"
-					width={32}
-					height={32}
-					className={cn("object-contain", !colorIcon && iconFilterClass)}
-					priority
-				/>
-				<Image
-					src="/images/logo_text.png"
-					alt="OpenMonetis"
-					width={110}
-					height={32}
-					className={cn(
-						"hidden object-contain sm:block",
-						invertTextOnDark && "dark:invert",
-					)}
-					priority
-				/>
+				<div className="relative size-8 shrink-0">
+					<Image
+						src="/images/logo_small.png"
+						alt="OpenMonetis"
+						fill
+						sizes="32px"
+						className={cn("object-contain", !colorIcon && iconFilterClass)}
+						priority
+					/>
+				</div>
+				<div className="relative hidden h-8 w-[110px] shrink-0 sm:block">
+					<Image
+						src="/images/logo_text.png"
+						alt="OpenMonetis"
+						fill
+						sizes="110px"
+						className={cn("object-contain", invertTextOnDark && "dark:invert")}
+						priority
+					/>
+				</div>
 			</div>
 		);
 	}
 
 	if (variant === "small") {
 		return (
-			<Image
-				src="/images/logo_small.png"
-				alt="OpenMonetis"
-				width={32}
-				height={32}
-				className={cn("object-contain", className)}
-				priority
-			/>
+			<div className={cn("relative size-8 shrink-0", className)}>
+				<Image
+					src="/images/logo_small.png"
+					alt="OpenMonetis"
+					fill
+					sizes="32px"
+					className="object-contain"
+					priority
+				/>
+			</div>
 		);
 	}
 
 	return (
 		<div className={cn("flex items-center gap-1.5 py-4", className)}>
-			<Image
-				src="/images/logo_small.png"
-				alt="OpenMonetis"
-				width={28}
-				height={28}
-				className={cn("object-contain", !colorIcon && iconFilterClass)}
-				priority
-			/>
-			<Image
-				src="/images/logo_text.png"
-				alt="OpenMonetis"
-				width={100}
-				height={32}
-				className={cn("object-contain", invertTextOnDark && "dark:invert")}
-				priority
-			/>
+			<div className="relative size-7 shrink-0">
+				<Image
+					src="/images/logo_small.png"
+					alt="OpenMonetis"
+					fill
+					sizes="28px"
+					className={cn("object-contain", !colorIcon && iconFilterClass)}
+					priority
+				/>
+			</div>
+			<div className="relative h-8 w-[100px] shrink-0">
+				<Image
+					src="/images/logo_text.png"
+					alt="OpenMonetis"
+					fill
+					sizes="100px"
+					className={cn("object-contain", invertTextOnDark && "dark:invert")}
+					priority
+				/>
+			</div>
 		</div>
 	);
 }

src/shared/components/navigation/navbar/app-navbar.tsx

@@ -2,6 +2,7 @@ import { AnimatedThemeToggler } from "@/shared/components/animated-theme-toggler
 import { NotificationBell } from "@/shared/components/navigation/navbar/notification-bell";
 import { RefreshPageButton } from "@/shared/components/refresh-page-button";
 import type { DashboardNotificationsSnapshot } from "@/shared/lib/types/notifications";
+import { checkForUpdate } from "@/shared/lib/version/check-update";
 import { NavMenu } from "./nav-menu";
 import { NavbarShell } from "./navbar-shell";
 import { NavbarUser } from "./navbar-user";
@@ -18,12 +19,14 @@ type AppNavbarProps = {
 	notificationsSnapshot: DashboardNotificationsSnapshot;
 };
 
-export function AppNavbar({
+export async function AppNavbar({
 	user,
 	pagadorAvatarUrl,
 	preLancamentosCount = 0,
 	notificationsSnapshot,
 }: AppNavbarProps) {
+	const updateCheck = await checkForUpdate();
+
 	return (
 		<NavbarShell logoHref="/dashboard" fixed>
 			<NavMenu />
@@ -38,7 +41,11 @@ export function AppNavbar({
 				<RefreshPageButton variant="navbar" />
 				<AnimatedThemeToggler variant="navbar" />
 			</div>
-			<NavbarUser user={user} pagadorAvatarUrl={pagadorAvatarUrl} />
+			<NavbarUser
+				user={user}
+				pagadorAvatarUrl={pagadorAvatarUrl}
+				updateCheck={updateCheck}
+			/>
 		</NavbarShell>
 	);
 }

src/shared/components/navigation/navbar/navbar-user.tsx

@@ -3,6 +3,7 @@
 import {
 	RiHistoryLine,
 	RiLogoutCircleLine,
+	RiMegaphoneLine,
 	RiMessageLine,
 	RiSettings2Line,
 } from "@remixicon/react";
@@ -24,6 +25,7 @@ import {
 import { Spinner } from "@/shared/components/ui/spinner";
 import { authClient } from "@/shared/lib/auth/client";
 import { getAvatarSrc } from "@/shared/lib/payers/utils";
+import type { UpdateCheckResult } from "@/shared/lib/version/check-update";
 import { cn } from "@/shared/utils/ui";
 
 const itemClass =
@@ -37,9 +39,14 @@ type NavbarUserProps = {
 		image: string | null;
 	};
 	pagadorAvatarUrl: string | null;
+	updateCheck: UpdateCheckResult;
 };
 
-export function NavbarUser({ user, pagadorAvatarUrl }: NavbarUserProps) {
+export function NavbarUser({
+	user,
+	pagadorAvatarUrl,
+	updateCheck,
+}: NavbarUserProps) {
 	const router = useRouter();
 	const [logoutLoading, setLogoutLoading] = useState(false);
 	const [feedbackOpen, setFeedbackOpen] = useState(false);
@@ -61,33 +68,42 @@ export function NavbarUser({ user, pagadorAvatarUrl }: NavbarUserProps) {
 	return (
 		<Dialog open={feedbackOpen} onOpenChange={setFeedbackOpen}>
 			<DropdownMenu>
-				<DropdownMenuTrigger asChild>
-					<button
-						className="relative flex size-9 items-center justify-center overflow-hidden rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-black/20 focus-visible:outline-none"
-						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>
+				<div className="relative">
+					<DropdownMenuTrigger asChild>
+						<button
+							className="flex size-9 items-center justify-center overflow-hidden rounded-full transition-colors focus-visible:ring-2 focus-visible:ring-black/20 focus-visible:outline-none"
+							aria-label="Menu do usuário"
+						>
+							<div className="relative size-10 overflow-hidden rounded-full">
+								<Image
+									src={avatarSrc}
+									alt={`Avatar de ${user.name}`}
+									fill
+									sizes="40px"
+									className="object-cover"
+								/>
+							</div>
+						</button>
+					</DropdownMenuTrigger>
+					{updateCheck.hasUpdate && (
+						<span className="pointer-events-none absolute -top-0.5 -right-0.5 size-2.5 rounded-full bg-success" />
+					)}
+				</div>
 				<DropdownMenuContent
 					align="end"
 					className="w-60 border-border/60 p-2 shadow-none"
 					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="relative size-9 shrink-0 overflow-hidden rounded-full">
+							<Image
+								src={avatarSrc}
+								alt={user.name}
+								fill
+								sizes="36px"
+								className="object-cover"
+							/>
+						</div>
 						<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">
@@ -122,6 +138,20 @@ export function NavbarUser({ user, pagadorAvatarUrl }: NavbarUserProps) {
 								Enviar Feedback
 							</button>
 						</DialogTrigger>
+
+						{updateCheck.hasUpdate && (
+							<Link
+								href={updateCheck.releaseUrl}
+								target="_blank"
+								rel="noopener noreferrer"
+								className={cn(itemClass, "text-success")}
+							>
+								<RiMegaphoneLine className="size-4 text-success shrink-0" />
+								<span className="flex-1 tracking-wide text-xs font-medium">
+									Atualização {updateCheck.latestVersion} disponível
+								</span>
+							</Link>
+						)}
 					</div>
 
 					<DropdownMenuSeparator />

src/shared/components/navigation/sidebar/nav-user.tsx

@@ -30,13 +30,15 @@ export function NavUser({ user, pagadorAvatarUrl }: NavUserProps) {
 					size="lg"
 					className="data-popup-open:bg-sidebar-accent data-popup-open:text-sidebar-accent-foreground "
 				>
-					<Image
-						src={avatarSrc}
-						alt={user.name}
-						width={32}
-						height={32}
-						className="size-8 shrink-0 rounded-full object-cover"
-					/>
+					<div className="relative size-8 shrink-0 overflow-hidden rounded-full">
+						<Image
+							src={avatarSrc}
+							alt={user.name}
+							fill
+							sizes="32px"
+							className="object-cover"
+						/>
+					</div>
 					<div className="grid flex-1 text-left text-sm leading-tight">
 						<span className="truncate font-medium">{user.name}</span>
 						<span className="text-muted-foreground truncate text-xs">

src/shared/components/ui/chart.tsx

@@ -31,6 +31,13 @@ type ChartContextProps = {
 
 const ChartContext = React.createContext<ChartContextProps | null>(null);
 
+const CHART_MIN_WIDTH = 280;
+const CHART_MIN_HEIGHT = 200;
+const CHART_INITIAL_DIMENSION = {
+	width: CHART_MIN_WIDTH,
+	height: CHART_MIN_HEIGHT,
+} as const;
+
 function useChart() {
 	const context = React.useContext(ChartContext);
 
@@ -80,8 +87,9 @@ function ChartContainer({
 						<RechartsPrimitive.ResponsiveContainer
 							width="100%"
 							height="100%"
-							minWidth={280}
-							minHeight={200}
+							minWidth={CHART_MIN_WIDTH}
+							minHeight={CHART_MIN_HEIGHT}
+							initialDimension={CHART_INITIAL_DIMENSION}
 						>
 							{children}
 						</RechartsPrimitive.ResponsiveContainer>

src/shared/components/ui/currency-input.tsx

@@ -56,7 +56,7 @@ const formatDigits = (digits: string) => {
 	return BRL_FORMATTER.format(numeric);
 };
 
-export interface CurrencyInputProps
+interface CurrencyInputProps
 	extends Omit<
 		React.ComponentProps<typeof Input>,
 		"value" | "defaultValue" | "type" | "inputMode" | "onChange"

src/shared/lib/version/check-update.ts

@@ -0,0 +1,55 @@
+import { version as currentVersion } from "@/package.json";
+
+const GITHUB_REPO = "felipegcoutinho/openmonetis";
+const RELEASES_URL = `https://github.com/${GITHUB_REPO}/releases`;
+
+export type UpdateCheckResult = {
+	hasUpdate: boolean;
+	latestVersion: string;
+	releaseUrl: string;
+};
+
+function compareVersions(a: string, b: string): number {
+	const normalize = (v: string) => v.replace(/^v/, "").split(".").map(Number);
+	const partsA = normalize(a);
+	const partsB = normalize(b);
+
+	for (let i = 0; i < Math.max(partsA.length, partsB.length); i++) {
+		const diff = (partsA[i] ?? 0) - (partsB[i] ?? 0);
+		if (diff !== 0) return diff;
+	}
+	return 0;
+}
+
+export async function checkForUpdate(): Promise<UpdateCheckResult> {
+	const fallback: UpdateCheckResult = {
+		hasUpdate: false,
+		latestVersion: currentVersion,
+		releaseUrl: RELEASES_URL,
+	};
+
+	try {
+		// GitHub redireciona /releases/latest para a URL com a tag — sem API, sem rate limit
+		const response = await fetch(
+			`https://github.com/${GITHUB_REPO}/releases/latest`,
+			{ redirect: "manual", next: { revalidate: 86400 } },
+		);
+
+		const location = response.headers.get("location");
+		if (!location) return fallback;
+
+		const match = location.match(/releases\/tag\/v?(.+)$/);
+		if (!match) return fallback;
+
+		const latestVersion = match[1];
+		const releaseUrl = `https://github.com/${GITHUB_REPO}/releases/tag/v${latestVersion}`;
+
+		return {
+			hasUpdate: compareVersions(latestVersion, currentVersion) > 0,
+			latestVersion,
+			releaseUrl,
+		};
+	} catch {
+		return fallback;
+	}
+}