Update reminder settings to use dropdown time picker

src/components/ReminderSettingsCard.tsx

@@ -1,15 +1,21 @@
 'use client';
 
-import { useState } from 'react';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
-import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { ReminderSettings } from '@/lib/storage';
 import { useNotifications } from '@/hooks/useNotifications';
 import { useTheme } from '@/lib/theme-context';
 import { Bell, BellOff, BellRing, Check, X } from 'lucide-react';
 
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select';
+
 interface ReminderSettingsCardProps {
   settings: ReminderSettings;
   onSettingsChange: (settings: ReminderSettings) => void;
@@ -21,7 +27,14 @@ export function ReminderSettingsCard({
 }: ReminderSettingsCardProps) {
   const { theme } = useTheme();
   const { isSupported, permission, requestPermission } = useNotifications(settings);
-  const [localTime, setLocalTime] = useState(settings.reminderTime);
+
+  // Parse current time for initial state
+  const [hours, minutes] = settings.reminderTime.split(':').map(Number);
+  const currentAmpm = hours >= 12 ? 'PM' : 'AM';
+  const currentHour12 = hours % 12 || 12; // Convert 0 -> 12, 13 -> 1, etc.
+
+  const hourString = currentHour12.toString().padStart(2, '0');
+  const minuteString = minutes.toString().padStart(2, '0');
 
   const handleToggle = async () => {
     if (!settings.enabled && permission !== 'granted') {
@@ -35,11 +48,16 @@ export function ReminderSettingsCard({
     });
   };
 
-  const handleTimeChange = (newTime: string) => {
-    setLocalTime(newTime);
+  const updateTime = (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}`;
+
     onSettingsChange({
       ...settings,
-      reminderTime: newTime,
+      reminderTime: timeString,
     });
   };
 
@@ -57,6 +75,10 @@ export function ReminderSettingsCard({
 
   const permissionStatus = getPermissionStatus();
 
+  // 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'));
+
   return (
     <Card
       className="backdrop-blur-xl border border-indigo-500/40 shadow-xl drop-shadow-lg hover-lift transition-all duration-300 overflow-hidden relative"
@@ -95,13 +117,11 @@ export function ReminderSettingsCard({
           <button
             onClick={handleToggle}
             disabled={!isSupported || permission === 'denied'}
-            className={`relative w-12 h-6 rounded-full transition-all duration-300 ${
-              settings.enabled ? 'bg-indigo-500' : 'bg-white/20'
+            className={`relative w-12 h-6 rounded-full transition-all duration-300 ${settings.enabled ? 'bg-indigo-500' : 'bg-white/20'
               } ${!isSupported || permission === 'denied' ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer'}`}
           >
             <div
-              className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all duration-300 ${
-                settings.enabled ? 'left-7' : 'left-1'
+              className={`absolute top-1 w-4 h-4 rounded-full bg-white transition-all duration-300 ${settings.enabled ? 'left-7' : 'left-1'
                 }`}
             />
           </button>
@@ -110,16 +130,65 @@ export function ReminderSettingsCard({
         {/* Time Picker */}
         {settings.enabled && (
           <div className="space-y-2">
-            <Label htmlFor="reminderTime" className="text-white/70 text-sm">
+            <Label className="text-white/70 text-sm">
               Reminder Time
             </Label>
-            <Input
-              id="reminderTime"
-              type="time"
-              value={localTime}
-              onChange={(e) => handleTimeChange(e.target.value)}
-              className="bg-white/10 border-white/20 text-white"
-            />
+            <div className="flex gap-2">
+              {/* Hour Select */}
+              <div className="flex-1">
+                <Select
+                  value={hourString}
+                  onValueChange={(val) => updateTime(val, minuteString, currentAmpm)}
+                >
+                  <SelectTrigger className="bg-white/10 border-white/20 text-white">
+                    <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="bg-white/10 border-white/20 text-white">
+                    <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="bg-white/10 border-white/20 text-white">
+                    <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-white/50">
               You&apos;ll receive a reminder at this time each day
             </p>