wip deep clean v2

apps/web/__tests__/ai-categorize-senders.test.ts

@@ -1,8 +1,5 @@
 import { describe, it, expect, vi } from "vitest";
-import {
-  aiCategorizeSenders,
-  REQUEST_MORE_INFORMATION_CATEGORY,
-} from "@/utils/ai/categorize-sender/ai-categorize-senders";
+import { aiCategorizeSenders } from "@/utils/ai/categorize-sender/ai-categorize-senders";
 import { defaultCategory } from "@/utils/categories";
 import { aiCategorizeSender } from "@/utils/ai/categorize-sender/ai-categorize-single-sender";
 import { getEmailAccount } from "@/__tests__/helpers";
@@ -135,9 +132,7 @@ describe.runIf(isAiTest)("AI Sender Categorization", () => {
           });
 
           if (expectedCategory === "Unknown") {
-            expect([REQUEST_MORE_INFORMATION_CATEGORY, "Unknown"]).toContain(
-              result?.category,
-            );
+            expect(result?.category).toBe("Unknown");
           } else {
             expect(result?.category).toBe(expectedCategory);
           }
@@ -161,9 +156,7 @@ describe.runIf(isAiTest)("AI Sender Categorization", () => {
           categories: getEnabledCategories(),
         });
 
-        expect([REQUEST_MORE_INFORMATION_CATEGORY, "Unknown"]).toContain(
-          result?.category,
-        );
+        expect(result?.category).toBe("Unknown");
       },
       TIMEOUT,
     );

apps/web/app/(app)/[emailAccountId]/deep-clean/BulkOperationProgress.tsx

@@ -0,0 +1,63 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { ProgressPanel } from "@/components/ProgressPanel";
+import { useBulkOperationProgress } from "@/hooks/useDeepClean";
+
+export function BulkOperationProgress() {
+  const [hasActiveOperations, setHasActiveOperations] = useState(false);
+
+  const { data } = useBulkOperationProgress(
+    hasActiveOperations ? 2000 : 10_000, // Poll more frequently when operations are active
+  );
+
+  const operations = data?.operations || [];
+  const activeOperations = operations.filter(
+    (op) => op.status === "processing" || op.status === "pending",
+  );
+
+  useEffect(() => {
+    setHasActiveOperations(activeOperations.length > 0);
+  }, [activeOperations.length]);
+
+  // Show progress for each active operation
+  return (
+    <>
+      {operations.map((operation) => {
+        const isActive =
+          operation.status === "processing" || operation.status === "pending";
+        const isCompleted = operation.status === "completed";
+
+        if (!isActive && !isCompleted) return null;
+
+        // Hide completed operations after 5 seconds
+        if (isCompleted) {
+          setTimeout(() => {
+            // This will be handled by React's re-render when the operation is removed from Redis
+          }, 5000);
+        }
+
+        const displayName =
+          operation.operationType === "archive"
+            ? `Archiving ${operation.categoryOrSender}`
+            : `Marking ${operation.categoryOrSender} as read`;
+
+        const completedText =
+          operation.operationType === "archive"
+            ? `Archived ${operation.completedItems} emails!`
+            : `Marked ${operation.completedItems} emails as read!`;
+
+        return (
+          <ProgressPanel
+            key={operation.operationId}
+            totalItems={operation.totalItems}
+            remainingItems={operation.totalItems - operation.completedItems}
+            inProgressText={displayName}
+            completedText={completedText}
+            itemLabel="emails"
+          />
+        );
+      })}
+    </>
+  );
+}

apps/web/app/(app)/[emailAccountId]/deep-clean/CategorizeProgress.tsx

