Refactor ThemeProvider component: Simplify theme initialization logic by loading the theme from localStorage directly in the state hook, improving code clarity and reducing unnecessary effects. Update AdminPanel component by removing unused Link import, and fix button text encoding in EventsPageSection for proper display.

components/admin/AdminPanel.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { useState } from "react";
-import Link from "next/link";
 import UserManagement from "@/components/admin/UserManagement";
 import EventManagement from "@/components/admin/EventManagement";
 import FeedbackManagement from "@/components/admin/FeedbackManagement";

components/events/EventsPageSection.tsx

@@ -521,7 +521,7 @@ export default function EventsPageSection({
         )}
         {getEventStatus(event) === "LIVE" && (
           <Button variant="danger" size="md" className="w-full animate-pulse">
-            Connectez-vous à Teams, c'est maintenant !
+            Connectez-vous à Teams, c&apos;est maintenant !
           </Button>
         )}
         {getEventStatus(event) === "PAST" && (
@@ -812,7 +812,7 @@ export default function EventsPageSection({
                   size="lg"
                   className="w-full animate-pulse"
                 >
-                  Connectez-vous à Teams, c'est maintenant !
+                  Connectez-vous à Teams, c&apos;est maintenant !
                 </Button>
               </div>
             )}

contexts/ThemeContext.tsx

@@ -1,6 +1,12 @@
 "use client";
 
-import { createContext, useContext, useEffect, useState, ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  ReactNode,
+} from "react";
 
 type Theme = "dark" | "dark-cyan";
 
@@ -17,27 +23,26 @@ interface ThemeProviderProps {
   initialTheme?: Theme;
 }
 
-export function ThemeProvider({ children, initialTheme = "dark-cyan" }: ThemeProviderProps) {
-  const [theme, setThemeState] = useState<Theme>(initialTheme);
-  const [mounted, setMounted] = useState(false);
+export function ThemeProvider({
+  children,
+  initialTheme = "dark-cyan",
+}: ThemeProviderProps) {
+  const [theme, setThemeState] = useState<Theme>(() => {
+    // Initialize theme from localStorage if available, otherwise use initialTheme
+    if (typeof window !== "undefined") {
+      const savedTheme = localStorage.getItem("theme") as Theme | null;
+      if (savedTheme && (savedTheme === "dark" || savedTheme === "dark-cyan")) {
+        return savedTheme;
+      }
+    }
+    return initialTheme;
+  });
 
   useEffect(() => {
-    setMounted(true);
     // Apply theme class to document element
     document.documentElement.className = theme;
   }, [theme]);
 
-  useEffect(() => {
-    if (mounted) {
-      // Load theme from localStorage if available
-      const savedTheme = localStorage.getItem("theme") as Theme | null;
-      if (savedTheme && (savedTheme === "dark" || savedTheme === "dark-cyan")) {
-        setThemeState(savedTheme);
-        document.documentElement.className = savedTheme;
-      }
-    }
-  }, [mounted]);
-
   const setTheme = (newTheme: Theme) => {
     setThemeState(newTheme);
     document.documentElement.className = newTheme;
@@ -63,4 +68,3 @@ export function useTheme() {
   }
   return context;
 }
-