From 8d7cd26fa91e4eb98e6835c0107c98f8c7c2829b Mon Sep 17 00:00:00 2001
From: Linus Rath <139418639+rathlinus@users.noreply.github.com>
Date: Sat, 28 Mar 2026 22:53:10 +0100
Subject: [PATCH] feat: enhance compose functionality with button integration
 and translations

---
 app/[locale]/page.tsx             | 35 ++++++++++++++++++-------------
 components/email/email-viewer.tsx |  9 ++++++++
 components/layout/sidebar.tsx     | 15 +------------
 locales/en/common.json            |  2 ++
 4 files changed, 33 insertions(+), 28 deletions(-)

diff --git a/app/[locale]/page.tsx b/app/[locale]/page.tsx
index 4541c9f1..fda1d125 100644
--- a/app/[locale]/page.tsx
+++ b/app/[locale]/page.tsx
@@ -1497,20 +1497,23 @@ export default function Home() {
             </ErrorBoundary>
             </div>
 
-            {/* Floating Compose Button (mobile) */}
-            {isMobile && (
-              <Button
-                onClick={() => {
-                  setComposerMode('compose');
-                  setShowComposer(true);
-                  setActiveView('viewer');
-                }}
-                className="absolute bottom-4 right-4 z-40 h-14 w-14 rounded-full shadow-lg"
-                aria-label={t('sidebar.compose')}
-              >
-                <PenSquare className="h-6 w-6" />
-              </Button>
-            )}
+            {/* Floating Compose Button */}
+            <Button
+              onClick={() => {
+                setComposerMode('compose');
+                setShowComposer(true);
+                if (isMobile) setActiveView('viewer');
+              }}
+              className={cn(
+                "absolute z-40 rounded-full shadow-lg",
+                isMobile ? "bottom-4 right-4 h-14 w-14" : "bottom-4 right-4 h-12 w-12"
+              )}
+              aria-label={t('sidebar.compose')}
+              title={t('sidebar.compose_hint')}
+              data-tour="compose-button"
+            >
+              <PenSquare className={isMobile ? "h-6 w-6" : "h-5 w-5"} />
+            </Button>
           </div>
 
           {/* Email list resize handle (desktop only) */}
@@ -1665,6 +1668,10 @@ export default function Home() {
                     onNavigatePrev={handleNavigatePrev}
                     onShowShortcuts={() => setShowShortcutsModal(true)}
                     onEditDraft={handleEditDraft}
+                    onCompose={() => {
+                      setComposerMode('compose');
+                      setShowComposer(true);
+                    }}
                     currentUserEmail={client?.getUsername()}
                     currentUserName={client?.getUsername()?.split("@")[0]}
                     currentMailboxRole={mailboxes.find(m => m.id === selectedMailbox)?.role}
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index c7befde0..5f7e5668 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -68,6 +68,7 @@ import {
   HelpCircle,
   EditIcon,
   PlayCircle,
+  PenSquare,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 import type { Attachment as PostalMimeAttachment } from 'postal-mime';
@@ -121,6 +122,7 @@ interface EmailViewerProps {
   onNavigatePrev?: () => void;
   onShowShortcuts?: () => void;
   onEditDraft?: () => void;
+  onCompose?: () => void;
   currentUserEmail?: string;
   currentUserName?: string;
   currentMailboxRole?: string;
@@ -865,6 +867,7 @@ export function EmailViewer({
   onNavigatePrev,
   onShowShortcuts,
   onEditDraft,
+  onCompose,
   currentUserEmail,
   currentUserName,
   currentMailboxRole,
@@ -2836,6 +2839,12 @@ export function EmailViewer({
           </div>
           <h3 className="text-xl font-semibold text-foreground mb-2">{t('no_conversation_selected')}</h3>
           <p className="text-muted-foreground">{t('no_conversation_description')}</p>
+          {onCompose && (
+            <Button onClick={onCompose} className="mt-6" title={t('compose_hint')}>
+              <PenSquare className="w-4 h-4 mr-2" />
+              {t('compose')}
+            </Button>
+          )}
         </div>
       </div>
     );
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 65bf03ed..cb1a22dc 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -12,7 +12,6 @@ import {
   Star,
   Trash2,
   Archive,
-  PenSquare,
   ChevronsLeft,
   ChevronsRight,
   ChevronRight,
@@ -762,19 +761,7 @@ export function Sidebar({
         {!isCollapsed && <PluginSlot name="sidebar-widget" className="border-t border-border" />}
       </div>
 
-      {/* Compose Button */}
-      <div className={cn("border-t border-border", isCollapsed ? "flex justify-center py-3" : "px-3 py-3")}>
-        {isCollapsed ? (
-          <Button onClick={onCompose} variant="ghost" size="icon" title={t("compose_hint")} data-tour="compose-button">
-            <PenSquare className="w-5 h-5" />
-          </Button>
-        ) : (
-          <Button onClick={onCompose} className="w-full" title={t("compose_hint")} data-tour="compose-button">
-            <PenSquare className="w-4 h-4 mr-2" />
-            {t("compose")}
-          </Button>
-        )}
-      </div>
+
     </div>
   );
 }
diff --git a/locales/en/common.json b/locales/en/common.json
index 43acd674..21cdbd03 100644
--- a/locales/en/common.json
+++ b/locales/en/common.json
@@ -197,6 +197,8 @@
     "no_email_description": "Select an email from the list to view it here",
     "no_conversation_selected": "No conversation selected",
     "no_conversation_description": "Choose a conversation from the list to read it here",
+    "compose": "Compose",
+    "compose_hint": "Compose new message",
     "no_subject": "(No Subject)",
     "loading_email": "Loading email...",
     "loading": "Loading...",