feat(mail): inbox selection checkbox and Empty Bin/Spam actions

apps/mail/components/mail/empty-folder-button.tsx

@@ -0,0 +1,78 @@
+import { useState, useCallback } from 'react';
+import { toast } from 'sonner';
+import { Button } from '@/components/ui/button';
+import { Trash } from '@/components/icons/icons';
+import { trpcClient } from '@/providers/query-provider';
+import { useOptimisticActions } from '@/hooks/use-optimistic-actions';
+
+interface Props {
+  folder: string;
+}
+
+// A small utility component to permanently delete all emails in the currently opened folder (spam / bin)
+export default function EmptyFolderButton({ folder }: Props) {
+  const { optimisticDeleteThreads, optimisticMoveThreadsTo } = useOptimisticActions();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleEmptyFolder = useCallback(async () => {
+    if (isLoading) return;
+
+    const confirmText =
+      folder === 'spam'
+        ? 'This will delete all emails in the Spam folder and move them to Bin. Continue?'
+        : 'This will permanently delete all emails in the Bin folder. Continue?';
+
+    if (!window.confirm(confirmText)) return;
+
+    setIsLoading(true);
+    try {
+      const ids: string[] = [];
+      let cursor = '';
+      const MAX_PER_PAGE = 100;
+      while (true) {
+        // Fetch mails in pages of 100 until there is no nextPageToken
+        const page = await trpcClient.mail.listThreads.query({
+          folder,
+          q: '',
+          max: MAX_PER_PAGE,
+          cursor,
+        } as any);
+        if (page?.threads?.length) {
+          ids.push(...page.threads.map((t: { id: string }) => t.id));
+        }
+        if (!page?.nextPageToken) break;
+        cursor = page.nextPageToken;
+      }
+
+      if (!ids.length) {
+        toast.success('Folder already empty');
+        return;
+      }
+
+      if (folder === 'spam') {
+        // Move all spam to bin
+        optimisticMoveThreadsTo(ids, folder, 'bin');
+      } else {
+        // Permanently delete everything from bin
+        optimisticDeleteThreads(ids, folder);
+      }
+    } catch (error: any) {
+      console.error('Failed to empty folder', error);
+      toast.error(error?.message ?? 'Failed to empty folder');
+    } finally {
+      setIsLoading(false);
+    }
+  }, [folder, isLoading, optimisticDeleteThreads, optimisticMoveThreadsTo]);
+
+  return (
+    <Button
+      size="sm"
+      variant="destructive"
+      disabled={isLoading}
+      onClick={handleEmptyFolder}
+      className="px-4 flex items-center justify-center"
+    >
+      {folder === 'spam' ? 'Empty Spam' : 'Empty Bin'}
+    </Button>
+  );
+} 

apps/mail/components/mail/mail-list.tsx

@@ -58,6 +58,7 @@ import { useQueryState } from 'nuqs';
 import { Categories } from './mail';
 import { useAtom } from 'jotai';
 import { useThreadNotes } from '@/hooks/use-notes';
+import { Checkbox } from '@/components/ui/checkbox';
 
 const Thread = memo(
   function Thread({
@@ -420,6 +421,26 @@ const Thread = memo(
             </div>
 
             <div className="relative flex w-full items-center justify-between gap-4 px-4">
+              {/* Selection checkbox */}
+              <Checkbox
+                className="mr-2 h-4 w-4"
+                checked={isMailBulkSelected}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+                onCheckedChange={() => {
+                  if (!idToUse) return;
+                  setMail((prev) => {
+                    const already = prev.bulkSelected.includes(idToUse);
+                    return {
+                      ...prev,
+                      bulkSelected: already
+                        ? prev.bulkSelected.filter((id) => id !== idToUse)
+                        : [...prev.bulkSelected, idToUse],
+                    };
+                  });
+                }}
+              />
               <div>
                 <Avatar
                   className={cn(

apps/mail/components/mail/mail.tsx

@@ -67,6 +67,7 @@ import { useQueryState } from 'nuqs';
 import { useAtom } from 'jotai';
 import { toast } from 'sonner';
 import SelectAllCheckbox from './select-all-checkbox';
+import EmptyFolderButton from './empty-folder-button';
 
 interface ITag {
   id: string;
@@ -519,6 +520,16 @@ export function MailLayout() {
                       ) : null}
                     </div>
                     <AutoLabelingSettings />
+                    {/* Bulk action buttons when emails are selected */}
+                    {mail.bulkSelected.length > 0 && (
+                      <div className="dark:bg-iconDark/20 relative ml-2 rounded-full" aria-hidden>
+                        <BulkSelectActions />
+                      </div>
+                    )}
+                    {/* Empty folder actions for Spam & Bin */}
+                    {['spam', 'bin'].includes(folder) && (
+                      <EmptyFolderButton folder={folder} />
+                    )}
                     <div className="dark:bg-iconDark/20 relative ml-2 h-3 w-0.5 rounded-full bg-[#E7E7E7]" />{' '}
                     <Button
                       onClick={() => {

docker-compose.db.yaml

@@ -36,4 +36,4 @@ services:
 
 volumes:
   valkey-data:
-  postgres-data:
+  postgres-data: