Fix weekly heatmap to show proper weekly aggregation

- Updated weeklyCalendar.ts to create true weekly data points
- Created custom WeeklyHeatmap component for proper weekly visualization
- Weekly view now shows 4-5 dots per month representing weeks
- Each dot aggregates all activity for that week
- Improved tooltips and month labels for better UX
- Maintains daily view for detailed activity tracking

src/components/Heatmap.tsx

@@ -2,7 +2,8 @@ import React from "react";
 import ActivityCalendar from "react-activity-calendar";
 import { Tooltip, Avatar } from "@mui/material";
 import Link from "next/link";
-import { aggregateToWeeklyData, getWeekDateRange } from "../utils/weeklyCalendar";
+import { aggregateToWeeklyData } from "../utils/weeklyCalendar";
+import WeeklyHeatmap from "./WeeklyHeatmap";
 
 type ViewMode = 'daily' | 'weekly';
 
@@ -52,27 +53,28 @@ const Heatmap: React.FC<HeatmapProps> = ({
         </div>
       )}
       <div className="w-full overflow-x-auto flex justify-center">
-        <ActivityCalendar
-          data={processedData}
-          theme={{
-            dark: ["#161b22", color],
-            light: ["#e0e0e0", color],
-          }}
-          blockSize={viewMode === 'weekly' ? 15 : 11}
-          hideTotalCount
-          renderBlock={(block, activity) => (
-            <Tooltip
-              title={
-                viewMode === 'weekly'
-                  ? `${activity.count} new repos in week of ${getWeekDateRange(activity.date)}`
-                  : `${activity.count} new repos on ${activity.date}`
-              }
-              arrow
-            >
-              {block}
-            </Tooltip>
-          )}
-        />
+        {viewMode === 'weekly' ? (
+          <WeeklyHeatmap data={processedData} color={color} />
+        ) : (
+          <ActivityCalendar
+            data={processedData}
+            theme={{
+              dark: ["#161b22", color],
+              light: ["#e0e0e0", color],
+            }}
+            blockSize={11}
+            blockMargin={2}
+            hideTotalCount
+            renderBlock={(block, activity) => (
+              <Tooltip
+                title={`${activity.count} new repos on ${activity.date}`}
+                arrow
+              >
+                {block}
+              </Tooltip>
+            )}
+          />
+        )}
       </div>
     </div>
   );

src/components/Navbar.tsx

@@ -1,11 +1,21 @@
 import React from "react";
 import UserSearchDialog from "./UserSearchDialog";
+import dynamic from "next/dynamic";
+
+// Dynamically import ThemeToggle to avoid SSR issues
+const ThemeToggle = dynamic(() => import("./ThemeToggle"), {
+  ssr: false,
+  loading: () => (
+    <div className="h-10 w-10 rounded-lg border border-border bg-background animate-pulse"></div>
+  ),
+});
 
 const Navbar: React.FC = () => {
   return (
     <nav className="w-full mt-4">
       <div className="max-w-6xl mx-auto px-4 py-3">
         <div className="flex items-center justify-end gap-3">
+          <ThemeToggle />
           <UserSearchDialog />
         </div>
       </div>

src/components/ThemeToggle.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { useEffect, useState } from 'react';
 import { useTheme } from '../contexts/ThemeContext';
 import { cn } from '../lib/utils';

src/components/WeeklyHeatmap.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { Tooltip } from "@mui/material";
+import { getWeekDateRange } from "../utils/weeklyCalendar";
+
+type WeeklyActivity = {
+  date: string;
+  count: number;
+  level: number;
+};
+
+type WeeklyHeatmapProps = {
+  data: WeeklyActivity[];
+  color: string;
+};
+
+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')}`;
+    
+    if (!acc[yearMonth]) {
+      acc[yearMonth] = [];
+    }
+    acc[yearMonth].push(activity);
+    return acc;
+  }, {} as Record<string, WeeklyActivity[]>);
+
+  // 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;
+  };
+
+  // Get month names
+  const getMonthName = (yearMonth: string) => {
+    const [year, month] = yearMonth.split('-');
+    const date = new Date(parseInt(year), parseInt(month) - 1);
+    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">
+        {sortedMonths.map((yearMonth) => {
+          const monthData = groupedData[yearMonth];
+          return (
+            <div key={yearMonth} className="flex flex-col items-center">
+              <div className="text-xs mb-2 text-gray-600 dark:text-gray-400">
+                {getMonthName(yearMonth)}
+              </div>
+              <div className="flex gap-1">
+                {monthData.map((activity, index) => (
+                  <Tooltip
+                    key={`${yearMonth}-${index}`}
+                    title={`${activity.count} new repos in week of ${getWeekDateRange(activity.date)}`}
+                    arrow
+                  >
+                    <div
+                      className="w-3 h-3 rounded-sm cursor-pointer transition-opacity hover:opacity-80"
+                      style={{
+                        backgroundColor: getColorIntensity(activity.level),
+                      }}
+                    />
+                  </Tooltip>
+                ))}
+              </div>
+            </div>
+          );
+        })}
+      </div>
+      
+      {/* Legend */}
+      <div className="flex items-center justify-center mt-4 text-xs text-gray-600 dark:text-gray-400">
+        <span className="mr-2">Less</span>
+        <div className="flex gap-1">
+          {[0, 1, 2, 3, 4].map((level) => (
+            <div
+              key={level}
+              className="w-2.5 h-2.5 rounded-sm"
+              style={{
+                backgroundColor: getColorIntensity(level),
+              }}
+            />
+          ))}
+        </div>
+        <span className="ml-2">More</span>
+      </div>
+    </div>
+  );
+};
+
+export default WeeklyHeatmap;

