Added theme switcher + optimized youtube loading + about changes

frontend/components/planning.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { ApiResponse, request, useApi } from "@/hooks/use-api";
+import { ApiResponse, request } from "@/hooks/use-api";
 import "@schedule-x/theme-shadcn/dist/index.css";
 import { useNextCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
 import { createEventsServicePlugin } from "@schedule-x/events-service";
@@ -26,17 +26,24 @@ import { Label } from "@/components/ui/label";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { KeyedMutator } from "swr";
+import { getCookie } from "cookies-next";
+import { useTheme } from "next-themes";
 
 const Planning: React.FC<{
 	events: CalendarEventExternal[];
 	mutate?: KeyedMutator<ApiResponse<CalendarEventExternal[]>>;
 }> = ({ events, mutate }) => {
-	const plugins = [
-		createEventsServicePlugin(),
-		createDragAndDropPlugin(),
-		createResizePlugin(),
-		createEventRecurrencePlugin(),
-	];
+	const { resolvedTheme } = useTheme();
+	console.log(resolvedTheme);
+	const isConnected = getCookie("auth_token");
+	const plugins = isConnected
+		? [
+				createEventsServicePlugin(),
+				createDragAndDropPlugin(),
+				createResizePlugin(),
+				createEventRecurrencePlugin(),
+			]
+		: [];
 	const [eventSelected, setEventSelected] =
 		useState<CalendarEventExternal | null>(null);
 	const [newEvent, setNewEvent] = useState<Omit<
@@ -70,7 +77,7 @@ const Planning: React.FC<{
 			theme: "shadcn",
 			views: [createViewDay(), createViewWeek()],
 			defaultView: "week",
-			isDark: true,
+			isDark: resolvedTheme === "dark" ? true : false,
 			isResponsive: true,
 			locale: "fr-FR",
 			dayBoundaries: {
@@ -102,6 +109,10 @@ const Planning: React.FC<{
 		calendar?.events.getAll();
 	}, []);
 
+	useEffect(() => {
+		calendar?.setTheme(resolvedTheme === "dark" ? "dark" : "light");
+	}, [resolvedTheme]);
+
 	const AddButton: React.FC = () => (
 		<Button onClick={() => setNewEvent({})} variant="outline">
 			Nouveau