Add radio group match/skip for smart category

apps/web/app/(app)/automation/RuleForm.tsx

@@ -28,7 +28,7 @@ import {
   SectionDescription,
   TypographyH3,
 } from "@/components/Typography";
-import { ActionType, CategoryFilterType, RuleType } from "@prisma/client";
+import { ActionType, type CategoryFilterType, RuleType } from "@prisma/client";
 import { createRuleAction, updateRuleAction } from "@/utils/actions/rule";
 import {
   type CreateRuleBody,
@@ -57,6 +57,7 @@ import { useCategories } from "@/hooks/useCategories";
 import { hasVariables } from "@/utils/template";
 import { getEmptyConditions } from "@/utils/condition";
 import { AlertError } from "@/components/Alert";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 
 export function RuleForm({ rule }: { rule: CreateRuleBody & { id?: string } }) {
   const {
@@ -311,6 +312,34 @@ export function RuleForm({ rule }: { rule: CreateRuleBody & { id?: string } }) {
 
                 {watch(`conditions.${index}.type`) === RuleType.CATEGORY && (
                   <>
+                    <div className="flex items-center gap-4">
+                      <RadioGroup
+                        defaultValue="include"
+                        value={
+                          watch(`conditions.${index}.categoryFilterType`) ||
+                          undefined
+                        }
+                        onValueChange={(value) =>
+                          setValue(
+                            `conditions.${index}.categoryFilterType`,
+                            value as CategoryFilterType,
+                          )
+                        }
+                        className="flex gap-6"
+                      >
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="include" id="include" />
+                          <Label name="include" label="Match" />
+                        </div>
+                        <div className="flex items-center space-x-2">
+                          <RadioGroupItem value="exclude" id="exclude" />
+                          <Label name="exclude" label="Skip" />
+                        </div>
+                      </RadioGroup>
+
+                      <TooltipExplanation text="This stops the AI from applying this rule to emails that don't match your criteria." />
+                    </div>
+
                     <LoadingContent
                       loading={categoriesLoading}
                       error={categoriesError}
@@ -355,29 +384,6 @@ export function RuleForm({ rule }: { rule: CreateRuleBody & { id?: string } }) {
                         <ExternalLinkIcon className="ml-1.5 size-4" />
                       </Link>
                     </Button>
-
-                    <Select
-                      label="Filter type"
-                      tooltipText="This stops the AI from applying this rule to emails that don't match your criteria."
-                      options={[
-                        {
-                          label: "Include",
-                          value: CategoryFilterType.INCLUDE,
-                        },
-                        {
-                          label: "Exclude",
-                          value: CategoryFilterType.EXCLUDE,
-                        },
-                      ]}
-                      {...register(`conditions.${index}.categoryFilterType`)}
-                      error={
-                        (
-                          errors.conditions?.[index] as {
-                            categoryFilterType?: FieldError;
-                          }
-                        )?.categoryFilterType
-                      }
-                    />
                   </>
                 )}
               </div>

apps/web/components/ui/radio-group.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import * as React from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+
+import { cn } from "@/utils";
+
+const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Root
+      className={cn("grid gap-2", className)}
+      {...props}
+      ref={ref}
+    />
+  );
+});
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+
+const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>
+>(({ className, ...props }, ref) => {
+  return (
+    <RadioGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "aspect-square h-4 w-4 rounded-full border border-slate-200 border-slate-900 text-slate-900 ring-offset-white focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-50 dark:border-slate-800 dark:text-slate-50 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300",
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+        <Circle className="h-2.5 w-2.5 fill-current text-current" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+});
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+export { RadioGroup, RadioGroupItem };

apps/web/package.json

@@ -45,6 +45,7 @@
     "@radix-ui/react-label": "^2.1.1",
     "@radix-ui/react-navigation-menu": "^1.2.2",
     "@radix-ui/react-popover": "^1.1.3",
+    "@radix-ui/react-radio-group": "^1.2.2",
     "@radix-ui/react-scroll-area": "^1.2.2",
     "@radix-ui/react-select": "^2.1.3",
     "@radix-ui/react-separator": "^1.1.1",

apps/web/utils/condition.ts

@@ -114,7 +114,7 @@ const staticEmptyCondition = {
 
 const categoryEmptyCondition = {
   type: RuleType.CATEGORY,
-  categoryFilterType: null,
+  categoryFilterType: CategoryFilterType.INCLUDE,
   categoryFilters: null,
 };