Longer bulk categorize

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "typescript.preferences.importModuleSpecifier": "non-relative",
   "[typescript]": {
-    "editor.defaultFormatter": "esbenp.prettier-vscode"
+    "editor.defaultFormatter": "biomejs.biome"
   },
   "[typescriptreact]": {
     "editor.defaultFormatter": "biomejs.biome"

apps/web/.env.example

@@ -3,6 +3,7 @@ DIRECT_URL="postgresql://postgres:password@localhost:5432/inboxzero?schema=publi
 
 # Generate a random secret here: https://generate-secret.vercel.app/32
 NEXTAUTH_SECRET=
+NEXTAUTH_URL=http://localhost:3000
 
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
@@ -17,6 +18,9 @@ BEDROCK_REGION=us-west-2
 UPSTASH_REDIS_URL="http://localhost:8079"
 # Generate a random secret here: https://generate-secret.vercel.app/32
 UPSTASH_REDIS_TOKEN=
+QSTASH_TOKEN=
+QSTASH_CURRENT_SIGNING_KEY=
+QSTASH_NEXT_SIGNING_KEY=
 
 TINYBIRD_TOKEN=
 TINYBIRD_BASE_URL=https://api.us-east.tinybird.co/

apps/web/app/(app)/bulk-unsubscribe/ArchiveProgress.tsx

@@ -1,10 +1,8 @@
 "use client";
 
 import { memo, useEffect } from "react";
-import { AnimatePresence, motion } from "framer-motion";
-import { ProgressBar } from "@tremor/react";
 import { resetTotalThreads, useQueueState } from "@/store/archive-queue";
-import { cn } from "@/utils";
+import { ProgressPanel } from "@/components/ProgressPanel";
 
 export const ArchiveProgress = memo(() => {
   const { totalThreads, activeThreads } = useQueueState();
@@ -23,37 +21,13 @@ export const ArchiveProgress = memo(() => {
     }
   }, [isCompleted]);
 
-  if (!totalThreads) return null;
-
   return (
-    <div className="px-4 py-2">
-      <AnimatePresence mode="wait">
-        <motion.div
-          key="progress"
-          initial={{ opacity: 1 }}
-          exit={{ opacity: 0 }}
-          transition={{ duration: 0.3 }}
-        >
-          <ProgressBar
-            value={progress}
-            className="w-full"
-            color={isCompleted ? "green" : "blue"}
-          />
-          <p className="mt-2 flex justify-between text-sm" aria-live="polite">
-            <span
-              className={cn(
-                "text-muted-foreground",
-                isCompleted ? "text-green-500" : "",
-              )}
-            >
-              {isCompleted ? "Archiving complete!" : "Archiving emails..."}
-            </span>
-            <span>
-              {totalProcessed} of {totalThreads} emails archived
-            </span>
-          </p>
-        </motion.div>
-      </AnimatePresence>
-    </div>
+    <ProgressPanel
+      totalItems={totalThreads}
+      remainingItems={threadsRemaining}
+      inProgressText="Archiving emails..."
+      completedText="Archiving complete!"
+      itemLabel="emails"
+    />
   );
 });

apps/web/app/(app)/bulk-unsubscribe/BulkActions.tsx

