Restyle recent tickets panel layout

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

@@ -10,16 +10,13 @@ import type { Id } from "@/convex/_generated/dataModel"
 import { DEFAULT_TENANT_ID } from "@/lib/constants"
 import { mapTicketsFromServerList } from "@/lib/mappers/ticket"
 import type { Ticket } from "@/lib/schemas/ticket"
-import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Skeleton } from "@/components/ui/skeleton"
 import { TicketPriorityPill } from "@/components/tickets/priority-pill"
 import { TicketStatusBadge } from "@/components/tickets/status-badge"
 import { useAuth } from "@/lib/auth-client"
-
+import { cn } from "@/lib/utils"
-const metaBadgeClass =
-  "inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-semibold text-neutral-700"
 
 const channelLabel: Record<string, string> = {
   EMAIL: "E-mail",
@@ -31,50 +28,55 @@ const channelLabel: Record<string, string> = {
 }
 
 function TicketRow({ ticket, entering }: { ticket: Ticket; entering: boolean }) {
+  const channel = channelLabel[ticket.channel] ?? ticket.channel
+  const queueLabel = ticket.queue ?? "Sem fila"
+  const requesterName = ticket.requester.name ?? ticket.requester.email ?? "Solicitante"
+
   return (
     <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" : ""}`}
+      className={cn(
+        "rounded-xl border border-slate-200 bg-white/70 px-5 py-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="flex flex-col gap-3 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">
+          <div className="flex items-start justify-between gap-2">
-            <span className="text-neutral-900">#{ticket.reference}</span>
+            <div className="flex flex-wrap items-center gap-2 text-xs font-medium text-neutral-500">
-            <span className="rounded-full bg-[#00e8ff]/15 px-2 py-0.5 text-[11px] font-semibold text-[#006879]">
+              <span className="font-semibold text-neutral-800">#{ticket.reference}</span>
-              {ticket.queue ?? "Sem fila"}
+              <span className="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
+                {queueLabel}
               </span>
             </div>
+            <TicketStatusBadge status={ticket.status} />
+          </div>
           <div className="space-y-1">
-            <Link href={`/tickets/${ticket.id}`} className="line-clamp-1 text-base font-semibold text-neutral-900 transition hover:text-neutral-700">
+            <Link href={`/tickets/${ticket.id}`} className="line-clamp-1 text-lg font-semibold text-neutral-900 transition hover:text-neutral-700">
               {ticket.subject}
             </Link>
-            <p className="line-clamp-2 text-sm text-neutral-600">{ticket.summary ?? "Sem resumo"}</p>
+            <p className="line-clamp-2 text-sm text-neutral-600">{ticket.summary ?? "Sem descrição informada."}</p>
           </div>
           <div className="flex flex-wrap items-center gap-2 text-xs text-neutral-600">
-            <span className="font-semibold text-neutral-700">{ticket.requester.name}</span>
+            <span className="font-semibold text-neutral-700">{requesterName}</span>
             <span className="text-neutral-400">•</span>
             <span>{formatDistanceToNow(ticket.updatedAt, { addSuffix: true, locale: ptBR })}</span>
           </div>
+          <div className="flex flex-wrap items-center gap-2 text-xs text-neutral-600">
+            <span className="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">{channel}</span>
+            <span className="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
+              {ticket.assignee?.name ?? "Sem responsável"}
+            </span>
             {ticket.category ? (
-            <Badge className="inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-3 py-1 text-[11px] font-semibold text-[#02414d]">
+              <span className="rounded-md bg-slate-100 px-2 py-0.5 text-[11px] font-medium text-slate-600">
                 {ticket.category.name}
-              {ticket.subcategory ? ` • ${ticket.subcategory.name}` : ""}
+                {ticket.subcategory ? ` · ${ticket.subcategory.name}` : ""}
-            </Badge>
+              </span>
-          ) : (
+            ) : null}
-            <Badge className="inline-flex items-center gap-1 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-[11px] font-semibold text-neutral-700">
-              Sem categoria
-            </Badge>
-          )}
           </div>
-        <div className="flex shrink-0 flex-col gap-3 text-right md:w-[220px]">
+        </div>
-          <div className="flex flex-wrap justify-end gap-2">
+        <div className="flex shrink-0 flex-col justify-between gap-3 text-right md:w-[200px]">
-            <TicketStatusBadge status={ticket.status} />
           <TicketPriorityPill priority={ticket.priority} />
         </div>
-          <div className="flex flex-wrap justify-end gap-x-2 gap-y-1 text-xs text-neutral-600">
-            <Badge className={metaBadgeClass}>{channelLabel[ticket.channel] ?? ticket.channel}</Badge>
-            <Badge className={metaBadgeClass}>{ticket.assignee?.name ?? "Sem responsável"}</Badge>
-          </div>
-        </div>
       </div>
     </div>
   )