feat(automations): agrupa subcategorias por categoria no select

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>
This commit is contained in:
esdrasrenan 2025-12-15 22:32:39 -03:00
parent 022e1f63ba
commit 92954b45c7

View file

@ -15,7 +15,7 @@ import { Checkbox } from "@/components/ui/checkbox"
import { DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog" import { DialogClose, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Input } from "@/components/ui/input" import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label" 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 { Separator } from "@/components/ui/separator"
import { Switch } from "@/components/ui/switch" import { Switch } from "@/components/ui/switch"
import { Textarea } from "@/components/ui/textarea" import { Textarea } from "@/components/ui/textarea"
@ -295,14 +295,6 @@ export function AutomationEditorDialog({
setSaving(false) setSaving(false)
}, [initialState]) }, [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 = () => { const handleAddCondition = () => {
setConditions((prev) => [ setConditions((prev) => [
...prev, ...prev,
@ -767,19 +759,26 @@ export function AutomationEditorDialog({
<SelectTrigger className="bg-white"> <SelectTrigger className="bg-white">
<SelectValue placeholder="Selecione" /> <SelectValue placeholder="Selecione" />
</SelectTrigger> </SelectTrigger>
<SelectContent className="rounded-xl"> <SelectContent className="max-h-72 rounded-xl">
{subcategoryOptions.length === 0 ? ( {(categories ?? []).length === 0 ? (
<SelectEmptyState <SelectEmptyState
message="Nenhuma subcategoria disponível" message="Nenhuma subcategoria disponivel"
createLabel="Gerenciar categorias" createLabel="Gerenciar categorias"
createHref="/settings/categories" createHref="/settings/categories"
/> />
) : ( ) : (
subcategoryOptions.map((sub) => ( (categories ?? []).map((cat) =>
<SelectItem key={sub.id} value={sub.id}> cat.secondary.length > 0 ? (
{sub.name} <SelectGroup key={cat.id}>
</SelectItem> <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> </SelectContent>
</Select> </Select>