@@ -42,7 +42,6 @@ export function BulkActions({
   const { bulkAutoArchiveLoading, onBulkAutoArchive } = useBulkAutoArchive({
     hasUnsubscribeAccess,
     mutate,
-    posthog,
     refetchPremium,
   });
 

apps/web/app/(app)/bulk-unsubscribe/hooks.ts

@@ -181,7 +181,9 @@ export function useAutoArchive<T extends Row>({
   const onDisableAutoArchive = useCallback(async () => {
     setAutoArchiveLoading(true);
 
-    await onDeleteFilter(item.autoArchived?.id!);
+    if (item.autoArchived?.id) {
+      await onDeleteFilter(item.autoArchived?.id);
+    }
     await setNewsletterStatusAction({
       newsletterEmail: item.name,
       status: null,
@@ -215,12 +217,10 @@ export function useAutoArchive<T extends Row>({
 export function useBulkAutoArchive<T extends Row>({
   hasUnsubscribeAccess,
   mutate,
-  posthog,
   refetchPremium,
 }: {
   hasUnsubscribeAccess: boolean;
   mutate: () => Promise<any>;
-  posthog: PostHog;
   refetchPremium: () => Promise<any>;
 }) {
   const [bulkAutoArchiveLoading, setBulkAutoArchiveLoading] =
@@ -257,6 +257,13 @@ export function useApproveButton<T extends Row>({
   posthog: PostHog;
 }) {
   const [approveLoading, setApproveLoading] = React.useState(false);
+  const { onDisableAutoArchive } = useAutoArchive({
+    item,
+    hasUnsubscribeAccess: true,
+    mutate,
+    posthog,
+    refetchPremium: () => Promise.resolve(),
+  });
 
   const onApprove = async () => {
     setApproveLoading(true);
@@ -265,6 +272,7 @@ export function useApproveButton<T extends Row>({
       newsletterEmail: item.name,
       status: NewsletterStatus.APPROVED,
     });
+    await onDisableAutoArchive();
     await mutate();
 
     posthog.capture("Clicked Approve Sender");

apps/web/app/(app)/smart-categories/CategorizeProgress.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import { useEffect } 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";
+
+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 { data } = useSWR<CategorizeProgress>(
+    "/api/user/categorize/senders/progress",
+    {
+      refreshInterval: refresh || isBulkCategorizing ? 1_000 : undefined,
+    },
+  );
+
+  // If the categorization is complete, wait 3 seconds and then set isBulkCategorizing to false
+  const { setIsBulkCategorizing } = useCategorizeProgress();
+  useEffect(() => {
+    let timeoutId: NodeJS.Timeout | undefined;
+    if (data?.completedItems === data?.totalItems) {
+      timeoutId = setTimeout(() => {
+        setIsBulkCategorizing(false);
+      }, 3_000);
+    }
+    return () => {
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [data?.completedItems, data?.totalItems, setIsBulkCategorizing]);
+
+  if (!data) return null;
+
+  const totalItems = data.totalItems || 0;
+  const completedItems = data.completedItems || 0;
+
+  return (
+    <ProgressPanel
+      totalItems={totalItems}
+      remainingItems={totalItems - completedItems}
+      inProgressText={`Categorizing senders... ${completedItems} categorized`}
+      completedText={`Categorization complete! ${completedItems} categorized!`}
+      itemLabel="senders"
+    />
+  );
+}

apps/web/app/(app)/smart-categories/CategorizeWithAiButton.tsx

@@ -4,17 +4,25 @@ import { useState } from "react";
 import { SparklesIcon } from "lucide-react";
 import { toast } from "sonner";
 import { Button } from "@/components/ui/button";
-import { categorizeSendersAction } from "@/utils/actions/categorize";
+import { bulkCategorizeSendersAction } from "@/utils/actions/categorize";
 import { handleActionCall } from "@/utils/server-action";
 import { isActionError } from "@/utils/error";
 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)/smart-categories/CategorizeProgress";
 
-export function CategorizeWithAiButton() {
+export function CategorizeWithAiButton({
+  buttonProps,
+}: {
+  buttonProps?: ButtonProps;
+}) {
   const [isCategorizing, setIsCategorizing] = useState(false);
   const { hasAiAccess } = usePremium();
   const { PremiumModal, openModal: openPremiumModal } = usePremiumModal();
 
+  const { setIsBulkCategorizing } = useCategorizeProgress();
+
   return (
     <>
       <PremiumTooltip showTooltip={!hasAiAccess} openModal={openPremiumModal}>
@@ -27,9 +35,10 @@ export function CategorizeWithAiButton() {
             toast.promise(
               async () => {
                 setIsCategorizing(true);
+                setIsBulkCategorizing(true);
                 const result = await handleActionCall(
-                  "categorizeSendersAction",
-                  categorizeSendersAction,
+                  "bulkCategorizeSendersAction",
+                  bulkCategorizeSendersAction,
                 );
 
                 if (isActionError(result)) {
@@ -42,19 +51,26 @@ export function CategorizeWithAiButton() {
                 return result;
               },
               {
-                loading: "Categorizing senders...",
-                success: () => {
-                  return "Senders categorized successfully!";
+                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}
         >
-          <SparklesIcon className="mr-2 size-4" />
-          Categorize Senders with AI
+          {buttonProps?.children || (
+            <>
+              <SparklesIcon className="mr-2 size-4" />
+              Categorize Senders with AI
+            </>
+          )}
         </Button>
       </PremiumTooltip>
       <PremiumModal />

apps/web/app/(app)/smart-categories/Uncategorized.tsx

@@ -1,13 +1,8 @@
 "use client";
 
 import useSWRInfinite from "swr/infinite";
-import { useMemo, useCallback, useState } from "react";
-import {
-  ChevronsDownIcon,
-  SparklesIcon,
-  StopCircleIcon,
-  ZapIcon,
-} from "lucide-react";
+import { useMemo, useCallback } from "react";
+import { ChevronsDownIcon, SparklesIcon, StopCircleIcon } from "lucide-react";
 import { useSession } from "next-auth/react";
 import { ClientOnly } from "@/components/ClientOnly";
 import { SendersTable } from "@/components/GroupedTable";
@@ -16,7 +11,7 @@ import { Button } from "@/components/ui/button";
 import type { UncategorizedSendersResponse } from "@/app/api/user/categorize/senders/uncategorized/route";
 import type { Category } from "@prisma/client";
 import { TopBar } from "@/components/TopBar";
-import { toastError, toastSuccess } from "@/components/Toast";
+import { toastError } from "@/components/Toast";
 import {
   useHasProcessingItems,
   pushToAiCategorizeSenderQueueAtom,
@@ -27,14 +22,8 @@ import { ButtonLoader } from "@/components/Loading";
 import { PremiumTooltip, usePremium } from "@/components/PremiumAlert";
 import { usePremiumModal } from "@/app/(app)/premium/PremiumModal";
 import { Toggle } from "@/components/Toggle";
-import {
-  fastCategorizeSendersAction,
-  setAutoCategorizeAction,
-} from "@/utils/actions/categorize";
+import { setAutoCategorizeAction } from "@/utils/actions/categorize";
 import { TooltipExplanation } from "@/components/TooltipExplanation";
-import { isActionError } from "@/utils/error";
-
-type FastCategorizeResults = Record<string, string | undefined>;
 
 export function Uncategorized({
   categories,
@@ -48,23 +37,13 @@ export function Uncategorized({
 
   const { data: senderAddresses, loadMore, isLoading, hasMore } = useSenders();
   const hasProcessingItems = useHasProcessingItems();
-  const [isFastCategorizing, setIsFastCategorizing] = useState(false);
-  const [fastCategorizeResult, setFastCategorizeResult] =
-    useState<FastCategorizeResults | null>(null);
 
   const senders = useMemo(
     () =>
       senderAddresses?.map((address) => {
-        const fastCategorization = fastCategorizeResult?.[address];
-
-        if (!fastCategorization) return { address, category: null };
-
-        const category =
-          categories.find((c) => c.name === fastCategorization) || null;
-
-        return { address, category };
+        return { address, category: null };
       }),
-    [senderAddresses, fastCategorizeResult, categories],
+    [senderAddresses],
   );
 
   const session = useSession();
@@ -80,7 +59,7 @@ export function Uncategorized({
           >
             <Button
               loading={hasProcessingItems}
-              disabled={!hasAiAccess || isFastCategorizing}
+              disabled={!hasAiAccess}
               onClick={async () => {
                 if (!senderAddresses?.length) {
                   toastError({ description: "No senders to categorize" });
@@ -95,40 +74,6 @@ export function Uncategorized({
             </Button>
           </PremiumTooltip>
 
-          <PremiumTooltip
-            showTooltip={!hasAiAccess}
-            openModal={openPremiumModal}
-          >
-            <Button
-              loading={isFastCategorizing}
-              disabled={!hasAiAccess || hasProcessingItems}
-              onClick={async () => {
-                if (!senderAddresses?.length) {
-                  toastError({ description: "No senders to categorize" });
-                  return;
-                }
-
-                setIsFastCategorizing(true);
-
-                const result =
-                  await fastCategorizeSendersAction(senderAddresses);
-
-                if (isActionError(result)) {
-                  toastError({ description: result.error });
-                } else {
-                  if (result.results) setFastCategorizeResult(result.results);
-
-                  toastSuccess({ description: "Categorized senders!" });
-                }
-
-                setIsFastCategorizing(false);
-              }}
-            >
-              <ZapIcon className="mr-2 size-4" />
-              Fast categorize
-            </Button>
-          </PremiumTooltip>
-
           {hasProcessingItems && (
             <Button
               variant="outline"
@@ -143,7 +88,7 @@ export function Uncategorized({
         </div>
 
         <div className="flex items-center">
-          <div className="mr-1">
+          <div className="mr-1.5">
             <TooltipExplanation
               size="sm"
               text="Automatically categorize new senders when they email you"