Fix provider logos, improve Fetch button UX on mail accounts page

Agent-Logs-Url: https://github.com/christianlouis/InboxConverge/sessions/058b6481-f8eb-43ed-8f5f-715c19c4a377

Co-authored-by: christianlouis <361235+christianlouis@users.noreply.github.com>

frontend/src/app/accounts/page.tsx

@@ -53,6 +53,7 @@ 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 [successIds, setSuccessIds] = useState<Set<number>>(new Set());
   const queryClient = useQueryClient();
 
   const { data: accounts, isLoading } = useQuery({
@@ -101,6 +102,14 @@ export default function AccountsPage() {
     setPullingIds((prev) => new Set(prev).add(id));
     try {
       await mailAccountsApi.pullNow(id);
+      setSuccessIds((prev) => new Set(prev).add(id));
+      setTimeout(() => {
+        setSuccessIds((prev) => {
+          const next = new Set(prev);
+          next.delete(id);
+          return next;
+        });
+      }, 2000);
     } catch {
       alert('Failed to queue pull');
     } finally {
@@ -227,11 +236,22 @@ export default function AccountsPage() {
                       <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"
+                        title="Fetch new emails from this account now"
+                        aria-label="Fetch emails now"
+                        className={`flex items-center justify-center gap-1.5 px-3 py-2 text-sm font-medium rounded-md transition-colors disabled:opacity-50 ${
+                          successIds.has(account.id)
+                            ? 'text-green-600 bg-green-50 hover:bg-green-100'
+                            : 'text-indigo-600 bg-indigo-50 hover:bg-indigo-100'
+                        }`}
                       >
                         <RefreshCw className={`h-4 w-4 ${pullingIds.has(account.id) ? 'animate-spin' : ''}`} />
+                        <span>
+                          {pullingIds.has(account.id)
+                            ? 'Fetching…'
+                            : successIds.has(account.id)
+                            ? 'Queued!'
+                            : 'Fetch'}
+                        </span>
                       </button>
                       <button
                         onClick={() => handleEdit(account)}

frontend/src/components/AddMailAccountModal.tsx

@@ -39,6 +39,7 @@ export function AddMailAccountModal({ account, onClose }: AddMailAccountModalPro
     check_interval_minutes: account?.check_interval_minutes || 5,
     max_emails_per_check: account?.max_emails_per_check || 50,
     delete_after_forward: account?.delete_after_forward ?? true,
+    provider_name: account?.provider_name ?? null,
   });
 
   const onMutationSuccess = () => {
@@ -75,7 +76,7 @@ export function AddMailAccountModal({ account, onClose }: AddMailAccountModalPro
     });
   };
 
-  const handleProviderSelect = (config: { name: string; protocol: string; host: string; port: number; use_ssl: boolean }) => {
+  const handleProviderSelect = (config: { name: string; provider_name: string; protocol: string; host: string; port: number; use_ssl: boolean }) => {
     setFormData((prev) => ({
       ...prev,
       name: config.name,
@@ -83,6 +84,7 @@ export function AddMailAccountModal({ account, onClose }: AddMailAccountModalPro
       host: config.host,
       port: config.port,
       use_ssl: config.use_ssl,
+      provider_name: config.provider_name,
     }));
     setWizardStep('form');
   };

frontend/src/components/ProviderWizard.tsx

@@ -15,6 +15,7 @@ interface ProviderPreset {
 
 interface ProviderConfig {
   name: string;
+  provider_name: string;
   protocol: string;
   host: string;
   port: number;
@@ -160,6 +161,7 @@ export function ProviderWizard({ onSelect, onManual }: ProviderWizardProps) {
 
     onSelect({
       name: selectedProvider.name,
+      provider_name: selectedProvider.name,
       protocol: selectedProtocol === 'imap_ssl' ? 'imap_ssl' : 'pop3_ssl',
       host: config.host,
       port: config.port,

frontend/src/lib/api.ts

@@ -95,6 +95,7 @@ export interface MailAccountCreate {
   check_interval_minutes?: number;
   max_emails_per_check?: number;
   delete_after_forward?: boolean;
+  provider_name?: string | null;
 }
 
 export interface MailAccountUpdate {
@@ -113,6 +114,7 @@ export interface MailAccountUpdate {
   check_interval_minutes?: number;
   max_emails_per_check?: number;
   delete_after_forward?: boolean;
+  provider_name?: string | null;
 }
 
 export interface ProcessingRun {