feat: UX

frontend/src/components/ScheduleModal.tsx

@@ -0,0 +1,132 @@
+import { useState } from 'react';
+import { TimeSlot, Participant } from '@/types/calendar';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+import { toast } from '@/hooks/use-toast';
+import { Calendar, Clock, Users, Send } from 'lucide-react';
+
+interface ScheduleModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  slot: TimeSlot | null;
+  participants: Participant[];
+}
+
+export const ScheduleModal = ({
+  isOpen,
+  onClose,
+  slot,
+  participants,
+}: ScheduleModalProps) => {
+  const [title, setTitle] = useState('');
+  const [notes, setNotes] = useState('');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const formatHour = (hour: number) => {
+    return `${hour.toString().padStart(2, '0')}:00`;
+  };
+
+  const handleSubmit = () => {
+    if (!title.trim()) {
+      toast({
+        title: "Please enter a meeting title",
+        variant: "destructive",
+      });
+      return;
+    }
+
+    setIsSubmitting(true);
+
+    // Simulate API call
+    setTimeout(() => {
+      setIsSubmitting(false);
+      toast({
+        title: "Meeting scheduled",
+        description: "Invitations sent to all participants",
+      });
+      setTitle('');
+      setNotes('');
+      onClose();
+    }, 1000);
+  };
+
+  if (!slot) return null;
+
+  return (
+    <Dialog open={isOpen} onOpenChange={onClose}>
+      <DialogContent className="sm:max-w-md animate-scale-in">
+        <DialogHeader>
+          <DialogTitle className="text-xl font-semibold">Schedule Meeting</DialogTitle>
+        </DialogHeader>
+
+        <div className="space-y-6 pt-4">
+          {/* Time Info */}
+          <div className="bg-accent/50 rounded-lg p-4 space-y-3">
+            <div className="flex items-center gap-3 text-sm">
+              <Calendar className="w-4 h-4 text-primary" />
+              <span className="font-medium">{slot.day}</span>
+            </div>
+            <div className="flex items-center gap-3 text-sm">
+              <Clock className="w-4 h-4 text-primary" />
+              <span>{formatHour(slot.hour)} – {formatHour(slot.hour + 1)}</span>
+            </div>
+            <div className="flex items-center gap-3 text-sm">
+              <Users className="w-4 h-4 text-primary" />
+              <span>{participants.map(p => p.name.split(' ')[0]).join(', ')}</span>
+            </div>
+          </div>
+
+          {/* Form */}
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <Label htmlFor="title">Meeting Title</Label>
+              <Input
+                id="title"
+                placeholder="Team Sync"
+                value={title}
+                onChange={(e) => setTitle(e.target.value)}
+                className="h-12"
+              />
+            </div>
+
+            <div className="space-y-2">
+              <Label htmlFor="notes">Notes (optional)</Label>
+              <Textarea
+                id="notes"
+                placeholder="Add any notes or agenda items..."
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+                rows={3}
+              />
+            </div>
+          </div>
+
+          {/* Actions */}
+          <Button
+            variant="schedule"
+            className="w-full h-12"
+            onClick={handleSubmit}
+            disabled={isSubmitting}
+          >
+            {isSubmitting ? (
+              <span className="animate-pulse">Sending...</span>
+            ) : (
+              <>
+                <Send className="w-4 h-4" />
+                Send Invites
+              </>
+            )}
+          </Button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};