feat(ui): melhora UX do formulario de tickets

- Adiciona skeleton loading no formulario de novo chamado do portal
- Remove texto confuso do tipo de solicitacao padrao
- Padroniza estilo dos labels Categoria/Subcategoria com os demais campos
- Move botao "Criar" do header para parte inferior do modal na web

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/api/profile/avatar/route.ts

@@ -5,7 +5,6 @@
  */
 
 import { NextRequest, NextResponse } from "next/server"
-import { headers } from "next/headers"
 
 import { getServerSession } from "@/lib/auth-server"
 import { auth } from "@/lib/auth"
@@ -18,6 +17,23 @@ import type { Id } from "@/convex/_generated/dataModel"
 const MAX_FILE_SIZE = 5 * 1024 * 1024 // 5MB
 const ALLOWED_TYPES = ["image/jpeg", "image/png", "image/webp", "image/gif"]
 
+function extractSetCookies(headers: Headers) {
+  const headersWithGetSetCookie = headers as Headers & { getSetCookie?: () => string[] | undefined }
+  let setCookieHeaders =
+    typeof headersWithGetSetCookie.getSetCookie === "function"
+      ? headersWithGetSetCookie.getSetCookie() ?? []
+      : []
+
+  if (setCookieHeaders.length === 0) {
+    const single = headers.get("set-cookie")
+    if (single) {
+      setCookieHeaders = [single]
+    }
+  }
+
+  return setCookieHeaders
+}
+
 export async function POST(request: NextRequest) {
   try {
     const session = await getServerSession()
@@ -75,15 +91,23 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ error: "Erro ao obter URL do avatar" }, { status: 500 })
     }
 
