ChannelIcon.tsx1.7 KBView on GitHub
/**
 * A task's output kind → its icon.
 *
 * The channels with a recognisable mark keep it — Gmail, Slack, LinkedIn, WhatsApp — because
 * that mark is how the channel is identified everywhere else in the product. Only the kinds with
 * no brand of their own (calendar, CRM, file, reminder) fall back to a neutral lucide glyph.
 *
 * Extracted from TaskGroupDetailSidebar so the sidebar, the kanban card, and the board header can
 * all render a task's output identically.
 */
import { CalendarDays, CircleDot, FileText, ListChecks } from 'lucide-react';
import { GmailColor } from '@/components/icons/icons';
import { LinkedInLogo, SlackLogo, WhatsAppLogo } from '@/modules/inbox/components/channel-icons';
import { cn } from '@/lib/utils';

export function ChannelIcon({ channel, className }: { channel: string | null; className?: string }) {
  if (channel === 'slack') {
    return <SlackLogo className={className} />;
  }
  if (channel === 'linkedin') {
    return <LinkedInLogo className={className} />;
  }
  if (channel === 'whatsapp') {
    return <WhatsAppLogo className={className} />;
  }
  if (channel === 'calendar') {
    return <CalendarDays className={cn('text-muted-foreground/60', className)} />;
  }
  if (channel === 'crm-field' || channel === 'crm-opportunity') {
    return <ListChecks className={cn('text-muted-foreground/60', className)} />;
  }
  if (channel === 'file') {
    return <FileText className={cn('text-muted-foreground/60', className)} />;
  }
  if (channel === 'recommendation' || channel === 'none') {
    return <CircleDot className={cn('text-muted-foreground/60', className)} />;
  }
  return <GmailColor className={className} />; // email + default
}