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

courrier redis login

Browse Source
This commit is contained in:
alma 2025-04-27 14:05:14 +02:00
parent 42746fe4f9
commit 0455ff7f7d
2 changed files with 79 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
app/courrier/page.tsx
View File

@ -107,6 +107,7 @@ export default function CourrierPage() {
const [unreadCount, setUnreadCount] = useState(0);
const [loading, setLoading] = useState(false);
const [prefetchStarted, setPrefetchStarted] = useState(false);
const [showFolders, setShowFolders] = useState(true);
// Mock accounts for the sidebar
const [accounts, setAccounts] = useState<Account[]>([
@ -347,16 +348,27 @@ export default function CourrierPage() {
<Button
variant="ghost"
className="w-full justify-between px-2 py-1.5 text-sm group"
onClick={() => setSelectedAccount(account)}
onClick={() => {
if (account.id !== 0) {
// Only toggle folders for non-All accounts
setShowFolders(!showFolders);
}
setSelectedAccount(account);
}}
>
<div className="flex items-center gap-2">
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
<span className="font-medium text-gray-700">{account.name}</span>
</div>
{account.id !== 0 && (
showFolders ?
<ChevronDown className="h-3.5 w-3.5 text-gray-500" /> :
<ChevronRight className="h-3.5 w-3.5 text-gray-500" />
)}
</Button>
{/* Show folders for email accounts (not for "All" account) without the "Folders" header */}
{account.id !== 0 && (
{account.id !== 0 && showFolders && (
<div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200">
{account.folders && account.folders.length > 0 ? (
account.folders.map((folder) => (

97
components/email/EmailSidebar.tsx
View File

@ -1,9 +1,10 @@
'use client';
import React from 'react';
import React, { useState } from 'react';
import {
Inbox, Send, Trash, Archive, Star,
File, RefreshCw, Plus, MailOpen, Settings
File, RefreshCw, Plus, MailOpen, Settings,
ChevronDown, ChevronRight, Mail
} from 'lucide-react';
import { Button } from '@/components/ui/button';
import { cn } from '@/lib/utils';
@ -27,6 +28,8 @@ export default function EmailSidebar({
onCompose,
isLoading
}: EmailSidebarProps) {
const [showFolders, setShowFolders] = useState(true);
// Get the appropriate icon for a folder
const getFolderIcon = (folder: string) => {
const folderLower = folder.toLowerCase();
@ -80,33 +83,35 @@ export default function EmailSidebar({
{/* Folder navigation */}
<ScrollArea className="flex-1">
<div className="p-2 space-y-1">
{visibleStandardFolders.map((folder) => (
<Button
key={folder}
variant={currentFolder === folder ? "secondary" : "ghost"}
className={`w-full justify-start ${
currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
}`}
onClick={() => onFolderChange(folder)}
>
<div className="flex items-center w-full">
<span className="flex items-center">
{getFolderIcon(folder)}
<span className="ml-2 capitalize">{folder.toLowerCase()}</span>
</span>
{folder === 'INBOX' && (
<span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
{/* Unread count would go here */}
</span>
)}
</div>
</Button>
))}
{/* Accounts header with toggle */}
<div className="flex items-center justify-between px-2 py-2 text-sm font-medium text-gray-600">
<span>Accounts</span>
{isLoading && <RefreshCw className="h-3 w-3 animate-spin text-gray-400" />}
</div>
{/* Custom folders section */}
{customFolders.length > 0 && (
<>
{customFolders.map(folder => (
{/* Mail account with toggle arrow */}
<div className="px-2">
<Button
variant="ghost"
className="w-full justify-between p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100"
onClick={() => setShowFolders(!showFolders)}
>
<div className="flex items-center">
<Mail className="h-4 w-4 mr-2" />
<span>Mail</span>
</div>
{showFolders ? (
<ChevronDown className="h-4 w-4" />
) : (
<ChevronRight className="h-4 w-4" />
)}
</Button>
</div>
{/* Folders list - shown only when showFolders is true */}
{showFolders && (
<div className="pl-6 space-y-1">
{visibleStandardFolders.map((folder) => (
<Button
key={folder}
variant={currentFolder === folder ? "secondary" : "ghost"}
@ -115,13 +120,41 @@ export default function EmailSidebar({
}`}
onClick={() => onFolderChange(folder)}
>
<div className="flex items-center">
{getFolderIcon(folder)}
<span className="ml-2 truncate">{folder}</span>
<div className="flex items-center w-full">
<span className="flex items-center">
{getFolderIcon(folder)}
<span className="ml-2 capitalize">{folder.toLowerCase()}</span>
</span>
{folder === 'INBOX' && (
<span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
{/* Unread count would go here */}
</span>
)}
</div>
</Button>
))}
</>
{/* Custom folders section */}
{customFolders.length > 0 && (
<>
{customFolders.map(folder => (
<Button
key={folder}
variant={currentFolder === folder ? "secondary" : "ghost"}
className={`w-full justify-start ${
currentFolder === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
}`}
onClick={() => onFolderChange(folder)}
>
<div className="flex items-center">
{getFolderIcon(folder)}
<span className="ml-2 truncate">{folder}</span>
</div>
</Button>
))}
</>
)}
</div>
)}
</div>
</ScrollArea>