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

mail page ui correction maj compose 5

Browse Source
This commit is contained in:
alma 2025-04-16 12:12:47 +02:00
parent 53934088bf
commit bc4e119d7e
1 changed files with 342 additions and 329 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
app/mail/page.tsx
View File

@ -431,10 +431,10 @@ export default function MailPage() {
const [showBcc, setShowBcc] = useState(false);
const [emails, setEmails] = useState<Email[]>([]);
const [error, setError] = useState<string | null>(null);
const [composeSubject, setComposeSubject] = useState('');
const [composeTo, setComposeTo] = useState('');
const [composeCc, setComposeCc] = useState('');
const [composeBcc, setComposeBcc] = useState('');
const [composeSubject, setComposeSubject] = useState('');
const [composeBody, setComposeBody] = useState('');
const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
const [sidebarOpen, setSidebarOpen] = useState(true);
@ -711,6 +711,7 @@ export default function MailPage() {
}
return (
<>
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
{/* 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
@ -724,14 +725,25 @@ export default function MailPage() {
</div>
{/* Compose button */}
<div className="p-3 border-b border-gray-100">
<div className="p-2 border-b border-gray-100">
<Button
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)}
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
onClick={() => {
console.log('Compose button clicked');
setShowCompose(true);
// Reset form fields
setComposeTo('');
setComposeCc('');
setComposeBcc('');
setComposeSubject('');
setComposeBody('');
setShowCc(false);
setShowBcc(false);
}}
>
<div className="flex items-center">
<PlusIcon className="h-4 w-4" />
<span className="ml-2">Compose</span>
<div className="flex items-center gap-2">
<PlusIcon className="h-3.5 w-3.5" />
<span>Compose</span>
</div>
</Button>
</div>
@ -1062,22 +1074,20 @@ export default function MailPage() {
)}
</div>
</div>
</div>
{/* 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 border-gray-200">
<h3 className="text-lg font-semibold text-gray-900">
{composeSubject.startsWith('Re:') ? 'Reply' :
composeSubject.startsWith('Fwd:') ? 'Forward' :
'New Message'}
</h3>
<h3 className="text-lg font-semibold text-gray-900">New Message</h3>
<Button
variant="ghost"
size="icon"
onClick={() => {
setShowCompose(false);
// Clear form data
setComposeTo('');
setComposeCc('');
setComposeBcc('');
@ -1176,7 +1186,10 @@ export default function MailPage() {
</Button>
</div>
<div className="flex items-center gap-2">
<Button variant="outline" onClick={() => setShowCompose(false)}>
<Button
variant="outline"
onClick={() => setShowCompose(false)}
>
Cancel
</Button>
<Button
@ -1231,6 +1244,6 @@ export default function MailPage() {
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</>
);
}