Agenda refactor

This commit is contained in:
alma 2026-01-15 18:40:22 +01:00
parent 82070fa033
commit 0f20ba724d

View File

@ -40,6 +40,13 @@ import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { fr } from "date-fns/locale";
@ -1941,51 +1948,41 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
<div className="space-y-2">
<Label className="text-base font-semibold text-gray-800">Calendrier</Label>
<ScrollArea className="max-h-64 border border-gray-200 rounded-lg">
<div className="space-y-1 p-2">
<Select
value={eventForm.calendarId || ""}
onValueChange={(value) => {
setEventForm(prev => ({
...prev,
calendarId: value
}));
}}
>
<SelectTrigger className="w-full bg-white text-gray-900">
<SelectValue placeholder="Sélectionner un calendrier" />
</SelectTrigger>
<SelectContent>
{getAvailableCalendars().map((cal) => {
const calWithMission = cal as CalendarWithMission;
const label = getCalendarDisplayName(calWithMission);
return (
<button
key={cal.id}
type="button"
onClick={() => {
setEventForm(prev => ({
...prev,
calendarId: cal.id
}));
}}
className={`w-full flex items-center gap-3 px-3 py-2.5 rounded-lg transition-all text-left ${
eventForm.calendarId === cal.id
? 'bg-blue-50 ring-2 ring-blue-500 border border-blue-200'
: 'bg-white hover:bg-gray-50 border border-gray-200'
}`}
>
<div
className="w-4 h-4 rounded-full flex-shrink-0"
style={{ backgroundColor: cal.color }}
/>
<span className={`text-sm flex-1 ${
eventForm.calendarId === cal.id
? 'font-medium text-gray-900'
: 'text-gray-700'
}`}>
{label}
</span>
{calWithMission.syncConfig?.syncEnabled && (
<Badge variant="outline" className="text-[10px] px-1.5 py-0.5 border-blue-400 text-blue-600 flex-shrink-0">
Sync
</Badge>
)}
{eventForm.calendarId === cal.id && (
<Check className="w-4 h-4 text-blue-600 flex-shrink-0" />
)}
</button>
<SelectItem key={cal.id} value={cal.id}>
<div className="flex items-center gap-2 w-full">
<div
className="w-3 h-3 rounded-full flex-shrink-0"
style={{ backgroundColor: cal.color }}
/>
<span className="flex-1">{label}</span>
{calWithMission.syncConfig?.syncEnabled && (
<Badge variant="outline" className="ml-1 text-[10px] px-1 py-0.5 border-blue-400 text-blue-600">
Sync
</Badge>
)}
</div>
</SelectItem>
);
})}
</div>
</ScrollArea>
</SelectContent>
</Select>
</div>
<div className="grid grid-cols-2 gap-4">