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

@@ -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;

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}

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,14 +151,36 @@ export function NewTicketDialog() {
           Novo ticket
         </Button>
       </DialogTrigger>
-      <DialogContent>
+      <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">
-        <DialogHeader>
+        <div className="max-h-[88vh] overflow-y-auto">
-          <DialogTitle>Novo ticket</DialogTitle>
+          <div className="space-y-5 px-6 py-7 sm:px-8 md:px-10">
-          <DialogDescription>Preencha as informações básicas para abrir um chamado.</DialogDescription>
+            <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>
-        <form className="space-y-4" onSubmit={form.handleSubmit(submit)}>
+                <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>
               <FieldSet>
-            <FieldGroup>
+                <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" />
@@ -144,7 +188,11 @@ export function NewTicketDialog() {
                     </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")} />
+                      <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>
@@ -156,20 +204,24 @@ export function NewTicketDialog() {
                     </Field>
                     <Field>
                       <FieldLabel>Anexos</FieldLabel>
-                <Dropzone onUploaded={(files) => setAttachments((prev) => [...prev, ...files])} />
+                      <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={(value) => {
+                        onCategoryChange={handleCategoryChange}
-                    form.setValue("categoryId", value, { shouldDirty: true, shouldValidate: true })
+                        onSubcategoryChange={handleSubcategoryChange}
-                  }}
+                        categoryLabel="Categoria primária"
-                  onSubcategoryChange={(value) => {
+                        subcategoryLabel="Categoria secundária"
-                    form.setValue("subcategoryId", value, { shouldDirty: true, shouldValidate: true })
+                        layout="stacked"
-                  }}
                       />
                       {form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (
                         <FieldError className="mt-1 space-y-0.5">
@@ -180,21 +232,16 @@ export function NewTicketDialog() {
                         </FieldError>
                       ) : null}
                     </Field>
-              <div className="grid gap-3 sm:grid-cols-3">
+                    <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={cn(priorityTriggerClass, "w-full justify-between")}>
+                          <SelectTrigger className={selectTriggerClass}>
-                      <SelectValue>
+                            <SelectValue placeholder="Escolha a prioridade" />
-                        <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}>
+                              <SelectItem key={option} value={option} className={selectItemClass}>
                                 <span className="inline-flex items-center gap-2">
                                   <PriorityIcon value={option} />
                                   {priorityStyles[option].label}
@@ -251,24 +298,12 @@ export function NewTicketDialog() {
                         </Select>
                       </Field>
                     </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>
-          </div>
             </form>
+          </div>
+        </div>
       </DialogContent>
     </Dialog>
   )

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">

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
+                    <span className="font-semibold tracking-tight text-neutral-900">
-                      href={`/tickets/${ticket.id}`}
-                      className="font-semibold tracking-tight text-neutral-900 transition hover:text-neutral-700"
-                    >
                       #{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
+                    <span className="line-clamp-1 text-[15px] font-semibold text-neutral-900">
-                      href={`/tickets/${ticket.id}`}
-                      className="line-clamp-1 text-[15px] font-semibold text-neutral-900 transition hover:text-neutral-700"
-                    >
                       {ticket.subject}
-                    </Link>
+                    </span>
                     <span className="line-clamp-1 text-sm text-neutral-600">
                       {ticket.summary ?? "Sem resumo"}
                     </span>