From 117b28c2e95200d9fb7c2a8bf12a3f930ac83bd3 Mon Sep 17 00:00:00 2001
From: Joyce <26967919+Joyce-O@users.noreply.github.com>
Date: Wed, 28 Jan 2026 15:31:30 -0500
Subject: [PATCH] improve timezone discovery

---
 .../src/components/AvailabilityHeatmap.tsx    | 33 ++-----------
 .../src/components/ParticipantManager.tsx     | 47 +++++--------------
 frontend/src/pages/Index.tsx                  |  5 --
 3 files changed, 16 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/AvailabilityHeatmap.tsx b/frontend/src/components/AvailabilityHeatmap.tsx
index b6c83d1..399ff88 100644
--- a/frontend/src/components/AvailabilityHeatmap.tsx
+++ b/frontend/src/components/AvailabilityHeatmap.tsx
@@ -7,7 +7,8 @@ import {
 } from '@/components/ui/popover';
 import { Button } from '@/components/ui/button';
 import { Check, X, Loader2 } from 'lucide-react';
-import { TimezoneSelector } from '@/components/TimezoneSelector';
+
+const TIMEZONE = 'America/Toronto';
 
 const dayNames = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'];
 const hours = [9, 10, 11, 12, 13, 14, 15, 16, 17];
