1997 lines
68 KiB
TypeScript
1997 lines
68 KiB
TypeScript
'use client';
|
||
|
||
import { useEffect, useState, useMemo, useCallback } from 'react';
|
||
import { useRouter } from 'next/navigation';
|
||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Textarea } from '@/components/ui/textarea';
|
||
import { Checkbox } from '@/components/ui/checkbox';
|
||
import {
|
||
AlertDialog,
|
||
AlertDialogAction,
|
||
AlertDialogCancel,
|
||
AlertDialogContent,
|
||
AlertDialogDescription,
|
||
AlertDialogFooter,
|
||
AlertDialogHeader,
|
||
AlertDialogTitle,
|
||
} from "@/components/ui/alert-dialog";
|
||
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
|
||
import {
|
||
MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail,
|
||
Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight,
|
||
Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll,
|
||
MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare, Copy, EyeOff,
|
||
AlertOctagon, Archive, RefreshCw
|
||
} from 'lucide-react';
|
||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||
|
||
interface Account {
|
||
id: number;
|
||
name: string;
|
||
email: string;
|
||
color: string;
|
||
folders?: string[];
|
||
}
|
||
|
||
interface Email {
|
||
id: number;
|
||
accountId: number;
|
||
from: string;
|
||
fromName?: string;
|
||
to: string;
|
||
subject: string;
|
||
body: string;
|
||
date: string;
|
||
read: boolean;
|
||
starred: boolean;
|
||
folder: string;
|
||
cc?: string;
|
||
bcc?: string;
|
||
flags?: string[];
|
||
}
|
||
|
||
interface Attachment {
|
||
name: string;
|
||
type: string;
|
||
content: string;
|
||
encoding: string;
|
||
}
|
||
|
||
interface ParsedEmailContent {
|
||
text: string;
|
||
html: string;
|
||
attachments: {
|
||
filename: string;
|
||
contentType: string;
|
||
encoding: string;
|
||
content: string;
|
||
}[];
|
||
headers?: string;
|
||
}
|
||
|
||
interface ParsedEmailMetadata {
|
||
subject: string;
|
||
from: string;
|
||
to: string;
|
||
date: string;
|
||
contentType: string;
|
||
text: string | null;
|
||
html: string | null;
|
||
raw: {
|
||
headers: string;
|
||
body: string;
|
||
};
|
||
}
|
||
|
||
// Improved MIME Decoder Implementation for Infomaniak
|
||
function extractBoundary(headers: string): string | null {
|
||
const boundaryMatch = headers.match(/boundary="?([^"\r\n;]+)"?/i) ||
|
||
headers.match(/boundary=([^\r\n;]+)/i);
|
||
|
||
return boundaryMatch ? boundaryMatch[1].trim() : null;
|
||
}
|
||
|
||
function decodeQuotedPrintable(text: string, charset: string): string {
|
||
if (!text) return '';
|
||
|
||
// Replace soft line breaks (=\r\n or =\n or =\r)
|
||
let decoded = text.replace(/=(?:\r\n|\n|\r)/g, '');
|
||
|
||
// Replace quoted-printable encoded characters (including non-ASCII characters)
|
||
decoded = decoded.replace(/=([0-9A-F]{2})/gi, (match, p1) => {
|
||
return String.fromCharCode(parseInt(p1, 16));
|
||
});
|
||
|
||
// Handle character encoding
|
||
try {
|
||
// For browsers with TextDecoder support
|
||
if (typeof TextDecoder !== 'undefined') {
|
||
// Convert string to array of byte values
|
||
const bytes = new Uint8Array(Array.from(decoded).map(c => c.charCodeAt(0)));
|
||
return new TextDecoder(charset).decode(bytes);
|
||
}
|
||
|
||
// Fallback for older browsers or when charset handling is not critical
|
||
return decoded;
|
||
} catch (e) {
|
||
console.warn('Charset conversion error:', e);
|
||
return decoded;
|
||
}
|
||
}
|
||
|
||
function parseFullEmail(emailRaw: string) {
|
||
// Check if this is a multipart message by looking for boundary definition
|
||
const boundaryMatch = emailRaw.match(/boundary="?([^"\r\n;]+)"?/i) ||
|
||
emailRaw.match(/boundary=([^\r\n;]+)/i);
|
||
|
||
if (boundaryMatch) {
|
||
const boundary = boundaryMatch[1].trim();
|
||
|
||
// Check if there's a preamble before the first boundary
|
||
let mainHeaders = '';
|
||
let mainContent = emailRaw;
|
||
|
||
// Extract the headers before the first boundary if they exist
|
||
const firstBoundaryPos = emailRaw.indexOf('--' + boundary);
|
||
if (firstBoundaryPos > 0) {
|
||
const headerSeparatorPos = emailRaw.indexOf('\r\n\r\n');
|
||
if (headerSeparatorPos > 0 && headerSeparatorPos < firstBoundaryPos) {
|
||
mainHeaders = emailRaw.substring(0, headerSeparatorPos);
|
||
}
|
||
}
|
||
|
||
return processMultipartEmail(emailRaw, boundary, mainHeaders);
|
||
} else {
|
||
// This is a single part message
|
||
return processSinglePartEmail(emailRaw);
|
||
}
|
||
}
|
||
|
||
function processMultipartEmail(emailRaw: string, boundary: string, mainHeaders: string = ''): {
|
||
text: string;
|
||
html: string;
|
||
attachments: { filename: string; contentType: string; encoding: string; content: string; }[];
|
||
headers?: string;
|
||
} {
|
||
const result = {
|
||
text: '',
|
||
html: '',
|
||
attachments: [] as { filename: string; contentType: string; encoding: string; content: string; }[],
|
||
headers: mainHeaders
|
||
};
|
||
|
||
// Split by boundary (more robust pattern)
|
||
const boundaryRegex = new RegExp(`--${boundary}(?:--)?(\\r?\\n|$)`, 'g');
|
||
|
||
// Get all boundary positions
|
||
const matches = Array.from(emailRaw.matchAll(boundaryRegex));
|
||
const boundaryPositions = matches.map(match => match.index!);
|
||
|
||
// Extract content between boundaries
|
||
for (let i = 0; i < boundaryPositions.length - 1; i++) {
|
||
const startPos = boundaryPositions[i] + matches[i][0].length;
|
||
const endPos = boundaryPositions[i + 1];
|
||
|
||
if (endPos > startPos) {
|
||
const partContent = emailRaw.substring(startPos, endPos).trim();
|
||
|
||
if (partContent) {
|
||
const decoded = processSinglePartEmail(partContent);
|
||
|
||
if (decoded.contentType.includes('text/plain')) {
|
||
result.text = decoded.text || '';
|
||
} else if (decoded.contentType.includes('text/html')) {
|
||
result.html = cleanHtml(decoded.html || '');
|
||
} else if (
|
||
decoded.contentType.startsWith('image/') ||
|
||
decoded.contentType.startsWith('application/')
|
||
) {
|
||
const filename = extractFilename(partContent);
|
||
result.attachments.push({
|
||
filename,
|
||
contentType: decoded.contentType,
|
||
encoding: decoded.raw?.headers ? parseEmailHeaders(decoded.raw.headers).encoding : '7bit',
|
||
content: decoded.raw?.body || ''
|
||
});
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
function processSinglePartEmail(rawEmail: string) {
|
||
// Split headers and body
|
||
const headerBodySplit = rawEmail.split(/\r?\n\r?\n/);
|
||
const headers = headerBodySplit[0];
|
||
const body = headerBodySplit.slice(1).join('\n\n');
|
||
|
||
// Parse headers to get content type, encoding, etc.
|
||
const emailInfo = parseEmailHeaders(headers);
|
||
|
||
// Decode the body based on its encoding
|
||
const decodedBody = decodeMIME(body, emailInfo.encoding, emailInfo.charset);
|
||
|
||
return {
|
||
subject: extractHeader(headers, 'Subject'),
|
||
from: extractHeader(headers, 'From'),
|
||
to: extractHeader(headers, 'To'),
|
||
date: extractHeader(headers, 'Date'),
|
||
contentType: emailInfo.contentType,
|
||
text: emailInfo.contentType.includes('html') ? null : decodedBody,
|
||
html: emailInfo.contentType.includes('html') ? decodedBody : null,
|
||
raw: {
|
||
headers,
|
||
body
|
||
}
|
||
};
|
||
}
|
||
|
||
function extractHeader(headers: string, headerName: string): string {
|
||
const regex = new RegExp(`^${headerName}:\\s*(.+?)(?:\\r?\\n(?!\\s)|$)`, 'im');
|
||
const match = headers.match(regex);
|
||
return match ? match[1].trim() : '';
|
||
}
|
||
|
||
function extractFilename(headers: string): string {
|
||
const filenameMatch = headers.match(/filename="?([^"\r\n;]+)"?/i);
|
||
return filenameMatch ? filenameMatch[1].trim() : 'attachment';
|
||
}
|
||
|
||
function parseEmailHeaders(headers: string): { contentType: string; encoding: string; charset: string } {
|
||
const result = {
|
||
contentType: 'text/plain',
|
||
encoding: '7bit',
|
||
charset: 'utf-8'
|
||
};
|
||
|
||
// Extract content type and charset
|
||
const contentTypeMatch = headers.match(/Content-Type:\s*([^;]+)(?:;\s*charset=([^;"\r\n]+)|(?:;\s*charset="([^"]+)"))?/i);
|
||
if (contentTypeMatch) {
|
||
result.contentType = contentTypeMatch[1].trim().toLowerCase();
|
||
if (contentTypeMatch[2]) {
|
||
result.charset = contentTypeMatch[2].trim().toLowerCase();
|
||
} else if (contentTypeMatch[3]) {
|
||
result.charset = contentTypeMatch[3].trim().toLowerCase();
|
||
}
|
||
}
|
||
|
||
// Extract content transfer encoding
|
||
const encodingMatch = headers.match(/Content-Transfer-Encoding:\s*([^\s;\r\n]+)/i);
|
||
if (encodingMatch) {
|
||
result.encoding = encodingMatch[1].trim().toLowerCase();
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
function decodeMIME(text: string, encoding?: string, charset: string = 'utf-8'): string {
|
||
if (!text) return '';
|
||
|
||
// Normalize encoding and charset
|
||
encoding = (encoding || '').toLowerCase();
|
||
charset = (charset || 'utf-8').toLowerCase();
|
||
|
||
try {
|
||
// Handle different encoding types
|
||
if (encoding === 'quoted-printable') {
|
||
return decodeQuotedPrintable(text, charset);
|
||
} else if (encoding === 'base64') {
|
||
return decodeBase64(text, charset);
|
||
} else if (encoding === '7bit' || encoding === '8bit' || encoding === 'binary') {
|
||
// For these encodings, we still need to handle the character set
|
||
return convertCharset(text, charset);
|
||
} else {
|
||
// Unknown encoding, return as is but still handle charset
|
||
return convertCharset(text, charset);
|
||
}
|
||
} catch (error) {
|
||
console.error('Error decoding MIME:', error);
|
||
return text;
|
||
}
|
||
}
|
||
|
||
function decodeBase64(text: string, charset: string): string {
|
||
const cleanText = text.replace(/\s/g, '');
|
||
|
||
let binaryString;
|
||
try {
|
||
binaryString = atob(cleanText);
|
||
} catch (e) {
|
||
console.error('Base64 decoding error:', e);
|
||
return text;
|
||
}
|
||
|
||
return convertCharset(binaryString, charset);
|
||
}
|
||
|
||
function convertCharset(text: string, fromCharset: string): string {
|
||
try {
|
||
if (typeof TextDecoder !== 'undefined') {
|
||
const bytes = new Uint8Array(text.length);
|
||
for (let i = 0; i < text.length; i++) {
|
||
bytes[i] = text.charCodeAt(i) & 0xFF;
|
||
}
|
||
|
||
let normalizedCharset = fromCharset.toLowerCase();
|
||
|
||
// Normalize charset names
|
||
if (normalizedCharset === 'iso-8859-1' || normalizedCharset === 'latin1') {
|
||
normalizedCharset = 'iso-8859-1';
|
||
} else if (normalizedCharset === 'windows-1252' || normalizedCharset === 'cp1252') {
|
||
normalizedCharset = 'windows-1252';
|
||
}
|
||
|
||
const decoder = new TextDecoder(normalizedCharset);
|
||
return decoder.decode(bytes);
|
||
}
|
||
|
||
// Fallback for older browsers or unsupported charsets
|
||
if (fromCharset.toLowerCase() === 'iso-8859-1' || fromCharset.toLowerCase() === 'windows-1252') {
|
||
return text
|
||
.replace(/\xC3\xA0/g, 'à')
|
||
.replace(/\xC3\xA2/g, 'â')
|
||
.replace(/\xC3\xA9/g, 'é')
|
||
.replace(/\xC3\xA8/g, 'è')
|
||
.replace(/\xC3\xAA/g, 'ê')
|
||
.replace(/\xC3\xAB/g, 'ë')
|
||
.replace(/\xC3\xB4/g, 'ô')
|
||
.replace(/\xC3\xB9/g, 'ù')
|
||
.replace(/\xC3\xBB/g, 'û')
|
||
.replace(/\xC3\x80/g, 'À')
|
||
.replace(/\xC3\x89/g, 'É')
|
||
.replace(/\xC3\x87/g, 'Ç')
|
||
// Clean up HTML entities
|
||
.replace(/ç/g, 'ç')
|
||
.replace(/é/g, 'é')
|
||
.replace(/è/g, 'ë')
|
||
.replace(/ê/g, 'ª')
|
||
.replace(/ë/g, '«')
|
||
.replace(/û/g, '»')
|
||
.replace(/ /g, ' ')
|
||
.replace(/\xA0/g, ' ');
|
||
}
|
||
|
||
return text;
|
||
} catch (e) {
|
||
console.error('Character set conversion error:', e, 'charset:', fromCharset);
|
||
return text;
|
||
}
|
||
}
|
||
|
||
function extractHtmlBody(htmlContent: string): string {
|
||
const bodyMatch = htmlContent.match(/<body[^>]*>([\s\S]*?)<\/body>/i);
|
||
return bodyMatch ? bodyMatch[1] : htmlContent;
|
||
}
|
||
|
||
function cleanHtml(html: string): string {
|
||
if (!html) return '';
|
||
|
||
return html
|
||
// Fix common Infomaniak-specific character encodings
|
||
.replace(/=C2=A0/g, ' ') // non-breaking space
|
||
.replace(/=E2=80=93/g, '\u2013') // en dash
|
||
.replace(/=E2=80=94/g, '\u2014') // em dash
|
||
.replace(/=E2=80=98/g, '\u2018') // left single quote
|
||
.replace(/=E2=80=99/g, '\u2019') // right single quote
|
||
.replace(/=E2=80=9C/g, '\u201C') // left double quote
|
||
.replace(/=E2=80=9D/g, '\u201D') // right double quote
|
||
.replace(/=C3=A0/g, 'à')
|
||
.replace(/=C3=A2/g, 'â')
|
||
.replace(/=C3=A9/g, 'é')
|
||
.replace(/=C3=A8/g, 'è')
|
||
.replace(/=C3=AA/g, 'ê')
|
||
.replace(/=C3=AB/g, 'ë')
|
||
.replace(/=C3=B4/g, 'ô')
|
||
.replace(/=C3=B9/g, 'ù')
|
||
.replace(/=C3=xBB/g, 'û')
|
||
.replace(/=C3=80/g, 'À')
|
||
.replace(/=C3=89/g, 'É')
|
||
.replace(/=C3=87/g, 'Ç')
|
||
// Clean up HTML entities
|
||
.replace(/ç/g, 'ç')
|
||
.replace(/é/g, 'é')
|
||
.replace(/è/g, 'ë')
|
||
.replace(/ê/g, 'ª')
|
||
.replace(/ë/g, '«')
|
||
.replace(/û/g, '»')
|
||
.replace(/ /g, ' ')
|
||
.replace(/\xA0/g, ' ');
|
||
}
|
||
|
||
function decodeMimeContent(content: string): string {
|
||
if (!content) return '';
|
||
|
||
// Check if this is an Infomaniak multipart message
|
||
if (content.includes('Content-Type: multipart/')) {
|
||
const boundary = content.match(/boundary="([^"]+)"/)?.[1];
|
||
if (boundary) {
|
||
const parts = content.split('--' + boundary);
|
||
let htmlContent = '';
|
||
let textContent = '';
|
||
|
||
parts.forEach(part => {
|
||
if (part.includes('Content-Type: text/html')) {
|
||
const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
|
||
if (match) {
|
||
htmlContent = cleanHtml(match[1]);
|
||
}
|
||
} else if (part.includes('Content-Type: text/plain')) {
|
||
const match = part.match(/\r?\n\r?\n([\s\S]+?)(?=\r?\n--)/);
|
||
if (match) {
|
||
textContent = cleanHtml(match[1]);
|
||
}
|
||
}
|
||
});
|
||
|
||
// Prefer HTML content if available
|
||
return htmlContent || textContent;
|
||
}
|
||
}
|
||
|
||
// If not multipart or no boundary found, clean the content directly
|
||
return cleanHtml(content);
|
||
}
|
||
|
||
// Add this helper function
|
||
const renderEmailContent = (email: Email) => {
|
||
try {
|
||
const parsed = parseFullEmail(email.body) as ParsedEmailContent | ParsedEmailMetadata;
|
||
const content = 'text' in parsed ? parsed.text : ('html' in parsed ? parsed.html || '' : email.body);
|
||
const isHtml = 'html' in parsed ? !!parsed.html : content.includes('<');
|
||
|
||
if (isHtml) {
|
||
// Enhanced HTML sanitization
|
||
const sanitizedHtml = content
|
||
.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
|
||
.replace(/<style\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/style>/gi, '')
|
||
.replace(/on\w+="[^"]*"/g, '')
|
||
.replace(/on\w+='[^']*'/g, '')
|
||
.replace(/javascript:/gi, '')
|
||
.replace(/data:/gi, '')
|
||
.replace(/<meta[^>]*>/gi, '')
|
||
.replace(/<link[^>]*>/gi, '')
|
||
// Fix common email client quirks
|
||
.replace(/=3D/g, '=')
|
||
.replace(/=20/g, ' ')
|
||
.replace(/=E2=80=99/g, "'")
|
||
.replace(/=E2=80=9C/g, '"')
|
||
.replace(/=E2=80=9D/g, '"')
|
||
.replace(/=E2=80=93/g, '–')
|
||
.replace(/=E2=80=94/g, '—')
|
||
.replace(/=C2=A0/g, ' ')
|
||
.replace(/=C3=A0/g, 'à')
|
||
.replace(/=C3=A9/g, 'é')
|
||
.replace(/=C3=A8/g, 'è')
|
||
.replace(/=C3=AA/g, 'ê')
|
||
.replace(/=C3=AB/g, 'ë')
|
||
.replace(/=C3=B4/g, 'ô')
|
||
.replace(/=C3=B9/g, 'ù')
|
||
.replace(/=C3=BB/g, 'û');
|
||
|
||
return (
|
||
<div className="prose prose-sm max-w-none">
|
||
{'attachments' in parsed && parsed.attachments && parsed.attachments.length > 0 && (
|
||
<div className="mb-4 p-2 bg-gray-50 rounded">
|
||
<h4 className="text-sm font-medium mb-2">Attachments:</h4>
|
||
<div className="space-y-1">
|
||
{parsed.attachments.map((attachment, index: number) => (
|
||
<div key={index} className="flex items-center gap-2 text-sm">
|
||
<Paperclip className="h-4 w-4 text-gray-500" />
|
||
<span>{attachment.filename}</span>
|
||
<span className="text-gray-500 text-xs">
|
||
({attachment.contentType})
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
|
||
</div>
|
||
);
|
||
} else {
|
||
// Enhanced plain text formatting
|
||
const formattedText = content
|
||
.replace(/\n/g, '<br>')
|
||
.replace(/\t/g, ' ')
|
||
.replace(/ /g, ' ')
|
||
// Fix common email client quirks
|
||
.replace(/=3D/g, '=')
|
||
.replace(/=20/g, ' ')
|
||
.replace(/=E2=80=99/g, "'")
|
||
.replace(/=E2=80=9C/g, '"')
|
||
.replace(/=E2=80=9D/g, '"')
|
||
.replace(/=E2=80=93/g, '–')
|
||
.replace(/=E2=80=94/g, '—')
|
||
.replace(/=C2=A0/g, ' ')
|
||
.replace(/=C3=A0/g, 'à')
|
||
.replace(/=C3=A9/g, 'é')
|
||
.replace(/=C3=A8/g, 'è')
|
||
.replace(/=C3=AA/g, 'ê')
|
||
.replace(/=C3=AB/g, 'ë')
|
||
.replace(/=C3=B4/g, 'ô')
|
||
.replace(/=C3=B9/g, 'ù')
|
||
.replace(/=C3=BB/g, 'û');
|
||
|
||
return (
|
||
<div className="prose prose-sm max-w-none whitespace-pre-wrap">
|
||
{'attachments' in parsed && parsed.attachments && parsed.attachments.length > 0 && (
|
||
<div className="mb-4 p-2 bg-gray-50 rounded">
|
||
<h4 className="text-sm font-medium mb-2">Attachments:</h4>
|
||
<div className="space-y-1">
|
||
{parsed.attachments.map((attachment, index: number) => (
|
||
<div key={index} className="flex items-center gap-2 text-sm">
|
||
<Paperclip className="h-4 w-4 text-gray-500" />
|
||
<span>{attachment.filename}</span>
|
||
<span className="text-gray-500 text-xs">
|
||
({attachment.contentType})
|
||
</span>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
<div dangerouslySetInnerHTML={{ __html: formattedText }} />
|
||
</div>
|
||
);
|
||
}
|
||
} catch (e) {
|
||
console.error('Error rendering email content:', e);
|
||
return (
|
||
<div className="text-sm text-gray-500">
|
||
Error rendering email content. Please try refreshing the page.
|
||
</div>
|
||
);
|
||
}
|
||
};
|
||
|
||
// Add this helper function
|
||
const decodeEmailContent = (content: string, charset: string = 'utf-8') => {
|
||
return convertCharset(content, charset);
|
||
};
|
||
|
||
function cleanEmailContent(content: string): string {
|
||
// Remove or fix malformed URLs
|
||
return content.replace(/=3D"(http[^"]+)"/g, (match, url) => {
|
||
try {
|
||
return `"${decodeURIComponent(url)}"`;
|
||
} catch {
|
||
return '';
|
||
}
|
||
});
|
||
}
|
||
|
||
// Define the exact folder names from IMAP
|
||
type MailFolder = string;
|
||
|
||
// Map IMAP folders to sidebar items with icons
|
||
const getFolderIcon = (folder: string) => {
|
||
switch (folder.toLowerCase()) {
|
||
case 'inbox':
|
||
return Inbox;
|
||
case 'sent':
|
||
return Send;
|
||
case 'drafts':
|
||
return Edit;
|
||
case 'trash':
|
||
return Trash;
|
||
case 'spam':
|
||
return AlertOctagon;
|
||
case 'archive':
|
||
case 'archives':
|
||
return Archive;
|
||
default:
|
||
return Folder;
|
||
}
|
||
};
|
||
|
||
// Initial sidebar items - only INBOX
|
||
const initialSidebarItems = [
|
||
{
|
||
view: 'INBOX' as MailFolder,
|
||
label: 'Inbox',
|
||
icon: Inbox,
|
||
folder: 'INBOX'
|
||
}
|
||
];
|
||
|
||
export default function MailPage() {
|
||
const router = useRouter();
|
||
const [loading, setLoading] = useState(true);
|
||
const [accounts, setAccounts] = useState<Account[]>([
|
||
{ id: 0, name: 'All', email: '', color: 'bg-gray-500' },
|
||
{ id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
|
||
]);
|
||
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
||
const [currentView, setCurrentView] = useState<MailFolder>('INBOX');
|
||
const [showCompose, setShowCompose] = useState(false);
|
||
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
|
||
const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
|
||
const [showBulkActions, setShowBulkActions] = useState(false);
|
||
const [showBcc, setShowBcc] = useState(false);
|
||
const [emails, setEmails] = useState<Email[]>([]);
|
||
const [error, setError] = useState<string | null>(null);
|
||
const [composeSubject, setComposeSubject] = useState('');
|
||
const [composeTo, setComposeTo] = useState('');
|
||
const [composeCc, setComposeCc] = useState('');
|
||
const [composeBcc, setComposeBcc] = useState('');
|
||
const [composeBody, setComposeBody] = useState('');
|
||
const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
|
||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||
const [foldersOpen, setFoldersOpen] = useState(true);
|
||
const [showSettings, setShowSettings] = useState(false);
|
||
const [searchQuery, setSearchQuery] = useState('');
|
||
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
|
||
const [composeOpen, setComposeOpen] = useState(false);
|
||
const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
|
||
const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
|
||
const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
|
||
const [showEmailActions, setShowEmailActions] = useState(false);
|
||
const [deleteType, setDeleteType] = useState<'email' | 'emails' | 'account'>('email');
|
||
const [itemToDelete, setItemToDelete] = useState<number | null>(null);
|
||
const [showCc, setShowCc] = useState(false);
|
||
const [contentLoading, setContentLoading] = useState(false);
|
||
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
||
const [folders, setFolders] = useState<string[]>([]);
|
||
const [unreadCount, setUnreadCount] = useState(0);
|
||
const [availableFolders, setAvailableFolders] = useState<string[]>([]);
|
||
const [sidebarItems, setSidebarItems] = useState(initialSidebarItems);
|
||
const [page, setPage] = useState(1);
|
||
const [hasMore, setHasMore] = useState(true);
|
||
const [isLoadingMore, setIsLoadingMore] = useState(false);
|
||
const emailsPerPage = 24;
|
||
|
||
// Debug logging for email distribution
|
||
useEffect(() => {
|
||
const emailsByFolder = emails.reduce((acc, email) => {
|
||
acc[email.folder] = (acc[email.folder] || 0) + 1;
|
||
return acc;
|
||
}, {} as Record<string, number>);
|
||
|
||
console.log('Emails by folder:', emailsByFolder);
|
||
console.log('Current view:', currentView);
|
||
}, [emails, currentView]);
|
||
|
||
// Move getSelectedEmail inside the component
|
||
const getSelectedEmail = () => {
|
||
return emails.find(email => email.id === selectedEmail?.id);
|
||
};
|
||
|
||
// Check for stored credentials
|
||
useEffect(() => {
|
||
const checkCredentials = async () => {
|
||
try {
|
||
console.log('Checking for stored credentials...');
|
||
const response = await fetch('/api/mail');
|
||
if (!response.ok) {
|
||
const errorData = await response.json();
|
||
console.log('API response error:', errorData);
|
||
if (errorData.error === 'No stored credentials found') {
|
||
console.log('No credentials found, redirecting to login...');
|
||
router.push('/mail/login');
|
||
return;
|
||
}
|
||
throw new Error(errorData.error || 'Failed to check credentials');
|
||
}
|
||
console.log('Credentials verified, loading emails...');
|
||
setLoading(false);
|
||
loadEmails();
|
||
} catch (err) {
|
||
console.error('Error checking credentials:', err);
|
||
setError(err instanceof Error ? err.message : 'Failed to check credentials');
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
checkCredentials();
|
||
}, [router]);
|
||
|
||
// Update the loadEmails function
|
||
const loadEmails = async (isLoadMore = false) => {
|
||
try {
|
||
if (isLoadMore) {
|
||
setIsLoadingMore(true);
|
||
} else {
|
||
setLoading(true);
|
||
}
|
||
setError(null);
|
||
|
||
const response = await fetch(`/api/mail?folder=${currentView}&page=${page}&limit=${emailsPerPage}`);
|
||
if (!response.ok) {
|
||
throw new Error('Failed to load emails');
|
||
}
|
||
|
||
const data = await response.json();
|
||
|
||
// Get available folders from the API response
|
||
if (data.folders) {
|
||
setAvailableFolders(data.folders);
|
||
}
|
||
|
||
// Process emails keeping exact folder names
|
||
const processedEmails = (data.emails || []).map((email: any) => ({
|
||
id: Number(email.id),
|
||
accountId: 1,
|
||
from: email.from || '',
|
||
fromName: email.from?.split('@')[0] || '',
|
||
to: email.to || '',
|
||
subject: email.subject || '(No subject)',
|
||
body: email.body || '',
|
||
date: email.date || new Date().toISOString(),
|
||
read: email.read || false,
|
||
starred: email.starred || false,
|
||
folder: email.folder || 'INBOX',
|
||
cc: email.cc,
|
||
bcc: email.bcc,
|
||
flags: email.flags || []
|
||
}));
|
||
|
||
// Only update unread count if we're in the Inbox folder
|
||
if (currentView === 'INBOX') {
|
||
const unreadInboxEmails = processedEmails.filter(
|
||
(email: Email) => !email.read && email.folder === 'INBOX'
|
||
).length;
|
||
setUnreadCount(unreadInboxEmails);
|
||
}
|
||
|
||
// Update emails state based on whether we're loading more
|
||
if (isLoadMore) {
|
||
setEmails(prev => [...prev, ...processedEmails]);
|
||
} else {
|
||
setEmails(processedEmails);
|
||
}
|
||
|
||
// Update hasMore state based on the number of emails received
|
||
setHasMore(processedEmails.length === emailsPerPage);
|
||
|
||
} catch (err) {
|
||
console.error('Error loading emails:', err);
|
||
setError(err instanceof Error ? err.message : 'Failed to load emails');
|
||
} finally {
|
||
setLoading(false);
|
||
setIsLoadingMore(false);
|
||
}
|
||
};
|
||
|
||
// Add an effect to reload emails when the view changes
|
||
useEffect(() => {
|
||
setPage(1); // Reset page when view changes
|
||
setHasMore(true);
|
||
loadEmails();
|
||
}, [currentView]);
|
||
|
||
// Format date for display
|
||
const formatDate = (dateString: string) => {
|
||
const date = new Date(dateString);
|
||
const now = new Date();
|
||
|
||
if (date.toDateString() === now.toDateString()) {
|
||
return date.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
|
||
} else {
|
||
return date.toLocaleDateString([], { month: 'short', day: 'numeric' });
|
||
}
|
||
};
|
||
|
||
// Get account color
|
||
const getAccountColor = (accountId: number) => {
|
||
const account = accounts.find(acc => acc.id === accountId);
|
||
return account ? account.color : 'bg-gray-500';
|
||
};
|
||
|
||
// Update handleEmailSelect to set selectedEmail correctly
|
||
const handleEmailSelect = (emailId: number) => {
|
||
const email = emails.find(e => e.id === emailId);
|
||
if (email) {
|
||
setSelectedEmail(email);
|
||
if (!email.read) {
|
||
// Mark as read in state
|
||
setEmails(emails.map(e =>
|
||
e.id === emailId ? { ...e, read: true } : e
|
||
));
|
||
|
||
// Update read status on server
|
||
fetch('/api/mail/mark-read', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ emailId })
|
||
}).catch(error => {
|
||
console.error('Error marking email as read:', error);
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
// Add these improved handlers
|
||
const handleEmailCheckbox = (e: React.ChangeEvent<HTMLInputElement>, emailId: number) => {
|
||
e.stopPropagation();
|
||
if (e.target.checked) {
|
||
setSelectedEmails([...selectedEmails, emailId.toString()]);
|
||
} else {
|
||
setSelectedEmails(selectedEmails.filter(id => id !== emailId.toString()));
|
||
}
|
||
};
|
||
|
||
// Handles marking an individual email as read/unread
|
||
const handleMarkAsRead = (emailId: string, isRead: boolean) => {
|
||
setEmails(emails.map(email =>
|
||
email.id.toString() === emailId ? { ...email, read: isRead } : email
|
||
));
|
||
};
|
||
|
||
// Handles bulk actions for selected emails
|
||
const handleBulkAction = async (action: 'delete' | 'mark-read' | 'mark-unread' | 'archive') => {
|
||
if (action === 'delete') {
|
||
setDeleteType('emails');
|
||
setShowDeleteConfirm(true);
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/mail/bulk-actions', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
emailIds: selectedEmails,
|
||
action: action
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Failed to perform bulk action');
|
||
}
|
||
|
||
// Update local state based on the action
|
||
setEmails(emails.map(email => {
|
||
if (selectedEmails.includes(email.id.toString())) {
|
||
switch (action) {
|
||
case 'mark-read':
|
||
return { ...email, read: true };
|
||
case 'mark-unread':
|
||
return { ...email, read: false };
|
||
case 'archive':
|
||
return { ...email, folder: 'Archive' };
|
||
default:
|
||
return email;
|
||
}
|
||
}
|
||
return email;
|
||
}));
|
||
|
||
// Clear selection after successful action
|
||
setSelectedEmails([]);
|
||
} catch (error) {
|
||
console.error('Error performing bulk action:', error);
|
||
alert('Failed to perform bulk action. Please try again.');
|
||
}
|
||
};
|
||
|
||
// Add handleDeleteConfirm function
|
||
const handleDeleteConfirm = async () => {
|
||
try {
|
||
const response = await fetch('/api/mail/bulk-actions', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
emailIds: selectedEmails,
|
||
action: 'delete'
|
||
}),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Failed to delete emails');
|
||
}
|
||
|
||
// Remove deleted emails from state
|
||
setEmails(emails.filter(email => !selectedEmails.includes(email.id.toString())));
|
||
setSelectedEmails([]);
|
||
} catch (error) {
|
||
console.error('Error deleting emails:', error);
|
||
alert('Failed to delete emails. Please try again.');
|
||
} finally {
|
||
setShowDeleteConfirm(false);
|
||
}
|
||
};
|
||
|
||
// Add infinite scroll handler
|
||
const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
|
||
const target = e.currentTarget;
|
||
if (
|
||
target.scrollHeight - target.scrollTop === target.clientHeight &&
|
||
!isLoadingMore &&
|
||
hasMore
|
||
) {
|
||
setPage(prev => prev + 1);
|
||
loadEmails(true);
|
||
}
|
||
}, [isLoadingMore, hasMore]);
|
||
|
||
// Sort emails by date (most recent first)
|
||
const sortedEmails = useMemo(() => {
|
||
return [...emails].sort((a, b) => {
|
||
return new Date(b.date).getTime() - new Date(a.date).getTime();
|
||
});
|
||
}, [emails]);
|
||
|
||
const toggleSelectAll = () => {
|
||
if (selectedEmails.length === emails.length) {
|
||
setSelectedEmails([]);
|
||
} else {
|
||
setSelectedEmails(emails.map(email => email.id.toString()));
|
||
}
|
||
};
|
||
|
||
// Add filtered emails based on search query
|
||
const filteredEmails = useMemo(() => {
|
||
if (!searchQuery) return emails;
|
||
|
||
const query = searchQuery.toLowerCase();
|
||
return emails.filter(email =>
|
||
email.subject.toLowerCase().includes(query) ||
|
||
email.from.toLowerCase().includes(query) ||
|
||
email.to.toLowerCase().includes(query) ||
|
||
email.body.toLowerCase().includes(query)
|
||
);
|
||
}, [emails, searchQuery]);
|
||
|
||
// Update the email list to use filtered emails
|
||
const renderEmailList = () => (
|
||
<div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
|
||
{renderEmailListHeader()}
|
||
{renderBulkActionsToolbar()}
|
||
|
||
<div
|
||
className="flex-1 overflow-y-auto"
|
||
onScroll={handleScroll}
|
||
>
|
||
{loading ? (
|
||
<div className="flex items-center justify-center h-64">
|
||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||
</div>
|
||
) : filteredEmails.length === 0 ? (
|
||
<div className="flex flex-col items-center justify-center h-64">
|
||
<Mail className="h-8 w-8 text-gray-400 mb-2" />
|
||
<p className="text-gray-500 text-sm">
|
||
{searchQuery ? 'No emails match your search' : 'No emails in this folder'}
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<div className="divide-y divide-gray-100">
|
||
{filteredEmails.map((email) => renderEmailListItem(email))}
|
||
{isLoadingMore && (
|
||
<div className="flex items-center justify-center p-4">
|
||
<div className="animate-spin rounded-full h-4 w-4 border-t-2 border-b-2 border-blue-500"></div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// Update the email count in the header to show filtered count
|
||
const renderEmailListHeader = () => (
|
||
<div className="border-b border-gray-100">
|
||
<div className="px-4 py-1">
|
||
<div className="relative">
|
||
<Search className="absolute left-2 top-2 h-4 w-4 text-gray-400" />
|
||
<Input
|
||
type="search"
|
||
placeholder="Search in folder..."
|
||
className="pl-8 h-8 bg-gray-50"
|
||
value={searchQuery}
|
||
onChange={(e) => setSearchQuery(e.target.value)}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-between px-4 h-10">
|
||
<div className="flex items-center gap-2">
|
||
<Checkbox
|
||
checked={filteredEmails.length > 0 && selectedEmails.length === filteredEmails.length}
|
||
onCheckedChange={toggleSelectAll}
|
||
className="mt-0.5"
|
||
/>
|
||
<h2 className="text-base font-semibold text-gray-900">Inbox</h2>
|
||
</div>
|
||
<span className="text-sm text-gray-600">
|
||
{searchQuery ? `${filteredEmails.length} of ${emails.length} emails` : `${emails.length} emails`}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// Update the bulk actions toolbar to include confirmation dialog
|
||
const renderBulkActionsToolbar = () => {
|
||
if (selectedEmails.length === 0) return null;
|
||
|
||
return (
|
||
<div className="bg-white border-b border-gray-100 px-4 py-2">
|
||
<div className="flex items-center gap-2 mb-2">
|
||
<span className="text-sm text-gray-600">
|
||
{selectedEmails.length} selected
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-1.5">
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-gray-600 hover:text-gray-900 h-8 px-2"
|
||
onClick={() => {
|
||
const allSelectedRead = selectedEmails.every(id =>
|
||
emails.find(email => email.id.toString() === id)?.read
|
||
);
|
||
handleBulkAction(allSelectedRead ? 'mark-unread' : 'mark-read');
|
||
}}
|
||
>
|
||
<EyeOff className="h-4 w-4 mr-1" />
|
||
<span className="text-sm">
|
||
{selectedEmails.every(id =>
|
||
emails.find(email => email.id.toString() === id)?.read
|
||
) ? 'Unread' : 'Read'}
|
||
</span>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-gray-600 hover:text-gray-900 h-8 px-2"
|
||
onClick={() => handleBulkAction('archive')}
|
||
>
|
||
<Archive className="h-4 w-4 mr-1" />
|
||
<span className="text-sm">Archive</span>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="sm"
|
||
className="text-red-600 hover:text-red-700 h-8 px-2"
|
||
onClick={() => handleBulkAction('delete')}
|
||
>
|
||
<Trash2 className="h-4 w-4 mr-1" />
|
||
<span className="text-sm">Delete</span>
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
// Keep only one renderEmailListWrapper function that includes both panels
|
||
const renderEmailListWrapper = () => (
|
||
<div className="flex-1 flex overflow-hidden">
|
||
{/* Email list panel */}
|
||
{renderEmailList()}
|
||
|
||
{/* Preview panel - will automatically take remaining space */}
|
||
<div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
|
||
{selectedEmail ? (
|
||
<>
|
||
{/* Email actions header */}
|
||
<div className="flex-none px-4 py-3 border-b border-gray-100">
|
||
<div className="flex items-center gap-4">
|
||
<div className="flex items-center gap-2 min-w-0 flex-1">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => setSelectedEmail(null)}
|
||
className="md:hidden flex-shrink-0"
|
||
>
|
||
<ChevronLeft className="h-5 w-5" />
|
||
</Button>
|
||
<div className="min-w-0 max-w-[500px]">
|
||
<h2 className="text-lg font-semibold text-gray-900 truncate">
|
||
{selectedEmail.subject}
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-1 flex-shrink-0 ml-auto">
|
||
<div className="flex items-center border-l border-gray-200 pl-4">
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
||
onClick={() => handleReply('reply')}
|
||
>
|
||
<Reply className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
||
onClick={() => handleReply('replyAll')}
|
||
>
|
||
<ReplyAll className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
||
onClick={() => handleReply('forward')}
|
||
>
|
||
<Forward className="h-4 w-4" />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
||
onClick={(e) => toggleStarred(selectedEmail.id, e)}
|
||
>
|
||
<Star className={`h-4 w-4 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="text-gray-400 hover:text-gray-900 h-9 w-9"
|
||
onClick={() => {/* Add to folder logic */}}
|
||
>
|
||
<FolderOpen className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scrollable content area */}
|
||
<ScrollArea className="flex-1 p-6">
|
||
<div className="flex items-center gap-4 mb-6">
|
||
<Avatar className="h-10 w-10">
|
||
<AvatarFallback>
|
||
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
|
||
</AvatarFallback>
|
||
</Avatar>
|
||
<div>
|
||
<p className="font-medium text-gray-900">
|
||
{selectedEmail.fromName || selectedEmail.from}
|
||
</p>
|
||
<p className="text-sm text-gray-500">
|
||
to {selectedEmail.to}
|
||
</p>
|
||
</div>
|
||
<div className="ml-auto text-sm text-gray-500">
|
||
{formatDate(selectedEmail.date)}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="prose max-w-none">
|
||
{renderEmailContent(selectedEmail)}
|
||
</div>
|
||
</ScrollArea>
|
||
</>
|
||
) : (
|
||
<div className="flex flex-col items-center justify-center h-full">
|
||
<Mail className="h-12 w-12 text-gray-400 mb-4" />
|
||
<p className="text-gray-500">Select an email to view its contents</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// Update sidebar items when available folders change
|
||
useEffect(() => {
|
||
if (availableFolders.length > 0) {
|
||
const newItems = [
|
||
...initialSidebarItems,
|
||
...availableFolders
|
||
.filter(folder => !['INBOX'].includes(folder)) // Exclude folders already in initial items
|
||
.map(folder => ({
|
||
view: folder as MailFolder,
|
||
label: folder.charAt(0).toUpperCase() + folder.slice(1).toLowerCase(),
|
||
icon: getFolderIcon(folder),
|
||
folder: folder
|
||
}))
|
||
];
|
||
setSidebarItems(newItems);
|
||
}
|
||
}, [availableFolders]);
|
||
|
||
// Update the email list item to match header checkbox alignment
|
||
const renderEmailListItem = (email: Email) => (
|
||
<div
|
||
key={email.id}
|
||
className={`flex items-center gap-3 px-4 py-2 hover:bg-gray-50/80 cursor-pointer ${
|
||
selectedEmail?.id === email.id ? 'bg-blue-50/50' : ''
|
||
} ${!email.read ? 'bg-blue-50/20' : ''}`}
|
||
onClick={() => handleEmailSelect(email.id)}
|
||
>
|
||
<Checkbox
|
||
checked={selectedEmails.includes(email.id.toString())}
|
||
onCheckedChange={(checked) => {
|
||
const e = { target: { checked }, stopPropagation: () => {} } as React.ChangeEvent<HTMLInputElement>;
|
||
handleEmailCheckbox(e, email.id);
|
||
}}
|
||
onClick={(e) => e.stopPropagation()}
|
||
className="mt-0.5"
|
||
/>
|
||
<div className="flex-1 min-w-0">
|
||
<div className="flex items-center justify-between gap-2">
|
||
<div className="flex items-center gap-2 min-w-0">
|
||
<span className={`text-sm truncate ${!email.read ? 'font-semibold text-gray-900' : 'text-gray-600'}`}>
|
||
{currentView === 'Sent' ? email.to : (
|
||
(() => {
|
||
const fromMatch = email.from.match(/^([^<]+)\s*<([^>]+)>$/);
|
||
return fromMatch ? fromMatch[1].trim() : email.from;
|
||
})()
|
||
)}
|
||
</span>
|
||
</div>
|
||
<div className="flex items-center gap-2 flex-shrink-0">
|
||
<span className="text-xs text-gray-500 whitespace-nowrap">
|
||
{formatDate(email.date)}
|
||
</span>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="h-6 w-6 text-gray-400 hover:text-yellow-400"
|
||
onClick={(e) => toggleStarred(email.id, e)}
|
||
>
|
||
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
<h3 className="text-sm text-gray-900 truncate">
|
||
{email.subject || '(No subject)'}
|
||
</h3>
|
||
<div className="text-xs text-gray-500 truncate">
|
||
{(() => {
|
||
try {
|
||
// First try to parse the full email
|
||
const parsed = parseFullEmail(email.body);
|
||
|
||
// Get text content from parsed email
|
||
let preview = '';
|
||
if ('text' in parsed && parsed.text) {
|
||
preview = parsed.text;
|
||
} else if ('html' in parsed && parsed.html) {
|
||
// If only HTML is available, extract text content
|
||
preview = parsed.html
|
||
.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
|
||
.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
|
||
.replace(/<[^>]+>/g, ' ')
|
||
.replace(/\s+/g, ' ')
|
||
.trim();
|
||
}
|
||
|
||
// If no preview from parsed content, try direct body
|
||
if (!preview) {
|
||
preview = email.body
|
||
.replace(/<[^>]+>/g, ' ')
|
||
.replace(/ |‌|»|«|>/g, ' ')
|
||
.replace(/\s+/g, ' ')
|
||
.trim();
|
||
}
|
||
|
||
// Clean up the preview
|
||
preview = preview
|
||
.replace(/^>+/gm, '') // Remove quoted text markers
|
||
.replace(/Content-Type:[^\n]+/g, '') // Remove MIME headers
|
||
.replace(/Content-Transfer-Encoding:[^\n]+/g, '')
|
||
.replace(/--[a-zA-Z0-9]+(-[a-zA-Z0-9]+)?/g, '') // Remove MIME boundaries
|
||
.replace(/boundary=[^\n]+/g, '')
|
||
.replace(/charset=[^\n]+/g, '')
|
||
.replace(/[\r\n]+/g, ' ')
|
||
.replace(/=3D/g, '=') // Fix common email client quirks
|
||
.replace(/=20/g, ' ')
|
||
.replace(/=E2=80=99/g, "'")
|
||
.replace(/=E2=80=9C/g, '"')
|
||
.replace(/=E2=80=9D/g, '"')
|
||
.replace(/=E2=80=93/g, '–')
|
||
.replace(/=E2=80=94/g, '—')
|
||
.replace(/=C2=A0/g, ' ')
|
||
.replace(/=C3=A0/g, 'à')
|
||
.replace(/=C3=A9/g, 'é')
|
||
.replace(/=C3=A8/g, 'è')
|
||
.replace(/=C3=AA/g, 'ê')
|
||
.replace(/=C3=AB/g, 'ë')
|
||
.replace(/=C3=B4/g, 'ô')
|
||
.replace(/=C3=B9/g, 'ù')
|
||
.replace(/=C3=BB/g, 'û')
|
||
.trim();
|
||
|
||
// Take first 100 characters
|
||
preview = preview.substring(0, 100);
|
||
|
||
// Try to end at a complete word
|
||
if (preview.length === 100) {
|
||
const lastSpace = preview.lastIndexOf(' ');
|
||
if (lastSpace > 80) {
|
||
preview = preview.substring(0, lastSpace);
|
||
}
|
||
preview += '...';
|
||
}
|
||
|
||
return preview || 'No preview available';
|
||
} catch (e) {
|
||
console.error('Error generating preview:', e);
|
||
return 'Error loading preview';
|
||
}
|
||
})()}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
|
||
// Render the sidebar navigation
|
||
const renderSidebarNav = () => (
|
||
<nav className="p-3">
|
||
<ul className="space-y-0.5 px-2">
|
||
{sidebarItems.map((item) => (
|
||
<li key={item.view}>
|
||
<Button
|
||
variant={currentView === item.view ? 'secondary' : 'ghost'}
|
||
className={`w-full justify-start py-2 ${
|
||
currentView === item.view ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
||
}`}
|
||
onClick={() => {
|
||
setCurrentView(item.view);
|
||
setSelectedEmail(null);
|
||
}}
|
||
>
|
||
<div className="flex items-center justify-between w-full">
|
||
<div className="flex items-center">
|
||
<item.icon className="h-4 w-4 mr-2" />
|
||
<span>{item.label}</span>
|
||
</div>
|
||
{item.view === 'INBOX' && unreadCount > 0 && (
|
||
<span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
|
||
{unreadCount}
|
||
</span>
|
||
)}
|
||
</div>
|
||
</Button>
|
||
</li>
|
||
))}
|
||
</ul>
|
||
</nav>
|
||
);
|
||
|
||
// Add attachment handling functions
|
||
const handleFileAttachment = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
if (!e.target.files) return;
|
||
|
||
const newAttachments: Attachment[] = [];
|
||
const MAX_FILE_SIZE = 10 * 1024 * 1024; // 10MB in bytes
|
||
const oversizedFiles: string[] = [];
|
||
|
||
for (const file of e.target.files) {
|
||
if (file.size > MAX_FILE_SIZE) {
|
||
oversizedFiles.push(file.name);
|
||
continue;
|
||
}
|
||
|
||
try {
|
||
// Read file as base64
|
||
const base64Content = await new Promise<string>((resolve) => {
|
||
const reader = new FileReader();
|
||
reader.onloadend = () => {
|
||
const base64 = reader.result as string;
|
||
resolve(base64.split(',')[1]); // Remove data URL prefix
|
||
};
|
||
reader.readAsDataURL(file);
|
||
});
|
||
|
||
newAttachments.push({
|
||
name: file.name,
|
||
type: file.type,
|
||
content: base64Content,
|
||
encoding: 'base64'
|
||
});
|
||
} catch (error) {
|
||
console.error('Error processing attachment:', error);
|
||
}
|
||
}
|
||
|
||
if (oversizedFiles.length > 0) {
|
||
alert(`The following files exceed the 10MB size limit and were not attached:\n${oversizedFiles.join('\n')}`);
|
||
}
|
||
|
||
if (newAttachments.length > 0) {
|
||
setAttachments([...attachments, ...newAttachments]);
|
||
}
|
||
};
|
||
|
||
// Add handleSend function for email composition
|
||
const handleSend = async () => {
|
||
if (!composeTo) {
|
||
alert('Please specify at least one recipient');
|
||
return;
|
||
}
|
||
|
||
try {
|
||
const response = await fetch('/api/mail/send', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({
|
||
to: composeTo,
|
||
cc: composeCc,
|
||
bcc: composeBcc,
|
||
subject: composeSubject,
|
||
body: composeBody,
|
||
attachments: attachments,
|
||
}),
|
||
});
|
||
|
||
const data = await response.json();
|
||
|
||
if (!response.ok) {
|
||
if (data.error === 'Attachment size limit exceeded') {
|
||
alert(`Error: ${data.error}\nThe following files are too large:\n${data.details.oversizedFiles.join('\n')}`);
|
||
} else {
|
||
alert(`Error sending email: ${data.error}`);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// Clear compose form and close modal
|
||
setComposeTo('');
|
||
setComposeCc('');
|
||
setComposeBcc('');
|
||
setComposeSubject('');
|
||
setComposeBody('');
|
||
setAttachments([]);
|
||
setShowCompose(false);
|
||
} catch (error) {
|
||
console.error('Error sending email:', error);
|
||
alert('Failed to send email. Please try again.');
|
||
}
|
||
};
|
||
|
||
// Add toggleStarred function
|
||
const toggleStarred = async (emailId: number, e?: React.MouseEvent) => {
|
||
if (e) {
|
||
e.stopPropagation();
|
||
}
|
||
|
||
const email = emails.find(e => e.id === emailId);
|
||
if (!email) return;
|
||
|
||
try {
|
||
const response = await fetch('/api/mail/toggle-star', {
|
||
method: 'POST',
|
||
headers: {
|
||
'Content-Type': 'application/json',
|
||
},
|
||
body: JSON.stringify({ emailId, starred: !email.starred }),
|
||
});
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Failed to toggle star');
|
||
}
|
||
|
||
// Update email in state
|
||
setEmails(emails.map(e =>
|
||
e.id === emailId ? { ...e, starred: !e.starred } : e
|
||
));
|
||
} catch (error) {
|
||
console.error('Error toggling star:', error);
|
||
}
|
||
};
|
||
|
||
// Add handleReply function
|
||
const handleReply = (type: 'reply' | 'replyAll' | 'forward') => {
|
||
if (!selectedEmail) return;
|
||
|
||
const getReplySubject = () => {
|
||
const subject = selectedEmail.subject;
|
||
if (type === 'forward') {
|
||
return subject.startsWith('Fwd:') ? subject : `Fwd: ${subject}`;
|
||
}
|
||
return subject.startsWith('Re:') ? subject : `Re: ${subject}`;
|
||
};
|
||
|
||
const getReplyTo = () => {
|
||
switch (type) {
|
||
case 'reply':
|
||
return selectedEmail.from;
|
||
case 'replyAll':
|
||
// For Reply All, only put the original sender in To
|
||
return selectedEmail.from;
|
||
case 'forward':
|
||
return '';
|
||
}
|
||
};
|
||
|
||
const getReplyCc = () => {
|
||
if (type === 'replyAll') {
|
||
// For Reply All, put all other recipients in CC, excluding the sender and current user
|
||
const allRecipients = new Set([
|
||
...(selectedEmail.to?.split(',') || []),
|
||
...(selectedEmail.cc?.split(',') || [])
|
||
]);
|
||
// Remove the sender and current user from CC
|
||
allRecipients.delete(selectedEmail.from);
|
||
allRecipients.delete(accounts[1]?.email);
|
||
return Array.from(allRecipients)
|
||
.map(email => email.trim())
|
||
.filter(email => email) // Remove empty strings
|
||
.join(', ');
|
||
}
|
||
return '';
|
||
};
|
||
|
||
const getReplyBody = () => {
|
||
try {
|
||
const parsed = parseFullEmail(selectedEmail.body);
|
||
let originalContent = '';
|
||
|
||
// Get the content from either HTML or text part
|
||
if (parsed.html) {
|
||
// Convert HTML to plain text for the reply
|
||
originalContent = parsed.html
|
||
.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, '')
|
||
.replace(/<script[^>]*>[\s\S]*?<\/script>/gi, '')
|
||
.replace(/<br\s*\/?>/gi, '\n')
|
||
.replace(/<div[^>]*>/gi, '\n')
|
||
.replace(/<\/div>/gi, '')
|
||
.replace(/<p[^>]*>/gi, '\n')
|
||
.replace(/<\/p>/gi, '')
|
||
.replace(/<[^>]+>/g, '')
|
||
.replace(/ |‌|»|«|>/g, match => {
|
||
switch (match) {
|
||
case ' ': return ' ';
|
||
case '‌': return '';
|
||
case '»': return '»';
|
||
case '«': return '«';
|
||
case '>': return '>';
|
||
case '<': return '<';
|
||
case '&': return '&';
|
||
default: return match;
|
||
}
|
||
})
|
||
.replace(/^\s+$/gm, '')
|
||
.replace(/\n{3,}/g, '\n\n')
|
||
.trim();
|
||
} else if (parsed.text) {
|
||
originalContent = parsed.text.trim();
|
||
} else {
|
||
// Fallback to raw body if parsing fails
|
||
originalContent = selectedEmail.body
|
||
.replace(/<[^>]+>/g, '')
|
||
.trim();
|
||
}
|
||
|
||
// Clean up the content
|
||
originalContent = originalContent
|
||
.split('\n')
|
||
.map(line => line.trim())
|
||
.filter(line => {
|
||
// Remove email client signatures and headers
|
||
return !line.match(/^(From|To|Sent|Subject|Date|Cc|Bcc):/i) &&
|
||
!line.match(/^-{2,}/) &&
|
||
!line.match(/^_{2,}/) &&
|
||
!line.match(/^={2,}/) &&
|
||
!line.match(/^This (email|message) has been/i) &&
|
||
!line.match(/^Disclaimer/i) &&
|
||
!line.match(/^[*_-]{3,}/) &&
|
||
!line.match(/^Envoyé depuis/i) &&
|
||
!line.match(/^Envoyé à partir de/i) &&
|
||
!line.match(/^Sent from/i) &&
|
||
!line.match(/^Outlook pour/i) &&
|
||
!line.match(/^De :/i) &&
|
||
!line.match(/^À :/i) &&
|
||
!line.match(/^Objet :/i);
|
||
})
|
||
.join('\n')
|
||
.trim();
|
||
|
||
// Format the reply
|
||
const date = new Date(selectedEmail.date);
|
||
const formattedDate = date.toLocaleString('en-GB', {
|
||
day: '2-digit',
|
||
month: '2-digit',
|
||
year: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit',
|
||
hour12: false
|
||
});
|
||
|
||
let replyHeader = '';
|
||
if (type === 'forward') {
|
||
replyHeader = `\n\n---------- Forwarded message ----------\n`;
|
||
replyHeader += `From: ${selectedEmail.from}\n`;
|
||
replyHeader += `Date: ${formattedDate}\n`;
|
||
replyHeader += `Subject: ${selectedEmail.subject}\n`;
|
||
replyHeader += `To: ${selectedEmail.to}\n`;
|
||
if (selectedEmail.cc) {
|
||
replyHeader += `Cc: ${selectedEmail.cc}\n`;
|
||
}
|
||
replyHeader += `\n`;
|
||
} else {
|
||
// Simple header for reply and reply all
|
||
replyHeader = `\n\nOn ${formattedDate}, ${selectedEmail.from} wrote:\n`;
|
||
}
|
||
|
||
// Indent the original content
|
||
const indentedContent = originalContent
|
||
.split('\n')
|
||
.map(line => line ? `> ${line}` : '>') // Keep empty lines as '>' for better readability
|
||
.join('\n');
|
||
|
||
return `${replyHeader}${indentedContent}`;
|
||
} catch (error) {
|
||
console.error('Error formatting reply:', error);
|
||
return `\n\nOn ${new Date(selectedEmail.date).toLocaleString()}, ${selectedEmail.from} wrote:\n> ${selectedEmail.body}`;
|
||
}
|
||
};
|
||
|
||
// Open compose modal with reply details
|
||
setShowCompose(true);
|
||
setComposeTo(getReplyTo());
|
||
setComposeSubject(getReplySubject());
|
||
setComposeBody(getReplyBody());
|
||
setComposeCc(getReplyCc());
|
||
setComposeBcc('');
|
||
// Show CC field automatically for Reply All
|
||
setShowCc(type === 'replyAll');
|
||
setShowBcc(false);
|
||
setAttachments([]);
|
||
};
|
||
|
||
// Add the confirmation dialog component
|
||
const renderDeleteConfirmDialog = () => (
|
||
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
|
||
<AlertDialogContent>
|
||
<AlertDialogHeader>
|
||
<AlertDialogTitle>Delete Emails</AlertDialogTitle>
|
||
<AlertDialogDescription>
|
||
Are you sure you want to delete {selectedEmails.length} selected email{selectedEmails.length > 1 ? 's' : ''}? This action cannot be undone.
|
||
</AlertDialogDescription>
|
||
</AlertDialogHeader>
|
||
<AlertDialogFooter>
|
||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||
<AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
|
||
</AlertDialogFooter>
|
||
</AlertDialogContent>
|
||
</AlertDialog>
|
||
);
|
||
|
||
const handleMailboxChange = async (newMailbox: string) => {
|
||
setCurrentView(newMailbox);
|
||
setSelectedEmails([]);
|
||
setSearchQuery('');
|
||
setEmails([]);
|
||
setLoading(true);
|
||
setError(null);
|
||
setHasMore(true);
|
||
setPage(1);
|
||
|
||
try {
|
||
// Optimize the request by adding a timeout
|
||
const controller = new AbortController();
|
||
const timeoutId = setTimeout(() => controller.abort(), 10000); // 10 second timeout
|
||
|
||
const response = await fetch(`/api/mail?folder=${encodeURIComponent(newMailbox)}&page=1&limit=${emailsPerPage}`, {
|
||
signal: controller.signal
|
||
});
|
||
|
||
clearTimeout(timeoutId);
|
||
|
||
if (!response.ok) {
|
||
throw new Error('Failed to fetch emails');
|
||
}
|
||
|
||
const data = await response.json();
|
||
|
||
// Process emails more efficiently
|
||
const processedEmails = data.emails.map((email: any) => ({
|
||
id: Number(email.id),
|
||
accountId: 1,
|
||
from: email.from || '',
|
||
fromName: email.from?.split('@')[0] || '',
|
||
to: email.to || '',
|
||
subject: email.subject || '(No subject)',
|
||
body: email.body || '',
|
||
date: email.date || new Date().toISOString(),
|
||
read: email.read || false,
|
||
starred: email.starred || false,
|
||
folder: email.folder || newMailbox,
|
||
cc: email.cc,
|
||
bcc: email.bcc,
|
||
flags: email.flags || []
|
||
}));
|
||
|
||
setEmails(processedEmails);
|
||
setHasMore(processedEmails.length === emailsPerPage);
|
||
|
||
// Only update unread count if we're in the Inbox folder
|
||
if (newMailbox === 'INBOX') {
|
||
const unreadInboxEmails = processedEmails.filter(
|
||
(email: Email) => !email.read && email.folder === 'INBOX'
|
||
).length;
|
||
setUnreadCount(unreadInboxEmails);
|
||
}
|
||
} catch (err) {
|
||
if (err instanceof Error) {
|
||
if (err.name === 'AbortError') {
|
||
setError('Request timed out. Please try again.');
|
||
} else {
|
||
setError(err.message);
|
||
}
|
||
} else {
|
||
setError('Failed to fetch emails');
|
||
}
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
|
||
<div className="text-center max-w-md mx-auto px-4">
|
||
<Mail className="h-12 w-12 mb-4 text-red-400 mx-auto" />
|
||
<p className="text-red-500 mb-4">{error}</p>
|
||
<Button
|
||
variant="outline"
|
||
onClick={() => window.location.reload()}
|
||
className="mx-auto"
|
||
>
|
||
Try Again
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<>
|
||
{/* Main layout */}
|
||
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
||
{/* Sidebar */}
|
||
<div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
|
||
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||
{/* Courrier Title */}
|
||
<div className="p-3 border-b border-gray-100">
|
||
<div className="flex items-center gap-2">
|
||
<Mail className="h-6 w-6 text-gray-600" />
|
||
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Compose button and refresh button */}
|
||
<div className="p-2 border-b border-gray-100 flex items-center gap-2">
|
||
<Button
|
||
className="flex-1 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
||
onClick={() => {
|
||
setShowCompose(true);
|
||
setComposeTo('');
|
||
setComposeCc('');
|
||
setComposeBcc('');
|
||
setComposeSubject('');
|
||
setComposeBody('');
|
||
setShowCc(false);
|
||
setShowBcc(false);
|
||
}}
|
||
>
|
||
<div className="flex items-center gap-2">
|
||
<PlusIcon className="h-3.5 w-3.5" />
|
||
<span>Compose</span>
|
||
</div>
|
||
</Button>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
onClick={() => handleMailboxChange('INBOX')}
|
||
className="text-gray-600 hover:text-gray-900 hover:bg-gray-100"
|
||
>
|
||
<RefreshCw className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Accounts Section */}
|
||
<div className="p-3 border-b border-gray-100">
|
||
<Button
|
||
variant="ghost"
|
||
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
|
||
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
||
>
|
||
<span>Accounts</span>
|
||
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||
</Button>
|
||
|
||
{accountsDropdownOpen && (
|
||
<div className="space-y-1 pl-2">
|
||
{accounts.map(account => (
|
||
<div key={account.id} className="relative group">
|
||
<Button
|
||
variant="ghost"
|
||
className="w-full justify-between px-2 py-1.5 text-sm group"
|
||
onClick={() => setSelectedAccount(account)}
|
||
>
|
||
<div className="flex flex-col items-start">
|
||
<div className="flex items-center gap-2">
|
||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||
<span className="font-medium">{account.name}</span>
|
||
</div>
|
||
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
||
</div>
|
||
</Button>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Navigation */}
|
||
{renderSidebarNav()}
|
||
</div>
|
||
|
||
{/* Main content area */}
|
||
<div className="flex-1 flex overflow-hidden">
|
||
{/* Email list panel */}
|
||
{renderEmailListWrapper()}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Compose Email Modal */}
|
||
{showCompose && (
|
||
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
||
<div className="w-full max-w-2xl h-[80vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
||
{/* Modal Header */}
|
||
<div className="flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
||
<h3 className="text-lg font-semibold text-gray-900">
|
||
{composeSubject.startsWith('Re:') ? 'Reply' :
|
||
composeSubject.startsWith('Fwd:') ? 'Forward' : 'New Message'}
|
||
</h3>
|
||
<Button
|
||
variant="ghost"
|
||
size="icon"
|
||
className="hover:bg-gray-100 rounded-full"
|
||
onClick={() => {
|
||
setShowCompose(false);
|
||
setComposeTo('');
|
||
setComposeCc('');
|
||
setComposeBcc('');
|
||
setComposeSubject('');
|
||
setComposeBody('');
|
||
setShowCc(false);
|
||
setShowBcc(false);
|
||
}}
|
||
>
|
||
<X className="h-5 w-5 text-gray-500" />
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Modal Body */}
|
||
<div className="flex-1 overflow-y-auto">
|
||
<div className="p-6 space-y-4">
|
||
{/* To Field */}
|
||
<div>
|
||
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
|
||
<Input
|
||
id="to"
|
||
value={composeTo}
|
||
onChange={(e) => setComposeTo(e.target.value)}
|
||
placeholder="recipient@example.com"
|
||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||
/>
|
||
</div>
|
||
|
||
{/* CC/BCC Toggle Buttons */}
|
||
<div className="flex items-center gap-4">
|
||
<button
|
||
type="button"
|
||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||
onClick={() => setShowCc(!showCc)}
|
||
>
|
||
{showCc ? 'Hide Cc' : 'Add Cc'}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||
onClick={() => setShowBcc(!showBcc)}
|
||
>
|
||
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
|
||
</button>
|
||
</div>
|
||
|
||
{/* CC Field */}
|
||
{showCc && (
|
||
<div>
|
||
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
|
||
<Input
|
||
id="cc"
|
||
value={composeCc}
|
||
onChange={(e) => setComposeCc(e.target.value)}
|
||
placeholder="cc@example.com"
|
||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* BCC Field */}
|
||
{showBcc && (
|
||
<div>
|
||
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
|
||
<Input
|
||
id="bcc"
|
||
value={composeBcc}
|
||
onChange={(e) => setComposeBcc(e.target.value)}
|
||
placeholder="bcc@example.com"
|
||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||
/>
|
||
</div>
|
||
)}
|
||
|
||
{/* Subject Field */}
|
||
<div>
|
||
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
|
||
<Input
|
||
id="subject"
|
||
value={composeSubject}
|
||
onChange={(e) => setComposeSubject(e.target.value)}
|
||
placeholder="Enter subject"
|
||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||
/>
|
||
</div>
|
||
|
||
{/* Message Body */}
|
||
<div>
|
||
<Label htmlFor="message" className="block text-sm font-medium text-gray-700">Message</Label>
|
||
<Textarea
|
||
id="message"
|
||
value={composeBody}
|
||
onChange={(e) => setComposeBody(e.target.value)}
|
||
placeholder="Write your message..."
|
||
className="w-full mt-1 min-h-[200px] bg-white border-gray-300 text-gray-900 resize-none"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Modal Footer */}
|
||
<div className="flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
|
||
<div className="flex items-center gap-2">
|
||
{/* File Input for Attachments */}
|
||
<input
|
||
type="file"
|
||
id="file-attachment"
|
||
className="hidden"
|
||
multiple
|
||
onChange={handleFileAttachment}
|
||
/>
|
||
<label htmlFor="file-attachment">
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
|
||
onClick={(e) => {
|
||
e.preventDefault();
|
||
document.getElementById('file-attachment')?.click();
|
||
}}
|
||
>
|
||
<Paperclip className="h-4 w-4 text-gray-600" />
|
||
</Button>
|
||
</label>
|
||
</div>
|
||
<div className="flex items-center gap-3">
|
||
<Button
|
||
variant="ghost"
|
||
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
|
||
onClick={() => setShowCompose(false)}
|
||
>
|
||
Cancel
|
||
</Button>
|
||
<Button
|
||
className="bg-blue-600 text-white hover:bg-blue-700"
|
||
onClick={handleSend}
|
||
>
|
||
Send
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
{renderDeleteConfirmDialog()}
|
||
</>
|
||
);
|
||
}
|