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