From 3ecbf7068a179736fd631bab108e4f177843249c Mon Sep 17 00:00:00 2001
From: Eliezer Steinbock <3090527+elie222@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:59:03 +0200
Subject: [PATCH] Add radio group match/skip for smart category

---
 apps/web/app/(app)/automation/RuleForm.tsx | 54 ++++++++++++----------
 apps/web/components/ui/radio-group.tsx     | 44 ++++++++++++++++++
 apps/web/package.json                      |  1 +
 apps/web/utils/condition.ts                |  2 +-
 pnpm-lock.yaml                             | 46 +++++++++++++-----
 5 files changed, 110 insertions(+), 37 deletions(-)
 create mode 100644 apps/web/components/ui/radio-group.tsx

diff --git a/apps/web/app/(app)/automation/RuleForm.tsx b/apps/web/app/(app)/automation/RuleForm.tsx
index 9d462495..4987ad64 100644
--- a/apps/web/app/(app)/automation/RuleForm.tsx
+++ b/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>
diff --git a/apps/web/components/ui/radio-group.tsx b/apps/web/components/ui/radio-group.tsx
new file mode 100644
index 00000000..5510df92
--- /dev/null
+++ b/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 };
diff --git a/apps/web/package.json b/apps/web/package.json
index 23362e58..e79b5fb7 100644
--- a/apps/web/package.json
+++ b/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",
diff --git a/apps/web/utils/condition.ts b/apps/web/utils/condition.ts
index ae2e2e23..6b58c3c1 100644
--- a/apps/web/utils/condition.ts
+++ b/apps/web/utils/condition.ts
@@ -114,7 +114,7 @@ const staticEmptyCondition = {
 
 const categoryEmptyCondition = {
   type: RuleType.CATEGORY,
-  categoryFilterType: null,
+  categoryFilterType: CategoryFilterType.INCLUDE,
   categoryFilters: null,
 };
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 96f972b6..30cbaa31 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -185,6 +185,9 @@ importers:
       '@radix-ui/react-popover':
         specifier: ^1.1.3
         version: 1.1.3(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-radio-group':
+        specifier: ^1.2.2
+        version: 1.2.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
       '@radix-ui/react-scroll-area':
         specifier: ^1.2.2
         version: 1.2.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
@@ -471,9 +474,6 @@ importers:
       autoprefixer:
         specifier: 10.4.20
         version: 10.4.20(postcss@8.4.49)
-      cross-env:
-        specifier: ^7.0.3
-        version: 7.0.3
       dotenv:
         specifier: ^16.4.7
         version: 16.4.7
@@ -3339,6 +3339,19 @@ packages:
       '@types/react-dom':
         optional: true
 
+  '@radix-ui/react-radio-group@1.2.2':
+    resolution: {integrity: sha512-E0MLLGfOP0l8P/NxgVzfXJ8w3Ch8cdO6UDzJfDChu4EJDy+/WdO5LqpdY8PYnCErkmZH3gZhDL1K7kQ41fAHuQ==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
   '@radix-ui/react-roving-focus@1.1.1':
     resolution: {integrity: sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==}
     peerDependencies:
@@ -6205,11 +6218,6 @@ packages:
   crisp-sdk-web@1.0.25:
     resolution: {integrity: sha512-CWTHFFeHRV0oqiXoPh/aIAKhFs6xcIM4NenGPnClAMCZUDQgQsF1OWmZWmnVNjJriXUmWRgDfeUxcxygS0dCRA==}
 
-  cross-env@7.0.3:
-    resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
-    engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
-    hasBin: true
-
   cross-spawn@7.0.3:
     resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==}
     engines: {node: '>= 8'}
@@ -14892,6 +14900,24 @@ snapshots:
       '@types/react': 18.3.12
       '@types/react-dom': 18.3.1
 
+  '@radix-ui/react-radio-group@1.2.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
+    dependencies:
+      '@radix-ui/primitive': 1.1.1
+      '@radix-ui/react-compose-refs': 1.1.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-context': 1.1.1(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-direction': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-presence': 1.1.2(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-primitive': 2.0.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-roving-focus': 1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)
+      '@radix-ui/react-use-controllable-state': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-use-previous': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      '@radix-ui/react-use-size': 1.1.0(@types/react@18.3.12)(react@18.3.1)
+      react: 18.3.1
+      react-dom: 18.3.1(react@18.3.1)
+    optionalDependencies:
+      '@types/react': 18.3.12
+      '@types/react-dom': 18.3.1
+
   '@radix-ui/react-roving-focus@1.1.1(@types/react-dom@18.3.1)(@types/react@18.3.12)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)':
     dependencies:
       '@radix-ui/primitive': 1.1.1
@@ -18408,10 +18434,6 @@ snapshots:
 
   crisp-sdk-web@1.0.25: {}
 
-  cross-env@7.0.3:
-    dependencies:
-      cross-spawn: 7.0.6
-
   cross-spawn@7.0.3:
     dependencies:
       path-key: 3.1.1