From 19b8bc0dd2bc1750a1c2ea6b7dc9d767870b7ecd Mon Sep 17 00:00:00 2001
From: dvorakmortonxd <lolmanikyt@gmail.com>
Date: Fri, 15 May 2026 23:54:18 +0200
Subject: [PATCH] added a feature for the git heatmap which shows the amount of
 commits done on the cell youre hovering over

---
 src/app/components/ContributionHeatmap.tsx | 30 +++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/app/components/ContributionHeatmap.tsx b/src/app/components/ContributionHeatmap.tsx
index 0c193ec..0a7526a 100644
--- a/src/app/components/ContributionHeatmap.tsx
+++ b/src/app/components/ContributionHeatmap.tsx
@@ -31,6 +31,7 @@ export default function ContributionHeatmap() {
   const [error, setError] = useState(false);
   const [totalContribs, setTotalContribs] = useState(0);
   const [activities, setActivities] = useState<Activity[]>([]);
+  const [hoveredCell, setHoveredCell] = useState<{ date: string; contribs: number } | null>(null);
 
   useEffect(() => {
     async function fetchHeatmap() {
@@ -45,7 +46,7 @@ export default function ContributionHeatmap() {
         data.forEach((item) => {
           const d = new Date(item.timestamp * 1000);
           const dateStr = d.getFullYear() + "-" + String(d.getMonth() + 1).padStart(2, "0") + "-" + String(d.getDate()).padStart(2, "0");
-          map.set(dateStr, item.contributions);
+          map.set(dateStr, (map.get(dateStr) || 0) + item.contributions);
           total += item.contributions;
         });
 
@@ -135,20 +136,31 @@ export default function ContributionHeatmap() {
                 data-level={day.level >= 0 ? day.level : undefined}
                 style={{ visibility: day.level === -1 ? "hidden" : "visible" }}
                 title={day.level >= 0 ? `${day.contribs} contributions on ${day.date}` : undefined}
+                onMouseEnter={() => day.level >= 0 && setHoveredCell({ date: day.date, contribs: day.contribs })}
+                onMouseLeave={() => setHoveredCell(null)}
               >
               </div>
             ))}
           </div>
         ))}
       </div>
-      <div style={{ display: "flex", justifyContent: "flex-end", alignItems: "center", gap: "4px", fontSize: "0.75rem", color: "var(--gray)" }}>
-        <span>Less</span>
-        <div className="heatmap-legend-cell" data-level="0"></div>
-        <div className="heatmap-legend-cell" data-level="1"></div>
-        <div className="heatmap-legend-cell" data-level="2"></div>
-        <div className="heatmap-legend-cell" data-level="3"></div>
-        <div className="heatmap-legend-cell" data-level="4"></div>
-        <span>More</span>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", fontSize: "0.75rem", color: "var(--gray)", marginTop: "4px" }}>
+        <div>
+          {hoveredCell ? (
+            <span><strong style={{ color: "var(--fg)" }}>{hoveredCell.contribs}</strong> contributions on {hoveredCell.date}</span>
+          ) : (
+            <span>Hover over a day to see contributions</span>
+          )}
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "4px" }}>
+          <span>Less</span>
+          <div className="heatmap-legend-cell" data-level="0"></div>
+          <div className="heatmap-legend-cell" data-level="1"></div>
+          <div className="heatmap-legend-cell" data-level="2"></div>
+          <div className="heatmap-legend-cell" data-level="3"></div>
+          <div className="heatmap-legend-cell" data-level="4"></div>
+          <span>More</span>
+        </div>
       </div>
 
       {activities.length > 0 && (