From 4c8dcbfd8d889a90e0a4723ad89975028f422430 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Tue, 15 Apr 2025 19:28:19 +0200
Subject: [PATCH] mail page custum 7

---
 app/mail/page.tsx | 280 ++++++++++++++++++++++++++--------------------
 1 file changed, 160 insertions(+), 120 deletions(-)

diff --git a/app/mail/page.tsx b/app/mail/page.tsx
index 0220fe5..b91fdb8 100644
--- a/app/mail/page.tsx
+++ b/app/mail/page.tsx
@@ -6,7 +6,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 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 } 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 } from 'lucide-react';
 
 interface Account {
   id: number;
@@ -89,6 +89,7 @@ export default function MailPage() {
   const [accountsDropdownOpen, setAccountsDropdownOpen] = useState(false);
   const [foldersDropdownOpen, setFoldersDropdownOpen] = useState(false);
   const [showAccountActions, setShowAccountActions] = useState<number | null>(null);
+  const [showEmailActions, setShowEmailActions] = useState(false);
 
   // Mock folders data
   const folders = [
@@ -380,136 +381,175 @@ export default function MailPage() {
       </div>
 
       {/* Main content */}
-      <div className="flex-1 flex flex-col overflow-hidden bg-gray-50">
-        {/* Header */}
-        <header className="bg-white/95 backdrop-blur-sm border-b border-gray-100 py-3 px-4">
-          <div className="flex items-center justify-between">
-            <div className="flex-1 max-w-xl">
-              <div className="relative">
-                <Input 
-                  type="text" 
-                  placeholder="Search emails..." 
-                  className="pl-9 bg-gray-50 border-0"
-                />
-                <Search className="absolute left-3 top-2.5 h-4 w-4 text-gray-400" />
-              </div>
+      <div className="flex-1 flex overflow-hidden">
+        {/* Email list */}
+        <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">
+            <h2 className="text-lg font-semibold text-gray-800 capitalize">
+              {currentView === 'starred' ? 'Starred' : currentView}
+            </h2>
+            <div className="text-sm text-gray-500">
+              {filteredEmails.length} emails
             </div>
           </div>
-        </header>
 
-        {/* Email list and detail view */}
-        <div className="flex-1 flex overflow-hidden">
-          {/* Email list */}
-          <div className={`${selectedEmail ? 'hidden md:block md:w-[380px]' : 'w-full'} 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">
-              <h2 className="text-lg font-semibold text-gray-800 capitalize">
-                {currentView === 'starred' ? 'Starred' : currentView}
-              </h2>
-              <div className="text-sm text-gray-500">
-                {filteredEmails.length} emails
-              </div>
-            </div>
-
-            {filteredEmails.length > 0 ? (
-              <ul>
-                {filteredEmails.map(email => (
-                  <li 
-                    key={email.id}
-                    className={`border-b border-gray-100 cursor-pointer ${email.read ? 'bg-white/95' : 'bg-blue-50/95'} hover:bg-gray-50/95`}
-                    onClick={() => handleEmailClick(email.id)}
-                  >
-                    <div className="p-4">
-                      <div className="flex justify-between items-start mb-1">
-                        <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 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)}
-                        >
-                          <Star className="h-4 w-4" fill={email.starred ? 'currentColor' : 'none'} color={email.starred ? '#F59E0B' : 'currentColor'} />
-                        </Button>
-                      </div>
-                      <p className="text-sm text-gray-600 truncate">
-                        {email.body}
-                      </p>
-                    </div>
-                  </li>
-                ))}
-              </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" />
-                <p>No emails in this folder</p>
-              </div>
-            )}
-          </div>
-
-          {/* Email detail view */}
-          {selectedEmail ? (
-            <div className="flex-1 overflow-y-auto bg-white 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>
-                      
+          {filteredEmails.length > 0 ? (
+            <ul>
+              {filteredEmails.map(email => (
+                <li 
+                  key={email.id}
+                  className={`border-b border-gray-100 cursor-pointer ${email.read ? 'bg-white/95' : 'bg-blue-50/95'} hover:bg-gray-50/95`}
+                  onClick={() => handleEmailClick(email.id)}
+                >
+                  <div className="p-4">
+                    <div className="flex justify-between items-start mb-1">
                       <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 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 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)}
+                      >
+                        <Star className="h-4 w-4" fill={email.starred ? 'currentColor' : 'none'} color={email.starred ? '#F59E0B' : 'currentColor'} />
+                      </Button>
+                    </div>
+                    <p className="text-sm text-gray-600 truncate">
+                      {email.body}
+                    </p>
+                  </div>
+                </li>
+              ))}
+            </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" />
+              <p>No emails in this folder</p>
+            </div>
+          )}
+        </div>
+
+        {/* Email detail view - Always visible */}
+        <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="outline"
+                    size="sm"
+                    className="text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700"
+                  >
+                    <Reply className="h-4 w-4 mr-2" />
+                    Reply
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700"
+                  >
+                    <ReplyAll className="h-4 w-4 mr-2" />
+                    Reply all
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="text-blue-600 border-blue-200 hover:bg-blue-50 hover:text-blue-700"
+                  >
+                    <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>
+                  {showEmailActions && (
+                    <div className="absolute right-4 mt-32 w-48 bg-white border border-gray-100 shadow-lg rounded-lg z-50">
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
+                        onClick={() => {
+                          // Handle move to folder
+                          setShowEmailActions(false);
+                        }}
+                      >
+                        <FolderOpen className="h-4 w-4 mr-2" />
+                        Move to folder
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
+                        onClick={() => {
+                          // Handle delete email
+                          setShowEmailActions(false);
+                        }}
+                      >
+                        <Trash2 className="h-4 w-4 mr-2" />
+                        Delete
+                      </Button>
+                    </div>
+                  )}
+                </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>
-                    
-                    <div className="border-t border-gray-200 pt-6 prose max-w-none">
-                      <p>{getSelectedEmail()?.body}</p>
-                    </div>
-                    
-                    <div className="mt-8 pt-6 border-t border-gray-200">
-                      <div className="flex space-x-4">
-                        <Button variant="outline" className="flex items-center gap-2">
-                          <Send className="h-4 w-4" />
-                          Reply
-                        </Button>
-                        <Button variant="outline" className="flex items-center gap-2">
-                          <Send className="h-4 w-4" />
-                          Forward
-                        </Button>
+                      
+                      <div className="border-t border-gray-200 pt-6 prose max-w-none">
+                        <p>{getSelectedEmail()?.body}</p>
                       </div>
-                    </div>
-                  </>
-                )}
+                    </>
+                  )}
+                </div>
               </div>
             </div>
           ) : (
-            <div className="hidden md:flex flex-1 items-center justify-center bg-gray-50">
+            <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>