chore: add week days to calendar

web/src/components/ActivityCalendar/CompactMonthCalendar.tsx

@@ -18,7 +18,7 @@ export const CompactMonthCalendar = memo((props: CompactMonthCalendarProps) => {
   const today = useTodayDate();
   const weekDays = useWeekdayLabels();
 
-  const { weeks } = useCalendarMatrix({
+  const { weeks, weekDays: rotatedWeekDays } = useCalendarMatrix({
     month,
     data,
     weekDays,
@@ -30,6 +30,15 @@ export const CompactMonthCalendar = memo((props: CompactMonthCalendarProps) => {
   const sizeConfig = size === "small" ? SMALL_CELL_SIZE : DEFAULT_CELL_SIZE;
 
   return (
+    <div className="flex flex-col gap-1">
+      <div className={cn("grid grid-cols-7 gap-0.5 text-muted-foreground", size === "small" ? "text-[10px]" : "text-xs")}>
+        {rotatedWeekDays.map((label, index) => (
+          <div key={index} className="flex h-4 items-center justify-center text-muted-foreground/50">
+            {label}
+          </div>
+        ))}
+      </div>
+
       <div className={cn("grid grid-cols-7", sizeConfig.gap)}>
         {weeks.map((week, weekIndex) =>
           week.days.map((day, dayIndex) => {
@@ -48,6 +57,7 @@ export const CompactMonthCalendar = memo((props: CompactMonthCalendarProps) => {
           }),
         )}
       </div>
+    </div>
   );
 });