Phase 0.2: migrate remaining SVGs to lucide-react icons

frontend/src/components/mail/MailDetail.tsx

@@ -10,6 +10,7 @@ import type { Mail, MailAttachment } from '@/api/mail';
 import { decodeMimeHeader } from '@/api/mail';
 import { Button } from '@/components/ui/Button';
 import { EmptyState } from '@/components/ui/EmptyState';
+import { FileText, Loader2 } from 'lucide-react';
 
 export interface MailDetailProps {
   mail: Mail | null; loading: boolean;
@@ -75,10 +76,7 @@ export function MailDetail({
   if (loading) {
     return (
       <div className="flex items-center justify-center py-12" data-testid="mail-detail-loading">
-        <svg className="animate-spin h-5 w-5 text-secondary-400" fill="none" viewBox="0 0 24 24" aria-hidden="true">
-          <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4" />
-          <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z" />
-        </svg>
+        <Loader2 className="animate-spin h-5 w-5 text-secondary-400" aria-hidden="true" />
         <span className="ml-2 text-sm text-secondary-500">{t('common.loading')}</span>
       </div>
     );
@@ -158,9 +156,7 @@ export function MailDetail({
             <ul className="space-y-1 md:space-y-2">
               {mail.attachments.map((att) => (
                 <li key={att.id} className="flex items-center gap-3 p-2 rounded-md hover:bg-secondary-50 min-h-touch">
-                  <svg className="w-5 h-5 text-secondary-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-                  </svg>
+                  <FileText className="w-5 h-5 text-secondary-400 flex-shrink-0" aria-hidden="true" strokeWidth={2} />
                   <div className="flex-1 min-w-0">
                     <p className="text-sm text-secondary-800 truncate">{decodeMimeHeader(att.filename)}</p>
                     <p className="text-xs text-secondary-400">{formatBytes(att.size_bytes)}</p>