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

55
app/mail/page.tsx
View File

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