agenda form

app/agenda/page.tsx

@@ -62,7 +62,7 @@ export default async function CalendarPage() {
   if (calendars.length === 0) {
     const defaultCalendars = [
       {
-        name: "Default",
+        name: "Privée",
         color: "#4F46E5",
         description: "Your default calendar"
       }

components/calendar/calendar-client.tsx

@@ -174,7 +174,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
                 placeholder="Nom du calendrier"
                 required
                 disabled={isMainCalendar}
-                className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+                className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
               />
             </div>
 
@@ -252,7 +252,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
                 onChange={(e) => setDescription(e.target.value)}
                 placeholder="Description du calendrier"
                 rows={3}
-                className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
+                className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
               />
             </div>
           </div>
@@ -276,7 +276,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
                   variant="outline"
                   onClick={onClose}
                   disabled={isSubmitting}
-                  className="rounded-lg border-gray-300 text-gray-700 hover:bg-gray-50"
+                  className="rounded-lg border-gray-300 bg-gray-200 text-gray-700 hover:bg-gray-300"
                 >
                   Annuler
                 </Button>
@@ -813,14 +813,14 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
     }
   };
 
-  // Update CalendarSelector to handle visibility
+  // Update CalendarSelector to handle visibility - displayed as a left column
   const CalendarSelector = () => (
-    <div className="flex flex-wrap items-center gap-2 mb-4">
+    <div className="flex flex-col gap-2 mb-4">
       {calendars.map((calendar) => (
         <div key={calendar.id} className="relative group">
           <Button
             variant={visibleCalendarIds.includes(calendar.id) ? "secondary" : "ghost"}
-            className="flex items-center gap-2 pr-8"
+            className="flex items-center gap-2 pr-8 w-full justify-start"
             onClick={() => {
               if (visibleCalendarIds.includes(calendar.id)) {
                 setVisibleCalendarIds(visibleCalendarIds.filter(id => id !== calendar.id));
@@ -833,14 +833,14 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
               className="w-3 h-3 rounded-full" 
               style={{ backgroundColor: calendar.color }}
             />
-            <span>{calendar.name}</span>
+            <span>{calendar.name === "Default" ? "Privée" : calendar.name}</span>
-            <div className="ml-2">
+            <div className="ml-auto">
               {visibleCalendarIds.includes(calendar.id) ? (
                 <Check className="h-4 w-4" />
               ) : null}
             </div>
           </Button>
-          {calendar.name !== "Calendrier principal" && (
+          {calendar.name !== "Calendrier principal" && calendar.name !== "Default" && (
             <Button
               variant="ghost"
               size="icon"
@@ -916,56 +916,77 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
   };
 
   return (
-    <div className="space-y-4">
+    <div className="flex gap-4">
-      <Card className="p-4">
+      {/* Left column for calendars */}
-        <div className="flex items-center justify-between mb-4">
+      <div className="w-64 flex-shrink-0">
-          <div className="flex items-center gap-4">
+        <Card className="p-4">
-        <Button
+          <div className="flex items-center justify-between mb-4">
-          onClick={() => {
+            <h3 className="text-lg font-semibold text-gray-900">Calendriers</h3>
-            setSelectedEvent(null);
+            <Button
-                setEventForm({
+              onClick={() => {
-                  title: "",
+                setSelectedCalendar(null);
-                  description: null,
+                setIsCalendarModalOpen(true);
-                  start: new Date().toISOString(),
-                  end: new Date(new Date().setHours(new Date().getHours() + 1)).toISOString(),
-                  allDay: false,
-                  location: null,
-                  calendarId: selectedCalendarId
-                });
-                setIsEventModalOpen(true);
               }}
-              className="bg-primary hover:bg-primary/90 text-white"
+              size="sm"
+              variant="outline"
+              className="h-8"
             >
-              <Plus className="mr-2 h-4 w-4" />
+              <Plus className="h-4 w-4" />
-              <span className="font-medium">Nouvel événement</span>
+            </Button>
-        </Button>
+          </div>
+          <CalendarSelector />
+        </Card>
       </div>
 
-          <Tabs value={view} className="w-auto">
+      {/* Right column for calendar view */}
-            <TabsList>
+      <div className="flex-1">
-          <TabsTrigger
+        <Card className="p-4">
-                value="dayGridMonth"
+          <div className="flex items-center justify-between mb-4">
-            onClick={() => handleViewChange("dayGridMonth")}
+            <div className="flex items-center gap-4">
-          >
+          <Button
-            Mois
+            onClick={() => {
-          </TabsTrigger>
+              setSelectedEvent(null);
-          <TabsTrigger
+                  setEventForm({
-                value="timeGridWeek"
+                    title: "",
-            onClick={() => handleViewChange("timeGridWeek")}
+                    description: null,
-          >
+                    start: new Date().toISOString(),
-            Semaine
+                    end: new Date(new Date().setHours(new Date().getHours() + 1)).toISOString(),
-          </TabsTrigger>
+                    allDay: false,
-          <TabsTrigger
+                    location: null,
-                value="timeGridDay"
+                    calendarId: selectedCalendarId
-            onClick={() => handleViewChange("timeGridDay")}
+                  });
-          >
+                  setIsEventModalOpen(true);
-            Jour
+                }}
-          </TabsTrigger>
+                className="bg-primary hover:bg-primary/90 text-white"
-        </TabsList>
+              >
-          </Tabs>
+                <Plus className="mr-2 h-4 w-4" />
+                <span className="font-medium">Nouvel événement</span>
+          </Button>
         </div>
 
-        <CalendarSelector />
+            <Tabs value={view} className="w-auto">
+              <TabsList>
+            <TabsTrigger
+                  value="dayGridMonth"
+              onClick={() => handleViewChange("dayGridMonth")}
+            >
+              Mois
+            </TabsTrigger>
+            <TabsTrigger
+                  value="timeGridWeek"
+              onClick={() => handleViewChange("timeGridWeek")}
+            >
+              Semaine
+            </TabsTrigger>
+            <TabsTrigger
+                  value="timeGridDay"
+              onClick={() => handleViewChange("timeGridDay")}
+            >
+              Jour
+            </TabsTrigger>
+          </TabsList>
+            </Tabs>
+          </div>
 
         <style jsx global>{`
           /* Fixed height and scrolling for day cells only */
@@ -1136,6 +1157,7 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
             />
           )}
         </Card>
+      </div>
 
       {/* Calendar dialog */}
         <CalendarDialog