refactor(inbox): simplifica layout e formatação dos componentes

- Remove header duplicado da página (agora no layout)
- Melhora formatação do código com linhas mais curtas
- Reorganiza imports para consistência
This commit is contained in:
Felipe Coutinho
2026-01-23 15:41:52 +00:00
parent ea3e6cdafc
commit 18471f2225
2 changed files with 8 additions and 29 deletions

View File

@@ -9,8 +9,6 @@ import {
DropdownMenuItem, DropdownMenuItem,
DropdownMenuTrigger, DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"; } from "@/components/ui/dropdown-menu";
import { formatDistanceToNow } from "date-fns";
import { ptBR } from "date-fns/locale";
import { import {
RiCheckLine, RiCheckLine,
RiDeleteBinLine, RiDeleteBinLine,
@@ -18,6 +16,8 @@ import {
RiMoreLine, RiMoreLine,
RiSmartphoneLine, RiSmartphoneLine,
} from "@remixicon/react"; } from "@remixicon/react";
import { formatDistanceToNow } from "date-fns";
import { ptBR } from "date-fns/locale";
import type { InboxItem } from "./types"; import type { InboxItem } from "./types";
interface InboxCardProps { interface InboxCardProps {
@@ -47,7 +47,7 @@ export function InboxCard({
return ( return (
<Card className="flex flex-col"> <Card className="flex flex-col">
<CardHeader className="flex flex-row items-start justify-between gap-2 pb-2"> <CardHeader className="flex flex-row items-start justify-between gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<RiSmartphoneLine className="size-4 text-muted-foreground" /> <RiSmartphoneLine className="size-4 text-muted-foreground" />
<span className="text-sm font-medium"> <span className="text-sm font-medium">
@@ -95,9 +95,7 @@ export function InboxCard({
<CardContent className="flex flex-1 flex-col gap-3"> <CardContent className="flex flex-1 flex-col gap-3">
<div className="flex-1"> <div className="flex-1">
{item.parsedName && ( {item.parsedName && <p className="font-medium">{item.parsedName}</p>}
<p className="font-medium">{item.parsedName}</p>
)}
<p className="line-clamp-2 text-sm text-muted-foreground"> <p className="line-clamp-2 text-sm text-muted-foreground">
{item.originalText} {item.originalText}
</p> </p>
@@ -113,19 +111,11 @@ export function InboxCard({
</div> </div>
<div className="flex gap-2"> <div className="flex gap-2">
<Button <Button size="sm" className="flex-1" onClick={() => onProcess(item)}>
size="sm"
className="flex-1"
onClick={() => onProcess(item)}
>
<RiCheckLine className="mr-1 size-4" /> <RiCheckLine className="mr-1 size-4" />
Processar Processar
</Button> </Button>
<Button <Button size="sm" variant="outline" onClick={() => onDiscard(item)}>
size="sm"
variant="outline"
onClick={() => onDiscard(item)}
>
<RiDeleteBinLine className="size-4" /> <RiDeleteBinLine className="size-4" />
</Button> </Button>
</div> </div>

View File

@@ -39,9 +39,9 @@ export function InboxPage({
[...items].sort( [...items].sort(
(a, b) => (a, b) =>
new Date(b.notificationTimestamp).getTime() - new Date(b.notificationTimestamp).getTime() -
new Date(a.notificationTimestamp).getTime() new Date(a.notificationTimestamp).getTime(),
), ),
[items] [items],
); );
const handleProcessOpenChange = useCallback((open: boolean) => { const handleProcessOpenChange = useCallback((open: boolean) => {
@@ -99,17 +99,6 @@ export function InboxPage({
return ( return (
<> <>
<div className="flex w-full flex-col gap-6"> <div className="flex w-full flex-col gap-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-semibold">Caixa de Entrada</h1>
<p className="text-sm text-muted-foreground">
{items.length === 0
? "Nenhuma notificação pendente"
: `${items.length} notificação${items.length > 1 ? "ões" : ""} pendente${items.length > 1 ? "s" : ""}`}
</p>
</div>
</div>
{sortedItems.length === 0 ? ( {sortedItems.length === 0 ? (
<Card className="flex min-h-[50vh] w-full items-center justify-center py-12"> <Card className="flex min-h-[50vh] w-full items-center justify-center py-12">
<EmptyState <EmptyState