-    // Usa updateUser do Better Auth para invalidar o cache da sessao
-    const headerList = await headers()
-    const updateResult = await auth.api.updateUser({
-      headers: headerList,
+    // Atualiza no Better Auth e propaga Set-Cookie para invalidar o cookieCache da sessao (avatarUrl, etc)
+    let authSetCookies: string[] = []
+    try {
+      const updateResponse = await auth.api.updateUser({
+        request,
+        headers: request.headers,
         body: { avatarUrl },
+        asResponse: true,
       })
 
-    if (!updateResult) {
-      // Fallback: atualiza diretamente no Prisma
+      if (!updateResponse?.ok) {
+        throw new Error(`Falha ao atualizar usuario no Better Auth (${updateResponse?.status ?? "sem status"})`)
+      }
+
+      authSetCookies = extractSetCookies(updateResponse.headers)
+    } catch (error) {
+      console.warn("[profile/avatar] Falha ao atualizar sessao via Better Auth, usando fallback Prisma:", error)
       await prisma.authUser.update({
         where: { id: session.user.id },
         data: { avatarUrl },
@@ -102,17 +126,23 @@ export async function POST(request: NextRequest) {
       console.warn("[profile/avatar] Falha ao sincronizar avatar no Convex:", error)
     }
 
-    return NextResponse.json({
+    const response = NextResponse.json({
       success: true,
       avatarUrl,
     })
+
+    for (const cookie of authSetCookies) {
+      response.headers.append("set-cookie", cookie)
+    }
+
+    return response
   } catch (error) {
     console.error("[profile/avatar] Erro:", error)
     return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 })
   }
 }
 
-export async function DELETE() {
+export async function DELETE(request: NextRequest) {
   try {
     const session = await getServerSession()
 
@@ -120,15 +150,23 @@ export async function DELETE() {
       return NextResponse.json({ error: "Não autorizado" }, { status: 401 })
     }
 
-    // Usa updateUser do Better Auth para invalidar o cache da sessao
-    const headerList = await headers()
-    const updateResult = await auth.api.updateUser({
-      headers: headerList,
+    // Atualiza no Better Auth e propaga Set-Cookie para invalidar o cookieCache da sessao (avatarUrl, etc)
+    let authSetCookies: string[] = []
+    try {
+      const updateResponse = await auth.api.updateUser({
+        request,
+        headers: request.headers,
         body: { avatarUrl: null },
+        asResponse: true,
       })
 
-    if (!updateResult) {
-      // Fallback: atualiza diretamente no Prisma
+      if (!updateResponse?.ok) {
+        throw new Error(`Falha ao atualizar usuario no Better Auth (${updateResponse?.status ?? "sem status"})`)
+      }
+
+      authSetCookies = extractSetCookies(updateResponse.headers)
+    } catch (error) {
+      console.warn("[profile/avatar] Falha ao atualizar sessao via Better Auth, usando fallback Prisma:", error)
       await prisma.authUser.update({
         where: { id: session.user.id },
         data: { avatarUrl: null },
@@ -148,10 +186,16 @@ export async function DELETE() {
       console.warn("[profile/avatar] Falha ao sincronizar remoção de avatar no Convex:", error)
     }
 
-    return NextResponse.json({
+    const response = NextResponse.json({
       success: true,
       message: "Foto removida com sucesso",
     })
+
+    for (const cookie of authSetCookies) {
+      response.headers.append("set-cookie", cookie)
+    }
+
+    return response
   } catch (error) {
     console.error("[profile/avatar] Erro ao remover:", error)
     return NextResponse.json({ error: "Erro interno do servidor" }, { status: 500 })

src/components/portal/portal-ticket-form.tsx

@@ -13,6 +13,7 @@ import type { TicketPriority } from "@/lib/schemas/ticket"
 import { sanitizeEditorHtml } from "@/components/ui/rich-text-editor"
 import { useAuth } from "@/lib/auth-client"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Skeleton } from "@/components/ui/skeleton"
 import { Input } from "@/components/ui/input"
 import { Button } from "@/components/ui/button"
 import { CategorySelectFields } from "@/components/tickets/category-select"
@@ -144,6 +145,7 @@ export function PortalTicketForm() {
     return true
   }, [subject, description, categoryId, subcategoryId, machineInactive, customFieldsInvalid])
   const isViewerReady = Boolean(viewerId)
+  const isFormLoading = machineContextLoading || (viewerId && formsRemote === undefined)
   const viewerErrorMessage = useMemo(() => {
     if (!machineContextError) return null
     const suffix = machineContextError.status ? ` (status ${machineContextError.status})` : ""
@@ -239,6 +241,51 @@ export function PortalTicketForm() {
     }
   }
 
+  if (isFormLoading) {
+    return (
+      <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
+        <CardHeader className="px-5 py-5">
+          <CardTitle className="text-xl font-semibold text-neutral-900">Abrir novo chamado</CardTitle>
+        </CardHeader>
+        <CardContent className="space-y-6 px-5 pb-6">
+          <div className="space-y-2 rounded-xl border border-slate-200 bg-slate-50 px-4 py-4">
+            <Skeleton className="h-4 w-32" />
+            <Skeleton className="h-9 w-full rounded-lg" />
+            <Skeleton className="h-3 w-48" />
+          </div>
+          <div className="space-y-3">
+            <div className="space-y-1">
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-10 w-full rounded-lg" />
+            </div>
+            <div className="space-y-1">
+              <Skeleton className="h-4 w-16" />
+              <Skeleton className="h-32 w-full rounded-2xl" />
+            </div>
+          </div>
+          <div className="space-y-4">
+            <div className="space-y-1">
+              <Skeleton className="h-4 w-20" />
+              <Skeleton className="h-10 w-full rounded-lg" />
+            </div>
+            <div className="space-y-1">
+              <Skeleton className="h-4 w-24" />
+              <Skeleton className="h-10 w-full rounded-lg" />
+            </div>
+          </div>
+          <div className="space-y-1">
+            <Skeleton className="h-4 w-28" />
+            <Skeleton className="h-24 w-full rounded-xl" />
+          </div>
+          <div className="flex justify-end gap-3">
+            <Skeleton className="h-10 w-24 rounded-full" />
+            <Skeleton className="h-10 w-36 rounded-full" />
+          </div>
+        </CardContent>
+      </Card>
+    )
+  }
+
   return (
     <Card className="rounded-2xl border border-slate-200 bg-white shadow-sm">
       <CardHeader className="px-5 py-5">
@@ -279,7 +326,7 @@ export function PortalTicketForm() {
                   ))}
                 </SelectContent>
               </Select>
-              {selectedForm?.description ? (
+              {selectedForm?.description && selectedFormKey !== "default" ? (
                 <p className="text-xs text-neutral-500">{selectedForm.description}</p>
               ) : null}
             </div>
@@ -322,8 +369,8 @@ export function PortalTicketForm() {
               onCategoryChange={setCategoryId}
               onSubcategoryChange={setSubcategoryId}
               layout="stacked"
-              categoryLabel="Categoria *"
-              subcategoryLabel="Subcategoria *"
+              categoryRequired
+              subcategoryRequired
               secondaryEmptyLabel="Selecione uma categoria"
             />
             {selectedForm.fields.length > 0 ? (

src/components/tickets/category-select.tsx

@@ -23,6 +23,8 @@ interface CategorySelectProps {
   disabled?: boolean
   categoryLabel?: string
   subcategoryLabel?: string
+  categoryRequired?: boolean
+  subcategoryRequired?: boolean
   className?: string
   secondaryEmptyLabel?: string
   layout?: "grid" | "stacked"
@@ -41,9 +43,11 @@ export function CategorySelectFields({
   onSubcategoryChange,
   autoSelectFirst = true,
   disabled = false,
-  categoryLabel = "Primária",
-  subcategoryLabel = "Secundária",
-  secondaryEmptyLabel = "Selecione uma categoria primária",
+  categoryLabel = "Categoria",
+  subcategoryLabel = "Subcategoria",
+  categoryRequired = false,
+  subcategoryRequired = false,
+  secondaryEmptyLabel = "Selecione uma categoria",
   className,
   layout = "grid",
 }: CategorySelectProps) {
@@ -80,9 +84,11 @@ export function CategorySelectFields({
 
   return (
     <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}
+      <div className="space-y-1">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-neutral-800">
+          <IconFolders className="size-4 text-neutral-500" />
+          {categoryLabel}
+          {categoryRequired ? <span className="text-red-500">*</span> : null}
         </label>
         <Select
           disabled={disabled || isLoading || categories.length === 0}
@@ -107,9 +113,11 @@ export function CategorySelectFields({
           </SelectContent>
         </Select>
       </div>
-      <div className="space-y-1.5">
-        <label className="flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-neutral-500">
-          <IconFolder className="size-3.5" /> {subcategoryLabel}
+      <div className="space-y-1">
+        <label className="flex items-center gap-1.5 text-sm font-medium text-neutral-800">
+          <IconFolder className="size-4 text-neutral-500" />
+          {subcategoryLabel}
+          {subcategoryRequired ? <span className="text-red-500">*</span> : null}
         </label>
         <Select
           disabled={disabled || secondaryOptions.length === 0}

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

@@ -776,28 +776,13 @@ export function NewTicketDialog({
         <div className="max-h-[88vh] overflow-y-auto">
           <div className="space-y-5 px-6 pt-7 pb-12 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">
+              <div className="border-b border-slate-200 pb-5">
                 <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>
               {forms.length > 1 ? (
                 <div className="rounded-xl border border-slate-200 bg-slate-50 px-4 py-4">
@@ -1023,8 +1008,8 @@ export function NewTicketDialog({
                         subcategoryId={subcategoryIdValue || null}
                         onCategoryChange={handleCategoryChange}
                         onSubcategoryChange={handleSubcategoryChange}
-                        categoryLabel="Categoria primária *"
-                        subcategoryLabel="Categoria secundária *"
+                        categoryRequired
+                        subcategoryRequired
                         layout="stacked"
                       />
                       {form.formState.errors.categoryId?.message || form.formState.errors.subcategoryId?.message ? (
@@ -1520,6 +1505,22 @@ export function NewTicketDialog({
                   </div>
                 </div>
               </FieldSet>
+
+              <div className="flex justify-end border-t border-slate-200 pt-5">
+                <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>
             </form>
           </div>
         </div>