From 82cb5608c128b2a66ab1a7e7b8bc3633ed7f8d9a Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Wed, 12 Nov 2025 15:07:43 +0000
Subject: [PATCH] =?UTF-8?q?Fix:=20Correction=20modal=20ajout=20RDV=20et=20?=
 =?UTF-8?q?r=C3=A9organisation=20layout?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Corrections :

1. Bug modal ajout de rendez-vous :
   - Remplacement des composants Select par des éléments select natifs
   - Les composants shadcn/ui Select ne fonctionnaient pas avec FormData
   - Le modal affichait une page blanche à cause de ce problème
   - Maintenant le formulaire fonctionne correctement

2. Réorganisation du layout :
   - Box Todo et RSS maintenant côte à côte (au lieu d'empilées)
   - Largeur de la colonne droite passée de 380px à 760px
   - Grid à 2 colonnes dans la partie droite
   - Hauteur augmentée : max-h-[calc(100vh-300px)] pour les deux boxes
   - Plus d'espace pour afficher les tâches et articles

3. Amélioration affichage RSS :
   - Suppression de la rotation automatique toutes les 20s
   - Affichage de tous les articles (15) avec scroll
   - Suppression de l'état rssDisplayOffset inutile
   - Suppression du useEffect de rotation
   - Meilleure utilisation de l'espace vertical disponible
---
 src/pages/Index.tsx | 159 +++++++++++++++++++-------------------------
 1 file changed, 68 insertions(+), 91 deletions(-)

diff --git a/src/pages/Index.tsx b/src/pages/Index.tsx
index f14814d..91555b3 100644
--- a/src/pages/Index.tsx
+++ b/src/pages/Index.tsx
@@ -56,7 +56,6 @@ const Index = () => {
   const [loadingModels, setLoadingModels] = useState(false);
   const [currentDateTime, setCurrentDateTime] = useState(new Date());
   const [upcomingAlert, setUpcomingAlert] = useState<CalendarEvent | null>(null);
-  const [rssDisplayOffset, setRssDisplayOffset] = useState(0);
   const [calendarAuthStatus, setCalendarAuthStatus] = useState<{
     isAuthenticated: boolean;
     isExpired: boolean;
@@ -111,18 +110,6 @@ const Index = () => {
     return () => clearInterval(timer);
   }, [calendarEvents]);
 
-  // RSS articles rotation every 20 seconds
-  useEffect(() => {
-    if (rssArticles.length > 3) {
-      const timer = setInterval(() => {
-        setRssDisplayOffset(prev => {
-          const maxOffset = Math.max(0, rssArticles.length - 3);
-          return (prev + 3) % (maxOffset + 3);
-        });
-      }, 20000); // Rotate every 20 seconds
-      return () => clearInterval(timer);
-    }
-  }, [rssArticles.length]);
 
   useEffect(() => {
     const userFromAuth = AuthService.getUser();
@@ -702,8 +689,8 @@ const Index = () => {
 
       {/* Main Content */}
       <div className="max-w-[1920px] mx-auto px-8 py-8">
-        {/* Three Column Layout: Calendar Left | Notes Middle | Todo/RSS Right */}
-        <div className="grid grid-cols-[300px,1fr,380px] gap-6">
+        {/* Three Column Layout: Calendar Left | Notes Middle | Todo+RSS Right */}
+        <div className="grid grid-cols-[300px,1fr,760px] gap-6">
           {/* Left Column: Calendar */}
           <div className="space-y-6">
             <Card className="shadow-lg">
@@ -1192,8 +1179,8 @@ const Index = () => {
             )}
           </div>
 
-          {/* Right Column: Todos & RSS Boxes stacked */}
-          <div className="space-y-6 h-fit sticky top-24">
+          {/* Right Column: Todos & RSS Boxes side by side */}
+          <div className="grid grid-cols-2 gap-6">
           {/* Todos Box */}
           <Card className="shadow-lg">
             <CardHeader className="pb-3">
@@ -1215,7 +1202,7 @@ const Index = () => {
                 </TabsList>
 
                 <TabsContent value="active" className="mt-0">
-                  <div className="space-y-1.5 max-h-[350px] overflow-y-auto">
+                  <div className="space-y-1.5 max-h-[calc(100vh-300px)] overflow-y-auto">
                     {todos.filter(t => !t.completed).length > 0 ? (
                       todos.filter(t => !t.completed).map(todo => (
                         <div key={todo.id} className="flex items-center gap-2 p-2 border rounded hover:bg-accent/50 transition-colors group">
@@ -1244,7 +1231,7 @@ const Index = () => {
                 </TabsContent>
 
                 <TabsContent value="completed" className="mt-0">
-                  <div className="space-y-1.5 max-h-[350px] overflow-y-auto">
+                  <div className="space-y-1.5 max-h-[calc(100vh-300px)] overflow-y-auto">
                     {todos.filter(t => t.completed).length > 0 ? (
                       todos.filter(t => t.completed).map(todo => (
                         <div key={todo.id} className="flex items-center gap-2 p-2 border rounded hover:bg-accent/50 transition-colors group">
@@ -1294,9 +1281,9 @@ const Index = () => {
               </div>
             </CardHeader>
             <CardContent>
-              <div className="space-y-2">
+              <div className="space-y-2 max-h-[calc(100vh-300px)] overflow-y-auto">
                 {rssArticles.length > 0 ? (
-                  rssArticles.slice(rssDisplayOffset, rssDisplayOffset + 3).map(article => (
+                  rssArticles.map(article => (
                     <div
                       key={article.id}
                       className="p-2.5 border rounded hover:bg-accent/50 transition-colors cursor-pointer"
@@ -1328,20 +1315,6 @@ const Index = () => {
                     </Button>
                   </p>
                 )}
-                {rssArticles.length > 3 && (
-                  <div className="flex justify-center pt-2">
-                    <div className="flex gap-1">
-                      {Array.from({ length: Math.ceil(rssArticles.length / 3) }).map((_, i) => (
-                        <div
-                          key={i}
-                          className={`h-1.5 w-1.5 rounded-full transition-colors ${
-                            i === Math.floor(rssDisplayOffset / 3) ? 'bg-primary' : 'bg-muted'
-                          }`}
-                        />
-                      ))}
-                    </div>
-                  </div>
-                )}
               </div>
             </CardContent>
           </Card>
@@ -1954,6 +1927,9 @@ const Index = () => {
             const formData = new FormData(e.currentTarget);
 
             try {
+              const reminderMinutes = formData.get('reminderMinutes') as string;
+              const recurrenceValue = formData.get('recurrence') as string;
+
               const eventData = {
                 title: formData.get('title') as string,
                 description: formData.get('description') as string || undefined,
@@ -1961,10 +1937,10 @@ const Index = () => {
                 endDateTime: new Date(formData.get('endDateTime') as string).toISOString(),
                 location: formData.get('location') as string || undefined,
                 attendees: (formData.get('attendees') as string || '').split(',').map(e => e.trim()).filter(e => e),
-                reminders: formData.get('reminderMinutes') ? [
-                  { method: 'popup', minutes: parseInt(formData.get('reminderMinutes') as string) }
+                reminders: reminderMinutes && reminderMinutes !== '0' ? [
+                  { method: 'popup', minutes: parseInt(reminderMinutes) }
                 ] : undefined,
-                recurrence: formData.get('recurrence') ? [formData.get('recurrence') as string] : undefined,
+                recurrence: recurrenceValue ? [recurrenceValue] : undefined,
                 visibility: formData.get('visibility') as string || 'default',
                 colorId: formData.get('colorId') as string || undefined
               };
@@ -1973,6 +1949,7 @@ const Index = () => {
               showSuccess('Événement créé avec succès');
               setAddEventModal(false);
               await loadCalendarEvents();
+              e.currentTarget.reset();
             } catch (error: any) {
               showError(error.response?.data?.error || 'Erreur lors de la création de l\'événement');
             }
@@ -2032,71 +2009,71 @@ const Index = () => {
 
             <div className="space-y-2">
               <Label htmlFor="reminderMinutes">Rappel (minutes avant)</Label>
-              <Select name="reminderMinutes" defaultValue="30">
-                <SelectTrigger>
-                  <SelectValue placeholder="Sélectionner un rappel" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="0">Aucun</SelectItem>
-                  <SelectItem value="10">10 minutes</SelectItem>
-                  <SelectItem value="30">30 minutes</SelectItem>
-                  <SelectItem value="60">1 heure</SelectItem>
-                  <SelectItem value="1440">1 jour</SelectItem>
-                </SelectContent>
-              </Select>
+              <select
+                id="reminderMinutes"
+                name="reminderMinutes"
+                className="w-full h-10 px-3 py-2 border border-input rounded-md bg-background"
+                defaultValue="30"
+              >
+                <option value="0">Aucun</option>
+                <option value="10">10 minutes</option>
+                <option value="30">30 minutes</option>
+                <option value="60">1 heure</option>
+                <option value="1440">1 jour</option>
+              </select>
             </div>
 
             <div className="space-y-2">
               <Label htmlFor="recurrence">Récurrence</Label>
-              <Select name="recurrence" defaultValue="">
-                <SelectTrigger>
-                  <SelectValue placeholder="Pas de récurrence" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="">Pas de récurrence</SelectItem>
-                  <SelectItem value="RRULE:FREQ=DAILY">Tous les jours</SelectItem>
-                  <SelectItem value="RRULE:FREQ=WEEKLY">Toutes les semaines</SelectItem>
-                  <SelectItem value="RRULE:FREQ=MONTHLY">Tous les mois</SelectItem>
-                  <SelectItem value="RRULE:FREQ=YEARLY">Tous les ans</SelectItem>
-                </SelectContent>
-              </Select>
+              <select
+                id="recurrence"
+                name="recurrence"
+                className="w-full h-10 px-3 py-2 border border-input rounded-md bg-background"
+                defaultValue=""
+              >
+                <option value="">Pas de récurrence</option>
+                <option value="RRULE:FREQ=DAILY">Tous les jours</option>
+                <option value="RRULE:FREQ=WEEKLY">Toutes les semaines</option>
+                <option value="RRULE:FREQ=MONTHLY">Tous les mois</option>
+                <option value="RRULE:FREQ=YEARLY">Tous les ans</option>
+              </select>
             </div>
 
             <div className="space-y-2">
               <Label htmlFor="visibility">Visibilité</Label>
-              <Select name="visibility" defaultValue="default">
-                <SelectTrigger>
-                  <SelectValue placeholder="Sélectionner la visibilité" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="default">Par défaut</SelectItem>
-                  <SelectItem value="public">Public</SelectItem>
-                  <SelectItem value="private">Privé</SelectItem>
-                </SelectContent>
-              </Select>
+              <select
+                id="visibility"
+                name="visibility"
+                className="w-full h-10 px-3 py-2 border border-input rounded-md bg-background"
+                defaultValue="default"
+              >
+                <option value="default">Par défaut</option>
+                <option value="public">Public</option>
+                <option value="private">Privé</option>
+              </select>
             </div>
 
             <div className="space-y-2">
               <Label htmlFor="colorId">Couleur</Label>
-              <Select name="colorId" defaultValue="">
-                <SelectTrigger>
-                  <SelectValue placeholder="Couleur par défaut" />
-                </SelectTrigger>
-                <SelectContent>
-                  <SelectItem value="">Par défaut</SelectItem>
-                  <SelectItem value="1">Lavande</SelectItem>
-                  <SelectItem value="2">Sauge</SelectItem>
-                  <SelectItem value="3">Raisin</SelectItem>
-                  <SelectItem value="4">Flamant rose</SelectItem>
-                  <SelectItem value="5">Banane</SelectItem>
-                  <SelectItem value="6">Mandarine</SelectItem>
-                  <SelectItem value="7">Paon</SelectItem>
-                  <SelectItem value="8">Graphite</SelectItem>
-                  <SelectItem value="9">Myrtille</SelectItem>
-                  <SelectItem value="10">Basilic</SelectItem>
-                  <SelectItem value="11">Tomate</SelectItem>
-                </SelectContent>
-              </Select>
+              <select
+                id="colorId"
+                name="colorId"
+                className="w-full h-10 px-3 py-2 border border-input rounded-md bg-background"
+                defaultValue=""
+              >
+                <option value="">Par défaut</option>
+                <option value="1">Lavande</option>
+                <option value="2">Sauge</option>
+                <option value="3">Raisin</option>
+                <option value="4">Flamant rose</option>
+                <option value="5">Banane</option>
+                <option value="6">Mandarine</option>
+                <option value="7">Paon</option>
+                <option value="8">Graphite</option>
+                <option value="9">Myrtille</option>
+                <option value="10">Basilic</option>
+                <option value="11">Tomate</option>
+              </select>
             </div>
 
             <div className="flex justify-end gap-2 pt-4">