@@ -78,8 +79,6 @@ interface AvailabilityHeatmapProps {
   onSlotSelect: (slot: TimeSlot) => void;
   showPartialAvailability?: boolean;
   isLoading?: boolean;
-  displayTimezone: string;
-  onTimezoneChange: (timezone: string) => void;
 }
 
 export const AvailabilityHeatmap = ({
@@ -88,15 +87,13 @@ export const AvailabilityHeatmap = ({
   onSlotSelect,
   showPartialAvailability = false,
   isLoading = false,
-  displayTimezone,
-  onTimezoneChange,
 }: AvailabilityHeatmapProps) => {
-  const weekDates = getWeekDates(displayTimezone);
+  const weekDates = getWeekDates(TIMEZONE);
 
   // Find a slot that matches the given display timezone date/hour
   const getSlot = (dateStr: string, hour: number): TimeSlot | undefined => {
     // Convert display timezone date/hour to UTC
-    const targetUTC = toUTCDate(dateStr, hour, displayTimezone);
+    const targetUTC = toUTCDate(dateStr, hour, TIMEZONE);
 
     return slots.find((s) => {
       const slotDate = new Date(s.start_time);
@@ -118,7 +115,7 @@ export const AvailabilityHeatmap = ({
 
   const isSlotTooSoon = (dateStr: string, hour: number) => {
     // Convert to UTC and compare with current time
-    const slotTimeUTC = toUTCDate(dateStr, hour, displayTimezone);
+    const slotTimeUTC = toUTCDate(dateStr, hour, TIMEZONE);
     const now = new Date();
     const twoHoursFromNow = new Date(now.getTime() + 2 * 60 * 60 * 1000);
     return slotTimeUTC < twoHoursFromNow;
@@ -177,10 +174,6 @@ export const AvailabilityHeatmap = ({
             {selectedParticipants.length} participant{selectedParticipants.length > 1 ? 's' : ''}: {selectedParticipants.map(p => p.name.split(' ')[0]).join(', ')}
           </p>
         </div>
-        <TimezoneSelector
-          value={displayTimezone}
-          onChange={onTimezoneChange}
-        />
       </div>
 
       <div className="overflow-x-auto">
@@ -242,19 +235,6 @@ export const AvailabilityHeatmap = ({
                             {selectedParticipants.map((participant) => {
                               const isAvailable = slot.availableParticipants.includes(participant.name);
 
-                              // Calculate participant's local time for this slot
-                              let participantTime = '';
-                              try {
-                                const slotDate = new Date(slot.start_time);
-                                participantTime = new Intl.DateTimeFormat('en-US', {
-                                  hour: 'numeric',
-                                  minute: 'numeric',
-                                  timeZone: participant.timezone,
-                                }).format(slotDate);
-                              } catch (e) {
-                                // Fallback if timezone is invalid
-                              }
-
                               return (
                                 <div
                                   key={participant.id}
@@ -269,9 +249,6 @@ export const AvailabilityHeatmap = ({
                                     isAvailable ? "text-foreground" : "text-muted-foreground"
                                   )}>
                                     {participant.name.split(' ')[0]}
-                                    <span className="opacity-70 ml-1">
-                                      ({participantTime || '?'})
-                                    </span>
                                   </span>
                                 </div>
                               );
diff --git a/frontend/src/components/ParticipantManager.tsx b/frontend/src/components/ParticipantManager.tsx
index e22418a..058b032 100644
--- a/frontend/src/components/ParticipantManager.tsx
+++ b/frontend/src/components/ParticipantManager.tsx
@@ -6,7 +6,6 @@ import { Label } from '@/components/ui/label';
 import { UserPlus, Trash2, User, Pencil, Check, X, AlertCircle } from 'lucide-react';
 import { useToast } from '@/hooks/use-toast';
 import { getAvatarColor } from '@/lib/utils';
-import { TimezoneSelector } from '@/components/TimezoneSelector';
 
 interface ParticipantManagerProps {
   participants: Participant[];
@@ -23,12 +22,10 @@ export const ParticipantManager = ({
 }: ParticipantManagerProps) => {
   const [name, setName] = useState('');
   const [email, setEmail] = useState('');
-  const [timezone, setTimezone] = useState('America/Toronto');
   const [icsLink, setIcsLink] = useState('');
 
   // Edit state
   const [editingId, setEditingId] = useState<string | null>(null);
-  const [editTimezone, setEditTimezone] = useState('');
   const [editIcsLink, setEditIcsLink] = useState('');
   const [isUpdating, setIsUpdating] = useState(false);
 
@@ -49,7 +46,7 @@ export const ParticipantManager = ({
     onAddParticipant({
       name: name.trim(),
       email: email.trim(),
-      timezone: timezone.trim() || 'America/Toronto',
+      timezone: 'America/Toronto',
       icsLink: icsLink.trim() || ''
     });
     setName('');
@@ -64,13 +61,11 @@ export const ParticipantManager = ({
 
   const startEditing = (participant: Participant) => {
     setEditingId(participant.id);
-    setEditTimezone(participant.timezone);
     setEditIcsLink(participant.icsLink || '');
   };
 
   const cancelEditing = () => {
     setEditingId(null);
-    setEditTimezone('');
     setEditIcsLink('');
   };
 
@@ -80,7 +75,6 @@ export const ParticipantManager = ({
     setIsUpdating(true);
     try {
       await onUpdateParticipant(participantId, {
-        timezone: editTimezone,
         ics_url: editIcsLink || undefined,
       });
       toast({
@@ -118,7 +112,7 @@ export const ParticipantManager = ({
         </h3>
 
         <form onSubmit={handleSubmit} className="space-y-4">
-          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
             <div className="space-y-2">
               <Label htmlFor="name">Name</Label>
               <Input
@@ -142,14 +136,6 @@ export const ParticipantManager = ({
               />
             </div>
 
-            <div className="space-y-2">
-              <Label>Timezone</Label>
-              <TimezoneSelector
-                value={timezone}
-                onChange={setTimezone}
-              />
-            </div>
-
             <div className="space-y-2">
               <Label htmlFor="icsLink">Calendar ICS Link</Label>
               <Input
@@ -203,24 +189,15 @@ export const ParticipantManager = ({
                       </div>
                     </div>
 
-                    <div className="grid gap-4 sm:grid-cols-2">
-                      <div className="space-y-2">
-                        <Label>Timezone</Label>
-                        <TimezoneSelector
-                          value={editTimezone}
-                          onChange={setEditTimezone}
-                        />
-                      </div>
-                      <div className="space-y-2">
-                        <Label htmlFor={`edit-ics-${participant.id}`}>Calendar ICS Link</Label>
-                        <Input
-                          id={`edit-ics-${participant.id}`}
-                          value={editIcsLink}
-                          onChange={(e) => setEditIcsLink(e.target.value)}
-                          placeholder="https://..."
-                          className="bg-card"
-                        />
-                      </div>
+                    <div className="space-y-2">
+                      <Label htmlFor={`edit-ics-${participant.id}`}>Calendar ICS Link</Label>
+                      <Input
+                        id={`edit-ics-${participant.id}`}
+                        value={editIcsLink}
+                        onChange={(e) => setEditIcsLink(e.target.value)}
+                        placeholder="https://..."
+                        className="bg-card"
+                      />
                     </div>
 
                     <div className="flex gap-2">
@@ -258,8 +235,6 @@ export const ParticipantManager = ({
                         <div className="text-sm text-muted-foreground flex flex-wrap gap-x-2">
                           <span>{participant.email}</span>
                           <span className="text-muted-foreground/60">•</span>
-                          <span>{participant.timezone}</span>
-                          <span className="text-muted-foreground/60">•</span>
                           {participant.icsLink ? (
                             <span className="text-primary truncate max-w-[200px]" title={participant.icsLink}>
                               ICS linked
diff --git a/frontend/src/pages/Index.tsx b/frontend/src/pages/Index.tsx
index 02f8b9a..b1f86ef 100644
--- a/frontend/src/pages/Index.tsx
+++ b/frontend/src/pages/Index.tsx
@@ -64,9 +64,6 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
   const [settings, setSettings] = useState<SettingsState>(defaultSettings);
   const [isLoading, setIsLoading] = useState(false);
   const [isSyncing, setIsSyncing] = useState(false);
-  const [displayTimezone, setDisplayTimezone] = useState(
-    Intl.DateTimeFormat().resolvedOptions().timeZone
-  );
   const { toast } = useToast();
 
   useEffect(() => {
@@ -328,8 +325,6 @@ const Index = ({ defaultTab = 'schedule' }: IndexProps) => {
                     onSlotSelect={handleSlotSelect}
                     showPartialAvailability={settings.showPartialAvailability}
                     isLoading={isLoading}
-                    displayTimezone={displayTimezone}
-                    onTimezoneChange={setDisplayTimezone}
                   />
                 </>
               )}