From c5864dbefdfb801d10e2f4051893edc3c90d6c2b Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdrasrenan@users.noreply.github.com>
Date: Sun, 5 Oct 2025 03:12:53 -0300
Subject: [PATCH] feat: refine ticket creation and comments experience

Co-authored-by: factory-droid[bot] <138933559+factory-droid[bot]@users.noreply.github.com>
---
 web/src/app/globals.css                       |  10 +
 .../components/tickets/category-select.tsx    |   6 +-
 .../components/tickets/new-ticket-dialog.tsx  | 323 ++++++++++--------
 .../tickets/ticket-comments.rich.tsx          |   2 +-
 web/src/components/tickets/tickets-table.tsx  |  34 +-
 5 files changed, 216 insertions(+), 159 deletions(-)

diff --git a/web/src/app/globals.css b/web/src/app/globals.css
index 400c7d2..fcd5555 100644
--- a/web/src/app/globals.css
+++ b/web/src/app/globals.css
@@ -138,6 +138,16 @@
   .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; }
 
+  .rich-text .ProseMirror.is-editor-empty::before,
+  .rich-text .ProseMirror p.is-editor-empty:first-child::before {
+    color: #94a3b8;
+    content: attr(data-placeholder);
+    pointer-events: none;
+    height: 0;
+    float: left;
+    font-weight: 400;
+  }
+
   @keyframes recent-ticket-enter {
     0% {
       opacity: 0;
diff --git a/web/src/components/tickets/category-select.tsx b/web/src/components/tickets/category-select.tsx
index 522fdcf..679e860 100644
--- a/web/src/components/tickets/category-select.tsx
+++ b/web/src/components/tickets/category-select.tsx
@@ -25,6 +25,7 @@ interface CategorySelectProps {
   subcategoryLabel?: string
   className?: string
   secondaryEmptyLabel?: string
+  layout?: "grid" | "stacked"
 }
 
 function findCategory(categories: TicketCategory[], categoryId: string | null) {
@@ -44,6 +45,7 @@ export function CategorySelectFields({
   subcategoryLabel = "Secundária",
   secondaryEmptyLabel = "Selecione uma categoria primária",
   className,
+  layout = "grid",
 }: CategorySelectProps) {
   const { categories, isLoading } = useTicketCategories(tenantId)
   const activeCategory = useMemo(() => findCategory(categories, categoryId), [categories, categoryId])
@@ -74,8 +76,10 @@ export function CategorySelectFields({
     }
   }, [categoryId, secondaryOptions, subcategoryId, onSubcategoryChange])
 
+  const containerClass = layout === "stacked" ? "flex flex-col gap-3" : "grid gap-3 sm:grid-cols-2"
+
   return (
-    <div className={cn("grid gap-3 sm:grid-cols-2", className)}>
+    <div className={cn(containerClass, className)}>
       <div className="space-y-1.5">
         <label className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
           <IconFolders className="size-3.5" /> {categoryLabel}
diff --git a/web/src/components/tickets/new-ticket-dialog.tsx b/web/src/components/tickets/new-ticket-dialog.tsx
index e070859..d3b993e 100644
--- a/web/src/components/tickets/new-ticket-dialog.tsx
+++ b/web/src/components/tickets/new-ticket-dialog.tsx
@@ -20,19 +20,14 @@ import { toast } from "sonner"
 import { Spinner } from "@/components/ui/spinner"
 import { Dropzone } from "@/components/ui/dropzone"
 import { RichTextEditor } from "@/components/ui/rich-text-editor"
-import { Badge } from "@/components/ui/badge"
-import { cn } from "@/lib/utils"
 import {
   PriorityIcon,
-  priorityBadgeClass,
-  priorityItemClass,
   priorityStyles,
-  priorityTriggerClass,
 } from "@/components/tickets/priority-select"
 import { CategorySelectFields } from "@/components/tickets/category-select"
 
 const schema = z.object({
-  subject: z.string().min(3, "Informe um assunto"),
+  subject: z.string().optional(),
   summary: z.string().optional(),
   description: z.string().optional(),
   priority: z.enum(["LOW", "MEDIUM", "HIGH", "URGENT"]).default("MEDIUM"),
@@ -70,9 +65,36 @@ export function NewTicketDialog() {
   const queueValue = form.watch("queueName") ?? "NONE"
   const categoryIdValue = form.watch("categoryId")
   const subcategoryIdValue = form.watch("subcategoryId")
+  const isSubmitted = form.formState.isSubmitted
   const selectTriggerClass = "flex h-8 w-full items-center justify-between rounded-full border border-slate-300 bg-white px-3 text-sm font-medium text-neutral-800 shadow-sm focus:ring-0 data-[state=open]:border-[#00d6eb]"
   const selectItemClass = "flex items-center gap-2 rounded-md px-2 py-2 text-sm text-neutral-800 transition data-[state=checked]:bg-[#00e8ff]/15 data-[state=checked]:text-neutral-900 focus:bg-[#00e8ff]/10"
 
+  const handleCategoryChange = (value: string) => {
+    const previous = form.getValues("categoryId") ?? ""
+    const next = value ?? ""
+    form.setValue("categoryId", next, {
+      shouldDirty: previous !== next && previous !== "",
+      shouldTouch: true,
+      shouldValidate: isSubmitted,
+    })
+    if (!isSubmitted) {
+      form.clearErrors("categoryId")
+    }
+  }
+
+  const handleSubcategoryChange = (value: string) => {
+    const previous = form.getValues("subcategoryId") ?? ""
+    const next = value ?? ""
+    form.setValue("subcategoryId", next, {
+      shouldDirty: previous !== next && previous !== "",
+      shouldTouch: true,
+      shouldValidate: isSubmitted,
+    })
+    if (!isSubmitted) {
+      form.clearErrors("subcategoryId")
+    }
+  }
+
   async function submit(values: z.infer<typeof schema>) {
     if (!userId) return
     const subjectTrimmed = (values.subject ?? "").trim()
@@ -129,146 +151,159 @@ export function NewTicketDialog() {
           Novo ticket
         </Button>
       </DialogTrigger>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>Novo ticket</DialogTitle>
-          <DialogDescription>Preencha as informações básicas para abrir um chamado.</DialogDescription>
-        </DialogHeader>
-        <form className="space-y-4" onSubmit={form.handleSubmit(submit)}>
-          <FieldSet>
-            <FieldGroup>
-              <Field>
-                <FieldLabel htmlFor="subject">Assunto</FieldLabel>
-                <Input id="subject" {...form.register("subject")} placeholder="Ex.: Erro 500 no portal" />
-                <FieldError errors={form.formState.errors.subject ? [{ message: form.formState.errors.subject.message }] : []} />
-              </Field>
-              <Field>
-                <FieldLabel htmlFor="summary">Resumo</FieldLabel>
-                <textarea id="summary" className="w-full rounded-md border bg-background p-2 text-sm" rows={3} {...form.register("summary")} />
-              </Field>
-              <Field>
-                <FieldLabel>Descrição</FieldLabel>
-                <RichTextEditor
-                  value={form.watch("description") || ""}
-                  onChange={(html) => form.setValue("description", html)}
-                  placeholder="Detalhe o problema, passos para reproduzir, links, etc."
-                />
-              </Field>
-              <Field>
-                <FieldLabel>Anexos</FieldLabel>
-                <Dropzone onUploaded={(files) => setAttachments((prev) => [...prev, ...files])} />
-                <FieldError className="mt-1">Formatos comuns de imagem e documentos são aceitos.</FieldError>
-              </Field>
-              <Field>
-                <CategorySelectFields
-                  tenantId={DEFAULT_TENANT_ID}
-                  categoryId={categoryIdValue || null}
-                  subcategoryId={subcategoryIdValue || null}
-                  onCategoryChange={(value) => {
-                    form.setValue("categoryId", value, { shouldDirty: true, shouldValidate: true })
-                  }}
-                  onSubcategoryChange={(value) => {
-                    form.setValue("subcategoryId", value, { shouldDirty: true, shouldValidate: true })
-                  }}
-                />
-                {form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (
-                  <FieldError className="mt-1 space-y-0.5">
-                    <>
-                      {form.formState.errors.categoryId?.message ? <div>{form.formState.errors.categoryId?.message}</div> : null}
-                      {form.formState.errors.subcategoryId?.message ? <div>{form.formState.errors.subcategoryId?.message}</div> : null}
-                    </>
-                  </FieldError>
-                ) : null}
-              </Field>
-              <div className="grid gap-3 sm:grid-cols-3">
-                <Field>
-                  <FieldLabel>Prioridade</FieldLabel>
-                  <Select value={priorityValue} onValueChange={(v) => form.setValue("priority", v as z.infer<typeof schema>["priority"])}>
-                    <SelectTrigger className={cn(priorityTriggerClass, "w-full justify-between")}>
-                      <SelectValue>
-                        <Badge className={cn(priorityBadgeClass, priorityStyles[priorityValue]?.badgeClass)}>
-                          <PriorityIcon value={priorityValue} />
-                          {priorityStyles[priorityValue]?.label ?? priorityValue}
-                        </Badge>
-                      </SelectValue>
-                    </SelectTrigger>
-                    <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
-                      {(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
-                        <SelectItem key={option} value={option} className={priorityItemClass}>
-                          <span className="inline-flex items-center gap-2">
-                            <PriorityIcon value={option} />
-                            {priorityStyles[option].label}
-                          </span>
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <Field>
-                  <FieldLabel>Canal</FieldLabel>
-                  <Select value={channelValue} onValueChange={(v) => form.setValue("channel", v as z.infer<typeof schema>["channel"])}>
-                    <SelectTrigger className={selectTriggerClass}>
-                      <SelectValue placeholder="Canal" />
-                    </SelectTrigger>
-                    <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
-                      <SelectItem value="EMAIL" className={selectItemClass}>
-                        E-mail
-                      </SelectItem>
-                      <SelectItem value="WHATSAPP" className={selectItemClass}>
-                        WhatsApp
-                      </SelectItem>
-                      <SelectItem value="CHAT" className={selectItemClass}>
-                        Chat
-                      </SelectItem>
-                      <SelectItem value="PHONE" className={selectItemClass}>
-                        Telefone
-                      </SelectItem>
-                      <SelectItem value="API" className={selectItemClass}>
-                        API
-                      </SelectItem>
-                      <SelectItem value="MANUAL" className={selectItemClass}>
-                        Manual
-                      </SelectItem>
-                    </SelectContent>
-                  </Select>
-                </Field>
-                <Field>
-                  <FieldLabel>Fila</FieldLabel>
-                  <Select value={queueValue} onValueChange={(v) => form.setValue("queueName", v === "NONE" ? null : v)}>
-                    <SelectTrigger className={selectTriggerClass}>
-                      <SelectValue placeholder="Sem fila" />
-                    </SelectTrigger>
-                    <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
-                      <SelectItem value="NONE" className={selectItemClass}>
-                        Sem fila
-                      </SelectItem>
-                      {queues.map((q) => (
-                        <SelectItem key={q.id} value={q.name} className={selectItemClass}>
-                          {q.name}
-                        </SelectItem>
-                      ))}
-                    </SelectContent>
-                  </Select>
-                </Field>
+      <DialogContent className="max-w-4xl gap-0 overflow-hidden rounded-3xl border border-slate-200 bg-white p-0 shadow-2xl lg:max-w-5xl">
+        <div className="max-h-[88vh] overflow-y-auto">
+          <div className="space-y-5 px-6 py-7 sm:px-8 md:px-10">
+            <form className="space-y-6" onSubmit={form.handleSubmit(submit)}>
+              <div className="flex flex-col gap-4 border-b border-slate-200 pb-5 md:flex-row md:items-start md:justify-between">
+                <DialogHeader className="gap-1.5 p-0">
+                  <DialogTitle className="text-xl font-semibold text-neutral-900">Novo ticket</DialogTitle>
+                  <DialogDescription className="text-sm text-neutral-600">
+                    Preencha as informações básicas para abrir um chamado.
+                  </DialogDescription>
+                </DialogHeader>
+                <div className="flex justify-end md:min-w-[140px]">
+                  <Button
+                    type="submit"
+                    disabled={loading}
+                    className="inline-flex items-center gap-2 rounded-lg border border-black bg-black px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30 disabled:opacity-60"
+                  >
+                    {loading ? (
+                      <>
+                        <Spinner className="me-2" /> Criando…
+                      </>
+                    ) : (
+                      "Criar"
+                    )}
+                  </Button>
+                </div>
               </div>
-            </FieldGroup>
-          </FieldSet>
-          <div className="flex justify-end">
-            <Button
-              type="submit"
-              disabled={loading}
-              className="rounded-lg border border-black bg-black px-4 py-2 text-sm font-semibold text-white transition hover:bg-[#18181b]/85 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#18181b]/30 disabled:opacity-60"
-            >
-              {loading ? (
-                <>
-                  <Spinner className="me-2" /> Criando…
-                </>
-              ) : (
-                "Criar"
-              )}
-            </Button>
+              <FieldSet>
+                <FieldGroup className="lg:grid-cols-[minmax(0,1.2fr)_minmax(0,0.8fr)]">
+                  <div className="space-y-4">
+                    <Field>
+                      <FieldLabel htmlFor="subject">Assunto</FieldLabel>
+                      <Input id="subject" {...form.register("subject")} placeholder="Ex.: Erro 500 no portal" />
+                      <FieldError errors={form.formState.errors.subject ? [{ message: form.formState.errors.subject.message }] : []} />
+                    </Field>
+                    <Field>
+                      <FieldLabel htmlFor="summary">Resumo</FieldLabel>
+                      <textarea
+                        id="summary"
+                        className="min-h-[96px] w-full rounded-lg border border-slate-300 bg-background p-3 text-sm shadow-sm focus-visible:border-[#00d6eb] focus-visible:outline-none"
+                        {...form.register("summary")}
+                      />
+                    </Field>
+                    <Field>
+                      <FieldLabel>Descrição</FieldLabel>
+                      <RichTextEditor
+                        value={form.watch("description") || ""}
+                        onChange={(html) => form.setValue("description", html)}
+                        placeholder="Detalhe o problema, passos para reproduzir, links, etc."
+                      />
+                    </Field>
+                    <Field>
+                      <FieldLabel>Anexos</FieldLabel>
+                      <Dropzone
+                        onUploaded={(files) => setAttachments((prev) => [...prev, ...files])}
+                        className="space-y-1.5 [&>div:first-child]:rounded-2xl [&>div:first-child]:p-4 [&>div:first-child]:pb-5 [&>div:first-child]:shadow-sm"
+                      />
+                      <FieldError className="mt-1">Formatos comuns de imagem e documentos são aceitos.</FieldError>
+                    </Field>
+                  </div>
+                  <div className="space-y-4">
+                    <Field>
+                      <CategorySelectFields
+                        tenantId={DEFAULT_TENANT_ID}
+                        categoryId={categoryIdValue || null}
+                        subcategoryId={subcategoryIdValue || null}
+                        onCategoryChange={handleCategoryChange}
+                        onSubcategoryChange={handleSubcategoryChange}
+                        categoryLabel="Categoria primária"
+                        subcategoryLabel="Categoria secundária"
+                        layout="stacked"
+                      />
+                      {form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (
+                        <FieldError className="mt-1 space-y-0.5">
+                          <>
+                            {form.formState.errors.categoryId?.message ? <div>{form.formState.errors.categoryId?.message}</div> : null}
+                            {form.formState.errors.subcategoryId?.message ? <div>{form.formState.errors.subcategoryId?.message}</div> : null}
+                          </>
+                        </FieldError>
+                      ) : null}
+                    </Field>
+                    <div className="grid gap-3 sm:grid-cols-2 xl:grid-cols-1 xl:gap-4">
+                      <Field>
+                        <FieldLabel>Prioridade</FieldLabel>
+                        <Select value={priorityValue} onValueChange={(v) => form.setValue("priority", v as z.infer<typeof schema>["priority"])}>
+                          <SelectTrigger className={selectTriggerClass}>
+                            <SelectValue placeholder="Escolha a prioridade" />
+                          </SelectTrigger>
+                          <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
+                            {(["LOW", "MEDIUM", "HIGH", "URGENT"] as const).map((option) => (
+                              <SelectItem key={option} value={option} className={selectItemClass}>
+                                <span className="inline-flex items-center gap-2">
+                                  <PriorityIcon value={option} />
+                                  {priorityStyles[option].label}
+                                </span>
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                      <Field>
+                        <FieldLabel>Canal</FieldLabel>
+                        <Select value={channelValue} onValueChange={(v) => form.setValue("channel", v as z.infer<typeof schema>["channel"])}>
+                          <SelectTrigger className={selectTriggerClass}>
+                            <SelectValue placeholder="Canal" />
+                          </SelectTrigger>
+                          <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
+                            <SelectItem value="EMAIL" className={selectItemClass}>
+                              E-mail
+                            </SelectItem>
+                            <SelectItem value="WHATSAPP" className={selectItemClass}>
+                              WhatsApp
+                            </SelectItem>
+                            <SelectItem value="CHAT" className={selectItemClass}>
+                              Chat
+                            </SelectItem>
+                            <SelectItem value="PHONE" className={selectItemClass}>
+                              Telefone
+                            </SelectItem>
+                            <SelectItem value="API" className={selectItemClass}>
+                              API
+                            </SelectItem>
+                            <SelectItem value="MANUAL" className={selectItemClass}>
+                              Manual
+                            </SelectItem>
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                      <Field>
+                        <FieldLabel>Fila</FieldLabel>
+                        <Select value={queueValue} onValueChange={(v) => form.setValue("queueName", v === "NONE" ? null : v)}>
+                          <SelectTrigger className={selectTriggerClass}>
+                            <SelectValue placeholder="Sem fila" />
+                          </SelectTrigger>
+                          <SelectContent className="rounded-xl border border-slate-200 bg-white text-neutral-800 shadow-md">
+                            <SelectItem value="NONE" className={selectItemClass}>
+                              Sem fila
+                            </SelectItem>
+                            {queues.map((q) => (
+                              <SelectItem key={q.id} value={q.name} className={selectItemClass}>
+                                {q.name}
+                              </SelectItem>
+                            ))}
+                          </SelectContent>
+                        </Select>
+                      </Field>
+                    </div>
+                  </div>
+                </FieldGroup>
+              </FieldSet>
+            </form>
           </div>
-        </form>
+        </div>
       </DialogContent>
     </Dialog>
   )
diff --git a/web/src/components/tickets/ticket-comments.rich.tsx b/web/src/components/tickets/ticket-comments.rich.tsx
index c75f7e0..7855ffd 100644
--- a/web/src/components/tickets/ticket-comments.rich.tsx
+++ b/web/src/components/tickets/ticket-comments.rich.tsx
@@ -177,7 +177,7 @@ export function TicketComments({ ticket }: TicketCommentsProps) {
     <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
       <CardHeader className="px-4 pb-3">
         <CardTitle className="flex items-center gap-2 text-lg font-semibold text-neutral-900">
-          <IconMessage className="size-5 text-neutral-900" /> Conversa
+          <IconMessage className="size-5 text-neutral-900" /> Comentários
         </CardTitle>
       </CardHeader>
       <CardContent className="space-y-6 px-4 pb-6">
diff --git a/web/src/components/tickets/tickets-table.tsx b/web/src/components/tickets/tickets-table.tsx
index c168069..5f666ed 100644
--- a/web/src/components/tickets/tickets-table.tsx
+++ b/web/src/components/tickets/tickets-table.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import { useEffect, useState } from "react"
-import Link from "next/link"
+import { useRouter } from "next/navigation"
 import { formatDistanceToNow } from "date-fns"
 import { ptBR } from "date-fns/locale"
 
@@ -36,7 +36,8 @@ const cellClass = "px-6 py-5 align-top text-sm text-neutral-700 first:pl-8 last:
 const queueBadgeClass = "inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-neutral-700"
 const channelBadgeClass = "inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-50 px-3 py-1 text-xs font-semibold text-neutral-700"
 const categoryBadgeClass = "inline-flex items-center gap-1 rounded-full border border-[#00e8ff]/50 bg-[#00e8ff]/10 px-2.5 py-0.5 text-[11px] font-semibold text-[#02414d]"
-const tableRowClass = "group border-b border-slate-100 text-sm transition-colors hover:bg-slate-100/70 last:border-none"
+const tableRowClass =
+  "group border-b border-slate-100 text-sm transition-colors hover:bg-slate-100/70 last:border-none"
 
 function formatDuration(ms?: number) {
   if (!ms || ms <= 0) return "—"
@@ -88,6 +89,7 @@ export type TicketsTableProps = {
 
 export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
   const [now, setNow] = useState(() => Date.now())
+  const router = useRouter()
 
   useEffect(() => {
     const interval = setInterval(() => {
@@ -142,15 +144,24 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
           </TableHeader>
           <TableBody>
             {tickets.map((ticket) => (
-              <TableRow key={ticket.id} className={tableRowClass}>
+              <TableRow
+                key={ticket.id}
+                className={`${tableRowClass} cursor-pointer`}
+                role="link"
+                tabIndex={0}
+                onClick={() => router.push(`/tickets/${ticket.id}`)}
+                onKeyDown={(event) => {
+                  if (event.key === "Enter" || event.key === " ") {
+                    event.preventDefault()
+                    router.push(`/tickets/${ticket.id}`)
+                  }
+                }}
+              >
                 <TableCell className={cellClass}>
                   <div className="flex flex-col gap-1">
-                    <Link
-                      href={`/tickets/${ticket.id}`}
-                      className="font-semibold tracking-tight text-neutral-900 transition hover:text-neutral-700"
-                    >
+                    <span className="font-semibold tracking-tight text-neutral-900">
                       #{ticket.reference}
-                    </Link>
+                    </span>
                     <span className="text-xs text-neutral-500">
                       {ticket.queue ?? "Sem fila"}
                     </span>
@@ -158,12 +169,9 @@ export function TicketsTable({ tickets = ticketsMock }: TicketsTableProps) {
                 </TableCell>
                 <TableCell className={cellClass}>
                   <div className="flex flex-col gap-1.5">
-                    <Link
-                      href={`/tickets/${ticket.id}`}
-                      className="line-clamp-1 text-[15px] font-semibold text-neutral-900 transition hover:text-neutral-700"
-                    >
+                    <span className="line-clamp-1 text-[15px] font-semibold text-neutral-900">
                       {ticket.subject}
-                    </Link>
+                    </span>
                     <span className="line-clamp-1 text-sm text-neutral-600">
                       {ticket.summary ?? "Sem resumo"}
                     </span>