Easily attach rules to categories

apps/web/app/(app)/automation/rule/create/page.tsx

@@ -1,12 +1,18 @@
 import { RuleForm } from "@/app/(app)/automation/RuleForm";
 import { examples } from "@/app/(app)/automation/create/examples";
 import { getEmptyCondition } from "@/utils/condition";
-import type { RuleType } from "@prisma/client";
+import { ActionType, type RuleType } from "@prisma/client";
 
 export default function CreateRulePage({
   searchParams,
 }: {
-  searchParams: { example?: string; groupId?: string; tab?: RuleType };
+  searchParams: {
+    example?: string;
+    groupId?: string;
+    tab?: RuleType;
+    categoryId?: string;
+    label?: string;
+  };
 }) {
   const rule =
     searchParams.example &&
@@ -17,11 +23,27 @@ export default function CreateRulePage({
       <RuleForm
         rule={
           rule || {
-            name: "",
-            actions: [],
+            name: searchParams.label ? `Label ${searchParams.label}` : "",
+            actions: searchParams.label
+              ? [
+                  {
+                    type: ActionType.LABEL,
+                    label: {
+                      value: searchParams.label,
+                    },
+                  },
+                ]
+              : [],
             conditions: searchParams.tab
-              ? [getEmptyCondition(searchParams.tab, searchParams.groupId)]
+              ? [
+                  getEmptyCondition(
+                    searchParams.tab,
+                    searchParams.groupId,
+                    searchParams.categoryId,
+                  ),
+                ]
               : [],
+            automate: true,
           }
         }
       />

apps/web/components/GroupedTable.tsx

@@ -12,9 +12,9 @@ import {
   type ColumnDef,
   flexRender,
 } from "@tanstack/react-table";
-import { ArchiveIcon, ChevronRight, PencilIcon } from "lucide-react";
+import { ArchiveIcon, ChevronRight, PencilIcon, PlusIcon } from "lucide-react";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
-import type { Category } from "@prisma/client";
+import { RuleType, type Category } from "@prisma/client";
 import { EmailCell } from "@/components/EmailCell";
 import { useThreads } from "@/hooks/useThreads";
 import { Skeleton } from "@/components/ui/skeleton";
@@ -76,6 +76,19 @@ export function GroupedTable({
     return grouped;
   }, [emailGroups, categories]);
 
+  // for id lookup
+  const categoryMap = useMemo(
+    () =>
+      categories.reduce<Record<string, Pick<Category, "id">>>(
+        (acc, category) => {
+          acc[category.name] = category;
+          return acc;
+        },
+        {},
+      ),
+    [categories],
+  );
+
   const [expanded, setExpanded] = useQueryState("expanded", {
     parse: (value) => value.split(","),
     serialize: (value) => value.join(","),
@@ -193,6 +206,7 @@ export function GroupedTable({
               <Fragment key={category}>
                 <GroupRow
                   category={category}
+                  categoryId={categoryMap[category].id}
                   count={senders.length}
                   isExpanded={!!isCategoryExpanded}
                   onToggle={() => {
@@ -314,13 +328,15 @@ export function SendersTable({
 
 function GroupRow({
   category,
+  categoryId,
   count,
   isExpanded,
   onToggle,
   onArchiveAll,
   onEditCategory,
 }: {
   category: string;
+  categoryId: string;
   count: number;
   isExpanded: boolean;
   onToggle: () => void;
@@ -350,6 +366,15 @@ function GroupRow({
           <PencilIcon className="size-4" />
           <span className="sr-only">Edit</span>
         </Button>
+        <Button variant="outline" size="xs" asChild>
+          <Link
+            href={`/automation/rule/create?tab=${RuleType.CATEGORY}&categoryId=${categoryId}&label=${category}`}
+            target="_blank"
+          >
+            <PlusIcon className="mr-2 size-4" />
+            Attach rule
+          </Link>
+        </Button>
         <Button variant="outline" size="xs" onClick={onArchiveAll}>
           <ArchiveIcon className="mr-2 size-4" />
           Archive all

apps/web/utils/condition.ts

@@ -130,6 +130,7 @@ export function getEmptyConditions(): ZodCondition[] {
 export function getEmptyCondition(
   type: RuleType,
   groupId?: string,
+  category?: string,
 ): ZodCondition {
   switch (type) {
     case RuleType.AI:
@@ -142,7 +143,11 @@ export function getEmptyCondition(
     case RuleType.STATIC:
       return staticEmptyCondition;
     case RuleType.CATEGORY:
-      return categoryEmptyCondition;
+      return {
+        ...categoryEmptyCondition,
+        categoryFilters: category ? [category] : null,
+        categoryFilterType: CategoryFilterType.INCLUDE,
+      };
     default:
       throw new Error(`Invalid condition type: ${type}`);
   }
@@ -251,7 +256,7 @@ export function conditionsToString(rule: RuleConditions) {
         .slice(0, max)
         .map((category) => category.name)
         .join(", ") + (categoryFilters.length > max ? ", ..." : "");
-    result += `${categoryFilterTypeToString(rule.categoryFilterType)} ${categoryFilters.length === 1 ? "category" : "categories"}: ${categories}`;
+    result += `${rule.categoryFilterType === CategoryFilterType.EXCLUDE ? "Exclude " : ""}${categoryFilters.length === 1 ? "Category" : "Categories"}: ${categories}`;
   }
 
   return result;