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

mail page ui correction maj compose

Browse Source
This commit is contained in:
alma 2025-04-16 11:55:03 +02:00
parent 11ef993541
commit 2fc6b6bb60
1 changed files with 149 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
app/mail/page.tsx
View File

@ -1051,8 +1051,13 @@ export default function MailPage() {
{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">
{/* Modal Header */}
<div className="flex items-center justify-between p-4 border-b">
<h2 className="text-lg font-semibold">New Message</h2>
<h2 className="text-lg font-semibold">
{composeSubject.startsWith('Re:') ? 'Reply' :
composeSubject.startsWith('Fwd:') ? 'Forward' :
'New Message'}
</h2>
<Button
variant="ghost"
size="icon"
@ -1069,74 +1074,114 @@ export default function MailPage() {
<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>
<Input
id="to"
value={composeTo}
onChange={(e) => setComposeTo(e.target.value)}
placeholder="recipient@example.com"
/>
</div>
<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>
</div>
{showCc && (
<>
<div>
<Label htmlFor="cc">CC</Label>
<Input
id="cc"
value={composeCc}
onChange={(e) => setComposeCc(e.target.value)}
placeholder="cc@example.com"
/>
{/* Modal Body */}
<div className="p-4 flex-1 overflow-y-auto">
<div className="space-y-4">
{/* Recipients */}
<div>
<Label htmlFor="to">To</Label>
<Input
id="to"
type="email"
value={composeTo}
onChange={(e) => setComposeTo(e.target.value)}
placeholder="recipient@example.com"
/>
</div>
{/* CC/BCC Controls */}
<div className="flex items-center gap-2">
<Button
type="button"
variant="ghost"
size="sm"
onClick={() => setShowCc(!showCc)}
className="text-gray-500"
>
{showCc ? 'Hide' : 'Show'} CC/BCC
</Button>
</div>
{showCc && (
<>
<div>
<Label htmlFor="cc">CC</Label>
<Input
id="cc"
type="email"
value={composeCc}
onChange={(e) => setComposeCc(e.target.value)}
placeholder="cc@example.com"
/>
</div>
<div>
<Label htmlFor="bcc">BCC</Label>
<Input
id="bcc"
type="email"
value={composeBcc}
onChange={(e) => setComposeBcc(e.target.value)}
placeholder="bcc@example.com"
/>
</div>
</>
)}
{/* Subject */}
<div>
<Label htmlFor="subject">Subject</Label>
<Input
id="subject"
value={composeSubject}
onChange={(e) => setComposeSubject(e.target.value)}
placeholder="Email subject"
/>
</div>
{/* Message Body */}
<div>
<Label htmlFor="body">Message</Label>
<Textarea
id="body"
value={composeBody}
onChange={(e) => setComposeBody(e.target.value)}
className="min-h-[300px] font-mono"
placeholder="Write your message here..."
/>
</div>
{/* Attachments */}
<div>
<Label>Attachments</Label>
<div className="mt-2 flex items-center gap-2">
<Button
type="button"
variant="outline"
className="flex items-center gap-2"
onClick={() => {
const input = document.createElement('input');
input.type = 'file';
input.multiple = true;
input.click();
input.onchange = (e) => {
const files = (e.target as HTMLInputElement).files;
if (files) {
// Handle file attachments
console.log('Files selected:', files);
}
};
}}
>
<Paperclip className="h-4 w-4" />
Attach Files
</Button>
</div>
<div>
<Label htmlFor="bcc">BCC</Label>
<Input
id="bcc"
value={composeBcc}
onChange={(e) => setComposeBcc(e.target.value)}
placeholder="bcc@example.com"
/>
</div>
</>
)}
<div>
<Label htmlFor="subject">Subject</Label>
<Input
id="subject"
value={composeSubject}
onChange={(e) => setComposeSubject(e.target.value)}
placeholder="Email subject"
/>
</div>
<div className="flex-1">
<Label htmlFor="body">Message</Label>
<Textarea
id="body"
value={composeBody}
onChange={(e) => setComposeBody(e.target.value)}
className="min-h-[200px]"
placeholder="Write your message here..."
/>
</div>
</div>
</div>
{/* Modal Footer */}
<div className="p-4 border-t flex justify-end gap-2">
<Button
variant="outline"
@ -1152,7 +1197,44 @@ export default function MailPage() {
>
Cancel
</Button>
<Button>Send</Button>
<Button
onClick={async () => {
try {
// Send email
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,
}),
});
if (!response.ok) {
throw new Error('Failed to send email');
}
// Clear form and close modal
setShowCompose(false);
setComposeTo('');
setComposeSubject('');
setComposeBody('');
setShowCc(false);
setComposeCc('');
setComposeBcc('');
} catch (error) {
console.error('Error sending email:', error);
// Show error message to user
}
}}
>
Send
</Button>
</div>
</div>
</div>