Function SentimentPanel

src/components/SentimentPanel.tsx:162–239

()

}

export default function SentimentPanel() {
  const { t } = useI18n();
  const [data, setData] = useState<SentimentIndex | null>(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const retryCount = useRef(0);

  const fetchSentiment = useCallback(async () => {
    try {
      const res = await fetch("/api/sentiment");
      if (!res.ok) throw new Error("fetch failed");
      const json: SentimentIndex = await res.json();
      setData(json);
      setError(null);
      retryCount.current = 0;
    } catch {
      if (retryCount.current < 3) {
        const delay = 2000 * Math.pow(2, retryCount.current);
        retryCount.current++;
        setTimeout(fetchSentiment, delay);
      } else {
        setError("load failed");
      }
    } finally {
      setLoading(false);
    }
  }, []);

  useEffect(() => {
    fetchSentiment();
  }, [fetchSentiment]);

  useVisibilityPolling(fetchSentiment, 45_000);

  if (loading && !data) {
    return (
      <div style={{ padding: 12, fontFamily: "monospace", fontSize: 11, color: "var(--text-muted)" }}>
        {t("sentiment.loadingSentiment")}
      </div>
    );
  }

  if (error && !data) {
    return (
      <div className="text-[11px] text-[var(--red)] font-mono py-2 text-center" aria-live="polite">
        {t("common.loadFailed")} <button onClick={() => { retryCount.current = 0; setLoading(true); fetchSentiment(); }} className="ml-2 underline">{t("common.retry")}</button>
      </div>
    );
  }

  if (!data) return null;

  const color = scoreColor(data.score);

  return (
    <div data-testid="sentiment-panel" style={{ padding: "6px 10px", fontFamily: "monospace", display: "flex", flexDirection: "column", gap: 6 }}>
      {/* Gauge + label */}
      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 0 }}>