improve timezone discovery

2026-01-28 15:31:30 -05:00
parent 880925f30d
commit 117b28c2e9
3 changed files with 16 additions and 69 deletions
--- 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>
                              );
--- 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
--- 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}
                  />
                </>
              )}