From e3f9111484852c45eac3f86c0ecf9adb31615c86 Mon Sep 17 00:00:00 2001
From: Tola Leng <tolaleng.oss@gmail.com>
Date: Tue, 17 Jun 2025 21:39:12 +0800
Subject: [PATCH] Refactor: Move test email button and dialog

---
 .../settings/general/MailSettingsTab.tsx      | 32 ++++++++++---------
 1 file changed, 17 insertions(+), 15 deletions(-)

diff --git a/application/src/components/settings/general/MailSettingsTab.tsx b/application/src/components/settings/general/MailSettingsTab.tsx
index 45f3ff7..1e02c95 100644
--- a/application/src/components/settings/general/MailSettingsTab.tsx
+++ b/application/src/components/settings/general/MailSettingsTab.tsx
@@ -1,5 +1,4 @@
 
-
 import React, { useState } from 'react';
 import { Input } from "@/components/ui/input";
 import { Switch } from "@/components/ui/switch";
@@ -27,18 +26,15 @@ const MailSettingsTab: React.FC<MailSettingsTabProps> = ({
       setIsTestingEmail(true);
       console.log('Testing email with data:', data);
       
-      const response = await fetch('/api/settings', {
+      const response = await fetch('/api/settings/test/email', {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
         },
         body: JSON.stringify({
-          action: 'sendTestEmail',
-          data: {
-            email: data.email,
-            template: data.template,
-            ...(data.collection && { collection: data.collection })
-          }
+          email: data.email,
+          template: data.template,
+          ...(data.collection && { collection: data.collection })
         })
       });
 
@@ -257,10 +253,16 @@ const MailSettingsTab: React.FC<MailSettingsTabProps> = ({
             )}
           />
         </div>
-        
-        {/* Only show Test Email button, removed Test Connection button */}
-        {isEditing && form.watch('smtp.enabled') && (
-          <div className="mt-4">
+      </div>
+
+      {/* Test Email button - outside the form area and always visible when SMTP is enabled */}
+      {form.watch('smtp.enabled') && (
+        <div className="mt-6 pt-4 border-t border-border">
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <h3 className="text-lg font-medium">{t("testEmailSettings", "settings")}</h3>
+              <p className="text-sm text-muted-foreground">{t("testEmailDescription", "settings")}</p>
+            </div>
             <Button 
               type="button" 
               variant="outline" 
@@ -272,8 +274,8 @@ const MailSettingsTab: React.FC<MailSettingsTabProps> = ({
               {t("testEmail", "settings")}
             </Button>
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
       <TestEmailDialog
         open={showTestEmailDialog}
@@ -285,4 +287,4 @@ const MailSettingsTab: React.FC<MailSettingsTabProps> = ({
   );
 };
 
-export default MailSettingsTab;
+export default MailSettingsTab;
\ No newline at end of file