git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-05-09 11:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Felipe Coutinho
2026-04-03 18:11:30 +00:00
parent 5c4995961c
commit f5cdae4853
11 changed files with 190 additions and 80 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/shared/components/calculator/calculator-display.tsx
View File

@@ -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;

93
src/shared/components/logo.tsx
View File

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

11
src/shared/components/navigation/navbar/app-navbar.tsx
View File

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

74
src/shared/components/navigation/navbar/navbar-user.tsx
View File

@@ -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 />

16
src/shared/components/navigation/sidebar/nav-user.tsx
View File

@@ -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">

12
src/shared/components/ui/chart.tsx
View File

@@ -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>

2
src/shared/components/ui/currency-input.tsx
View File

@@ -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"