From 68d4a9a641075a9f5a93c15e3f9529ce7f88f418 Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Thu, 12 Mar 2026 00:32:36 +0100
Subject: [PATCH] feat: add email selection functionality with toggle and
 update translations

---
 app/[locale]/page.tsx                  | 33 +++++++++++-
 components/email/email-list-item.tsx   | 35 +++++++------
 components/email/thread-email-item.tsx | 35 +++++++------
 components/email/thread-list-item.tsx  | 70 ++++++++++++++------------
 locales/en/common.json                 |  2 +
 5 files changed, 110 insertions(+), 65 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 4b79695c..969b490f 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -36,7 +36,7 @@ import { isFilterEmpty, activeFilterCount } from "@/lib/jmap/search-utils";
 import { WelcomeBanner } from "@/components/ui/welcome-banner";
 import { NavigationRail } from "@/components/layout/navigation-rail";
 import { Input } from "@/components/ui/input";
-import { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine } from "lucide-react";
+import { Search, Filter, ChevronDown, X, Paperclip, Star, Mail, MailOpen, RotateCcw, PenSquare, PenLine, CheckSquare, Square } from "lucide-react";
 import { ResizeHandle } from "@/components/layout/resize-handle";
 import { Button } from "@/components/ui/button";
 
@@ -73,8 +73,10 @@ export default function Home() {
     newEmailNotification,
     selectEmail,
     selectMailbox,
+    selectedEmailIds,
     selectAllEmails,
     clearSelection,
+    toggleEmailSelection,
     fetchMailboxes,
     fetchEmails,
     fetchQuota,
@@ -896,6 +898,35 @@ export default function Home() {
             <div className="border-b border-border bg-background">
               <div className="px-3 py-3">
                 <div className="flex items-center gap-1.5">
+                  {/* Select / Select All toggle */}
+                  <button
+                    type="button"
+                    onClick={() => {
+                      if (selectedEmailIds.size > 0) {
+                        if (selectedEmailIds.size === emails.length) {
+                          clearSelection();
+                        } else {
+                          selectAllEmails();
+                        }
+                      } else {
+                        // Enter selection mode by selecting the first email
+                        if (emails.length > 0) toggleEmailSelection(emails[0].id);
+                      }
+                    }}
+                    className={cn(
+                      "flex-shrink-0 p-2 rounded-md transition-colors",
+                      selectedEmailIds.size > 0
+                        ? "bg-primary/10 text-primary"
+                        : "text-muted-foreground hover:text-foreground hover:bg-muted"
+                    )}
+                    title={selectedEmailIds.size > 0 ? (selectedEmailIds.size === emails.length ? t('email_list.batch_actions.clear_selection') : t('email_list.batch_actions.select_all')) : t('email_list.batch_actions.select')}
+                  >
+                    {selectedEmailIds.size > 0 ? (
+                      <CheckSquare className="w-4 h-4" />
+                    ) : (
+                      <Square className="w-4 h-4" />
+                    )}
+                  </button>
                   <form onSubmit={(e) => { e.preventDefault(); if (searchQuery.trim()) handleSearch(searchQuery); }} className="relative flex-1">
                     <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
                     <Input
diff --git a/components/email/email-list-item.tsx b/components/email/email-list-item.tsx
index a00d6d3c..510da2b7 100644
--- a/components/email/email-list-item.tsx
+++ b/components/email/email-list-item.tsx
@@ -88,22 +88,25 @@ export function EmailListItem({ email, selected, onClick, onContextMenu }: Email
       style={{ minHeight: 'var(--list-item-height)' }}
     >
       <div className="flex items-start gap-3 px-4 py-3">
-        {/* Checkbox with smooth animation */}
-        <button
-          onClick={handleCheckboxClick}
-          className={cn(
-            "p-3 lg:p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
-            "hover:bg-muted/50 hover:scale-110",
-            "active:scale-95",
-            isChecked && "text-primary"
-          )}
-        >
-          {isChecked ? (
-            <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
-          ) : (
-            <Square className="w-4 h-4 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
-          )}
-        </button>
+        {/* Checkbox - only visible when in selection mode */}
+        {selectedEmailIds.size > 0 && (
+          <button
+            onClick={handleCheckboxClick}
+            className={cn(
+              "p-3 lg:p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
+              "hover:bg-muted/50 hover:scale-110",
+              "active:scale-95",
+              "animate-in fade-in zoom-in-95 duration-150",
+              isChecked && "text-primary"
+            )}
+          >
+            {isChecked ? (
+              <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
+            ) : (
+              <Square className="w-4 h-4 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
+            )}
+          </button>
+        )}
 
         {/* Unread indicator */}
         {isUnread && (
diff --git a/components/email/thread-email-item.tsx b/components/email/thread-email-item.tsx
index 84f7b9fe..3e06daf0 100644
--- a/components/email/thread-email-item.tsx
+++ b/components/email/thread-email-item.tsx
@@ -75,22 +75,25 @@ export function ThreadEmailItem({
       onContextMenu={handleContextMenu}
     >
       <div className="flex items-start gap-3">
-        {/* Checkbox */}
-        <button
-          onClick={handleCheckboxClick}
-          className={cn(
-            "p-1 rounded mt-0.5 flex-shrink-0 transition-all duration-200",
-            "hover:bg-muted/50 hover:scale-110",
-            "active:scale-95",
-            isChecked && "text-primary"
-          )}
-        >
-          {isChecked ? (
-            <CheckSquare className="w-3.5 h-3.5 animate-in zoom-in-50 duration-200" />
-          ) : (
-            <Square className="w-3.5 h-3.5 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
-          )}
-        </button>
+        {/* Checkbox - only visible when in selection mode */}
+        {selectedEmailIds.size > 0 && (
+          <button
+            onClick={handleCheckboxClick}
+            className={cn(
+              "p-1 rounded mt-0.5 flex-shrink-0 transition-all duration-200",
+              "hover:bg-muted/50 hover:scale-110",
+              "active:scale-95",
+              "animate-in fade-in zoom-in-95 duration-150",
+              isChecked && "text-primary"
+            )}
+          >
+            {isChecked ? (
+              <CheckSquare className="w-3.5 h-3.5 animate-in zoom-in-50 duration-200" />
+            ) : (
+              <Square className="w-3.5 h-3.5 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
+            )}
+          </button>
+        )}
 
         {/* Unread indicator */}
         {isUnread && (
diff --git a/components/email/thread-list-item.tsx b/components/email/thread-list-item.tsx
index 4e83313a..334f420d 100644
--- a/components/email/thread-list-item.tsx
+++ b/components/email/thread-list-item.tsx
@@ -102,22 +102,25 @@ const SingleEmailItem = React.forwardRef<HTMLDivElement, SingleEmailItemProps>(
         style={{ minHeight: 'var(--list-item-height)' }}
       >
         <div className="flex items-start gap-3 px-3 py-3">
-          {/* Checkbox */}
-          <button
-            onClick={handleCheckboxClick}
-            className={cn(
-              "p-3 lg:p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
-              "hover:bg-muted/50 hover:scale-110",
-              "active:scale-95",
-              isChecked && "text-primary"
-            )}
-          >
-            {isChecked ? (
-              <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
-            ) : (
-              <Square className="w-4 h-4 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
-            )}
-          </button>
+          {/* Checkbox - only visible when in selection mode */}
+          {selectedEmailIds.size > 0 && (
+            <button
+              onClick={handleCheckboxClick}
+              className={cn(
+                "p-3 lg:p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
+                "hover:bg-muted/50 hover:scale-110",
+                "active:scale-95",
+                "animate-in fade-in zoom-in-95 duration-150",
+                isChecked && "text-primary"
+              )}
+            >
+              {isChecked ? (
+                <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
+              ) : (
+                <Square className="w-4 h-4 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
+              )}
+            </button>
+          )}
 
           {isUnread && (
             <div className="absolute left-1 top-1/2 -translate-y-1/2">
@@ -322,22 +325,25 @@ export const ThreadListItem = React.forwardRef<HTMLDivElement, ThreadListItemPro
           style={{ minHeight: 'var(--list-item-height)' }}
         >
           <div className="flex items-start gap-3 px-3 py-3">
-            {/* Checkbox for thread selection */}
-            <button
-              onClick={handleThreadCheckboxClick}
-              className={cn(
-                "p-3 lg:p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
-                "hover:bg-muted/50 hover:scale-110",
-                "active:scale-95",
-                isChecked && "text-primary"
-              )}
-            >
-              {isChecked ? (
-                <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
-              ) : (
-                <Square className="w-4 h-4 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
-              )}
-            </button>
+            {/* Checkbox for thread selection - only visible when in selection mode */}
+            {selectedEmailIds.size > 0 && (
+              <button
+                onClick={handleThreadCheckboxClick}
+                className={cn(
+                  "p-3 lg:p-1 rounded mt-2 flex-shrink-0 transition-all duration-200",
+                  "hover:bg-muted/50 hover:scale-110",
+                  "active:scale-95",
+                  "animate-in fade-in zoom-in-95 duration-150",
+                  isChecked && "text-primary"
+                )}
+              >
+                {isChecked ? (
+                  <CheckSquare className="w-4 h-4 animate-in zoom-in-50 duration-200" />
+                ) : (
+                  <Square className="w-4 h-4 text-muted-foreground opacity-60 hover:opacity-100 transition-opacity" />
+                )}
+              </button>
+            )}
 
             {!isMobile && (
               <button
diff --git a/locales/en/common.json b/locales/en/common.json
index b7e774c5..0ba40875 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -111,6 +111,8 @@
     "loading_more": "Loading more emails...",
     "no_more_emails": "No more emails to load",
     "batch_actions": {
+      "select": "Select emails",
+      "select_all": "Select all",
       "mark_read": "Mark as read",
       "mark_unread": "Mark as unread",
       "delete": "Delete",