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,76 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { toast } from "sonner";
+import { ArchiveIcon, TagsIcon, ZapIcon } from "lucide-react";
+import { SetupCard } 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: "Smart categorization",
+    description:
+      "Automatically group senders into categories like Newsletters, Receipts, and Marketing",
+  },
+  {
+    icon: <ArchiveIcon className="size-4 text-blue-500" />,
+    title: "Bulk actions",
+    description: "Archive entire categories at once instead of email by email",
+  },
+  {
+    icon: <ZapIcon className="size-4 text-blue-500" />,
+    title: "Instant cleanup",
+    description: "Clear hundreds of emails in seconds, not hours",
+  },
+];
+
+export function AutoCategorizationSetup() {
+  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);
+      }
+
+      toast.success(
+        result?.data?.totalUncategorizedSenders
+          ? `Categorizing ${result.data.totalUncategorizedSenders} senders... This may take a few minutes.`
+          : "No uncategorized senders found.",
+      );
+    } catch (error) {
+      toast.error(
+        `Failed to enable feature: ${error instanceof Error ? error.message : "Unknown error"}`,
+      );
+      setIsBulkCategorizing(false);
+    } finally {
+      setIsEnabling(false);
+    }
+  }, [emailAccountId, setIsBulkCategorizing]);
+
+  return (
+    <SetupCard
+      imageSrc="/images/illustrations/working-vacation.svg"
+      imageAlt="Bulk Archive"
+      title="Bulk Archive"
+      description="Clean up your inbox by archiving emails in bulk by category."
+      features={features}
+    >
+      <Button onClick={enableFeature} loading={isEnabling}>
+        Get Started
+      </Button>
+    </SetupCard>
+  );
+}

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

@@ -0,0 +1,72 @@
+"use client";
+
+import { useMemo, useCallback } from "react";
+import useSWR from "swr";
+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 type { CategorizedSendersResponse } from "@/app/api/user/categorize/senders/categorized/route";
+import type { CategoryWithRules } from "@/utils/category.server";
+import { PageWrapper } from "@/components/PageWrapper";
+import { PageHeader } from "@/components/PageHeader";
+
+type Sender = {
+  id: string;
+  email: string;
+  category: { id: string; description: string | null; name: string } | null;
+};
+
+export function BulkArchive({
+  initialSenders,
+  initialCategories,
+  autoCategorizeSenders,
+}: {
+  initialSenders: Sender[];
+  initialCategories: CategoryWithRules[];
+  autoCategorizeSenders: boolean;
+}) {
+  const { isBulkCategorizing } = useCategorizeProgress();
+
+  // Poll for updates while categorization is in progress
+  const { data, mutate } = useSWR<CategorizedSendersResponse>(
+    "/api/user/categorize/senders/categorized",
+    {
+      refreshInterval: isBulkCategorizing ? 2000 : undefined,
+      fallbackData: { senders: initialSenders, categories: initialCategories },
+    },
+  );
+
+  // Use SWR data if available, otherwise fall back to initial server data
+  const senders = data?.senders ?? initialSenders;
+  const categories = data?.categories ?? initialCategories;
+
+  const emailGroups = useMemo(
+    () =>
+      senders.map((sender) => ({
+        address: sender.email,
+        category: categories.find((c) => c.id === sender.category?.id) || null,
+      })),
+    [senders, categories],
+  );
+
+  const handleProgressComplete = useCallback(() => {
+    mutate();
+  }, [mutate]);
+
+  const shouldShowSetup = !autoCategorizeSenders && !isBulkCategorizing;
+
+  return (
+    <>
+      {shouldShowSetup ? (
+        <AutoCategorizationSetup />
+      ) : (
+        <PageWrapper>
+          <PageHeader title="Bulk Archive" />
+          <BulkArchiveProgress onComplete={handleProgressComplete} />
+          <BulkArchiveCards emailGroups={emailGroups} categories={categories} />
+        </PageWrapper>
+      )}
+    </>
+  );
+}