feat: add Send Test Email button for SMTP Fallback config

Agent-Logs-Url: https://github.com/christianlouis/InboxConverge/sessions/9485ffb9-ce3d-4c6b-9d2c-9144dd4287ff

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

frontend/src/app/settings/page.tsx

@@ -18,6 +18,7 @@ import {
   Bug,
   RotateCcw,
   Tags,
+  Send,
 } from 'lucide-react';
 
 const DEFAULT_GMAIL_IMPORT_LABEL_TEMPLATES = ['{{source_email}}', 'imported'];
@@ -249,6 +250,19 @@ function SettingsContent() {
     },
   });
 
+  const [smtpTestResult, setSmtpTestResult] = useState<{ success: boolean; message: string } | null>(null);
+  const testSmtpMutation = useMutation({
+    mutationFn: smtpApi.test,
+    onSuccess: (result) => {
+      setSmtpTestResult(result);
+      setTimeout(() => setSmtpTestResult(null), 6000);
+    },
+    onError: () => {
+      setSmtpTestResult({ success: false, message: 'Request failed. Check your network connection.' });
+      setTimeout(() => setSmtpTestResult(null), 6000);
+    },
+  });
+
   const handleProfileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setProfileForm((prev) => ({ ...prev, [name]: value }));
@@ -625,6 +639,21 @@ function SettingsContent() {
                     'Save SMTP Settings'
                   )}
                 </button>
+                {smtpConfig && (
+                  <button
+                    type="button"
+                    onClick={() => testSmtpMutation.mutate()}
+                    disabled={testSmtpMutation.isPending}
+                    title="Send a test email to your account address using these SMTP settings"
+                    className="flex items-center gap-1.5 px-4 py-2 text-sm bg-amber-50 text-amber-700 rounded-md hover:bg-amber-100 disabled:opacity-50 transition-colors"
+                  >
+                    {testSmtpMutation.isPending ? (
+                      <><Loader2 className="h-4 w-4 animate-spin" />Sending…</>
+                    ) : (
+                      <><Send className="h-4 w-4" />Send Test Email</>
+                    )}
+                  </button>
+                )}
                 {smtpConfig && (
                   <button
                     type="button"
@@ -642,6 +671,22 @@ function SettingsContent() {
                   </span>
                 )}
               </div>
+              {smtpTestResult !== null && (
+                <div
+                  className={`flex items-center gap-2 text-sm rounded-md px-3 py-2 border ${
+                    smtpTestResult.success
+                      ? 'text-green-700 bg-green-50 border-green-200'
+                      : 'text-red-700 bg-red-50 border-red-200'
+                  }`}
+                >
+                  {smtpTestResult.success ? (
+                    <CheckCircle className="h-4 w-4 flex-shrink-0" />
+                  ) : (
+                    <AlertTriangle className="h-4 w-4 flex-shrink-0" />
+                  )}
+                  {smtpTestResult.message}
+                </div>
+              )}
             </form>
           )}
         </div>

frontend/src/lib/api.ts

@@ -495,6 +495,13 @@ export const smtpApi = {
   async remove(): Promise<void> {
     await api.delete('/users/smtp-config');
   },
+
+  async test(): Promise<{ success: boolean; message: string }> {
+    const response = await api.post<{ success: boolean; message: string }>(
+      '/users/smtp-config/test'
+    );
+    return response.data;
+  },
 };
 
 // ── Admin Types ─────────────────────────────────────────────────────────