feat: compute and pass global max availability across day planners

- Added logic to calculate global maximum availability based on user timeblocks.
- Updated DayPlanner, DayPlanners, DayTime, and PreviewDayTime components to accept and utilize the globalMaxAvailable prop.
- Enhanced best times functionality to leverage the computed global max availability for improved user experience.

Author: VNOsST

apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-planner.tsx

@@ -12,6 +12,7 @@ export default function DayPlanner({
   editable,
   disabled,
   showBestTimes = false,
+  globalMaxAvailable,
   onBestTimesStatus,
 }: {
   timeblocks: Timeblock[];
@@ -21,6 +22,7 @@ export default function DayPlanner({
   editable: boolean;
   disabled: boolean;
   showBestTimes?: boolean;
+  globalMaxAvailable: number;
   onBestTimesStatus?: (hasBestTimes: boolean) => void;
 }) {
   const locale = useLocale();
@@ -47,6 +49,7 @@ export default function DayPlanner({
         editable={editable}
         disabled={disabled}
         showBestTimes={showBestTimes}
+        globalMaxAvailable={globalMaxAvailable}
         onBestTimesStatus={onBestTimesStatus}
       />
     </div>

apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-planners.tsx

@@ -1,6 +1,7 @@
 import DayPlanner from './day-planner';
 import { useTimeBlocking } from './time-blocking-provider';
 import type { Timeblock } from '@tuturuuu/types/primitives/Timeblock';
+import dayjs from 'dayjs';
 import { useCallback, useEffect, useState } from 'react';
 
 export default function DayPlanners({
@@ -69,6 +70,35 @@ export default function DayPlanners({
     };
   }, [editing.enabled]);
 
+  // Compute global max availability across all days
+  const hourSplits = 4;
+  let globalMaxAvailable = 0;
+  dates.forEach((d) => {
+    const dayTimeblocks = timeblocks.filter((tb) => tb.date === d);
+    const hourBlocks = Array.from(Array(Math.floor(end + 1 - start)).keys());
+    const slotAvailableCounts: number[] = hourBlocks
+      .map((i) => (i + start) * hourSplits)
+      .flatMap((i) => Array(hourSplits).fill(i))
+      .map((_, i) => {
+        const currentDate = dayjs(d)
+          .hour(Math.floor(i / hourSplits) + start)
+          .minute((i % hourSplits) * 15)
+          .toDate();
+        const userIds = dayTimeblocks
+          .filter((tb) => {
+            const start = dayjs(`${tb.date} ${tb.start_time}`);
+            const end = dayjs(`${tb.date} ${tb.end_time}`);
+            return dayjs(currentDate).isBetween(start, end, null, '[)');
+          })
+          .map((tb) => tb.user_id)
+          .filter(Boolean);
+        const uniqueUserIds = Array.from(new Set(userIds));
+        return uniqueUserIds.length;
+      });
+    const maxAvailable = Math.max(...slotAvailableCounts);
+    if (maxAvailable > globalMaxAvailable) globalMaxAvailable = maxAvailable;
+  });
+
   return (
     <div
       id="scrollable"
@@ -84,6 +114,7 @@ export default function DayPlanners({
           disabled={disabled}
           timeblocks={timeblocks.filter((tb) => tb.date === d)}
           showBestTimes={showBestTimes}
+          globalMaxAvailable={globalMaxAvailable}
           onBestTimesStatus={(hasBestTimes) =>
             handleBestTimesStatus(d, hasBestTimes)
           }

apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/day-time.tsx

@@ -5,6 +5,7 @@ import type { Timeblock } from '@tuturuuu/types/primitives/Timeblock';
 export default function DayTime({
   editable,
   onBestTimesStatus,
+  globalMaxAvailable,
   ...props
 }: {
   timeblocks: Timeblock[];
@@ -14,8 +15,15 @@ export default function DayTime({
   editable: boolean;
   disabled: boolean;
   showBestTimes?: boolean;
+  globalMaxAvailable: number;
   onBestTimesStatus?: (hasBestTimes: boolean) => void;
 }) {
   if (editable) return <SelectableDayTime {...props} />;
-  return <PreviewDayTime {...props} onBestTimesStatus={onBestTimesStatus} />;
+  return (
+    <PreviewDayTime
+      {...props}
+      globalMaxAvailable={globalMaxAvailable}
+      onBestTimesStatus={onBestTimesStatus}
+    />
+  );
 }

apps/web/src/app/[locale]/(marketing)/meet-together/plans/[planId]/preview-day-time.tsx

@@ -19,6 +19,7 @@ export default function PreviewDayTime({
   end,
   disabled,
   showBestTimes = false,
+  globalMaxAvailable,
   onBestTimesStatus,
 }: {
   timeblocks: Timeblock[];
@@ -27,6 +28,7 @@ export default function PreviewDayTime({
   end: number;
   disabled: boolean;
   showBestTimes?: boolean;
+  globalMaxAvailable: number;
   onBestTimesStatus?: (hasBestTimes: boolean) => void;
 }) {
   const {
@@ -67,42 +69,15 @@ export default function PreviewDayTime({
       const uniqueUserIds = Array.from(new Set(userIds));
       return uniqueUserIds.length;
     });
-  const maxAvailable = Math.max(...slotAvailableCounts);
 
-  // Find the longest contiguous block(s) with max availability
+  // Find all blocks with the global max available
   const bestBlockIndices: Set<number> = new Set();
-  if (showBestTimes && maxAvailable >= 2) {
-    let longest = 0;
-    let currentStart = -1;
-    let currentLen = 0;
-    const blocks: { start: number; len: number }[] = [];
-    for (let i = 0; i < slotAvailableCounts.length; i++) {
-      if (slotAvailableCounts[i] === maxAvailable) {
-        if (currentStart === -1) currentStart = i;
-        currentLen++;
-      } else {
-        if (currentLen > 0) {
-          blocks.push({ start: currentStart, len: currentLen });
-          if (currentLen > longest) longest = currentLen;
-        }
-        currentStart = -1;
-        currentLen = 0;
+  if (showBestTimes && globalMaxAvailable >= 2) {
+    slotAvailableCounts.forEach((count, i) => {
+      if (count === globalMaxAvailable) {
+        bestBlockIndices.add(i);
       }
-    }
-    if (currentLen > 0) {
-      blocks.push({ start: currentStart, len: currentLen });
-      if (currentLen > longest) longest = currentLen;
-    }
-    // Only highlight if the longest block is more than 1 slot
-    if (longest > 1) {
-      blocks
-        .filter((b) => b.len === longest)
-        .forEach((b) => {
-          for (let i = b.start; i < b.start + b.len; i++) {
-            bestBlockIndices.add(i);
-          }
-        });
-    }
+    });
   }
 
   // Notify parent about best times status