src/contexts/ThemeContext.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import React, { createContext, useContext, useEffect, useState } from 'react';
 
 type Theme = 'light' | 'dark';

src/pages/_app.tsx

@@ -1,6 +1,11 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { ThemeProvider } from "../contexts/ThemeContext";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <ThemeProvider>
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
 }

src/utils/weeklyCalendar.ts

@@ -3,46 +3,39 @@ import { Activity } from "../types/heatmap";
 export const aggregateToWeeklyData = (dailyData: Activity[]): Activity[] => {
   if (!dailyData || dailyData.length === 0) return [];
 
-  const weeklyData: Activity[] = [];
-  let currentWeekStart: Date | null = null;
-  let currentWeekCount = 0;
-  let currentWeekLevel = 0;
+  // Create a map to group activities by week
+  const weeklyMap = new Map<string, { count: number; level: number; dates: string[] }>();
 
   for (const dayActivity of dailyData) {
     const date = new Date(dayActivity.date);
-    const dayOfWeek = date.getDay(); // 0 = Sunday, 1 = Monday, etc.
-
-    // If it's Sunday or we don't have a current week, start a new week
-    if (dayOfWeek === 0 || currentWeekStart === null) {
-      // Save the previous week if it exists
-      if (currentWeekStart !== null) {
-        weeklyData.push({
-          date: currentWeekStart.toISOString().split('T')[0],
-          count: currentWeekCount,
-          level: currentWeekLevel,
-        });
-      }
-
-      // Start new week
-      currentWeekStart = new Date(date);
-      currentWeekCount = dayActivity.count;
-      currentWeekLevel = dayActivity.level;
-    } else {
-      // Add to current week
-      currentWeekCount += dayActivity.count;
-      // Use the maximum level for the week
-      currentWeekLevel = Math.max(currentWeekLevel, dayActivity.level);
+    // Get the Sunday of this week (week start)
+    const weekStart = new Date(date);
+    weekStart.setDate(date.getDate() - date.getDay());
+    const weekKey = weekStart.toISOString().split('T')[0];
+
+    if (!weeklyMap.has(weekKey)) {
+      weeklyMap.set(weekKey, { count: 0, level: 0, dates: [] });
     }
+
+    const weekData = weeklyMap.get(weekKey)!;
+    weekData.count += dayActivity.count;
+    weekData.level = Math.max(weekData.level, dayActivity.level);
+    weekData.dates.push(dayActivity.date);
   }
 
-  // Don't forget the last week
-  if (currentWeekStart !== null) {
+  // Convert to true weekly data - one entry per week, not per day
+  const weeklyData: Activity[] = [];
+  
+  weeklyMap.forEach((weekInfo, weekStartDate) => {
     weeklyData.push({
-      date: currentWeekStart.toISOString().split('T')[0],
-      count: currentWeekCount,
-      level: currentWeekLevel,
+      date: weekStartDate, // Use the week start date
+      count: weekInfo.count,
+      level: weekInfo.level,
     });
-  }
+  });
+
+  // Sort by date to ensure proper order
+  weeklyData.sort((a, b) => new Date(a.date).getTime() - new Date(b.date).getTime());
 
   return weeklyData;
 };