feat: animate realtime recent tickets panel

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>

web/src/app/globals.css

@@ -137,4 +137,19 @@
   .rich-text h3 { @apply text-base font-semibold my-2; }
   .rich-text code { @apply rounded bg-muted px-1 py-0.5 text-xs; }
   .rich-text pre { @apply my-3 overflow-x-auto rounded bg-muted p-3 text-xs; }
+
+  @keyframes recent-ticket-enter {
+    0% {
+      opacity: 0;
+      transform: translateY(-12px);
+    }
+    100% {
+      opacity: 1;
+      transform: translateY(0);
+    }
+  }
+
+  .recent-ticket-enter {
+    animation: recent-ticket-enter 0.45s ease-out;
+  }
 }

web/src/components/tickets/recent-tickets-panel.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useEffect, useMemo, useRef, useState } from "react"
 import Link from "next/link"
 import { formatDistanceToNow } from "date-fns"
 import { ptBR } from "date-fns/locale"
@@ -28,9 +29,11 @@ const channelLabel: Record<string, string> = {
   MANUAL: "Manual",
 }
 
-function TicketRow({ ticket }: { ticket: Ticket }) {
+function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean }) {
   return (
-    <div className="rounded-xl border border-slate-200 bg-white/60 p-4 transition hover:border-slate-300 hover:bg-white">
+    <div
+      className={`rounded-xl border border-slate-200 bg-white/60 p-4 transition-all duration-300 hover:border-slate-300 hover:bg-white ${entering ? "recent-ticket-enter" : ""}`}
+    >
       <div className="flex flex-col gap-4 md:flex-row md:items-start md:justify-between">
         <div className="min-w-0 space-y-2">
           <div className="flex flex-wrap items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
@@ -78,6 +81,41 @@ function TicketRow({ ticket }: { ticket: Ticket }) {
 
 export function RecentTicketsPanel() {
   const ticketsRaw = useQuery(api.tickets.list, { tenantId: DEFAULT_TENANT_ID, limit: 6 })
+  const [enteringId, setEnteringId] = useState<string | null>(null)
+  const previousIdsRef = useRef<string[]>([])
+
+  const tickets = useMemo(
+    () => mapTicketsFromServerList((ticketsRaw ?? []) as unknown[]).slice(0, 6),
+    [ticketsRaw]
+  )
+
+  useEffect(() => {
+    if (ticketsRaw === undefined) {
+      previousIdsRef.current = []
+      return
+    }
+    const ids = tickets.map((ticket) => ticket.id)
+    const previous = previousIdsRef.current
+    if (!ids.length) {
+      previousIdsRef.current = ids
+      return
+    }
+    if (!previous.length) {
+      previousIdsRef.current = ids
+      return
+    }
+    const topId = ids[0]
+    if (!previous.includes(topId)) {
+      setEnteringId(topId)
+    }
+    previousIdsRef.current = ids
+  }, [tickets, ticketsRaw])
+
+  useEffect(() => {
+    if (!enteringId) return
+    const timer = window.setTimeout(() => setEnteringId(null), 600)
+    return () => window.clearTimeout(timer)
+  }, [enteringId])
 
   if (ticketsRaw === undefined) {
     return (
@@ -97,8 +135,6 @@ export function RecentTicketsPanel() {
     )
   }
 
-  const tickets = mapTicketsFromServerList((ticketsRaw ?? []) as unknown[]).slice(0, 6)
-
   return (
     <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
       <CardHeader className="flex flex-row items-center justify-between pb-4">
@@ -113,7 +149,9 @@ export function RecentTicketsPanel() {
             Nenhum ticket recente encontrado.
           </div>
         ) : (
-          tickets.map((ticket) => <TicketRow key={ticket.id} ticket={ticket} />)
+          tickets.map((ticket) => (
+            <TicketRow key={ticket.id} ticket={ticket} entering={ticket.id === enteringId} />
+          ))
         )}
       </CardContent>
     </Card>