@@ -0,0 +1,80 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { atom, useAtom } from "jotai";
+import useSWR from "swr";
+import { ProgressPanel } from "@/components/ProgressPanel";
+import type { CategorizeProgress } from "@/app/api/user/categorize/senders/progress/route";
+import { useInterval } from "@/hooks/useInterval";
+
+const isCategorizeInProgressAtom = atom(false);
+
+export function useCategorizeProgress() {
+  const [isBulkCategorizing, setIsBulkCategorizing] = useAtom(
+    isCategorizeInProgressAtom,
+  );
+  return { isBulkCategorizing, setIsBulkCategorizing };
+}
+
+export function CategorizeSendersProgress({
+  refresh = false,
+}: {
+  refresh: boolean;
+}) {
+  const { isBulkCategorizing } = useCategorizeProgress();
+  const [fakeProgress, setFakeProgress] = useState(0);
+
+  const { data } = useSWR<CategorizeProgress>(
+    "/api/user/categorize/senders/progress",
+    {
+      refreshInterval: refresh || isBulkCategorizing ? 1000 : undefined,
+    },
+  );
+
+  useInterval(
+    () => {
+      if (!data?.totalItems) return;
+
+      setFakeProgress((prev) => {
+        const realCompleted = data.completedItems || 0;
+        if (realCompleted > prev) return realCompleted;
+
+        const maxProgress = Math.min(
+          Math.floor(data.totalItems * 0.9),
+          realCompleted + 30,
+        );
+        return prev < maxProgress ? prev + 1 : prev;
+      });
+    },
+    isBulkCategorizing ? 1500 : null,
+  );
+
+  const { setIsBulkCategorizing } = useCategorizeProgress();
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | undefined;
+    if (data?.completedItems === data?.totalItems) {
+      timeoutId = setTimeout(() => {
+        setIsBulkCategorizing(false);
+        setFakeProgress(0);
+      }, 3000);
+    }
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [data?.completedItems, data?.totalItems, setIsBulkCategorizing]);
+
+  if (!data) return null;
+
+  const totalItems = data.totalItems || 0;
+  const displayedProgress = Math.max(data.completedItems || 0, fakeProgress);
+
+  return (
+    <ProgressPanel
+      totalItems={totalItems}
+      remainingItems={totalItems - displayedProgress}
+      inProgressText="Categorizing senders..."
+      completedText={`Categorization complete! ${displayedProgress} categorized!`}
+      itemLabel="senders"
+    />
+  );
+}

apps/web/app/(app)/[emailAccountId]/deep-clean/CategorizeWithAiButton.tsx

@@ -0,0 +1,105 @@
+"use client";
+
+import { useState } from "react";
+import { SparklesIcon } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "@/components/ui/button";
+import { bulkCategorizeSendersAction } from "@/utils/actions/categorize";
+import { PremiumTooltip, usePremium } from "@/components/PremiumAlert";
+import { usePremiumModal } from "@/app/(app)/premium/PremiumModal";
+import type { ButtonProps } from "@/components/ui/button";
+import { useCategorizeProgress } from "@/app/(app)/[emailAccountId]/smart-categories/CategorizeProgress";
+import { Tooltip } from "@/components/Tooltip";
+import { useAccount } from "@/providers/EmailAccountProvider";
+
+export function CategorizeWithAiButton({
+  buttonProps,
+}: {
+  buttonProps?: ButtonProps;
+}) {
+  const { emailAccountId } = useAccount();
+  const [isCategorizing, setIsCategorizing] = useState(false);
+  const { hasAiAccess } = usePremium();
+  const { PremiumModal, openModal: openPremiumModal } = usePremiumModal();
+
+  const { setIsBulkCategorizing } = useCategorizeProgress();
+
+  return (
+    <>
+      <CategorizeWithAiButtonTooltip
+        hasAiAccess={hasAiAccess}
+        openPremiumModal={openPremiumModal}
+      >
+        <Button
+          type="button"
+          loading={isCategorizing}
+          disabled={!hasAiAccess}
+          onClick={async () => {
+            if (isCategorizing) return;
+            toast.promise(
+              async () => {
+                setIsCategorizing(true);
+                setIsBulkCategorizing(true);
+                const result =
+                  await bulkCategorizeSendersAction(emailAccountId);
+
+                if (result?.serverError) {
+                  setIsCategorizing(false);
+                  throw new Error(result.serverError);
+                }
+
+                setIsCategorizing(false);
+
+                return result?.data?.totalUncategorizedSenders || 0;
+              },
+              {
+                loading: "Categorizing senders... This might take a while.",
+                success: (totalUncategorizedSenders) => {
+                  return totalUncategorizedSenders
+                    ? `Categorizing ${totalUncategorizedSenders} senders...`
+                    : "There are no more senders to categorize.";
+                },
+                error: (err) => {
+                  return `Error categorizing senders: ${err.message}`;
+                },
+              },
+            );
+          }}
+          {...buttonProps}
+        >
+          {buttonProps?.children || (
+            <>
+              <SparklesIcon className="mr-2 size-4" />
+              Categorize Senders with AI
+            </>
+          )}
+        </Button>
+      </CategorizeWithAiButtonTooltip>
+      <PremiumModal />
+    </>
+  );
+}
+
+function CategorizeWithAiButtonTooltip({
+  children,
+  hasAiAccess,
+  openPremiumModal,
+}: {
+  children: React.ReactElement<any>;
+  hasAiAccess: boolean;
+  openPremiumModal: () => void;
+}) {
+  if (hasAiAccess) {
+    return (
+      <Tooltip content="Categorize thousands of senders. This will take a few minutes.">
+        {children}
+      </Tooltip>
+    );
+  }
+
+  return (
+    <PremiumTooltip showTooltip={!hasAiAccess} openModal={openPremiumModal}>
+      {children}
+    </PremiumTooltip>
+  );
+}