Add Pull Now button and provider logos to accounts page
Agent-Logs-Url: https://github.com/christianlouis/InboxConverge/sessions/0201089a-598d-4ab0-a5a3-8d2ae1120c9e Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
Generated
+2
-2
@@ -1724,7 +1724,7 @@
|
||||
"version": "19.2.10",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
|
||||
"integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"csstype": "^3.2.2"
|
||||
@@ -2801,7 +2801,7 @@
|
||||
"version": "3.2.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"dev": true,
|
||||
"devOptional": true,
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/damerau-levenshtein": {
|
||||
|
||||
@@ -4,13 +4,46 @@ 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',
|
||||
};
|
||||
|
||||
function ProviderLogo({ providerName }: { providerName?: string | null }) {
|
||||
const icon = providerName ? PROVIDER_ICON_MAP[providerName] : undefined;
|
||||
if (!icon) return null;
|
||||
return (
|
||||
<Image
|
||||
src={`/providers/${icon}.svg`}
|
||||
alt={`${providerName} logo`}
|
||||
width={24}
|
||||
height={24}
|
||||
className="object-contain flex-shrink-0"
|
||||
onError={() => {/* silently skip missing icons */}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
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 +88,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);
|
||||
@@ -90,13 +138,16 @@ export default function AccountsPage() {
|
||||
>
|
||||
<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">
|
||||
{account.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">{account.email_address}</p>
|
||||
<div className="flex items-center gap-2 flex-1 min-w-0">
|
||||
<ProviderLogo providerName={account.provider_name} />
|
||||
<div className="min-w-0">
|
||||
<h3 className="text-lg font-semibold text-gray-900 mb-1 truncate">
|
||||
{account.name}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500 truncate">{account.email_address}</p>
|
||||
</div>
|
||||
</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 +215,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"
|
||||
|
||||
@@ -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