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

mail page ui correction maj compose 20 bis 14

Browse Source
This commit is contained in:
alma 2025-04-16 14:35:49 +02:00
parent a224c152b6
commit 9adc1e6228
1 changed files with 25 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/mail/page.tsx
View File

@ -430,13 +430,13 @@ function cleanEmailContent(content: string): string {
});
}
// Add a type for the available views
type MailView = 'inbox' | 'sent' | 'trash' | 'spam' | 'drafts' | 'archives' | 'archive' | 'starred';
// First, let's define our mail view types based on the actual IMAP folders
type MailView = 'INBOX' | 'Sent' | 'Trash' | 'Spam' | 'Drafts' | 'Archives' | 'Archive' | 'starred';
// Update the sidebar navigation
// Update the sidebar navigation to use exact IMAP folder names
const sidebarNavItems = [
{
view: 'inbox' as MailView,
view: 'INBOX' as MailView, // Exact IMAP folder name
label: 'Inbox',
icon: Inbox,
folder: 'INBOX'
@ -445,34 +445,34 @@ const sidebarNavItems = [
view: 'starred' as MailView,
label: 'Starred',
icon: Star,
folder: null // This is handled by the starred flag
folder: null // Special case for starred items
},
{
view: 'sent' as MailView,
view: 'Sent' as MailView, // Exact IMAP folder name
label: 'Sent',
icon: Send,
folder: 'Sent'
},
{
view: 'drafts' as MailView,
view: 'Drafts' as MailView, // Exact IMAP folder name
label: 'Drafts',
icon: Edit,
folder: 'Drafts'
},
{
view: 'spam' as MailView,
view: 'Spam' as MailView, // Exact IMAP folder name
label: 'Spam',
icon: AlertOctagon,
folder: 'Spam'
},
{
view: 'trash' as MailView,
view: 'Trash' as MailView, // Exact IMAP folder name
label: 'Trash',
icon: Trash,
folder: 'Trash'
},
{
view: 'archives' as MailView,
view: 'Archives' as MailView, // Exact IMAP folder name
label: 'Archives',
icon: Archive,
folder: 'Archives'
@ -487,7 +487,7 @@ export default function MailPage() {
{ id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
]);
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
const [currentView, setCurrentView] = useState<MailView>('inbox');
const [currentView, setCurrentView] = useState<MailView>('INBOX'); // Use exact IMAP folder name
const [showCompose, setShowCompose] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
const [selectedEmails, setSelectedEmails] = useState<string[]>([]);
@ -526,7 +526,7 @@ export default function MailPage() {
console.log('Selected account:', selectedAccount);
}, [emails, currentView, selectedAccount]);
// Update the filteredEmails logic to match exactly with the folders
// Update the filteredEmails logic to use exact folder names
const filteredEmails = useMemo(() => {
console.log('Filtering emails:', {
total: emails.length,
@ -537,18 +537,12 @@ export default function MailPage() {
currentView
});
// Find the current nav item
const currentNavItem = sidebarNavItems.find(item => item.view === currentView);
// If it's starred view, filter by starred flag
if (currentView === 'starred') {
return emails.filter(email => email.starred);
}
// Otherwise filter by folder
return emails.filter(email => {
return email.folder === currentNavItem?.folder;
});
// For all other views, use exact folder name matching
return emails.filter(email => email.folder === currentView);
}, [emails, currentView]);
// Move getSelectedEmail inside the component
@ -585,7 +579,7 @@ export default function MailPage() {
checkCredentials();
}, [router]);
// Update the loadEmails function
// Update the loadEmails function to preserve exact folder names
const loadEmails = async () => {
try {
setLoading(true);
@ -599,7 +593,7 @@ export default function MailPage() {
const data = await response.json();
console.log('Raw email data:', data);
// Process the emails
// Process the emails, keeping exact folder names
const processedEmails = data.emails.map((email: any) => ({
...email,
id: Number(email.id),
@ -610,13 +604,12 @@ export default function MailPage() {
date: email.date || new Date().toISOString(),
read: email.read || false,
starred: email.starred || false,
folder: email.folder || 'INBOX', // Keep original folder name
draft: email.draft || false
folder: email.folder // Keep exact folder name from IMAP
}));
// Update unread count for inbox
// Update unread count for INBOX (note the exact folder name)
const unreadInboxEmails = processedEmails.filter(
email => !email.read && email.folder === 'INBOX' && !email.draft
email => !email.read && email.folder === 'INBOX'
).length;
setUnreadCount(unreadInboxEmails);
@ -1040,7 +1033,7 @@ export default function MailPage() {
<item.icon className="h-4 w-4 mr-2" />
<span>{item.label}</span>
</div>
{item.view === 'inbox' && unreadCount > 0 && (
{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>
@ -1174,10 +1167,10 @@ export default function MailPage() {
<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">
{currentView === 'inbox' && 'No emails in inbox'}
{currentView === 'INBOX' && 'No emails in inbox'}
{currentView === 'starred' && 'No starred emails'}
{currentView === 'sent' && 'No sent emails'}
{currentView === 'trash' && 'No emails in trash'}
{currentView === 'Sent' && 'No sent emails'}
{currentView === 'Trash' && 'No emails in trash'}
</p>
{/* Add debug info */}
<p className="text-xs text-gray-400 mt-2">
@ -1208,7 +1201,7 @@ export default function MailPage() {
}}
/>
<span className="text-sm font-medium text-gray-900">
{currentView === 'sent' ? email.to : (email.fromName || email.from)}
{currentView === 'Sent' ? email.to : (email.fromName || email.from)}
</span>
</div>
<div className="flex items-center gap-2">