Heatmap refreshes on data updates via SSE

Author: rollecode

CHANGELOG.md

@@ -16,6 +16,7 @@
 * Position reaction picker at top right of message bubble
 * Improve reaction badge styling and hover states
 * Add Slack-style tooltip showing who reacted with each emoji
+* Heatmap updates in real time when expenses are added or synced
 
 ### 1.9.4: 2026-03-25
 

src/components/dashboard/spending-heatmap.tsx

@@ -2,6 +2,7 @@
 
 import { Card } from "@/components/ui/card";
 import { useLocale } from "@/lib/locale-context";
+import { useEvent } from "@/lib/use-events";
 import { useState, useEffect, useRef, useCallback } from "react";
 import { isTransfer } from "@/lib/transaction-utils";
 
@@ -28,7 +29,7 @@ export function SpendingHeatmap() {
   const cardRef = useRef<HTMLDivElement>(null);
   const [tooltip, setTooltip] = useState<TooltipData | null>(null);
 
-  useEffect(() => {
+  const loadHeatmap = useCallback(() => {
     fetch("/api/heatmap")
       .then((r) => r.json())
       .then((data) => {
@@ -39,6 +40,9 @@ export function SpendingHeatmap() {
       .catch(() => {});
   }, []);
 
+  useEffect(() => { loadHeatmap(); }, [loadHeatmap]);
+  useEvent("data:updated", loadHeatmap);
+
   useEffect(() => {
     requestAnimationFrame(() => {
       if (scrollRef.current) {