calendar 15

components/calendar/calendar-client.tsx

@@ -90,6 +90,8 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [customColorMode, setCustomColorMode] = useState(false);
   
+  const isMainCalendar = initialData?.name === "Calendrier principal";
+  
   useEffect(() => {
     if (open) {
       setName(initialData?.name || "");
@@ -119,7 +121,11 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
   };
 
   const handleDelete = async () => {
-    if (!initialData?.id || !onDelete) return;
+    if (!initialData?.id || !onDelete || isMainCalendar) return;
+    
+    if (!confirm("Êtes-vous sûr de vouloir supprimer ce calendrier ? Tous les événements associés seront également supprimés.")) {
+      return;
+    }
     
     setIsSubmitting(true);
     try {
@@ -160,6 +166,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
                 onChange={(e) => setName(e.target.value)}
                 placeholder="Nom du calendrier"
                 required
+                disabled={isMainCalendar}
                 className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500"
               />
             </div>
@@ -245,12 +252,12 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
 
           <DialogFooter className="mt-6 border-t border-gray-100 pt-4">
             <div className="flex justify-between w-full">
-              {initialData?.id && (
+              {initialData?.id && !isMainCalendar && (
                 <Button
                   type="button"
                   variant="destructive"
                   onClick={handleDelete}
-                  disabled={isSubmitting}
+                  disabled={isSubmitting || isMainCalendar}
                 >
                   <X className="w-4 h-4 mr-2" />
                   Supprimer
@@ -268,7 +275,7 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
                 </Button>
                 <Button 
                   type="submit" 
-                  disabled={!name || isSubmitting}
+                  disabled={!name || isSubmitting || isMainCalendar}
                   className="rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white"
                 >
                   {isSubmitting 
@@ -653,20 +660,35 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
 
   // Add a calendar selector component
   const CalendarSelector = () => (
-    <div className="flex items-center gap-4 mb-4">
+    <div className="flex flex-wrap items-center gap-2 mb-4">
       {calendars.map((calendar) => (
-        <Button
-          key={calendar.id}
-          variant={calendar.id === selectedCalendarId ? "secondary" : "ghost"}
-          className="flex items-center gap-2"
-          onClick={() => setSelectedCalendarId(calendar.id)}
-        >
-          <div 
-            className="w-3 h-3 rounded-full" 
-            style={{ backgroundColor: calendar.color }}
-          />
-          <span>{calendar.name}</span>
-        </Button>
+        <div key={calendar.id} className="relative group">
+          <Button
+            variant={calendar.id === selectedCalendarId ? "secondary" : "ghost"}
+            className="flex items-center gap-2 pr-8"
+            onClick={() => setSelectedCalendarId(calendar.id)}
+          >
+            <div 
+              className="w-3 h-3 rounded-full" 
+              style={{ backgroundColor: calendar.color }}
+            />
+            <span>{calendar.name}</span>
+          </Button>
+          {calendar.name !== "Calendrier principal" && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
+              onClick={(e) => {
+                e.stopPropagation();
+                setSelectedCalendar(calendar);
+                setIsCalendarModalOpen(true);
+              }}
+            >
+              <Settings className="h-4 w-4" />
+            </Button>
+          )}
+        </div>
       ))}
     </div>
   );