Function ResolutionPanel

src/components/ResolutionPanel.tsx:104–172

({ onSelectMarket, categoryFilter, strengthFilter }: ResolutionPanelProps)

}

export default function ResolutionPanel({ onSelectMarket, categoryFilter, strengthFilter }: ResolutionPanelProps) {
  const { t } = useI18n();
  const { enriched } = useResolutionData();

  const filtered = useMemo(() => {
    let result = enriched;
    if (strengthFilter.size > 0) result = result.filter((a) => strengthFilter.has(a.strength));
    if (categoryFilter.size > 0) result = result.filter((a) => a.category && categoryFilter.has(a.category));
    return result;
  }, [enriched, categoryFilter, strengthFilter]);

  return (
    <div className="font-mono">
      {filtered.length === 0 ? (
        <div className="text-[12px] text-[var(--text-ghost)] py-4 text-center">
          {t("resolutionPanel.noAlerts")}
        </div>
      ) : (
        <div className="space-y-0">
          {filtered.map((alert) => (
            <div
              key={alert.id}
              className="border-b border-[var(--border-subtle)] last:border-0"
              style={{ background: alert.strength === "strong" ? "rgba(255,68,68,0.03)" : undefined }}
            >
              <div className="px-1.5 py-[5px]">
                <div className="flex items-center gap-1 mb-0.5">
                  <span
                    className="text-[8px] font-bold rounded-sm px-0.5 leading-[14px]"
                    style={{ background: STRENGTH_BG[alert.strength], color: STRENGTH_COLORS[alert.strength] }}
                  >
                    {t(`signals.${alert.strength === "strong" ? "str" : alert.strength === "moderate" ? "mod" : "wea"}`)}
                  </span>
                  <span className="text-[10px] font-bold text-[var(--text-faint)] uppercase tracking-wide">
                    {alert.source}
                  </span>
                  {alert.prob !== null && (
                    <span className="text-[10px] tabular-nums text-[var(--text-dim)]">
                      @{(alert.prob * 100).toFixed(0)}%
                    </span>
                  )}
                  <span className="text-[10px] text-[var(--text-ghost)] ml-auto shrink-0">
                    {timeAgo(new Date(alert.detectedAt).getTime())}
                  </span>
                </div>

                <a
                  href={alert.url}
                  target="_blank"
                  rel="noopener noreferrer"
                  className="text-[11px] text-[var(--text-secondary)] leading-tight hover:text-[var(--text)] transition-colors block"
                >
                  {alert.title}
                </a>

                <button
                  onClick={() => onSelectMarket?.(alert.slug)}
                  className="text-[10px] text-[var(--green,#22c55e)] hover:underline truncate block max-w-full text-left mt-0.5"