Bulk Archive

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

@@ -97,7 +97,7 @@ describe.runIf(isAiTest)("AI Sender Categorization", () => {
       "should categorize senders for all valid SenderCategory values",
       async () => {
         const senders = getEnabledCategories()
-          .filter((category) => category.name !== "Unknown")
+          .filter((category) => category.name !== "Other")
           .map((category) => `${category.name}@example.com`);
 
         const result = await aiCategorizeSenders({

apps/web/app/(app)/(redirects)/bulk-archive/page.tsx

@@ -0,0 +1,5 @@
+import { redirectToEmailAccountPath } from "@/utils/account";
+
+export default async function BulkArchivePage() {
+  await redirectToEmailAccountPath("/bulk-archive");
+}

apps/web/app/(app)/(redirects)/quick-bulk-archive/page.tsx

@@ -0,0 +1,5 @@
+import { redirectToEmailAccountPath } from "@/utils/account";
+
+export default async function QuickBulkArchivePage() {
+  await redirectToEmailAccountPath("/quick-bulk-archive");
+}

apps/web/app/(app)/[emailAccountId]/briefs/Onboarding.tsx

@@ -1,22 +1,28 @@
 "use client";
 
-import { CardFooter, Card } from "@/components/ui/card";
-import {
-  MessageText,
-  SectionDescription,
-  TypographyH3,
-} from "@/components/Typography";
-import { ConnectCalendar } from "@/app/(app)/[emailAccountId]/calendars/ConnectCalendar";
 import { MailIcon, LightbulbIcon, UserSearchIcon } from "lucide-react";
+import { SetupCard } from "@/components/SetupCard";
+import { MessageText } from "@/components/Typography";
 import { Button } from "@/components/ui/button";
-import {
-  Item,
-  ItemContent,
-  ItemDescription,
-  ItemGroup,
-  ItemTitle,
-} from "@/components/ui/item";
-import Image from "next/image";
+import { ConnectCalendar } from "@/app/(app)/[emailAccountId]/calendars/ConnectCalendar";
+
+const features = [
+  {
+    icon: <UserSearchIcon className="size-4 text-blue-500" />,
+    title: "Attendee research",
+    description: "Who they are, their company, and role",
+  },
+  {
+    icon: <MailIcon className="size-4 text-blue-500" />,
+    title: "Email history",
+    description: "Recent conversations with this person",
+  },
+  {
+    icon: <LightbulbIcon className="size-4 text-blue-500" />,
+    title: "Key context",
+    description: "Important details from past discussions",
+  },
+];
 
 export function BriefsOnboarding({
   emailAccountId,
@@ -30,72 +36,28 @@ export function BriefsOnboarding({
   isEnabling?: boolean;
 }) {
   return (
-    <Card className="mx-4 mt-10 max-w-2xl p-6 md:mx-auto">
-      <Image
-        src="/images/illustrations/communication.svg"
-        alt="Meeting Briefs"
-        width={200}
-        height={200}
-        className="mx-auto dark:brightness-90 dark:invert"
-        unoptimized
-      />
-
-      <div className="text-center">
-        <TypographyH3 className="mt-2">Meeting Briefs</TypographyH3>
-        <SectionDescription className="mx-auto mt-2 max-w-prose">
-          Receive email briefings before meetings with external guests.
-        </SectionDescription>
-      </div>
-
-      <ItemGroup className="mt-6">
-        <Item>
-          <UserSearchIcon className="text-blue-500 size-4" />
-          <ItemContent>
-            <ItemTitle>Attendee research</ItemTitle>
-            <ItemDescription>
-              Who they are, their company, and role
-            </ItemDescription>
-          </ItemContent>
-        </Item>
-        <Item>
-          <MailIcon className="text-blue-500 size-4" />
-          <ItemContent>
-            <ItemTitle>Email history</ItemTitle>
-            <ItemDescription>
-              Recent conversations with this person
-            </ItemDescription>
-          </ItemContent>
-        </Item>
-        <Item>
-          <LightbulbIcon className="text-blue-500 size-4" />
-          <ItemContent>
-            <ItemTitle>Key context</ItemTitle>
-            <ItemDescription>
-              Important details from past discussions
-            </ItemDescription>
-          </ItemContent>
-        </Item>
-      </ItemGroup>
-
-      <CardFooter className="flex flex-col items-center gap-4 mt-6">
-        {hasCalendarConnected ? (
-          <>
-            <MessageText>
-              You're all set! Enable meeting briefs to get started:
-            </MessageText>
-            <Button onClick={onEnable} loading={isEnabling}>
-              Enable Meeting Briefs
-            </Button>
-          </>
-        ) : (
-          <>
-            <MessageText>Connect your calendar to get started:</MessageText>
-            <ConnectCalendar
-              onboardingReturnPath={`/${emailAccountId}/briefs`}
-            />
-          </>
-        )}
-      </CardFooter>
-    </Card>
+    <SetupCard
+      imageSrc="/images/illustrations/communication.svg"
+      imageAlt="Meeting Briefs"
+      title="Meeting Briefs"
+      description="Receive email briefings before meetings with external guests."
+      features={features}
+    >
+      {hasCalendarConnected ? (
+        <>
+          <MessageText>
+            You're all set! Enable meeting briefs to get started:
+          </MessageText>
+          <Button onClick={onEnable} loading={isEnabling}>
+            Enable Meeting Briefs
+          </Button>
+        </>
+      ) : (
+        <>
+          <MessageText>Connect your calendar to get started:</MessageText>
+          <ConnectCalendar onboardingReturnPath={`/${emailAccountId}/briefs`} />
+        </>
+      )}
+    </SetupCard>
   );
 }

apps/web/app/(app)/[emailAccountId]/bulk-archive/AutoCategorizationSetup.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { toastError, toastSuccess } from "@/components/Toast";
+import { ArchiveIcon, RotateCcwIcon, TagsIcon } from "lucide-react";
+import { SetupDialog } from "@/components/SetupCard";
+import { Button } from "@/components/ui/button";
+import { bulkCategorizeSendersAction } from "@/utils/actions/categorize";
+import { useAccount } from "@/providers/EmailAccountProvider";
+import { useCategorizeProgress } from "@/app/(app)/[emailAccountId]/smart-categories/CategorizeProgress";
+
+const features = [
+  {
+    icon: <TagsIcon className="size-4 text-blue-500" />,
+    title: "Sorted automatically",
+    description:
+      "We group senders into categories like Newsletters, Receipts, and Marketing",
+  },
+  {
+    icon: <ArchiveIcon className="size-4 text-blue-500" />,
+    title: "Archive by category",
+    description:
+      "Clean up an entire category at once instead of one email at a time",
+  },
+  {
+    icon: <RotateCcwIcon className="size-4 text-blue-500" />,
+    title: "Always reversible",
+    description: "Emails are archived, not deleted — you can find them anytime",
+  },
+];
+
+export function AutoCategorizationSetup({ open }: { open: boolean }) {
+  const { emailAccountId } = useAccount();
+  const { setIsBulkCategorizing } = useCategorizeProgress();
+
+  const [isEnabling, setIsEnabling] = useState(false);
+
+  const enableFeature = useCallback(async () => {
+    setIsEnabling(true);
+    setIsBulkCategorizing(true);
+
+    try {
+      const result = await bulkCategorizeSendersAction(emailAccountId);
+
+      if (result?.serverError) {
+        throw new Error(result.serverError);
+      }
+
+      if (result?.data?.totalUncategorizedSenders) {
+        toastSuccess({
+          description: `Categorizing ${result.data.totalUncategorizedSenders} senders... This may take a few minutes.`,
+        });
+      } else {
+        toastSuccess({ description: "No uncategorized senders found." });
+        setIsBulkCategorizing(false);
+      }
+    } catch (error) {
+      toastError({
+        description: `Failed to enable feature: ${error instanceof Error ? error.message : "Unknown error"}`,
+      });
+      setIsBulkCategorizing(false);
+    } finally {
+      setIsEnabling(false);
+    }
+  }, [emailAccountId, setIsBulkCategorizing]);
+
+  return (
+    <SetupDialog
+      open={open}
+      imageSrc="/images/illustrations/working-vacation.svg"
+      imageAlt="Bulk Archive"
+      title="Bulk Archive"
+      description="Archive thousands of emails in a few clicks."
+      features={features}
+    >
+      <Button onClick={enableFeature} loading={isEnabling}>
+        Get Started
+      </Button>
+    </SetupDialog>
+  );
+}

apps/web/app/(app)/[emailAccountId]/bulk-archive/BulkArchive.tsx

@@ -0,0 +1,69 @@
+"use client";
+
+import { useMemo, useCallback } from "react";
+import useSWR from "swr";
+import { parseAsBoolean, useQueryState } from "nuqs";
+import { AutoCategorizationSetup } from "@/app/(app)/[emailAccountId]/bulk-archive/AutoCategorizationSetup";
+import { BulkArchiveProgress } from "@/app/(app)/[emailAccountId]/bulk-archive/BulkArchiveProgress";
+import { BulkArchiveCards } from "@/components/BulkArchiveCards";
+import { useCategorizeProgress } from "@/app/(app)/[emailAccountId]/smart-categories/CategorizeProgress";
+import { CategorizeWithAiButton } from "@/app/(app)/[emailAccountId]/smart-categories/CategorizeWithAiButton";
+import type { CategorizedSendersResponse } from "@/app/api/user/categorize/senders/categorized/route";
+import { PageWrapper } from "@/components/PageWrapper";
+import { LoadingContent } from "@/components/LoadingContent";
+import { TooltipExplanation } from "@/components/TooltipExplanation";
+import { PageHeading } from "@/components/Typography";
+
+export function BulkArchive() {
+  const { isBulkCategorizing } = useCategorizeProgress();
+  const [onboarding] = useQueryState("onboarding", parseAsBoolean);
+
+  // Fetch data with SWR and poll while categorization is in progress
+  const { data, error, isLoading, mutate } = useSWR<CategorizedSendersResponse>(
+    "/api/user/categorize/senders/categorized",
+    {
+      refreshInterval: isBulkCategorizing ? 2000 : undefined,
+    },
+  );
+
+  const senders = data?.senders ?? [];
+  const categories = data?.categories ?? [];
+  const autoCategorizeSenders = data?.autoCategorizeSenders ?? false;
+
+  const emailGroups = useMemo(
+    () =>
+      senders.map((sender) => ({
+        address: sender.email,
+        name: sender.name ?? null,
+        category: categories.find((c) => c.id === sender.category?.id) || null,
+      })),
+    [senders, categories],
+  );
+
+  const handleProgressComplete = useCallback(() => {
+    mutate();
+  }, [mutate]);
+
+  // Show setup dialog for first-time setup only
+  const shouldShowSetup =
+    onboarding || (!autoCategorizeSenders && !isBulkCategorizing);
+
+  return (
+    <LoadingContent loading={isLoading} error={error}>
+      <PageWrapper>
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-2">
+            <PageHeading>Bulk Archive</PageHeading>
+            <TooltipExplanation text="Archive emails in bulk by category to quickly clean up your inbox." />
+          </div>
+          <CategorizeWithAiButton
+            buttonProps={{ variant: "outline", size: "sm" }}
+          />
+        </div>
+        <BulkArchiveProgress onComplete={handleProgressComplete} />
+        <BulkArchiveCards emailGroups={emailGroups} categories={categories} />
+      </PageWrapper>
+      <AutoCategorizationSetup open={shouldShowSetup} />
+    </LoadingContent>
+  );
+}