courrier correct panel 2 scroll up

This commit is contained in:
alma 2025-04-27 15:35:21 +02:00
parent 45f0da76c3
commit cf1509540e

View File

@ -26,6 +26,7 @@ import {
import { ScrollArea } from '@/components/ui/scroll-area';
import { Avatar, AvatarFallback } from '@/components/ui/avatar';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
// Import components
import EmailSidebar from '@/components/email/EmailSidebar';
@ -111,6 +112,7 @@ export default function CourrierPage() {
const [loading, setLoading] = useState(false);
const [prefetchStarted, setPrefetchStarted] = useState(false);
const [showFolders, setShowFolders] = useState(true);
const [showAddAccountForm, setShowAddAccountForm] = useState(false);
// Email accounts for the sidebar
const [accounts, setAccounts] = useState<Account[]>([
@ -424,14 +426,83 @@ export default function CourrierPage() {
{/* Accounts Section */}
<div className="p-3 border-b border-gray-100">
<Button
variant="ghost"
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
>
<span>Accounts</span>
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</Button>
<div className="flex items-center justify-between mb-2">
<Button
variant="ghost"
className="w-full justify-between text-sm font-medium text-gray-500"
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
>
<span>Accounts</span>
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
</Button>
<Button
variant="ghost"
size="sm"
className="h-7 w-7 p-0 text-gray-400 hover:text-gray-600"
onClick={() => setShowAddAccountForm(!showAddAccountForm)}
>
<Plus className="h-4 w-4" />
</Button>
</div>
{/* Form for adding a new account */}
{showAddAccountForm && (
<div className="mb-3 p-2 border border-gray-200 rounded-md bg-gray-50">
<h4 className="text-xs font-medium mb-2 text-gray-700">Add IMAP Account</h4>
<form onSubmit={(e) => {
e.preventDefault();
// We'll implement this function later
alert('This feature will be implemented next');
setShowAddAccountForm(false);
}}>
<div className="space-y-2">
<Input
type="email"
placeholder="Email address"
className="h-8 text-xs"
required
/>
<Input
type="password"
placeholder="Password"
className="h-8 text-xs"
required
/>
<Input
type="text"
placeholder="IMAP server"
className="h-8 text-xs"
required
/>
<Input
type="number"
placeholder="Port (usually 993)"
className="h-8 text-xs"
defaultValue="993"
required
/>
<div className="flex justify-end space-x-2 pt-1">
<Button
type="button"
variant="ghost"
size="sm"
className="h-7 text-xs"
onClick={() => setShowAddAccountForm(false)}
>
Cancel
</Button>
<Button
type="submit"
size="sm"
className="h-7 text-xs"
>
Add Account
</Button>
</div>
</div>
</form>
</div>
)}
{accountsDropdownOpen && (
<div className="space-y-1 pl-2">