fix bugs

src/components/Heatmap.tsx

@@ -1,8 +1,9 @@
-import React from "react";
+import React, { useMemo, useCallback } from "react";
 import ActivityCalendar from "react-activity-calendar";
 import { Tooltip, Avatar } from "@mui/material";
 import Link from "next/link";
 import { aggregateToWeeklyData } from "../utils/weeklyCalendar";
+import { getHeatmapTheme } from "../utils/heatmapColors";
 import WeeklyHeatmap from "./WeeklyHeatmap";
 
 type ViewMode = 'daily' | 'weekly';
@@ -28,8 +29,24 @@ const Heatmap: React.FC<HeatmapProps> = ({
   showHeader = true,
   viewMode 
 }) => {
-  // Process data based on view mode
-  const processedData = viewMode === 'weekly' ? aggregateToWeeklyData(data) : data;
+  // Memoize the weekly data processing to avoid recalculation on every render
+  const weeklyData = useMemo(() => aggregateToWeeklyData(data), [data]);
+  
+  // Choose data based on view mode
+  const processedData = viewMode === 'weekly' ? weeklyData : data;
+  
+  // Memoize the theme to prevent recreation
+  const theme = useMemo(() => getHeatmapTheme(color), [color]);
+  
+  // Memoize the render block callback
+  const renderBlock = useCallback((block: React.ReactElement, activity: any) => (
+    <Tooltip
+      title={`${activity.count} new repos on ${activity.date}`}
+      arrow
+    >
+      {block}
+    </Tooltip>
+  ), []);
   
   return (
     <div className="flex flex-col items-center w-full mx-auto">
@@ -58,21 +75,11 @@ const Heatmap: React.FC<HeatmapProps> = ({
         ) : (
           <ActivityCalendar
             data={processedData}
-            theme={{
-              dark: ["#161b22", color],
-              light: ["#e0e0e0", color],
-            }}
+            theme={theme}
             blockSize={11}
             blockMargin={2}
             hideTotalCount
-            renderBlock={(block, activity) => (
-              <Tooltip
-                title={`${activity.count} new repos on ${activity.date}`}
-                arrow
-              >
-                {block}
-              </Tooltip>
-            )}
+            renderBlock={renderBlock}
           />
         )}
       </div>
@@ -80,4 +87,4 @@ const Heatmap: React.FC<HeatmapProps> = ({
   );
 };
 
-export default Heatmap;
+export default React.memo(Heatmap);

src/components/HeatmapGrid.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useCallback } from "react";
 import { ProviderInfo, CalendarData } from "../types/heatmap";
 import OrganizationCard from "./OrganizationCard";
 import ProviderHeatmapSkeleton from "./ProviderHeatmapSkeleton";
@@ -15,6 +15,11 @@ interface HeatmapGridProps {
 const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData, isLoading }) => {
   const [viewMode, setViewMode] = useState<ViewMode>('weekly');
 
+  // Memoize the toggle handler to prevent unnecessary re-renders
+  const handleViewModeToggle = useCallback((newMode: ViewMode) => {
+    setViewMode(newMode);
+  }, []);
+
   if (isLoading) {
     return (
       <div className="flex flex-col gap-8 max-w-4xl mx-auto mb-16">
@@ -31,7 +36,7 @@ const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData
       <div className="flex justify-center">
         <ViewToggle
           viewMode={viewMode}
-          onToggle={setViewMode}
+          onToggle={handleViewModeToggle}
         />
       </div>
 
@@ -49,4 +54,4 @@ const HeatmapGrid: React.FC<HeatmapGridProps> = ({ sortedProviders, calendarData
   );
 };
 
-export default HeatmapGrid;
+export default React.memo(HeatmapGrid);

src/components/UserSearchDialog.tsx

@@ -131,6 +131,7 @@ const UserSearchDialog = () => {
                     fullName={userInfo.fullName}
                     avatarUrl={userInfo.avatarUrl || ''}
                     authorId={currentSearchTerm}
+                    viewMode="daily"
                   />
                 </div>
                 <div>

src/components/WeeklyHeatmap.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useMemo, useCallback, useEffect, useState } from "react";
 import { Tooltip } from "@mui/material";
 import { getWeekDateRange } from "../utils/weeklyCalendar";
+import { getHeatmapColorIntensity } from "../utils/heatmapColors";
 
 type WeeklyActivity = {
   date: string;
@@ -14,24 +15,52 @@ type WeeklyHeatmapProps = {
 };
 
 const WeeklyHeatmap: React.FC<WeeklyHeatmapProps> = ({ data, color }) => {
-  // Group data by month and year
-  const groupedData = data.reduce((acc, activity) => {
-    const date = new Date(activity.date);
-    const yearMonth = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+  // Track theme changes
+  const [isDark, setIsDark] = useState(false);
+  
+  useEffect(() => {
+    const checkTheme = () => {
+      setIsDark(document.documentElement.classList.contains('dark'));
+    };
     
-    if (!acc[yearMonth]) {
-      acc[yearMonth] = [];
-    }
-    acc[yearMonth].push(activity);
-    return acc;
-  }, {} as Record<string, WeeklyActivity[]>);
+    // Initial check
+    checkTheme();
+    
+    // Watch for theme changes
+    const observer = new MutationObserver(checkTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+    
+    return () => observer.disconnect();
+  }, []);
+  // Memoize the grouped data to avoid recalculation
+  const groupedData = useMemo(() => {
+    return data.reduce((acc, activity) => {
+      const date = new Date(activity.date);
+      const yearMonth = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}`;
+      
+      if (!acc[yearMonth]) {
+        acc[yearMonth] = [];
+      }
+      acc[yearMonth].push(activity);
+      return acc;
+    }, {} as Record<string, WeeklyActivity[]>);
+  }, [data]);
 
-  // Get color intensity based on level
-  const getColorIntensity = (level: number) => {
-    if (level === 0) return '#161b22'; // Dark background for no activity
-    const intensities = ['#0e4429', '#006d32', '#26a641', '#39d353'];
-    return intensities[Math.min(level - 1, 3)] || color;
-  };
+  // Memoize sorted months
+  const sortedMonths = useMemo(() => Object.keys(groupedData).sort(), [groupedData]);
+
+  // Memoize the color intensity function
+  const getColorIntensity = useCallback((level: number) => {
+    return getHeatmapColorIntensity(level, color) || undefined;
+  }, [color]);
+  
+  // Get the exact same empty dot color as ActivityCalendar
+  const emptyDotColor = useMemo(() => {
+    return isDark ? '#374151' : '#d1d5db';
+  }, [isDark]);
 
   // Get month names
   const getMonthName = (yearMonth: string) => {
@@ -40,8 +69,6 @@ const WeeklyHeatmap: React.FC<WeeklyHeatmapProps> = ({ data, color }) => {
     return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
   };
 
-  const sortedMonths = Object.keys(groupedData).sort();
-
   return (
     <div className="w-full">
       <div className="flex flex-wrap gap-4 justify-center">
@@ -62,7 +89,7 @@ const WeeklyHeatmap: React.FC<WeeklyHeatmapProps> = ({ data, color }) => {
                     <div
                       className="w-3 h-3 rounded-sm cursor-pointer transition-opacity hover:opacity-80"
                       style={{
-                        backgroundColor: getColorIntensity(activity.level),
+                        backgroundColor: activity.level === 0 ? emptyDotColor : getColorIntensity(activity.level),
                       }}
                     />
                   </Tooltip>
@@ -82,7 +109,7 @@ const WeeklyHeatmap: React.FC<WeeklyHeatmapProps> = ({ data, color }) => {
               key={level}
               className="w-2.5 h-2.5 rounded-sm"
               style={{
-                backgroundColor: getColorIntensity(level),
+                backgroundColor: level === 0 ? emptyDotColor : getColorIntensity(level),
               }}
             />
           ))}
@@ -93,4 +120,4 @@ const WeeklyHeatmap: React.FC<WeeklyHeatmapProps> = ({ data, color }) => {
   );
 };
 
-export default WeeklyHeatmap;
+export default React.memo(WeeklyHeatmap);

src/pages/[author]/index.tsx

@@ -40,6 +40,7 @@ const OpenSourceHeatmap: React.FC<OpenSourceHeatmapProps> = ({
                 fullName={fullName ?? providerName}
                 avatarUrl={avatarUrl ?? ''}
                 authorId={providerName}
+                viewMode="daily"
               />
             ))}
         </div>

src/utils/heatmapColors.ts

@@ -0,0 +1,27 @@
+// Shared color utilities for consistent heatmap theming
+
+// Use exact same colors for both daily and weekly views
+const EMPTY_DOT_DARK = "#374151";   // gray-600 equivalent
+const EMPTY_DOT_LIGHT = "#d1d5db";  // gray-300 equivalent
+
+export const getHeatmapTheme = (primaryColor: string) => ({
+  dark: [EMPTY_DOT_DARK, primaryColor],
+  light: [EMPTY_DOT_LIGHT, primaryColor],
+});
+
+export const getHeatmapColorIntensity = (level: number, primaryColor: string) => {
+  if (level === 0) {
+    return null; // Will use CSS classes for theme-aware empty state
+  }
+  
+  // Use different intensities of the primary color or default green scale
+  const greenIntensities = ['#0e4429', '#006d32', '#26a641', '#39d353'];
+  return greenIntensities[Math.min(level - 1, 3)] || primaryColor;
+};
+
+export const getEmptyDotColors = () => ({
+  dark: EMPTY_DOT_DARK,
+  light: EMPTY_DOT_LIGHT,
+});
+
+export const getEmptyDotClasses = () => "bg-[#d1d5db] dark:bg-[#374151]";