Update UserHeader with dropdown time picker and fix imports

src/components/UserHeader.tsx

@@ -14,6 +14,13 @@ import {
   DialogHeader,
   DialogTitle,
 } from '@/components/ui/dialog';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Button } from '@/components/ui/button';
@@ -41,6 +48,30 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
   const { theme, toggleTheme } = useTheme();
   const { isSupported, permission, requestPermission } = useNotifications(reminderSettings);
 
+  // Helper to parse time string
+  const [parsedHours, parsedMinutes] = reminderSettings.reminderTime.split(':').map(Number);
+  const currentAmpm = parsedHours >= 12 ? 'PM' : 'AM';
+  const currentHour12 = parsedHours % 12 || 12;
+  const hourString = currentHour12.toString().padStart(2, '0');
+  const minuteString = parsedMinutes.toString().padStart(2, '0');
+
+  const updateTime = async (newHourStr: string, newMinuteStr: string, newAmpmStr: string) => {
+    let h = parseInt(newHourStr);
+    if (newAmpmStr === 'PM' && h !== 12) h += 12;
+    if (newAmpmStr === 'AM' && h === 12) h = 0;
+
+    const timeString = `${h.toString().padStart(2, '0')}:${newMinuteStr}`;
+    setLocalTime(timeString);
+
+    const newSettings = { ...reminderSettings, reminderTime: timeString };
+    setReminderSettings(newSettings);
+    await saveReminderSettings(newSettings);
+  };
+
+  // Generate options
+  const hoursOptions = Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0'));
+  const minutesOptions = Array.from({ length: 12 }, (_, i) => (i * 5).toString().padStart(2, '0'));
+
   useEffect(() => {
     const loadData = async () => {
       // If preferences passed from parent, use them. Otherwise fetch.
@@ -71,12 +102,7 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
     await saveReminderSettings(newSettings);
   };
 
-  const handleTimeChange = async (newTime: string) => {
-    setLocalTime(newTime);
-    const newSettings = { ...reminderSettings, reminderTime: newTime };
-    setReminderSettings(newSettings);
-    await saveReminderSettings(newSettings);
-  };
+
 
   const handleFrequencyChange = async (newFrequency: 'daily' | 'hourly') => {
     setLocalFrequency(newFrequency);
@@ -313,15 +339,64 @@ export function UserHeader({ user, preferences }: UserHeaderProps) {
               {/* Time Picker (Only for Daily) */}
               {reminderSettings.enabled && localFrequency === 'daily' && (
                 <div className="space-y-2">
-                  <Label htmlFor="reminderTime" className="text-sm">
+                  <Label className="text-sm">
                     Reminder Time
                   </Label>
-                  <Input
-                    id="reminderTime"
-                    type="time"
-                    value={localTime}
-                    onChange={(e) => handleTimeChange(e.target.value)}
-                  />
+                  <div className="flex gap-2">
+                    {/* Hour Select */}
+                    <div className="flex-1">
+                      <Select
+                        value={hourString}
+                        onValueChange={(val) => updateTime(val, minuteString, currentAmpm)}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Hour" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {hoursOptions.map((h) => (
+                            <SelectItem key={h} value={h}>
+                              {h}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* Minute Select */}
+                    <div className="flex-1">
+                      <Select
+                        value={minuteString}
+                        onValueChange={(val) => updateTime(hourString, val, currentAmpm)}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="Min" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {minutesOptions.map((m) => (
+                            <SelectItem key={m} value={m}>
+                              {m}
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* AM/PM Select */}
+                    <div className="w-24">
+                      <Select
+                        value={currentAmpm}
+                        onValueChange={(val) => updateTime(hourString, minuteString, val)}
+                      >
+                        <SelectTrigger className="w-full">
+                          <SelectValue placeholder="AM/PM" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          <SelectItem value="AM">AM</SelectItem>
+                          <SelectItem value="PM">PM</SelectItem>
+                        </SelectContent>
+                      </Select>
+                    </div>
+                  </div>
                   <p className="text-xs text-muted-foreground">
                     You&apos;ll receive a reminder at this time each day
                   </p>