mail page imap connection 7

app/mail/page.tsx

@@ -17,9 +17,8 @@ import {
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
-import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X } from 'lucide-react';
 import { Label } from "@/components/ui/label";
-import { Paperclip, Copy, EyeOff } from 'lucide-react';
+import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X, Paperclip } from 'lucide-react';
 
 interface Account {
   id: number;
@@ -42,12 +41,6 @@ interface Email {
   category: string;
 }
 
-interface Mailbox {
-  name: string;
-  path: string;
-  children?: Mailbox[];
-}
-
 export default function MailPage() {
   // Single IMAP account for now
   const [accounts, setAccounts] = useState<Account[]>([
@@ -100,9 +93,9 @@ export default function MailPage() {
     }
 
     fetchEmails();
-  }, [currentView]); // Refetch when view changes
+  }, [currentView]);
 
-  // Mock folders data - will be replaced with IMAP folders later
+  // Mock folders data
   const folders = [
     { id: 1, name: 'Important' },
     { id: 2, name: 'Work' },
@@ -236,6 +229,11 @@ export default function MailPage() {
     setShowDeleteConfirm(false);
   };
 
+  // Get selected email
+  const getSelectedEmail = () => {
+    return emails.find(email => email.id === selectedEmail);
+  };
+
   if (loading) {
     return (
       <div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
@@ -266,187 +264,252 @@ export default function MailPage() {
   }
 
   return (
-    <div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-100 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 */}
-      <div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white border-r border-gray-200 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
                     ${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
-        {/* Logo and toggle */}
+        {/* Account Selection */}
-        <div className="p-4 flex items-center justify-between border-b border-gray-200">
+        <div className="relative">
-          {sidebarOpen && <h1 className="text-base font-medium text-gray-900">Mail</h1>}
+          <div className="p-3 border-b border-gray-100">
+            {sidebarOpen ? (
+              <Button 
+                variant="ghost"
+                className="w-full justify-between text-gray-600 hover:text-gray-900"
+                onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
+              >
+                <div className="flex items-center gap-2">
+                  <div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div>
+                  <span>{accounts.find(acc => acc.id === selectedAccount)?.name || 'All accounts'}</span>
+                </div>
+                {accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
+              </Button>
+            ) : (
               <Button
                 variant="ghost"
                 size="icon"
-            className="hidden md:flex hover:bg-gray-100"
+                className="w-full aspect-square"
-            onClick={() => setSidebarOpen(!sidebarOpen)}
+                onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
               >
-            {sidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+                <div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div>
               </Button>
+            )}
+          </div>
+
+          {/* Accounts Dropdown */}
+          {accountsDropdownOpen && sidebarOpen && (
+            <div className="absolute top-full left-0 w-full bg-white border border-gray-100 shadow-lg rounded-b-lg z-50">
+              {allAccounts.map(account => (
+                <div key={account.id} className="relative group">
+                  <Button
+                    variant="ghost"
+                    className="w-full justify-start px-4 py-2 text-sm"
+                    onClick={() => {
+                      setSelectedAccount(account.id);
+                      setAccountsDropdownOpen(false);
+                    }}
+                  >
+                    <div className="flex items-center gap-2 w-full">
+                      <div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
+                      <div className="flex flex-col items-start flex-1">
+                        <span className="font-medium">{account.name}</span>
+                        {account.email && <span className="text-xs text-gray-500">{account.email}</span>}
+                      </div>
+                    </div>
+                  </Button>
+                </div>
+              ))}
+            </div>
+          )}
         </div>
 
         {/* Compose button */}
-        <div className="p-4">
         <Button 
-            className="w-full justify-start gap-2 bg-gray-900 text-white hover:bg-gray-800"
+          className={`mx-3 mt-3 mb-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all ${sidebarOpen ? 'py-2 px-4' : 'p-2'}`}
           onClick={() => setComposeOpen(true)}
         >
-            <Plus className="h-4 w-4" />
+          {sidebarOpen ? (
-            {sidebarOpen && "Compose"}
+            <div className="flex items-center">
-          </Button>
+              <PlusIcon className="h-4 w-4" />
+              <span className="ml-2">Compose</span>
             </div>
+          ) : (
+            <PlusIcon className="h-4 w-4" />
+          )}
+        </Button>
 
         {/* Navigation */}
-        <nav className="flex-1 overflow-y-auto">
+        <nav className="flex-1 overflow-y-auto py-2">
-          <div className="space-y-1 px-2">
+          <ul className="space-y-0.5 px-2">
+            <li>
               <Button 
                 variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
-              className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
+                className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-              onClick={() => setCurrentView('inbox')}
+                onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
               >
-              <Inbox className="h-4 w-4" />
+                <Inbox className="h-4 w-4 mr-2" />
-              {sidebarOpen && "Inbox"}
+                {sidebarOpen && <span>Inbox</span>}
               </Button>
+            </li>
+            <li>
               <Button 
                 variant={currentView === 'starred' ? 'secondary' : 'ghost'}
-              className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
+                className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-              onClick={() => setCurrentView('starred')}
+                onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
               >
-              <Star className="h-4 w-4" />
+                <Star className="h-4 w-4 mr-2" />
-              {sidebarOpen && "Starred"}
+                {sidebarOpen && <span>Starred</span>}
               </Button>
+            </li>
+            <li>
               <Button 
                 variant={currentView === 'sent' ? 'secondary' : 'ghost'}
-              className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
+                className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-              onClick={() => setCurrentView('sent')}
+                onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
               >
-              <Send className="h-4 w-4" />
+                <Send className="h-4 w-4 mr-2" />
-              {sidebarOpen && "Sent"}
+                {sidebarOpen && <span>Sent</span>}
               </Button>
+            </li>
+            <li>
               <Button 
                 variant={currentView === 'trash' ? 'secondary' : 'ghost'}
-              className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
+                className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
-              onClick={() => setCurrentView('trash')}
+                onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
               >
-              <Trash className="h-4 w-4" />
+                <Trash className="h-4 w-4 mr-2" />
-              {sidebarOpen && "Trash"}
+                {sidebarOpen && <span>Trash</span>}
               </Button>
-          </div>
+            </li>
 
-          {/* Folders */}
+            {/* Folders Section */}
-          {folders.length > 0 && (
+            <li className="mt-4">
-            <div className="mt-6">
-              <div className="px-3 mb-2">
-                <h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  Folders
-                </h2>
-              </div>
-              <div className="space-y-1 px-2">
-                {folders.map((folder) => (
               <Button 
-                    key={folder.id}
+                variant="ghost"
-                    variant={currentView === folder.name.toLowerCase() ? 'secondary' : 'ghost'}
+                className="w-full justify-between py-2 text-gray-600 hover:text-gray-900"
-                    className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
+                onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
-                    onClick={() => setCurrentView(folder.name.toLowerCase())}
               >
-                    <Folder className="h-4 w-4" />
+                <div className="flex items-center">
-                    {sidebarOpen && folder.name}
+                  <Folder className="h-4 w-4 mr-2" />
+                  {sidebarOpen && <span>Folders</span>}
+                </div>
+                {sidebarOpen && (foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)}
               </Button>
-                ))}
-              </div>
-            </div>
-          )}
-        </nav>
 
-        {/* Account info */}
+              {/* Folders Dropdown */}
-        <div className="p-4 border-t border-gray-200">
+              {foldersDropdownOpen && sidebarOpen && (
-          <div className="flex items-center gap-3">
+                <ul className="mt-1 space-y-1">
-            <Avatar className="h-8 w-8">
+                  {folders.map(folder => (
-              <AvatarFallback className={accounts[0].color}>
+                    <li key={folder.id}>
-                {accounts[0].email.charAt(0).toUpperCase()}
+                      <Button
-              </AvatarFallback>
+                        variant="ghost"
-            </Avatar>
+                        className="w-full justify-start py-1.5 pl-8 text-sm text-gray-600 hover:text-gray-900"
-            {sidebarOpen && (
+                        onClick={() => {
-              <div className="flex-1 min-w-0">
+                          setCurrentView(folder.name.toLowerCase());
-                <p className="text-sm font-medium text-gray-900 truncate">
+                          setSelectedEmail(null);
-                  {accounts[0].name}
+                        }}
-                </p>
+                      >
-                <p className="text-xs text-gray-500 truncate">
+                        {folder.name}
-                  {accounts[0].email}
+                      </Button>
-                </p>
+                    </li>
-              </div>
+                  ))}
+                </ul>
               )}
-          </div>
+            </li>
-        </div>
+          </ul>
+        </nav>
       </div>
 
       {/* Main content */}
-      <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+      <div className="flex-1 flex overflow-hidden">
-        {/* Header */}
-        <header className="bg-white border-b border-gray-200 px-4 py-3">
-          <div className="flex items-center gap-4">
-            <Button
-              variant="ghost"
-              size="icon"
-              className="md:hidden"
-              onClick={() => setMobileSidebarOpen(true)}
-            >
-              <ChevronRight className="h-4 w-4" />
-            </Button>
-            <div className="flex-1 flex items-center gap-4">
-              <div className="relative flex-1 max-w-2xl">
-                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
-                <Input
-                  type="search"
-                  placeholder="Search emails..."
-                  className="pl-10 bg-gray-50 border-gray-200"
-                />
-              </div>
-              <Button
-                variant="ghost"
-                size="icon"
-                className="hidden md:flex"
-              >
-                <Settings className="h-4 w-4" />
-              </Button>
-            </div>
-          </div>
-        </header>
-
         {/* Email list */}
-        <div className="flex-1 overflow-y-auto bg-white">
+        <div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
+          <div className="p-4 border-b border-gray-100 flex justify-between items-center">
+            <div className="flex items-center gap-4">
+              {filteredEmails.length > 0 && (
+                <Checkbox
+                  checked={selectedEmails.length === filteredEmails.length}
+                  onCheckedChange={toggleSelectAll}
+                />
+              )}
+              <h2 className="text-lg font-semibold text-gray-800 capitalize">
+                {currentView === 'starred' ? 'Starred' : currentView}
+              </h2>
+            </div>
+            <div className="text-sm text-gray-500">
+              {filteredEmails.length} emails
+            </div>
+          </div>
+
+          {/* Bulk Actions Bar */}
+          {showBulkActions && selectedEmails.length > 0 && (
+            <div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
+              <span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
+              <div className="flex items-center gap-2">
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-gray-600 hover:text-gray-900"
+                  onClick={() => {
+                    // Handle move to folder
+                  }}
+                >
+                  <FolderOpen className="h-4 w-4 mr-2" />
+                  Move to
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="sm"
+                  className="text-red-600 hover:text-red-700"
+                  onClick={handleBulkDelete}
+                >
+                  <Trash2 className="h-4 w-4 mr-2" />
+                  Delete
+                </Button>
+              </div>
+            </div>
+          )}
+
+          {/* Email List */}
           {filteredEmails.length > 0 ? (
-            <div className="divide-y divide-gray-100">
+            <ul>
-              {filteredEmails.map((email) => (
+              {filteredEmails.map(email => (
-                <div
+                <li 
                   key={email.id}
-                  className={`group flex items-center gap-4 px-4 py-3 cursor-pointer hover:bg-gray-50
+                  className={`border-b border-gray-100 cursor-pointer ${email.read ? 'bg-white/95' : 'bg-blue-50/95'} hover:bg-gray-50/95`}
-                    ${email.read ? 'bg-white' : 'bg-gray-50'}`}
                   onClick={() => handleEmailClick(email.id)}
                 >
+                  <div className="p-4">
+                    <div className="flex justify-between items-start mb-1">
+                      <div className="flex items-center gap-3">
                         <Checkbox
                           checked={selectedEmails.includes(email.id)}
                           onClick={(e) => toggleEmailSelection(email.id, e)}
-                    className="h-4 w-4"
                         />
-                  <button
+                        <div className="flex items-center">
+                          <div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
+                          <span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
+                        </div>
+                      </div>
+                      <div className="text-xs text-gray-500">{formatDate(email.date)}</div>
+                    </div>
+                    <div className="flex justify-between items-center mb-1">
+                      <h3 className={`${!email.read ? 'font-semibold' : ''} text-gray-800`}>{email.subject}</h3>
+                      <Button 
+                        variant="ghost"
+                        size="sm"
+                        className="text-gray-400 hover:text-yellow-500"
                         onClick={(e) => toggleStarred(email.id, e)}
-                    className={`text-gray-400 hover:text-yellow-400
-                      ${email.starred ? 'text-yellow-400' : ''}`}
                       >
-                    <Star className="h-4 w-4" />
+                        <Star className="h-4 w-4" fill={email.starred ? 'currentColor' : 'none'} color={email.starred ? '#F59E0B' : 'currentColor'} />
-                  </button>
+                      </Button>
-                  <div className={`flex-1 min-w-0 ${!email.read ? 'font-medium' : ''}`}>
-                    <div className="flex items-center gap-2">
-                      <div className={`h-2 w-2 rounded-full ${getAccountColor(email.accountId)}`} />
-                      <span className="truncate">{email.fromName}</span>
-                    </div>
-                    <div className="flex items-center gap-2 text-sm text-gray-600">
-                      <span className="truncate">{email.subject}</span>
-                      <span className="whitespace-nowrap">{formatDate(email.date)}</span>
-                    </div>
                     </div>
+                    <p className="text-sm text-gray-600 truncate">
+                      {email.body}
+                    </p>
                   </div>
+                </li>
               ))}
-            </div>
+            </ul>
           ) : (
             <div className="flex flex-col items-center justify-center h-64 text-gray-500">
               <Mail className="h-12 w-12 mb-4 opacity-30" />
@@ -454,6 +517,104 @@ export default function MailPage() {
             </div>
           )}
         </div>
+
+        {/* Email detail view */}
+        <div className="flex-1 overflow-y-auto bg-white">
+          {selectedEmail ? (
+            <div className="h-full flex flex-col">
+              {/* Email actions header */}
+              <div className="p-4 border-b border-gray-100 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+                  >
+                    <Reply className="h-4 w-4 mr-2" />
+                    Reply
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+                  >
+                    <ReplyAll className="h-4 w-4 mr-2" />
+                    Reply all
+                  </Button>
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
+                  >
+                    <Forward className="h-4 w-4 mr-2" />
+                    Forward
+                  </Button>
+                </div>
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="ghost"
+                    size="icon"
+                    className="text-gray-500 hover:text-gray-700"
+                    onClick={() => setShowEmailActions(!showEmailActions)}
+                  >
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </div>
+              </div>
+
+              {/* Email content */}
+              <div className="flex-1 p-6">
+                <div className="max-w-3xl mx-auto">
+                  {getSelectedEmail() && (
+                    <>
+                      <div className="mb-6">
+                        <div className="flex justify-between items-center mb-4">
+                          <h1 className="text-xl font-bold">{getSelectedEmail()?.subject}</h1>
+                          <Button 
+                            variant="ghost"
+                            size="sm"
+                            className="text-gray-400 hover:text-yellow-400"
+                            onClick={(e) => getSelectedEmail() && toggleStarred(getSelectedEmail()!.id, e)}
+                          >
+                            <Star className="h-5 w-5" fill={getSelectedEmail()?.starred ? 'currentColor' : 'none'} />
+                          </Button>
+                        </div>
+                        
+                        <div className="flex items-center">
+                          <Avatar>
+                            <AvatarFallback className={`${getAccountColor(getSelectedEmail()!.accountId)}`}>
+                              {getSelectedEmail()?.fromName.charAt(0)}
+                            </AvatarFallback>
+                          </Avatar>
+                          <div className="ml-3">
+                            <div className="font-medium">{getSelectedEmail()?.fromName}</div>
+                            <div className="text-sm text-gray-500 flex items-center">
+                              <span>{getSelectedEmail()?.from}</span>
+                              <span className="mx-2">•</span>
+                              <span>{new Date(getSelectedEmail()!.date).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}</span>
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      
+                      <div className="border-t border-gray-200 pt-6 prose max-w-none">
+                        <p>{getSelectedEmail()?.body}</p>
+                      </div>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          ) : (
+            <div className="h-full flex items-center justify-center">
+              <div className="text-center">
+                <Mail className="h-16 w-16 mx-auto mb-4 text-gray-300" />
+                <p className="text-gray-500">No email selected</p>
+                <p className="text-sm text-gray-400">Choose an email from the list to read its contents</p>
+              </div>
+            </div>
+          )}
+        </div>
       </div>
 
       {/* Compose email modal */}