Function DetailEmptyState

src/components/TabbedPanel.tsx:177–209

({
  mapped,
  unmapped,
  activeCategories,
  onSelectMarket,
}: {
  mapped: ProcessedMarket[];
  unmapped: ProcessedMarket[];
  activeCategories: Set<Category>;
  onSelectMarket: (m: ProcessedMarket) => void;
})

// --- Detail empty state: show top movers ---
function DetailEmptyState({
  mapped,
  unmapped,
  activeCategories,
  onSelectMarket,
}: {
  mapped: ProcessedMarket[];
  unmapped: ProcessedMarket[];
  activeCategories: Set<Category>;
  onSelectMarket: (m: ProcessedMarket) => void;
}) {
  const all = [...mapped, ...unmapped];
  const topMovers = all
    .filter((m) => activeCategories.has(m.category) && m.change !== null && !isNaN(m.change!))
    .sort((a, b) => Math.abs(b.change!) - Math.abs(a.change!))
    .slice(0, 5);

  return (
    <div className="p-2 font-mono">
      <div className="text-[11px] text-[#777] mb-2">
        select a market to view full details
      </div>
      {topMovers.length > 0 && (
        <>
          <div className="text-[10px] uppercase tracking-[0.1em] text-[#777] mb-1.5">top movers</div>
          {topMovers.map((m) => (
            <MarketCard key={m.id} market={m} showChange onClick={() => onSelectMarket(m)} />
          ))}
        </>
      )}
    </div>
  );
}

// --- Country empty state: show countries with most markets ---
function TopCountries({