Show bulk archive progress

apps/web/app/(app)/automation/BulkRunRules.tsx

@@ -10,7 +10,7 @@ import { SectionDescription } from "@/components/Typography";
 import type { ThreadsResponse } from "@/app/api/google/threads/controller";
 import type { ThreadsQuery } from "@/app/api/google/threads/validation";
 import { LoadingContent } from "@/components/LoadingContent";
-import { runAiRules } from "@/providers/QueueProvider";
+import { runAiRules } from "@/utils/queue/email-actions";
 import { aiQueueAtom } from "@/store/queue";
 import { sleep } from "@/utils/sleep";
 import { PremiumAlertWithData, usePremium } from "@/components/PremiumAlert";

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

@@ -0,0 +1,58 @@
+import { useEffect } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useAtomValue } from "jotai";
+import { ProgressBar } from "@tremor/react";
+import { queueAtoms, resetTotalThreads } from "@/store/archive-queue";
+import { cn } from "@/utils";
+
+export const ArchiveProgress = () => {
+  const { totalThreads, activeThreadIds } = useAtomValue(queueAtoms.archive);
+
+  const threadsRemaining =
+    Object.values(activeThreadIds).filter(Boolean).length;
+  const totalArchived = totalThreads - threadsRemaining;
+  const progress = (totalArchived / totalThreads) * 100;
+  const isCompleted = progress === 100;
+
+  useEffect(() => {
+    if (isCompleted) {
+      setTimeout(() => {
+        resetTotalThreads("archive");
+      }, 5_000);
+    }
+  }, [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>
+              {totalArchived} of {totalThreads} emails archived
+            </span>
+          </p>
+        </motion.div>
+      </AnimatePresence>
+    </div>
+  );
+};

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

@@ -39,6 +39,7 @@ import { ShortcutTooltip } from "@/app/(app)/bulk-unsubscribe/ShortcutTooltip";
 import { SearchBar } from "@/app/(app)/bulk-unsubscribe/SearchBar";
 import { useToggleSelect } from "@/hooks/useToggleSelect";
 import { BulkActions } from "@/app/(app)/bulk-unsubscribe/BulkActions";
+import { ArchiveProgress } from "@/app/(app)/bulk-unsubscribe/ArchiveProgress";
 
 type Newsletter = NewsletterStatsResponse["newsletters"][number];
 
@@ -228,6 +229,8 @@ export function BulkUnsubscribeSection({
           </div>
         </div>
 
+        <ArchiveProgress />
+
         {isStatsLoading && !isLoading && !data?.newsletters.length ? (
           <div className="p-4">
             <Skeleton className="h-screen rounded" />

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

@@ -12,7 +12,7 @@ import { captureException } from "@/utils/error";
 import {
   archiveAllSenderEmails,
   deleteEmails,
-} from "@/providers/QueueProvider";
+} from "@/utils/queue/email-actions";
 import type { Row } from "@/app/(app)/bulk-unsubscribe/types";
 import type { GetThreadsResponse } from "@/app/api/google/threads/basic/route";
 import { isDefined } from "@/utils/types";
@@ -524,9 +524,9 @@ export function useNewsletterFilter() {
     Record<"unhandled" | "unsubscribed" | "autoArchived" | "approved", boolean>
   >({
     unhandled: true,
-    unsubscribed: false,
-    autoArchived: false,
-    approved: false,
+    unsubscribed: true,
+    autoArchived: true,
+    approved: true,
   });
 
   return {

apps/web/app/(app)/simple/SimpleList.tsx

@@ -17,7 +17,7 @@ import { Button as HoverButton } from "@/components/Button";
 import { extractNameFromEmail } from "@/utils/email";
 import { Tooltip } from "@/components/Tooltip";
 import type { ParsedMessage } from "@/utils/types";
-import { archiveEmails } from "@/providers/QueueProvider";
+import { archiveEmails } from "@/utils/queue/email-actions";
 import { Summary } from "@/app/(app)/simple/Summary";
 import { getGmailUrl } from "@/utils/url";
 import {

apps/web/components/CommandK.tsx

@@ -16,7 +16,7 @@ import {
 import { navigation } from "@/components/SideNav";
 import { useComposeModal } from "@/providers/ComposeModalProvider";
 import { refetchEmailListAtom, selectedEmailAtom } from "@/store/email";
-import { archiveEmails } from "@/providers/QueueProvider";
+import { archiveEmails } from "@/utils/queue/email-actions";
 
 export function CommandK() {
   const [open, setOpen] = React.useState(false);

apps/web/components/email-list/EmailList.tsx

@@ -30,7 +30,7 @@ import {
   deleteEmails,
   markReadThreads,
   runAiRules,
-} from "@/providers/QueueProvider";
+} from "@/utils/queue/email-actions";
 import { selectedEmailAtom } from "@/store/email";
 import { categorizeAction } from "@/utils/actions/categorize";
 

apps/web/providers/AppProviders.tsx

@@ -1,15 +1,12 @@
 import type React from "react";
 import { Provider } from "jotai";
 import { ComposeModalProvider } from "@/providers/ComposeModalProvider";
-import { QueueProvider } from "@/providers/QueueProvider";
 import { jotaiStore } from "@/store";
 
 export function AppProviders(props: { children: React.ReactNode }) {
   return (
     <Provider store={jotaiStore}>
-      <QueueProvider>
-        <ComposeModalProvider>{props.children}</ComposeModalProvider>
-      </QueueProvider>
+      <ComposeModalProvider>{props.children}</ComposeModalProvider>
     </Provider>
   );
 }