From 60aff695fe2df65250b061cdac0b860ec46fdae6 Mon Sep 17 00:00:00 2001
From: Matthieu MALVACHE <matthieu@ma2t.com>
Date: Thu, 8 Jan 2026 01:01:37 +0100
Subject: [PATCH] fix(email-composer): Improve readability and add discard
 button

- Fix textarea colors for proper theme support (light/dark mode)
- Fix modal height to prevent composer from collapsing
- Add explicit "Discard" button in footer for better UX
- Fix hardcoded colors in attachments section for theme support
- Use translations for all user-facing text

Closes #6
---
 app/[locale]/page.tsx               |  2 +-
 components/email/email-composer.tsx | 34 +++++++++++++++++++----------
 locales/en/common.json              |  3 ++-
 locales/fr/common.json              |  3 ++-
 4 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index f585000..f7f30bf 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -810,7 +810,7 @@ export default function Home() {
         {showComposer && (
           <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4 md:p-0">
             <div className={cn(
-              "w-full h-full md:h-auto md:max-w-3xl md:max-h-[600px]",
+              "w-full h-full md:h-[600px] md:max-w-3xl",
               "max-md:flex max-md:flex-col"
             )}>
               <ErrorBoundary
diff --git a/components/email/email-composer.tsx b/components/email/email-composer.tsx
index aaf4baa..5d9fad6 100644
--- a/components/email/email-composer.tsx
+++ b/components/email/email-composer.tsx
@@ -301,7 +301,7 @@ export function EmailComposer({
     <div className={cn("flex flex-col h-full bg-background border rounded-lg", className)}>
       <div className="flex items-center justify-between px-4 py-3 border-b">
         <div className="flex items-center gap-2">
-          <h3 className="font-semibold">New Message</h3>
+          <h3 className="font-semibold">{t('new_message')}</h3>
           {saveStatus === 'saving' && (
             <div className="flex items-center gap-1 text-xs text-muted-foreground">
               <Save className="w-3 h-3 animate-pulse" />
@@ -395,9 +395,9 @@ export function EmailComposer({
           </div>
         </div>
 
-        <div className="flex-1 px-4 py-3">
+        <div className="flex-1 px-4 py-3 min-h-0">
           <textarea
-            className="w-full h-full resize-none outline-none text-sm"
+            className="w-full h-full resize-none outline-none text-sm bg-transparent text-foreground placeholder:text-muted-foreground"
             placeholder="Compose email..."
             value={body}
             onChange={(e) => setBody(e.target.value)}
@@ -413,7 +413,7 @@ export function EmailComposer({
                   key={index}
                   className={cn(
                     "flex items-center gap-2 px-3 py-1 rounded-md text-sm",
-                    att.error ? "bg-red-50 text-red-700" : "bg-gray-100 text-gray-700"
+                    att.error ? "bg-red-500/10 text-red-600 dark:text-red-400" : "bg-muted text-foreground"
                   )}
                 >
                   {att.uploading ? (
@@ -424,12 +424,12 @@ export function EmailComposer({
                     <Paperclip className="w-3 h-3" />
                   )}
                   <span className="max-w-[200px] truncate">{att.file.name}</span>
-                  <span className="text-xs text-gray-500">
+                  <span className="text-xs text-muted-foreground">
                     ({(att.file.size / 1024).toFixed(1)} KB)
                   </span>
                   <button
                     onClick={() => removeAttachment(index)}
-                    className="ml-1 hover:text-red-600"
+                    className="ml-1 hover:text-red-500"
                   >
                     <X className="w-3 h-3" />
                   </button>
@@ -440,7 +440,17 @@ export function EmailComposer({
         )}
 
         <div className="flex items-center justify-between px-4 py-3 border-t">
-          <div>
+          {/* Left side - Discard button */}
+          <button
+            type="button"
+            onClick={handleClose}
+            className="text-sm text-muted-foreground hover:text-red-500 transition-colors"
+          >
+            {t('discard')}
+          </button>
+
+          {/* Right side - Attach and Send */}
+          <div className="flex items-center gap-2">
             <input
               ref={fileInputRef}
               type="file"
@@ -455,13 +465,13 @@ export function EmailComposer({
               onClick={() => fileInputRef.current?.click()}
             >
               <Paperclip className="w-4 h-4 mr-2" />
-              Attach
+              {t('attach')}
+            </Button>
+            <Button onClick={handleSend}>
+              <Send className="w-4 h-4 mr-2" />
+              {t('send')}
             </Button>
           </div>
-          <Button onClick={handleSend}>
-            <Send className="w-4 h-4 mr-2" />
-            Send
-          </Button>
         </div>
       </div>
     </div>
diff --git a/locales/en/common.json b/locales/en/common.json
index 3cc8718..f66c5cf 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -139,7 +139,8 @@
     "body_placeholder": "Write your message...",
     "send": "Send",
     "cancel": "Cancel",
-    "attach": "Attach files",
+    "attach": "Attach",
+    "discard": "Discard",
     "discard_draft_confirm": "You have unsaved changes. Do you want to discard this draft?",
     "quote": {
       "reply_header": "On {{date}}, {{sender}} wrote:",
diff --git a/locales/fr/common.json b/locales/fr/common.json
index 7b641b1..142810f 100644
--- a/locales/fr/common.json
+++ b/locales/fr/common.json
@@ -139,7 +139,8 @@
     "body_placeholder": "Écrivez votre message...",
     "send": "Envoyer",
     "cancel": "Annuler",
-    "attach": "Joindre des fichiers",
+    "attach": "Joindre",
+    "discard": "Supprimer",
     "discard_draft_confirm": "Vous avez des modifications non enregistrées. Voulez-vous supprimer ce brouillon ?",
     "quote": {
       "reply_header": "Le {{date}}, {{sender}} a écrit :",