feat(mail): resizable columns, account in folder tree, mail settings in CRM settings
- Add ResizablePanel component (components/ui/ResizablePanel.tsx) with
drag-to-resize via mouse events, no external dependencies
- Replace fixed-width columns in Mail.tsx with ResizablePanel for all
three panes (folder tree, mail list, mail detail)
- Remove account-select toolbar item from Mail.tsx; account selection
is now integrated into the folder tree
- Restructure MailFolderTree to show mail accounts as top-level nodes
with folders nested underneath, built from flat list via parent_id
- Add expand/collapse chevrons for accounts and folders with children
- Load folders for ALL accounts (not just selected one) so multi-account
tree works
- Derive selectedAccountId from selected folder instead of separate
account selector
- Add Mail tab to CRM Settings page (Settings.tsx) with 📧 icon
- Add /settings/mail route pointing to MailSettingsPage
- Update settings link in mail toolbar to point to /settings/mail
- Update no-accounts empty state link to /settings/mail
This commit is contained in:
Agent Zero
@@ -1,22 +1,79 @@
|
||||
/**
|
||||
* Mail folder tree sidebar component.
|
||||
* Shows hierarchical folder list with unread badges.
|
||||
* Shows accounts as top-level nodes with their folders nested underneath.
|
||||
* Folders come as a flat list with parent_id and are built into a tree.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import clsx from 'clsx';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import type { MailFolder } from '@/api/mail';
|
||||
import type { MailAccount, MailFolder } from '@/api/mail';
|
||||
import { Badge } from '@/components/ui/Badge';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
|
||||
export interface MailFolderTreeProps {
|
||||
accounts: MailAccount[];
|
||||
folders: MailFolder[];
|
||||
selectedFolderId: string | null;
|
||||
onSelect: (folderId: string) => void;
|
||||
loading: boolean;
|
||||
}
|
||||
|
||||
/**
|
||||
* Build a hierarchical tree from a flat folder list for a given account.
|
||||
*/
|
||||
function buildFolderTree(folders: MailFolder[], accountId: string): MailFolder[] {
|
||||
const accountFolders = folders.filter((f) => f.account_id === accountId);
|
||||
const byId = new Map<string, MailFolder & { children: MailFolder[] }>();
|
||||
|
||||
for (const f of accountFolders) {
|
||||
byId.set(f.id, { ...f, children: [] });
|
||||
}
|
||||
|
||||
const roots: MailFolder[] = [];
|
||||
|
||||
for (const f of accountFolders) {
|
||||
const node = byId.get(f.id)!;
|
||||
if (f.parent_id && byId.has(f.parent_id)) {
|
||||
byId.get(f.parent_id)!.children.push(node);
|
||||
} else {
|
||||
roots.push(node);
|
||||
}
|
||||
}
|
||||
|
||||
return roots;
|
||||
}
|
||||
|
||||
function ChevronIcon({ expanded }: { expanded: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
className={clsx('w-3 h-3 transition-transform flex-shrink-0', expanded ? 'rotate-90' : '')}
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function FolderIcon() {
|
||||
return (
|
||||
<svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function MailIcon() {
|
||||
return (
|
||||
<svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7-7 7 7M5 19h10a2 2 0 002-2V8l-5-5H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function FolderNode({
|
||||
folder,
|
||||
selectedFolderId,
|
||||
@@ -28,36 +85,51 @@ function FolderNode({
|
||||
onSelect: (folderId: string) => void;
|
||||
depth: number;
|
||||
}) {
|
||||
const { t } = useTranslation();
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
const isSelected = folder.id === selectedFolderId;
|
||||
const hasChildren = folder.children && folder.children.length > 0;
|
||||
|
||||
return (
|
||||
<div role="treeitem" aria-selected={isSelected} aria-label={folder.name}>
|
||||
<button
|
||||
onClick={() => onSelect(folder.id)}
|
||||
className={clsx(
|
||||
'w-full flex items-center gap-2 px-2 py-1.5 rounded-md text-sm min-h-touch',
|
||||
'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
||||
isSelected
|
||||
? 'bg-primary-50 text-primary-700 font-medium'
|
||||
: 'hover:bg-secondary-50 text-secondary-700',
|
||||
<div className="flex items-center" style={{ paddingLeft: `${depth * 12}px` }}>
|
||||
{hasChildren ? (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setExpanded(!expanded);
|
||||
}}
|
||||
className="flex-shrink-0 p-0.5 hover:bg-secondary-100 rounded"
|
||||
aria-label={expanded ? 'Collapse' : 'Expand'}
|
||||
data-testid={`folder-chevron-${folder.id}`}
|
||||
>
|
||||
<ChevronIcon expanded={expanded} />
|
||||
</button>
|
||||
) : (
|
||||
<span className="w-4 flex-shrink-0" />
|
||||
)}
|
||||
data-testid={`folder-${folder.id}`}
|
||||
>
|
||||
<svg className="w-4 h-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z" />
|
||||
</svg>
|
||||
<span className="flex-1 truncate text-left">{folder.name}</span>
|
||||
{folder.unread_count > 0 && (
|
||||
<Badge variant="primary" className="text-xs">{folder.unread_count}</Badge>
|
||||
)}
|
||||
{folder.total_count > 0 && folder.unread_count === 0 && (
|
||||
<span className="text-xs text-secondary-400">{folder.total_count}</span>
|
||||
)}
|
||||
</button>
|
||||
{hasChildren && (
|
||||
<div className="ml-4" role="group">
|
||||
<button
|
||||
onClick={() => onSelect(folder.id)}
|
||||
className={clsx(
|
||||
'flex-1 flex items-center gap-2 px-2 py-1.5 rounded-md text-sm min-h-touch',
|
||||
'motion-safe:transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500',
|
||||
isSelected
|
||||
? 'bg-primary-50 text-primary-700 font-medium'
|
||||
: 'hover:bg-secondary-50 text-secondary-700',
|
||||
)}
|
||||
data-testid={`folder-${folder.id}`}
|
||||
>
|
||||
<FolderIcon />
|
||||
<span className="flex-1 truncate text-left">{folder.name}</span>
|
||||
{folder.unread_count > 0 && (
|
||||
<Badge variant="primary" className="text-xs">{folder.unread_count}</Badge>
|
||||
)}
|
||||
{folder.total_count > 0 && folder.unread_count === 0 && (
|
||||
<span className="text-xs text-secondary-400">{folder.total_count}</span>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
{hasChildren && expanded && (
|
||||
<div role="group">
|
||||
{folder.children!.map((child) => (
|
||||
<FolderNode
|
||||
key={child.id}
|
||||
@@ -73,7 +145,52 @@ function FolderNode({
|
||||
);
|
||||
}
|
||||
|
||||
export function MailFolderTree({ folders, selectedFolderId, onSelect, loading }: MailFolderTreeProps) {
|
||||
function AccountNode({
|
||||
account,
|
||||
folders,
|
||||
selectedFolderId,
|
||||
onSelect,
|
||||
}: {
|
||||
account: MailAccount;
|
||||
folders: MailFolder[];
|
||||
selectedFolderId: string | null;
|
||||
onSelect: (folderId: string) => void;
|
||||
}) {
|
||||
const [expanded, setExpanded] = useState(true);
|
||||
const accountFolders = useMemo(
|
||||
() => buildFolderTree(folders, account.id),
|
||||
[folders, account.id],
|
||||
);
|
||||
|
||||
return (
|
||||
<div role="treeitem" aria-label={account.email}>
|
||||
<button
|
||||
onClick={() => setExpanded(!expanded)}
|
||||
className="w-full flex items-center gap-1 px-1 py-1.5 rounded-md text-sm font-semibold text-secondary-900 hover:bg-secondary-50"
|
||||
data-testid={`account-${account.id}`}
|
||||
>
|
||||
<ChevronIcon expanded={expanded} />
|
||||
<MailIcon />
|
||||
<span className="flex-1 truncate text-left">{account.email}</span>
|
||||
</button>
|
||||
{expanded && (
|
||||
<div role="group" className="ml-2">
|
||||
{accountFolders.map((folder) => (
|
||||
<FolderNode
|
||||
key={folder.id}
|
||||
folder={folder}
|
||||
selectedFolderId={selectedFolderId}
|
||||
onSelect={onSelect}
|
||||
depth={0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function MailFolderTree({ accounts, folders, selectedFolderId, onSelect, loading }: MailFolderTreeProps) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
if (loading) {
|
||||
@@ -88,7 +205,7 @@ export function MailFolderTree({ folders, selectedFolderId, onSelect, loading }:
|
||||
);
|
||||
}
|
||||
|
||||
if (folders.length === 0) {
|
||||
if (accounts.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
title={t('mail.noFolders')}
|
||||
@@ -100,13 +217,13 @@ export function MailFolderTree({ folders, selectedFolderId, onSelect, loading }:
|
||||
|
||||
return (
|
||||
<div className="space-y-1" role="tree" data-testid="folder-tree-list">
|
||||
{folders.map((folder) => (
|
||||
<FolderNode
|
||||
key={folder.id}
|
||||
folder={folder}
|
||||
{accounts.map((account) => (
|
||||
<AccountNode
|
||||
key={account.id}
|
||||
account={account}
|
||||
folders={folders}
|
||||
selectedFolderId={selectedFolderId}
|
||||
onSelect={onSelect}
|
||||
depth={0}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* ResizablePanel — a flex panel with drag-to-resize handle.
|
||||
* No external dependencies; uses React + mouse events only.
|
||||
*/
|
||||
|
||||
import React, { useState, useRef, useCallback, useEffect } from 'react';
|
||||
import clsx from 'clsx';
|
||||
|
||||
export interface ResizablePanelProps {
|
||||
/** Initial width in pixels (only used when resizable=true) */
|
||||
initialWidth?: number;
|
||||
/** Minimum width in pixels */
|
||||
minWidth?: number;
|
||||
/** Maximum width in pixels */
|
||||
maxWidth?: number;
|
||||
/** Panel content */
|
||||
children: React.ReactNode;
|
||||
/** Extra className for the panel container */
|
||||
className?: string;
|
||||
/** When false, panel becomes flex-1 with no drag handle */
|
||||
resizable?: boolean;
|
||||
/** testid forwarded to the container div */
|
||||
'data-testid'?: string;
|
||||
}
|
||||
|
||||
export function ResizablePanel({
|
||||
initialWidth = 224,
|
||||
minWidth = 150,
|
||||
maxWidth = 600,
|
||||
children,
|
||||
className,
|
||||
resizable = true,
|
||||
...rest
|
||||
}: ResizablePanelProps) {
|
||||
const [width, setWidth] = useState(initialWidth);
|
||||
const isResizing = useRef(false);
|
||||
const startX = useRef(0);
|
||||
const startWidth = useRef(0);
|
||||
|
||||
const handleMouseDown = useCallback(
|
||||
(e: React.MouseEvent) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
isResizing.current = true;
|
||||
startX.current = e.clientX;
|
||||
startWidth.current = width;
|
||||
document.body.style.cursor = 'col-resize';
|
||||
document.body.style.userSelect = 'none';
|
||||
},
|
||||
[width],
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMouseMove = (e: MouseEvent) => {
|
||||
if (!isResizing.current) return;
|
||||
const delta = e.clientX - startX.current;
|
||||
const newWidth = Math.max(minWidth, Math.min(maxWidth, startWidth.current + delta));
|
||||
setWidth(newWidth);
|
||||
};
|
||||
|
||||
const handleMouseUp = () => {
|
||||
if (isResizing.current) {
|
||||
isResizing.current = false;
|
||||
document.body.style.cursor = '';
|
||||
document.body.style.userSelect = '';
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('mousemove', handleMouseMove);
|
||||
document.addEventListener('mouseup', handleMouseUp);
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('mousemove', handleMouseMove);
|
||||
document.removeEventListener('mouseup', handleMouseUp);
|
||||
};
|
||||
}, [minWidth, maxWidth]);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={clsx(resizable ? 'relative flex-shrink-0' : 'relative flex-1', className)}
|
||||
style={resizable ? { width: `${width}px` } : undefined}
|
||||
data-testid={rest['data-testid']}
|
||||
>
|
||||
{children}
|
||||
{resizable && (
|
||||
<div
|
||||
className="absolute top-0 right-0 h-full w-1 cursor-col-resize bg-transparent hover:bg-primary-300 active:bg-primary-400 transition-colors z-10"
|
||||
onMouseDown={handleMouseDown}
|
||||
data-testid="resize-handle"
|
||||
role="separator"
|
||||
aria-orientation="vertical"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+197
-135
@@ -1,5 +1,7 @@
|
||||
/**
|
||||
* Mail page — folder tree + mail list + reading pane + compose.
|
||||
* Uses ResizablePanel for drag-to-resize columns.
|
||||
* Account selection is integrated into the folder tree (left pane).
|
||||
*/
|
||||
|
||||
import React, { useState, useEffect, useCallback } from 'react';
|
||||
@@ -9,6 +11,7 @@ import { Card } from '@/components/ui/Card';
|
||||
import { Button } from '@/components/ui/Button';
|
||||
import { useToast } from '@/components/ui/Toast';
|
||||
import { EmptyState } from '@/components/ui/EmptyState';
|
||||
import { ResizablePanel } from '@/components/ui/ResizablePanel';
|
||||
import { MailFolderTree } from '@/components/mail/MailFolderTree';
|
||||
import { MailList } from '@/components/mail/MailList';
|
||||
import { MailDetail } from '@/components/mail/MailDetail';
|
||||
@@ -89,7 +92,7 @@ export function MailPage() {
|
||||
const sigs = await fetchSignatures();
|
||||
setSignatures(sigs);
|
||||
} catch {
|
||||
// non-critical
|
||||
// non-critical
|
||||
}
|
||||
}, []);
|
||||
|
||||
@@ -98,27 +101,35 @@ export function MailPage() {
|
||||
loadSignatures();
|
||||
}, [loadAccounts, loadSignatures]);
|
||||
|
||||
// Load folders when account changes
|
||||
const loadFolders = useCallback(async () => {
|
||||
if (!selectedAccountId) return;
|
||||
// Load folders for ALL accounts
|
||||
const loadAllFolders = useCallback(async () => {
|
||||
if (accounts.length === 0) return;
|
||||
setLoadingFolders(true);
|
||||
try {
|
||||
const folderList = await fetchFolders(selectedAccountId);
|
||||
setFolders(folderList);
|
||||
// Auto-select first folder
|
||||
if (folderList.length > 0 && !selectedFolderId) {
|
||||
setSelectedFolderId(folderList[0].id);
|
||||
const allFolders: MailFolder[] = [];
|
||||
for (const acc of accounts) {
|
||||
const folderList = await fetchFolders(acc.id);
|
||||
allFolders.push(...folderList);
|
||||
}
|
||||
setFolders(allFolders);
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
setError(msg);
|
||||
}
|
||||
setLoadingFolders(false);
|
||||
}, [selectedAccountId, selectedFolderId]);
|
||||
}, [accounts]);
|
||||
|
||||
useEffect(() => {
|
||||
loadFolders();
|
||||
}, [loadFolders]);
|
||||
loadAllFolders();
|
||||
}, [loadAllFolders]);
|
||||
|
||||
// Auto-select first folder when folders are loaded
|
||||
useEffect(() => {
|
||||
if (folders.length > 0 && !selectedFolderId) {
|
||||
setSelectedFolderId(folders[0].id);
|
||||
setSelectedAccountId(folders[0].account_id);
|
||||
}
|
||||
}, [folders, selectedFolderId]);
|
||||
|
||||
// Load mails when folder or page changes
|
||||
const loadMails = useCallback(async () => {
|
||||
@@ -146,32 +157,42 @@ export function MailPage() {
|
||||
loadMails();
|
||||
}, [loadMails]);
|
||||
|
||||
// Handle folder selection
|
||||
const handleSelectFolder = useCallback((folderId: string) => {
|
||||
setSelectedFolderId(folderId);
|
||||
setMailsPage(1);
|
||||
setSearchQuery('');
|
||||
setSelectedMail(null);
|
||||
}, []);
|
||||
// Handle folder selection — derive account from folder
|
||||
const handleSelectFolder = useCallback(
|
||||
(folderId: string) => {
|
||||
setSelectedFolderId(folderId);
|
||||
const folder = folders.find((f) => f.id === folderId);
|
||||
if (folder) {
|
||||
setSelectedAccountId(folder.account_id);
|
||||
}
|
||||
setMailsPage(1);
|
||||
setSearchQuery('');
|
||||
setSelectedMail(null);
|
||||
},
|
||||
[folders],
|
||||
);
|
||||
|
||||
// Handle mail selection
|
||||
const handleSelectMail = useCallback(async (mail: Mail) => {
|
||||
setLoadingMail(true);
|
||||
try {
|
||||
const detail = await getMail(mail.id);
|
||||
setSelectedMail(detail);
|
||||
// Mark as seen if not seen
|
||||
if (!detail.is_seen) {
|
||||
await updateFlags(mail.id, { seen: true });
|
||||
setMails((prev) => prev.map((m) => (m.id === mail.id ? { ...m, is_seen: true } : m)));
|
||||
const handleSelectMail = useCallback(
|
||||
async (mail: Mail) => {
|
||||
setLoadingMail(true);
|
||||
try {
|
||||
const detail = await getMail(mail.id);
|
||||
setSelectedMail(detail);
|
||||
// Mark as seen if not seen
|
||||
if (!detail.is_seen) {
|
||||
await updateFlags(mail.id, { seen: true });
|
||||
setMails((prev) => prev.map((m) => (m.id === mail.id ? { ...m, is_seen: true } : m)));
|
||||
}
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast.error(msg);
|
||||
setSelectedMail(mail);
|
||||
}
|
||||
} catch (err) {
|
||||
const msg = err instanceof Error ? err.message : String(err);
|
||||
toast.error(msg);
|
||||
setSelectedMail(mail);
|
||||
}
|
||||
setLoadingMail(false);
|
||||
}, [toast]);
|
||||
setLoadingMail(false);
|
||||
},
|
||||
[toast],
|
||||
);
|
||||
|
||||
// Handle compose
|
||||
const handleCompose = useCallback(() => {
|
||||
@@ -198,72 +219,84 @@ export function MailPage() {
|
||||
}, []);
|
||||
|
||||
// Handle toggle flag
|
||||
const handleToggleFlag = useCallback(async (mail: Mail) => {
|
||||
try {
|
||||
await updateFlags(mail.id, { flagged: !mail.is_flagged });
|
||||
setSelectedMail((prev) => prev ? { ...prev, is_flagged: !mail.is_flagged } : prev);
|
||||
setMails((prev) => prev.map((m) => (m.id === mail.id ? { ...m, is_flagged: !mail.is_flagged } : m)));
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
}
|
||||
}, [toast]);
|
||||
const handleToggleFlag = useCallback(
|
||||
async (mail: Mail) => {
|
||||
try {
|
||||
await updateFlags(mail.id, { flagged: !mail.is_flagged });
|
||||
setSelectedMail((prev) => (prev ? { ...prev, is_flagged: !mail.is_flagged } : prev));
|
||||
setMails((prev) => prev.map((m) => (m.id === mail.id ? { ...m, is_flagged: !mail.is_flagged } : m)));
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
}
|
||||
},
|
||||
[toast],
|
||||
);
|
||||
|
||||
// Handle create event from mail
|
||||
const handleCreateEvent = useCallback(async (mail: Mail) => {
|
||||
const title = mail.subject || t('mail.noSubject');
|
||||
const now = new Date();
|
||||
const start = now.toISOString();
|
||||
const end = new Date(now.getTime() + 60 * 60 * 1000).toISOString();
|
||||
const payload: CreateEventFromMailPayload = {
|
||||
title,
|
||||
start,
|
||||
end,
|
||||
description: mail.body_text.slice(0, 500),
|
||||
};
|
||||
try {
|
||||
await createEventFromMail(mail.id, payload);
|
||||
toast.success(t('mail.eventCreated'));
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
}
|
||||
}, [toast, t]);
|
||||
const handleCreateEvent = useCallback(
|
||||
async (mail: Mail) => {
|
||||
const title = mail.subject || t('mail.noSubject');
|
||||
const now = new Date();
|
||||
const start = now.toISOString();
|
||||
const end = new Date(now.getTime() + 60 * 60 * 1000).toISOString();
|
||||
const payload: CreateEventFromMailPayload = {
|
||||
title,
|
||||
start,
|
||||
end,
|
||||
description: mail.body_text.slice(0, 500),
|
||||
};
|
||||
try {
|
||||
await createEventFromMail(mail.id, payload);
|
||||
toast.success(t('mail.eventCreated'));
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
}
|
||||
},
|
||||
[toast, t],
|
||||
);
|
||||
|
||||
// Handle attachment download
|
||||
const handleDownloadAttachment = useCallback(async (mailId: string, attachment: MailAttachment) => {
|
||||
setDownloadingAttachmentId(attachment.id);
|
||||
try {
|
||||
const blob = await downloadAttachment(mailId, attachment.id);
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = window.document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = attachment.filename;
|
||||
window.document.body.appendChild(a);
|
||||
a.click();
|
||||
window.document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setDownloadingAttachmentId(null);
|
||||
}
|
||||
}, [toast]);
|
||||
const handleDownloadAttachment = useCallback(
|
||||
async (mailId: string, attachment: MailAttachment) => {
|
||||
setDownloadingAttachmentId(attachment.id);
|
||||
try {
|
||||
const blob = await downloadAttachment(mailId, attachment.id);
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const a = window.document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = attachment.filename;
|
||||
window.document.body.appendChild(a);
|
||||
a.click();
|
||||
window.document.body.removeChild(a);
|
||||
window.URL.revokeObjectURL(url);
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
} finally {
|
||||
setDownloadingAttachmentId(null);
|
||||
}
|
||||
},
|
||||
[toast],
|
||||
);
|
||||
|
||||
// Handle send (compose)
|
||||
const handleSend = useCallback(async (payload: SendMailPayload | ReplyPayload | ForwardPayload, mode: ComposeMode) => {
|
||||
try {
|
||||
if (mode === 'reply' && replyToMail) {
|
||||
await replyMail(replyToMail.id, payload as ReplyPayload);
|
||||
} else if (mode === 'forward' && forwardMailState) {
|
||||
await forwardMail(forwardMailState.id, payload as ForwardPayload);
|
||||
} else {
|
||||
await sendMail(payload as SendMailPayload);
|
||||
const handleSend = useCallback(
|
||||
async (payload: SendMailPayload | ReplyPayload | ForwardPayload, mode: ComposeMode) => {
|
||||
try {
|
||||
if (mode === 'reply' && replyToMail) {
|
||||
await replyMail(replyToMail.id, payload as ReplyPayload);
|
||||
} else if (mode === 'forward' && forwardMailState) {
|
||||
await forwardMail(forwardMailState.id, payload as ForwardPayload);
|
||||
} else {
|
||||
await sendMail(payload as SendMailPayload);
|
||||
}
|
||||
toast.success(t('mail.sent'));
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
throw err;
|
||||
}
|
||||
toast.success(t('mail.sent'));
|
||||
} catch (err) {
|
||||
toast.error(err instanceof Error ? err.message : String(err));
|
||||
throw err;
|
||||
}
|
||||
}, [replyToMail, forwardMailState, toast, t]);
|
||||
},
|
||||
[replyToMail, forwardMailState, toast, t],
|
||||
);
|
||||
|
||||
// Handle search
|
||||
const handleSearch = useCallback((query: string) => {
|
||||
@@ -271,17 +304,7 @@ export function MailPage() {
|
||||
setMailsPage(1);
|
||||
}, []);
|
||||
|
||||
// Handle account switch
|
||||
const handleAccountSwitch = useCallback((accountId: string) => {
|
||||
setSelectedAccountId(accountId);
|
||||
setSelectedFolderId(null);
|
||||
setSelectedMail(null);
|
||||
setMails([]);
|
||||
setMailsPage(1);
|
||||
setSearchQuery('');
|
||||
}, []);
|
||||
|
||||
// Register toolbar items
|
||||
// Register toolbar items (account-select removed — account is now in folder tree)
|
||||
const registerItems = usePluginToolbarStore((s) => s.registerItems);
|
||||
const unregisterPlugin = usePluginToolbarStore((s) => s.unregisterPlugin);
|
||||
const selectedMailId = selectedMail?.id;
|
||||
@@ -289,16 +312,6 @@ export function MailPage() {
|
||||
useEffect(() => {
|
||||
const hasMail = !!selectedMailId;
|
||||
registerItems('mail', [
|
||||
{
|
||||
id: 'account-select',
|
||||
plugin: 'mail',
|
||||
label: 'Account',
|
||||
type: 'select',
|
||||
group: 'account',
|
||||
selectValue: selectedAccountId,
|
||||
selectOptions: accounts.map((a) => ({ value: a.id, label: a.email })),
|
||||
onSelect: handleAccountSwitch,
|
||||
},
|
||||
{
|
||||
id: 'search',
|
||||
plugin: 'mail',
|
||||
@@ -307,13 +320,18 @@ export function MailPage() {
|
||||
group: 'search',
|
||||
searchPlaceholder: 'E-Mails durchsuchen...',
|
||||
onSearch: handleSearch,
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
id: 'compose',
|
||||
plugin: 'mail',
|
||||
label: 'Verfassen',
|
||||
group: 'compose',
|
||||
icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>,
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||||
</svg>
|
||||
),
|
||||
onClick: handleCompose,
|
||||
},
|
||||
{
|
||||
@@ -322,7 +340,11 @@ export function MailPage() {
|
||||
label: 'Antworten',
|
||||
group: 'mail-actions',
|
||||
disabled: !hasMail,
|
||||
icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" /></svg>,
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
|
||||
</svg>
|
||||
),
|
||||
onClick: () => selectedMail && handleReply(selectedMail),
|
||||
},
|
||||
{
|
||||
@@ -331,7 +353,11 @@ export function MailPage() {
|
||||
label: 'Weiterleiten',
|
||||
group: 'mail-actions',
|
||||
disabled: !hasMail,
|
||||
icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 10H11a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6" /></svg>,
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 10H11a8 8 0 00-8 8v2m18-10l-6 6m6-6l-6-6" />
|
||||
</svg>
|
||||
),
|
||||
onClick: () => selectedMail && handleForward(selectedMail),
|
||||
},
|
||||
{
|
||||
@@ -341,7 +367,11 @@ export function MailPage() {
|
||||
group: 'mail-actions',
|
||||
disabled: !hasMail,
|
||||
active: selectedMailFlagged,
|
||||
icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" /></svg>,
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
|
||||
</svg>
|
||||
),
|
||||
onClick: () => selectedMail && handleToggleFlag(selectedMail),
|
||||
},
|
||||
{
|
||||
@@ -350,7 +380,11 @@ export function MailPage() {
|
||||
label: 'Termin',
|
||||
group: 'mail-actions',
|
||||
disabled: !hasMail,
|
||||
icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" /></svg>,
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||||
</svg>
|
||||
),
|
||||
onClick: () => selectedMail && handleCreateEvent(selectedMail),
|
||||
},
|
||||
{
|
||||
@@ -358,7 +392,11 @@ export function MailPage() {
|
||||
plugin: 'mail',
|
||||
label: 'Sync',
|
||||
group: 'tools',
|
||||
icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" /></svg>,
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
|
||||
</svg>
|
||||
),
|
||||
onClick: () => { /* sync trigger */ },
|
||||
},
|
||||
{
|
||||
@@ -366,12 +404,19 @@ export function MailPage() {
|
||||
plugin: 'mail',
|
||||
label: 'Einstellungen',
|
||||
group: 'tools',
|
||||
icon: <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /></svg>,
|
||||
onClick: () => window.location.href = '/mail/settings',
|
||||
icon: (
|
||||
<svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||||
</svg>
|
||||
),
|
||||
onClick: () => {
|
||||
window.location.href = '/settings/mail';
|
||||
},
|
||||
},
|
||||
]);
|
||||
return () => unregisterPlugin('mail');
|
||||
}, [accounts, selectedAccountId, selectedMailId, selectedMailFlagged, handleAccountSwitch, handleSearch, handleCompose, handleReply, handleForward, handleToggleFlag, handleCreateEvent]);
|
||||
}, [selectedMailId, selectedMailFlagged, handleSearch, handleCompose, handleReply, handleForward, handleToggleFlag, handleCreateEvent]);
|
||||
|
||||
if (loadingAccounts) {
|
||||
return (
|
||||
@@ -391,7 +436,7 @@ export function MailPage() {
|
||||
<EmptyState
|
||||
title={t('mail.noAccounts')}
|
||||
description={t('mail.noAccountsDesc')}
|
||||
action={<Link to="/mail/settings" className="text-primary-600 hover:text-primary-700">{t('mail.configureAccount')}</Link>}
|
||||
action={<Link to="/settings/mail" className="text-primary-600 hover:text-primary-700">{t('mail.configureAccount')}</Link>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
@@ -405,23 +450,36 @@ export function MailPage() {
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Three-pane layout */}
|
||||
{/* Three-pane layout with resizable panels */}
|
||||
<div className="flex flex-1 overflow-hidden">
|
||||
{/* Folder tree */}
|
||||
<div className="w-56 border-r border-secondary-200 overflow-y-auto bg-white" data-testid="mail-folder-pane">
|
||||
{/* Folder tree — resizable */}
|
||||
<ResizablePanel
|
||||
initialWidth={224}
|
||||
minWidth={150}
|
||||
maxWidth={400}
|
||||
className="border-r border-secondary-200 overflow-y-auto bg-white"
|
||||
data-testid="mail-folder-pane"
|
||||
>
|
||||
<div className="p-3">
|
||||
<h3 className="text-xs font-semibold text-secondary-500 uppercase mb-2">{t('mail.folders')}</h3>
|
||||
<MailFolderTree
|
||||
accounts={accounts}
|
||||
folders={folders}
|
||||
selectedFolderId={selectedFolderId}
|
||||
onSelect={handleSelectFolder}
|
||||
loading={loadingFolders}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
{/* Mail list */}
|
||||
<div className="w-80 border-r border-secondary-200 overflow-y-auto bg-white" data-testid="mail-list-pane">
|
||||
{/* Mail list — resizable */}
|
||||
<ResizablePanel
|
||||
initialWidth={320}
|
||||
minWidth={200}
|
||||
maxWidth={500}
|
||||
className="border-r border-secondary-200 overflow-y-auto bg-white"
|
||||
data-testid="mail-list-pane"
|
||||
>
|
||||
<MailList
|
||||
mails={mails}
|
||||
selectedMailId={selectedMail?.id || null}
|
||||
@@ -432,10 +490,14 @@ export function MailPage() {
|
||||
pageSize={PAGE_SIZE}
|
||||
onPageChange={setMailsPage}
|
||||
/>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
|
||||
{/* Reading pane */}
|
||||
<div className="flex-1 overflow-y-auto bg-white" data-testid="mail-detail-pane">
|
||||
{/* Reading pane — flex-1, not resizable */}
|
||||
<ResizablePanel
|
||||
resizable={false}
|
||||
className="overflow-y-auto bg-white"
|
||||
data-testid="mail-detail-pane"
|
||||
>
|
||||
<MailDetail
|
||||
mail={selectedMail}
|
||||
loading={loadingMail}
|
||||
@@ -446,7 +508,7 @@ export function MailPage() {
|
||||
onDownloadAttachment={handleDownloadAttachment}
|
||||
downloadingAttachmentId={downloadingAttachmentId}
|
||||
/>
|
||||
</div>
|
||||
</ResizablePanel>
|
||||
</div>
|
||||
|
||||
<ComposeModal
|
||||
|
||||
@@ -14,6 +14,7 @@ export function SettingsPage() {
|
||||
{ to: '/settings/currencies', label: t('currencies.title'), icon: '\ud83d\udcb0' },
|
||||
{ to: '/settings/taxes', label: t('taxes.title'), icon: '\ud83d\udccb' },
|
||||
{ to: '/settings/sequences', label: t('sequences.title'), icon: '\ud83d\udd22' },
|
||||
{ to: '/settings/mail', label: t('mail.settings'), icon: '\ud83d\udce7' },
|
||||
];
|
||||
|
||||
return (
|
||||
|
||||
@@ -80,6 +80,7 @@ const router = createBrowserRouter([
|
||||
{ path: 'currencies', element: <SettingsCurrenciesPage /> },
|
||||
{ path: 'taxes', element: <SettingsTaxesPage /> },
|
||||
{ path: 'sequences', element: <SettingsSequencesPage /> },
|
||||
{ path: 'mail', element: <MailSettingsPage /> },
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
Reference in New Issue
Block a user