Display Sender Company Logos in Your Email App (Like Superhuman)

// lib/email-domain.ts
const PERSONAL_PROVIDERS = new Set([
  'gmail.com', 'googlemail.com', 'yahoo.com', 'yahoo.co.uk',
  'hotmail.com', 'hotmail.co.uk', 'outlook.com', 'live.com',
  'icloud.com', 'me.com', 'mac.com', 'aol.com',
  'protonmail.com', 'proton.me', 'pm.me',
  'fastmail.com', 'fastmail.fm', 'hey.com',
  'tutanota.com', 'zoho.com',
]);

export function getCompanyDomain(email: string): string | null {
  const parts = email.toLowerCase().trim().split('@');
  if (parts.length !== 2) return null;

  const domain = parts[1];
  if (!domain || PERSONAL_PROVIDERS.has(domain)) return null;

  // Strip common subdomains
  return domain.replace(/^(mail|smtp|email)\./, '');
}

// getCompanyDomain('alice@stripe.com') → 'stripe.com'
// getCompanyDomain('bob@gmail.com') → null
// getCompanyDomain('carl@mail.company.io') → 'company.io'

// lib/logo-fetcher.ts
type LogoStatus = 'pending' | 'resolved' | 'rejected';

interface CacheEntry {
  status: LogoStatus;
  url?: string;
  promise?: Promise<string | null>;
}

const cache = new Map<string, CacheEntry>();

export function prefetchLogo(domain: string): void {
  if (cache.has(domain)) return;

  const entry: CacheEntry = { status: 'pending' };
  entry.promise = fetch(
    `https://img.logorouter.com/${domain}?size=80&format=webp`,
    { cache: 'force-cache' }
  ).then((res) => {
    if (res.ok) {
      const url = res.url;
      cache.set(domain, { status: 'resolved', url });
      return url;
    }
    cache.set(domain, { status: 'rejected' });
    return null;
  }).catch(() => {
    cache.set(domain, { status: 'rejected' });
    return null;
  });

  cache.set(domain, entry);
}

export function useLogoUrl(domain: string | null): string | null | 'loading' {
  if (!domain) return null;

  const entry = cache.get(domain);
  if (!entry) {
    prefetchLogo(domain);
    return 'loading';
  }
  if (entry.status === 'pending') return 'loading';
  if (entry.status === 'resolved') return entry.url ?? null;
  return null; // rejected
}

// components/sender-logo.tsx
'use client';

import { useState, useEffect } from 'react';
import { getCompanyDomain } from '@/lib/email-domain';

interface SenderLogoProps {
  email: string;
  senderName: string;
  size?: number;
}

export function SenderLogo({ email, senderName, size = 40 }: SenderLogoProps) {
  const domain = getCompanyDomain(email);
  const [status, setStatus] = useState<'loading' | 'loaded' | 'error'>(
    domain ? 'loading' : 'error'
  );

  if (!domain) {
    return <PersonAvatar name={senderName} size={size} />;
  }

  return (
    <div
      className="relative flex-shrink-0 rounded-full overflow-hidden bg-muted"
      style={{ width: size, height: size }}
    >
      {status === 'loading' && (
        <div className="absolute inset-0 animate-pulse bg-muted" />
      )}

      {status !== 'error' && (
        <img
          src={`https://img.logorouter.com/${domain}?size=${size * 2}&format=webp`}
          alt={`${domain} company logo`}
          width={size}
          height={size}
          className={`absolute inset-0 object-contain p-1 transition-opacity ${
            status === 'loaded' ? 'opacity-100' : 'opacity-0'
          }`}
          onLoad={() => setStatus('loaded')}
          onError={() => setStatus('error')}
        />
      )}

      {status === 'error' && (
        <PersonAvatar name={senderName} size={size} />
      )}
    </div>
  );
}

function PersonAvatar({ name, size }: { name: string; size: number }) {
  const initials = name.split(' ').map(n => n[0]).slice(0, 2).join('').toUpperCase();
  const colors = ['bg-blue-500', 'bg-violet-500', 'bg-amber-500', 'bg-green-500', 'bg-rose-500'];
  const colorIndex = name.charCodeAt(0) % colors.length;

  return (
    <div
      className={`${colors[colorIndex]} flex items-center justify-center text-white font-semibold`}
      style={{ width: size, height: size, fontSize: size * 0.35 }}
    >
      {initials}
    </div>
  );
}

// components/inbox-row.tsx
import { useEffect } from 'react';
import { prefetchLogo } from '@/lib/logo-fetcher';
import { getCompanyDomain } from '@/lib/email-domain';
import { SenderLogo } from '@/components/sender-logo';

interface Email {
  id: string;
  from: { name: string; email: string };
  subject: string;
  preview: string;
  date: string;
  read: boolean;
}

export function InboxRow({ email }: { email: Email }) {
  const domain = getCompanyDomain(email.from.email);

  // Prefetch logo as soon as the row mounts
  useEffect(() => {
    if (domain) prefetchLogo(domain);
  }, [domain]);

  return (
    <div className={`flex items-center gap-3 px-4 py-3 hover:bg-muted/50 cursor-pointer ${
      !email.read ? 'bg-background' : 'bg-muted/20'
    }`}>
      <SenderLogo
        email={email.from.email}
        senderName={email.from.name}
        size={36}
      />
      <div className="flex-1 min-w-0">
        <div className="flex items-center justify-between">
          <span className={`text-sm ${!email.read ? 'font-semibold' : ''} truncate`}>
            {email.from.name}
          </span>
          <time className="text-xs text-muted-foreground ml-2 whitespace-nowrap">
            {email.date}
          </time>
        </div>
        <p className="text-sm text-muted-foreground truncate">{email.subject}</p>
        <p className="text-xs text-muted-foreground/70 truncate">{email.preview}</p>
      </div>
    </div>
  );
}

// Prefetch all visible logos before rendering
emails.forEach(email => {
  const domain = getCompanyDomain(email.from.email);
  if (domain) prefetchLogo(domain);
});