alma/Neah
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mail page fix design

Browse Source
This commit is contained in:
alma 2025-04-21 21:02:31 +02:00
parent 9db7762e38
commit 384a6da21e
2 changed files with 23 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
app/courrier/page.tsx
View File

@ -370,20 +370,11 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
decodedContent = convertCharset(partBody, partHeaderInfo.charset);
}
// Preserve the original MIME structure
if (partHeaderInfo.contentType.includes('text/html')) {
content = `
<div class="email-part" data-mime-type="text/html" data-charset="${partHeaderInfo.charset}">
${decodedContent}
</div>
`;
content = decodedContent;
break;
} else if (partHeaderInfo.contentType.includes('text/plain') && !content) {
content = `
<div class="email-part" data-mime-type="text/plain" data-charset="${partHeaderInfo.charset}">
<pre style="white-space: pre-wrap; font-family: inherit;">${decodedContent}</pre>
</div>
`;
content = decodedContent;
}
} catch (error) {
console.error('Error decoding email part:', error);
@ -392,54 +383,43 @@ function getReplyBody(email: Email, type: 'reply' | 'reply-all' | 'forward' = 'r
} else {
// Handle simple email
try {
let decodedBody = '';
if (headerInfo.encoding === 'base64') {
decodedBody = decodeBase64(body, headerInfo.charset);
content = decodeBase64(body, headerInfo.charset);
} else if (headerInfo.encoding === 'quoted-printable') {
decodedBody = decodeQuotedPrintable(body, headerInfo.charset);
content = decodeQuotedPrintable(body, headerInfo.charset);
} else {
decodedBody = convertCharset(body, headerInfo.charset);
content = convertCharset(body, headerInfo.charset);
}
content = `
<div class="email-part" data-mime-type="${headerInfo.contentType}" data-charset="${headerInfo.charset}">
${headerInfo.contentType.includes('text/html') ? decodedBody : `<pre style="white-space: pre-wrap; font-family: inherit;">${decodedBody}</pre>`}
</div>
`;
} catch (error) {
console.error('Error decoding email body:', error);
content = body;
}
}
// Clean and sanitize HTML content while preserving structure
// Clean and sanitize HTML content
content = cleanHtml(content);
// Format the reply/forward content with proper structure and direction
// Format the reply/forward content
let formattedContent = '';
if (type === 'forward') {
formattedContent = `
<div class="email-container" dir="ltr">
<div class="email-header" dir="ltr">
<div class="prose max-w-none" dir="ltr">
<div class="border-l-4 border-gray-300 pl-4 my-4">
<p class="text-sm text-gray-600 mb-2">Forwarded message from ${email.from}</p>
<p class="text-sm text-gray-600 mb-2">Date: ${new Date(email.date).toLocaleString()}</p>
<p class="text-sm text-gray-600 mb-2">Subject: ${email.subject}</p>
<p class="text-sm text-gray-600 mb-2">To: ${email.to}</p>
${email.cc ? `<p class="text-sm text-gray-600 mb-2">Cc: ${email.cc}</p>` : ''}
</div>
<div class="email-content" dir="auto">
${content}
<div class="mt-4 prose-sm">${content}</div>
</div>
</div>
`;
} else {
formattedContent = `
<div class="email-container" dir="ltr">
<div class="email-header" dir="ltr">
<div class="prose max-w-none" dir="ltr">
<div class="border-l-4 border-gray-300 pl-4 my-4">
<p class="text-sm text-gray-600 mb-2">On ${new Date(email.date).toLocaleString()}, ${email.from} wrote:</p>
</div>
<div class="email-content" dir="auto">
${content}
<div class="mt-4 prose-sm">${content}</div>
</div>
</div>
`;
@ -1413,13 +1393,9 @@ export default function CourrierPage() {
const handleReply = (type: 'reply' | 'reply-all' | 'forward') => {
if (!selectedEmail) return;
// Phase 1: Format the original email content
const originalContent = getReplyBody(selectedEmail, type);
// Phase 2: Set up the composition interface
const getReplyTo = () => {
if (type === 'forward') return '';
return selectedEmail.from;
return selectedEmail.from;
};
const getReplyCc = () => {
@ -1429,17 +1405,20 @@ export default function CourrierPage() {
const getReplySubject = () => {
const subject = selectedEmail.subject || '';
if (type === 'forward') {
if (type === 'forward') {
return subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`;
}
return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
};
// Get the formatted original email content
const originalContent = getReplyBody(selectedEmail, type);
// Update the compose form with the reply content
setComposeTo(getReplyTo());
setComposeCc(getReplyCc());
setComposeSubject(getReplySubject());
setComposeBody(''); // Start with empty body for new content
setComposeBody('');
setComposeBcc('');
// Show the compose form and CC field for Reply All
@ -1448,11 +1427,10 @@ export default function CourrierPage() {
setShowBcc(false);
setAttachments([]);
// Pass the formatted original email content to the compose modal
// Pass the original email content to the compose modal
setOriginalEmail({
content: originalContent,
type
});
};
// Add the confirmation dialog component

19
components/ComposeEmail.tsx
View File

@ -68,21 +68,7 @@ export default function ComposeEmail({
const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
if (composeBodyRef.current) {
// Get the current content
const content = composeBodyRef.current.innerHTML;
// Create a temporary div to parse the content
const tempDiv = document.createElement('div');
tempDiv.innerHTML = content;
// Check if the content contains RTL text
const hasRTL = /[\u0591-\u07FF\u200F\u202B\u202E\uFB1D-\uFDFD\uFE70-\uFEFC]/.test(content);
// Set the appropriate direction
composeBodyRef.current.dir = hasRTL ? 'rtl' : 'ltr';
// Encode the content
const encodedContent = encodeComposeContent(content);
const encodedContent = encodeComposeContent(composeBodyRef.current.innerHTML);
setComposeBody(encodedContent);
}
};
@ -267,10 +253,11 @@ export default function ComposeEmail({
className="w-full h-full mt-1 bg-white border border-gray-300 rounded-md p-2 text-gray-900 overflow-y-auto"
style={{
minHeight: '200px',
direction: 'ltr',
textAlign: 'left',
unicodeBidi: 'bidi-override'
}}
dir="auto"
dir="ltr"
/>
</div>
</div>