From 92954b45c707c9792ecb9589bdd65a61330accca Mon Sep 17 00:00:00 2001
From: esdrasrenan <esdras@renan.dev>
Date: Mon, 15 Dec 2025 22:32:39 -0300
Subject: [PATCH] feat(automations): agrupa subcategorias por categoria no
 select
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Melhora UX do select de subcategorias nas condicoes de automacao,
agrupando visualmente as subcategorias dentro de suas respectivas
categorias usando SelectGroup e SelectLabel.

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

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 .../automations/automation-editor-dialog.tsx  | 33 +++++++++----------
 1 file changed, 16 insertions(+), 17 deletions(-)

diff --git a/src/components/automations/automation-editor-dialog.tsx b/src/components/automations/automation-editor-dialog.tsx
index e7d9f6e..063e21a 100644
--- a/src/components/automations/automation-editor-dialog.tsx
+++ b/src/components/automations/automation-editor-dialog.tsx
@@ -15,7 +15,7 @@ import { Checkbox } from "@/components/ui/checkbox"
 import { DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
 import { Input } from "@/components/ui/input"
 import { Label } from "@/components/ui/label"
-import { Select, SelectContent, SelectEmptyState, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Select, SelectContent, SelectEmptyState, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select"
 import { Separator } from "@/components/ui/separator"
 import { Switch } from "@/components/ui/switch"
 import { Textarea } from "@/components/ui/textarea"
@@ -295,14 +295,6 @@ export function AutomationEditorDialog({
     setSaving(false)
   }, [initialState])
 
-  const subcategoryOptions = useMemo(() => {
-    const list =
-      categories?.flatMap((cat) =>
-        cat.secondary.map((sub) => ({ id: sub.id, name: sub.name, categoryId: sub.categoryId }))
-      ) ?? []
-    return list.sort((a, b) => a.name.localeCompare(b.name, "pt-BR"))
-  }, [categories])
-
   const handleAddCondition = () => {
     setConditions((prev) => [
       ...prev,
@@ -767,19 +759,26 @@ export function AutomationEditorDialog({
                         <SelectTrigger className="bg-white">
                           <SelectValue placeholder="Selecione" />
                         </SelectTrigger>
-                        <SelectContent className="rounded-xl">
-                          {subcategoryOptions.length === 0 ? (
+                        <SelectContent className="max-h-72 rounded-xl">
+                          {(categories ?? []).length === 0 ? (
                             <SelectEmptyState
-                              message="Nenhuma subcategoria disponível"
+                              message="Nenhuma subcategoria disponivel"
                               createLabel="Gerenciar categorias"
                               createHref="/settings/categories"
                             />
                           ) : (
-                            subcategoryOptions.map((sub) => (
-                              <SelectItem key={sub.id} value={sub.id}>
-                                {sub.name}
-                              </SelectItem>
-                            ))
+                            (categories ?? []).map((cat) =>
+                              cat.secondary.length > 0 ? (
+                                <SelectGroup key={cat.id}>
+                                  <SelectLabel className="font-semibold text-neutral-900">{cat.name}</SelectLabel>
+                                  {cat.secondary.map((sub) => (
+                                    <SelectItem key={sub.id} value={sub.id} className="pl-4">
+                                      {sub.name}
+                                    </SelectItem>
+                                  ))}
+                                </SelectGroup>
+                              ) : null
+                            )
                           )}
                         </SelectContent>
                       </Select>