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

mail page ui correction maj 6

Browse Source
This commit is contained in:
alma 2025-04-16 11:50:24 +02:00
parent 0ad7e04bfb
commit 11ef993541
1 changed files with 73 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

102
app/mail/page.tsx
View File

@ -558,11 +558,21 @@ export default function MailPage() {
const email = emails.find(e => e.id === emailId);
if (email) {
setSelectedEmail(email);
// Mark as read
const updatedEmails = emails.map(e =>
e.id === emailId ? { ...e, read: true } : e
);
setEmails(updatedEmails);
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);
});
}
}
};
@ -1037,36 +1047,29 @@ export default function MailPage() {
</div>
</div>
{/* Delete Confirmation Dialog */}
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
{deleteType === 'email' ? 'Delete Email' :
deleteType === 'emails' ? 'Delete Selected Emails' :
'Delete Account'}
</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction onClick={handleDeleteConfirm}>Delete</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
{/* Compose Modal */}
{/* Compose Email Modal */}
{showCompose && (
<div className="fixed inset-0 bg-black/50 z-50">
<div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
<div className="flex items-center justify-between p-4 border-b">
<h2 className="text-lg font-semibold">New Message</h2>
<Button variant="ghost" size="icon" onClick={() => setShowCompose(false)}>
<Button
variant="ghost"
size="icon"
onClick={() => {
setShowCompose(false);
setComposeTo('');
setComposeSubject('');
setComposeBody('');
setShowCc(false);
setComposeCc('');
setComposeBcc('');
}}
>
<X className="h-4 w-4" />
</Button>
</div>
<div className="p-4 flex-1 overflow-auto space-y-4">
<div>
<Label htmlFor="to">To</Label>
@ -1074,15 +1077,16 @@ export default function MailPage() {
id="to"
value={composeTo}
onChange={(e) => setComposeTo(e.target.value)}
placeholder="recipient@example.com"
/>
</div>
{/* CC/BCC controls */}
<div className="flex items-center gap-2">
<Button
variant="ghost"
size="sm"
onClick={() => setShowCc(!showCc)}
className="text-gray-500"
>
{showCc ? 'Hide' : 'Show'} CC/BCC
</Button>
@ -1096,6 +1100,7 @@ export default function MailPage() {
id="cc"
value={composeCc}
onChange={(e) => setComposeCc(e.target.value)}
placeholder="cc@example.com"
/>
</div>
<div>
@ -1104,6 +1109,7 @@ export default function MailPage() {
id="bcc"
value={composeBcc}
onChange={(e) => setComposeBcc(e.target.value)}
placeholder="bcc@example.com"
/>
</div>
</>
@ -1115,6 +1121,7 @@ export default function MailPage() {
id="subject"
value={composeSubject}
onChange={(e) => setComposeSubject(e.target.value)}
placeholder="Email subject"
/>
</div>
@ -1125,12 +1132,24 @@ export default function MailPage() {
value={composeBody}
onChange={(e) => setComposeBody(e.target.value)}
className="min-h-[200px]"
placeholder="Write your message here..."
/>
</div>
</div>
<div className="p-4 border-t flex justify-end gap-2">
<Button variant="outline" onClick={() => setShowCompose(false)}>
<Button
variant="outline"
onClick={() => {
setShowCompose(false);
setComposeTo('');
setComposeSubject('');
setComposeBody('');
setShowCc(false);
setComposeCc('');
setComposeBcc('');
}}
>
Cancel
</Button>
<Button>Send</Button>
@ -1138,6 +1157,31 @@ export default function MailPage() {
</div>
</div>
)}
{/* Delete Confirmation Dialog */}
<AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle>
{deleteType === 'email' ? 'Delete Email' :
deleteType === 'emails' ? 'Delete Selected Emails' :
'Delete Account'}
</AlertDialogTitle>
<AlertDialogDescription>
This action cannot be undone. Are you sure you want to proceed?
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel>Cancel</AlertDialogCancel>
<AlertDialogAction
onClick={handleDeleteConfirm}
className="bg-red-600 text-white hover:bg-red-700"
>
Delete
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
);
}