Rules improvements

apps/web/app/(app)/[emailAccountId]/assistant/RuleSectionCard.tsx

@@ -0,0 +1,37 @@
+import { Card } from "@/components/ui/card";
+import { TypographyH3 } from "@/components/Typography";
+import { cn } from "@/utils";
+
+export function RuleSectionCard({
+  icon: Icon,
+  color,
+  title,
+  errors,
+  children,
+}: {
+  icon: React.ComponentType<{ className?: string }>;
+  color: "blue" | "green";
+  title: string;
+  errors?: React.ReactNode;
+  children: React.ReactNode;
+}) {
+  return (
+    <Card className="rounded-lg p-4">
+      <div>
+        <div className="flex items-center gap-3">
+          <Icon
+            className={cn("size-5", {
+              "text-blue-600 dark:text-blue-400": color === "blue",
+              "text-green-600 dark:text-green-400": color === "green",
+            })}
+          />
+          <TypographyH3 className="text-base">{title}</TypographyH3>
+        </div>
+
+        {errors && <div className="mt-2">{errors}</div>}
+
+        {children && <div className="mt-4 space-y-2">{children}</div>}
+      </div>
+    </Card>
+  );
+}

apps/web/app/(app)/[emailAccountId]/assistant/RuleStep.tsx

@@ -0,0 +1,233 @@
+import { Button } from "@/components/ui/button";
+import {
+  TrashIcon,
+  MoreHorizontalIcon,
+  ClockIcon,
+  SparklesIcon,
+  PenLineIcon,
+} from "lucide-react";
+import { cn } from "@/utils";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+
+function DeleteButton({
+  onClick,
+  ariaLabel,
+}: {
+  onClick: () => void;
+  ariaLabel: string;
+}) {
+  return (
+    <Button
+      size="icon"
+      variant="ghost"
+      className="size-8 mt-1"
+      aria-label={ariaLabel}
+      onClick={onClick}
+    >
+      <TrashIcon className="size-4 text-muted-foreground" />
+    </Button>
+  );
+}
+
+function OptionsMenu({
+  onAddDelay,
+  onRemoveDelay,
+  hasDelay,
+  onUsePrompt,
+  onUseLabel,
+  isPromptMode,
+  onSetManually,
+  onUseAiDraft,
+  isManualMode,
+}: {
+  onAddDelay?: () => void;
+  onRemoveDelay?: () => void;
+  hasDelay?: boolean;
+  onUsePrompt?: () => void;
+  onUseLabel?: () => void;
+  isPromptMode?: boolean;
+  onSetManually?: () => void;
+  onUseAiDraft?: () => void;
+  isManualMode?: boolean;
+}) {
+  const hasOptions =
+    onAddDelay ||
+    onRemoveDelay ||
+    onUsePrompt ||
+    onUseLabel ||
+    onSetManually ||
+    onUseAiDraft;
+
+  if (!hasOptions) return null;
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          size="icon"
+          variant="ghost"
+          className="size-8 mt-1"
+          aria-label="More options"
+        >
+          <MoreHorizontalIcon className="size-4 text-muted-foreground" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        {onUsePrompt && !isPromptMode && (
+          <DropdownMenuItem onClick={onUsePrompt}>
+            <SparklesIcon className="mr-2 size-4" />
+            Use prompt
+          </DropdownMenuItem>
+        )}
+        {onUseLabel && isPromptMode && (
+          <DropdownMenuItem onClick={onUseLabel}>
+            <SparklesIcon className="mr-2 size-4" />
+            Use label
+          </DropdownMenuItem>
+        )}
+        {onSetManually && !isManualMode && (
+          <DropdownMenuItem onClick={onSetManually}>
+            <PenLineIcon className="mr-2 size-4" />
+            Set content manually
+          </DropdownMenuItem>
+        )}
+        {onUseAiDraft && isManualMode && (
+          <DropdownMenuItem onClick={onUseAiDraft}>
+            <SparklesIcon className="mr-2 size-4" />
+            Use AI draft
+          </DropdownMenuItem>
+        )}
+        {onAddDelay && !hasDelay && (
+          <DropdownMenuItem onClick={onAddDelay}>
+            <ClockIcon className="mr-2 size-4" />
+            Add delay
+          </DropdownMenuItem>
+        )}
+        {onRemoveDelay && hasDelay && (
+          <DropdownMenuItem onClick={onRemoveDelay}>
+            <ClockIcon className="mr-2 size-4" />
+            Remove delay
+          </DropdownMenuItem>
+        )}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+function ActionButtons({
+  onRemove,
+  removeAriaLabel,
+  onAddDelay,
+  onRemoveDelay,
+  hasDelay,
+  onUsePrompt,
+  onUseLabel,
+  isPromptMode,
+  onSetManually,
+  onUseAiDraft,
+  isManualMode,
+}: {
+  onRemove: () => void;
+  removeAriaLabel: string;
+  onAddDelay?: () => void;
+  onRemoveDelay?: () => void;
+  hasDelay?: boolean;
+  onUsePrompt?: () => void;
+  onUseLabel?: () => void;
+  isPromptMode?: boolean;
+  onSetManually?: () => void;
+  onUseAiDraft?: () => void;
+  isManualMode?: boolean;
+}) {
+  return (
+    <div className="flex items-start">
+      <OptionsMenu
+        onAddDelay={onAddDelay}
+        onRemoveDelay={onRemoveDelay}
+        hasDelay={hasDelay}
+        onUsePrompt={onUsePrompt}
+        onUseLabel={onUseLabel}
+        isPromptMode={isPromptMode}
+        onSetManually={onSetManually}
+        onUseAiDraft={onUseAiDraft}
+        isManualMode={isManualMode}
+      />
+      <DeleteButton onClick={onRemove} ariaLabel={removeAriaLabel} />
+    </div>
+  );
+}
+
+function CardLayout({ children }: { children: React.ReactNode }) {
+  return <div className="flex flex-col sm:flex-row gap-2">{children}</div>;
+}
+
+function CardLayoutRight({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div className={cn("space-y-2 mx-auto w-full", className)}>{children}</div>
+  );
+}
+
+export function RuleStep({
+  onRemove,
+  leftContent,
+  rightContent,
+  removeAriaLabel,
+  onAddDelay,
+  onRemoveDelay,
+  hasDelay,
+  onUsePrompt,
+  onUseLabel,
+  isPromptMode,
+  onSetManually,
+  onUseAiDraft,
+  isManualMode,
+}: {
+  onRemove: () => void;
+  leftContent: React.ReactNode | null;
+  rightContent: React.ReactNode;
+  removeAriaLabel: string;
+  onAddDelay?: () => void;
+  onRemoveDelay?: () => void;
+  hasDelay?: boolean;
+  onUsePrompt?: () => void;
+  onUseLabel?: () => void;
+  isPromptMode?: boolean;
+  onSetManually?: () => void;
+  onUseAiDraft?: () => void;
+  isManualMode?: boolean;
+}) {
+  return (
+    <div className="flex items-start gap-3">
+      <div className="relative flex-1">
+        <CardLayout>
+          {leftContent && <div className="shrink-0">{leftContent}</div>}
+          <CardLayoutRight>{rightContent}</CardLayoutRight>
+          <ActionButtons
+            onRemove={onRemove}
+            removeAriaLabel={removeAriaLabel}
+            onAddDelay={onAddDelay}
+            onRemoveDelay={onRemoveDelay}
+            hasDelay={hasDelay}
+            onUsePrompt={onUsePrompt}
+            onUseLabel={onUseLabel}
+            isPromptMode={isPromptMode}
+            onSetManually={onSetManually}
+            onUseAiDraft={onUseAiDraft}
+            isManualMode={isManualMode}
+          />
+        </CardLayout>
+      </div>
+    </div>
+  );
+}

apps/web/app/(app)/[emailAccountId]/assistant/RuleSteps.tsx

@@ -0,0 +1,40 @@
+import { Card } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { PlusIcon } from "lucide-react";
+import { Tooltip } from "@/components/Tooltip";
+import type { ReactNode } from "react";
+
+export function RuleSteps({
+  children,
+  onAdd,
+  addButtonLabel,
+  addButtonDisabled = false,
+  addButtonTooltip,
+}: {
+  children: ReactNode;
+  onAdd: () => void;
+  addButtonLabel: string;
+  addButtonDisabled?: boolean;
+  addButtonTooltip?: string;
+}) {
+  return (
+    <Card className="p-4 space-y-2 border-none shadow-none bg-gray-50 dark:bg-gray-900">
+      {children}
+      <div>
+        <Tooltip hide={!addButtonTooltip} content={addButtonTooltip || ""}>
+          <span>
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={onAdd}
+              disabled={addButtonDisabled}
+              Icon={PlusIcon}
+            >
+              {addButtonLabel}
+            </Button>
+          </span>
+        </Tooltip>
+      </div>
+    </Card>
+  );
+}