mail page imap connection 11
This commit is contained in:
parent
d6065d4934
commit
790e7ed940
@ -41,22 +41,22 @@ interface Email {
|
|||||||
category: string;
|
category: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Add MIME decoding function
|
// Update MIME decoding function for better formatting
|
||||||
const decodeMimeContent = (content: string) => {
|
const decodeMimeContent = (content: string) => {
|
||||||
try {
|
try {
|
||||||
// Remove MIME headers
|
// Remove MIME headers and metadata
|
||||||
const contentWithoutHeaders = content.replace(/^.*?Content-Type:.*?\n\n/s, '');
|
const contentWithoutHeaders = content.replace(/^.*?Content-Type:.*?\n\n/s, '')
|
||||||
|
.replace(/---InfomaniakPhpMail.*?Content-Transfer-Encoding:.*?\n/g, '')
|
||||||
// Decode quoted-printable
|
.replace(/=C2=A0/g, ' ') // Replace non-breaking spaces
|
||||||
const decoded = contentWithoutHeaders
|
|
||||||
.replace(/=\n/g, '') // Remove soft line breaks
|
.replace(/=\n/g, '') // Remove soft line breaks
|
||||||
.replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
|
.replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
|
||||||
.replace(/=C2=A0/g, ' ') // Replace non-breaking spaces
|
.replace(/\[IMG:.*?\]/g, '') // Remove image placeholders
|
||||||
.replace(/\[LINK: (.*?)\]/g, '$1') // Format links
|
.replace(/\[LINK:\s*(.*?)\s*\]/g, '$1') // Clean up links
|
||||||
.replace(/\[IMG: (.*?)\]/g, '') // Remove image placeholders
|
.replace(/\*([^*]+)\*/g, '$1') // Remove asterisks
|
||||||
|
.replace(/\s+/g, ' ') // Normalize whitespace
|
||||||
.trim();
|
.trim();
|
||||||
|
|
||||||
return decoded;
|
return contentWithoutHeaders;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error decoding MIME content:', error);
|
console.error('Error decoding MIME content:', error);
|
||||||
return content;
|
return content;
|
||||||
@ -309,111 +309,120 @@ export default function MailPage() {
|
|||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
|
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
|
||||||
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||||||
{/* Courrier Title */}
|
{/* Mail Title */}
|
||||||
<div className="p-3 border-b border-gray-100">
|
<div className="p-3 border-b border-gray-100">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<MessageSquare className="h-5 w-5 text-gray-600" />
|
<Mail className="h-5 w-5 text-gray-600" />
|
||||||
<span className="font-semibold text-gray-900">Courrier</span>
|
<span className="font-semibold text-gray-900">Mail</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Accounts Section */}
|
|
||||||
<div className="p-3 border-b border-gray-100">
|
|
||||||
<div className="text-sm font-medium text-gray-500 mb-2">Accounts</div>
|
|
||||||
|
|
||||||
{/* All Accounts Option */}
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="w-full justify-start px-2 py-1.5 text-sm mb-1"
|
|
||||||
onClick={() => setSelectedAccount(0)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center gap-2 w-full">
|
|
||||||
<div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
|
|
||||||
<span className="font-medium">All</span>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* Mail Accounts List */}
|
|
||||||
{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 mb-1 group"
|
|
||||||
onClick={() => setSelectedAccount(account.id)}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setShowAccountActions(account.id);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<MoreVertical className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* Account Actions Dropdown */}
|
|
||||||
{showAccountActions === account.id && (
|
|
||||||
<div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
|
|
||||||
<button
|
|
||||||
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
||||||
onClick={() => {
|
|
||||||
const newName = prompt('Enter new account name:', account.name);
|
|
||||||
if (newName) handleEditAccount(account.id, newName);
|
|
||||||
setShowAccountActions(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Edit className="h-4 w-4 inline-block mr-2" />
|
|
||||||
Modify Account
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
|
|
||||||
onClick={() => {
|
|
||||||
setDeleteType('account');
|
|
||||||
setItemToDelete(account.id);
|
|
||||||
setShowDeleteConfirm(true);
|
|
||||||
setShowAccountActions(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4 inline-block mr-2" />
|
|
||||||
Remove Account
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Add Account Button */}
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
|
|
||||||
onClick={handleAddAccount}
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
|
||||||
Add Account
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Compose button */}
|
{/* Compose button */}
|
||||||
<Button
|
<div className="p-3 border-b border-gray-100">
|
||||||
className={`mx-3 mt-3 mb-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all ${sidebarOpen ? 'py-2 px-4' : 'p-2'}`}
|
<Button
|
||||||
onClick={() => setComposeOpen(true)}
|
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-2"
|
||||||
>
|
onClick={() => setComposeOpen(true)}
|
||||||
{sidebarOpen ? (
|
>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<PlusIcon className="h-4 w-4" />
|
<PlusIcon className="h-4 w-4" />
|
||||||
<span className="ml-2">Compose</span>
|
<span className="ml-2">Compose</span>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
</Button>
|
||||||
<PlusIcon className="h-4 w-4" />
|
</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">
|
||||||
|
{/* All Accounts Option */}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||||
|
onClick={() => setSelectedAccount(0)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center gap-2 w-full">
|
||||||
|
<div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
|
||||||
|
<span className="font-medium">All</span>
|
||||||
|
</div>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Mail Accounts List */}
|
||||||
|
{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.id)}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||||
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowAccountActions(account.id);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<MoreVertical className="h-4 w-4" />
|
||||||
|
</Button>
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
{/* Account Actions Dropdown */}
|
||||||
|
{showAccountActions === account.id && (
|
||||||
|
<div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
|
||||||
|
<button
|
||||||
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
onClick={() => {
|
||||||
|
const newName = prompt('Enter new account name:', account.name);
|
||||||
|
if (newName) handleEditAccount(account.id, newName);
|
||||||
|
setShowAccountActions(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Edit className="h-4 w-4 inline-block mr-2" />
|
||||||
|
Modify Account
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
|
||||||
|
onClick={() => {
|
||||||
|
setDeleteType('account');
|
||||||
|
setItemToDelete(account.id);
|
||||||
|
setShowDeleteConfirm(true);
|
||||||
|
setShowAccountActions(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 inline-block mr-2" />
|
||||||
|
Remove Account
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
|
||||||
|
{/* Add Account Button */}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
|
||||||
|
onClick={handleAddAccount}
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
Add Account
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</div>
|
||||||
|
|
||||||
{/* Navigation */}
|
{/* Navigation */}
|
||||||
<nav className="flex-1 overflow-y-auto py-2">
|
<nav className="flex-1 overflow-y-auto py-2">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user