fix(select): evitar value vazio em Select (fila) no novo ticket; feat(timeline): nomes/avatares do ator e mensagens PT-BR; feat(ui): skeletons para lista e recentes; grid de anexos e legendas; melhorias de cards/padding

web/convex/tickets.ts

@@ -217,10 +217,11 @@ export const create = mutation({
       slaPolicyId: undefined,
       dueAt: undefined,
     });
+    const requester = await ctx.db.get(args.requesterId);
     await ctx.db.insert("ticketEvents", {
       ticketId: id,
       type: "CREATED",
-      payload: { requesterId: args.requesterId },
+      payload: { requesterId: args.requesterId, requesterName: requester?.name, requesterAvatar: requester?.avatarUrl },
       createdAt: now,
     });
     return id;

web/src/components/tickets/new-ticket-dialog.tsx

@@ -125,18 +125,24 @@ export function NewTicketDialog() {
                     </SelectContent>
                   </Select>
                 </Field>
-                <Field>
-                  <FieldLabel>Fila</FieldLabel>
-                  <Select value={form.watch("queueName") ?? ""} onValueChange={(v) => form.setValue("queueName", v || null)}>
-                    <SelectTrigger><SelectValue placeholder="Sem fila" /></SelectTrigger>
-                    <SelectContent>
-                      <SelectItem value="">Sem fila</SelectItem>
-                      {queues.map((q: any) => (
-                        <SelectItem key={q.id} value={q.name}>{q.name}</SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </Field>
+              <Field>
+                <FieldLabel>Fila</FieldLabel>
+                {(() => {
+                  const NONE = "NONE";
+                  const current = form.watch("queueName") ?? NONE;
+                  return (
+                    <Select value={current} onValueChange={(v) => form.setValue("queueName", v === NONE ? null : v)}>
+                      <SelectTrigger><SelectValue placeholder="Sem fila" /></SelectTrigger>
+                      <SelectContent>
+                        <SelectItem value={NONE}>Sem fila</SelectItem>
+                        {queues.map((q: any) => (
+                          <SelectItem key={q.id} value={q.name}>{q.name}</SelectItem>
+                        ))}
+                      </SelectContent>
+                    </Select>
+                  )
+                })()}
+              </Field>
               </div>
             </FieldGroup>
           </FieldSet>

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

@@ -12,8 +12,15 @@ export function RecentTicketsPanel() {
   const ticketsRaw = useQuery(api.tickets.list, { tenantId: DEFAULT_TENANT_ID, limit: 10 });
   if (ticketsRaw === undefined) {
     return (
-      <div className="rounded-xl border bg-card p-6 text-sm text-muted-foreground">
-        <Spinner className="me-2" /> Carregando tickets…
+      <div className="rounded-xl border bg-card p-4">
+        <div className="grid gap-3">
+          {Array.from({ length: 4 }).map((_, i) => (
+            <div key={i} className="flex items-center justify-between gap-3">
+              <div className="h-4 w-56 animate-pulse rounded bg-muted" />
+              <div className="h-4 w-20 animate-pulse rounded bg-muted" />
+            </div>
+          ))}
+        </div>
       </div>
     );
   }

web/src/components/tickets/ticket-comments.tsx

@@ -105,7 +105,7 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
                     {comment.body}
                   </div>
           {comment.attachments?.length ? (
-            <div className="flex flex-wrap gap-3">
+            <div className="grid max-w-xl grid-cols-[repeat(auto-fill,minmax(96px,1fr))] gap-3">
               {comment.attachments.map((a) => {
                 const att = a as any
                 const isImg = (att?.url ?? "").match(/\.(png|jpe?g|gif|webp|svg)$/i)

web/src/components/tickets/ticket-timeline.tsx

@@ -10,7 +10,8 @@ import {
 
 import type { TicketWithDetails } from "@/lib/schemas/ticket"
 import { cn } from "@/lib/utils"
-import { Card, CardContent } from "@/components/ui/card"
+import { Card, CardContent } from "@/components/ui/card"
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
 import { Separator } from "@/components/ui/separator"
 
 const timelineIcons: Record<string, ComponentType<{ className?: string }>> = {
@@ -48,20 +49,32 @@ export function TicketTimeline({ ticket }: TicketTimelineProps) {
                 <Icon className="size-4" />
               </span>
               <div className="flex flex-col gap-2">
-                <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
+                <div className="flex flex-wrap items-center gap-x-3 gap-y-1">
                   <span className="text-sm font-medium text-foreground">
                     {timelineLabels[entry.type] ?? entry.type}
                   </span>
-                  <span className="text-xs text-muted-foreground">
-                    {format(entry.createdAt, "dd MMM yyyy HH:mm", { locale: ptBR })}
-                  </span>
-                </div>
+                  {entry.payload?.actorName ? (
+                    <span className="flex items-center gap-1 text-xs text-muted-foreground">
+                      <Avatar className="size-5">
+                        <AvatarImage src={entry.payload.actorAvatar} alt={entry.payload.actorName} />
+                        <AvatarFallback>
+                          {entry.payload.actorName.split(' ').slice(0,2).map((p:string)=>p[0]).join('').toUpperCase()}
+                        </AvatarFallback>
+                      </Avatar>
+                      por {entry.payload.actorName}
+                    </span>
+                  ) : null}
+                  <span className="text-xs text-muted-foreground">
+                    {format(entry.createdAt, "dd MMM yyyy HH:mm", { locale: ptBR })}
+                  </span>
+                </div>
                 {(() => {
                   const p: any = entry.payload || {}
                   let message: string | null = null
                   if (entry.type === "STATUS_CHANGED" && (p.toLabel || p.to)) message = `Status alterado para ${p.toLabel || p.to}`
                   if (entry.type === "ASSIGNEE_CHANGED" && (p.assigneeName || p.assigneeId)) message = `Responsável alterado${p.assigneeName ? ` para ${p.assigneeName}` : ""}`
                   if (entry.type === "QUEUE_CHANGED" && (p.queueName || p.queueId)) message = `Fila alterada${p.queueName ? ` para ${p.queueName}` : ""}`
+                  if (entry.type === "CREATED" && (p.requesterName)) message = `Criado por ${p.requesterName}`
                   if (!message) return null
                   return (
                     <div className="rounded-lg border border-dashed bg-card px-3 py-2 text-sm text-muted-foreground">

web/src/components/tickets/tickets-view.tsx

@@ -35,7 +35,16 @@ export function TicketsView() {
     <div className="flex flex-col gap-6 px-4 lg:px-6">
       <TicketsFilters onChange={setFilters} queues={(queues ?? []).map((q: any) => q.name)} />
       {ticketsRaw === undefined ? (
-        <div className="flex items-center gap-2 text-sm text-muted-foreground"><Spinner /> Carregando tickets…</div>
+        <div className="rounded-xl border bg-card p-4">
+          <div className="grid gap-3">
+            {Array.from({ length: 6 }).map((_, i) => (
+              <div key={i} className="flex items-center justify-between gap-3">
+                <div className="h-4 w-48 animate-pulse rounded bg-muted" />
+                <div className="h-4 w-24 animate-pulse rounded bg-muted" />
+              </div>
+            ))}
+          </div>
+        </div>
       ) : (
         <TicketsTable tickets={filteredTickets as any} />
       )}