update

frontend/src/pages/Index.tsx

@@ -4,6 +4,7 @@ import { Header } from '@/components/Header';
 import { ParticipantSelector } from '@/components/ParticipantSelector';
 import { ParticipantManager } from '@/components/ParticipantManager';
 import { AvailabilityHeatmap } from '@/components/AvailabilityHeatmap';
+import { AvailabilityHeatmapV2 } from '@/components/AvailabilityHeatmapV2';
 import { ScheduleModal } from '@/components/ScheduleModal';
 import { TimezoneSelector } from '@/components/TimezoneSelector';
 import { Participant, TimeSlot } from '@/types/calendar';
@@ -89,6 +90,7 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
   const [availabilitySlots, setAvailabilitySlots] = useState<TimeSlot[]>([]);
   const [selectedSlot, setSelectedSlot] = useState<TimeSlot | null>(null);
   const [isModalOpen, setIsModalOpen] = useState(false);
+  const [useRedesign, setUseRedesign] = useState(false);
   const [settings, setSettings] = useState<SettingsState>(defaultSettings);
   const [weekOffset, setWeekOffset] = useState(0);
   const [isLoading, setIsLoading] = useState(false);
@@ -323,6 +325,18 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
                     <PopoverContent className="w-80" align="end">
                       <div className="space-y-4">
                         <h4 className="font-medium">Settings</h4>
+
+                        <div className="flex items-center justify-between gap-4 pb-4 border-b border-border">
+                          <Label htmlFor="use-redesign" className="text-sm cursor-pointer font-medium text-primary">
+                            Try New Design
+                          </Label>
+                          <Switch
+                            id="use-redesign"
+                            checked={useRedesign}
+                            onCheckedChange={setUseRedesign}
+                          />
+                        </div>
+
                         <div className="flex items-center justify-between gap-4">
                           <Label htmlFor="partial-availability" className="text-sm cursor-pointer">
                             Show partial availability
@@ -436,18 +450,33 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
                     />
                   </div>
 
-                  <AvailabilityHeatmap
-                    slots={availabilitySlots}
-                    selectedParticipants={selectedParticipants}
-                    onSlotSelect={handleSlotSelect}
-                    showPartialAvailability={settings.showPartialAvailability}
-                    isLoading={isLoading}
-                    weekOffset={weekOffset}
-                    onWeekOffsetChange={setWeekOffset}
-                    displayTimezone={settings.displayTimezone}
-                    showSecondaryTimezone={settings.showSecondaryTimezone}
-                    secondaryTimezone={settings.secondaryTimezone}
-                  />
+                  {useRedesign ? (
+                    <AvailabilityHeatmapV2
+                      slots={availabilitySlots}
+                      selectedParticipants={selectedParticipants}
+                      onSlotSelect={handleSlotSelect}
+                      showPartialAvailability={settings.showPartialAvailability}
+                      isLoading={isLoading}
+                      weekOffset={weekOffset}
+                      onWeekOffsetChange={setWeekOffset}
+                      displayTimezone={settings.displayTimezone}
+                      showSecondaryTimezone={settings.showSecondaryTimezone}
+                      secondaryTimezone={settings.secondaryTimezone}
+                    />
+                  ) : (
+                    <AvailabilityHeatmap
+                      slots={availabilitySlots}
+                      selectedParticipants={selectedParticipants}
+                      onSlotSelect={handleSlotSelect}
+                      showPartialAvailability={settings.showPartialAvailability}
+                      isLoading={isLoading}
+                      weekOffset={weekOffset}
+                      onWeekOffsetChange={setWeekOffset}
+                      displayTimezone={settings.displayTimezone}
+                      showSecondaryTimezone={settings.showSecondaryTimezone}
+                      secondaryTimezone={settings.secondaryTimezone}
+                    />
+                  )}
                 </>
               )}
             </div>