Merge pull request #108 from christianlouis/copilot/add-pull-now-option-mailbox
Add "Pull Now" button, provider logo banners, and Proton Mail support
This commit is contained in:
Christian Krakau-Louis
@@ -4,13 +4,55 @@ import { AuthGuard } from '@/components/AuthGuard';
|
||||
import { DashboardLayout } from '@/components/DashboardLayout';
|
||||
import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
|
||||
import { mailAccountsApi, MailAccount } from '@/lib/api';
|
||||
import { Plus, Edit2, Trash2, CheckCircle, XCircle, AlertTriangle, Power } from 'lucide-react';
|
||||
import { Plus, Edit2, Trash2, CheckCircle, XCircle, AlertTriangle, Power, RefreshCw } from 'lucide-react';
|
||||
import { useState } from 'react';
|
||||
import Image from 'next/image';
|
||||
import { AddMailAccountModal } from '@/components/AddMailAccountModal';
|
||||
|
||||
// Map provider_name (from backend) to the SVG icon filename in /public/providers/
|
||||
const PROVIDER_ICON_MAP: Record<string, string> = {
|
||||
'Gmail': 'gmail',
|
||||
'GMX': 'gmx',
|
||||
'WEB.DE': 'webde',
|
||||
'Outlook / Hotmail': 'outlook',
|
||||
'Yahoo Mail': 'yahoo',
|
||||
'AOL Mail': 'aol',
|
||||
'T-Online': 'tonline',
|
||||
'1&1 / IONOS': 'ionos',
|
||||
'Freenet': 'freenet',
|
||||
'Posteo': 'posteo',
|
||||
'mail.de': 'mailde',
|
||||
'iCloud Mail': 'icloud',
|
||||
'Proton Mail': 'protonmail',
|
||||
};
|
||||
|
||||
/**
|
||||
* Full-width logo banner rendered at the top of a card.
|
||||
* Uses next/image fill + object-contain so every logo – regardless of its
|
||||
* native aspect ratio (1:1 square up to ~6:1 wordmark) – fits correctly
|
||||
* inside the fixed-height strip without distortion.
|
||||
*/
|
||||
function ProviderLogoBanner({ providerName }: { providerName?: string | null }) {
|
||||
const icon = providerName ? PROVIDER_ICON_MAP[providerName] : undefined;
|
||||
if (!icon) return null;
|
||||
return (
|
||||
<div className="relative h-16 w-full bg-gray-50 border-b border-gray-100 overflow-hidden">
|
||||
<Image
|
||||
src={`/providers/${icon}.svg`}
|
||||
alt={`${providerName} logo`}
|
||||
fill
|
||||
unoptimized
|
||||
sizes="(max-width: 768px) 100vw, 33vw"
|
||||
style={{ objectFit: 'contain', padding: '12px' }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AccountsPage() {
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [editingAccount, setEditingAccount] = useState<MailAccount | null>(null);
|
||||
const [pullingIds, setPullingIds] = useState<Set<number>>(new Set());
|
||||
const queryClient = useQueryClient();
|
||||
|
||||
const { data: accounts, isLoading } = useQuery({
|
||||
@@ -55,6 +97,21 @@ export default function AccountsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const handlePullNow = async (id: number) => {
|
||||
setPullingIds((prev) => new Set(prev).add(id));
|
||||
try {
|
||||
await mailAccountsApi.pullNow(id);
|
||||
} catch {
|
||||
alert('Failed to queue pull');
|
||||
} finally {
|
||||
setPullingIds((prev) => {
|
||||
const next = new Set(prev);
|
||||
next.delete(id);
|
||||
return next;
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const handleCloseModal = () => {
|
||||
setIsModalOpen(false);
|
||||
setEditingAccount(null);
|
||||
@@ -88,15 +145,18 @@ export default function AccountsPage() {
|
||||
account.is_enabled ? 'border-gray-200' : 'border-gray-200 opacity-60'
|
||||
}`}
|
||||
>
|
||||
{/* Provider logo banner – full-width strip that accommodates any aspect ratio */}
|
||||
<ProviderLogoBanner providerName={account.provider_name} />
|
||||
|
||||
<div className="p-6">
|
||||
<div className="flex items-start justify-between mb-4">
|
||||
<div className="flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1">
|
||||
<div className="min-w-0 flex-1">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1 truncate">
|
||||
{account.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">{account.email_address}</p>
|
||||
<p className="text-sm text-gray-500 truncate">{account.email_address}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="flex items-center gap-2 ml-2 flex-shrink-0">
|
||||
{account.is_enabled ? (
|
||||
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-700">
|
||||
<CheckCircle className="h-3 w-3" />
|
||||
@@ -164,6 +224,15 @@ export default function AccountsPage() {
|
||||
>
|
||||
<Power className="h-4 w-4" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handlePullNow(account.id)}
|
||||
disabled={!account.is_enabled || pullingIds.has(account.id)}
|
||||
title="Pull emails now"
|
||||
aria-label="Pull emails now"
|
||||
className="flex items-center justify-center px-3 py-2 text-sm font-medium text-indigo-600 bg-indigo-50 rounded-md hover:bg-indigo-100 transition-colors disabled:opacity-50"
|
||||
>
|
||||
<RefreshCw className={`h-4 w-4 ${pullingIds.has(account.id) ? 'animate-spin' : ''}`} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleEdit(account)}
|
||||
className="flex-1 flex items-center justify-center px-3 py-2 text-sm font-medium text-blue-600 bg-blue-50 rounded-md hover:bg-blue-100 transition-colors"
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { ChevronRight, Mail, ArrowLeft } from 'lucide-react';
|
||||
import { Mail, ArrowLeft } from 'lucide-react';
|
||||
|
||||
interface ProviderPreset {
|
||||
id: string;
|
||||
@@ -126,6 +126,15 @@ const PROVIDERS: ProviderPreset[] = [
|
||||
pop3_ssl: null,
|
||||
notes: 'Posteo supports IMAP only.',
|
||||
},
|
||||
{
|
||||
id: 'protonmail',
|
||||
name: 'Proton Mail',
|
||||
logo: '/providers/protonmail.svg',
|
||||
domains: ['proton.me', 'protonmail.com', 'protonmail.ch', 'pm.me'],
|
||||
imap_ssl: { host: '127.0.0.1', port: 1143 },
|
||||
pop3_ssl: { host: '127.0.0.1', port: 1144 },
|
||||
notes: 'Requires Proton Mail Bridge running locally. Use your Bridge password (not your Proton account password). Default Bridge ports: IMAP 127.0.0.1:1143, POP3 127.0.0.1:1144.',
|
||||
},
|
||||
];
|
||||
|
||||
export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
|
||||
@@ -172,7 +181,13 @@ export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
|
||||
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
|
||||
<h4 className="font-semibold text-blue-900 mb-2 flex items-center gap-2">
|
||||
<img src={selectedProvider.logo} alt={selectedProvider.name} className="w-6 h-6 object-contain rounded" />
|
||||
<div className="h-6 flex items-center flex-shrink-0">
|
||||
<img
|
||||
src={selectedProvider.logo}
|
||||
alt={selectedProvider.name}
|
||||
style={{ maxHeight: '100%', maxWidth: '80px', objectFit: 'contain' }}
|
||||
/>
|
||||
</div>
|
||||
{selectedProvider.name}
|
||||
</h4>
|
||||
<p className="text-sm text-blue-700 mb-1">
|
||||
@@ -240,23 +255,23 @@ export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
|
||||
<h4 className="text-sm font-medium text-gray-700 mb-3">
|
||||
Quick Setup — Select Your Email Provider
|
||||
</h4>
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
|
||||
{PROVIDERS.map((provider) => (
|
||||
<button
|
||||
key={provider.id}
|
||||
type="button"
|
||||
onClick={() => handleProviderClick(provider)}
|
||||
className="flex items-center gap-2 p-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-colors text-left"
|
||||
className="flex flex-col items-center gap-2 p-3 rounded-lg border border-gray-200 hover:border-blue-300 hover:bg-blue-50 transition-colors text-center"
|
||||
>
|
||||
<img
|
||||
src={provider.logo}
|
||||
alt={provider.name}
|
||||
className="w-6 h-6 object-contain rounded flex-shrink-0"
|
||||
/>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="text-sm font-medium text-gray-900 truncate">{provider.name}</div>
|
||||
{/* Fixed-height logo container – logo scales to its natural aspect ratio */}
|
||||
<div className="h-8 w-full flex items-center justify-center">
|
||||
<img
|
||||
src={provider.logo}
|
||||
alt={provider.name}
|
||||
style={{ maxHeight: '100%', maxWidth: '100%', objectFit: 'contain' }}
|
||||
/>
|
||||
</div>
|
||||
<ChevronRight className="h-4 w-4 text-gray-400 flex-shrink-0" />
|
||||
<div className="text-xs font-medium text-gray-900 truncate w-full">{provider.name}</div>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
@@ -318,6 +318,11 @@ export const mailAccountsApi = {
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async pullNow(id: number): Promise<{ message: string }> {
|
||||
const response = await api.post<{ message: string }>(`/mail-accounts/${id}/pull-now`);
|
||||
return response.data;
|
||||
},
|
||||
|
||||
async delete(id: number): Promise<void> {
|
||||
await api.delete(`/mail-accounts/${id}`);
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user